feat(Pagination): new component (#257)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Haytham A. Salama <haythamasalama@gmail.com>

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

@@ -366,6 +366,41 @@ const filteredRows = computed(() => {
 ```
 ::
 
+### 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 = 5
+
+const rows = computed(() => {
+  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
+})
+</script>
+
+<template>
+  <div>
+    <UTable :rows="rows" />
+
+    <UPagination v-model="page" :page-count="pageCount" :total="people.length" />
+  </div>
+</template>
+```
+::
+
 ### Empty
 
 Use the `empty-state` prop to display a message when there are no results.

docs/content/5.navigation/1.vertical-navigation.md

@@ -39,11 +39,9 @@ const links = [{
 ```
 ::
 
-## Themes
+## Theme
 
-Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
-
-### Tailwind
+Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
 
 ::component-example
 #default

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

@@ -0,0 +1,186 @@
+---
+github: true
+description: Add a pagination to handle pages.
+---
+
+## Usage
+
+Use a `v-model` to get a reactive page alongside a `total` which represents the total of items. You can also use the `page-count` prop to define the number of items per page which defaults to `10`.
+
+::component-example
+#default
+:pagination-example-basic
+
+#code
+```vue
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</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-card
+---
+baseProps:
+  modelValue: 1
+props:
+  max: 5
+  pageCount: 5
+  total: 100
+excludedProps:
+  - pageCount
+  - total
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the buttons.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  size: 'sm'
+ui:
+  size:
+    2xs: true
+    xs: true
+    sm: true
+    md: true
+    lg: true
+    xl: true
+---
+::
+
+### Active / Inactive
+
+Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  activeButton:
+    variant: 'outline'
+  inactiveButton:
+    color: 'gray'
+excludedProps:
+  - activeButton
+  - inactiveButton
+---
+::
+
+### Prev / Next
+
+Use the `prev-button` and `next-button` props to customize the prev and next buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  prevButton:
+    icon: 'i-heroicons-arrow-small-left-20-solid'
+    label: Prev
+    color: 'gray'
+  nextButton:
+    icon: 'i-heroicons-arrow-small-right-20-solid'
+    trailing: true
+    label: Next
+    color: 'gray'
+excludedProps:
+  - prevButton
+  - nextButton
+---
+::
+
+## Theme
+
+Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
+
+::component-example
+#default
+:pagination-theme-rounded
+#code
+```vue
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination
+    v-model="page"
+    :total="items.length"
+    :ui="{
+      wrapper: 'flex items-center gap-1',
+      rounded: 'rounded-full min-w-[32px] justify-center'
+    }"
+    :prev-button="null"
+    :next-button="{
+      icon: 'i-heroicons-arrow-small-right-20-solid',
+      color: 'primary',
+      variant: 'outline'
+    }"
+  />
+</template>
+```
+::
+
+## Slots
+
+### `prev` / `next`
+
+Use the `#prev` and `#next` slots to set the content of the previous and next buttons.
+
+::component-example
+#default
+:pagination-example-prev-next-slots
+
+#code
+```vue
+<script setup>
+const page = ref(1);
+const items = ref(Array(55));
+</script>
+
+<template>
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
+    <template #prev="{ onClick }">
+      <UTooltip text="Previous page">
+        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
+      </UTooltip>
+    </template>
+
+    <template #next="{ onClick }">
+      <UTooltip text="Next page">
+        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
+      </UTooltip>
+    </template>
+  </UPagination>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset