From 5b62a8c8caa98e6cb73c1fbd93b57ccae0dcb56a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 26 Sep 2024 17:00:54 +0200
Subject: [PATCH] docs(pagination): update

---
 .../pagination/PaginationLinksExample.vue     |  16 +
 docs/content/3.components/pagination.md       | 347 +++++++++++++++++-
 docs/nuxt.config.ts                           |   1 +
 3 files changed, 361 insertions(+), 3 deletions(-)
 create mode 100644 docs/app/components/content/examples/pagination/PaginationLinksExample.vue

diff --git a/docs/app/components/content/examples/pagination/PaginationLinksExample.vue b/docs/app/components/content/examples/pagination/PaginationLinksExample.vue
new file mode 100644
index 00000000..1f39e98d
--- /dev/null
+++ b/docs/app/components/content/examples/pagination/PaginationLinksExample.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const page = ref(5)
+
+function to(page: number) {
+  return {
+    query: {
+      page
+    },
+    hash: '#with-links'
+  }
+}
+</script>
+
+<template>
+  <UPagination v-model:page="page" :total="100" :to="to" :sibling-count="1" show-edges />
+</template>
diff --git a/docs/content/3.components/pagination.md b/docs/content/3.components/pagination.md
index 46cc1223..20d78009 100644
--- a/docs/content/3.components/pagination.md
+++ b/docs/content/3.components/pagination.md
@@ -7,15 +7,356 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Pagination.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
 
+Use the `default-page` prop or the `v-model:page` directive to control the current page.
+
+::note
+The Pagination component uses some [Button](/components/button) to display the pages, use [`color`](#color), [`variant`](#variant) and [`size`](#size) props to style them.
+::
+
+### Total
+
+Use the `total` prop to set the total number of items in the list.
+
+::component-code
+---
+external:
+  - page
+model:
+  - page
+props:
+  page: 5
+  total: 100
+---
+::
+
+### Items Per Page
+
+Use the `items-per-page` prop to set the number of items per page. Defaults to `10`.
+
+::component-code
+---
+ignore:
+  - page
+external:
+  - page
+model:
+  - page
+props:
+  page: 5
+  itemsPerPage: 20
+  total: 100
+---
+::
+
+### Sibling Count
+
+Use the `sibling-count` prop to set the number of siblings to show. Defaults to `2`.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+props:
+  page: 5
+  siblingCount: 1
+  total: 100
+---
+::
+
+### Show Edges
+
+Use the `show-edges` prop to always show the ellipsis, first and last pages. Defaults to `false`.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+props:
+  page: 5
+  showEdges: true
+  siblingCount: 1
+  total: 100
+---
+::
+
+### Show Controls
+
+Use the `show-controls` prop to show the first, prev, next and last buttons. Defaults to `true`.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+props:
+  page: 5
+  showControls: false
+  showEdges: true
+  total: 100
+---
+::
+
+### Color
+
+Use the `color` prop to set the color of the inactive controls. Defaults to `gray`.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+items:
+  color:
+    - primary
+    - green
+    - red
+    - orange
+    - amber
+    - yellow
+    - lime
+    - emerald
+    - teal
+    - cyan
+    - sky
+    - blue
+    - indigo
+    - violet
+    - purple
+    - fuchsia
+    - pink
+    - rose
+    - gray
+props:
+  page: 5
+  color: primary
+  total: 100
+---
+::
+
+### Variant
+
+Use the `variant` prop to set the variant of the inactive controls. Defaults to `outline`.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+items:
+  color:
+    - primary
+    - green
+    - red
+    - orange
+    - amber
+    - yellow
+    - lime
+    - emerald
+    - teal
+    - cyan
+    - sky
+    - blue
+    - indigo
+    - violet
+    - purple
+    - fuchsia
+    - pink
+    - rose
+    - gray
+  variant:
+    - solid
+    - outline
+    - soft
+    - subtle
+    - ghost
+    - link
+props:
+  page: 5
+  color: gray
+  variant: subtle
+  total: 100
+---
+::
+
+### Active Color
+
+Use the `active-color` prop to set the color of the active control. Defaults to `primary`.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+items:
+  activeColor:
+    - primary
+    - green
+    - red
+    - orange
+    - amber
+    - yellow
+    - lime
+    - emerald
+    - teal
+    - cyan
+    - sky
+    - blue
+    - indigo
+    - violet
+    - purple
+    - fuchsia
+    - pink
+    - rose
+    - gray
+props:
+  page: 5
+  activeColor: gray
+  total: 100
+---
+::
+
+### Active Variant
+
+Use the `active-variant` prop to set the variant of the active control. Defaults to `solid`.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+items:
+  activeColor:
+    - primary
+    - green
+    - red
+    - orange
+    - amber
+    - yellow
+    - lime
+    - emerald
+    - teal
+    - cyan
+    - sky
+    - blue
+    - indigo
+    - violet
+    - purple
+    - fuchsia
+    - pink
+    - rose
+    - gray
+  activeVariant:
+    - solid
+    - outline
+    - soft
+    - subtle
+    - ghost
+    - link
+props:
+  page: 5
+  activeColor: primary
+  activeVariant: subtle
+  total: 100
+---
+::
+
+### Size
+
+Use the `size` prop to set the size of the controls. Defaults to `md`.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+items:
+  size:
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+props:
+  page: 5
+  size: xl
+  total: 100
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the pagination controls.
+
+::component-code
+---
+ignore:
+  - page
+  - total
+external:
+  - page
+model:
+  - page
+props:
+  page: 5
+  total: 100
+  disabled: true
+---
+::
+
 ## Examples
 
+### With links
+
+Use the `to` prop to transform buttons into links. Pass a function that receives the page number and returns a route destination.
+
+::component-example
+---
+name: 'pagination-links-example'
+---
+::
+
+::note
+In this example we're adding the `#with-links` hash to avoid going to the top of the page.
+::
+
 ## API
 
 ### Props
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 33222d9d..13950539 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -168,6 +168,7 @@ export default defineNuxtConfig({
         'ULink',
         'UModal',
         'UNavigationMenu',
+        'UPagination',
         'UPopover',
         'UProgress',
         'URadioGroup',