@xihan-ui/vue 1.0.0-alpha.2 → 1.0.0

package/dist/components/loading-bar/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/loading-bar/context.ts
-const KEY = Symbol("xh-loading-bar");
+const KEY = Symbol.for("xh-loading-bar");
 function provideLoadingBar(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/loading-bar/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/loading-bar/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { LoadingBarContext } from './use-loading-bar'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<LoadingBarContext> = Symbol('xh-loading-bar')\n\nexport function provideLoadingBar(ctx: LoadingBarContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useLoadingBarContext(): LoadingBarContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] LoadingBar 部件必须用在 XhLoadingBarRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAuC,OAAO,gBAAgB;AAEpE,SAAgB,kBAAkB,KAA8B;CAC9D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,uBAA0C;CACxD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/loading-bar/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { LoadingBarContext } from './use-loading-bar'\nimport { inject, provide } from 'vue'\n\n// 全局符号注册表：模块被打包或热更新成两份时，Symbol('x') 会是两个不同的键，\n// provide 与 inject 各拿一个，部件当场抛「必须用在 XhLoadingBarRoot 内」——整棵子树白屏。\n// Symbol.for 按字符串查同一个键，两份模块也对得上\nconst KEY: InjectionKey<LoadingBarContext> = Symbol.for('xh-loading-bar')\n\nexport function provideLoadingBar(ctx: LoadingBarContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useLoadingBarContext(): LoadingBarContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] LoadingBar 部件必须用在 XhLoadingBarRoot 内')\n  return ctx\n}\n"],"mappings":";;AAOA,MAAM,MAAuC,OAAO,IAAI,gBAAgB;AAExE,SAAgB,kBAAkB,KAA8B;CAC9D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,uBAA0C;CACxD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT"}

package/dist/components/log/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/log/context.ts
-const KEY = Symbol("xh-log");
+const KEY = Symbol.for("xh-log");
 function provideLog(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/log/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/log/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { LogContext } from './use-log'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<LogContext> = Symbol('xh-log')\n\nexport function provideLog(ctx: LogContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useLogContext(): LogContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Log 部件必须用在 XhLogRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAgC,OAAO,QAAQ;AAErD,SAAgB,WAAW,KAAuB;CAChD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,gBAA4B;CAC1C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,6BAA6B;CAC/C,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/log/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { LogContext } from './use-log'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<LogContext> = Symbol.for('xh-log')\n\nexport function provideLog(ctx: LogContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useLogContext(): LogContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Log 部件必须用在 XhLogRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAgC,OAAO,IAAI,QAAQ;AAEzD,SAAgB,WAAW,KAAuB;CAChD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,gBAA4B;CAC1C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,6BAA6B;CAC/C,OAAO;AACT"}

package/dist/components/marquee/context.js

@@ -1,6 +1,6 @@
 import { inject, provide } from "vue";
 //#region src/components/marquee/context.ts
-const KEY = Symbol("xh-marquee");
+const KEY = Symbol.for("xh-marquee");
 function provideMarquee(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/marquee/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/marquee/context.ts"],"sourcesContent":["import type { MarqueeApi } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport { inject, provide } from 'vue'\n\nexport interface MarqueeContext {\n  api: ComputedRef<MarqueeApi>\n}\n\nconst KEY: InjectionKey<MarqueeContext> = Symbol('xh-marquee')\n\nexport function provideMarquee(ctx: MarqueeContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useMarqueeContext(): MarqueeContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Marquee 部件必须用在 XhMarqueeRoot 内')\n  return ctx\n}\n"],"mappings":";;AAQA,MAAM,MAAoC,OAAO,YAAY;AAE7D,SAAgB,eAAe,KAA2B;CACxD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,oBAAoC;CAClD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,qCAAqC;CACvD,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/marquee/context.ts"],"sourcesContent":["import type { MarqueeApi } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport { inject, provide } from 'vue'\n\nexport interface MarqueeContext {\n  api: ComputedRef<MarqueeApi>\n}\n\nconst KEY: InjectionKey<MarqueeContext> = Symbol.for('xh-marquee')\n\nexport function provideMarquee(ctx: MarqueeContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useMarqueeContext(): MarqueeContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Marquee 部件必须用在 XhMarqueeRoot 内')\n  return ctx\n}\n"],"mappings":";;AAQA,MAAM,MAAoC,OAAO,IAAI,YAAY;AAEjE,SAAgB,eAAe,KAA2B;CACxD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,oBAAoC;CAClD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,qCAAqC;CACvD,OAAO;AACT"}

package/dist/components/masonry/masonry.d.ts

@@ -0,0 +1,41 @@
+import { PropType, VNode } from "vue";
+import { MasonryColumns, MasonryProps } from "@xihan-ui/headless";
+//#region src/components/masonry/masonry.d.ts
+/** 断点对象形态的列数，从 MasonryProps 上取，不在这里另抄一份档位清单。 */
+type ColumnsByBreakpoint = Exclude<MasonryColumns, number>;
+declare const XhMasonry: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  columns: {
+    type: PropType<number | string | ColumnsByBreakpoint>;
+    default: undefined;
+  };
+  gap: {
+    type: PropType<MasonryProps["gap"]>;
+    default: undefined;
+  };
+  sequential: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  columns: {
+    type: PropType<number | string | ColumnsByBreakpoint>;
+    default: undefined;
+  };
+  gap: {
+    type: PropType<MasonryProps["gap"]>;
+    default: undefined;
+  };
+  sequential: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  columns: string | number | import("@xihan-ui/headless").MasonryColumnsByBreakpoint;
+  gap: import("@xihan-ui/headless").MasonryGap | undefined;
+  sequential: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { XhMasonry };
+//# sourceMappingURL=masonry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.d.ts","names":[],"sources":["../../../src/components/masonry/masonry.ts"],"mappings":";;;;KAQK,sBAAsB,QAAQ;cAqDtB,yBAAS,8BAAA;;IAMkB,MAAA,2BAA2B;;;;IAGxC,MAAA,SAAS;;;;;;;;;;;IAHI,MAAA,2BAA2B;;;;IAGxC,MAAA,SAAS;;;;;;;;;;;qCAwGlC"}

package/dist/components/masonry/masonry.js

@@ -0,0 +1,159 @@
+import { vueNormalize } from "../../runtime/normalize-props.js";
+import { Comment, Fragment, Text, defineComponent, h, onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
+import { connectMasonry, distributeMasonry, masonryItemQuery, resolveMasonryColumns } from "@xihan-ui/headless";
+import { queryItems } from "@xihan-ui/behavior";
+//#region src/components/masonry/masonry.ts
+/** 列数的档位名，base 在前，其余自窄到宽。 */
+const COLUMN_TIERS = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+/** 模板里写 columns="3" 拿到的是字符串，交给算法前统一转成数字。 */
+function count(value) {
+	return value == null ? void 0 : Number(value);
+}
+/** 列数：整数与字符串按单个数走；断点对象逐档转数字，没写的档不带进去。 */
+function columnsOf(value) {
+	if (value == null || typeof value !== "object") return count(value);
+	const out = {};
+	for (const tier of COLUMN_TIERS) {
+		const raw = value[tier];
+		if (raw != null) out[tier] = Number(raw);
+	}
+	return out;
+}
+/**
+* 把默认插槽摊成一个个项。
+*
+* `v-for` 产出的是一个片段而不是若干节点，不摊平就整段算一项，一列里会塞进所有内容；
+* `v-if` 为假留下的注释节点与模板缩进留下的空白文本一个像素都不画，留着会占掉一个格位。
+*/
+function masonryItems(nodes) {
+	const items = [];
+	for (const node of nodes) {
+		if (node.type === Comment) continue;
+		if (node.type === Text) {
+			if (String(node.children ?? "").trim() !== "") items.push(node);
+			continue;
+		}
+		if (node.type === Fragment && Array.isArray(node.children)) {
+			items.push(...masonryItems(node.children));
+			continue;
+		}
+		items.push(node);
+	}
+	return items;
+}
+/** 两遍量到的高度是不是一样。逐位比而不是比引用：每次量都产出新数组，比引用等于每次都判变。 */
+function sameHeights(a, b) {
+	return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+const XhMasonry = defineComponent({
+	name: "XhMasonry",
+	props: {
+		columns: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			default: void 0
+		},
+		gap: {
+			type: String,
+			default: void 0
+		},
+		sequential: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const rootEl = ref(null);
+		/** 容器自身的宽度，换档看它。 */
+		const width = ref(0);
+		/** 按作者写的项序排好的实测高度。 */
+		const heights = ref([]);
+		let observer = null;
+		/** 当前挂着观察器的节点，与新一轮比对后才决定要不要重挂。 */
+		let observed = [];
+		/** 量一遍容器宽度与每一项的高度。量到的与上一遍一样就不写，否则量一次重排一次没完。 */
+		const measure = () => {
+			const el = rootEl.value;
+			if (!el) return;
+			const nextWidth = el.getBoundingClientRect().width;
+			const items = queryItems(el, masonryItemQuery);
+			const nextHeights = Array.from({ length: items.length }).fill(0);
+			for (const node of items) {
+				const index = Number(node.dataset.index);
+				if (Number.isInteger(index) && index >= 0 && index < nextHeights.length) nextHeights[index] = node.getBoundingClientRect().height;
+			}
+			if (nextWidth !== width.value) width.value = nextWidth;
+			if (!sameHeights(nextHeights, heights.value)) heights.value = nextHeights;
+		};
+		/** 项增删后把观察器挂到新的一批节点上，再量一遍。节点没变就不重挂：重挂会白白多跑一轮回调。 */
+		const sync = () => {
+			const el = rootEl.value;
+			if (!el) return;
+			const next = [el, ...queryItems(el, masonryItemQuery)];
+			const changed = next.length !== observed.length || next.some((node, index) => node !== observed[index]);
+			if (observer && changed) {
+				observer.disconnect();
+				for (const node of next) observer.observe(node);
+				observed = next;
+			}
+			measure();
+		};
+		onMounted(() => {
+			const win = rootEl.value?.ownerDocument.defaultView;
+			if (win && typeof win.ResizeObserver === "function") observer = new win.ResizeObserver(() => measure());
+			sync();
+		});
+		onUpdated(sync);
+		onBeforeUnmount(() => {
+			observer?.disconnect();
+			observer = null;
+			observed = [];
+		});
+		return () => {
+			const children = masonryItems(slots.default?.() ?? []);
+			const declared = columnsOf(props.columns);
+			const columnCount = resolveMasonryColumns(declared, width.value);
+			const assign = distributeMasonry(children.map((_, index) => heights.value[index] ?? 0), columnCount, props.sequential ?? false);
+			const api = connectMasonry({
+				columns: declared,
+				gap: props.gap,
+				sequential: props.sequential
+			}, vueNormalize);
+			const columns = [];
+			for (let column = 0; column < columnCount; column++) {
+				const kids = [];
+				children.forEach((child, index) => {
+					if (assign[index] !== column) return;
+					kids.push(h("div", {
+						...api.getItemProps({
+							index,
+							column
+						}),
+						key: child.key ?? `xh-masonry-item-${index}`
+					}, [child]));
+				});
+				columns.push(h("div", {
+					...api.getColumnProps({ index: column }),
+					key: column
+				}, kids));
+			}
+			return h("div", {
+				...api.getRootProps(),
+				ref: rootEl
+			}, columns);
+		};
+	}
+});
+//#endregion
+export { XhMasonry };
+
+//# sourceMappingURL=masonry.js.map

package/dist/components/masonry/masonry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.js","names":[],"sources":["../../../src/components/masonry/masonry.ts"],"sourcesContent":["import type { MasonryColumns, MasonryProps } from '@xihan-ui/headless'\nimport type { PropType, VNode } from 'vue'\nimport { queryItems } from '@xihan-ui/behavior'\nimport { connectMasonry, distributeMasonry, masonryItemQuery, resolveMasonryColumns } from '@xihan-ui/headless'\nimport { Comment, defineComponent, Fragment, h, onBeforeUnmount, onMounted, onUpdated, ref, Text } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\n\n/** 断点对象形态的列数，从 MasonryProps 上取，不在这里另抄一份档位清单。 */\ntype ColumnsByBreakpoint = Exclude<MasonryColumns, number>\n\n/** 列数的档位名，base 在前，其余自窄到宽。 */\nconst COLUMN_TIERS = ['base', 'sm', 'md', 'lg', 'xl'] as const\n\n/** 模板里写 columns=\"3\" 拿到的是字符串，交给算法前统一转成数字。 */\nfunction count(value: number | string | undefined): number | undefined {\n  return value == null ? undefined : Number(value)\n}\n\n/** 列数：整数与字符串按单个数走；断点对象逐档转数字，没写的档不带进去。 */\nfunction columnsOf(value: number | string | ColumnsByBreakpoint | undefined): MasonryColumns | undefined {\n  if (value == null || typeof value !== 'object')\n    return count(value)\n  const out: ColumnsByBreakpoint = {}\n  for (const tier of COLUMN_TIERS) {\n    const raw = value[tier]\n    if (raw != null)\n      out[tier] = Number(raw)\n  }\n  return out\n}\n\n/**\n * 把默认插槽摊成一个个项。\n *\n * `v-for` 产出的是一个片段而不是若干节点，不摊平就整段算一项，一列里会塞进所有内容；\n * `v-if` 为假留下的注释节点与模板缩进留下的空白文本一个像素都不画，留着会占掉一个格位。\n */\nfunction masonryItems(nodes: readonly VNode[]): VNode[] {\n  const items: VNode[] = []\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue\n    if (node.type === Text) {\n      if (String(node.children ?? '').trim() !== '')\n        items.push(node)\n      continue\n    }\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      items.push(...masonryItems(node.children as VNode[]))\n      continue\n    }\n    items.push(node)\n  }\n  return items\n}\n\n/** 两遍量到的高度是不是一样。逐位比而不是比引用：每次量都产出新数组，比引用等于每次都判变。 */\nfunction sameHeights(a: readonly number[], b: readonly number[]): boolean {\n  return a.length === b.length && a.every((value, index) => value === b[index])\n}\n\nexport const XhMasonry = defineComponent({\n  name: 'XhMasonry',\n  // 有 connect 兜底的 prop 一律 default: undefined\n  props: {\n    // 列数由作者声明：兼收字符串以支持模板里写 columns=\"3\"，收对象则是逐档的列数\n    columns: {\n      type: [Number, String, Object] as PropType<number | string | ColumnsByBreakpoint>,\n      default: undefined,\n    },\n    gap: { type: String as PropType<MasonryProps['gap']>, default: undefined },\n    sequential: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const rootEl = ref<HTMLElement | null>(null)\n    /** 容器自身的宽度，换档看它。 */\n    const width = ref(0)\n    /** 按作者写的项序排好的实测高度。 */\n    const heights = ref<number[]>([])\n\n    let observer: ResizeObserver | null = null\n    /** 当前挂着观察器的节点，与新一轮比对后才决定要不要重挂。 */\n    let observed: HTMLElement[] = []\n\n    /** 量一遍容器宽度与每一项的高度。量到的与上一遍一样就不写，否则量一次重排一次没完。 */\n    const measure = (): void => {\n      const el = rootEl.value\n      if (!el)\n        return\n      const nextWidth = el.getBoundingClientRect().width\n      const items = queryItems(el, masonryItemQuery)\n      const nextHeights = Array.from<number>({ length: items.length }).fill(0)\n      for (const node of items) {\n        // 项的原序写在 data-index 上：重排后 DOM 序等于列序，按文档序记高度会对错号\n        const index = Number(node.dataset.index)\n        if (Number.isInteger(index) && index >= 0 && index < nextHeights.length)\n          nextHeights[index] = node.getBoundingClientRect().height\n      }\n      if (nextWidth !== width.value)\n        width.value = nextWidth\n      if (!sameHeights(nextHeights, heights.value))\n        heights.value = nextHeights\n    }\n\n    /** 项增删后把观察器挂到新的一批节点上，再量一遍。节点没变就不重挂：重挂会白白多跑一轮回调。 */\n    const sync = (): void => {\n      const el = rootEl.value\n      if (!el)\n        return\n      const next = [el, ...queryItems(el, masonryItemQuery)]\n      const changed = next.length !== observed.length || next.some((node, index) => node !== observed[index])\n      if (observer && changed) {\n        observer.disconnect()\n        for (const node of next) observer.observe(node)\n        observed = next\n      }\n      measure()\n    }\n\n    onMounted(() => {\n      const win = rootEl.value?.ownerDocument.defaultView\n      // 无布局环境没有 ResizeObserver：只在挂载后量这一次，之后不再跟随尺寸变化\n      if (win && typeof win.ResizeObserver === 'function')\n        observer = new win.ResizeObserver(() => measure())\n      sync()\n    })\n\n    onUpdated(sync)\n\n    onBeforeUnmount(() => {\n      observer?.disconnect()\n      observer = null\n      observed = []\n    })\n\n    return () => {\n      const children = masonryItems(slots.default?.() ?? [])\n      const declared = columnsOf(props.columns)\n      const columnCount = resolveMasonryColumns(declared, width.value)\n      const assign = distributeMasonry(\n        children.map((_, index) => heights.value[index] ?? 0),\n        columnCount,\n        props.sequential ?? false,\n      )\n      const api = connectMasonry({\n        columns: declared,\n        gap: props.gap,\n        sequential: props.sequential,\n      }, vueNormalize)\n\n      const columns: VNode[] = []\n      for (let column = 0; column < columnCount; column++) {\n        const kids: VNode[] = []\n        children.forEach((child, index) => {\n          if (assign[index] !== column)\n            return\n          // 项各包一层：量高度要有个稳定的盒子，作者写什么内容都不影响\n          // 键跟着作者写的 key 走，同一列内增删才不会连累后面几项重建\n          kids.push(h(\n            'div',\n            { ...api.getItemProps({ index, column }) as Record<string, unknown>, key: child.key ?? `xh-masonry-item-${index}` },\n            [child],\n          ))\n        })\n        columns.push(h(\n          'div',\n          { ...api.getColumnProps({ index: column }) as Record<string, unknown>, key: column },\n          kids,\n        ))\n      }\n\n      return h('div', { ...api.getRootProps() as Record<string, unknown>, ref: rootEl }, columns)\n    }\n  },\n})\n"],"mappings":"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"}

package/dist/components/mention/context.js

@@ -1,7 +1,7 @@
 import { inject, provide } from "vue";
 //#region src/components/mention/context.ts
-const KEY = Symbol("xh-mention");
-const ITEM_KEY = Symbol("xh-mention-item");
+const KEY = Symbol.for("xh-mention");
+const ITEM_KEY = Symbol.for("xh-mention-item");
 function provideMention(ctx) {
 	provide(KEY, ctx);
 }

package/dist/components/mention/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/mention/context.ts"],"sourcesContent":["import type { MentionItemProps } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { MentionContext } from './use-mention'\nimport { inject, provide } from 'vue'\n\n/** 候选自报的值与禁用，供 item-text 复用同一份声明。 */\nexport interface MentionItemContext {\n  item: ComputedRef<MentionItemProps>\n}\n\nconst KEY: InjectionKey<MentionContext> = Symbol('xh-mention')\nconst ITEM_KEY: InjectionKey<MentionItemContext> = Symbol('xh-mention-item')\n\nexport function provideMention(ctx: MentionContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useMentionContext(): MentionContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Mention 部件必须用在 XhMentionRoot 内')\n  return ctx\n}\n\nexport function provideMentionItem(ctx: MentionItemContext): void {\n  provide(ITEM_KEY, ctx)\n}\n\nexport function useMentionItemContext(): MentionItemContext {\n  const ctx = inject(ITEM_KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Mention 候选子部件必须用在 XhMentionItem 内')\n  return ctx\n}\n"],"mappings":";;AAUA,MAAM,MAAoC,OAAO,YAAY;AAC7D,MAAM,WAA6C,OAAO,iBAAiB;AAE3E,SAAgB,eAAe,KAA2B;CACxD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,oBAAoC;CAClD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,qCAAqC;CACvD,OAAO;AACT;AAEA,SAAgB,mBAAmB,KAA+B;CAChE,QAAQ,UAAU,GAAG;AACvB;AAEA,SAAgB,wBAA4C;CAC1D,MAAM,MAAM,OAAO,UAAU,IAAI;CACjC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,wCAAwC;CAC1D,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/mention/context.ts"],"sourcesContent":["import type { MentionItemProps } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { MentionContext } from './use-mention'\nimport { inject, provide } from 'vue'\n\n/** 候选自报的值与禁用，供 item-text 复用同一份声明。 */\nexport interface MentionItemContext {\n  item: ComputedRef<MentionItemProps>\n}\n\nconst KEY: InjectionKey<MentionContext> = Symbol.for('xh-mention')\nconst ITEM_KEY: InjectionKey<MentionItemContext> = Symbol.for('xh-mention-item')\n\nexport function provideMention(ctx: MentionContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useMentionContext(): MentionContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Mention 部件必须用在 XhMentionRoot 内')\n  return ctx\n}\n\nexport function provideMentionItem(ctx: MentionItemContext): void {\n  provide(ITEM_KEY, ctx)\n}\n\nexport function useMentionItemContext(): MentionItemContext {\n  const ctx = inject(ITEM_KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Mention 候选子部件必须用在 XhMentionItem 内')\n  return ctx\n}\n"],"mappings":";;AAUA,MAAM,MAAoC,OAAO,IAAI,YAAY;AACjE,MAAM,WAA6C,OAAO,IAAI,iBAAiB;AAE/E,SAAgB,eAAe,KAA2B;CACxD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,oBAAoC;CAClD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,qCAAqC;CACvD,OAAO;AACT;AAEA,SAAgB,mBAAmB,KAA+B;CAChE,QAAQ,UAAU,GAAG;AACvB;AAEA,SAAgB,wBAA4C;CAC1D,MAAM,MAAM,OAAO,UAAU,IAAI;CACjC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,wCAAwC;CAC1D,OAAO;AACT"}

package/dist/components/mention/mention.d.ts

@@ -24,6 +24,8 @@ declare const XhMentionRoot: import("vue").DefineComponent<import("vue").Extract
     default: undefined;
   };
   disabled: BooleanConstructor;
+  readOnly: BooleanConstructor;
+  invalid: BooleanConstructor;
   placeholder: {
     type: StringConstructor;
     default: undefined;
@@ -82,6 +84,8 @@ declare const XhMentionRoot: import("vue").DefineComponent<import("vue").Extract
     default: undefined;
   };
   disabled: BooleanConstructor;
+  readOnly: BooleanConstructor;
+  invalid: BooleanConstructor;
   placeholder: {
     type: StringConstructor;
     default: undefined;
@@ -121,15 +125,17 @@ declare const XhMentionRoot: import("vue").DefineComponent<import("vue").Extract
   "onOpen-change"?: ((_details: import("@xihan-ui/headless").MentionOpenChangeDetails) => any) | undefined;
   "onQuery-change"?: ((_details: import("@xihan-ui/headless").MentionQueryChangeDetails) => any) | undefined;
 }>, {
+  invalid: boolean;
   value: string;
   collection: MentionNode[];
   defaultValue: string;
   tone: Tone;
   size: Size;
   disabled: boolean;
-  translations: MentionTranslations;
   offset: number;
+  translations: MentionTranslations;
   variant: ControlVariant;
+  readOnly: boolean;
   loop: boolean;
   placeholder: string;
   placement: Placement;

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

@@ -1 +1 @@
-{"version":3,"file":"mention.d.ts","names":[],"sources":["../../../src/components/mention/mention.ts"],"mappings":";;;;;KASK,eAAe;;KAGR,uBAAuB,KACjC;cAUW,6BAAa,8BAAA;;IAIa,MAAA;;;;IACN,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;IAMT,MAAA,SAAS;;;;;;;;IAEN,MAAA,SAAS;;;;IACd,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;;;EAIN,iBAAA,UAAA,UAAU;EACV,iBAAA,UAAA,UAAU;EAChB,SAAA,UAAA,UAAU;EACL,gBAAA,UAAA,UAAU;EACX,iBAAA,QAAA,UAAU;;;IApBA,MAAA;;;;IACN,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;IAMT,MAAA,SAAS;;;;;;;;IAEN,MAAA,SAAS;;;;IACd,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;EAWvB,WAAC,OAAO,yBAAyB;;EAEpC,QAAC,OAAO,oBAAoB;kCAyCrC;cAEW,8BAAc,8BAAA;;;;;;IAOD,MAAA,SAAS;;;;;;;;;;;IAAT,MAAA,SAAS;;;;;qCASjC;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAS9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAS3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,6BAAa,8BAAA;;;;;;;;;;;;;;;;;;;;;;qCAkBxB;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAO5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"mention.d.ts","names":[],"sources":["../../../src/components/mention/mention.ts"],"mappings":";;;;;KAWK,eAAe;;KAGR,uBAAuB,KACjC;cAUW,6BAAa,8BAAA;;IAIa,MAAA;;;;IACN,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;IAQT,MAAA,SAAS;;;;;;;;IAEN,MAAA,SAAS;;;;IACd,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;;;EAIN,iBAAA,UAAA,UAAU;EACV,iBAAA,UAAA,UAAU;EAChB,SAAA,UAAA,UAAU;EACL,gBAAA,UAAA,UAAU;EACX,iBAAA,QAAA,UAAU;;;IAtBA,MAAA;;;;IACN,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;IAQT,MAAA,SAAS;;;;;;;;IAEN,MAAA,SAAS;;;;IACd,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;EAWvB,WAAC,OAAO,yBAAyB;;EAEpC,QAAC,OAAO,oBAAoB;kCAyCrC;cAEW,8BAAc,8BAAA;;;;;;IAOD,MAAA,SAAS;;;;;;;;;;;IAAT,MAAA,SAAS;;;;;qCAcjC;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAgB9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAY3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,6BAAa,8BAAA;;;;;;;;;;;;;;;;;;;;;;qCAkBxB;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAO5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/mention/mention.js

@@ -1,7 +1,9 @@
 import { withXhConfig } from "../../config/config.js";
+import { useScrollbars } from "../../runtime/use-scrollbars.js";
+import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
 import { provideMention, provideMentionItem, useMentionContext, useMentionItemContext } from "./context.js";
 import { useMention } from "./use-mention.js";
-import { computed, defineComponent, h, onMounted, onUnmounted, onUpdated, watch } from "vue";
+import { Teleport, computed, defineComponent, h, mergeProps, onMounted, onUnmounted, onUpdated, watch } from "vue";
 //#region src/components/mention/mention.ts
 const XhMentionRoot = defineComponent({
 	name: "XhMentionRoot",
@@ -23,6 +25,8 @@ const XhMentionRoot = defineComponent({
 			default: void 0
 		},
 		disabled: Boolean,
+		readOnly: Boolean,
+		invalid: Boolean,
 		placeholder: {
 			type: String,
 			default: void 0
@@ -104,25 +108,30 @@ as: {
 		default: "textarea"
 	} },
 	setup(props) {
+		const fieldWiring = useFieldStateWiring();
+		const fieldLabel = useFieldLabelWiring();
 		const ctx = useMentionContext();
-		return () => h(props.as, {
+		return () => h(props.as, fieldLabel.value({
 			...ctx.api.value.getInputProps({ as: props.as }),
 			ref: (el) => {
 				ctx.inputRef.value = el;
-			}
-		});
+			},
+			...fieldWiring.value
+		}));
 	}
 });
 const XhMentionPositioner = defineComponent({
 	name: "XhMentionPositioner",
-	setup(_, { slots }) {
+	inheritAttrs: false,
+	setup(_, { slots, attrs }) {
 		const ctx = useMentionContext();
-		return () => h("div", {
-			...ctx.api.value.getPositionerProps(),
+		const bars = useScrollbars({ scrollable: () => ctx.contentRef.value });
+		return () => h(Teleport, { to: ctx.portalTarget.value }, [h("div", {
+			...mergeProps(ctx.api.value.getPositionerProps(), attrs),
 			ref: (el) => {
 				ctx.positionerRef.value = el;
 			}
-		}, slots.default?.());
+		}, [...slots.default?.() ?? [], ...bars.render()])]);
 	}
 });
 const XhMentionContent = defineComponent({
@@ -131,6 +140,7 @@ const XhMentionContent = defineComponent({
 		const ctx = useMentionContext();
 		return () => h("div", {
 			...ctx.api.value.getContentProps(),
+			style: ctx.visible.value ? void 0 : { display: "none" },
 			ref: (el) => {
 				ctx.contentRef.value = el;
 			}

package/dist/components/mention/mention.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention.js","names":[],"sources":["../../../src/components/mention/mention.ts"],"sourcesContent":["import type { MentionApi, MentionInputEl, MentionInputHost, MentionItemProps, MentionNode, MentionNodeMeta, MentionSchema, MentionTranslations } from '@xihan-ui/headless'\nimport type { ControlVariant, Placement, Size, Tone } from '@xihan-ui/kernel'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, onMounted, onUnmounted, onUpdated, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { provideMention, provideMentionItem, useMentionContext, useMentionItemContext } from './context'\nimport { useMention } from './use-mention'\n\ntype MentionProps = MentionSchema['props']\n\n/** 默认插槽的载荷：浮层开合、正文与查询串、高亮候选，以及改写正文与收起浮层的句柄。 */\nexport type MentionRootSlotProps = Pick<\n  MentionApi,\n  | 'open'\n  | 'value'\n  | 'query'\n  | 'activePrefix'\n  | 'highlightedValue'\n  | 'setValue'\n  | 'close'\n>\n\nexport const XhMentionRoot = defineComponent({\n  name: 'XhMentionRoot',\n  // 有 connect 兜底的 prop 一律 default: undefined\n  props: {\n    prefix: { type: [String, Array] as PropType<string | string[]>, default: undefined },\n    collection: { type: Array as PropType<MentionNode[]>, default: undefined },\n    value: { type: String, default: undefined },\n    defaultValue: { type: String, default: undefined },\n    disabled: Boolean,\n    placeholder: { type: String, default: undefined },\n    loop: { type: Boolean, default: undefined },\n    placement: { type: String as PropType<Placement>, default: undefined },\n    offset: { type: Number, default: undefined },\n    translations: { type: Object as PropType<MentionTranslations>, default: undefined },\n    variant: { type: String as PropType<ControlVariant>, default: undefined },\n    tone: { type: String as PropType<Tone>, default: undefined },\n    size: { type: String as PropType<Size>, default: undefined },\n  },\n  // *-change 携带 details 对象，update:* 携带裸值\n  emits: {\n    'value-change': (_details: PayloadOf<MentionProps, 'onValueChange'>) => true,\n    'query-change': (_details: PayloadOf<MentionProps, 'onQueryChange'>) => true,\n    'select': (_details: PayloadOf<MentionProps, 'onSelect'>) => true,\n    'open-change': (_details: PayloadOf<MentionProps, 'onOpenChange'>) => true,\n    'update:value': (_value: PayloadOf<MentionProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: MentionRootSlotProps) => VNode[]\n    /** 铺开 collection 时每条候选的文本插槽。 */\n    item?: (props: MentionNodeMeta) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notifyValue: MentionProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const notifyQuery: MentionProps['onQueryChange'] = details => emit('query-change', details)\n    const notifySelect: MentionProps['onSelect'] = details => emit('select', details)\n    const notifyOpen: MentionProps['onOpenChange'] = details => emit('open-change', details)\n\n    const ctx = useMention(withXhConfig('mention', props) as MentionProps, {\n      onValueChange: notifyValue,\n      onQueryChange: notifyQuery,\n      onSelect: notifySelect,\n      onOpenChange: notifyOpen,\n    })\n    provideMention(ctx)\n\n    // 首帧结算一次候选条数，之后的增删由条目自己上报\n    onMounted(ctx.syncItems)\n    onUpdated(ctx.syncItems)\n\n    return () => h(\n      'div',\n      ctx.api.value.getRootProps() as Record<string, unknown>,\n      slots.default\n        ? slots.default({\n            open: ctx.api.value.open,\n            value: ctx.api.value.value,\n            query: ctx.api.value.query,\n            activePrefix: ctx.api.value.activePrefix,\n            highlightedValue: ctx.api.value.highlightedValue,\n            setValue: ctx.api.value.setValue,\n            close: ctx.api.value.close,\n          })\n        : props.collection\n          ? renderDefaultTree(ctx.api.value.collection, slots.item)\n          : [],\n    )\n  },\n})\n\nexport const XhMentionInput = defineComponent({\n  name: 'XhMentionInput',\n  props: {\n    /**\n     * 输入框渲染成哪个标签，默认 textarea。\n     * 写 input 即单行宿主：connect 随之补上 type、role 与 aria-expanded。\n     */\n    as: { type: String as PropType<MentionInputHost>, default: 'textarea' },\n  },\n  setup(props) {\n    const ctx = useMentionContext()\n    return () => h(props.as, {\n      ...ctx.api.value.getInputProps({ as: props.as }) as Record<string, unknown>,\n      ref: (el: unknown) => { ctx.inputRef.value = el as MentionInputEl },\n    })\n  },\n})\n\nexport const XhMentionPositioner = defineComponent({\n  name: 'XhMentionPositioner',\n  setup(_, { slots }) {\n    const ctx = useMentionContext()\n    return () => h('div', {\n      ...ctx.api.value.getPositionerProps() as Record<string, unknown>,\n      ref: (el: unknown) => { ctx.positionerRef.value = el as HTMLElement },\n    }, slots.default?.())\n  },\n})\n\nexport const XhMentionContent = defineComponent({\n  name: 'XhMentionContent',\n  setup(_, { slots }) {\n    const ctx = useMentionContext()\n    return () => h('div', {\n      ...ctx.api.value.getContentProps() as Record<string, unknown>,\n      ref: (el: unknown) => { ctx.contentRef.value = el as HTMLElement },\n    }, slots.default?.())\n  },\n})\n\nexport const XhMentionItem = defineComponent({\n  name: 'XhMentionItem',\n  props: {\n    value: { type: String, required: true },\n    // 缺省交给 connect 回 collection 里查，写死 false 会盖掉数据里的禁用\n    disabled: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const ctx = useMentionContext()\n    const item = computed<MentionItemProps>(() => ({ value: props.value, disabled: props.disabled }))\n    provideMentionItem({ item })\n    // 候选的进出与改名由条目自己上报，机器据此结算条数并摘掉悬空高亮\n    onMounted(ctx.syncItems)\n    onUnmounted(ctx.syncItems)\n    // 节点就地复用时数量不变但身份换了，需按 value 另行上报\n    watch(() => props.value, ctx.syncItems)\n    return () => h('div', ctx.api.value.getItemProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhMentionItemText = defineComponent({\n  name: 'XhMentionItemText',\n  setup(_, { slots }) {\n    const ctx = useMentionContext()\n    const { item } = useMentionItemContext()\n    return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/**\n * 没写默认插槽时按 collection 铺开的整套结构，作者只交数据。\n * 与手写部件产出的 DOM 完全一致，要改结构就写默认插槽，行为不变。\n * 过滤仍归调用方：collection 就是此刻该显示的那几条候选。\n */\nfunction renderDefaultTree(\n  collection: readonly MentionNodeMeta[],\n  itemSlot?: (node: MentionNodeMeta) => VNode[],\n): VNode[] {\n  return [\n    h(XhMentionInput),\n    h(XhMentionPositioner, null, () => [\n      h(XhMentionContent, null, () => collection.map(node =>\n        h(XhMentionItem, { key: node.value, value: node.value }, () => [\n          h(XhMentionItemText, null, () => itemSlot?.(node) ?? node.label),\n        ]),\n      )),\n    ]),\n  ]\n}\n"],"mappings":"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"}
+{"version":3,"file":"mention.js","names":[],"sources":["../../../src/components/mention/mention.ts"],"sourcesContent":["import type { MentionApi, MentionInputEl, MentionInputHost, MentionItemProps, MentionNode, MentionNodeMeta, MentionSchema, MentionTranslations } from '@xihan-ui/headless'\nimport type { ControlVariant, Placement, Size, Tone } from '@xihan-ui/kernel'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, mergeProps, onMounted, onUnmounted, onUpdated, Teleport, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useScrollbars } from '../../runtime/use-scrollbars'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { provideMention, provideMentionItem, useMentionContext, useMentionItemContext } from './context'\nimport { useMention } from './use-mention'\n\ntype MentionProps = MentionSchema['props']\n\n/** 默认插槽的载荷：浮层开合、正文与查询串、高亮候选，以及改写正文与收起浮层的句柄。 */\nexport type MentionRootSlotProps = Pick<\n  MentionApi,\n  | 'open'\n  | 'value'\n  | 'query'\n  | 'activePrefix'\n  | 'highlightedValue'\n  | 'setValue'\n  | 'close'\n>\n\nexport const XhMentionRoot = defineComponent({\n  name: 'XhMentionRoot',\n  // 有 connect 兜底的 prop 一律 default: undefined\n  props: {\n    prefix: { type: [String, Array] as PropType<string | string[]>, default: undefined },\n    collection: { type: Array as PropType<MentionNode[]>, default: undefined },\n    value: { type: String, default: undefined },\n    defaultValue: { type: String, default: undefined },\n    disabled: Boolean,\n    readOnly: Boolean,\n    invalid: Boolean,\n    placeholder: { type: String, default: undefined },\n    loop: { type: Boolean, default: undefined },\n    placement: { type: String as PropType<Placement>, default: undefined },\n    offset: { type: Number, default: undefined },\n    translations: { type: Object as PropType<MentionTranslations>, default: undefined },\n    variant: { type: String as PropType<ControlVariant>, default: undefined },\n    tone: { type: String as PropType<Tone>, default: undefined },\n    size: { type: String as PropType<Size>, default: undefined },\n  },\n  // *-change 携带 details 对象，update:* 携带裸值\n  emits: {\n    'value-change': (_details: PayloadOf<MentionProps, 'onValueChange'>) => true,\n    'query-change': (_details: PayloadOf<MentionProps, 'onQueryChange'>) => true,\n    'select': (_details: PayloadOf<MentionProps, 'onSelect'>) => true,\n    'open-change': (_details: PayloadOf<MentionProps, 'onOpenChange'>) => true,\n    'update:value': (_value: PayloadOf<MentionProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: MentionRootSlotProps) => VNode[]\n    /** 铺开 collection 时每条候选的文本插槽。 */\n    item?: (props: MentionNodeMeta) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notifyValue: MentionProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const notifyQuery: MentionProps['onQueryChange'] = details => emit('query-change', details)\n    const notifySelect: MentionProps['onSelect'] = details => emit('select', details)\n    const notifyOpen: MentionProps['onOpenChange'] = details => emit('open-change', details)\n\n    const ctx = useMention(withXhConfig('mention', props) as MentionProps, {\n      onValueChange: notifyValue,\n      onQueryChange: notifyQuery,\n      onSelect: notifySelect,\n      onOpenChange: notifyOpen,\n    })\n    provideMention(ctx)\n\n    // 首帧结算一次候选条数，之后的增删由条目自己上报\n    onMounted(ctx.syncItems)\n    onUpdated(ctx.syncItems)\n\n    return () => h(\n      'div',\n      ctx.api.value.getRootProps() as Record<string, unknown>,\n      slots.default\n        ? slots.default({\n            open: ctx.api.value.open,\n            value: ctx.api.value.value,\n            query: ctx.api.value.query,\n            activePrefix: ctx.api.value.activePrefix,\n            highlightedValue: ctx.api.value.highlightedValue,\n            setValue: ctx.api.value.setValue,\n            close: ctx.api.value.close,\n          })\n        : props.collection\n          ? renderDefaultTree(ctx.api.value.collection, slots.item)\n          : [],\n    )\n  },\n})\n\nexport const XhMentionInput = defineComponent({\n  name: 'XhMentionInput',\n  props: {\n    /**\n     * 输入框渲染成哪个标签，默认 textarea。\n     * 写 input 即单行宿主：connect 随之补上 type、role 与 aria-expanded。\n     */\n    as: { type: String as PropType<MentionInputHost>, default: 'textarea' },\n  },\n  setup(props) {\n    // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n    const fieldLabel = useFieldLabelWiring()\n    const ctx = useMentionContext()\n    return () => h(props.as, fieldLabel.value({\n      ...ctx.api.value.getInputProps({ as: props.as }) as Record<string, unknown>,\n      ref: (el: unknown) => { ctx.inputRef.value = el as MentionInputEl },\n      ...fieldWiring.value,\n    }))\n  },\n})\n\nexport const XhMentionPositioner = defineComponent({\n  name: 'XhMentionPositioner',\n  // 根是 Teleport，Vue 不会把直通属性合上去，作者写的 class 与 style 得自己接住落到 positioner 上\n  inheritAttrs: false,\n  setup(_, { slots, attrs }) {\n    const ctx = useMentionContext()\n    // 候选列表的自绘条：与 content 同级、绝对定位不占布局，壳是这层已经 fixed 的 positioner\n    const bars = useScrollbars({ scrollable: () => ctx.contentRef.value })\n    // 定位层搬到 portal 落点，逃开祖先的层叠上下文\n    return () => h(Teleport, { to: ctx.portalTarget.value }, [\n      h('div', {\n        ...mergeProps(ctx.api.value.getPositionerProps() as Record<string, unknown>, attrs),\n        ref: (el: unknown) => { ctx.positionerRef.value = el as HTMLElement },\n      }, [...(slots.default?.() ?? []), ...bars.render()]),\n    ])\n  },\n})\n\nexport const XhMentionContent = defineComponent({\n  name: 'XhMentionContent',\n  setup(_, { slots }) {\n    const ctx = useMentionContext()\n    return () => h('div', {\n      ...ctx.api.value.getContentProps() as Record<string, unknown>,\n      // 收起跟着退场闸门走：皮肤刻意没给 content 补 [hidden]{display:none}（补了退场\n      // 就一帧都播不出来），所以真正的收起落成内联 display——节点始终留在原地\n      style: ctx.visible.value ? undefined : { display: 'none' },\n      ref: (el: unknown) => { ctx.contentRef.value = el as HTMLElement },\n    }, slots.default?.())\n  },\n})\n\nexport const XhMentionItem = defineComponent({\n  name: 'XhMentionItem',\n  props: {\n    value: { type: String, required: true },\n    // 缺省交给 connect 回 collection 里查，写死 false 会盖掉数据里的禁用\n    disabled: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const ctx = useMentionContext()\n    const item = computed<MentionItemProps>(() => ({ value: props.value, disabled: props.disabled }))\n    provideMentionItem({ item })\n    // 候选的进出与改名由条目自己上报，机器据此结算条数并摘掉悬空高亮\n    onMounted(ctx.syncItems)\n    onUnmounted(ctx.syncItems)\n    // 节点就地复用时数量不变但身份换了，需按 value 另行上报\n    watch(() => props.value, ctx.syncItems)\n    return () => h('div', ctx.api.value.getItemProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhMentionItemText = defineComponent({\n  name: 'XhMentionItemText',\n  setup(_, { slots }) {\n    const ctx = useMentionContext()\n    const { item } = useMentionItemContext()\n    return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/**\n * 没写默认插槽时按 collection 铺开的整套结构，作者只交数据。\n * 与手写部件产出的 DOM 完全一致，要改结构就写默认插槽，行为不变。\n * 过滤仍归调用方：collection 就是此刻该显示的那几条候选。\n */\nfunction renderDefaultTree(\n  collection: readonly MentionNodeMeta[],\n  itemSlot?: (node: MentionNodeMeta) => VNode[],\n): VNode[] {\n  return [\n    h(XhMentionInput),\n    h(XhMentionPositioner, null, () => [\n      h(XhMentionContent, null, () => collection.map(node =>\n        h(XhMentionItem, { key: node.value, value: node.value }, () => [\n          h(XhMentionItemText, null, () => itemSlot?.(node) ?? node.label),\n        ]),\n      )),\n    ]),\n  ]\n}\n"],"mappings":"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"}

package/dist/components/mention/use-mention.d.ts

@@ -10,6 +10,10 @@ interface MentionContext {
   inputRef: Ref<MentionInputEl | null>;
   positionerRef: Ref<HTMLElement | null>;
   contentRef: Ref<HTMLElement | null>;
+  /** 此刻该不该渲染：退场动画播完之前仍为真。 */
+  visible: Ref<boolean>;
+  /** 浮层搬到哪儿：全局配置的容器 > 运行时的浮层落点 > body。 */
+  portalTarget: ComputedRef<string | Element>;
   /** 上报候选集合可能变了；同一拍里多次调用只上报一次。 */
   syncItems: () => void;
 }

package/dist/components/mention/use-mention.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-mention.d.ts","names":[],"sources":["../../../src/components/mention/use-mention.ts"],"mappings":";;;;UAYiB;;EAEf,SAAS,QAAQ;EACjB,KAAK,YAAY;;EAEjB,UAAU,IAAI;EACd,eAAe,IAAI;EACnB,YAAY,IAAI;;EAEhB;;iBAGc,WACd,OAAO,wBACP,WAAU,KAAK,2FACd"}
+{"version":3,"file":"use-mention.d.ts","names":[],"sources":["../../../src/components/mention/use-mention.ts"],"mappings":";;;;UAciB;;EAEf,SAAS,QAAQ;EACjB,KAAK,YAAY;;EAEjB,UAAU,IAAI;EACd,eAAe,IAAI;EACnB,YAAY,IAAI;;EAEhB,SAAS;;EAET,cAAc,qBAAqB;;EAEnC;;iBAGc,WACd,OAAO,wBACP,WAAU,KAAK,2FACd"}

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

@@ -1,4 +1,6 @@
+import { useOverlayExit } from "../../runtime/use-overlay-exit.js";
 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, nextTick, ref } from "vue";
@@ -7,6 +9,7 @@ import { createRuntimeConfig, createScope } from "@xihan-ui/kernel";
 import { createPositionEngine } from "@xihan-ui/position";
 //#region src/components/mention/use-mention.ts
 function useMention(props, handlers = {}) {
+	const xhConfig = useXhConfig();
 	const inputRef = ref(null);
 	const positionerRef = ref(null);
 	const contentRef = ref(null);
@@ -16,15 +19,16 @@ function useMention(props, handlers = {}) {
 		...props,
 		...handlers
 	}), scope);
+	let config = null;
 	if (typeof document !== "undefined") {
-		const config = createRuntimeConfig({
+		config = createRuntimeConfig({
 			scope,
 			idGenerator: idGen
 		});
 		const registerLayer = () => config.layerRegistry.register({
 			kind: "popover",
 			node: () => contentRef.value,
-			branches: () => [inputRef.value].filter(Boolean),
+			branches: () => [inputRef.value, positionerRef.value].filter(Boolean),
 			isModal: () => false,
 			setModal: () => {},
 			surfaces: () => []
@@ -45,12 +49,19 @@ function useMention(props, handlers = {}) {
 			if (service.getStatus() === "Started") service.send({ type: "ITEMS.SYNC" });
 		});
 	};
+	const api = computed(() => connectMention(service, vueNormalize));
 	return {
+		visible: useOverlayExit({
+			config,
+			isOpen: () => api.value.open,
+			contentRef
+		}),
 		service,
-		api: computed(() => connectMention(service, vueNormalize)),
+		api,
 		inputRef,
 		positionerRef,
 		contentRef,
+		portalTarget: computed(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? "body"),
 		syncItems
 	};
 }

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

@@ -1 +1 @@
-{"version":3,"file":"use-mention.js","names":[],"sources":["../../../src/components/mention/use-mention.ts"],"sourcesContent":["import type { MentionApi, MentionInputEl, MentionSchema } from '@xihan-ui/headless'\nimport type { Cleanup, Layer, RuntimeConfig } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectMention, mentionMachine } from '@xihan-ui/headless'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/kernel'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, nextTick, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface MentionContext {\n  /** 机器实例，供部件直接上报 DOM 侧事实。 */\n  service: Service<MentionSchema>\n  api: ComputedRef<MentionApi>\n  /** 输入宿主，textarea 或 input；由 XhMentionInput 的 as 决定渲染成哪个。 */\n  inputRef: Ref<MentionInputEl | null>\n  positionerRef: Ref<HTMLElement | null>\n  contentRef: Ref<HTMLElement | null>\n  /** 上报候选集合可能变了；同一拍里多次调用只上报一次。 */\n  syncItems: () => void\n}\n\nexport function useMention(\n  props: MentionSchema['props'],\n  handlers: Pick<MentionSchema['props'], 'onValueChange' | 'onQueryChange' | 'onSelect' | 'onOpenChange'> = {},\n): MentionContext {\n  const inputRef = ref<MentionInputEl | 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  const service = useMachine(mentionMachine, () => ({ ...props, ...handlers }), scope)\n\n  if (typeof document !== 'undefined') {\n    const config: RuntimeConfig = 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      // 输入框记为本层分支：在正文里打字、点击都算层内交互，不该把浮层点没\n      branches: () => [inputRef.value].filter(Boolean) as Element[],\n      isModal: () => false,\n      setModal: () => {},\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('getFloatingEl', () => positionerRef.value)\n    service.refs.set('getContentEl', () => contentRef.value)\n    service.refs.set('getInputEl', () => inputRef.value)\n  }\n\n  // 合并到下一拍统一上报，同时等待 DOM 落定\n  let syncScheduled = false\n  const syncItems = (): void => {\n    if (syncScheduled)\n      return\n    syncScheduled = true\n    void nextTick(() => {\n      syncScheduled = false\n      if (service.getStatus() === 'Started')\n        service.send({ type: 'ITEMS.SYNC' })\n    })\n  }\n\n  const api = computed(() => connectMention(service, vueNormalize))\n  return { service, api, inputRef, positionerRef, contentRef, syncItems }\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,WACd,OACA,WAA0G,CAAC,GAC3F;CAChB,MAAM,WAAW,IAA2B,IAAI;CAChD,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,MAAM,UAAU,WAAW,uBAAuB;EAAE,GAAG;EAAO,GAAG;CAAS,IAAI,KAAK;CAEnF,IAAI,OAAO,aAAa,aAAa;EACnC,MAAM,SAAwB,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG/E,MAAM,sBAA0D,OAAO,cAAc,SAAS;GAC5F,MAAM;GACN,YAAY,WAAW;GAEvB,gBAAgB,CAAC,SAAS,KAAK,CAAC,CAAC,OAAO,OAAO;GAC/C,eAAe;GACf,gBAAgB,CAAC;GACjB,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,uBAAuB,cAAc,KAAK;EAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;EACvD,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;CACrD;CAGA,IAAI,gBAAgB;CACpB,MAAM,kBAAwB;EAC5B,IAAI,eACF;EACF,gBAAgB;EAChB,eAAoB;GAClB,gBAAgB;GAChB,IAAI,QAAQ,UAAU,MAAM,WAC1B,QAAQ,KAAK,EAAE,MAAM,aAAa,CAAC;EACvC,CAAC;CACH;CAGA,OAAO;EAAE;EAAS,KADN,eAAe,eAAe,SAAS,YAAY,CAC3C;EAAG;EAAU;EAAe;EAAY;CAAU;AACxE"}
+{"version":3,"file":"use-mention.js","names":[],"sources":["../../../src/components/mention/use-mention.ts"],"sourcesContent":["import type { MentionApi, MentionInputEl, MentionSchema } from '@xihan-ui/headless'\nimport type { Cleanup, Layer, RuntimeConfig } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectMention, mentionMachine } from '@xihan-ui/headless'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/kernel'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, nextTick, 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 MentionContext {\n  /** 机器实例，供部件直接上报 DOM 侧事实。 */\n  service: Service<MentionSchema>\n  api: ComputedRef<MentionApi>\n  /** 输入宿主，textarea 或 input；由 XhMentionInput 的 as 决定渲染成哪个。 */\n  inputRef: Ref<MentionInputEl | null>\n  positionerRef: Ref<HTMLElement | null>\n  contentRef: Ref<HTMLElement | null>\n  /** 此刻该不该渲染：退场动画播完之前仍为真。 */\n  visible: Ref<boolean>\n  /** 浮层搬到哪儿：全局配置的容器 > 运行时的浮层落点 > body。 */\n  portalTarget: ComputedRef<string | Element>\n  /** 上报候选集合可能变了；同一拍里多次调用只上报一次。 */\n  syncItems: () => void\n}\n\nexport function useMention(\n  props: MentionSchema['props'],\n  handlers: Pick<MentionSchema['props'], 'onValueChange' | 'onQueryChange' | 'onSelect' | 'onOpenChange'> = {},\n): MentionContext {\n  const xhConfig = useXhConfig()\n  const inputRef = ref<MentionInputEl | 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  const service = useMachine(mentionMachine, () => ({ ...props, ...handlers }), scope)\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      // 输入框记为本层分支：在正文里打字、点击都算层内交互，不该把浮层点没。\n      // 浮层壳一并记上：候选列表之外还浮着自绘滚动条，按住它拖动不该把列表消解掉\n      branches: () => [inputRef.value, positionerRef.value].filter(Boolean) as Element[],\n      isModal: () => false,\n      setModal: () => {},\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('getFloatingEl', () => positionerRef.value)\n    service.refs.set('getContentEl', () => contentRef.value)\n    service.refs.set('getInputEl', () => inputRef.value)\n  }\n\n  // 合并到下一拍统一上报，同时等待 DOM 落定\n  let syncScheduled = false\n  const syncItems = (): void => {\n    if (syncScheduled)\n      return\n    syncScheduled = true\n    void nextTick(() => {\n      syncScheduled = false\n      if (service.getStatus() === 'Started')\n        service.send({ type: 'ITEMS.SYNC' })\n    })\n  }\n\n  const api = computed(() => connectMention(service, vueNormalize))\n  // 退场闸门：收起从跟着 open 走，改成跟着 presence 走\n  const visible = useOverlayExit({ config, isOpen: () => api.value.open, contentRef })\n  // 全局配置写了容器就用它，否则落到运行时那个单一浮层落点；没有 DOM 时才回到 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n  return { visible, service, api, inputRef, positionerRef, contentRef, portalTarget, syncItems }\n}\n"],"mappings":";;;;;;;;;;AA8BA,SAAgB,WACd,OACA,WAA0G,CAAC,GAC3F;CAChB,MAAM,WAAW,YAAY;CAC7B,MAAM,WAAW,IAA2B,IAAI;CAChD,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,MAAM,UAAU,WAAW,uBAAuB;EAAE,GAAG;EAAO,GAAG;CAAS,IAAI,KAAK;CAGnF,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,SAAS,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GACpE,eAAe;GACf,gBAAgB,CAAC;GACjB,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,uBAAuB,cAAc,KAAK;EAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;EACvD,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;CACrD;CAGA,IAAI,gBAAgB;CACpB,MAAM,kBAAwB;EAC5B,IAAI,eACF;EACF,gBAAgB;EAChB,eAAoB;GAClB,gBAAgB;GAChB,IAAI,QAAQ,UAAU,MAAM,WAC1B,QAAQ,KAAK,EAAE,MAAM,aAAa,CAAC;EACvC,CAAC;CACH;CAEA,MAAM,MAAM,eAAe,eAAe,SAAS,YAAY,CAAC;CAMhE,OAAO;EAAE,SAJO,eAAe;GAAE;GAAQ,cAAc,IAAI,MAAM;GAAM;EAAW,CAInE;EAAG;EAAS;EAAK;EAAU;EAAe;EAAY,cAFhD,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAEzC;EAAG;CAAU;AAC/F"}

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

@@ -1,7 +1,15 @@
 import { MenuContext } from "./use-menu.js";
+import { ComputedRef } from "vue";
+import { MenuGroupProps } from "@xihan-ui/headless";
 //#region src/components/menu/context.d.ts
 declare function provideMenu(ctx: MenuContext): void;
 declare function useMenuContext(): MenuContext;
+/** 分组自报的身份，供分组标题取到同一个值（标题的 id 由它派生）。 */
+interface MenuGroupContext {
+  group: ComputedRef<MenuGroupProps>;
+}
+declare function provideMenuGroup(ctx: MenuGroupContext): void;
+declare function useMenuGroupContext(): MenuGroupContext;
 /** 选中链：任意层级的选中都汇到根——先发根的 select，再关根，各级子层随父关闭级联收起。 */
 interface MenuChain {
   notifySelect: (details: {
@@ -19,5 +27,5 @@ interface MenuSubHandle {
 declare function provideMenuSub(handle: MenuSubHandle): void;
 declare function useMenuSubContext(): MenuSubHandle;
 //#endregion
-export { MenuChain, MenuSubHandle, provideMenu, provideMenuChain, provideMenuSub, useMenuChain, useMenuContext, useMenuSubContext };
+export { MenuChain, MenuGroupContext, MenuSubHandle, provideMenu, provideMenuChain, provideMenuGroup, provideMenuSub, useMenuChain, useMenuContext, useMenuGroupContext, useMenuSubContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/menu/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/components/menu/context.ts"],"mappings":";;iBAMgB,YAAY,KAAK;iBAIjB,kBAAkB;;UAQjB;EACf,eAAe;IAAW;;;iBAKZ,iBAAiB,OAAO;iBAIxB,gBAAgB;;UAQf;EACf,QAAQ;EACR;EACA;;iBAKc,eAAe,QAAQ;iBAIvB,qBAAqB"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/components/menu/context.ts"],"mappings":";;;;iBAOgB,YAAY,KAAK;iBAIjB,kBAAkB;;UAQjB;EACf,OAAO,YAAY;;iBAKL,iBAAiB,KAAK;iBAItB,uBAAuB;;UAQtB;EACf,eAAe;IAAW;;;iBAKZ,iBAAiB,OAAO;iBAIxB,gBAAgB;;UAQf;EACf,QAAQ;EACR;EACA;;iBAKc,eAAe,QAAQ;iBAIvB,qBAAqB"}