@manohub/ui 0.10.1 → 0.10.3

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>;

package/dist/components/tag/index.js

@@ -1,69 +1,34 @@
-import { defineComponent, computed, createVNode, mergeProps, Fragment, isVNode } from "vue";
+import { defineComponent, computed, ref, watch, createVNode, mergeProps, Fragment } from "vue";
 import { Icon } from "@manohub/icon";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
+import { Badge } from "../badge/index.js";
+import { Input } from "../input/index.js";
 const Tag = /* @__PURE__ */ defineComponent({
   name: "Tag",
   inheritAttrs: false,
   props: {
     shape: {
       type: String,
-      default: "regular"
+      default: "soft"
     },
     tone: {
       type: String,
-      default: void 0
+      default: "default"
     },
+    /* 缺省 `md`（24）而不是跟随 `Badge` 的 `sm`（20）：标签比徽标常用大一号 —— 它是列表项 / 卡片头
+       里承载文字的那一枚，20 档留给「表格内标签」那种密集场景（显式写 `size="sm"`）。 */
     size: {
       type: String,
       default: "md"
     },
-    lg: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: void 0
-    },
-    outline: {
-      type: Boolean,
-      default: false
-    },
     closable: {
       type: Boolean,
       default: false
     },
-    color: {
-      type: String,
-      default: void 0
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    name: {
-      type: String,
-      default: void 0
-    },
-    value: {
-      type: [String, Number],
-      default: void 0
-    },
-    onClick: {
-      type: Function,
-      default: void 0
-    },
-    onChange: {
+    onClose: {
       type: Function,
       default: void 0
     },
-    onClose: {
+    onAdd: {
       type: Function,
       default: void 0
     }
@@ -73,68 +38,104 @@ const Tag = /* @__PURE__ */ defineComponent({
     slots,
     attrs
   }) {
-    const resolvedSize = computed(() => props.lg ? "lg" : props.size);
-    const customColor = computed(() => props.color ? {
-      "--ui-tag-bg": `color-mix(in srgb, ${props.color} 14%, white)`,
-      color: props.color
-    } : void 0);
-    const classes = () => ["mh-tag", resolvedSize.value === "md" ? void 0 : `mh-tag--${resolvedSize.value}`, props.shape !== "regular" ? `mh-tag--${props.shape}` : void 0, props.shape === "status" && props.tone ? `mh-tag--${props.tone}` : void 0, props.outline ? "mh-tag--outline" : void 0, props.shape === "select" && props.selected ? "is-selected" : void 0, props.disabled ? "is-disabled" : void 0, attrs.class].filter(Boolean).join(" ");
-    const content = () => createVNode(Fragment, null, [props.icon ? createVNode(Icon, {
-      "name": props.icon,
-      "class": "mh-tag__icon"
-    }, null) : null, slots.default?.(), props.closable ? createVNode("button", {
-      "type": "button",
-      "class": "mh-tag__close",
-      "aria-label": "关闭",
-      "tabindex": -1,
-      "onClick": (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        props.onClose?.();
+    const isAdd = computed(() => props.shape === "add");
+    const baseShape = computed(() => props.shape === "add" ? "plain" : props.shape);
+    const editing = ref(false);
+    const draft = ref("");
+    const editorRef = ref(null);
+    const startEdit = () => {
+      draft.value = "";
+      editing.value = true;
+    };
+    const stopEdit = () => {
+      editing.value = false;
+      draft.value = "";
+    };
+    const submit = () => {
+      const name = draft.value.trim();
+      if (!name) return;
+      props.onAdd?.(name);
+      stopEdit();
+    };
+    watch(editing, (on) => {
+      if (!on) return;
+      editorRef.value?.querySelector("input")?.focus();
+    }, {
+      flush: "post"
+    });
+    const onEditorKeydown = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      stopEdit();
+    };
+    const onEditorFocusout = (event) => {
+      const next = event.relatedTarget;
+      if (next && editorRef.value?.contains(next)) return;
+      stopEdit();
+    };
+    const forwardAttrs = computed(() => {
+      const rest = {};
+      for (const [key, value] of Object.entries(attrs)) {
+        if (key !== "class" && key !== "style") rest[key] = value;
       }
-    }, [createVNode(Icon, {
-      "name": "close"
-    }, null)]) : null]);
+      if (isAdd.value) {
+        const consumer = rest.onClick;
+        rest.onClick = (event) => {
+          consumer?.(event);
+          startEdit();
+        };
+      }
+      return rest;
+    });
     return () => {
-      let _slot;
-      const style = {
-        ...customColor.value,
-        ...attrs.style
-      };
-      if (props.shape === "add") {
-        return createVNode("button", {
+      if (isAdd.value && editing.value) {
+        return createVNode("span", {
+          "ref": editorRef,
+          "class": "mh-tag mh-tag--editing",
+          "onKeydown": onEditorKeydown,
+          "onFocusout": onEditorFocusout
+        }, [createVNode(Input, {
+          "class": "mh-tag__input",
+          "size": "sm",
+          "modelValue": draft.value,
+          "placeholder": "输入标签名",
+          "aria-label": "标签名",
+          "onChange": (value) => draft.value = value,
+          "onEnter": () => submit()
+        }, null), createVNode("button", {
           "type": "button",
-          "class": classes(),
-          "style": style,
-          "onClick": props.onClick,
-          "disabled": props.disabled
+          "class": "mh-tag__confirm",
+          "aria-label": "添加",
+          "tabindex": -1,
+          "onMousedown": (event) => event.preventDefault(),
+          "onClick": () => submit()
         }, [createVNode(Icon, {
-          "name": "plus",
-          "size": 14
-        }, null), slots.default?.()]);
-      }
-      if (props.shape === "select") {
-        return createVNode("label", {
-          "class": classes(),
-          "style": style
-        }, [createVNode("input", {
-          "type": "radio",
-          "name": props.name,
-          "value": props.value,
-          "checked": props.selected,
-          "disabled": props.disabled,
-          "onChange": (event) => props.onChange?.(event.target.checked)
-        }, null), content()]);
+          "name": "plus"
+        }, null)])]);
       }
-      const Clickable = props.shape === "chip" ? "button" : "span";
-      return createVNode(Clickable, mergeProps({
-        "class": classes(),
-        "style": style
-      }, props.shape === "chip" ? {
-        type: "button",
-        onClick: props.onClick
-      } : {}), _isSlot(_slot = content()) ? _slot : {
-        default: () => [_slot]
+      const extraClass = attrs.class;
+      return createVNode(Badge, mergeProps(forwardAttrs.value, {
+        "as": isAdd.value ? "button" : "span",
+        "tone": props.tone,
+        "shape": baseShape.value,
+        "size": props.size,
+        "class": ["mh-tag", isAdd.value ? "mh-tag--add" : void 0, extraClass].filter(Boolean).join(" "),
+        "style": attrs.style
+      }), {
+        default: () => createVNode(Fragment, null, [isAdd.value ? createVNode(Icon, {
+          "name": "plus"
+        }, null) : null, slots.default?.(), props.closable && !isAdd.value ? createVNode("button", {
+          "type": "button",
+          "class": "mh-tag__close",
+          "aria-label": "关闭",
+          "tabindex": -1,
+          "onClick": (event) => {
+            event.stopPropagation();
+            props.onClose?.();
+          }
+        }, [createVNode(Icon, {
+          "name": "close"
+        }, null)]) : null])
       });
     };
   }

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

@@ -118,9 +118,9 @@ export declare const Text: import("vue").DefineComponent<import("vue").ExtractPr
     size: TextSize;
     weight: TextWeight;
     tone: TextTone;
+    as: TextTag;
     mono: boolean;
     truncate: number | boolean;
-    as: TextTag;
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -115,10 +115,10 @@ export declare const Tooltip: import("vue").DefineComponent<import("vue").Extrac
     title: string;
     align: TooltipAlign;
     action: string;
-    onAction: () => void;
     side: TooltipSide;
     trigger: TooltipTrigger;
     guide: boolean;
+    onAction: () => void;
 }, SlotsType<{
     default?: () => VNodeChild;
     content?: () => VNodeChild;

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

@@ -43,12 +43,25 @@ export interface TreeNode {
  * 应用侧只给节点；操作容器自己做 `stopPropagation`，所以点「删除」不会顺带把这一行选中。
  * 导航件（`Nav`）因此不必重写一份行渲染，把数据与 `renderActions` 透传进来即可。
  *
+ * ## 图标出口（两处，都是「位」而不是「样式」）
+ *
+ * 行内的图标位只有两处，各自独立，缺省都不改变现有几何：
+ * - `renderCaret(node, expanded)` 替掉**箭头字形**（槽位 / 点击 / `data-expanded` 仍归组件）；
+ * - `renderIcon(node)` 是标签**前**的节点图标槽（文件夹 / 文件一类），父子节点共用一位。
+ *
+ * 不在其中之列的（标题里的图标 + 文字）走 `renderLabel`：那属于标签**本体**。
+ *
  * @example 受控展开 + 计数徽标 + 行尾操作
  * <Tree nodes={treeNodes.value} rowKey="id" labelKey="name"
  *   selected={selectedId.value} onSelect={(n) => select(n.id)}
  *   expandedKeys={expandedKeys.value} onExpandChange={(k) => (expandedKeys.value = k)}
  *   renderNode={(n) => <Badge>{countOfDomain(n.id)}</Badge>}
  *   renderActions={(n) => <Button title="删除" onClick={() => removeDomain(n.id)} />} />
+ *
+ * @example 文件夹 / 文件图标 + 方向字形自表达（不靠旋转）
+ * <Tree nodes={tree.value} rowKey="id"
+ *   renderIcon={(n) => <Icon name={hasChild(n) ? 'folder' : 'file-text'} />}
+ *   renderCaret={(_n, expanded) => <Icon name={expanded ? 'chevron-down' : 'chevron-right'} />} />
  */
 export declare const Tree: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     nodes: {
@@ -92,6 +105,31 @@ export declare const Tree: import("vue").DefineComponent<import("vue").ExtractPr
         type: PropType<(node: TreeNode) => unknown>;
         default: undefined;
     };
+    /**
+     * 展开 / 收起箭头的自定义渲染（拿到节点与**当前展开态**）。
+     *
+     * 缺省仍是 `chevron-down` 字形 + 面层收起态转 −90°（默认路径零变化）。
+     * 自定义时**朝向由消费方按 `expanded` 自选字形**（`chevron-right` / `chevron-down`）——
+     * 与包内「方位一律用字形、不靠旋转别的图标」的口径同源；**不要再给内容加
+     * `mh-tree__caret-icon` 类**（那是缺省字形的转向钩子，加上会被转成 −90°）。
+     * 尺寸不必自管：槽位与槽内字形都取全局图标档 `--ui-font-icon`。
+     */
+    renderCaret: {
+        type: PropType<(node: TreeNode, expanded: boolean) => unknown>;
+        default: undefined;
+    };
+    /**
+     * 标签**前**的节点图标槽（文件夹 / 文件一类）。
+     *
+     * 父节点与叶子节点**都由消费方按 `node` 判定**（组件不替它猜「是不是叶子」：同一个图标槽
+     * 在两种节点上都成立，判定依据是数据而不是渲染期形态）。缺省不渲染该槽，几何零变化。
+     * 叶子行的箭头占位仍保留，故图标列跨层级对齐。颜色不写死：跟随行色，
+     * 选中行的主色字与滑过态自动同步。
+     */
+    renderIcon: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
     /** 节点附加内容（计数徽标等），渲染在标签之后 */
     renderNode: {
         type: PropType<(node: TreeNode) => unknown>;
@@ -225,6 +263,31 @@ export declare const Tree: import("vue").DefineComponent<import("vue").ExtractPr
         type: PropType<(node: TreeNode) => unknown>;
         default: undefined;
     };
+    /**
+     * 展开 / 收起箭头的自定义渲染（拿到节点与**当前展开态**）。
+     *
+     * 缺省仍是 `chevron-down` 字形 + 面层收起态转 −90°（默认路径零变化）。
+     * 自定义时**朝向由消费方按 `expanded` 自选字形**（`chevron-right` / `chevron-down`）——
+     * 与包内「方位一律用字形、不靠旋转别的图标」的口径同源；**不要再给内容加
+     * `mh-tree__caret-icon` 类**（那是缺省字形的转向钩子，加上会被转成 −90°）。
+     * 尺寸不必自管：槽位与槽内字形都取全局图标档 `--ui-font-icon`。
+     */
+    renderCaret: {
+        type: PropType<(node: TreeNode, expanded: boolean) => unknown>;
+        default: undefined;
+    };
+    /**
+     * 标签**前**的节点图标槽（文件夹 / 文件一类）。
+     *
+     * 父节点与叶子节点**都由消费方按 `node` 判定**（组件不替它猜「是不是叶子」：同一个图标槽
+     * 在两种节点上都成立，判定依据是数据而不是渲染期形态）。缺省不渲染该槽，几何零变化。
+     * 叶子行的箭头占位仍保留，故图标列跨层级对齐。颜色不写死：跟随行色，
+     * 选中行的主色字与滑过态自动同步。
+     */
+    renderIcon: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
     /** 节点附加内容（计数徽标等），渲染在标签之后 */
     renderNode: {
         type: PropType<(node: TreeNode) => unknown>;
@@ -331,6 +394,8 @@ export declare const Tree: import("vue").DefineComponent<import("vue").ExtractPr
     labelKey: string;
     childrenKey: string;
     renderLabel: (node: TreeNode) => unknown;
+    renderCaret: (node: TreeNode, expanded: boolean) => unknown;
+    renderIcon: (node: TreeNode) => unknown;
     renderNode: (node: TreeNode) => unknown;
     renderActions: (node: TreeNode) => unknown;
     expandedKeys: string[];

package/dist/components/tree/index.js

@@ -46,6 +46,31 @@ const Tree = /* @__PURE__ */ defineComponent({
       type: Function,
       default: void 0
     },
+    /**
+     * 展开 / 收起箭头的自定义渲染（拿到节点与**当前展开态**）。
+     *
+     * 缺省仍是 `chevron-down` 字形 + 面层收起态转 −90°（默认路径零变化）。
+     * 自定义时**朝向由消费方按 `expanded` 自选字形**（`chevron-right` / `chevron-down`）——
+     * 与包内「方位一律用字形、不靠旋转别的图标」的口径同源；**不要再给内容加
+     * `mh-tree__caret-icon` 类**（那是缺省字形的转向钩子，加上会被转成 −90°）。
+     * 尺寸不必自管：槽位与槽内字形都取全局图标档 `--ui-font-icon`。
+     */
+    renderCaret: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * 标签**前**的节点图标槽（文件夹 / 文件一类）。
+     *
+     * 父节点与叶子节点**都由消费方按 `node` 判定**（组件不替它猜「是不是叶子」：同一个图标槽
+     * 在两种节点上都成立，判定依据是数据而不是渲染期形态）。缺省不渲染该槽，几何零变化。
+     * 叶子行的箭头占位仍保留，故图标列跨层级对齐。颜色不写死：跟随行色，
+     * 选中行的主色字与滑过态自动同步。
+     */
+    renderIcon: {
+      type: Function,
+      default: void 0
+    },
     /** 节点附加内容（计数徽标等），渲染在标签之后 */
     renderNode: {
       type: Function,
@@ -237,12 +262,14 @@ const Tree = /* @__PURE__ */ defineComponent({
             event.stopPropagation();
             toggleExpand(key);
           }
-        }, [createVNode(Icon, {
+        }, [props.renderCaret ? props.renderCaret(node, expanded) : createVNode(Icon, {
           "name": "chevron-down",
           "class": "mh-tree__caret-icon"
         }, null)]) : createVNode("span", {
           "class": "mh-tree__caret mh-tree__caret--empty"
-        }, null), createVNode("span", {
+        }, null), props.renderIcon ? createVNode("span", {
+          "class": "mh-tree__icon"
+        }, [props.renderIcon(node)]) : null, createVNode("span", {
           "class": "mh-tree__label"
         }, [props.renderLabel ? props.renderLabel(node) : String(node[props.labelKey] ?? "")]), props.renderNode ? createVNode("span", {
           "class": "mh-tree__extra"

package/dist/index.d.ts

@@ -26,7 +26,7 @@ export { Layout, type LayoutGap, type LayoutAlign, type LayoutJustify, type Layo
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarCompound } from './components/avatar';
 export { Skeleton, type SkeletonProps } from './components/skeleton';
 export { Radio, type RadioProps, type RadioCompound, type RadioCompoundType, type RadioCardItem, type RadioCardValue, } from './components/radio';
-export { Tag, type TagProps } from './components/tag';
+export { Tag, type TagProps, type TagShape } from './components/tag';
 export { Text, type TextProps, type TextSize, type TextTone, type TextWeight, type TextTag, } from './components/text';
 export { Tree, type TreeNode } from './components/tree';
 export { ListView, type ListViewProps, type ListViewStatus, type ListViewStatusTone, type ListViewCardItemProps, type ListViewCompound, } from './components/list-view';