iter: b04 新增独立 pagination 分页器并与 dataTable 页码联动

packages/skin/ui/ua.manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "@ui-arch/ui",
   "type": "skin-dom",
-  "description": "DOM 皮肤组件库：button / textField / textarea / checkbox / switch / select / radioGroup / card / badge / alert / toast / tooltip / skeleton / spinner / progress / tabs / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
+  "description": "DOM 皮肤组件库：button / textField / textarea / checkbox / switch / select / radioGroup / card / badge / alert / toast / tooltip / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
   "tags": [
     "components",
     "dom",
@@ -26,6 +26,7 @@
       "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本",
       "tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起",
       "skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画",
+      "pagination(props)：独立分页器，page 信号双向绑定，页码过多折叠省略号，首末页禁用翻页，键盘可达",
       "spinner(props)：加载指示器，size 控制直径",
       "progress(props)：进度条，轨道 + 渐变流动填充，value 信号驱动 0-100，满格切 success 色",
       "tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
@@ -49,6 +50,7 @@
       "ToastProps",
       "TooltipProps",
       "SkeletonProps",
+      "PaginationProps",
       "SpinnerProps",
       "ProgressProps",
       "TabsProps",
@@ -67,7 +69,7 @@
     "语义色 variant 四档：default|info / success / warning / danger，一律来自令牌，禁止硬编码颜色"
   ],
   "docs": {
-    "intro": "19 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
+    "intro": "20 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
     "steps": [
       "安装依赖：pnpm add @ui-arch/ui @ui-arch/frame（workspace 内自动链接）",
       "引入样式：在应用入口 import '@ui-arch/ui/ui.css'，暗色主题在根元素设 data-theme='dark'",
@@ -527,6 +529,45 @@
           "键盘可访问：Tab 聚焦激活页签，←→ 在启用页签间环形移动"
         ]
       },
+      {
+        "id": "pagination",
+        "title": "分页器 Pagination",
+        "demo": "sec-table",
+        "props": [
+          {
+            "n": "page",
+            "t": "Signal<number>",
+            "r": 1,
+            "d": "当前页码信号，双向绑定：外部赋值自动翻页，点击页码写回信号"
+          },
+          {
+            "n": "pageSize",
+            "t": "number",
+            "r": 1,
+            "d": "每页条数"
+          },
+          {
+            "n": "total",
+            "t": "number",
+            "r": 1,
+            "d": "总条数"
+          },
+          {
+            "n": "onChange",
+            "t": "(page: number) => void",
+            "k": 1,
+            "d": "翻页回调"
+          }
+        ],
+        "example": "const page = signal(1); pagination({ page, pageSize: 3, total: 24, onChange: (p) => console.log(p) })",
+        "steps": [
+          "创建页码信号 page = signal(1)，与 pageSize / total 一起传入",
+          "页码 ≤7 全部展开；更多时只保留首尾与当前页 ±1，缺口折叠为省略号",
+          "首末页自动禁用 ‹ › 翻页按钮，当前页禁点并标记 aria-current",
+          "与 dataTable 联动：把同一个 page 信号传给 dataTable 的 page 参数，两处翻页自动同步",
+          "键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发"
+        ]
+      },
       {
         "id": "modal",
         "title": "弹窗 Modal",
@@ -659,6 +700,11 @@
             "n": "selectable",
             "t": "boolean",
             "d": "启用行选择列：全选三态（含半选）、行 checkbox、已选计数；缺省 false"
+          },
+          {
+            "n": "page",
+            "t": "Signal<number>",
+            "d": "受控页码信号：与内核分页双向同步，传同一个信号给独立 pagination 组件即可联动"
           }
         ],
         "example": "dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓名', sortable: true }], pageSize: 5 })",
@@ -668,7 +714,8 @@
           "selectable: true 开启行选择：表头全选框带 indeterminate 半选态，工具栏显示已选计数",
           "选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失",
           "工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行",
-          "表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供"
+          "表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供",
+          "需要独立分页器联动时传 page 信号：const page = signal(1)，dataTable({ page }) 与 pagination({ page }) 共用"
         ]
       }
     ]