From f2931581a13c9ac8d6c763f66c6aae0b376b8c5c Mon Sep 17 00:00:00 2001
From: luohuidong <luohuidong01@126.com>
Date: Tue, 19 Mar 2024 00:08:13 +0800
Subject: [PATCH] docs: add documentation for the pagination component

---
 packages/vue-docs/docs/.vitepress/config.ts   |  1 +
 .../pagination/ShowCaseBaseUsage.vue          | 27 ++++++++++++++
 .../data-display/pagination/index.md          | 35 +++++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 packages/vue-docs/docs/components/data-display/pagination/ShowCaseBaseUsage.vue
 create mode 100644 packages/vue-docs/docs/components/data-display/pagination/index.md

diff --git a/packages/vue-docs/docs/.vitepress/config.ts b/packages/vue-docs/docs/.vitepress/config.ts
index 51b59d0..30be034 100644
--- a/packages/vue-docs/docs/.vitepress/config.ts
+++ b/packages/vue-docs/docs/.vitepress/config.ts
@@ -48,6 +48,7 @@ export default defineConfig({
               { text: "Table", link: "/components/data-display/table/" },
               { text: "Tag", link: "/components/data-display/tag/" },
               { text: "Tooltip", link: "/components/data-display/tooltip/" },
+              { text: "Pagination", link: "/components/data-display/pagination/" },
             ],
           },
           {
diff --git a/packages/vue-docs/docs/components/data-display/pagination/ShowCaseBaseUsage.vue b/packages/vue-docs/docs/components/data-display/pagination/ShowCaseBaseUsage.vue
new file mode 100644
index 0000000..e66cdde
--- /dev/null
+++ b/packages/vue-docs/docs/components/data-display/pagination/ShowCaseBaseUsage.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { UniPagination } from "unify-ui";
+
+const total = ref(100);
+const pageSize = ref(10);
+const current = ref(1);
+
+function handleChange(params: { current: number; pageSize: number }) {
+  console.log(params);
+  current.value = params.current;
+  pageSize.value = params.pageSize;
+}
+</script>
+
+<template>
+  <div>total: {{ total }}</div>
+  <div>pageSize: {{ pageSize }}</div>
+  <div>current: {{ current }}</div>
+
+  <UniPagination
+    :total="total"
+    :page-size="pageSize"
+    :current="current"
+    @chagne="handleChange"
+  ></UniPagination>
+</template>
diff --git a/packages/vue-docs/docs/components/data-display/pagination/index.md b/packages/vue-docs/docs/components/data-display/pagination/index.md
new file mode 100644
index 0000000..458330c
--- /dev/null
+++ b/packages/vue-docs/docs/components/data-display/pagination/index.md
@@ -0,0 +1,35 @@
+<script setup lang='ts'>
+import ShowCaseBaseUsage from './ShowCaseBaseUsage.vue'
+</script>
+
+# Pagination
+
+## Basic Usage
+
+::: raw
+<ShowCaseBaseUsage />
+:::
+
+::: details View Source
+<<< @/components/data-display/pagination/ShowCaseBaseUsage.vue
+:::
+
+## API
+
+### Properties
+
+```ts
+defineProps<{
+  total: number;
+  pageSize: number;
+  current: number;
+}>();
+```
+
+### Events
+
+```ts
+const emits = defineEmits<{
+  (e: "chagne", params: { current: number; pageSize: number }): void;
+}>();
+```