@manohub/ui 0.6.0

package/dist/components/table/index.d.ts

@@ -0,0 +1,351 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+export interface TableColumn {
+    /** 取数键（也是单元格插槽的标识） */
+    key: string;
+    /** 列标题 */
+    title: string;
+    /** 列宽（`width` 或 `min-width` 都能写，如 `'120px'`、`'20%'`） */
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    /** 长文本省略（表头仍完整） */
+    ellipsis?: boolean;
+    /** 必填列：表头加星号 */
+    required?: boolean;
+    /** 可排序：本件只发事件与显示态，**排序算法归调用方** */
+    sortable?: boolean;
+}
+export type TableSortOrder = 'asc' | 'desc' | null;
+/** 行数据：至少能用 `rowKey` 取到稳定标识 */
+export type TableRow = Record<string, unknown>;
+/** 行级事件（`onRow` 的返回）：给整行挂点击与类，省掉「每列都写一次 onClick」 */
+export interface TableRowProps {
+    class?: string;
+    onClick?: (row: TableRow, index: number, event: MouseEvent) => void;
+}
+/** 分页档：`false` 不渲染；给对象就渲染分页条（**本件不切片，`data` 是当前页数据**） */
+export interface TablePagination {
+    total: number;
+    current?: number;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onChange?: (page: number, pageSize: number) => void;
+}
+/**
+ * 表格（**自绘**；列 × 数据的表格骨架 + 选择列 + 展开行 + 排序事件 + 分页 + 三态）。
+ *
+ * ## 这个组件负责什么、不负责什么（都是刻意的）
+ *
+ * **负责**：把 `columns` × `data` 渲成表格；列对齐/宽度/省略/必填；行选中（勾选列复用本包的 `Checkbox`
+ * 组件 —— 它内部才是真实 `<input type="checkbox">`，故面上的 `tr:has(input:checked)` 零 JS 路径仍成立）；
+ * 展开行；排序按钮的**状态与事件**；加载态与空态；分页条的排布与事件透传；
+ * `rowClass` / `onRow` 让调用方标分组行、禁用行与挂行级点击。
+ *
+ * **不负责**：
+ *
+ * - **排序与列宽拖拽的算法**：规范只给了 `↕` 字形与拖拽线这两处视觉，而 `↕` 是文字符号（本包禁拿文字
+ *   符号冒充图标），故朝向改用现成字形 `chevron-up` / `chevron-down` 表达 —— 本件发 `sort` 事件、画态，
+ *   真正排序、真正改列宽由调用方决定（它有数据、也知道业务口径）；
+ * - **分页切片**：`pagination` 只渲染分页条并把页码事件透传出去，**`data` 始终是当前页数据** ——
+ *   组件自己切片会让「服务端分页」与「客户端分页」两套口径藏在同一个 prop 里；
+ * - **错误态**：归 `QueryState`（表格只管列数据）。
+ *
+ * @example
+ * <Table
+ *   :columns="[{key:'name',title:'名称'},{key:'amount',title:'金额',align:'right'}]"
+ *   :data="rows" row-key="id" striped selectable v-model="selected"
+ *   :pagination="{ total: 120, current: page, onChange: (p) => (page = p) }"
+ *   @sort="({ key, order }) => (sortKey = key, sortOrder = order)"
+ * />
+ */
+export declare const Table: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<TableColumn[]>;
+        required: true;
+    };
+    data: {
+        type: PropType<TableRow[]>;
+        default: () => never[];
+    };
+    /** 行标识字段名（选中态记的是它的值） */
+    rowKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 选中行的 key 列表（`v-model`） */
+    modelValue: {
+        type: PropType<Array<string | number>>;
+        default: undefined;
+    };
+    /** 选择列 */
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 斑马纹（**显式类**而非 nth-child：表里可能有分组行） */
+    striped: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档：`sm` 紧凑（表格嵌在卡片里）/ `md` 标准 / `lg` 宽松（详情页） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 紧凑档（= `size="sm"`，保留的既有写法） */
+    compact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderless: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 外框交给包裹层（满高表格用） */
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyHead: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyCol: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 加载态：内容上盖一层浅罩 + 转圈（**行高不塌**，避免加载时表格跳动） */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 隐藏表头（纯展示的键值表用） */
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 空数据文案（表格内的空态；要插画与操作按钮就用 `empty` 插槽） */
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 受控排序键与方向（由调用方给，本件只显示） */
+    sortKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sortOrder: {
+        type: PropType<TableSortOrder>;
+        default: null;
+    };
+    /** 给某行追加类（分组行 / 禁用行 / 静态选中档由调用方标） */
+    rowClass: {
+        type: PropType<(row: TableRow, index: number) => string>;
+        default: undefined;
+    };
+    /** 行级事件：`(row, index) => ({ class, onClick })` */
+    onRow: {
+        type: PropType<(row: TableRow, index: number) => TableRowProps>;
+        default: undefined;
+    };
+    /** 展开行：给了就出现展开列；返回的内容渲染在行下方的整宽格子里 */
+    expandable: {
+        type: PropType<(row: TableRow, index: number) => VNodeChild>;
+        default: undefined;
+    };
+    /** 展开行的 key（受控） */
+    expandedKeys: {
+        type: PropType<Array<string | number>>;
+        default: undefined;
+    };
+    /** 展开行的 key（非受控初值） */
+    defaultExpandedKeys: {
+        type: PropType<Array<string | number>>;
+        default: () => never[];
+    };
+    /** 展开变化（受控与非受控都会调） */
+    onExpandChange: {
+        type: PropType<(keys: Array<string | number>) => void>;
+        default: undefined;
+    };
+    /** 分页档：`false` 不渲染底部分页条 */
+    pagination: {
+        type: PropType<false | TablePagination>;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** 选中行 key 列表（`v-model`） */
+    'update:modelValue': (keys: Array<string | number>) => boolean;
+    /** 选中变化（与 `v-model` 同时发，方便只听不接管） */
+    change: (keys: Array<string | number>) => boolean;
+    /** 排序请求：本件只发事件与显示态，**排序由调用方做** */
+    sort: (payload: {
+        key: string;
+        order: TableSortOrder;
+    }) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<TableColumn[]>;
+        required: true;
+    };
+    data: {
+        type: PropType<TableRow[]>;
+        default: () => never[];
+    };
+    /** 行标识字段名（选中态记的是它的值） */
+    rowKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 选中行的 key 列表（`v-model`） */
+    modelValue: {
+        type: PropType<Array<string | number>>;
+        default: undefined;
+    };
+    /** 选择列 */
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 斑马纹（**显式类**而非 nth-child：表里可能有分组行） */
+    striped: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档：`sm` 紧凑（表格嵌在卡片里）/ `md` 标准 / `lg` 宽松（详情页） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 紧凑档（= `size="sm"`，保留的既有写法） */
+    compact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderless: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 外框交给包裹层（满高表格用） */
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyHead: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyCol: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 加载态：内容上盖一层浅罩 + 转圈（**行高不塌**，避免加载时表格跳动） */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 隐藏表头（纯展示的键值表用） */
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 空数据文案（表格内的空态；要插画与操作按钮就用 `empty` 插槽） */
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 受控排序键与方向（由调用方给，本件只显示） */
+    sortKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sortOrder: {
+        type: PropType<TableSortOrder>;
+        default: null;
+    };
+    /** 给某行追加类（分组行 / 禁用行 / 静态选中档由调用方标） */
+    rowClass: {
+        type: PropType<(row: TableRow, index: number) => string>;
+        default: undefined;
+    };
+    /** 行级事件：`(row, index) => ({ class, onClick })` */
+    onRow: {
+        type: PropType<(row: TableRow, index: number) => TableRowProps>;
+        default: undefined;
+    };
+    /** 展开行：给了就出现展开列；返回的内容渲染在行下方的整宽格子里 */
+    expandable: {
+        type: PropType<(row: TableRow, index: number) => VNodeChild>;
+        default: undefined;
+    };
+    /** 展开行的 key（受控） */
+    expandedKeys: {
+        type: PropType<Array<string | number>>;
+        default: undefined;
+    };
+    /** 展开行的 key（非受控初值） */
+    defaultExpandedKeys: {
+        type: PropType<Array<string | number>>;
+        default: () => never[];
+    };
+    /** 展开变化（受控与非受控都会调） */
+    onExpandChange: {
+        type: PropType<(keys: Array<string | number>) => void>;
+        default: undefined;
+    };
+    /** 分页档：`false` 不渲染底部分页条 */
+    pagination: {
+        type: PropType<false | TablePagination>;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onSort?: ((payload: {
+        key: string;
+        order: TableSortOrder;
+    }) => any) | undefined;
+    onChange?: ((keys: (string | number)[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((keys: (string | number)[]) => any) | undefined;
+}>, {
+    fill: boolean;
+    size: ControlSize;
+    compact: boolean;
+    data: TableRow[];
+    loading: boolean;
+    rowKey: string;
+    expandedKeys: (string | number)[];
+    defaultExpandedKeys: (string | number)[];
+    onExpandChange: (keys: Array<string | number>) => void;
+    modelValue: (string | number)[];
+    emptyText: string;
+    selectable: boolean;
+    striped: boolean;
+    borderless: boolean;
+    stickyHead: boolean;
+    stickyCol: boolean;
+    showHeader: boolean;
+    sortKey: string;
+    sortOrder: TableSortOrder;
+    rowClass: (row: TableRow, index: number) => string;
+    onRow: (row: TableRow, index: number) => TableRowProps;
+    expandable: (row: TableRow, index: number) => VNodeChild;
+    pagination: false | TablePagination;
+}, SlotsType<{
+    /** 单元格：`{ row, column, value, index }`（不给则直接输出原值） */
+    cell?: (context: {
+        row: TableRow;
+        column: TableColumn;
+        value: unknown;
+        index: number;
+    }) => VNodeChild;
+    /** 行尾操作区：`{ row, index }`（面里用 `align: 'right'` 的列承载） */
+    actions?: (context: {
+        row: TableRow;
+        index: number;
+    }) => VNodeChild;
+    /** 批量栏：选中非空时出现在表格上方（`{ selected }`） */
+    batch?: (context: {
+        selected: Array<string | number>;
+    }) => VNodeChild;
+    /** 空态自定义（插画 + 操作按钮）；不给则渲染 `emptyText` 一行 */
+    empty?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/table/index.js

@@ -0,0 +1,286 @@
+import { defineComponent, computed, ref, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+import { Checkbox } from "../checkbox/index.js";
+import { Pagination } from "../pagination/index.js";
+const Table = /* @__PURE__ */ defineComponent({
+  name: "Table",
+  inheritAttrs: false,
+  props: {
+    columns: {
+      type: Array,
+      required: true
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    /** 行标识字段名（选中态记的是它的值） */
+    rowKey: {
+      type: String,
+      default: "id"
+    },
+    /** 选中行的 key 列表（`v-model`） */
+    modelValue: {
+      type: Array,
+      default: void 0
+    },
+    /** 选择列 */
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    /** 斑马纹（**显式类**而非 nth-child：表里可能有分组行） */
+    striped: {
+      type: Boolean,
+      default: false
+    },
+    /** 尺寸档：`sm` 紧凑（表格嵌在卡片里）/ `md` 标准 / `lg` 宽松（详情页） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 紧凑档（= `size="sm"`，保留的既有写法） */
+    compact: {
+      type: Boolean,
+      default: false
+    },
+    borderless: {
+      type: Boolean,
+      default: false
+    },
+    /** 外框交给包裹层（满高表格用） */
+    fill: {
+      type: Boolean,
+      default: false
+    },
+    stickyHead: {
+      type: Boolean,
+      default: false
+    },
+    stickyCol: {
+      type: Boolean,
+      default: false
+    },
+    /** 加载态：内容上盖一层浅罩 + 转圈（**行高不塌**，避免加载时表格跳动） */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /** 隐藏表头（纯展示的键值表用） */
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    /** 空数据文案（表格内的空态；要插画与操作按钮就用 `empty` 插槽） */
+    emptyText: {
+      type: String,
+      default: "暂无数据"
+    },
+    /** 受控排序键与方向（由调用方给，本件只显示） */
+    sortKey: {
+      type: String,
+      default: void 0
+    },
+    sortOrder: {
+      type: String,
+      default: null
+    },
+    /** 给某行追加类（分组行 / 禁用行 / 静态选中档由调用方标） */
+    rowClass: {
+      type: Function,
+      default: void 0
+    },
+    /** 行级事件：`(row, index) => ({ class, onClick })` */
+    onRow: {
+      type: Function,
+      default: void 0
+    },
+    /** 展开行：给了就出现展开列；返回的内容渲染在行下方的整宽格子里 */
+    expandable: {
+      type: Function,
+      default: void 0
+    },
+    /** 展开行的 key（受控） */
+    expandedKeys: {
+      type: Array,
+      default: void 0
+    },
+    /** 展开行的 key（非受控初值） */
+    defaultExpandedKeys: {
+      type: Array,
+      default: () => []
+    },
+    /** 展开变化（受控与非受控都会调） */
+    onExpandChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 分页档：`false` 不渲染底部分页条 */
+    pagination: {
+      type: [Boolean, Object],
+      default: false
+    }
+  },
+  emits: {
+    /** 选中行 key 列表（`v-model`） */
+    "update:modelValue": (keys) => Array.isArray(keys),
+    /** 选中变化（与 `v-model` 同时发，方便只听不接管） */
+    change: (keys) => Array.isArray(keys),
+    /** 排序请求：本件只发事件与显示态，**排序由调用方做** */
+    sort: (payload) => typeof payload.key === "string"
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const keys = computed(() => props.data.map((row) => row[props.rowKey]));
+    const selected = computed(() => props.modelValue ?? []);
+    const allSelected = computed(() => keys.value.length > 0 && selected.value.length >= keys.value.length);
+    const someSelected = computed(() => selected.value.length > 0 && !allSelected.value);
+    const innerExpanded = ref(props.defaultExpandedKeys);
+    const expanded = computed(() => props.expandedKeys ?? innerExpanded.value);
+    const toggleExpand = (key) => {
+      const next = expanded.value.includes(key) ? expanded.value.filter((item) => item !== key) : [...expanded.value, key];
+      if (props.expandedKeys === void 0) innerExpanded.value = next;
+      props.onExpandChange?.(next);
+    };
+    const resolvedSize = computed(() => props.compact ? "sm" : props.size);
+    const leadColumns = computed(() => (props.selectable ? 1 : 0) + (props.expandable ? 1 : 0));
+    const columnCount = computed(() => leadColumns.value + props.columns.length);
+    const isEmpty = computed(() => props.data.length === 0);
+    const cellClass = (column) => [column.align === "center" ? "mh-table__cell-center" : "", column.align === "right" ? "mh-table__cell-amount" : "", column.ellipsis ? "mh-table__cell-ellipsis" : ""].filter(Boolean);
+    const commit = (next) => {
+      emit("update:modelValue", next);
+      emit("change", next);
+    };
+    const toggleRow = (key) => {
+      const has = selected.value.includes(key);
+      commit(has ? selected.value.filter((item) => item !== key) : [...selected.value, key]);
+    };
+    const toggleAll = () => commit(allSelected.value ? [] : [...keys.value]);
+    const nextOrder = (key) => {
+      if (props.sortKey !== key) return "asc";
+      if (props.sortOrder === "asc") return "desc";
+      if (props.sortOrder === "desc") return null;
+      return "asc";
+    };
+    const sortGlyph = (key) => props.sortKey === key && props.sortOrder === "asc" ? "chevron-up" : "chevron-down";
+    return () => {
+      const tableClass = ["mh-table", resolvedSize.value === "sm" ? "mh-table--xs" : "", resolvedSize.value === "lg" ? "mh-table--lg" : "", props.borderless ? "mh-table--borderless" : "", props.fill ? "mh-table--fill" : "", props.stickyHead ? "mh-table--sticky-head" : "", props.stickyCol ? "mh-table--sticky-col" : "", attrs.class].filter(Boolean).join(" ");
+      const pager = typeof props.pagination === "object" ? props.pagination : null;
+      return createVNode("div", {
+        "class": "mh-table-wrapper",
+        "style": attrs.style
+      }, [slots.batch && selected.value.length > 0 ? createVNode("div", {
+        "class": "mh-table__batch"
+      }, [slots.batch({
+        selected: selected.value
+      })]) : null, createVNode("table", {
+        "class": tableClass
+      }, [props.showHeader ? createVNode("thead", null, [createVNode("tr", null, [props.expandable ? createVNode("th", {
+        "class": "mh-table__col-expand",
+        "aria-label": "展开"
+      }, null) : null, props.selectable ? createVNode("th", {
+        "class": "mh-table__col-check"
+      }, [createVNode(Checkbox, {
+        "aria-label": "全选",
+        "modelValue": allSelected.value,
+        "indeterminate": someSelected.value && !allSelected.value,
+        "onChange": toggleAll
+      }, null)]) : null, props.columns.map((column) => createVNode("th", {
+        "key": column.key,
+        "class": [column.required ? "mh-table__cell-required" : "", column.align === "center" ? "mh-table__cell-center" : "", column.align === "right" ? "mh-table__col-actions" : ""].filter(Boolean).join(" "),
+        "style": column.width ? {
+          width: column.width
+        } : void 0
+      }, [column.title, column.sortable ? createVNode("button", {
+        "type": "button",
+        "class": ["mh-table__sort", props.sortKey === column.key && props.sortOrder ? "mh-table__sort--active" : ""].filter(Boolean).join(" "),
+        "aria-label": `按${column.title}排序`,
+        "onClick": () => emit("sort", {
+          key: column.key,
+          order: nextOrder(column.key)
+        })
+      }, [createVNode(Icon, {
+        "name": sortGlyph(column.key),
+        "class": ["mh-table__sort-icon", props.sortKey === column.key && props.sortOrder === "asc" ? "mh-table__sort-icon--asc" : "", props.sortKey === column.key && props.sortOrder === "desc" ? "mh-table__sort-icon--desc" : ""].filter(Boolean).join(" ")
+      }, null)]) : null]))])]) : null, createVNode("tbody", null, [isEmpty.value ? createVNode("tr", {
+        "class": "mh-table__empty-row"
+      }, [createVNode("td", {
+        "class": "mh-table__empty",
+        "colspan": columnCount.value
+      }, [slots.empty ? slots.empty() : props.emptyText])]) : null, props.data.map((row, index) => {
+        const key = row[props.rowKey];
+        const rowProps = props.onRow?.(row, index);
+        const isExpanded = expanded.value.includes(key);
+        const rowState = [props.striped && index % 2 === 1 ? "is-striped" : "", selected.value.includes(key) ? "is-selected" : "", rowProps?.onClick ? "is-clickable" : "", rowProps?.class ?? "", props.rowClass?.(row, index) ?? ""].filter(Boolean).join(" ");
+        return [createVNode("tr", {
+          "key": key,
+          "class": rowState,
+          "data-state": selected.value.includes(key) ? "selected" : "idle",
+          "onClick": rowProps?.onClick ? (event) => rowProps.onClick?.(row, index, event) : void 0
+        }, [props.expandable ? createVNode("td", {
+          "class": "mh-table__col-expand"
+        }, [createVNode("button", {
+          "type": "button",
+          "class": "mh-table__expand",
+          "aria-label": isExpanded ? "收起" : "展开",
+          "aria-expanded": isExpanded ? "true" : "false",
+          "onClick": (event) => {
+            event.stopPropagation();
+            toggleExpand(key);
+          }
+        }, [createVNode(Icon, {
+          "name": "chevron-down",
+          "class": "mh-table__expand-icon"
+        }, null)])]) : null, props.selectable ? (
+          /* 勾选列复用 `Checkbox`（不在表格里手写原生 input）。行本身可能带 onClick（onRow）：
+             勾选不该顺带触发行点击 —— 阻断挂在**单元格**上，因为 `Checkbox` 的根是 `label`，
+             点它会冒泡两次（label 自身一次 + 转发给 input 一次），只挡 input 挡不住行点击。 */
+          createVNode("td", {
+            "class": "mh-table__col-check",
+            "onClick": (event) => event.stopPropagation()
+          }, [createVNode(Checkbox, {
+            "aria-label": "选择本行",
+            "modelValue": selected.value.includes(key),
+            "onChange": () => toggleRow(key)
+          }, null)])
+        ) : null, props.columns.map((column) => createVNode("td", {
+          "key": column.key,
+          "class": cellClass(column).join(" ")
+        }, [slots.cell ? slots.cell({
+          row,
+          column,
+          value: row[column.key],
+          index
+        }) : slots.actions && column.align === "right" ? slots.actions({
+          row,
+          index
+        }) : String(row[column.key] ?? "")]))]), isExpanded ? createVNode("tr", {
+          "key": `${key}-expand`,
+          "class": "mh-table__expand-row"
+        }, [createVNode("td", {
+          "colspan": columnCount.value
+        }, [props.expandable?.(row, index)])]) : null];
+      })])]), props.loading ? createVNode("div", {
+        "class": "mh-table__loading",
+        "aria-busy": "true"
+      }, [createVNode("span", {
+        "class": "mh-table__spinner"
+      }, null)]) : null, pager ? createVNode("div", {
+        "class": "mh-table__pagination"
+      }, [createVNode(Pagination, {
+        "total": pager.total,
+        "modelValue": pager.current ?? 1,
+        "pageSize": pager.pageSize ?? 10,
+        "pageSizeOptions": pager.pageSizeOptions,
+        "onChange": (payload) => pager.onChange?.(payload.page, payload.pageSize)
+      }, null)]) : null]);
+    };
+  }
+});
+export {
+  Table
+};