feat(pagination): create component + docs

docs/components/content/examples/PaginationExampleBasic.vue

@@ -0,0 +1,8 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :page-count="5" :total="items.length" />
+</template>

docs/components/content/examples/PaginationExampleMax.vue

@@ -0,0 +1,8 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(100))
+</script>
+
+<template>
+  <UPagination v-model="page" :page-count="5" :total="items.length" :max="11" />
+</template>

docs/components/content/examples/TableExamplePaginable.vue

@@ -0,0 +1,53 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: '[email protected]',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: '[email protected]',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: '[email protected]',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: '[email protected]',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: '[email protected]',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: '[email protected]',
+  role: 'Member'
+}]
+
+const page = ref(1)
+const pageCount = 2
+
+const peoplePage = computed(() => {
+  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-y-2 pb-2">
+    <UTable :rows="peoplePage" />
+    <UPagination v-model="page" :page-count="pageCount" :total="people.length" class="place-self-center" />
+  </div>
+</template>

docs/content/4.data/1.table.md

@@ -400,6 +400,40 @@ excludedProps:
 ---
 ::
 
+### Paginable
+
+You can easily use the [Pagination](/navigation/pagination) component to paginate the rows.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:table-example-paginable{class="w-full"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+const page = ref(1)
+const pageCount = 2
+
+const peoplePage = computed(() => {
+  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
+})
+</script>
+
+<template>
+  <div>
+    <UTable :rows="peoplePage" />
+    <UPagination v-model="page" :page-count="pageCount" :total="people.length" />
+  </div>
+</template>
+```
+::
+
 ## Slots
 
 You can use slots to customize the header and data cells of the table.

docs/content/5.navigation/3.pagination.md

@@ -0,0 +1,54 @@
+---
+github: true
+description: Add a pagination to handle pages.
+---
+
+## Usage
+
+`Pagination` allows you to navigate through pages given a `total` which represents a number of items per page.
+
+::component-example
+#default
+:pagination-example-basic
+
+#code
+```vue
+<script setup>
+const page = ref(1)
+const items = ref([...])
+</script>
+
+<template>
+  <UPagination v-model="page" :page-count="5" :total="items.length" />
+</template>
+```
+::
+
+### Max
+
+Use the `max` prop to set a maximum of displayed pages. Defaults to `7`, being the minimum.
+
+::component-example
+#default
+:pagination-example-max
+
+#code
+```vue
+<script setup>
+const page = ref(1)
+const items = ref([...])
+</script>
+
+<template>
+  <UPagination v-model="page" :page-count="5" :total="items.length" :max="15" />
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

src/runtime/app.config.ts

@@ -633,6 +633,20 @@ const commandPalette = {
   }
 }
 
+const pagination = {
+  default: {
+    size: 'sm',
+    activeButton: {
+      color: 'primary'
+    },
+    inactiveButton: {
+      color: 'white'
+    },
+    prevIcon: 'i-heroicons-chevron-left-20-solid',
+    nextIcon: 'i-heroicons-chevron-right-20-solid'
+  }
+}
+
 // Overlays
 
 const modal = {
@@ -840,6 +854,7 @@ export default {
     skeleton,
     verticalNavigation,
     commandPalette,
+    pagination,
     modal,
     slideover,
     popover,