@manohub/ui 0.7.0 → 0.8.0

package/dist/components/table/index.js

@@ -24,9 +24,18 @@ const Table = /* @__PURE__ */ defineComponent({
       type: Array,
       default: void 0
     },
-    /** 选择列 */
+    /**
+     * 选择列：`false` = 不出选择列；`true` = 全表可勾选；**函数 = 按行判定可勾选性**。
+     *
+     * 函数形态下，返回 `false` 的行渲染**禁用态**勾选框（`Checkbox` 自带置灰外观 +
+     * `cursor: not-allowed`），且**不进表头全选的增删范围**；整表都不可勾选时，表头勾选框自身禁用。
+     *
+     * ⚠️ 「有没有选择列」只由 `selectable === false` 决定 —— 函数形态**恒渲染**选择列。
+     * ⚠️ 别用「受控回弹」在调用方模拟行级禁用：本件是全受控（`selected = props.modelValue`），
+     *    被忽略的上报**不会**让原生 `input.checked` 复位，会留下「整行点亮却不在选中集」的假象。
+     */
     selectable: {
-      type: Boolean,
+      type: [Boolean, Function],
       default: false
     },
     /** 斑马纹（**显式类**而非 nth-child：表里可能有分组行） */
@@ -53,6 +62,19 @@ const Table = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * 布局档（只决定 `<table>` 的 `table-layout`；**列宽一律由 `<colgroup>` 下发，与档位无关**）：
+     *
+     * - `auto`（缺省）—— 列宽随内容自适应。`column.width` 是**建议值**，
+     *   长文本（尤其中文长串 / 无空格串）会顶破列宽把表格撑得比容器还宽 ⇒ 包裹层出横向滚动条。
+     * - `fixed` —— `table-layout: fixed`：列宽受声明约束、**不再被内容撑破**，
+     *   于是百分比 / 数字权重可以「吃满容器 + 严格按比例」。代价：长文本列要显式 `ellipsis: true`，
+     *   否则会**换行**（行高变高）。
+     */
+    layout: {
+      type: String,
+      default: "auto"
+    },
     stickyHead: {
       type: Boolean,
       default: false
@@ -135,10 +157,15 @@ const Table = /* @__PURE__ */ defineComponent({
     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 hasSelectColumn = computed(() => props.selectable !== false);
+    const isRowSelectable = (row, index) => typeof props.selectable === "function" ? props.selectable(row, index) !== false : props.selectable !== false;
+    const selectableKeys = computed(() => props.data.filter((row, index) => isRowSelectable(row, index)).map((row) => row[props.rowKey]));
+    const selectableKeySet = computed(() => new Set(selectableKeys.value));
+    const selectedSelectable = computed(() => selected.value.filter((key) => selectableKeySet.value.has(key)));
+    const allSelected = computed(() => selectableKeys.value.length > 0 && selectedSelectable.value.length >= selectableKeys.value.length);
+    const someSelected = computed(() => selectedSelectable.value.length > 0 && !allSelected.value);
+    const headerCheckboxDisabled = computed(() => selectableKeys.value.length === 0);
     const innerExpanded = ref(props.defaultExpandedKeys);
     const expanded = computed(() => props.expandedKeys ?? innerExpanded.value);
     const toggleExpand = (key) => {
@@ -147,19 +174,45 @@ const Table = /* @__PURE__ */ defineComponent({
       props.onExpandChange?.(next);
     };
     const resolvedSize = computed(() => props.compact ? "sm" : props.size);
-    const leadColumns = computed(() => (props.selectable ? 1 : 0) + (props.expandable ? 1 : 0));
+    const leadColumns = computed(() => (hasSelectColumn.value ? 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 colStyles = computed(() => {
+      const weightSum = props.columns.reduce((sum, item) => typeof item.width === "number" ? sum + item.width : sum, 0);
+      return props.columns.map((column) => {
+        const style = {};
+        if (typeof column.width === "number") {
+          if (weightSum > 0) style.width = `${Number((column.width / weightSum * 100).toFixed(4))}%`;
+        } else if (column.width) {
+          style.width = column.width;
+        }
+        if (column.minWidth) style.minWidth = `${column.minWidth}px`;
+        return style;
+      });
+    });
+    const colElements = () => createVNode("colgroup", null, [props.expandable ? createVNode("col", null, null) : null, hasSelectColumn.value ? createVNode("col", null, null) : null, props.columns.map((column, index) => createVNode("col", {
+      "key": column.key,
+      "style": colStyles.value[index]
+    }, null))]);
     const commit = (next) => {
       emit("update:modelValue", next);
       emit("change", next);
     };
     const toggleRow = (key) => {
+      if (!selectableKeySet.value.has(key)) return;
       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 toggleAll = () => {
+      if (headerCheckboxDisabled.value) return;
+      if (allSelected.value) {
+        commit(selected.value.filter((key) => !selectableKeySet.value.has(key)));
+        return;
+      }
+      const keep = selected.value.filter((key) => !selectableKeySet.value.has(key));
+      commit([...keep, ...selectableKeys.value]);
+    };
     const nextOrder = (key) => {
       if (props.sortKey !== key) return "asc";
       if (props.sortOrder === "asc") return "desc";
@@ -168,7 +221,7 @@ const Table = /* @__PURE__ */ defineComponent({
     };
     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 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.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",
@@ -179,22 +232,20 @@ const Table = /* @__PURE__ */ defineComponent({
         selected: selected.value
       })]) : null, createVNode("table", {
         "class": tableClass
-      }, [props.showHeader ? createVNode("thead", null, [createVNode("tr", null, [props.expandable ? createVNode("th", {
+      }, [colElements(), 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", {
+      }, 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(" "),
-        "style": column.width ? {
-          width: column.width
-        } : void 0
+        "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", {
         "type": "button",
         "class": ["mh-table__sort", props.sortKey === column.key && props.sortOrder ? "mh-table__sort--active" : ""].filter(Boolean).join(" "),
@@ -235,16 +286,18 @@ const Table = /* @__PURE__ */ defineComponent({
         }, [createVNode(Icon, {
           "name": "chevron-down",
           "class": "mh-table__expand-icon"
-        }, null)])]) : null, props.selectable ? (
+        }, null)])]) : null, hasSelectColumn.value ? (
           /* 勾选列复用 `Checkbox`（不在表格里手写原生 input）。行本身可能带 onClick（onRow）：
              勾选不该顺带触发行点击 —— 阻断挂在**单元格**上，因为 `Checkbox` 的根是 `label`，
-             点它会冒泡两次（label 自身一次 + 转发给 input 一次），只挡 input 挡不住行点击。 */
+             点它会冒泡两次（label 自身一次 + 转发给 input 一次），只挡 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", {

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

@@ -1,5 +1,5 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import type { ControlSize } from '../control-size';
+import { type PropType, type SlotsType, type VNode, type VNodeChild } from 'vue';
+/** 轨道项：`Tabs` 从 `TabPanel` 提取（写了面板时）或由 `options` 直接给（老写法） */
 export interface TabsOption {
     /** 项文字 */
     label: string;
@@ -7,177 +7,193 @@ export interface TabsOption {
     value: string | number;
     /** 禁用项：不可选 */
     disabled?: boolean;
-    /** 单项可关（`closable` 打开时用它例外掉某些项） */
-    closable?: boolean;
 }
-export type TabsValue = string | number;
-/** 页签形态：`line` 下划线指示条 / `card` 选项卡（与内容区连成一体） */
-export type TabsType = 'line' | 'card';
+export interface TabsProps {
+    /** 轨道项：**只在默认插槽里没写 `TabPanel` 时**才读（老写法，按顺序与面板一一配对） */
+    options?: TabsOption[];
+    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
+    value?: string | number;
+    /** 非受控初始选中值，缺省第一个可选项的值 */
+    defaultValue?: string | number;
+    /** 选中变化回调（受控与非受控都会调） */
+    onChange?: (value: string | number) => void;
+    /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
+    lazy?: boolean;
+}
+/** 一块面板的信息（本件只承载这些，自己不画任何东西） */
+export interface TabPanelProps {
+    /** 页签名：轨道上的文字，同时是缺省项值（项值另有要求时用 `value` 覆盖） */
+    name: string;
+    /** 显式项值；不传即用 `name` */
+    value?: string | number;
+    /** 禁用项：不可选（组件路径没有原生约束，`Tabs` 会自己兜） */
+    disabled?: boolean;
+    /** 惰性档：切走即卸载（与 `Tabs` 的同名档取或） */
+    lazy?: boolean;
+}
 /**
- * 页签条（**自绘**；下划线或选项卡两种形态 + 三档尺寸 + 居中 + 可关闭 + 可新增 + 「更多」收纳）。
- *
- * ## 与 `Tabset` / `Capsule` 的分工（三者都能"切换"，判据在**可见形态**）
- *
- * - 本件：**页签条**（`line` 下划线 / `card` 选项卡，页面级分区切换）—— 就是这一族的皮肤；
- * - `Capsule`：胶囊/分段按钮（块状选中底），用于筛选项那种"按钮感"切换；
- * - `Tabset`：**骨架**（把某组互斥项与面板显隐接起来），它不含皮肤 —— 把本件塞进它的 `selector` 插槽即可。
- *
- * ## 指示条为什么不是一个滑块
- *
- * 每个项的指示条是它自己的伪元素、常驻但未选时 `opacity:0; scale:.75` —— "滑过去"的观感来自这两个属性的
- * 过渡。做成一条共享滑块要 JS 量位置，且首帧会跳。**别在页签区加轨线**（会扣走区高 1px，规范明确警告）。
- * （`card` 档不画指示条：选中由底色与顶边表达。）
+ * 面板：`Tabs` 的**信息入口**。
  *
- * ## 超过一屏的页签怎么放
+ * 使用方只写面板自己的信息（`name` 等），`Tabs` 在渲染期把它提取成轨道项 ——
+ * 缺省就是页签条，要换皮就写 `Tabs` 的 `selector` 插槽（胶囊 / 分段按钮 / 单选卡片）。
  *
- * 给 `more` 插槽即出「更多 ▾」页签 + 操作层浮层（原生 popover，零 JS 开合）；哪些页签收进"更多"由调用方
- * 决定 —— 收多久、收哪些是业务判断，不是皮肤能定的。
+ * 本件**不画任何东西**：渲染即默认插槽直通。面板壳（`.mh-tabs-panel`）与显隐由 `Tabs` 出，
+ * 故挂在本件上的 `class` / `style` 会被搬到那块壳上（面板级样式改的是**壳** —— 内距、限高、
+ * 自己滚，挂到内容上就没有这层可改）。
  *
- * @example 基本
- * <Tabs :options="[{label:'全部',value:'all'},{label:'进行中',value:'doing'}]" v-model:value="current" />
- *
- * @example 选项卡形态 + 可关闭可新增
- * <Tabs type="card" closable addable :options="tabs" v-model:value="current"
- *   :on-close="remove" :on-add="add" />
+ * @example
+ * <Tabs v-model:value="current">
+ *   <TabPanel name="概览">…</TabPanel>
+ *   <TabPanel name="工具" disabled>…</TabPanel>
+ * </Tabs>
  */
-export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    options: {
-        type: PropType<TabsOption[]>;
+export declare const TabPanel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
         required: true;
     };
-    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
     value: {
-        type: PropType<TabsValue | undefined>;
-        default: undefined;
-    };
-    /** 非受控初始选中值，缺省第一项 */
-    defaultValue: {
-        type: PropType<TabsValue | undefined>;
+        type: PropType<string | number | undefined>;
         default: undefined;
     };
-    /** 选中变化回调（受控与非受控都会调） */
-    onChange: {
-        type: PropType<(value: TabsValue) => void>;
-        default: undefined;
-    };
-    /** 形态：`line` 下划线 / `card` 选项卡 */
-    type: {
-        type: PropType<TabsType>;
-        default: string;
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    /** 整体居中（页签少、要撑满整行时用） */
-    centered: {
+    lazy: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
-    size: {
-        type: PropType<ControlSize>;
-        default: string;
+}>, () => string | number | boolean | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNodeArrayChildren | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    value: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
     };
-    /** 每项带关闭位（单项可用 `option.closable` 覆写） */
-    closable: {
+    disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 尾部「新增」按钮 */
-    addable: {
+    lazy: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 「更多」页签的文字 */
-    moreLabel: {
-        type: StringConstructor;
-        default: string;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    value: string | number | undefined;
+    lazy: boolean;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 面板切换（**操作层骨架 + 组件路径显隐**）。
+ *
+ * ## 它是什么
+ * 把「一组互斥选项」与「按顺序排列的面板」接起来：第 n 个选项 ↔ 第 n 块面板。
+ * 骨架（根、面板组、收起态）在操作层 `styles/operations/tabs.css`，本件负责：
+ * 受控值、从面板提取项、面板包装与显隐、把 `select` 交给选择控件。
+ *
+ * ## 信息从哪来（两条路，**写了 `TabPanel` 就以它为准**）
+ * - **`TabPanel`（推荐）**：面板自带 `name`（页签文字 + 缺省项值）、`value`、`disabled`、`lazy`，
+ *   本件在渲染期提取成轨道项 —— 使用方不必再维护一份与之平行的 `options`；
+ * - **`options`（老写法）**：默认插槽给裸节点，按顺序与 `options` 一一配对；
+ *   裸节点没有同序项时那块面板**永远不可见**（不越档）。
+ * 两条路不叠加：写了 `TabPanel` 的那次渲染里 `options` 不参与（两套并行声明必打架）。
+ *
+ * ## 选择控件从哪来（`selector` 插槽）
+ * - **不传插槽 = 用缺省皮肤 `TabBar`**（页签条形态）—— 绝大多数用法只要这一句；
+ * - 传插槽则整块替换：放 `Capsule`（胶囊）、按钮族的分段形态、单选卡片都行，
+ *   作用域参数 `{ value, options, select }` 把值、项（已含从 `TabPanel` 提取的那些）与选中回调
+ *   递出来。本件不认识任何选择控件的类名 —— **控制器与骨架零互指**，换皮肤不必动本件。
+ *
+ * ## 显隐只有一条路径
+ * 本件按受控值给非选中面板下发 `hidden`，**与控件形态无关**（是不是原生 radio 都一样）。
+ * 曾经的「零 JS 路径」（原生 radio + 操作层档位表 `:has(input:nth-of-type(n):checked)`）**已退役**：
+ * 写不出通式、上限 8 档、还要求开关与面板同父级同序 —— 局限远大于收益。
+ * 故拿 `Capsule` 当控件时**不必**再给它 `name`（那曾经只是给操作层认组用的）。
+ *
+ * ## 惰性档
+ * `lazy` 在 `Tabs` 与 `TabPanel` 上都可给（取或）：非激活面板**不渲染**（切走即卸载）。
+ * 缺省档全部挂载、只用 `hidden` 藏 —— 保留面板内部状态（滚动位置、局部输入）。
+ *
+ * @example 最小用法：只写面板信息（缺省页签条）
+ * <Tabs v-model:value="current">
+ *   <TabPanel name="概览">…</TabPanel>
+ *   <TabPanel name="工具">…</TabPanel>
+ * </Tabs>
+ *
+ * @example 换皮：胶囊作选择控件
+ * <Tabs v-model:value="current">
+ *   {{
+ *     selector: ({ value, options, select }) =>
+ *       <Capsule :options="options" modelValue={value} onChange={select} />,
+ *     default: () => [<TabPanel name="概览">…</TabPanel>, <TabPanel name="工具">…</TabPanel>],
+ *   }}
+ * </Tabs>
+ */
+export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<TabsOption[]>;
+        default: undefined;
     };
-    /** 关闭某项（只回调，**不从 `options` 里删** —— 数据归调用方） */
-    onClose: {
-        type: PropType<(value: TabsValue) => void>;
+    value: {
+        type: PropType<string | number | undefined>;
         default: undefined;
     };
-    /** 点新增（只回调） */
-    onAdd: {
-        type: PropType<() => void>;
+    defaultValue: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string | number) => void>;
         default: undefined;
     };
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:value': (value: TabsValue) => true;
+    'update:value': (value: string | number) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     options: {
         type: PropType<TabsOption[]>;
-        required: true;
+        default: undefined;
     };
-    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
     value: {
-        type: PropType<TabsValue | undefined>;
+        type: PropType<string | number | undefined>;
         default: undefined;
     };
-    /** 非受控初始选中值，缺省第一项 */
     defaultValue: {
-        type: PropType<TabsValue | undefined>;
+        type: PropType<string | number | undefined>;
         default: undefined;
     };
-    /** 选中变化回调（受控与非受控都会调） */
     onChange: {
-        type: PropType<(value: TabsValue) => void>;
+        type: PropType<(value: string | number) => void>;
         default: undefined;
     };
-    /** 形态：`line` 下划线 / `card` 选项卡 */
-    type: {
-        type: PropType<TabsType>;
-        default: string;
-    };
-    /** 整体居中（页签少、要撑满整行时用） */
-    centered: {
+    lazy: {
         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: TabsValue) => void>;
-        default: undefined;
-    };
-    /** 点新增（只回调） */
-    onAdd: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
 }>> & Readonly<{
-    "onUpdate:value"?: ((value: TabsValue) => any) | undefined;
+    "onUpdate:value"?: ((value: string | number) => any) | undefined;
 }>, {
-    size: ControlSize;
-    value: TabsValue | undefined;
-    type: TabsType;
-    onChange: (value: TabsValue) => void;
-    onClose: (value: TabsValue) => void;
-    defaultValue: TabsValue | undefined;
-    closable: boolean;
-    centered: boolean;
-    addable: boolean;
-    moreLabel: string;
-    onAdd: () => void;
+    value: string | number | undefined;
+    onChange: (value: string | number) => void;
+    options: TabsOption[];
+    defaultValue: string | number | undefined;
+    lazy: boolean;
 }, SlotsType<{
-    more?: (context: {
+    default?: () => VNodeChild;
+    /** 不传即用缺省皮肤 `TabBar`；传了就整块替换（胶囊 / 分段按钮 / 单选卡片…） */
+    selector?: (context: {
+        value: string | number | undefined;
         options: TabsOption[];
+        select: (value: string | number) => void;
     }) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;