feat: 添加Pagination组件

docs/.vitepress/config.mts

@@ -62,6 +62,10 @@ const components = [
           text: 'Breadcrumb 面包屑',
           link: '/components/Breadcrumb'
         },
+        {
+          text: 'Pagination 分页',
+          link: '/components/Pagination'
+        },
       ]
     },
 ]

docs/components/Pagination.md

@@ -0,0 +1,74 @@
+---
+title: Pagination 分页
+lang: zh-CN
+---
+
+# Pagination 分页
+
+采用分页的形式分隔长列表，每次只加载一个页面。
+
+## 基本使用
+
+基本分页。
+
+<demo src="../../../../example/pagination/basic.svelte"  github='Pagination'></demo>
+
+## 更多
+
+更多分页。
+
+<demo src="../../../../example/pagination/more-page.svelte"  github='Pagination'></demo>
+
+
+## 改变
+
+改变每页显示条目数。
+
+<demo src="../../../../example/pagination/size-options.svelte"  github='Pagination'></demo>
+
+## 跳转
+
+快速跳转到某一页。
+
+<demo src="../../../../example/pagination/quick-jumper.svelte"  github='Pagination'></demo>
+
+## 总计
+
+使用`total`插槽展示总计。
+
+<demo src="../../../../example/pagination/total.svelte"  github='Pagination'></demo>
+
+## 全部展示
+
+展示所有配置选项。
+
+<demo src="../../../../example/pagination/all.svelte"  github='Pagination'></demo>
+
+## Props 属性
+
+| 属性             | 说明                                                      | 类型       | 默认值              | 版本 |
+| ---------------- | --------------------------------------------------------- | ---------- | ------------------- | ---- |
+| current          | 当前页数                                                  | `number`   | -                   |      |
+| defaultCurrent   | 默认的当前页数                                            | `number`   | `1`                 |      |
+| defaultPageSize  | 默认的每页条数                                            | `number`   | `10`                |
+| disabled         | 禁用分页                                                  | `boolean`  | -                   |      |
+| hideOnSinglePage | 只有一页时是否隐藏分页器                                  | `boolean`  | `false`             |      |
+| pageSize         | 每页条数                                                  | `number`   | -                   |      |
+| pageSizeOptions  | 指定每页可以显示多少条                                    | `number[]` | `[10, 20, 50, 100]` |      |
+| showQuickJumper  | 是否可以快速跳转至某页                                    | `boolean`  | `false`             |      |
+| showSizeChanger  | 是否展示 pageSize 切换器，当`total`大于`50`时默认为`true` | `boolean`  | `false`             |      |
+| showTitle        | 是否显示原生 tooltip 页码提示                             | `boolean`  | `true`              |      |
+| total            | 数据总数                                                  | `number`   | `0`                 |      |
+
+## Events 事件
+
+| 事件           | 说明                                                     | 类型                                |
+| -------------- | -------------------------------------------------------- | ----------------------------------- |
+| change         | 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 | `(value: {page, pageSize}) => void` |
+| showSizeChange | pageSize 变化的回调                                      | `(value: {current, size}) => void`  |
+
+## Slots 插槽
+
+| 插槽名 | 说明           |
+| ------ | -------------- |
+| total  | 自定义总计内容 |

docs/example/pagination/all.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { Pagination } from 'adorn-ui'
+</script>
+
+<Pagination
+  defaultCurrent={1}
+  total={500}
+  showQuickJumper
+  showSizeChanger
+  showTitle
+>
+  <span slot="total" let:total>总共{total}记录</span>
+</Pagination>

docs/example/pagination/basic.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { Pagination } from 'adorn-ui'
+</script>
+
+<Pagination defaultCurrent={1} total={50} />

docs/example/pagination/more-page.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { Pagination } from 'adorn-ui'
+</script>
+
+<Pagination defaultCurrent={5} total={500} />

docs/example/pagination/quick-jumper.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Space, Pagination } from 'adorn-ui'
+</script>
+
+<Space direction="vertical">
+  <Pagination defaultCurrent={1} total={50} showQuickJumper />
+  <Pagination defaultCurrent={1} total={50} showQuickJumper disabled />
+</Space>

docs/example/pagination/size-options.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Pagination, Space } from 'adorn-ui'
+</script>
+
+<Space direction="vertical">
+  <Pagination defaultCurrent={1} total={500} />
+  <Pagination defaultCurrent={1} total={500} disabled />
+</Space>

docs/example/pagination/total.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { Pagination } from 'adorn-ui'
+</script>
+
+<Pagination defaultCurrent={1} total={50}>
+  <span slot="total" let:total>总共{total}记录</span>
+</Pagination>