@manohub/ui 1.0.6 → 1.0.8

package/dist/components/code-block/index.d.ts

@@ -111,9 +111,9 @@ export declare const CodeView: import("vue").DefineComponent<import("vue").Extra
     plain: boolean;
     code: string;
     onCopy: (ok: boolean) => void;
+    maxHeight: string | number;
     language: string;
     copyable: boolean;
-    maxHeight: string | number;
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -260,8 +260,8 @@ export declare const CodeEditor: import("vue").DefineComponent<import("vue").Ext
     modelValue: string;
     readonly: boolean;
     autoSize: boolean | CodeEditorAutoSize;
-    language: string;
     maxHeight: string | number;
+    language: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** `CodeBlock` 的 props：**两形态的并集** + 切换开关（按 `editable` 分两组，见各条说明） */
 export interface CodeBlockProps extends CodeViewProps, CodeEditorProps {
@@ -366,9 +366,9 @@ export declare const CodeBlock: {
         modelValue: string;
         readonly: boolean;
         autoSize: boolean | CodeEditorAutoSize;
+        maxHeight: string | number;
         language: string;
         copyable: boolean;
-        maxHeight: string | number;
         editable: boolean;
     }, true, {}, SlotsType<{
         default?: () => VNodeChild;
@@ -464,9 +464,9 @@ export declare const CodeBlock: {
         modelValue: string;
         readonly: boolean;
         autoSize: boolean | CodeEditorAutoSize;
+        maxHeight: string | number;
         language: string;
         copyable: boolean;
-        maxHeight: string | number;
         editable: boolean;
     }>;
     __isFragment?: never;
@@ -559,9 +559,9 @@ export declare const CodeBlock: {
     modelValue: string;
     readonly: boolean;
     autoSize: boolean | CodeEditorAutoSize;
+    maxHeight: string | number;
     language: string;
     copyable: boolean;
-    maxHeight: string | number;
     editable: boolean;
 }, {}, string, SlotsType<{
     default?: () => VNodeChild;
@@ -638,9 +638,9 @@ export declare const CodeBlock: {
         plain: boolean;
         code: string;
         onCopy: (ok: boolean) => void;
+        maxHeight: string | number;
         language: string;
         copyable: boolean;
-        maxHeight: string | number;
     }, SlotsType<{
         default?: () => VNodeChild;
     }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -739,8 +739,8 @@ export declare const CodeBlock: {
         modelValue: string;
         readonly: boolean;
         autoSize: boolean | CodeEditorAutoSize;
-        language: string;
         maxHeight: string | number;
+        language: string;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 };
 /** 含成员的 `CodeBlock` 类型（与 `CodeBlockCompoundType` 同义，两个名字都为对齐本仓既有的 `XxxCompound` 口径） */

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

@@ -1,4 +1,4 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type HTMLAttributes, type PropType, type SlotsType, type VNodeChild } from 'vue';
 import type { ControlSize } from '../control-size';
 /** 校验状态（`error` 红、`warning` 黄；缺省无校验态） */
 export type InputStatus = 'error' | 'warning';
@@ -26,10 +26,11 @@ export interface TextareaAutoSize {
  * `class` / `style` → 表壳 `.mh-input__wrap`（整件的宽度与显式锚）；**其余 attrs 一律透传到控件**
  * （`id` / `name` / `aria-*` / `data-*` / `title` / 原生事件）—— 壳只是排版容器，属性落它上面等于丢掉
  * —— 见 `forwardAttrs`；触发器形态另有 `controlClass` / `controlAttrs` 两个**专口子**（同名键以它为准）。
+ * 这组属性在**类型面**同步放开（两形态共认的键）：`onClick` / `title` / `data-*` / `aria-*` 直接写在组件上即可。
  *
  * 用法见 `docs/demos/input/`（每个维度一份可运行样例；文档页 `docs/components/input.md`）。
  */
-export declare const Input: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const InputBase: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** 受控值 */
     modelValue: {
         type: StringConstructor;
@@ -299,6 +300,16 @@ export declare const Input: import("vue").DefineComponent<import("vue").ExtractP
     prefix?: () => VNodeChild;
     suffix?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 控件元素上的原生属性 / 事件（`HTMLAttributes` 即输入框与触发器共有的那张基表）：
+ * 本件不登记它们，运行时按 attrs 透传到控件，这里只把类型面同步放开。
+ */
+type InputControlAttrs = Omit<HTMLAttributes, keyof InstanceType<typeof InputBase>['$props']>;
+export declare const Input: typeof InputBase & {
+    new (): {
+        $props: InstanceType<typeof InputBase>["$props"] & InputControlAttrs;
+    };
+};
 export interface TextareaProps {
     /** 受控值 */
     modelValue?: string;
@@ -933,7 +944,9 @@ export declare const InputCompound: {
     default?: () => VNodeChild;
     prefix?: () => VNodeChild;
     suffix?: () => VNodeChild;
-}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $props: InstanceType<typeof InputBase>["$props"] & InputControlAttrs;
+}) & {
     Textarea: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         modelValue: {
             type: StringConstructor;

package/dist/components/input/index.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, createVNode, mergeProps, createTextVNode } from "vue";
 import { Icon } from "@manohub/icon";
 import { borderedClassOf } from "./bordered.js";
-const Input = /* @__PURE__ */ defineComponent({
+const InputBase = /* @__PURE__ */ defineComponent({
   name: "Input",
   inheritAttrs: false,
   props: {
@@ -242,6 +242,7 @@ const Input = /* @__PURE__ */ defineComponent({
     }, [current.value?.length ?? 0, createTextVNode("/"), props.maxlength]) : null]);
   }
 });
+const Input = InputBase;
 const Textarea = /* @__PURE__ */ defineComponent({
   name: "Textarea",
   inheritAttrs: false,

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

@@ -43,6 +43,8 @@ export interface TableColumn {
     sortable?: boolean;
 }
 export type TableSortOrder = 'asc' | 'desc' | null;
+/** 满高档取值：不传 / `false` = 高度由内容撑起；`true` / `'parent'` = 占满父级；`number` = 表体滚动上限（px） */
+export type TableFill = boolean | 'parent' | number;
 /** 行数据：至少能用 `rowKey` 取到稳定标识 */
 export type TableRow = Record<string, unknown>;
 /** 行级事件（`onRow` 的返回）：给整行挂点击与类，省掉「每列都写一次 onClick」 */
@@ -73,23 +75,15 @@ export interface TableCellSlotScope {
 }
 /** 行级可勾选判定（`selectable` 的函数形态）：返回 `false` 的行渲染**禁用态**勾选框，且不进表头全选的增删范围；签名与 `onRow` / `rowClass` 一致（都给 `index`）。 */
 export type TableRowSelectable = (row: TableRow, index: number) => boolean;
-/** 分页档：`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(.mh-table__col-check input:checked)` 零 JS 路径仍成立；选择器**限定在勾选列内**，否则功能列的
- * `Switch` 也会把整行点亮）；展开行；排序按钮的**状态与事件**；加载态与空态；分页条的排布与事件透传；
+ * `Switch` 也会把整行点亮）；展开行；排序按钮的**状态与事件**；加载态与空态；
  * `rowClass` / `onRow` 让调用方标分组行、禁用行与挂行级点击。
  *
  * **不负责**：
@@ -97,8 +91,7 @@ export interface TablePagination {
  * - **排序算法归调用方**（列宽拖拽同理）：规范只给了 `↕` 字形与拖拽线两处视觉，而 `↕` 是文字符号（本包禁
  *   拿文字符号冒充图标），故朝向改用现成字形 `chevron-up` / `chevron-down` 表达 —— 本件发 `sort` 事件、
  *   画态，真正排序 / 改列宽由调用方决定（它有数据、也知道业务口径）；
- * - **分页切片**：`pagination` 只渲染分页条并透传页码事件，**`data` 始终是当前页数据** —— 组件自己切片会
- *   让「服务端分页」与「客户端分页」两套口径藏在同一个 prop 里；
+ * - **分页条**：本件不内建（`data` 始终是给它的那页数据），页码状态、切片与分页条的摆放都归调用方；
  * - **错误态**：归 `QueryState`（表格只管列数据）。
  */
 export declare const Table: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -172,9 +165,19 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 外框交给包裹层（满高表格用） */
+    /**
+     * 满高档（高度与滚动归属；详见 `docs/components/table.md` 的「满高与滚动」）：
+     *
+     * - 不传 / `false` —— 高度由内容撑起（单表结构，与不带本 prop 时完全一致）；
+     * - `true` / `'parent'` —— 占满父级高度（`height: 100%`），**表体滚、表头固定在表体上方**，
+     *   外框与圆角归包裹层；父级需可确定高度（`auto` 父级下 `100%` 解析不出来）；
+     * - `number` —— 表体滚动上限 = 该像素值，**父级高度不确定时的显式兜底档**
+     *   （CSS 无法探测父级是否定高，故兜底只能由调用方声明）。
+     *
+     * 满高档一律按 `table-layout: fixed` 渲染（表头与表体是两个表格盒，`auto` 各自算宽必然错列）。
+     */
     fill: {
-        type: BooleanConstructor;
+        type: PropType<TableFill>;
         default: boolean;
     };
     /**
@@ -190,10 +193,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<"auto" | "fixed">;
         default: string;
     };
-    stickyHead: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     stickyCol: {
         type: BooleanConstructor;
         default: boolean;
@@ -252,11 +251,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         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;
@@ -338,9 +332,19 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 外框交给包裹层（满高表格用） */
+    /**
+     * 满高档（高度与滚动归属；详见 `docs/components/table.md` 的「满高与滚动」）：
+     *
+     * - 不传 / `false` —— 高度由内容撑起（单表结构，与不带本 prop 时完全一致）；
+     * - `true` / `'parent'` —— 占满父级高度（`height: 100%`），**表体滚、表头固定在表体上方**，
+     *   外框与圆角归包裹层；父级需可确定高度（`auto` 父级下 `100%` 解析不出来）；
+     * - `number` —— 表体滚动上限 = 该像素值，**父级高度不确定时的显式兜底档**
+     *   （CSS 无法探测父级是否定高，故兜底只能由调用方声明）。
+     *
+     * 满高档一律按 `table-layout: fixed` 渲染（表头与表体是两个表格盒，`auto` 各自算宽必然错列）。
+     */
     fill: {
-        type: BooleanConstructor;
+        type: PropType<TableFill>;
         default: boolean;
     };
     /**
@@ -356,10 +360,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<"auto" | "fixed">;
         default: string;
     };
-    stickyHead: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     stickyCol: {
         type: BooleanConstructor;
         default: boolean;
@@ -418,11 +418,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<(keys: Array<string | number>) => void>;
         default: undefined;
     };
-    /** 分页档：`false` 不渲染底部分页条 */
-    pagination: {
-        type: PropType<false | TablePagination>;
-        default: boolean;
-    };
 }>> & Readonly<{
     onSort?: ((payload: {
         key: string;
@@ -431,7 +426,7 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((keys: (string | number)[]) => any) | undefined;
     "onUpdate:modelValue"?: ((keys: (string | number)[]) => any) | undefined;
 }>, {
-    fill: boolean;
+    fill: TableFill;
     layout: "fixed" | "auto";
     size: ControlSize;
     compact: boolean;
@@ -447,7 +442,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     selectable: boolean | TableRowSelectable;
     striped: boolean;
     onCellChange: (row: TableRow, key: string, value: unknown, index: number) => void;
-    stickyHead: boolean;
     stickyCol: boolean;
     showHeader: boolean;
     sortKey: string;
@@ -455,19 +449,15 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     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, setValue }`（不给则直接输出原值）。**编辑格也走这里** —— 本件不替调用方渲染控件，只给值、给位置、给一个受控的回写口。 */
     cell?: (context: TableCellSlotScope) => VNodeChild;
-    /** 行尾操作区：`{ row, index }`（面里用 `align: 'right'` 的列承载） */
-    actions?: (context: {
-        row: TableRow;
-        index: number;
-    }) => VNodeChild;
     /** 批量栏：选中非空时出现在表格上方（`{ selected }`） */
     batch?: (context: {
         selected: Array<string | number>;
     }) => VNodeChild;
     /** 空态自定义（插画 + 操作按钮）；不给则渲染 `emptyText` 一行 */
     empty?: () => VNodeChild;
+    /** 合计行：渲染在滚动区之外（表格下方），容器与标签 / 数值子样式见 `.mh-table__summary*` */
+    summary?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/table/index.js

@@ -1,7 +1,6 @@
-import { defineComponent, computed, ref, createVNode } from "vue";
+import { defineComponent, computed, ref, onMounted, onUpdated, 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,
@@ -76,9 +75,19 @@ const Table = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: true
     },
-    /** 外框交给包裹层（满高表格用） */
+    /**
+     * 满高档（高度与滚动归属；详见 `docs/components/table.md` 的「满高与滚动」）：
+     *
+     * - 不传 / `false` —— 高度由内容撑起（单表结构，与不带本 prop 时完全一致）；
+     * - `true` / `'parent'` —— 占满父级高度（`height: 100%`），**表体滚、表头固定在表体上方**，
+     *   外框与圆角归包裹层；父级需可确定高度（`auto` 父级下 `100%` 解析不出来）；
+     * - `number` —— 表体滚动上限 = 该像素值，**父级高度不确定时的显式兜底档**
+     *   （CSS 无法探测父级是否定高，故兜底只能由调用方声明）。
+     *
+     * 满高档一律按 `table-layout: fixed` 渲染（表头与表体是两个表格盒，`auto` 各自算宽必然错列）。
+     */
     fill: {
-      type: Boolean,
+      type: [Boolean, String, Number],
       default: false
     },
     /**
@@ -94,10 +103,6 @@ const Table = /* @__PURE__ */ defineComponent({
       type: String,
       default: "auto"
     },
-    stickyHead: {
-      type: Boolean,
-      default: false
-    },
     stickyCol: {
       type: Boolean,
       default: false
@@ -155,11 +160,6 @@ const Table = /* @__PURE__ */ defineComponent({
     onExpandChange: {
       type: Function,
       default: void 0
-    },
-    /** 分页档：`false` 不渲染底部分页条 */
-    pagination: {
-      type: [Boolean, Object],
-      default: false
     }
   },
   emits: {
@@ -242,120 +242,165 @@ const Table = /* @__PURE__ */ defineComponent({
       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.bordered ? "" : "mh-table--borderless", props.fill ? "mh-table--fill" : "", props.layout === "fixed" ? "mh-table--fixed" : "", 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
-      }, [colElements(), props.showHeader ? createVNode("thead", null, [createVNode("tr", null, [props.expandable ? createVNode("th", {
-        "class": "mh-table__col-expand",
-        "aria-label": "展开"
-      }, null) : null, hasSelectColumn.value ? createVNode("th", {
-        "class": "mh-table__col-check"
-      }, [createVNode(Checkbox, {
-        "aria-label": "全选",
-        "modelValue": allSelected.value,
-        "indeterminate": someSelected.value && !allSelected.value,
-        "disabled": headerCheckboxDisabled.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(" ")
-      }, [column.title, column.sortable ? createVNode("button", {
+    const renderHead = () => createVNode("thead", null, [createVNode("tr", null, [props.expandable ? createVNode("th", {
+      "class": "mh-table__col-expand",
+      "aria-label": "展开"
+    }, null) : null, hasSelectColumn.value ? createVNode("th", {
+      "class": "mh-table__col-check"
+    }, [createVNode(Checkbox, {
+      "aria-label": "全选",
+      "modelValue": allSelected.value,
+      "indeterminate": someSelected.value && !allSelected.value,
+      "disabled": headerCheckboxDisabled.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-right" : ""].filter(Boolean).join(" ")
+    }, [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]))])]);
+    const renderBody = () => 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__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)
-        })
+        "class": "mh-table__expand",
+        "aria-label": isExpanded ? "收起" : "展开",
+        "aria-expanded": isExpanded ? "true" : "false",
+        "onClick": (event) => {
+          event.stopPropagation();
+          toggleExpand(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"
+        "name": "chevron-down",
+        "class": "mh-table__expand-icon"
+      }, null)])]) : null, hasSelectColumn.value ? (
+        /* 勾选列复用 `Checkbox`（不手写原生 input）。行本身可能带 `onRow` 的 onClick：勾选不该顺带触发行
+           点击 —— 阻断挂在**单元格**上（`Checkbox` 的根是 `label`，点它会冒泡两次，只挡 input 挡不住）。
+           `selectable` 为函数时逐行判定：返回 `false` 的行给禁用态（置灰 + not-allowed）。 */
+        createVNode("td", {
+          "class": "mh-table__col-check",
+          "onClick": (event) => event.stopPropagation()
+        }, [createVNode(Checkbox, {
+          "aria-label": "选择本行",
+          "modelValue": selected.value.includes(key),
+          "disabled": !isRowSelectable(row, index),
+          "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,
+          setValue: cellSetValue(row, column, index)
+        })
+      ) : String(row[column.key] ?? "")]))]), isExpanded ? createVNode("tr", {
+        "key": `${key}-expand`,
+        "class": "mh-table__expand-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, hasSelectColumn.value ? (
-          /* 勾选列复用 `Checkbox`（不手写原生 input）。行本身可能带 `onRow` 的 onClick：勾选不该顺带触发行
-             点击 —— 阻断挂在**单元格**上（`Checkbox` 的根是 `label`，点它会冒泡两次，只挡 input 挡不住）。
-             `selectable` 为函数时逐行判定：返回 `false` 的行给禁用态（置灰 + not-allowed）。 */
-          createVNode("td", {
-            "class": "mh-table__col-check",
-            "onClick": (event) => event.stopPropagation()
-          }, [createVNode(Checkbox, {
-            "aria-label": "选择本行",
-            "modelValue": selected.value.includes(key),
-            "disabled": !isRowSelectable(row, index),
-            "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,
-            setValue: cellSetValue(row, column, 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", {
+      }, [props.expandable?.(row, index)])]) : null];
+    })]);
+    const headBoxRef = ref(null);
+    const headTableRef = ref(null);
+    const scrollBoxRef = ref(null);
+    const syncHead = () => {
+      const box = scrollBoxRef.value;
+      const head = headBoxRef.value;
+      if (!box) return;
+      if (headTableRef.value) headTableRef.value.style.transform = `translateX(${-box.scrollLeft}px)`;
+      if (head) {
+        const gutter = `${box.offsetWidth - box.clientWidth}px`;
+        if (head.style.paddingRight !== gutter) head.style.paddingRight = gutter;
+      }
+    };
+    onMounted(syncHead);
+    onUpdated(syncHead);
+    return () => {
+      const fill = props.fill !== false;
+      const tableClass = ["mh-table", resolvedSize.value === "sm" ? "mh-table--xs" : "", resolvedSize.value === "lg" ? "mh-table--lg" : "", props.bordered ? "" : "mh-table--borderless", fill ? "mh-table--fill" : "", fill || props.layout === "fixed" ? "mh-table--fixed" : "", attrs.class].filter(Boolean).join(" ");
+      const bodyTableClass = props.stickyCol ? `${tableClass} mh-table--sticky-col` : tableClass;
+      const cellTokens = fill || props.layout === "fixed" ? {
+        "--ui-control-min-width": "0"
+      } : void 0;
+      const batchBar = slots.batch && selected.value.length > 0 ? createVNode("div", {
+        "class": "mh-table__batch"
+      }, [slots.batch({
+        selected: selected.value
+      })]) : null;
+      const summaryBar = slots.summary ? createVNode("div", {
+        "class": "mh-table__summary"
+      }, [slots.summary()]) : null;
+      const loadingOverlay = 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]);
+      }, null)]) : null;
+      if (!fill) {
+        return createVNode("div", {
+          "class": "mh-table-wrapper",
+          "style": attrs.style
+        }, [batchBar, createVNode("table", {
+          "class": bodyTableClass,
+          "style": cellTokens
+        }, [colElements(), props.showHeader ? renderHead() : null, renderBody()]), summaryBar, loadingOverlay]);
+      }
+      const wrapperStyle = props.fill === true || props.fill === "parent" ? [{
+        height: "100%"
+      }, attrs.style] : attrs.style;
+      const scrollStyle = typeof props.fill === "number" ? {
+        maxHeight: `${props.fill}px`
+      } : void 0;
+      return createVNode("div", {
+        "class": "mh-table-wrapper mh-table-wrapper--fill",
+        "style": wrapperStyle
+      }, [batchBar, props.showHeader ? createVNode("div", {
+        "class": "mh-table__head",
+        "ref": headBoxRef
+      }, [createVNode("table", {
+        "class": tableClass,
+        "ref": headTableRef,
+        "style": cellTokens
+      }, [colElements(), renderHead()])]) : null, createVNode("div", {
+        "class": "mh-table__body"
+      }, [createVNode("div", {
+        "class": "mh-table-scroll",
+        "ref": scrollBoxRef,
+        "onScroll": syncHead,
+        "style": scrollStyle
+      }, [createVNode("table", {
+        "class": bodyTableClass,
+        "style": cellTokens
+      }, [colElements(), renderBody()])]), loadingOverlay]), summaryBar]);
     };
   }
 });

package/dist/index.d.ts

@@ -45,7 +45,7 @@ export { Notification, type NotificationTone, } from './components/notification'
 export { Dialog, type DialogWidth } from './components/dialog';
 export { Drawer, type DrawerSide } from './components/drawer';
 export { Tooltip, type TooltipSide, type TooltipAlign, } from './components/tooltip';
-export { Table, type TableColumn, type TableCellSlotScope, type TableRow, type TableRowSelectable, type TableSortOrder, } from './components/table';
+export { Table, type TableColumn, type TableCellSlotScope, type TableFill, type TableRow, type TableRowSelectable, type TableSortOrder, } from './components/table';
 export { Pagination, type PaginationPageItem } from './components/pagination';
 export { TabBar, type TabBarOption, type TabBarValue } from './components/tabbar';
 export { Steps, type CanJump, type StepsItem, type StepsVariant, type StepsCompound, type StepsCompoundType, } from './components/steps';

package/dist/styles/components/table.css

@@ -30,14 +30,41 @@
 .mh-table-wrapper {
   overflow: auto;
 }
-/* `--fill` 档把外框从表移交给包裹层（表自己不再画框，改由包裹层画满高框） */
-.mh-table-wrapper:has(> .mh-table--fill) {
+/* ===== 满高档（两表结构：表头盒 + 表体滚动盒）=====
+ * 外框从表移交给包裹层（表自己不再画框），**表头不在滚动盒里** —— 表头固定是结构给的，不靠 sticky。 */
+.mh-table-wrapper--fill {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* 表头底 / 末行跟着外框圆角收边 */
   border: 1px solid var(--ui-table-border);
   border-radius: var(--ui-table-radius);
 }
+/* 滚动区外的常驻块不被压缩（表体盒吃剩余高度） */
+.mh-table-wrapper--fill > .mh-table__batch,
+.mh-table-wrapper--fill > .mh-table__summary {
+  flex: none;
+}
+/* 表头盒：裁切横向平移的表头（平移由组件同步，不在这里做） */
+.mh-table__head {
+  flex: none;
+  overflow: hidden;
+}
+/* 表体盒：表体的定位上下文（满高档的加载罩按它铺满，不再盖到表头） */
+.mh-table__body {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+/* 表体滚动盒：满高档唯一的滚动落点 */
 .mh-table-scroll {
-  max-height: var(--ui-table-scroll-height); /* 规范样张 132（实际用按需覆盖） */
+  height: 100%;
+  max-height: var(--ui-table-scroll-height); /* 基础上限；「占满父级」档由下面那条解除 */
   overflow: auto;
+  scrollbar-gutter: stable; /* 滚动条槽常驻：表体宽度不随内容长短跳变 */
+}
+/* 满高档：滚动范围由包裹层高度（或调用方给的内联上限）决定 */
+.mh-table-wrapper--fill > .mh-table__body > .mh-table-scroll {
+  max-height: none;
 }
 
 /* 几何只挂在 `<table>` 上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会给包裹层加边框与圆角 */
@@ -195,7 +222,7 @@
   width: var(--ui-table-col-check);
   text-align: center;
 }
-.mh-table__col-actions {
+.mh-table__col-right {
   text-align: right;
 }
 
@@ -207,7 +234,7 @@
 .mh-table thead th.mh-table__cell-center {
   text-align: center;
 }
-.mh-table thead th.mh-table__col-actions {
+.mh-table thead th.mh-table__col-right {
   text-align: right;
 }
 /* `--sticky-col`：首列钉住（必须自带底，见文件头第 4 条） */
@@ -222,14 +249,8 @@
   z-index: 2; /* 表头既钉顶又钉左，压住表头其余列 */
   background: var(--ui-table-head-bg);
 }
-/* `--sticky-head`：表头钉顶。⚠️ 选择器必须带 `tr`（0-1-3）：文件后段「拖拽线的定位上下文」那条
- * `.mh-table thead th` 是 **0-1-2**，与不写 `tr` 的写法同特异性且在后 ⇒ 会覆盖 `position: sticky`，
- * `stickyHead` 静默失效。`sticky` 同样是定位元素，照样给表头里的拖拽线当包含块，故加 `tr` 不损失原能力。 */
-.mh-table--sticky-head thead tr th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
+/* `--sticky-head` 已退场（2026-10-10）：表头固定改由满高档的两表结构承担 —— 表头不在滚动盒里，
+ * 不需要 sticky，也就没有「特异性压不过 `position: relative`」那类静默失效。 */
 
 /* ===== 单元格类型 ===== */
 .mh-table__cell-center {
@@ -416,6 +437,13 @@
   text-align: center;
   color: var(--ui-base-content-muted);
 }
+/* 满高档的空态：空态格撑满表体可见高度（按行选择 —— 空数据时才有那一行，有数据时行高不受影响） */
+.mh-table-wrapper--fill .mh-table-scroll > .mh-table:has(.mh-table__empty-row) {
+  height: 100%;
+}
+.mh-table-wrapper--fill .mh-table__empty {
+  height: 100%;
+}
 .mh-table__empty-row:hover td {
   background: transparent;
 }
@@ -460,10 +488,3 @@
   padding: var(--ui-space-4) var(--ui-table-padding-x);
   background: var(--ui-base-200);
 }
-
-/* ===== 分页条（贴在表格下方、右对齐；分页件自身的面归 pagination.css） ===== */
-.mh-table__pagination {
-  display: flex;
-  justify-content: flex-end;
-  padding: var(--ui-space-4) 0 0;
-}

package/dist/styles/components/table.tokens.css

@@ -39,5 +39,5 @@
   --ui-table-summary-height: 40px;
   --ui-table-batch-height: 34px;
   --ui-table-tree-indent: 38px;
-  --ui-table-scroll-height: 132px; /* 规范样张值 */
+  --ui-table-scroll-height: 132px; /* 表体滚动盒的基础上限（满高「占满父级」档由面解除、数值档由组件内联覆盖） */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "private": false,
   "type": "module",
   "description": "AIHub 自绘组件层：不依赖 farris 的手写 Vue TSX 组件 + 自带令牌层（Farris 规范视觉 · daisyUI 式语义令牌 · shadcn 式 API 词汇）。",
@@ -35,7 +35,7 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@manohub/icon": "^1.0.6"
+    "@manohub/icon": "^1.0.8"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",