@manohub/ui 0.10.2 → 0.10.4

package/dist/components/select/select-tree.d.ts

@@ -11,15 +11,15 @@
  *    **整支保留**，并强制全展到命中层（算法与切分都是纯函数，见 `select-tree-filter.ts`）；
  *    命中文本按面层的 `.mh-select__hit` 高亮（靠 `Tree` 的可选 `renderLabel` 钩子落进标签槽）。
  * 3. **面板内限高滚动**：限高归面板（`.mh-select__panel` 的 `--ui-select-panel-max-height`）、
- *    溢出由面板内容区（`.mh-select__body`）承担；本件只把树包在 `.mh-select__tree` 里给内距
- *    —— 限高不由形态自持，列表形态共用同一份。
+ *    溢出与内容内距都由面板内容区（`.mh-select__body`）承担 —— 两形态共用同一份，本件因此
+ *    把树**直接**装进内容区，不再自持一层只给内距的包裹（限高与内距都不由形态自持）。
  *
  * ## 与 `Select` 的三处有意差异（都是「树不是列表」决定的）
  *
  * | 事项 | `Select` | `SelectTree` |
  * | --- | --- | --- |
  * | 值 | `string \| number \| Array<…>` | 只单选、只 `string`（`Tree` 的主键本就 `String()` 化） |
- * | 面板内 ↑↓ 行导航 | 有（选项是真实 `<button>`，焦点即高亮） | **无**（树的行是 `div`、没有 tabindex；`Tree` 自身也不做键盘导航） |
+ * | 面板内 ↑↓ 行导航 | 有（高亮位由 `data-active` 表达，焦点留在触发器上） | **无**（树的行不做键盘导航，与 `Tree` 自身同口径） |
  * | 空 / 加载态 | 列表体的内建行 | 面板内同样出一行文字（**不复用**整件三态容器：下拉里出空态插画太重） |
  *
  * @example 基础单选
@@ -139,6 +139,16 @@ export declare const SelectTree: import("vue").DefineComponent<import("vue").Ext
         type: PropType<(keyword: string) => void>;
         default: undefined;
     };
+    /** 面板里树行的节点图标（标签前的一位图标）：透传给 `Tree.renderIcon` */
+    renderIcon: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
+    /** 面板里树行的展开 / 收起箭头字形：透传给 `Tree.renderCaret` */
+    renderCaret: {
+        type: PropType<(node: TreeNode, expanded: boolean) => unknown>;
+        default: undefined;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': (v: string) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -248,6 +258,16 @@ export declare const SelectTree: import("vue").DefineComponent<import("vue").Ext
         type: PropType<(keyword: string) => void>;
         default: undefined;
     };
+    /** 面板里树行的节点图标（标签前的一位图标）：透传给 `Tree.renderIcon` */
+    renderIcon: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
+    /** 面板里树行的展开 / 收起箭头字形：透传给 `Tree.renderCaret` */
+    renderCaret: {
+        type: PropType<(node: TreeNode, expanded: boolean) => unknown>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {
@@ -257,6 +277,8 @@ export declare const SelectTree: import("vue").DefineComponent<import("vue").Ext
     loading: boolean;
     labelKey: string;
     childrenKey: string;
+    renderCaret: (node: TreeNode, expanded: boolean) => unknown;
+    renderIcon: (node: TreeNode) => unknown;
     expandedKeys: string[];
     defaultExpandedKeys: string[];
     defaultExpandAll: boolean;

package/dist/components/select/select-tree.js

@@ -113,6 +113,16 @@ const SelectTree = /* @__PURE__ */ defineComponent({
     onSearch: {
       type: Function,
       default: void 0
+    },
+    /** 面板里树行的节点图标（标签前的一位图标）：透传给 `Tree.renderIcon` */
+    renderIcon: {
+      type: Function,
+      default: void 0
+    },
+    /** 面板里树行的展开 / 收起箭头字形：透传给 `Tree.renderCaret` */
+    renderCaret: {
+      type: Function,
+      default: void 0
     }
   },
   emits: {
@@ -184,7 +194,8 @@ const SelectTree = /* @__PURE__ */ defineComponent({
       disabled: props.disabled,
       clear,
       openPanel: () => showPanel(panelRef.value)
-      /* 有意不给 `focusFirst`：树的行是 `div`、没有 tabindex，面板内不做 ↑↓ 行导航 */
+      /* 有意不给 `moveActive` / `commitActive`：树不做面板内键盘导航（行不可聚焦、与 `Tree` 自身
+         同口径），故 `↑` / `↓` 只开面板、`Enter` / `Space` 仍归按钮的原生切换行为 */
     });
     const renderHitLabel = (node) => createVNode(Fragment, null, [splitHighlight(treeLabel(node, props.labelKey), keyword.value).map((segment, index) => segment.hit ? createVNode("span", {
       "key": index,
@@ -228,9 +239,7 @@ const SelectTree = /* @__PURE__ */ defineComponent({
               "class": "mh-select__option mh-select__option--empty"
             }, [props.emptyText]);
           }
-          return createVNode("div", {
-            "class": "mh-select__tree"
-          }, [createVNode(Tree, {
+          return createVNode(Tree, {
             "nodes": visibleNodes.value,
             "rowKey": props.rowKey,
             "labelKey": props.labelKey,
@@ -239,8 +248,10 @@ const SelectTree = /* @__PURE__ */ defineComponent({
             "expandedKeys": expandedKeys.value,
             "onExpandChange": handleExpandChange,
             "onSelect": pick,
-            "renderLabel": highlightLabel
-          }, null)]);
+            "renderLabel": highlightLabel,
+            "renderIcon": props.renderIcon,
+            "renderCaret": props.renderCaret
+          }, null);
         }
       })]);
     };

package/dist/components/select/select-trigger.d.ts

@@ -45,6 +45,16 @@ export declare const SelectTrigger: import("vue").DefineComponent<import("vue").
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * 键盘高亮行的 id（`aria-activedescendant`，**列表形态专用**）。
+     *
+     * 选项是 `div[role='option']`、不可聚焦，焦点留在本按钮上 ⇒ 高亮项要靠这个属性告诉读屏。
+     * 树形态不给（树的行不做键盘导航，见 `SelectTree`）。
+     */
+    activeDescendant: {
+        type: StringConstructor;
+        default: undefined;
+    };
     /** 触发器上的键盘契约（`createTriggerKeydown()` 产出，两件同源） */
     onKeydown: {
         type: PropType<(event: KeyboardEvent) => void>;
@@ -104,6 +114,16 @@ export declare const SelectTrigger: import("vue").DefineComponent<import("vue").
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * 键盘高亮行的 id（`aria-activedescendant`，**列表形态专用**）。
+     *
+     * 选项是 `div[role='option']`、不可聚焦，焦点留在本按钮上 ⇒ 高亮项要靠这个属性告诉读屏。
+     * 树形态不给（树的行不做键盘导航，见 `SelectTree`）。
+     */
+    activeDescendant: {
+        type: StringConstructor;
+        default: undefined;
+    };
     /** 触发器上的键盘契约（`createTriggerKeydown()` 产出，两件同源） */
     onKeydown: {
         type: PropType<(event: KeyboardEvent) => void>;
@@ -130,5 +150,6 @@ export declare const SelectTrigger: import("vue").DefineComponent<import("vue").
     clearable: boolean;
     hasValue: boolean;
     onClear: () => void;
+    activeDescendant: string;
     renderValue: () => VNodeChild;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/select/select-trigger.js

@@ -48,6 +48,16 @@ const SelectTrigger = /* @__PURE__ */ defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * 键盘高亮行的 id（`aria-activedescendant`，**列表形态专用**）。
+     *
+     * 选项是 `div[role='option']`、不可聚焦，焦点留在本按钮上 ⇒ 高亮项要靠这个属性告诉读屏。
+     * 树形态不给（树的行不做键盘导航，见 `SelectTree`）。
+     */
+    activeDescendant: {
+      type: String,
+      default: void 0
+    },
     /** 触发器上的键盘契约（`createTriggerKeydown()` 产出，两件同源） */
     onKeydown: {
       type: Function,
@@ -80,8 +90,12 @@ const SelectTrigger = /* @__PURE__ */ defineComponent({
         popovertarget: props.panelId,
         "aria-haspopup": "listbox",
         /* 开合态由原生 popover 与 popup.css 的箭头转向承担，本件不维护第二份；
-           恒定 'false' 是既有口径（输入面的触发器形态不跟踪 popover 的开关状态） */
+           恒定 'false' 是既有口径（输入面的触发器形态不跟踪 popover 的开关状态）。
+           ⚠️ 这与 `aria-activedescendant`（下面那条）**都是焦点留在触发器上的必然结果**：
+           真的做完整要连 `aria-expanded` 一起跟踪开合态，那是另一次改动（见 select.md 的注意事项）。 */
         "aria-expanded": "false",
+        /* 高亮行引用（列表形态给、树形态不给）：值 `undefined` 时 Vue 会整个摘掉这个属性 */
+        "aria-activedescendant": props.activeDescendant,
         onKeydown: props.onKeydown
       },
       "onChange": () => props.onClear?.()

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

@@ -1,4 +1,5 @@
 import { type PropType, type SlotsType, type VNode, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
 /** 轨道项：`Tabs` 从 `TabPanel` 提取（写了面板时）或由 `options` 直接给（老写法） */
 export interface TabsOption {
     /** 项文字 */
@@ -19,6 +20,14 @@ export interface TabsProps {
     onChange?: (value: string | number) => void;
     /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
     lazy?: boolean;
+    /**
+     * **缺省皮肤的尺寸档**（`sm` / `md` / `lg`，即 24 / 32 / 40）—— 只透传给缺省皮肤 `TabBar`。
+     *
+     * 传了 `selector` 插槽时本档**整块失效**：那时尺寸归你放进来的那个控件自己管
+     * （`Capsule` / 分段按钮各有自己的 `size`），本件也不给它加任何类 —— 有意不给
+     * 「一处声明、两处打架」的机会。
+     */
+    size?: ControlSize;
 }
 /** 一块面板的信息（本件只承载这些，自己不画任何东西） */
 export interface TabPanelProps {
@@ -110,6 +119,8 @@ export declare const TabPanel: import("vue").DefineComponent<import("vue").Extra
  * - 传插槽则整块替换：放 `Capsule`（胶囊）、按钮族的分段形态、单选卡片都行，
  *   作用域参数 `{ value, options, select }` 把值、项（已含从 `TabPanel` 提取的那些）与选中回调
  *   递出来。本件不认识任何选择控件的类名 —— **控制器与骨架零互指**，换皮肤不必动本件。
+ * - 尺寸档 `size` **只在缺省这条路上生效**：它原样透传给 `TabBar`（高度 24 / 32 / 40 + 同级字号，
+ *   只覆盖 `--ui-tabbar-*` 令牌）；换了皮肤，尺寸归你的控件自己管，本件不代它加类。
  *
  * ## 显隐只有一条路径
  * 本件按受控值给非选中面板下发 `hidden`，**与控件形态无关**（是不是原生 radio 都一样）。
@@ -157,6 +168,11 @@ export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPr
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 缺省皮肤的尺寸档（`sm` / `md` / `lg`）；口径见 `TabsProps.size` */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:value': (value: string | number) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -180,9 +196,15 @@ export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPr
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 缺省皮肤的尺寸档（`sm` / `md` / `lg`）；口径见 `TabsProps.size` */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((value: string | number) => any) | undefined;
 }>, {
+    size: ControlSize;
     value: string | number | undefined;
     onChange: (value: string | number) => void;
     options: TabsOption[];

package/dist/components/tabs/index.js

@@ -55,6 +55,11 @@ const Tabs = /* @__PURE__ */ defineComponent({
     lazy: {
       type: Boolean,
       default: false
+    },
+    /** 缺省皮肤的尺寸档（`sm` / `md` / `lg`）；口径见 `TabsProps.size` */
+    size: {
+      type: String,
+      default: "md"
     }
   },
   /* 同 `TabBar`：受控值必须 emit 回 `update:value`，否则 `v-model:value="current"` 静默失效
@@ -116,6 +121,7 @@ const Tabs = /* @__PURE__ */ defineComponent({
       }) : createVNode(TabBar, {
         "options": items,
         "value": current,
+        "size": props.size,
         "onChange": select
       }, null), createVNode("div", {
         "class": "mh-tabs-panels"

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

@@ -1,203 +1,82 @@
-import { type IconName } from '@manohub/icon';
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import type { ControlSize } from '../control-size';
+import { type BadgeShape, type BadgeSize, type BadgeTone } from '../badge';
+/** 本件的形态：`Badge` 的三档 + `add`（新增入口，本件扩展档） */
+export type TagShape = BadgeShape | 'add';
 export interface TagProps {
     /**
      * 形态：
-     * - `regular`（缺省）常规内容标签
-     * - `status` 状态标签（配 `tone` 用四色）
-     * - `select` 可选标签（渲染隐身原生 radio，选中态实底主色）
-     * - `add` 新增标签（虚线框 + 加号图标，点击回调）
-     * - `chip` 轻量筛选片
+     * - `soft`（缺省）/ `outline` / `plain` —— 转发给 `Badge` 的同名档；
+     * - `add` 新增入口：虚线入口点击后就地变窄输入框，`Enter` 提交回调 `onAdd`。
      */
-    shape?: 'regular' | 'status' | 'select' | 'add' | 'chip';
-    /** 状态档语义（只用 `shape="status"`） */
-    tone?: 'info' | 'success' | 'warning' | 'error';
-    /** 尺寸档（20 / 24 / 28） */
-    size?: ControlSize;
-    /** 大号档（= `size="lg"`，保留的既有写法） */
-    lg?: boolean;
-    /** 前置图标（图标包的闭合枚举） */
-    icon?: IconName;
-    /** 描边档：浅主色底 + 浅主色边（设计稿的标签配方，配 `size="sm"` 即「表格内标签」） */
-    outline?: boolean;
-    /** 可关闭（右端出现关闭位） */
+    shape?: TagShape;
+    /** 语义色档（转发 `Badge`；缺省 `default` 是中性面） */
+    tone?: BadgeTone;
+    /** 尺寸档（转发 `Badge`：`sm` 20 / `md` 24）；缺省 `md`（与 `Badge` 的缺省 `sm` 不同，见下） */
+    size?: BadgeSize;
+    /** 可关闭：右端出现关闭位（**受控**：只回调 `onClose`，本件不删自己） */
     closable?: boolean;
-    /** 自定义色（hex）：底按该色 14% 与白混出，字用该色本身 */
-    color?: string;
-    /** `shape="select"` 的选中态 */
-    selected?: boolean;
-    /** 禁用（可选档不可点、转弱） */
-    disabled?: boolean;
-    /** `shape="select"` 的原生分组名与值（组内同名互斥） */
-    name?: string;
-    value?: string | number;
-    /** `shape="add"` / `chip` 的点击回调（`select` 档用 `onChange`） */
-    onClick?: () => void;
-    /** `shape="select"` 的选中变化回调 */
-    onChange?: (selected: boolean) => void;
-    /** 关闭回调（`closable` 的关闭位点击） */
+    /** 关闭位回调（`closable`） */
     onClose?: () => void;
+    /** 新增档提交回调（`shape="add"`）：载荷是用户敲定的标签名（已 trim、非空） */
+    onAdd?: (name: string) => void;
 }
-/**
- * 标签（常规 / 状态 / 可选 / 新增 / 轻量筛选片）。
- *
- * **与 `Badge` 的判据**：`Badge` 是状态徽标（固定短、状态色、可带圆点/数字）；
- * 本件是内容标签（描述性文字，长度随内容，可能可选/可加/可关闭）。
- *
- * 可选档（`shape="select"`）是**原生 radio**：组内同名互斥、键盘方向键换项都由浏览器接管，
- * 样式层靠 `:has(input:checked)` / `[data-state='selected']` / `.is-selected` 三源等价选态。
- *
- * 关闭是**受控**的：本件只回调 `onClose`，是否移除由业务决定（与 `Notification` 同一口径）——
- * 组件自己删自己会让「关闭后又能从别处恢复」这类需求无解。
- *
- * @example 状态标签
- * <Tag shape="status" tone="success">已通过</Tag>
- *
- * @example 可关闭的筛选条件
- * <Tag closable icon="filter" onClose={() => remove('status')}>状态：已通过</Tag>
- *
- * @example 可选标签（同组互斥）
- * <Tag shape="select" name="scope" value="all" :selected="v === 'all'" @change="select('all')">全部</Tag>
- */
 export declare const Tag: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     shape: {
-        type: PropType<TagProps["shape"]>;
+        type: PropType<TagShape>;
         default: string;
     };
     tone: {
-        type: PropType<TagProps["tone"]>;
-        default: undefined;
+        type: PropType<BadgeTone>;
+        default: string;
     };
     size: {
-        type: PropType<ControlSize>;
+        type: PropType<BadgeSize>;
         default: string;
     };
-    lg: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    icon: {
-        type: PropType<IconName>;
-        default: undefined;
-    };
-    outline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     closable: {
         type: BooleanConstructor;
         default: boolean;
     };
-    color: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    name: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    onClick: {
+    onClose: {
         type: PropType<() => void>;
         default: undefined;
     };
-    onChange: {
-        type: PropType<(selected: boolean) => void>;
-        default: undefined;
-    };
-    onClose: {
-        type: PropType<() => void>;
+    onAdd: {
+        type: PropType<(name: string) => void>;
         default: undefined;
     };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     shape: {
-        type: PropType<TagProps["shape"]>;
+        type: PropType<TagShape>;
         default: string;
     };
     tone: {
-        type: PropType<TagProps["tone"]>;
-        default: undefined;
+        type: PropType<BadgeTone>;
+        default: string;
     };
     size: {
-        type: PropType<ControlSize>;
+        type: PropType<BadgeSize>;
         default: string;
     };
-    lg: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    icon: {
-        type: PropType<IconName>;
-        default: undefined;
-    };
-    outline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     closable: {
         type: BooleanConstructor;
         default: boolean;
     };
-    color: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    name: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    onClick: {
+    onClose: {
         type: PropType<() => void>;
         default: undefined;
     };
-    onChange: {
-        type: PropType<(selected: boolean) => void>;
-        default: undefined;
-    };
-    onClose: {
-        type: PropType<() => void>;
+    onAdd: {
+        type: PropType<(name: string) => void>;
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    color: string;
-    size: ControlSize;
-    icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
-    disabled: boolean;
-    name: string;
-    value: string | number;
-    onChange: (selected: boolean) => void;
-    onClick: () => void;
+    size: BadgeSize;
     onClose: () => void;
-    outline: boolean;
-    selected: boolean;
-    lg: boolean;
-    shape: "add" | "select" | "chip" | "regular" | "status" | undefined;
+    shape: TagShape;
     closable: boolean;
-    tone: "error" | "info" | "success" | "warning" | undefined;
+    onAdd: (name: string) => void;
+    tone: BadgeTone;
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;