@xihan-ui/vue 4.1.0 → 5.0.0

package/dist/components/menu/use-menu.js

@@ -3,12 +3,12 @@ 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 { connectMenu, createMenuTreeNode, menuMachine } from "@xihan-ui/headless";
 import { computed, onBeforeUnmount, ref } from "vue";
 import { createRuntimeConfig, createScope } from "@xihan-ui/core";
-import { connectMenu, createMenuTreeNode, menuMachine } from "@xihan-ui/headless";
 import { createPositionEngine } from "@xihan-ui/position";
 //#region src/components/menu/use-menu.ts
-function useMenuImpl(props, onOpenChange, onSelect, onCheckboxValueChange, onRadioValueChange, treeParent) {
+function useMenuImpl(props, onOpenChange, onItemSelect, onCheckboxValueChange, onRadioValueChange, treeParent) {
 	const xhConfig = useXhConfig();
 	const triggerRef = ref(null);
 	const positionerRef = ref(null);
@@ -21,12 +21,12 @@ function useMenuImpl(props, onOpenChange, onSelect, onCheckboxValueChange, onRad
 		isOpen: () => service?.state.get() === "open",
 		close: () => service?.send({ type: "CLOSE" }),
 		isRoot: () => !(service?.prop("submenu") ?? props.submenu),
-		onRootSelect: (details) => onSelect?.(details)
+		onRootSelect: (details) => onItemSelect?.(details)
 	});
 	service = useMachine(menuMachine, () => ({
 		...props,
 		onOpenChange,
-		onSelect: treeParent ? tree.select : onSelect,
+		onItemSelect: treeParent ? tree.select : onItemSelect,
 		onCheckboxValueChange,
 		onRadioValueChange
 	}), scope);
@@ -41,7 +41,11 @@ function useMenuImpl(props, onOpenChange, onSelect, onCheckboxValueChange, onRad
 		const registerLayer = () => config.layerRegistry.register({
 			kind: "popover",
 			node: () => contentRef.value,
-			branches: () => [triggerRef.value, positionerRef.value].filter(Boolean),
+			branches: () => [
+				triggerRef.value,
+				props.anchor,
+				positionerRef.value
+			].filter(Boolean),
 			isModal: () => false,
 			surfaces: () => []
 		});
@@ -61,6 +65,7 @@ function useMenuImpl(props, onOpenChange, onSelect, onCheckboxValueChange, onRad
 		onPresence: (presence) => service.refs.set("presence", presence)
 	});
 	const portalTarget = computed(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? "body");
+	const portalSource = computed(() => props.anchor !== void 0 ? void 0 : triggerRef);
 	return {
 		visible,
 		service,
@@ -69,12 +74,13 @@ function useMenuImpl(props, onOpenChange, onSelect, onCheckboxValueChange, onRad
 		positionerRef,
 		contentRef,
 		tree,
-		portalTarget
+		portalTarget,
+		portalSource
 	};
 }
 /** 公开 composable：建立一棵独立菜单树。 */
-function useMenu(props, onOpenChange, onSelect, onCheckboxValueChange, onRadioValueChange) {
-	return useMenuImpl(props, onOpenChange, onSelect, onCheckboxValueChange, onRadioValueChange);
+function useMenu(props, onOpenChange, onItemSelect, onCheckboxValueChange, onRadioValueChange) {
+	return useMenuImpl(props, onOpenChange, onItemSelect, onCheckboxValueChange, onRadioValueChange);
 }
 /** 组合部件内部入口：把子菜单连接到 headless 逻辑树。 */
 function useMenuWithParent(props, onOpenChange, treeParent, onCheckboxValueChange, onRadioValueChange) {

package/dist/components/menu/use-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-menu.js","names":[],"sources":["../../../src/components/menu/use-menu.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 menu 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { MenuApi, MenuSchema, MenuTreeNode } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectMenu, createMenuTreeNode, menuMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, onBeforeUnmount, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface MenuContext {\n  service: Service<MenuSchema>\n  api: ComputedRef<MenuApi>\n  triggerRef: Ref<HTMLElement | null>\n  positionerRef: Ref<HTMLElement | null>\n  contentRef: Ref<HTMLElement | null>\n  /** Portal 之外的逻辑父子、悬停区域与选择收链由 headless 节点统一维护。 */\n  tree: MenuTreeNode\n  /** 当前是否应当渲染：退场动画播完之前仍为真。 */\n  visible: Ref<boolean>\n  /** 浮层迁移到的位置：全局配置的容器 > 运行时的浮层落点 > body。 */\n  portalTarget: ComputedRef<string | Element>\n}\n\nfunction useMenuImpl(\n  props: MenuSchema['props'],\n  onOpenChange?: MenuSchema['props']['onOpenChange'],\n  onSelect?: MenuSchema['props']['onSelect'],\n  onCheckboxValueChange?: MenuSchema['props']['onCheckboxValueChange'],\n  onRadioValueChange?: MenuSchema['props']['onRadioValueChange'],\n  treeParent?: MenuTreeNode,\n): MenuContext {\n  const xhConfig = useXhConfig()\n  const triggerRef = ref<HTMLElement | null>(null)\n  const positionerRef = ref<HTMLElement | null>(null)\n  const contentRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  let service: Service<MenuSchema> | null = null\n  const tree = createMenuTreeNode({\n    getPositioner: () => positionerRef.value,\n    isOpen: () => service?.state.get() === 'open',\n    close: () => service?.send({ type: 'CLOSE' }),\n    isRoot: () => !(service?.prop('submenu') ?? props.submenu),\n    onRootSelect: details => onSelect?.(details),\n  })\n  service = useMachine(menuMachine, () => ({\n    ...props,\n    onOpenChange,\n    onSelect: treeParent ? tree.select : onSelect,\n    onCheckboxValueChange,\n    onRadioValueChange,\n  }), scope)\n  const releaseParent = treeParent?.registerChild(tree)\n  onBeforeUnmount(() => releaseParent?.())\n\n  // 服务端没有 DOM、也就没有退场：config 传 null 时闸门退化成「跟着展开态」\n  let config: RuntimeConfig | null = null\n\n  if (typeof document !== 'undefined') {\n    config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n    // 只提供注册函数，入栈出栈由机器的 trackLayer 效应按展开态驱动\n    const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n      kind: 'popover',\n      node: () => contentRef.value,\n      // trigger 记为本层分支，点它算层内交互；\n      // 浮层壳一并记上：条目列表之外还浮着自绘滚动条，按住它拖动不该把菜单消解掉\n      branches: () => [triggerRef.value, positionerRef.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('getAnchorEl', () => triggerRef.value)\n    service.refs.set('getFloatingEl', () => positionerRef.value)\n    service.refs.set('getContentEl', () => contentRef.value)\n    service.refs.set('getHoverBranches', tree.getHoverBranches)\n  }\n\n  const api = computed(() => connectMenu(service, vueNormalize))\n  // 退场闸门：收起从跟着 open 走，改成跟着 presence 走\n  const visible = useOverlayExit({\n    config,\n    isOpen: () => api.value.open,\n    contentRef,\n    onPresence: presence => service.refs.set('presence', presence),\n  })\n  // 全局配置写了容器就用它，否则落到运行时那个单一浮层落点；没有 DOM 时才回到 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n  return { visible, service, api, triggerRef, positionerRef, contentRef, tree, portalTarget }\n}\n\n/** 公开 composable：建立一棵独立菜单树。 */\nexport function useMenu(\n  props: MenuSchema['props'],\n  onOpenChange?: MenuSchema['props']['onOpenChange'],\n  onSelect?: MenuSchema['props']['onSelect'],\n  onCheckboxValueChange?: MenuSchema['props']['onCheckboxValueChange'],\n  onRadioValueChange?: MenuSchema['props']['onRadioValueChange'],\n): MenuContext {\n  return useMenuImpl(props, onOpenChange, onSelect, onCheckboxValueChange, onRadioValueChange)\n}\n\n/** 组合部件内部入口：把子菜单连接到 headless 逻辑树。 */\nexport function useMenuWithParent(\n  props: MenuSchema['props'],\n  onOpenChange: MenuSchema['props']['onOpenChange'] | undefined,\n  treeParent: MenuTreeNode,\n  onCheckboxValueChange?: MenuSchema['props']['onCheckboxValueChange'],\n  onRadioValueChange?: MenuSchema['props']['onRadioValueChange'],\n): MenuContext {\n  return useMenuImpl(props, onOpenChange, undefined, onCheckboxValueChange, onRadioValueChange, treeParent)\n}\n"],"mappings":";;;;;;;;;;AAkCA,SAAS,YACP,OACA,cACA,UACA,uBACA,oBACA,YACa;CACb,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,IAAI,UAAsC;CAC1C,MAAM,OAAO,mBAAmB;EAC9B,qBAAqB,cAAc;EACnC,cAAc,SAAS,MAAM,IAAI,MAAM;EACvC,aAAa,SAAS,KAAK,EAAE,MAAM,QAAQ,CAAC;EAC5C,cAAc,EAAE,SAAS,KAAK,SAAS,KAAK,MAAM;EAClD,eAAc,YAAW,WAAW,OAAO;CAC7C,CAAC;CACD,UAAU,WAAW,oBAAoB;EACvC,GAAG;EACH;EACA,UAAU,aAAa,KAAK,SAAS;EACrC;EACA;CACF,IAAI,KAAK;CACT,MAAM,gBAAgB,YAAY,cAAc,IAAI;CACpD,sBAAsB,gBAAgB,CAAC;CAGvC,IAAI,SAA+B;CAEnC,IAAI,OAAO,aAAa,aAAa;EACnC,SAAS,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG1D,MAAM,sBAA0D,OAAQ,cAAc,SAAS;GAC7F,MAAM;GACN,YAAY,WAAW;GAGvB,gBAAgB,CAAC,WAAW,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GACtE,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAO;EAClC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;EACnD,QAAQ,KAAK,IAAI,qBAAqB,WAAW,KAAK;EACtD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;EAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;EACvD,QAAQ,KAAK,IAAI,oBAAoB,KAAK,gBAAgB;CAC5D;CAEA,MAAM,MAAM,eAAe,YAAY,SAAS,YAAY,CAAC;CAE7D,MAAM,UAAU,eAAe;EAC7B;EACA,cAAc,IAAI,MAAM;EACxB;EACA,aAAY,aAAY,QAAQ,KAAK,IAAI,YAAY,QAAQ;CAC/D,CAAC;CAED,MAAM,eAAe,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAAM;CAE/H,OAAO;EAAE;EAAS;EAAS;EAAK;EAAY;EAAe;EAAY;EAAM;CAAa;AAC5F;;AAGA,SAAgB,QACd,OACA,cACA,UACA,uBACA,oBACa;CACb,OAAO,YAAY,OAAO,cAAc,UAAU,uBAAuB,kBAAkB;AAC7F;;AAGA,SAAgB,kBACd,OACA,cACA,YACA,uBACA,oBACa;CACb,OAAO,YAAY,OAAO,cAAc,KAAA,GAAW,uBAAuB,oBAAoB,UAAU;AAC1G"}
+{"version":3,"file":"use-menu.js","names":[],"sources":["../../../src/components/menu/use-menu.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 menu 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { MenuApi, MenuSchema, MenuTreeNode } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectMenu, createMenuTreeNode, menuMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, onBeforeUnmount, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface MenuContext {\n  service: Service<MenuSchema>\n  api: ComputedRef<MenuApi>\n  triggerRef: Ref<HTMLElement | null>\n  positionerRef: Ref<HTMLElement | null>\n  contentRef: Ref<HTMLElement | null>\n  /** Portal 之外的逻辑父子、悬停区域与选择收链由 headless 节点统一维护。 */\n  tree: MenuTreeNode\n  /** 当前是否应当渲染：退场动画播完之前仍为真。 */\n  visible: Ref<boolean>\n  /** 浮层迁移到的位置：全局配置的容器 > 运行时的浮层落点 > body。 */\n  portalTarget: ComputedRef<string | Element>\n  /**\n   * 落点的视觉环境从哪取：缺省取 trigger；写了 anchor（哪怕暂时是 null）时为空，由 Portal 在 positioner 原位放来源标记。\n   */\n  portalSource: ComputedRef<Ref<HTMLElement | null> | undefined>\n}\n\nfunction useMenuImpl(\n  props: MenuSchema['props'],\n  onOpenChange?: MenuSchema['props']['onOpenChange'],\n  onItemSelect?: MenuSchema['props']['onItemSelect'],\n  onCheckboxValueChange?: MenuSchema['props']['onCheckboxValueChange'],\n  onRadioValueChange?: MenuSchema['props']['onRadioValueChange'],\n  treeParent?: MenuTreeNode,\n): MenuContext {\n  const xhConfig = useXhConfig()\n  const triggerRef = ref<HTMLElement | null>(null)\n  const positionerRef = ref<HTMLElement | null>(null)\n  const contentRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  let service: Service<MenuSchema> | null = null\n  const tree = createMenuTreeNode({\n    getPositioner: () => positionerRef.value,\n    isOpen: () => service?.state.get() === 'open',\n    close: () => service?.send({ type: 'CLOSE' }),\n    isRoot: () => !(service?.prop('submenu') ?? props.submenu),\n    onRootSelect: details => onItemSelect?.(details),\n  })\n  service = useMachine(menuMachine, () => ({\n    ...props,\n    onOpenChange,\n    onItemSelect: treeParent ? tree.select : onItemSelect,\n    onCheckboxValueChange,\n    onRadioValueChange,\n  }), scope)\n  const releaseParent = treeParent?.registerChild(tree)\n  onBeforeUnmount(() => releaseParent?.())\n\n  // 服务端没有 DOM、也就没有退场：config 传 null 时闸门退化成「跟着展开态」\n  let config: RuntimeConfig | null = null\n\n  if (typeof document !== 'undefined') {\n    config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n    // 只提供注册函数，入栈出栈由机器的 trackLayer 效应按展开态驱动\n    const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n      kind: 'popover',\n      node: () => contentRef.value,\n      // trigger 记为本层分支，点它算层内交互；外部锚点同理，点它交给打开它的那条命令去切换。\n      // 浮层壳一并记上：条目列表之外还浮着自绘滚动条，按住它拖动不该把菜单消解掉\n      branches: () => [triggerRef.value, props.anchor, positionerRef.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('getAnchorEl', () => triggerRef.value)\n    service.refs.set('getFloatingEl', () => positionerRef.value)\n    service.refs.set('getContentEl', () => contentRef.value)\n    service.refs.set('getHoverBranches', tree.getHoverBranches)\n  }\n\n  const api = computed(() => connectMenu(service, vueNormalize))\n  // 退场闸门：收起从跟着 open 走，改成跟着 presence 走\n  const visible = useOverlayExit({\n    config,\n    isOpen: () => api.value.open,\n    contentRef,\n    onPresence: presence => service.refs.set('presence', presence),\n  })\n  // 全局配置写了容器就用它，否则落到运行时那个单一浮层落点；没有 DOM 时才回到 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n  const portalSource = computed(() => (props.anchor !== undefined ? undefined : triggerRef))\n\n  return { visible, service, api, triggerRef, positionerRef, contentRef, tree, portalTarget, portalSource }\n}\n\n/** 公开 composable：建立一棵独立菜单树。 */\nexport function useMenu(\n  props: MenuSchema['props'],\n  onOpenChange?: MenuSchema['props']['onOpenChange'],\n  onItemSelect?: MenuSchema['props']['onItemSelect'],\n  onCheckboxValueChange?: MenuSchema['props']['onCheckboxValueChange'],\n  onRadioValueChange?: MenuSchema['props']['onRadioValueChange'],\n): MenuContext {\n  return useMenuImpl(props, onOpenChange, onItemSelect, onCheckboxValueChange, onRadioValueChange)\n}\n\n/** 组合部件内部入口：把子菜单连接到 headless 逻辑树。 */\nexport function useMenuWithParent(\n  props: MenuSchema['props'],\n  onOpenChange: MenuSchema['props']['onOpenChange'] | undefined,\n  treeParent: MenuTreeNode,\n  onCheckboxValueChange?: MenuSchema['props']['onCheckboxValueChange'],\n  onRadioValueChange?: MenuSchema['props']['onRadioValueChange'],\n): MenuContext {\n  return useMenuImpl(props, onOpenChange, undefined, onCheckboxValueChange, onRadioValueChange, treeParent)\n}\n"],"mappings":";;;;;;;;;;AAsCA,SAAS,YACP,OACA,cACA,cACA,uBACA,oBACA,YACa;CACb,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,IAAI,UAAsC;CAC1C,MAAM,OAAO,mBAAmB;EAC9B,qBAAqB,cAAc;EACnC,cAAc,SAAS,MAAM,IAAI,MAAM;EACvC,aAAa,SAAS,KAAK,EAAE,MAAM,QAAQ,CAAC;EAC5C,cAAc,EAAE,SAAS,KAAK,SAAS,KAAK,MAAM;EAClD,eAAc,YAAW,eAAe,OAAO;CACjD,CAAC;CACD,UAAU,WAAW,oBAAoB;EACvC,GAAG;EACH;EACA,cAAc,aAAa,KAAK,SAAS;EACzC;EACA;CACF,IAAI,KAAK;CACT,MAAM,gBAAgB,YAAY,cAAc,IAAI;CACpD,sBAAsB,gBAAgB,CAAC;CAGvC,IAAI,SAA+B;CAEnC,IAAI,OAAO,aAAa,aAAa;EACnC,SAAS,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG1D,MAAM,sBAA0D,OAAQ,cAAc,SAAS;GAC7F,MAAM;GACN,YAAY,WAAW;GAGvB,gBAAgB;IAAC,WAAW;IAAO,MAAM;IAAQ,cAAc;GAAK,CAAC,CAAC,OAAO,OAAO;GACpF,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAO;EAClC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;EACnD,QAAQ,KAAK,IAAI,qBAAqB,WAAW,KAAK;EACtD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;EAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;EACvD,QAAQ,KAAK,IAAI,oBAAoB,KAAK,gBAAgB;CAC5D;CAEA,MAAM,MAAM,eAAe,YAAY,SAAS,YAAY,CAAC;CAE7D,MAAM,UAAU,eAAe;EAC7B;EACA,cAAc,IAAI,MAAM;EACxB;EACA,aAAY,aAAY,QAAQ,KAAK,IAAI,YAAY,QAAQ;CAC/D,CAAC;CAED,MAAM,eAAe,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAAM;CAE/H,MAAM,eAAe,eAAgB,MAAM,WAAW,KAAA,IAAY,KAAA,IAAY,UAAW;CAEzF,OAAO;EAAE;EAAS;EAAS;EAAK;EAAY;EAAe;EAAY;EAAM;EAAc;CAAa;AAC1G;;AAGA,SAAgB,QACd,OACA,cACA,cACA,uBACA,oBACa;CACb,OAAO,YAAY,OAAO,cAAc,cAAc,uBAAuB,kBAAkB;AACjG;;AAGA,SAAgB,kBACd,OACA,cACA,YACA,uBACA,oBACa;CACb,OAAO,YAAY,OAAO,cAAc,KAAA,GAAW,uBAAuB,oBAAoB,UAAU;AAC1G"}

package/dist/components/menubar/context.d.ts

@@ -1,6 +1,6 @@
 import { MenubarContext } from "./use-menubar.js";
-import { ComputedRef, Ref } from "vue";
 import "@xihan-ui/headless";
+import { ComputedRef, Ref } from "vue";
 //#region src/components/menubar/context.d.ts
 /** 子菜单触发条目要同时访问父菜单栏与本子菜单，这里保存父层句柄与它在父层中的身份。 */
 interface MenubarSubHandle {

package/dist/components/menubar/menubar.d.ts

@@ -1,7 +1,7 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { MenuNode, MenuSchema, MenubarApi, MenubarNode, MenubarNodeMeta, MenubarRadioValue, MenubarSchema } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
-import { Direction, Orientation, Placement, Size, Tone } from "@xihan-ui/core";
-import { MenuNode, MenubarApi, MenubarNode, MenubarNodeMeta, MenubarRadioValue, MenubarSchema } from "@xihan-ui/headless";
+import { Direction, IconRecord, Orientation, Placement, Size, Tone } from "@xihan-ui/core";
 //#region src/components/menubar/menubar.d.ts
 type MenubarProps = MenubarSchema['props'];
 /** 默认插槽的载荷：当前展开的菜单项、是否有菜单展开，以及切换展开项的命令。 */
@@ -65,7 +65,7 @@ declare const XhMenubarRoot: import("vue").DefineComponent<import("vue").Extract
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   'value-change': (_details: PayloadOf<MenubarProps, "onValueChange">) => true;
-  select: (_details: PayloadOf<MenubarProps, "onSelect">) => true;
+  'item-select': (_details: PayloadOf<MenubarProps, "onItemSelect">) => true;
   'checkbox-value-change': (_details: PayloadOf<MenubarProps, "onCheckboxValueChange">) => true;
   'radio-value-change': (_details: PayloadOf<MenubarProps, "onRadioValueChange">) => true;
   'update:value': (_value: PayloadOf<MenubarProps, "onValueChange">["value"]) => true;
@@ -125,9 +125,9 @@ declare const XhMenubarRoot: import("vue").DefineComponent<import("vue").Extract
     type: PropType<MenubarProps["translations"]>;
   };
 }>> & Readonly<{
-  onSelect?: ((_details: import("@xihan-ui/headless").MenubarSelectDetails) => any) | undefined;
   "onValue-change"?: ((_details: import("@xihan-ui/headless").MenubarValueChangeDetails) => any) | undefined;
   "onUpdate:value"?: ((_value: string | null) => any) | undefined;
+  "onItem-select"?: ((_details: import("@xihan-ui/headless").MenubarItemSelectDetails) => any) | undefined;
   "onCheckbox-value-change"?: ((_details: import("@xihan-ui/headless").ContextMenuCheckboxValueChangeDetails) => any) | undefined;
   "onRadio-value-change"?: ((_details: import("@xihan-ui/headless").ContextMenuRadioValueChangeDetails) => any) | undefined;
 }>, {
@@ -245,6 +245,10 @@ declare const XhMenubarItemIndicator: import("vue").DefineComponent<{}, () => VN
 declare const XhMenubarItemDescription: 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 XhMenubarItemIcon: 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 XhMenubarItemShortcut: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
@@ -271,6 +275,14 @@ declare const XhMenubarSub: import("vue").DefineComponent<import("vue").ExtractP
     type: StringConstructor;
     required: true;
   };
+  /** 按数据铺设时触发条目的文字；缺省取所属菜单 items 里这一条的 label。 */
+  label: {
+    type: StringConstructor;
+  };
+  /** 按数据铺设时触发条目的图标；缺省取所属菜单 items 里这一条的 icon。 */
+  icon: {
+    type: PropType<IconRecord>;
+  };
   disabled: {
     type: BooleanConstructor;
     default: undefined;
@@ -279,6 +291,18 @@ declare const XhMenubarSub: import("vue").DefineComponent<import("vue").ExtractP
   collection: {
     type: PropType<MenuNode[]>;
   };
+  checkboxValue: {
+    type: PropType<string[]>;
+  };
+  defaultCheckboxValue: {
+    type: PropType<string[]>;
+  };
+  radioValue: {
+    type: PropType<MenubarRadioValue>;
+  };
+  defaultRadioValue: {
+    type: PropType<MenubarRadioValue>;
+  };
   placement: {
     type: PropType<Placement>;
   };
@@ -313,12 +337,23 @@ declare const XhMenubarSub: import("vue").DefineComponent<import("vue").ExtractP
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'checkbox-value-change': (_details: PayloadOf<MenuSchema["props"], "onCheckboxValueChange">) => true;
+  'radio-value-change': (_details: PayloadOf<MenuSchema["props"], "onRadioValueChange">) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   /** 它在所属菜单中的条目身份。 */
   value: {
     type: StringConstructor;
     required: true;
   };
+  /** 按数据铺设时触发条目的文字；缺省取所属菜单 items 里这一条的 label。 */
+  label: {
+    type: StringConstructor;
+  };
+  /** 按数据铺设时触发条目的图标；缺省取所属菜单 items 里这一条的 icon。 */
+  icon: {
+    type: PropType<IconRecord>;
+  };
   disabled: {
     type: BooleanConstructor;
     default: undefined;
@@ -327,6 +362,18 @@ declare const XhMenubarSub: import("vue").DefineComponent<import("vue").ExtractP
   collection: {
     type: PropType<MenuNode[]>;
   };
+  checkboxValue: {
+    type: PropType<string[]>;
+  };
+  defaultCheckboxValue: {
+    type: PropType<string[]>;
+  };
+  radioValue: {
+    type: PropType<MenubarRadioValue>;
+  };
+  defaultRadioValue: {
+    type: PropType<MenubarRadioValue>;
+  };
   placement: {
     type: PropType<Placement>;
   };
@@ -359,7 +406,10 @@ declare const XhMenubarSub: import("vue").DefineComponent<import("vue").ExtractP
   size: {
     type: PropType<Size>;
   };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+  "onCheckbox-value-change"?: ((_details: import("@xihan-ui/headless").ContextMenuCheckboxValueChangeDetails) => any) | undefined;
+  "onRadio-value-change"?: ((_details: import("@xihan-ui/headless").ContextMenuRadioValueChangeDetails) => any) | undefined;
+}>, {
   loop: boolean;
   disabled: boolean;
   openOnHover: boolean;
@@ -370,5 +420,5 @@ declare const XhMenubarSubTrigger: import("vue").DefineComponent<{}, () => VNode
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { MenubarRootSlotProps, MenubarSubSlotProps, XhMenubarArrow, XhMenubarCheckboxItem, XhMenubarContent, XhMenubarGroup, XhMenubarGroupLabel, XhMenubarItem, XhMenubarItemDescription, XhMenubarItemIndicator, XhMenubarItemShortcut, XhMenubarItemSuffix, XhMenubarItemText, XhMenubarPositioner, XhMenubarRadioGroup, XhMenubarRadioItem, XhMenubarRoot, XhMenubarSeparator, XhMenubarSub, XhMenubarSubTrigger, XhMenubarTrigger };
+export { MenubarRootSlotProps, MenubarSubSlotProps, XhMenubarArrow, XhMenubarCheckboxItem, XhMenubarContent, XhMenubarGroup, XhMenubarGroupLabel, XhMenubarItem, XhMenubarItemDescription, XhMenubarItemIcon, XhMenubarItemIndicator, XhMenubarItemShortcut, XhMenubarItemSuffix, XhMenubarItemText, XhMenubarPositioner, XhMenubarRadioGroup, XhMenubarRadioItem, XhMenubarRoot, XhMenubarSeparator, XhMenubarSub, XhMenubarSubTrigger, XhMenubarTrigger };
 //# sourceMappingURL=menubar.d.ts.map

package/dist/components/menubar/menubar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.d.ts","names":[],"sources":["../../../src/components/menubar/menubar.ts"],"mappings":";;;;;KAsCK,eAAe;;KAmBR,uBAAuB,KAAK;cAa3B,6BAAa,8BAAA;;IAIO,MAAA,SAAS;;;IACN,MAAA;;;IACO,MAAA;;;IACT,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACrB,MAAA;;;IACO,MAAA;;;IACD,MAAA,SAAS;;;;;;;IAEjB,MAAA,SAAS;;;;;;;;;;;IAGH,MAAA,SAAS;;;;;;IAEd,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS;;;;;EAId,iBAAA,UAAA,UAAU;EAChB,SAAA,UAAA,UAAU;EACK,0BAAA,UAAA,UAAU;EACb,uBAAA,UAAA,UAAU;EAClB,iBAAA,QAAA,UAAU;;;IAxBN,MAAA,SAAS;;;IACN,MAAA;;;IACO,MAAA;;;IACT,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACrB,MAAA;;;IACO,MAAA;;;IACD,MAAA,SAAS;;;;;;;IAEjB,MAAA,SAAS;;;;;;;;;;;IAGH,MAAA,SAAS;;;;;;IAEd,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS;;;;;;;;;;;;;EAW7B,WAAC,OAAO,yBAAyB;;EAEpC,QAAC,MAAM,oBAAoB;;EAEpB,iBAAC,MAAM,oBAAoB;;EAE3B,iBAAC,MAAM,oBAAoB;kCAiC7C;cAEW,gCAAgB,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAqD3B;cAEW,mCAAmB,8BAAA;;;;;;;IAKC,MAAA,SAAS;;;;;;;;;;;IAAT,MAAA,SAAS;;MAwBxC,oDAAA;cAEW,gCAAgB,8BAAA;;;;;;;;;;MAkE3B,oDAAA;cAEW,8BAAc,8BAAA;;;;;;;;;;;;MAWzB,oDAAA;cAEW,mCAAmB,8BAAA;;;;;;;;;;;;MAW9B,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAoDW;cACA;cACA;cAEA,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAO5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAOnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAOhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,8BAAc,0BAAA,oBAAA,4BAAA;;8BASzB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;UA2Ee;EACf;EACA,UAAU;;cAGC,4BAAY,8BAAA;;;;;;;;;;;;IAOQ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;IAOf,MAAA,SAAS;;;;IAER,MAAA,SAAS;;;;IAET,MAAA,SAAS;;;;;;;;;;;;;;;;IAZJ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;IAOf,MAAA,SAAS;;;;IAER,MAAA,SAAS;;;;IAET,MAAA,SAAS;;;;;;;EAGvB,WAAC,OAAO,wBAAwB;kCA6B5C;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAkB9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"menubar.d.ts","names":[],"sources":["../../../src/components/menubar/menubar.ts"],"mappings":"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"}

package/dist/components/menubar/menubar.js

@@ -1,16 +1,20 @@
+import { renderStructure } from "../../runtime/structure.js";
 import { useOverlayExit } from "../../runtime/use-overlay-exit.js";
 import { withXhConfig } from "../../config/config.js";
-import { mergePartProps } from "../../runtime/merge-props.js";
+import { mergePartProps, withoutScopeClass, withoutUndefined } from "../../runtime/merge-props.js";
 import { mergeIntoChild } from "../../runtime/as-child.js";
 import { XhPortal } from "../../runtime/portal.js";
 import { useScrollbars } from "../../runtime/use-scrollbars.js";
-import { provideMenu, useMenuContext } from "../menu/context.js";
+import { liveProps } from "../../runtime/live-props.js";
+import { XhIcon } from "../icon/icon.js";
+import { provideMenu, provideMenuItem, useMenuContext } from "../menu/context.js";
 import { useMenuWithParent } from "../menu/use-menu.js";
-import { MenuDefaultNodes, XhMenuContent, XhMenuPositioner } from "../menu/menu.js";
+import { MenuDefaultNodes, XhMenuContent, XhMenuItemIcon, XhMenuItemText, XhMenuPositioner } from "../menu/menu.js";
 import { provideMenubar, provideMenubarGroup, provideMenubarItem, provideMenubarMenu, provideMenubarSub, useMenubarContext, useMenubarGroupContext, useMenubarItemContext, useMenubarMenuContext, useMenubarSubContext } from "./context.js";
 import { useMenubar } from "./use-menubar.js";
+import { menubarStructure } from "@xihan-ui/headless";
 import { computed, defineComponent, h, mergeProps, onBeforeUnmount, ref, watch } from "vue";
-import { createRuntimeConfig, groupAdjacentRuns } from "@xihan-ui/core";
+import { createRuntimeConfig } from "@xihan-ui/core";
 //#region src/components/menubar/menubar.ts
 /** 在 ref 回调中把节点按 value 登记进菜单栏取值表，value 变更时迁移到新键，卸载时注销 */
 function useMenubarPart(register, value) {
@@ -58,7 +62,7 @@ const XhMenubarRoot = defineComponent({
 	},
 	emits: {
 		"value-change": (_details) => true,
-		"select": (_details) => true,
+		"item-select": (_details) => true,
 		"checkbox-value-change": (_details) => true,
 		"radio-value-change": (_details) => true,
 		"update:value": (_value) => true
@@ -69,8 +73,8 @@ const XhMenubarRoot = defineComponent({
 			emit("value-change", details);
 			emit("update:value", details.value);
 		};
-		const notifySelect = (details) => emit("select", details);
-		const ctx = useMenubar(withXhConfig("menubar", props), notifyValue, notifySelect, (details) => emit("checkbox-value-change", details), (details) => emit("radio-value-change", details));
+		const notifyItemSelect = (details) => emit("item-select", details);
+		const ctx = useMenubar(withXhConfig("menubar", props), notifyValue, notifyItemSelect, (details) => emit("checkbox-value-change", details), (details) => emit("radio-value-change", details));
 		provideMenubar(ctx);
 		return () => h("div", {
 			...ctx.api.value.getRootProps(),
@@ -85,11 +89,11 @@ const XhMenubarRoot = defineComponent({
 			radioValue: ctx.api.value.radioValue,
 			setCheckboxValue: ctx.api.value.setCheckboxValue,
 			setRadioValue: ctx.api.value.setRadioValue
-		}) : props.collection ? renderDefaultTree(ctx.api.value.collection, {
+		}) : renderDefaultStructure(ctx.api.value, {
 			"item": slots.item,
 			"item-prefix": slots["item-prefix"],
 			"item-suffix": slots["item-suffix"]
-		}) : []);
+		}));
 	}
 });
 const XhMenubarTrigger = defineComponent({
@@ -370,6 +374,15 @@ const XhMenubarItemDescription = defineComponent({
 		return () => h("span", ctx.api.value.getItemDescriptionProps(item.value), slots.default?.());
 	}
 });
+/** 条目文字之前的图标格；装饰态，读屏从条目文字取意 */
+const XhMenubarItemIcon = defineComponent({
+	name: "XhMenubarItemIcon",
+	setup(_, { slots }) {
+		const ctx = useMenubarContext();
+		const { item } = useMenubarItemContext();
+		return () => h("span", ctx.api.value.getItemIconProps(item.value), slots.default?.());
+	}
+});
 /** 条目中的快捷键提示，贴行尾；纯装饰，读屏从条目文字取意 */
 const XhMenubarItemShortcut = defineComponent({
 	name: "XhMenubarItemShortcut",
@@ -405,67 +418,29 @@ const XhMenubarSeparator = defineComponent({
 		return () => h("div", ctx.api.value.getSeparatorProps());
 	}
 });
-/**
-* 未写默认插槽时按 collection 铺开的整套结构，作者只提供数据。
-* 一排入口排在前、各自菜单的浮层排在后，与手写部件产出的 DOM 完全一致；
-* 需要修改结构时写默认插槽，行为不变。
-*/
-function renderDefaultTree(collection, itemSlots) {
-	return [...collection.map((menu) => h(XhMenubarTrigger, {
-		key: `trigger:${menu.value}`,
-		value: menu.value
-	}, () => menu.label)), ...collection.map((menu) => h(XhMenubarPositioner, {
-		key: `positioner:${menu.value}`,
-		value: menu.value
-	}, () => [h(XhMenubarContent, null, () => renderNodes(menu.items, itemSlots))]))];
-}
-/**
-* 单个条目：文字在上，副文本在下，未提供副文本时不铺设该部件。
-* `item-prefix` / `item-suffix` 插槽各接管首尾一格，其余槽照旧由数据铺。
-*/
-function renderNode(meta, itemSlots) {
-	if (meta.children) return renderSubmenu(meta);
-	const prefix = itemSlots["item-prefix"];
-	const suffix = itemSlots["item-suffix"];
-	return h(meta.kind === "checkbox" ? XhMenubarCheckboxItem : meta.kind === "radio" ? XhMenubarRadioItem : XhMenubarItem, {
-		key: meta.value,
-		value: meta.value,
-		closeOnSelect: meta.closeOnSelect
-	}, () => [
-		...prefix ? [h(XhMenubarItemIndicator, null, () => prefix(meta))] : meta.kind !== "item" ? [h(XhMenubarItemIndicator)] : [],
-		h(XhMenubarItemText, null, () => itemSlots.item?.(meta) ?? meta.label),
-		...meta.description != null ? [h(XhMenubarItemDescription, null, () => meta.description)] : [],
-		...meta.shortcut != null ? [h(XhMenubarItemShortcut, null, () => meta.shortcut)] : [],
-		...suffix ? [h(XhMenubarItemSuffix, null, () => suffix(meta))] : []
-	]);
-}
-/** content 的内容：分组段铺为 group，段首的分隔线落在 group 外面。 */
-function renderNodes(collection, itemSlots) {
-	return groupAdjacentRuns(collection, (node) => node.group).flatMap((run, runIndex) => {
-		const head = run[0];
-		const lead = runIndex > 0 && head.separatorBefore ? [h(XhMenubarSeparator, { key: `separator:${head.value}` })] : [];
-		if (head.group == null) return [...lead, renderNode(head, itemSlots)];
-		const groupLabel = run.find((node) => node.groupLabel != null)?.groupLabel ?? null;
-		return [...lead, h(head.kind === "radio" ? XhMenubarRadioGroup : XhMenubarGroup, {
-			key: `group:${head.group}`,
-			value: head.group
-		}, () => [...groupLabel != null ? [h(XhMenubarGroupLabel, null, () => groupLabel)] : [], ...run.flatMap((node, index) => [...index > 0 && node.separatorBefore ? [h(XhMenubarSeparator, { key: `separator:${node.value}` })] : [], renderNode(node, itemSlots)])])];
-	});
-}
 const XhMenubarSub = defineComponent({
 	name: "XhMenubarSub",
+	inheritAttrs: false,
 	props: {
 		/** 它在所属菜单中的条目身份。 */
 		value: {
 			type: String,
 			required: true
 		},
+		/** 按数据铺设时触发条目的文字；缺省取所属菜单 items 里这一条的 label。 */
+		label: { type: String },
+		/** 按数据铺设时触发条目的图标；缺省取所属菜单 items 里这一条的 icon。 */
+		icon: { type: Object },
 		disabled: {
 			type: Boolean,
 			default: void 0
 		},
 		/** 子层的条目数据：显示文本与禁用的事实源，按数据铺子层时由默认树代填。 */
 		collection: { type: Array },
+		checkboxValue: { type: Array },
+		defaultCheckboxValue: { type: Array },
+		radioValue: { type: Object },
+		defaultRadioValue: { type: Object },
 		placement: { type: String },
 		offset: { type: Number },
 		loop: {
@@ -485,18 +460,23 @@ const XhMenubarSub = defineComponent({
 		/** 尺寸；默认继承父层，理由同 tone。 */
 		size: { type: String }
 	},
+	emits: {
+		"checkbox-value-change": (_details) => true,
+		"radio-value-change": (_details) => true
+	},
 	slots: Object,
-	setup(props, { slots }) {
+	setup(props, { slots, emit }) {
 		const parent = useMenubarContext();
 		const owner = useMenubarMenuContext();
 		if (!owner) throw new Error("[xh] MenubarSub 必须用在 XhMenubarPositioner 内");
-		const sub = useMenuWithParent({
+		const sub = useMenuWithParent(liveProps(() => ({
 			...props,
 			submenu: true,
 			dir: props.dir ?? parent.service.prop("dir"),
 			tone: props.tone ?? parent.service.prop("tone"),
-			size: props.size ?? parent.service.prop("size")
-		}, void 0, parent.tree);
+			size: props.size ?? parent.service.prop("size"),
+			fitAvailableHeight: true
+		})), void 0, parent.tree, (details) => emit("checkbox-value-change", details), (details) => emit("radio-value-change", details));
 		provideMenu(sub);
 		provideMenubarSub({
 			parent,
@@ -506,10 +486,10 @@ const XhMenubarSub = defineComponent({
 		watch(() => parent.api.value.isOpen(owner.menu.value.value), (open) => {
 			if (!open) sub.api.value.setOpen(false);
 		});
-		return () => slots.default?.({
+		return () => slots.default ? slots.default({
 			open: sub.api.value.open,
 			setOpen: sub.api.value.setOpen
-		});
+		}) : renderSubLayer(props.label ?? parent.api.value.collection.find((menu) => menu.value === owner.menu.value.value)?.items.find((node) => node.value === props.value)?.label ?? props.value, props.icon ?? parent.api.value.collection.find((menu) => menu.value === owner.menu.value.value)?.items.find((node) => node.value === props.value)?.icon ?? null);
 	}
 });
 const XhMenubarSubTrigger = defineComponent({
@@ -517,30 +497,97 @@ const XhMenubarSubTrigger = defineComponent({
 	setup(_, { slots }) {
 		const handle = useMenubarSubContext();
 		const sub = useMenuContext();
+		provideMenuItem({ item: computed(() => ({
+			value: handle.value,
+			disabled: handle.disabled
+		})) });
 		return () => h("div", {
-			...mergeProps(sub.api.value.getSubmenuTriggerProps({
+			...mergeProps(withoutScopeClass(sub.api.value.getSubmenuTriggerProps({
 				value: handle.value,
 				disabled: handle.disabled
-			}), handle.parent.api.value.getItemProps({
+			})), withoutUndefined(handle.parent.api.value.getItemProps({
 				value: handle.value,
 				disabled: handle.disabled
-			})),
+			}))),
 			ref: (el) => {
 				sub.triggerRef.value = el;
 			}
 		}, slots.default?.());
 	}
 });
-/** 带 children 的条目铺成子菜单：子层跑的是 menu 机器，条目按数据铺、不经本层的插槽。 */
-function renderSubmenu(meta) {
-	return h(XhMenubarSub, {
-		key: meta.value,
-		value: meta.value,
-		disabled: meta.disabled || void 0,
-		collection: meta.children
-	}, () => [h(XhMenubarSubTrigger, null, () => [meta.label]), h(XhMenuPositioner, null, () => [h(XhMenuContent, null, () => [h(MenuDefaultNodes)])])]);
+/** 子菜单不写插槽时那一层：触发条目、定位层与按本层 collection 铺的条目；子层不经菜单栏上的条目插槽。 */
+function renderSubLayer(label, icon) {
+	return [h(XhMenubarSubTrigger, null, () => [...icon ? [h(XhMenuItemIcon, null, () => [h(XhIcon, { icon })])] : [], h(XhMenuItemText, null, () => [label])]), h(XhMenuPositioner, null, () => [h(XhMenuContent, null, () => [h(MenuDefaultNodes)])])];
+}
+/** 所属那张菜单里按数据铺的条目元信息。 */
+function ownItems(ctx, owner) {
+	const menu = owner?.menu.value.value;
+	return ctx.api.value.collection.find((node) => node.value === menu)?.items ?? [];
+}
+/** 标准结构里各部件对应的组件。 */
+const MENUBAR_PARTS = {
+	"trigger": XhMenubarTrigger,
+	"positioner": XhMenubarPositioner,
+	"content": XhMenubarContent,
+	"item": /* @__PURE__ */ defineComponent({
+		name: "MenubarStructureItem",
+		props: { value: {
+			type: String,
+			required: true
+		} },
+		setup(props, { slots }) {
+			const ctx = useMenubarContext();
+			const owner = useMenubarMenuContext();
+			return () => {
+				const meta = ownItems(ctx, owner).find((node) => node.value === props.value);
+				return h(meta?.kind === "checkbox" ? XhMenubarCheckboxItem : meta?.kind === "radio" ? XhMenubarRadioItem : XhMenubarItem, {
+					value: props.value,
+					closeOnSelect: meta?.closeOnSelect
+				}, slots);
+			};
+		}
+	}),
+	"item-icon": XhMenubarItemIcon,
+	"item-text": XhMenubarItemText,
+	"item-indicator": XhMenubarItemIndicator,
+	"item-description": XhMenubarItemDescription,
+	"item-shortcut": XhMenubarItemShortcut,
+	"item-suffix": XhMenubarItemSuffix,
+	"separator": XhMenubarSeparator,
+	"group": /* @__PURE__ */ defineComponent({
+		name: "MenubarStructureGroup",
+		props: { value: {
+			type: String,
+			required: true
+		} },
+		setup(props, { slots }) {
+			const ctx = useMenubarContext();
+			const owner = useMenubarMenuContext();
+			return () => {
+				return h(ownItems(ctx, owner).some((node) => node.kind === "radio" && node.group === props.value) ? XhMenubarRadioGroup : XhMenubarGroup, { value: props.value }, slots);
+			};
+		}
+	}),
+	"group-label": XhMenubarGroupLabel
+};
+/** 结构里组合进来的组件：带 children 的条目是嵌套的子菜单。 */
+const MENUBAR_INSTANCES = {
+	menu: XhMenubarSub,
+	icon: XhIcon
+};
+/**
+* 未写默认插槽时照 menubarStructure 铺开的整套结构，与 Web Components 不写部件时元素生成的节点出自同一份。
+* 入口按钮的文字取入口的 label；条目文字、行首、行尾可由 item 系插槽逐槽接管，其余照数据铺。
+*/
+function renderDefaultStructure(api, itemSlots) {
+	return renderStructure(menubarStructure(api, { slotted: (name) => itemSlots[name] != null }), MENUBAR_PARTS, (node) => {
+		const name = node.slot?.name;
+		if (name !== "item" && name !== "item-prefix" && name !== "item-suffix") return void 0;
+		const meta = node.data;
+		return meta ? itemSlots[name]?.(meta) : void 0;
+	}, MENUBAR_INSTANCES);
 }
 //#endregion
-export { XhMenubarArrow, XhMenubarCheckboxItem, XhMenubarContent, XhMenubarGroup, XhMenubarGroupLabel, XhMenubarItem, XhMenubarItemDescription, XhMenubarItemIndicator, XhMenubarItemShortcut, XhMenubarItemSuffix, XhMenubarItemText, XhMenubarPositioner, XhMenubarRadioGroup, XhMenubarRadioItem, XhMenubarRoot, XhMenubarSeparator, XhMenubarSub, XhMenubarSubTrigger, XhMenubarTrigger };
+export { XhMenubarArrow, XhMenubarCheckboxItem, XhMenubarContent, XhMenubarGroup, XhMenubarGroupLabel, XhMenubarItem, XhMenubarItemDescription, XhMenubarItemIcon, XhMenubarItemIndicator, XhMenubarItemShortcut, XhMenubarItemSuffix, XhMenubarItemText, XhMenubarPositioner, XhMenubarRadioGroup, XhMenubarRadioItem, XhMenubarRoot, XhMenubarSeparator, XhMenubarSub, XhMenubarSubTrigger, XhMenubarTrigger };
 
 //# sourceMappingURL=menubar.js.map