@daflow-ui/ui-pagination

@daflow-ui/pagination

基于 Ark UI 封装的 Pagination 组件（单体组件包），支持 v-model、页码跳转、禁用状态等功能。

💡 单体组件设计：独立发布、按需升级，避免"组件库"的整体升级障碍

📦 安装

npm install @daflow-ui/pagination
# or
pnpm add @daflow-ui/pagination

🚀 快速开始

全局引入样式（在 main.ts 中）：

import '@daflow-ui/pagination/style.css'

在组件中使用：

<script setup lang="ts">
import { ref } from 'vue'
import { DfPagination } from '@daflow-ui/pagination'

const currentPage = ref(1)

const handlePageChange = (page: number) => {
  console.log('当前页:', page)
}
</script>

<template>
  <DfPagination
    v-model:current-page="currentPage"
    :page-size="10"
    :total="100"
    @current-change="handlePageChange"
  />
</template>

📖 API

DfPagination Props

属性	类型	默认值	说明
currentPage	number	1	当前页码（支持 v-model:current-page）
pageSize	number	10	每页显示条数
total	number	0	总数据条数

DfPagination Events

事件	参数	说明
current-change	(page: number)	页码改变时触发

📝 文档

组件文档（本仓库）

• COMPONENT_SPEC.md - 完整的组件 API 规格
• DECISIONS.md - 设计决策记录

开发规范

本组件遵循 DaFlow UI 组件库的统一开发规范。

📖 通用开发规范：（TODO: 添加在线文档链接或规范仓库 URL）

🛠️ 本地开发

# 安装依赖
pnpm install

# 启动开发环境（playground 使用源码，支持热更新）
pnpm dev

# 代码检查
pnpm lint
pnpm typecheck

# 构建产物
pnpm build

# 发布前检查（自动执行 lint + typecheck + build）
pnpm prepublishOnly

🏗️ 项目结构

ui-pagination/
├── src/                 # 组件源码
│   ├── index.ts        # 入口（对外导出 DfPagination）
│   ├── Pagination.vue  # Pagination 组件
│   ├── types.ts        # 类型定义
│   └── style.css       # 样式
├── playground/         # 开发预览
├── docs/              # 组件文档
├── dist/              # 构建产物（发布到 npm）
└── package.json       # 包配置

📄 License

MIT