@xihan-ui/vue 2.1.0 → 3.1.0

package/dist/components/side-nav/side-nav.js

@@ -1,9 +1,18 @@
 import { useOverlayExit } from "../../runtime/use-overlay-exit.js";
+import { vueNormalize } from "../../runtime/normalize-props.js";
 import { withXhConfig } from "../../config/config.js";
+import { useMachine } from "../../runtime/use-machine.js";
+import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { mergePartProps } from "../../runtime/merge-props.js";
+import { mergeIntoChild } from "../../runtime/as-child.js";
 import { XhPortal } from "../../runtime/portal.js";
-import { provideSideNav, provideSideNavNode, useSideNavContext, useSideNavNodeContext } from "./context.js";
+import { provideSideNav, provideSideNavGroup, provideSideNavItem, provideSideNavNode, useSideNavContext, useSideNavGroupContext, useSideNavItemContext, useSideNavNodeContext } from "./context.js";
+import { useTooltipGroup } from "../tooltip/context.js";
 import { useSideNav } from "./use-side-nav.js";
-import { defineComponent, h, nextTick, onMounted, ref } from "vue";
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+import { createScope } from "@xihan-ui/core";
+import { connectSideNav, findSideNavRowEl, sideNavTooltipProps, tooltipMachine } from "@xihan-ui/headless";
+import { createPositionEngine } from "@xihan-ui/position";
 //#region src/components/side-nav/side-nav.ts
 const XhSideNavRoot = defineComponent({
 	name: "XhSideNavRoot",
@@ -30,6 +39,8 @@ const XhSideNavRoot = defineComponent({
 		dir: { type: String },
 		tone: { type: String },
 		size: { type: String },
+		/** 搜索框的匹配规则；缺省为标签（缺省退回 value）大小写不敏感包含。 */
+		filter: { type: Function },
 		translations: { type: Object }
 	},
 	emits: {
@@ -65,7 +76,10 @@ const XhSideNavRoot = defineComponent({
 			expand: ctx.api.value.expand,
 			collapse: ctx.api.value.collapse,
 			openPopout: ctx.api.value.openPopout,
-			closePopout: ctx.api.value.closePopout
+			closePopout: ctx.api.value.closePopout,
+			inputValue: ctx.api.value.inputValue,
+			setInputValue: ctx.api.value.setInputValue,
+			searching: ctx.api.value.searching
 		}));
 	}
 });
@@ -76,24 +90,66 @@ const XhSideNavList = defineComponent({
 		return () => h("ul", ctx.api.value.getListProps(), slots.default?.());
 	}
 });
+/** 搜索框：放在 list 之前，输入即按标签过滤导航树。 */
+const XhSideNavInput = defineComponent({
+	name: "XhSideNavInput",
+	setup() {
+		const ctx = useSideNavContext();
+		return () => h("input", ctx.api.value.getInputProps());
+	}
+});
+/** 搜索一条都没命中时露面的占位；没写内容时显示 translations.noMatch。 */
+const XhSideNavEmpty = defineComponent({
+	name: "XhSideNavEmpty",
+	setup(_, { slots }) {
+		const ctx = useSideNavContext();
+		return () => h("div", ctx.api.value.getEmptyProps(), slots.default?.() ?? ctx.api.value.translations.noMatch);
+	}
+});
+/** 把一个值登记进所在分组，值变了换一条，卸下时撤销。登记写的是分组的成员表，回调不追踪它，免得自己触发自己。 */
+function joinGroup(value) {
+	const group = useSideNavGroupContext();
+	if (!group) return;
+	watch(value, (next, _, onCleanup) => onCleanup(group.join(next)), { immediate: true });
+}
 const XhSideNavItem = defineComponent({
 	name: "XhSideNavItem",
 	setup(_, { slots }) {
 		const ctx = useSideNavContext();
-		return () => h("li", ctx.api.value.getItemProps(), slots.default?.());
+		const linkValue = shallowRef(null);
+		provideSideNavItem((value) => {
+			linkValue.value = value;
+		});
+		return () => h("li", ctx.api.value.getItemProps({ value: linkValue.value ?? void 0 }), slots.default?.());
 	}
 });
 const XhSideNavGroup = defineComponent({
 	name: "XhSideNavGroup",
 	props: { 
-	/** 分组身份，与 group-label 依靠它配对。 */
+	/** 分组身份，group-label 与 group-list 依靠它配对。 */
 value: {
 		type: String,
 		required: true
 	} },
 	setup(props, { slots }) {
 		const ctx = useSideNavContext();
-		return () => h("li", ctx.api.value.getGroupProps({ value: props.value }), slots.default?.());
+		const members = shallowRef([]);
+		provideSideNavGroup({
+			get value() {
+				return props.value;
+			},
+			join: (value) => {
+				members.value = [...members.value, value];
+				return () => {
+					const at = members.value.indexOf(value);
+					if (at !== -1) members.value = members.value.filter((_, i) => i !== at);
+				};
+			}
+		});
+		return () => h("li", ctx.api.value.getGroupProps({
+			value: props.value,
+			members: members.value
+		}), slots.default?.());
 	}
 });
 const XhSideNavGroupLabel = defineComponent({
@@ -107,6 +163,16 @@ const XhSideNavGroupLabel = defineComponent({
 		return () => h("div", ctx.api.value.getGroupLabelProps({ value: props.value }), slots.default?.());
 	}
 });
+/** 分组里的列表：组内的 item 与 branch 挂在这里，以组标题命名；分组身份取自所在的 XhSideNavGroup。 */
+const XhSideNavGroupList = defineComponent({
+	name: "XhSideNavGroupList",
+	setup(_, { slots }) {
+		const ctx = useSideNavContext();
+		const group = useSideNavGroupContext();
+		if (!group) throw new Error("[xh] XhSideNavGroupList 必须用在 XhSideNavGroup 内");
+		return () => h("ul", ctx.api.value.getGroupListProps({ value: group.value }), slots.default?.());
+	}
+});
 const XhSideNavBranch = defineComponent({
 	name: "XhSideNavBranch",
 	props: { value: {
@@ -116,6 +182,7 @@ const XhSideNavBranch = defineComponent({
 	setup(props, { slots }) {
 		const ctx = useSideNavContext();
 		provideSideNavNode(props);
+		joinGroup(() => props.value);
 		return () => h("li", ctx.api.value.getBranchProps({ value: props.value }), slots.default?.());
 	}
 });
@@ -201,6 +268,62 @@ container: { type: Object } },
 		};
 	}
 });
+/**
+* 图标栏的名称提示：落成图标栏后，只剩图标的行悬停或聚焦时在行尾一侧显示行的标签。
+* 本体是一台内嵌的 Tooltip 机器（延时、接替窗口、提示组与定位全随 Tooltip），开合受控于侧栏；
+* 放一个即可，定位层搬到浮层落点，文字取 collection 里的标签，对读屏隐藏。
+*/
+const XhSideNavTooltip = defineComponent({
+	name: "XhSideNavTooltip",
+	props: { 
+	/** 名称提示的 Portal 容器；优先于应用级配置。 */
+container: { type: Object } },
+	setup(props) {
+		const ctx = useSideNavContext();
+		const positionerRef = ref(null);
+		const contentRef = ref(null);
+		const hint = useMachine(tooltipMachine, () => sideNavTooltipProps(ctx.service), createScope(null, createVueIdGenerator()));
+		const anchor = () => findSideNavRowEl(ctx.service, ctx.service.context.get("tooltipValue"));
+		const config = ctx.config;
+		if (config) {
+			hint.refs.set("config", config);
+			hint.refs.set("registerLayer", () => config.layerRegistry.register({
+				kind: "inline",
+				node: () => contentRef.value,
+				branches: () => [anchor()].filter(Boolean),
+				isModal: () => false,
+				surfaces: () => []
+			}));
+			hint.refs.set("position", createPositionEngine());
+		}
+		hint.refs.set("getAnchorEl", anchor);
+		hint.refs.set("getFloatingEl", () => positionerRef.value);
+		hint.refs.set("group", useTooltipGroup());
+		const visible = useOverlayExit({
+			config,
+			isOpen: () => hint.state.matches("visible"),
+			contentRef,
+			onPresence: (presence) => hint.refs.set("presence", presence)
+		});
+		ctx.tooltip.value = hint;
+		onBeforeUnmount(() => {
+			if (ctx.tooltip.value === hint) ctx.tooltip.value = null;
+		});
+		const api = computed(() => connectSideNav(ctx.service, vueNormalize, hint));
+		return () => h(XhPortal, { to: props.container ?? ctx.portalTarget.value }, () => [h("div", {
+			...api.value.getTooltipPositionerProps(),
+			ref: (el) => {
+				positionerRef.value = el;
+			}
+		}, [h("div", {
+			...api.value.getTooltipContentProps(),
+			style: visible.value ? void 0 : { display: "none" },
+			ref: (el) => {
+				contentRef.value = el;
+			}
+		}, api.value.tooltipText)])]);
+	}
+});
 const XhSideNavLinkText = defineComponent({
 	name: "XhSideNavLinkText",
 	setup(_, { slots }) {
@@ -210,16 +333,32 @@ const XhSideNavLinkText = defineComponent({
 });
 const XhSideNavLink = defineComponent({
 	name: "XhSideNavLink",
-	props: { value: {
-		type: String,
-		required: true
-	} },
-	setup(props, { slots }) {
+	inheritAttrs: false,
+	props: {
+		value: {
+			type: String,
+			required: true
+		},
+		/** 借用作者的子节点（如路由链接）作为链接，不再渲染自己的 `<a>`；子节点须恰好一个。 */
+		asChild: Boolean
+	},
+	setup(props, { slots, attrs }) {
 		const ctx = useSideNavContext();
-		return () => h("a", ctx.api.value.getLinkProps({ value: props.value }), slots.default?.());
+		const reportItem = useSideNavItemContext();
+		if (reportItem) {
+			watch(() => props.value, (next) => reportItem(next), { immediate: true });
+			onBeforeUnmount(() => reportItem(null));
+		}
+		joinGroup(() => props.value);
+		return () => {
+			const part = mergePartProps(ctx.api.value.getLinkProps({ value: props.value }), attrs);
+			const children = slots.default?.();
+			if (props.asChild) return mergeIntoChild(children, part, "side-nav", { applyAnatomy: true });
+			return h("a", part, children);
+		};
 	}
 });
 //#endregion
-export { XhSideNavBranch, XhSideNavBranchContent, XhSideNavBranchIndicator, XhSideNavBranchText, XhSideNavBranchTrigger, XhSideNavGroup, XhSideNavGroupLabel, XhSideNavItem, XhSideNavLink, XhSideNavLinkText, XhSideNavList, XhSideNavRoot };
+export { XhSideNavBranch, XhSideNavBranchContent, XhSideNavBranchIndicator, XhSideNavBranchText, XhSideNavBranchTrigger, XhSideNavEmpty, XhSideNavGroup, XhSideNavGroupLabel, XhSideNavGroupList, XhSideNavInput, XhSideNavItem, XhSideNavLink, XhSideNavLinkText, XhSideNavList, XhSideNavRoot, XhSideNavTooltip };
 
 //# sourceMappingURL=side-nav.js.map

package/dist/components/side-nav/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","names":[],"sources":["../../../src/components/side-nav/side-nav.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 side nav 相关实现。\n\nimport type { Size, Tone } from '@xihan-ui/core'\nimport type { PresenceHandle } from '@xihan-ui/core/presence'\nimport type { SideNavApi, SideNavNode, SideNavSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, nextTick, onMounted, ref } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { XhPortal } from '../../runtime/portal'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { provideSideNav, provideSideNavNode, useSideNavContext, useSideNavNodeContext } from './context'\nimport { useSideNav } from './use-side-nav'\n\ntype SideNavProps = SideNavSchema['props']\n\n/** 默认插槽的载荷：选中项、展开集合、折叠与浮层状态、逐节点的状态判定，以及选中、展开、折叠、弹出等命令。 */\nexport type SideNavRootSlotProps = Pick<\n  SideNavApi,\n  | 'value'\n  | 'expandedValue'\n  | 'collapsed'\n  | 'popoutValue'\n  | 'isSelected'\n  | 'isExpanded'\n  | 'isActiveBranch'\n  | 'select'\n  | 'setValue'\n  | 'setExpandedValue'\n  | 'expand'\n  | 'collapse'\n  | 'openPopout'\n  | 'closePopout'\n>\n\nexport const XhSideNavRoot = defineComponent({\n  name: 'XhSideNavRoot',\n  // 缺省值由 connect 与机器给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    collection: { type: Array as PropType<SideNavNode[]> },\n    value: { type: String as PropType<string | null> },\n    defaultValue: { type: String as PropType<string | null> },\n    expandedValue: { type: Array as PropType<string[]> },\n    defaultExpandedValue: { type: Array as PropType<string[]> },\n    accordion: Boolean,\n    collapsed: { type: Boolean, default: undefined },\n    collapsedPopout: { type: Boolean, default: undefined },\n    disabled: Boolean,\n    loop: { type: Boolean, default: undefined },\n    dir: { type: String as PropType<SideNavProps['dir']> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    translations: { type: Object as PropType<SideNavProps['translations']> },\n  },\n  // *-change 携带 details 对象，update:* 携带裸值，支持 v-model:value 与 v-model:expanded-value\n  emits: {\n    'value-change': (_details: PayloadOf<SideNavProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<SideNavProps, 'onValueChange'>['value']) => true,\n    'expanded-value-change': (_details: PayloadOf<SideNavProps, 'onExpandedValueChange'>) => true,\n    'update:expandedValue': (_value: PayloadOf<SideNavProps, 'onExpandedValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: SideNavRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useSideNav(withXhConfig('side-nav', props) as SideNavProps, {\n      onValueChange: (details) => {\n        emit('value-change', details)\n        emit('update:value', details.value)\n      },\n      onExpandedValueChange: (details) => {\n        emit('expanded-value-change', details)\n        emit('update:expandedValue', details.value)\n      },\n    })\n    provideSideNav(ctx)\n    // 经插槽暴露状态与命令，供折叠开关这类外部控件使用\n    return () => h('nav', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      value: ctx.api.value.value,\n      expandedValue: ctx.api.value.expandedValue,\n      collapsed: ctx.api.value.collapsed,\n      popoutValue: ctx.api.value.popoutValue,\n      isSelected: ctx.api.value.isSelected,\n      isExpanded: ctx.api.value.isExpanded,\n      isActiveBranch: ctx.api.value.isActiveBranch,\n      select: ctx.api.value.select,\n      setValue: ctx.api.value.setValue,\n      setExpandedValue: ctx.api.value.setExpandedValue,\n      expand: ctx.api.value.expand,\n      collapse: ctx.api.value.collapse,\n      openPopout: ctx.api.value.openPopout,\n      closePopout: ctx.api.value.closePopout,\n    }))\n  },\n})\n\nexport const XhSideNavList = defineComponent({\n  name: 'XhSideNavList',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('ul', ctx.api.value.getListProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n// 叶子行的列表项：列表容器是 ul，链接得裹在 li 里才是它合法的直接子节点\nexport const XhSideNavItem = defineComponent({\n  name: 'XhSideNavItem',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('li', ctx.api.value.getItemProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavGroup = defineComponent({\n  name: 'XhSideNavGroup',\n  props: {\n    /** 分组身份，与 group-label 依靠它配对。 */\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('li', ctx.api.value.getGroupProps({ value: props.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavGroupLabel = defineComponent({\n  name: 'XhSideNavGroupLabel',\n  props: {\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('div', ctx.api.value.getGroupLabelProps({ value: props.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranch = defineComponent({\n  name: 'XhSideNavBranch',\n  props: {\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    provideSideNavNode(props)\n    return () => h('li', ctx.api.value.getBranchProps({ value: props.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranchTrigger = defineComponent({\n  name: 'XhSideNavBranchTrigger',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    const node = useSideNavNodeContext()\n    return () => h('button', ctx.api.value.getBranchTriggerProps({ value: node.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranchText = defineComponent({\n  name: 'XhSideNavBranchText',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('span', ctx.api.value.getBranchTextProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranchIndicator = defineComponent({\n  name: 'XhSideNavBranchIndicator',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    const node = useSideNavNodeContext()\n    return () => h('span', ctx.api.value.getBranchIndicatorProps({ value: node.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranchContent = defineComponent({\n  name: 'XhSideNavBranchContent',\n  props: {\n    /** 本分支弹层的 Portal 容器；优先于应用级配置。 */\n    container: { type: Object as PropType<Element> },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    const node = useSideNavNodeContext()\n    // 一个弹出面板一份退场闸门：退场动画挂在面板上，从它身上探测。\n    // 开合判据直接取 connect 这一帧的产出，不另起一套\n    const panelRef = ref<HTMLElement | null>(null)\n    let presence: PresenceHandle | null = null\n    const visible = useOverlayExit({\n      config: ctx.config,\n      isOpen: () => (ctx.api.value.getPopoutPositionerProps({ value: node.value }) as Record<string, unknown>).hidden !== true,\n      contentRef: panelRef,\n      onPresence: (next) => {\n        const previous = presence\n        presence = next\n        if (ctx.service.getStatus() !== 'Started')\n          return\n        if (next)\n          ctx.service.send({ type: 'PRESENCE.SET', value: node.value, presence: next, connected: true })\n        else if (previous)\n          ctx.service.send({ type: 'PRESENCE.SET', value: node.value, presence: previous, connected: false })\n      },\n    })\n    onMounted(() => {\n      void nextTick(() => {\n        if (presence && ctx.service.getStatus() === 'Started')\n          ctx.service.send({ type: 'PRESENCE.SET', value: node.value, presence, connected: true })\n      })\n    })\n    return () => {\n      if (!ctx.api.value.isPopoutPanel(node.value)) {\n        // 平铺分支没有定位层，原地渲染\n        return h('ul', ctx.api.value.getBranchContentProps({ value: node.value }) as Record<string, unknown>, slots.default?.())\n      }\n      // 折叠态的弹出面板：定位层搬到浮层落点，逃开祖先的层叠上下文。\n      // 收起跟着退场闸门走：定位层与面板的 hidden 都押后到退场动画播完\n      const hidden = !visible.value || undefined\n      const content = h('ul', {\n        ...ctx.api.value.getBranchContentProps({ value: node.value }) as Record<string, unknown>,\n        hidden,\n        ref: (el: unknown) => { panelRef.value = el as HTMLElement | null },\n      }, slots.default?.())\n      return h(XhPortal, { to: props.container ?? ctx.portalTarget.value }, () => [\n        h('div', {\n          ...ctx.api.value.getPopoutPositionerProps({ value: node.value }) as Record<string, unknown>,\n          hidden,\n        }, [content]),\n      ])\n    }\n  },\n})\n\nexport const XhSideNavLinkText = defineComponent({\n  name: 'XhSideNavLinkText',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('span', ctx.api.value.getLinkTextProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavLink = defineComponent({\n  name: 'XhSideNavLink',\n  props: {\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('a', ctx.api.value.getLinkProps({ value: props.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"side-nav.js","names":[],"sources":["../../../src/components/side-nav/side-nav.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 side nav 相关实现。\n\nimport type { Cleanup, Layer, Size, Tone } from '@xihan-ui/core'\nimport type { PresenceHandle } from '@xihan-ui/core/presence'\nimport type { SideNavApi, SideNavFilter, SideNavNode, SideNavSchema, TooltipSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { createScope } from '@xihan-ui/core'\nimport { connectSideNav, findSideNavRowEl, sideNavTooltipProps, tooltipMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { mergeIntoChild } from '../../runtime/as-child'\nimport { mergePartProps } from '../../runtime/merge-props'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { XhPortal } from '../../runtime/portal'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\nimport { useTooltipGroup } from '../tooltip/context'\nimport { provideSideNav, provideSideNavGroup, provideSideNavItem, provideSideNavNode, useSideNavContext, useSideNavGroupContext, useSideNavItemContext, useSideNavNodeContext } from './context'\nimport { useSideNav } from './use-side-nav'\n\ntype SideNavProps = SideNavSchema['props']\n\n/** 默认插槽的载荷：选中项、展开集合、折叠与浮层状态、检索词与搜索状态、逐节点的状态判定，以及选中、展开、折叠、弹出、改写检索词等命令。 */\nexport type SideNavRootSlotProps = Pick<\n  SideNavApi,\n  | 'value'\n  | 'expandedValue'\n  | 'collapsed'\n  | 'popoutValue'\n  | 'isSelected'\n  | 'isExpanded'\n  | 'isActiveBranch'\n  | 'select'\n  | 'setValue'\n  | 'setExpandedValue'\n  | 'expand'\n  | 'collapse'\n  | 'openPopout'\n  | 'closePopout'\n  | 'inputValue'\n  | 'setInputValue'\n  | 'searching'\n>\n\nexport const XhSideNavRoot = defineComponent({\n  name: 'XhSideNavRoot',\n  // 缺省值由 connect 与机器给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    collection: { type: Array as PropType<SideNavNode[]> },\n    value: { type: String as PropType<string | null> },\n    defaultValue: { type: String as PropType<string | null> },\n    expandedValue: { type: Array as PropType<string[]> },\n    defaultExpandedValue: { type: Array as PropType<string[]> },\n    accordion: Boolean,\n    collapsed: { type: Boolean, default: undefined },\n    collapsedPopout: { type: Boolean, default: undefined },\n    disabled: Boolean,\n    loop: { type: Boolean, default: undefined },\n    dir: { type: String as PropType<SideNavProps['dir']> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    /** 搜索框的匹配规则；缺省为标签（缺省退回 value）大小写不敏感包含。 */\n    filter: { type: Function as PropType<SideNavFilter> },\n    translations: { type: Object as PropType<SideNavProps['translations']> },\n  },\n  // *-change 携带 details 对象，update:* 携带裸值，支持 v-model:value 与 v-model:expanded-value\n  emits: {\n    'value-change': (_details: PayloadOf<SideNavProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<SideNavProps, 'onValueChange'>['value']) => true,\n    'expanded-value-change': (_details: PayloadOf<SideNavProps, 'onExpandedValueChange'>) => true,\n    'update:expandedValue': (_value: PayloadOf<SideNavProps, 'onExpandedValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: SideNavRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useSideNav(withXhConfig('side-nav', props) as SideNavProps, {\n      onValueChange: (details) => {\n        emit('value-change', details)\n        emit('update:value', details.value)\n      },\n      onExpandedValueChange: (details) => {\n        emit('expanded-value-change', details)\n        emit('update:expandedValue', details.value)\n      },\n    })\n    provideSideNav(ctx)\n    // 经插槽暴露状态与命令，供折叠开关这类外部控件使用\n    return () => h('nav', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      value: ctx.api.value.value,\n      expandedValue: ctx.api.value.expandedValue,\n      collapsed: ctx.api.value.collapsed,\n      popoutValue: ctx.api.value.popoutValue,\n      isSelected: ctx.api.value.isSelected,\n      isExpanded: ctx.api.value.isExpanded,\n      isActiveBranch: ctx.api.value.isActiveBranch,\n      select: ctx.api.value.select,\n      setValue: ctx.api.value.setValue,\n      setExpandedValue: ctx.api.value.setExpandedValue,\n      expand: ctx.api.value.expand,\n      collapse: ctx.api.value.collapse,\n      openPopout: ctx.api.value.openPopout,\n      closePopout: ctx.api.value.closePopout,\n      inputValue: ctx.api.value.inputValue,\n      setInputValue: ctx.api.value.setInputValue,\n      searching: ctx.api.value.searching,\n    }))\n  },\n})\n\nexport const XhSideNavList = defineComponent({\n  name: 'XhSideNavList',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('ul', ctx.api.value.getListProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 搜索框：放在 list 之前，输入即按标签过滤导航树。 */\nexport const XhSideNavInput = defineComponent({\n  name: 'XhSideNavInput',\n  setup() {\n    const ctx = useSideNavContext()\n    return () => h('input', ctx.api.value.getInputProps() as Record<string, unknown>)\n  },\n})\n\n/** 搜索一条都没命中时露面的占位；没写内容时显示 translations.noMatch。 */\nexport const XhSideNavEmpty = defineComponent({\n  name: 'XhSideNavEmpty',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('div', ctx.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.() ?? ctx.api.value.translations.noMatch)\n  },\n})\n\n/** 把一个值登记进所在分组，值变了换一条，卸下时撤销。登记写的是分组的成员表，回调不追踪它，免得自己触发自己。 */\nfunction joinGroup(value: () => string): void {\n  const group = useSideNavGroupContext()\n  if (!group)\n    return\n  watch(value, (next, _, onCleanup) => onCleanup(group.join(next)), { immediate: true })\n}\n\n// 叶子行的列表项：列表容器是 ul，链接得裹在 li 里才是它合法的直接子节点。\n// 身份取它包着的那条链接报上来的值：搜索时没命中就整行收起\nexport const XhSideNavItem = defineComponent({\n  name: 'XhSideNavItem',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    const linkValue = shallowRef<string | null>(null)\n    provideSideNavItem((value) => {\n      linkValue.value = value\n    })\n    return () => h('li', ctx.api.value.getItemProps({ value: linkValue.value ?? undefined }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n// 分组是上一层列表里的一条（li）：里面放 group-label 与 group-list，组内的行挂在 group-list 里\nexport const XhSideNavGroup = defineComponent({\n  name: 'XhSideNavGroup',\n  props: {\n    /** 分组身份，group-label 与 group-list 依靠它配对。 */\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    // 成员由组里的链接与分支挂上时登记：搜索时一个成员都没命中就整组收起\n    const members = shallowRef<readonly string[]>([])\n    provideSideNavGroup({\n      get value() {\n        return props.value\n      },\n      join: (value) => {\n        members.value = [...members.value, value]\n        return () => {\n          const at = members.value.indexOf(value)\n          if (at !== -1)\n            members.value = members.value.filter((_, i) => i !== at)\n        }\n      },\n    })\n    return () => h('li', ctx.api.value.getGroupProps({ value: props.value, members: members.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavGroupLabel = defineComponent({\n  name: 'XhSideNavGroupLabel',\n  props: {\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('div', ctx.api.value.getGroupLabelProps({ value: props.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 分组里的列表：组内的 item 与 branch 挂在这里，以组标题命名；分组身份取自所在的 XhSideNavGroup。 */\nexport const XhSideNavGroupList = defineComponent({\n  name: 'XhSideNavGroupList',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    const group = useSideNavGroupContext()\n    if (!group)\n      throw new Error('[xh] XhSideNavGroupList 必须用在 XhSideNavGroup 内')\n    return () => h('ul', ctx.api.value.getGroupListProps({ value: group.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranch = defineComponent({\n  name: 'XhSideNavBranch',\n  props: {\n    value: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    provideSideNavNode(props)\n    joinGroup(() => props.value)\n    return () => h('li', ctx.api.value.getBranchProps({ value: props.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranchTrigger = defineComponent({\n  name: 'XhSideNavBranchTrigger',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    const node = useSideNavNodeContext()\n    return () => h('button', ctx.api.value.getBranchTriggerProps({ value: node.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranchText = defineComponent({\n  name: 'XhSideNavBranchText',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('span', ctx.api.value.getBranchTextProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranchIndicator = defineComponent({\n  name: 'XhSideNavBranchIndicator',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    const node = useSideNavNodeContext()\n    return () => h('span', ctx.api.value.getBranchIndicatorProps({ value: node.value }) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavBranchContent = defineComponent({\n  name: 'XhSideNavBranchContent',\n  props: {\n    /** 本分支弹层的 Portal 容器；优先于应用级配置。 */\n    container: { type: Object as PropType<Element> },\n  },\n  setup(props, { slots }) {\n    const ctx = useSideNavContext()\n    const node = useSideNavNodeContext()\n    // 一个弹出面板一份退场闸门：退场动画挂在面板上，从它身上探测。\n    // 开合判据直接取 connect 这一帧的产出，不另起一套\n    const panelRef = ref<HTMLElement | null>(null)\n    let presence: PresenceHandle | null = null\n    const visible = useOverlayExit({\n      config: ctx.config,\n      isOpen: () => (ctx.api.value.getPopoutPositionerProps({ value: node.value }) as Record<string, unknown>).hidden !== true,\n      contentRef: panelRef,\n      onPresence: (next) => {\n        const previous = presence\n        presence = next\n        if (ctx.service.getStatus() !== 'Started')\n          return\n        if (next)\n          ctx.service.send({ type: 'PRESENCE.SET', value: node.value, presence: next, connected: true })\n        else if (previous)\n          ctx.service.send({ type: 'PRESENCE.SET', value: node.value, presence: previous, connected: false })\n      },\n    })\n    onMounted(() => {\n      void nextTick(() => {\n        if (presence && ctx.service.getStatus() === 'Started')\n          ctx.service.send({ type: 'PRESENCE.SET', value: node.value, presence, connected: true })\n      })\n    })\n    return () => {\n      if (!ctx.api.value.isPopoutPanel(node.value)) {\n        // 平铺分支没有定位层，原地渲染\n        return h('ul', ctx.api.value.getBranchContentProps({ value: node.value }) as Record<string, unknown>, slots.default?.())\n      }\n      // 折叠态的弹出面板：定位层搬到浮层落点，逃开祖先的层叠上下文。\n      // 收起跟着退场闸门走：定位层与面板的 hidden 都押后到退场动画播完\n      const hidden = !visible.value || undefined\n      const content = h('ul', {\n        ...ctx.api.value.getBranchContentProps({ value: node.value }) as Record<string, unknown>,\n        hidden,\n        ref: (el: unknown) => { panelRef.value = el as HTMLElement | null },\n      }, slots.default?.())\n      return h(XhPortal, { to: props.container ?? ctx.portalTarget.value }, () => [\n        h('div', {\n          ...ctx.api.value.getPopoutPositionerProps({ value: node.value }) as Record<string, unknown>,\n          hidden,\n        }, [content]),\n      ])\n    }\n  },\n})\n\n/**\n * 图标栏的名称提示：落成图标栏后，只剩图标的行悬停或聚焦时在行尾一侧显示行的标签。\n * 本体是一台内嵌的 Tooltip 机器（延时、接替窗口、提示组与定位全随 Tooltip），开合受控于侧栏；\n * 放一个即可，定位层搬到浮层落点，文字取 collection 里的标签，对读屏隐藏。\n */\nexport const XhSideNavTooltip = defineComponent({\n  name: 'XhSideNavTooltip',\n  props: {\n    /** 名称提示的 Portal 容器；优先于应用级配置。 */\n    container: { type: Object as PropType<Element> },\n  },\n  setup(props) {\n    const ctx = useSideNavContext()\n    const positionerRef = ref<HTMLElement | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const hint = useMachine<TooltipSchema>(tooltipMachine, () => sideNavTooltipProps(ctx.service), createScope(null, createVueIdGenerator()))\n    // 锚点是提示此刻对着的那一行，现查\n    const anchor = (): HTMLElement | null => findSideNavRowEl(ctx.service, ctx.service.context.get('tooltipValue'))\n    const config = ctx.config\n    if (config) {\n      // 提示只参与 Escape 仲裁与栈顶判定：不陷焦点、不锁滚动、没有遮罩；对着的那一行记为本层分支\n      hint.refs.set('config', config)\n      hint.refs.set('registerLayer', (): { layer: Layer, dispose: Cleanup } => config.layerRegistry.register({\n        kind: 'inline',\n        node: () => contentRef.value,\n        branches: () => [anchor()].filter(Boolean) as Element[],\n        isModal: () => false,\n        surfaces: () => [],\n      }))\n      hint.refs.set('position', createPositionEngine())\n    }\n    hint.refs.set('getAnchorEl', anchor)\n    hint.refs.set('getFloatingEl', () => positionerRef.value)\n    // 放在 XhTooltipProvider 里就归它那一组，与页面上其余提示共用接替窗口\n    hint.refs.set('group', useTooltipGroup())\n    const visible = useOverlayExit({\n      config,\n      isOpen: () => hint.state.matches('visible'),\n      contentRef,\n      onPresence: presence => hint.refs.set('presence', presence),\n    })\n    // 交给根：行上的指针与焦点经根的连接层转给这台机器\n    ctx.tooltip.value = hint\n    onBeforeUnmount(() => {\n      if (ctx.tooltip.value === hint)\n        ctx.tooltip.value = null\n    })\n    const api = computed(() => connectSideNav(ctx.service, vueNormalize, hint))\n    return () => h(XhPortal, { to: props.container ?? ctx.portalTarget.value }, () => [\n      h('div', {\n        ...api.value.getTooltipPositionerProps() as Record<string, unknown>,\n        ref: (el: unknown) => { positionerRef.value = el as HTMLElement | null },\n      }, [\n        h('div', {\n          ...api.value.getTooltipContentProps() as Record<string, unknown>,\n          // 收起跟着退场闸门走：皮肤给 content 声明了 display，真正的收起落成内联 display\n          style: visible.value ? undefined : { display: 'none' },\n          ref: (el: unknown) => { contentRef.value = el as HTMLElement | null },\n        }, api.value.tooltipText),\n      ]),\n    ])\n  },\n})\n\nexport const XhSideNavLinkText = defineComponent({\n  name: 'XhSideNavLinkText',\n  setup(_, { slots }) {\n    const ctx = useSideNavContext()\n    return () => h('span', ctx.api.value.getLinkTextProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSideNavLink = defineComponent({\n  name: 'XhSideNavLink',\n  // 直通属性自己合：作者的处理器排在部件前面，asChild 时连同部件属性一起落到作者的链接上\n  inheritAttrs: false,\n  props: {\n    value: { type: String, required: true },\n    /** 借用作者的子节点（如路由链接）作为链接，不再渲染自己的 `<a>`；子节点须恰好一个。 */\n    asChild: Boolean,\n  },\n  setup(props, { slots, attrs }) {\n    const ctx = useSideNavContext()\n    // 身份报给外面的列表项与分组：搜索时它们据此决定整行、整组收不收\n    const reportItem = useSideNavItemContext()\n    if (reportItem) {\n      watch(() => props.value, next => reportItem(next), { immediate: true })\n      onBeforeUnmount(() => reportItem(null))\n    }\n    joinGroup(() => props.value)\n    return () => {\n      const part = mergePartProps(ctx.api.value.getLinkProps({ value: props.value }) as Record<string, unknown>, attrs)\n      const children = slots.default?.()\n      if (props.asChild)\n        return mergeIntoChild(children, part, 'side-nav', { applyAnatomy: true })\n      return h('a', part, children)\n    }\n  },\n})\n"],"mappings":"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"}

package/dist/components/side-nav/use-side-nav.d.ts

@@ -1,6 +1,6 @@
-import { ComputedRef } from "vue";
+import { ComputedRef, ShallowRef } from "vue";
 import { RuntimeConfig, Service } from "@xihan-ui/core";
-import { SideNavApi, SideNavSchema } from "@xihan-ui/headless";
+import { SideNavApi, SideNavSchema, TooltipSchema } from "@xihan-ui/headless";
 //#region src/components/side-nav/use-side-nav.d.ts
 interface SideNavContext {
   api: ComputedRef<SideNavApi>;
@@ -10,6 +10,8 @@ interface SideNavContext {
   config: RuntimeConfig | null;
   /** 弹出面板的定位层迁移到的位置：全局配置的容器 > 运行时的浮层落点 > body。 */
   portalTarget: ComputedRef<string | Element>;
+  /** 图标栏名称提示的内嵌 Tooltip 机器：XhSideNavTooltip 挂上时交进来，卸下时撤回；没有即没有名称提示。 */
+  tooltip: ShallowRef<Service<TooltipSchema> | null>;
 }
 declare function useSideNav(props: SideNavSchema['props'], handlers?: Pick<SideNavSchema['props'], 'onValueChange' | 'onExpandedValueChange'>): SideNavContext;
 //#endregion

package/dist/components/side-nav/use-side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-side-nav.d.ts","names":[],"sources":["../../../src/components/side-nav/use-side-nav.ts"],"mappings":";;;;UAmBiB;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;EAEjB,QAAQ;;EAER,cAAc,qBAAqB;;iBAGrB,WACd,OAAO,wBACP,WAAU,KAAK,qEACd"}
+{"version":3,"file":"use-side-nav.d.ts","names":[],"sources":["../../../src/components/side-nav/use-side-nav.ts"],"mappings":";;;;UAmBiB;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;EAEjB,QAAQ;;EAER,cAAc,qBAAqB;;EAEnC,SAAS,WAAW,QAAQ;;iBAGd,WACd,OAAO,wBACP,WAAU,KAAK,qEACd"}

package/dist/components/side-nav/use-side-nav.js

@@ -2,7 +2,7 @@ import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useXhConfig } from "../../config/config.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
-import { computed } from "vue";
+import { computed, shallowRef } from "vue";
 import { createRuntimeConfig, createScope } from "@xihan-ui/core";
 import { connectSideNav, sideNavMachine } from "@xihan-ui/headless";
 import { createPositionEngine } from "@xihan-ui/position";
@@ -37,13 +37,15 @@ function useSideNav(props, handlers = {}) {
 		service.refs.set("getPopoutPositionerEl", (value) => popoutEl("positioner", value));
 		service.refs.set("getPopoutContentEl", (value) => popoutEl("content", value));
 	}
-	const api = computed(() => connectSideNav(service, vueNormalize));
+	const tooltip = shallowRef(null);
+	const api = computed(() => connectSideNav(service, vueNormalize, tooltip.value ?? void 0));
 	const portalTarget = computed(() => xhConfig.value.portalContainer?.() ?? runtimeConfig?.portalContainer() ?? "body");
 	return {
 		api,
 		service,
 		config: runtimeConfig,
-		portalTarget
+		portalTarget,
+		tooltip
 	};
 }
 //#endregion

package/dist/components/side-nav/use-side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-side-nav.js","names":[],"sources":["../../../src/components/side-nav/use-side-nav.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use side nav 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { SideNavApi, SideNavSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectSideNav, sideNavMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface SideNavContext {\n  api: ComputedRef<SideNavApi>\n  /** Headless 服务；子面板只用它登记按分支身份配对的 Presence。 */\n  service: Service<SideNavSchema>\n  /** 运行时配置；服务端没有 DOM 时为 null。 */\n  config: RuntimeConfig | null\n  /** 弹出面板的定位层迁移到的位置：全局配置的容器 > 运行时的浮层落点 > body。 */\n  portalTarget: ComputedRef<string | Element>\n}\n\nexport function useSideNav(\n  props: SideNavSchema['props'],\n  handlers: Pick<SideNavSchema['props'], 'onValueChange' | 'onExpandedValueChange'> = {},\n): SideNavContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的配对 id 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(sideNavMachine, () => ({ ...props, ...handlers }), scope)\n  const xhConfig = useXhConfig()\n\n  // 服务端没有 DOM、也就没有落点：config 为 null 时浮层退回 body\n  let runtimeConfig: RuntimeConfig | null = null\n\n  if (typeof document !== 'undefined') {\n    const config: RuntimeConfig = createRuntimeConfig({ scope, idGenerator: idGen })\n    runtimeConfig = config\n\n    // 弹出面板与触发按钮按当前弹出分支现查：配对 id 由 connect 派生，同一 scope 算得出来\n    const popoutEl = (kind: 'trigger' | 'content' | 'positioner', value: string): HTMLElement | null =>\n      document.getElementById(scope.partId('side-nav', `${kind}-${value}`))\n\n    // 只提供注册函数，入栈出栈由机器的 trackPopoutLayer 效应按弹出态驱动\n    const registerLayer = (value: string): { layer: Layer, dispose: Cleanup } => config.layerRegistry.register({\n      kind: 'popover',\n      node: () => popoutEl('content', value),\n      // 触发按钮记为本层分支，点它算层内交互\n      branches: () => [popoutEl('trigger', value)].filter(Boolean) as Element[],\n      isModal: () => false,\n      surfaces: () => [],\n    })\n\n    // 定位引擎由适配器注入，机器只经端口驱动\n    service.refs.set('config', config)\n    service.refs.set('registerLayer', registerLayer)\n    service.refs.set('position', createPositionEngine())\n    service.refs.set('getPopoutAnchorEl', value => popoutEl('trigger', value))\n    service.refs.set('getPopoutPositionerEl', value => popoutEl('positioner', value))\n    service.refs.set('getPopoutContentEl', value => popoutEl('content', value))\n  }\n\n  const api = computed(() => connectSideNav(service, vueNormalize))\n  // 全局配置写了容器就用它，否则落到运行时那个单一浮层落点；没有 DOM 时才回到 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? runtimeConfig?.portalContainer() ?? 'body')\n  return { api, service, config: runtimeConfig, portalTarget }\n}\n"],"mappings":";;;;;;;;;AA6BA,SAAgB,WACd,OACA,WAAoF,CAAC,GACrE;CAEhB,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,MAAM,UAAU,WAAW,uBAAuB;EAAE,GAAG;EAAO,GAAG;CAAS,IAAI,KAAK;CACnF,MAAM,WAAW,YAAY;CAG7B,IAAI,gBAAsC;CAE1C,IAAI,OAAO,aAAa,aAAa;EACnC,MAAM,SAAwB,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAC/E,gBAAgB;EAGhB,MAAM,YAAY,MAA4C,UAC5D,SAAS,eAAe,MAAM,OAAO,YAAY,GAAG,KAAK,GAAG,OAAO,CAAC;EAGtE,MAAM,iBAAiB,UAAsD,OAAO,cAAc,SAAS;GACzG,MAAM;GACN,YAAY,SAAS,WAAW,KAAK;GAErC,gBAAgB,CAAC,SAAS,WAAW,KAAK,CAAC,CAAC,CAAC,OAAO,OAAO;GAC3D,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAM;EACjC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;EACnD,QAAQ,KAAK,IAAI,sBAAqB,UAAS,SAAS,WAAW,KAAK,CAAC;EACzE,QAAQ,KAAK,IAAI,0BAAyB,UAAS,SAAS,cAAc,KAAK,CAAC;EAChF,QAAQ,KAAK,IAAI,uBAAsB,UAAS,SAAS,WAAW,KAAK,CAAC;CAC5E;CAEA,MAAM,MAAM,eAAe,eAAe,SAAS,YAAY,CAAC;CAEhE,MAAM,eAAe,eAAiC,SAAS,MAAM,kBAAkB,KAAK,eAAe,gBAAgB,KAAK,MAAM;CACtI,OAAO;EAAE;EAAK;EAAS,QAAQ;EAAe;CAAa;AAC7D"}
+{"version":3,"file":"use-side-nav.js","names":[],"sources":["../../../src/components/side-nav/use-side-nav.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use side nav 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { SideNavApi, SideNavSchema, TooltipSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, ShallowRef } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectSideNav, sideNavMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, shallowRef } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface SideNavContext {\n  api: ComputedRef<SideNavApi>\n  /** Headless 服务；子面板只用它登记按分支身份配对的 Presence。 */\n  service: Service<SideNavSchema>\n  /** 运行时配置；服务端没有 DOM 时为 null。 */\n  config: RuntimeConfig | null\n  /** 弹出面板的定位层迁移到的位置：全局配置的容器 > 运行时的浮层落点 > body。 */\n  portalTarget: ComputedRef<string | Element>\n  /** 图标栏名称提示的内嵌 Tooltip 机器：XhSideNavTooltip 挂上时交进来，卸下时撤回；没有即没有名称提示。 */\n  tooltip: ShallowRef<Service<TooltipSchema> | null>\n}\n\nexport function useSideNav(\n  props: SideNavSchema['props'],\n  handlers: Pick<SideNavSchema['props'], 'onValueChange' | 'onExpandedValueChange'> = {},\n): SideNavContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的配对 id 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(sideNavMachine, () => ({ ...props, ...handlers }), scope)\n  const xhConfig = useXhConfig()\n\n  // 服务端没有 DOM、也就没有落点：config 为 null 时浮层退回 body\n  let runtimeConfig: RuntimeConfig | null = null\n\n  if (typeof document !== 'undefined') {\n    const config: RuntimeConfig = createRuntimeConfig({ scope, idGenerator: idGen })\n    runtimeConfig = config\n\n    // 弹出面板与触发按钮按当前弹出分支现查：配对 id 由 connect 派生，同一 scope 算得出来\n    const popoutEl = (kind: 'trigger' | 'content' | 'positioner', value: string): HTMLElement | null =>\n      document.getElementById(scope.partId('side-nav', `${kind}-${value}`))\n\n    // 只提供注册函数，入栈出栈由机器的 trackPopoutLayer 效应按弹出态驱动\n    const registerLayer = (value: string): { layer: Layer, dispose: Cleanup } => config.layerRegistry.register({\n      kind: 'popover',\n      node: () => popoutEl('content', value),\n      // 触发按钮记为本层分支，点它算层内交互\n      branches: () => [popoutEl('trigger', value)].filter(Boolean) as Element[],\n      isModal: () => false,\n      surfaces: () => [],\n    })\n\n    // 定位引擎由适配器注入，机器只经端口驱动\n    service.refs.set('config', config)\n    service.refs.set('registerLayer', registerLayer)\n    service.refs.set('position', createPositionEngine())\n    service.refs.set('getPopoutAnchorEl', value => popoutEl('trigger', value))\n    service.refs.set('getPopoutPositionerEl', value => popoutEl('positioner', value))\n    service.refs.set('getPopoutContentEl', value => popoutEl('content', value))\n  }\n\n  const tooltip = shallowRef<Service<TooltipSchema> | null>(null)\n  const api = computed(() => connectSideNav(service, vueNormalize, tooltip.value ?? undefined))\n  // 全局配置写了容器就用它，否则落到运行时那个单一浮层落点；没有 DOM 时才回到 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? runtimeConfig?.portalContainer() ?? 'body')\n  return { api, service, config: runtimeConfig, portalTarget, tooltip }\n}\n"],"mappings":";;;;;;;;;AA+BA,SAAgB,WACd,OACA,WAAoF,CAAC,GACrE;CAEhB,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,MAAM,UAAU,WAAW,uBAAuB;EAAE,GAAG;EAAO,GAAG;CAAS,IAAI,KAAK;CACnF,MAAM,WAAW,YAAY;CAG7B,IAAI,gBAAsC;CAE1C,IAAI,OAAO,aAAa,aAAa;EACnC,MAAM,SAAwB,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAC/E,gBAAgB;EAGhB,MAAM,YAAY,MAA4C,UAC5D,SAAS,eAAe,MAAM,OAAO,YAAY,GAAG,KAAK,GAAG,OAAO,CAAC;EAGtE,MAAM,iBAAiB,UAAsD,OAAO,cAAc,SAAS;GACzG,MAAM;GACN,YAAY,SAAS,WAAW,KAAK;GAErC,gBAAgB,CAAC,SAAS,WAAW,KAAK,CAAC,CAAC,CAAC,OAAO,OAAO;GAC3D,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAM;EACjC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;EACnD,QAAQ,KAAK,IAAI,sBAAqB,UAAS,SAAS,WAAW,KAAK,CAAC;EACzE,QAAQ,KAAK,IAAI,0BAAyB,UAAS,SAAS,cAAc,KAAK,CAAC;EAChF,QAAQ,KAAK,IAAI,uBAAsB,UAAS,SAAS,WAAW,KAAK,CAAC;CAC5E;CAEA,MAAM,UAAU,WAA0C,IAAI;CAC9D,MAAM,MAAM,eAAe,eAAe,SAAS,cAAc,QAAQ,SAAS,KAAA,CAAS,CAAC;CAE5F,MAAM,eAAe,eAAiC,SAAS,MAAM,kBAAkB,KAAK,eAAe,gBAAgB,KAAK,MAAM;CACtI,OAAO;EAAE;EAAK;EAAS,QAAQ;EAAe;EAAc;CAAQ;AACtE"}

package/dist/components/signature-pad/signature-pad.d.ts

@@ -1,10 +1,10 @@
 import { PayloadOf } from "../../runtime/payload.js";
 import { PropType, SlotsType, VNode } from "vue";
-import { SignaturePadApi, SignaturePadDrawingOptions, SignaturePadSchema, SignaturePadTranslations } from "@xihan-ui/headless";
+import { SignaturePadApi, SignaturePadDrawingOptions, SignaturePadSchema, SignaturePadTranslations, SignaturePadValue } from "@xihan-ui/headless";
 //#region src/components/signature-pad/signature-pad.d.ts
 type SignaturePadProps = SignaturePadSchema['props'];
-/** 默认插槽的载荷：笔迹路径与空态、落笔中标记，以及导出与清空的动作。 */
-type SignaturePadRootSlotProps = Pick<SignaturePadApi, 'paths' | 'empty' | 'drawing' | 'disabled' | 'readOnly' | 'statusText' | 'toSvg' | 'clear'>;
+/** 默认插槽的载荷：签名数据、笔迹路径与空态、落笔中标记，以及导出、清空、撤销与重做的动作。 */
+type SignaturePadRootSlotProps = Pick<SignaturePadApi, 'value' | 'paths' | 'empty' | 'drawing' | 'disabled' | 'readOnly' | 'canUndo' | 'canRedo' | 'statusText' | 'toSvg' | 'clear' | 'undo' | 'redo'>;
 declare const XhSignaturePadRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   disabled: {
     type: BooleanConstructor;
@@ -25,6 +25,12 @@ declare const XhSignaturePadRoot: import("vue").DefineComponent<import("vue").Ex
   name: {
     type: StringConstructor;
   };
+  value: {
+    type: PropType<SignaturePadValue>;
+  };
+  defaultValue: {
+    type: PropType<SignaturePadValue>;
+  };
   drawing: {
     type: PropType<SignaturePadDrawingOptions>;
   };
@@ -34,8 +40,11 @@ declare const XhSignaturePadRoot: import("vue").DefineComponent<import("vue").Ex
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  clear: () => true;
   draw: (_details: PayloadOf<SignaturePadProps, "onDraw">) => true;
   'draw-end': (_details: PayloadOf<SignaturePadProps, "onDrawEnd">) => true;
+  'value-change': (_details: PayloadOf<SignaturePadProps, "onValueChange">) => true;
+  'update:value': (_value: PayloadOf<SignaturePadProps, "onValueChange">["value"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   disabled: {
     type: BooleanConstructor;
@@ -56,6 +65,12 @@ declare const XhSignaturePadRoot: import("vue").DefineComponent<import("vue").Ex
   name: {
     type: StringConstructor;
   };
+  value: {
+    type: PropType<SignaturePadValue>;
+  };
+  defaultValue: {
+    type: PropType<SignaturePadValue>;
+  };
   drawing: {
     type: PropType<SignaturePadDrawingOptions>;
   };
@@ -63,6 +78,9 @@ declare const XhSignaturePadRoot: import("vue").DefineComponent<import("vue").Ex
     type: PropType<Partial<SignaturePadTranslations>>;
   };
 }>> & Readonly<{
+  "onValue-change"?: ((_details: import("@xihan-ui/headless").SignaturePadValueChangeDetails) => any) | undefined;
+  "onUpdate:value"?: ((_value: SignaturePadValue) => any) | undefined;
+  onClear?: (() => any) | undefined;
   onDraw?: ((_details: import("@xihan-ui/headless").SignaturePadDrawDetails) => any) | undefined;
   "onDraw-end"?: ((_details: import("@xihan-ui/headless").SignaturePadDrawEndDetails) => any) | undefined;
 }>, {
@@ -88,6 +106,12 @@ declare const XhSignaturePadPath: import("vue").DefineComponent<{}, () => VNode<
 declare const XhSignaturePadClearTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhSignaturePadUndoTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhSignaturePadRedoTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhSignaturePadStatus: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -95,5 +119,5 @@ declare const XhSignaturePadHiddenInput: import("vue").DefineComponent<{}, () =>
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { SignaturePadRootSlotProps, XhSignaturePadClearTrigger, XhSignaturePadControl, XhSignaturePadGuide, XhSignaturePadHiddenInput, XhSignaturePadLabel, XhSignaturePadPath, XhSignaturePadRoot, XhSignaturePadStatus };
+export { SignaturePadRootSlotProps, XhSignaturePadClearTrigger, XhSignaturePadControl, XhSignaturePadGuide, XhSignaturePadHiddenInput, XhSignaturePadLabel, XhSignaturePadPath, XhSignaturePadRedoTrigger, XhSignaturePadRoot, XhSignaturePadStatus, XhSignaturePadUndoTrigger };
 //# sourceMappingURL=signature-pad.d.ts.map

package/dist/components/signature-pad/signature-pad.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signature-pad.d.ts","names":[],"sources":["../../../src/components/signature-pad/signature-pad.ts"],"mappings":";;;;KAgBK,oBAAoB;;KAGb,4BAA4B,KACtC;cAIW,kCAAkB,8BAAA;;;;;;;;;;;;;;;;;;;;;IASA,MAAA,SAAS;;;IACJ,MAAA,SAAS,QAAQ;;;;;EAI9B,OAAA,UAAA,UAAU;EACN,aAAA,UAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;IANN,MAAA,SAAS;;;IACJ,MAAA,SAAS,QAAQ;;;;;;;;;;;EAQvC,WAAC,OAAO,8BAA8B;kCAkBlD;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAWhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAO7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAMrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAW/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAMpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"signature-pad.d.ts","names":[],"sources":["../../../src/components/signature-pad/signature-pad.ts"],"mappings":";;;;KAiBK,oBAAoB;;KAGb,4BAA4B,KACtC;cAgBW,kCAAkB,8BAAA;;;;;;;;;;;;;;;;;;;;;IAUF,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACd,MAAA,SAAS;;;IACJ,MAAA,SAAS,QAAQ;;;;;;EAK9B,OAAA,UAAA,UAAU;EACN,aAAA,UAAA,UAAU;EACN,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;IAXV,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACd,MAAA,SAAS;;;IACJ,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;EAWvC,WAAC,OAAO,8BAA8B;kCA2BlD;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAWhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAO7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAMrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAMpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAMpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAW/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAMpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/signature-pad/signature-pad.js

@@ -1,4 +1,5 @@
 import { withXhConfig } from "../../config/config.js";
+import { withHandlers } from "../../runtime/with-handlers.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { provideSignaturePad, useSignaturePadContext } from "./context.js";
 import { useSignaturePad } from "./use-signature-pad.js";
@@ -24,31 +25,46 @@ const XhSignaturePadRoot = defineComponent({
 			default: void 0
 		},
 		name: { type: String },
+		value: { type: Object },
+		defaultValue: { type: Object },
 		drawing: { type: Object },
 		translations: { type: Object }
 	},
 	emits: {
+		"clear": () => true,
 		"draw": (_details) => true,
-		"draw-end": (_details) => true
+		"draw-end": (_details) => true,
+		"value-change": (_details) => true,
+		"update:value": (_value) => true
 	},
 	slots: Object,
 	setup(props, { slots, emit }) {
 		const onDraw = (details) => emit("draw", details);
 		const onDrawEnd = (details) => emit("draw-end", details);
-		const ctx = useSignaturePad(withXhConfig("signature-pad", useFormControlProps(props)), {
+		const onValueChange = (details) => {
+			emit("value-change", details);
+			emit("update:value", details.value);
+		};
+		const ctx = useSignaturePad(withHandlers(withXhConfig("signature-pad", useFormControlProps(props)), { onClear: () => emit("clear") }), {
 			onDraw,
-			onDrawEnd
+			onDrawEnd,
+			onValueChange
 		});
 		provideSignaturePad(ctx);
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
+			value: ctx.api.value.value,
 			paths: ctx.api.value.paths,
 			empty: ctx.api.value.empty,
 			drawing: ctx.api.value.drawing,
 			disabled: ctx.api.value.disabled,
 			readOnly: ctx.api.value.readOnly,
+			canUndo: ctx.api.value.canUndo,
+			canRedo: ctx.api.value.canRedo,
 			statusText: ctx.api.value.statusText,
 			toSvg: ctx.api.value.toSvg,
-			clear: ctx.api.value.clear
+			clear: ctx.api.value.clear,
+			undo: ctx.api.value.undo,
+			redo: ctx.api.value.redo
 		}));
 	}
 });
@@ -90,6 +106,20 @@ const XhSignaturePadClearTrigger = defineComponent({
 		return () => h("button", ctx.api.value.getClearTriggerProps(), slots.default?.());
 	}
 });
+const XhSignaturePadUndoTrigger = defineComponent({
+	name: "XhSignaturePadUndoTrigger",
+	setup(_, { slots }) {
+		const ctx = useSignaturePadContext();
+		return () => h("button", ctx.api.value.getUndoTriggerProps(), slots.default?.());
+	}
+});
+const XhSignaturePadRedoTrigger = defineComponent({
+	name: "XhSignaturePadRedoTrigger",
+	setup(_, { slots }) {
+		const ctx = useSignaturePadContext();
+		return () => h("button", ctx.api.value.getRedoTriggerProps(), slots.default?.());
+	}
+});
 const XhSignaturePadStatus = defineComponent({
 	name: "XhSignaturePadStatus",
 	setup(_, { slots }) {
@@ -105,6 +135,6 @@ const XhSignaturePadHiddenInput = defineComponent({
 	}
 });
 //#endregion
-export { XhSignaturePadClearTrigger, XhSignaturePadControl, XhSignaturePadGuide, XhSignaturePadHiddenInput, XhSignaturePadLabel, XhSignaturePadPath, XhSignaturePadRoot, XhSignaturePadStatus };
+export { XhSignaturePadClearTrigger, XhSignaturePadControl, XhSignaturePadGuide, XhSignaturePadHiddenInput, XhSignaturePadLabel, XhSignaturePadPath, XhSignaturePadRedoTrigger, XhSignaturePadRoot, XhSignaturePadStatus, XhSignaturePadUndoTrigger };
 
 //# sourceMappingURL=signature-pad.js.map