@manohub/ui 0.7.0 → 0.8.0

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

@@ -0,0 +1,184 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+export interface TabBarOption {
+    /** 项文字 */
+    label: string;
+    /** 项值（受控值就是它） */
+    value: string | number;
+    /** 禁用项：不可选 */
+    disabled?: boolean;
+    /** 单项可关（`closable` 打开时用它例外掉某些项） */
+    closable?: boolean;
+}
+export type TabBarValue = string | number;
+/** 页签形态：`line` 下划线指示条 / `card` 选项卡（与内容区连成一体） */
+export type TabBarType = 'line' | 'card';
+/**
+ * 页签条（**自绘**；下划线或选项卡两种形态 + 三档尺寸 + 居中 + 可关闭 + 可新增 + 「更多」收纳）。
+ *
+ * ## 与 `Tabs` / `Capsule` 的分工（三者都能"切换"，判据在**可见形态**）
+ *
+ * - 本件：**页签条**（`line` 下划线 / `card` 选项卡，页面级分区切换）—— 就是这一族的皮肤，
+ *   也是 `Tabs` **不传 `selector` 插槽时的缺省皮肤**（只给 `options` + 面板就够）；
+ * - `Capsule`：胶囊/分段按钮（块状选中底），用于筛选项那种"按钮感"切换 —— 同样能塞进 `Tabs` 的 `selector`；
+ * - `Tabs`：**骨架**（把某组互斥项与面板显隐接起来），它不含皮肤：缺省借本件，传了 `selector` 就整块换掉。
+ *
+ * ## 指示条为什么不是一个滑块
+ *
+ * 每个项的指示条是它自己的伪元素、常驻但未选时 `opacity:0; scale:.75` —— "滑过去"的观感来自这两个属性的
+ * 过渡。做成一条共享滑块要 JS 量位置，且首帧会跳。**别在页签区加轨线**（会扣走区高 1px，规范明确警告）。
+ * （`card` 档不画指示条：选中由底色与顶边表达。）
+ *
+ * ## 超过一屏的页签怎么放
+ *
+ * 给 `more` 插槽即出「更多 ▾」页签 + 操作层浮层（原生 popover，零 JS 开合）；哪些页签收进"更多"由调用方
+ * 决定 —— 收多久、收哪些是业务判断，不是皮肤能定的。
+ *
+ * @example 基本
+ * <TabBar :options="[{label:'全部',value:'all'},{label:'进行中',value:'doing'}]" v-model:value="current" />
+ *
+ * @example 选项卡形态 + 可关闭可新增
+ * <TabBar type="card" closable addable :options="tabs" v-model:value="current"
+ *   :on-close="remove" :on-add="add" />
+ */
+export declare const TabBar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<TabBarOption[]>;
+        required: true;
+    };
+    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
+    value: {
+        type: PropType<TabBarValue | undefined>;
+        default: undefined;
+    };
+    /** 非受控初始选中值，缺省第一项 */
+    defaultValue: {
+        type: PropType<TabBarValue | undefined>;
+        default: undefined;
+    };
+    /** 选中变化回调（受控与非受控都会调） */
+    onChange: {
+        type: PropType<(value: TabBarValue) => void>;
+        default: undefined;
+    };
+    /** 形态：`line` 下划线 / `card` 选项卡 */
+    type: {
+        type: PropType<TabBarType>;
+        default: string;
+    };
+    /** 整体居中（页签少、要撑满整行时用） */
+    centered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 每项带关闭位（单项可用 `option.closable` 覆写） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尾部「新增」按钮 */
+    addable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 「更多」页签的文字 */
+    moreLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 关闭某项（只回调，**不从 `options` 里删** —— 数据归调用方） */
+    onClose: {
+        type: PropType<(value: TabBarValue) => void>;
+        default: undefined;
+    };
+    /** 点新增（只回调） */
+    onAdd: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:value': (value: TabBarValue) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<TabBarOption[]>;
+        required: true;
+    };
+    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
+    value: {
+        type: PropType<TabBarValue | undefined>;
+        default: undefined;
+    };
+    /** 非受控初始选中值，缺省第一项 */
+    defaultValue: {
+        type: PropType<TabBarValue | undefined>;
+        default: undefined;
+    };
+    /** 选中变化回调（受控与非受控都会调） */
+    onChange: {
+        type: PropType<(value: TabBarValue) => void>;
+        default: undefined;
+    };
+    /** 形态：`line` 下划线 / `card` 选项卡 */
+    type: {
+        type: PropType<TabBarType>;
+        default: string;
+    };
+    /** 整体居中（页签少、要撑满整行时用） */
+    centered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 每项带关闭位（单项可用 `option.closable` 覆写） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尾部「新增」按钮 */
+    addable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 「更多」页签的文字 */
+    moreLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 关闭某项（只回调，**不从 `options` 里删** —— 数据归调用方） */
+    onClose: {
+        type: PropType<(value: TabBarValue) => void>;
+        default: undefined;
+    };
+    /** 点新增（只回调） */
+    onAdd: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((value: TabBarValue) => any) | undefined;
+}>, {
+    size: ControlSize;
+    value: TabBarValue | undefined;
+    type: TabBarType;
+    onChange: (value: TabBarValue) => void;
+    onClose: (value: TabBarValue) => void;
+    defaultValue: TabBarValue | undefined;
+    centered: boolean;
+    closable: boolean;
+    addable: boolean;
+    moreLabel: string;
+    onAdd: () => void;
+}, SlotsType<{
+    more?: (context: {
+        options: TabBarOption[];
+    }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/tabbar/index.js

@@ -0,0 +1,161 @@
+import { defineComponent, ref, computed, createVNode, Fragment, mergeProps } from "vue";
+import { Icon } from "@manohub/icon";
+const TabBar = /* @__PURE__ */ defineComponent({
+  name: "TabBar",
+  inheritAttrs: false,
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
+    value: {
+      type: [String, Number],
+      default: void 0
+    },
+    /** 非受控初始选中值，缺省第一项 */
+    defaultValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    /** 选中变化回调（受控与非受控都会调） */
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 形态：`line` 下划线 / `card` 选项卡 */
+    type: {
+      type: String,
+      default: "line"
+    },
+    /** 整体居中（页签少、要撑满整行时用） */
+    centered: {
+      type: Boolean,
+      default: false
+    },
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 每项带关闭位（单项可用 `option.closable` 覆写） */
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    /** 尾部「新增」按钮 */
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    /** 「更多」页签的文字 */
+    moreLabel: {
+      type: String,
+      default: "更多"
+    },
+    /** 关闭某项（只回调，**不从 `options` 里删** —— 数据归调用方） */
+    onClose: {
+      type: Function,
+      default: void 0
+    },
+    /** 点新增（只回调） */
+    onAdd: {
+      type: Function,
+      default: void 0
+    }
+  },
+  /* 受控值必须 emit 回 `update:value`，否则 `v-model:value="x"` 是**静默失效**的：
+     受控时 `props.value !== undefined` ⇒ 内部状态不更新，而外部又收不到新值 ⇒ 点 tab 毫无反应
+     （不报错、不警告）。本件 0.6.x 就漏了这条 —— 文档示例教 `v-model:value` 却点了不动。 */
+  emits: {
+    "update:value": (value) => true
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const innerValue = ref(props.value ?? props.defaultValue ?? props.options[0]?.value);
+    const current = computed(() => props.value ?? innerValue.value);
+    const moreId = `mh-tabbar-${Math.random().toString(36).slice(2, 10)}`;
+    const select = (value) => {
+      const target = props.options.find((option) => option.value === value);
+      if (target?.disabled) return;
+      if (props.value === void 0) innerValue.value = value;
+      emit("update:value", value);
+      props.onChange?.(value);
+    };
+    const isClosable = (option) => option.closable ?? props.closable;
+    return () => createVNode("nav", {
+      "class": [
+        "mh-tabbar",
+        /* `mh-popup-host` 是操作层展开转向的**宿主标记**（popup.css 靠它 :has 反推面板开合）：
+           没有它，「更多」的 caret 展开时不会翻向 —— 与 Select / Tooltip 同一分工。 */
+        "mh-popup-host",
+        props.type === "card" ? "mh-tabbar--card" : "",
+        props.centered ? "mh-tabbar--centered" : "",
+        props.size === "md" ? "" : `mh-tabbar--${props.size}`,
+        attrs.class
+      ].filter(Boolean).join(" "),
+      "style": attrs.style,
+      "role": "tablist"
+    }, [props.options.map((option) => {
+      const active = option.value === current.value;
+      return createVNode("button", {
+        "key": option.value,
+        "type": "button",
+        "role": "tab",
+        "class": ["mh-tabbar__tab", active ? "is-selected" : "", option.disabled ? "is-disabled" : ""].filter(Boolean).join(" "),
+        "data-state": active ? "active" : "inactive",
+        "aria-selected": active,
+        "disabled": option.disabled,
+        "onClick": () => select(option.value)
+      }, [option.label, isClosable(option) && !option.disabled ? (
+        /* 关闭位不是 `<button>`：页签自己是按钮，按钮里嵌按钮是非法 HTML。
+           用 `role="button"` + `stopPropagation` 表达同样的语义与行为。 */
+        createVNode("span", {
+          "class": "mh-tabbar__close",
+          "role": "button",
+          "tabindex": -1,
+          "aria-label": `关闭${option.label}`,
+          "onClick": (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            props.onClose?.(option.value);
+          }
+        }, [createVNode(Icon, {
+          "name": "close"
+        }, null)])
+      ) : null]);
+    }), props.addable ? createVNode("button", {
+      "type": "button",
+      "class": "mh-tabbar__add",
+      "aria-label": "新增页签",
+      "onClick": () => props.onAdd?.()
+    }, [createVNode(Icon, {
+      "name": "plus"
+    }, null)]) : null, slots.more ? createVNode(Fragment, null, [createVNode("button", mergeProps({
+      "type": "button",
+      "class": "mh-tabbar__tab mh-tabbar__tab--more",
+      "data-state": "inactive"
+    }, {
+      popovertarget: moreId
+    }), [props.moreLabel, createVNode(Icon, {
+      "name": "chevron-down",
+      "class": "mh-popup-caret"
+    }, null)]), createVNode("div", mergeProps({
+      "id": moreId,
+      "class": "mh-popup",
+      "data-side": "bottom",
+      "data-align": "end"
+    }, {
+      popover: "auto"
+    }), [slots.more({
+      options: props.options
+    })])]) : null]);
+  }
+});
+export {
+  TabBar
+};

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

@@ -5,11 +5,27 @@ export interface TableColumn {
     key: string;
     /** 列标题 */
     title: string;
-    /** 列宽（`width` 或 `min-width` 都能写，如 `'120px'`、`'20%'`） */
-    width?: string;
+    /**
+     * 列宽。四种写法，可混用（**`auto` 下是"建议值"，长文本可顶破；`fixed` 下是硬约束**）：
+     *
+     * - `number` —— **比例权重**，只在这些权重列之间按 `w_i / Σw` 折算成百分比。
+     *   想「按比例分配」就用它，不必手算百分比。
+     * - `'120px'` —— 固定宽（`fixed` 下是硬宽，**容器变窄也不收缩**，可能横向滚动）
+     * - `'20%'` —— 百分比（**吃满 + 严格按比例 + 任意容器宽不溢出**，响应式首选）
+     * - 不传 —— 单用时吃剩余/等分；**与 `px` 混用会被压到 0**，不建议
+     */
+    width?: string | number;
     align?: 'left' | 'center' | 'right';
-    /** 长文本省略（表头仍完整） */
+    /** 长文本省略（表头仍完整）。`fixed` 下建议给所有长文本列都标上，否则会换行（行高变高） */
     ellipsis?: boolean;
+    /**
+     * 列下限（px）：防止窄容器把该列压没。**给了才下发 `min-width`** ——
+     * ⚠️ 它**不是硬下限**：实测（Chrome）`<col>` 上的 `min-width` 会被当成**分配权重**参与按比例
+     * 分摊 —— 800 宽容器下 `width:50% + min-width:500px` 的列实测只有 **444**，不是 500。
+     * 想要真下限得换机制（该列直接给 px 硬宽，或把内容包一层带 `min-width` 的盒）。
+     * 只在调用方显式要时才下发（`<col>` 上不写时不会出现）。
+     */
+    minWidth?: number;
     /** 必填列：表头加星号 */
     required?: boolean;
     /** 可排序：本件只发事件与显示态，**排序算法归调用方** */
@@ -23,6 +39,11 @@ export interface TableRowProps {
     class?: string;
     onClick?: (row: TableRow, index: number, event: MouseEvent) => void;
 }
+/**
+ * 行级可勾选判定（`selectable` 的函数形态）：返回 `false` 的行渲染**禁用态**勾选框，
+ * 且不进表头全选的增删范围。签名与 `onRow` / `rowClass` 一致（都给 `index`）。
+ */
+export type TableRowSelectable = (row: TableRow, index: number) => boolean;
 /** 分页档：`false` 不渲染；给对象就渲染分页条（**本件不切片，`data` 是当前页数据**） */
 export interface TablePagination {
     total: number;
@@ -51,13 +72,34 @@ export interface TablePagination {
  *   组件自己切片会让「服务端分页」与「客户端分页」两套口径藏在同一个 prop 里；
  * - **错误态**：归 `QueryState`（表格只管列数据）。
  *
- * @example
+ * @example 基本列表（表默认满宽；列宽给权重 + `fixed` 才严格按比例，长文本列配 `ellipsis`）
  * <Table
- *   :columns="[{key:'name',title:'名称'},{key:'amount',title:'金额',align:'right'}]"
- *   :data="rows" row-key="id" striped selectable v-model="selected"
+ *   layout="fixed" striped row-key="id" :data="rows"
+ *   :columns="[
+ *     { key: 'name', title: '名称', width: 3 },
+ *     { key: 'amount', title: '金额', width: 1, align: 'right' },
+ *     { key: 'description', title: '描述', width: 4, ellipsis: true },
+ *   ]"
  *   :pagination="{ total: 120, current: page, onChange: (p) => (page = p) }"
- *   @sort="({ key, order }) => (sortKey = key, sortOrder = order)"
  * />
+ *
+ * @example 操作列（用 `actions` 插槽 + 一列 `align:'right'`；行内操作同族，`Button.Group` 收口）
+ * <Table :columns="columns" :data="rows" row-key="id">
+ *   {{
+ *     actions: ({ row }) => (
+ *       <Button.Group>
+ *         <Button variant="text" onClick={() => open(row)}>编辑</Button>
+ *         <Button variant="text" danger onClick={() => remove(row)}>删除</Button>
+ *       </Button.Group>
+ *     ),
+ *   }}
+ * </Table>
+ *
+ * @example 单元格自定义 + 按行判定可勾选
+ * <Table :columns="columns" :data="rows" row-key="id" v-model="selected"
+ *   :selectable="(row) => row.status === 'draft'">
+ *   {{ cell: ({ value, column }) => column.key === 'status' ? <Text tone="success">{value}</Text> : value }}
+ * </Table>
  */
 export declare const Table: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     columns: {
@@ -78,9 +120,18 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<Array<string | number>>;
         default: undefined;
     };
-    /** 选择列 */
+    /**
+     * 选择列：`false` = 不出选择列；`true` = 全表可勾选；**函数 = 按行判定可勾选性**。
+     *
+     * 函数形态下，返回 `false` 的行渲染**禁用态**勾选框（`Checkbox` 自带置灰外观 +
+     * `cursor: not-allowed`），且**不进表头全选的增删范围**；整表都不可勾选时，表头勾选框自身禁用。
+     *
+     * ⚠️ 「有没有选择列」只由 `selectable === false` 决定 —— 函数形态**恒渲染**选择列。
+     * ⚠️ 别用「受控回弹」在调用方模拟行级禁用：本件是全受控（`selected = props.modelValue`），
+     *    被忽略的上报**不会**让原生 `input.checked` 复位，会留下「整行点亮却不在选中集」的假象。
+     */
     selectable: {
-        type: BooleanConstructor;
+        type: PropType<boolean | TableRowSelectable>;
         default: boolean;
     };
     /** 斑马纹（**显式类**而非 nth-child：表里可能有分组行） */
@@ -107,6 +158,19 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * 布局档（只决定 `<table>` 的 `table-layout`；**列宽一律由 `<colgroup>` 下发，与档位无关**）：
+     *
+     * - `auto`（缺省）—— 列宽随内容自适应。`column.width` 是**建议值**，
+     *   长文本（尤其中文长串 / 无空格串）会顶破列宽把表格撑得比容器还宽 ⇒ 包裹层出横向滚动条。
+     * - `fixed` —— `table-layout: fixed`：列宽受声明约束、**不再被内容撑破**，
+     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。代价：长文本列要显式 `ellipsis: true`，
+     *   否则会**换行**（行高变高）。
+     */
+    layout: {
+        type: PropType<"auto" | "fixed">;
+        default: string;
+    };
     stickyHead: {
         type: BooleanConstructor;
         default: boolean;
@@ -203,9 +267,18 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<Array<string | number>>;
         default: undefined;
     };
-    /** 选择列 */
+    /**
+     * 选择列：`false` = 不出选择列；`true` = 全表可勾选；**函数 = 按行判定可勾选性**。
+     *
+     * 函数形态下，返回 `false` 的行渲染**禁用态**勾选框（`Checkbox` 自带置灰外观 +
+     * `cursor: not-allowed`），且**不进表头全选的增删范围**；整表都不可勾选时，表头勾选框自身禁用。
+     *
+     * ⚠️ 「有没有选择列」只由 `selectable === false` 决定 —— 函数形态**恒渲染**选择列。
+     * ⚠️ 别用「受控回弹」在调用方模拟行级禁用：本件是全受控（`selected = props.modelValue`），
+     *    被忽略的上报**不会**让原生 `input.checked` 复位，会留下「整行点亮却不在选中集」的假象。
+     */
     selectable: {
-        type: BooleanConstructor;
+        type: PropType<boolean | TableRowSelectable>;
         default: boolean;
     };
     /** 斑马纹（**显式类**而非 nth-child：表里可能有分组行） */
@@ -232,6 +305,19 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * 布局档（只决定 `<table>` 的 `table-layout`；**列宽一律由 `<colgroup>` 下发，与档位无关**）：
+     *
+     * - `auto`（缺省）—— 列宽随内容自适应。`column.width` 是**建议值**，
+     *   长文本（尤其中文长串 / 无空格串）会顶破列宽把表格撑得比容器还宽 ⇒ 包裹层出横向滚动条。
+     * - `fixed` —— `table-layout: fixed`：列宽受声明约束、**不再被内容撑破**，
+     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。代价：长文本列要显式 `ellipsis: true`，
+     *   否则会**换行**（行高变高）。
+     */
+    layout: {
+        type: PropType<"auto" | "fixed">;
+        default: string;
+    };
     stickyHead: {
         type: BooleanConstructor;
         default: boolean;
@@ -308,6 +394,7 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:modelValue"?: ((keys: (string | number)[]) => any) | undefined;
 }>, {
     fill: boolean;
+    layout: "fixed" | "auto";
     size: ControlSize;
     compact: boolean;
     data: TableRow[];
@@ -318,7 +405,7 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     onExpandChange: (keys: Array<string | number>) => void;
     modelValue: (string | number)[];
     emptyText: string;
-    selectable: boolean;
+    selectable: boolean | TableRowSelectable;
     striped: boolean;
     borderless: boolean;
     stickyHead: boolean;