@xihan-ui/vue 1.1.0 → 2.1.0

package/dist/components/matrix-code/matrix-code.js

@@ -0,0 +1,93 @@
+import { vueNormalize } from "../../runtime/normalize-props.js";
+import { slotPaints } from "../../runtime/slot-content.js";
+import { provideMatrixCode, useMatrixCodeContext } from "./context.js";
+import { computed, defineComponent, h, shallowRef } from "vue";
+import { connectMatrixCode } from "@xihan-ui/headless";
+//#region src/components/matrix-code/matrix-code.ts
+/**
+* 整张码绘制为一个 `<svg>`，`format` 选择码制；QR 下数据模块与三个码眼各成一条 `<path>`，其余码制只有前一条，静区依靠 viewBox 留出。
+* 矩阵由 connect 计算一次，这里只取现成的 path；没有可绘制的内容时不生成任何几何节点。
+*
+* 默认插槽中放置 XhMatrixCodeLogo 即在码面正中放置一块 logo：该片模块下方先铺一个底色矩形挖空，
+* 挖空排在插槽之前，logo 绘制在它上面。挖掉的码字超出所选 level 的纠错余量时，
+* connect 会向诊断通道报告一条警告，码照常绘制。
+*/
+const XhMatrixCode = defineComponent({
+	name: "XhMatrixCode",
+	props: {
+		format: { type: String },
+		value: { type: String },
+		gs1: {
+			type: Boolean,
+			default: void 0
+		},
+		level: { type: [String, Number] },
+		rectangular: {
+			type: Boolean,
+			default: void 0
+		},
+		columns: { type: Number },
+		pixelSize: { type: Number },
+		margin: { type: Number },
+		label: { type: String },
+		moduleShape: { type: String },
+		eyeShape: { type: String }
+	},
+	setup(props, { slots }) {
+		const hasLogo = shallowRef(false);
+		const api = computed(() => connectMatrixCode({
+			format: props.format,
+			value: props.value,
+			gs1: props.gs1,
+			level: props.level,
+			rectangular: props.rectangular,
+			columns: props.columns,
+			pixelSize: props.pixelSize,
+			margin: props.margin,
+			label: props.label,
+			moduleShape: props.moduleShape,
+			eyeShape: props.eyeShape,
+			logo: hasLogo.value
+		}, vueNormalize));
+		provideMatrixCode({ api });
+		return () => {
+			const content = slots.default?.() ?? [];
+			hasLogo.value = slotPaints(content);
+			const current = api.value;
+			const children = [];
+			if (current.path !== "") children.push(h("path", {
+				"data-xh-geom": "modules",
+				"d": current.path
+			}));
+			if (current.eyePath !== "") children.push(h("path", {
+				"data-xh-geom": "eyes",
+				"d": current.eyePath
+			}));
+			const area = current.logoArea;
+			if (area) children.push(h("rect", {
+				"data-xh-geom": "logo-clear",
+				"x": area.x,
+				"y": area.y,
+				"width": area.size,
+				"height": area.size
+			}));
+			children.push(...content);
+			return h("svg", current.getRootProps(), children);
+		};
+	}
+});
+/**
+* 码面正中的 logo：落位与尺寸由 connect 给出，作者只需放入图形。
+* 渲染为嵌套 `<svg>`，其中写 `width="100%" height="100%"` 即铺满该区域，溢出部分由它自身裁剪。
+*/
+const XhMatrixCodeLogo = defineComponent({
+	name: "XhMatrixCodeLogo",
+	setup(_, { slots }) {
+		const ctx = useMatrixCodeContext();
+		return () => h("svg", ctx.api.value.getLogoProps(), slots.default?.());
+	}
+});
+//#endregion
+export { XhMatrixCode, XhMatrixCodeLogo };
+
+//# sourceMappingURL=matrix-code.js.map

package/dist/components/matrix-code/matrix-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrix-code.js","names":[],"sources":["../../../src/components/matrix-code/matrix-code.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// 提供 matrix code 相关实现。\n\nimport type { MatrixCodeFormat, MatrixCodeLevel, MatrixCodeProps } from '@xihan-ui/headless'\nimport type { PropType, VNode } from 'vue'\nimport { connectMatrixCode } from '@xihan-ui/headless'\nimport { computed, defineComponent, h, shallowRef } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { slotPaints } from '../../runtime/slot-content'\nimport { provideMatrixCode, useMatrixCodeContext } from './context'\n\ntype ModuleShape = NonNullable<MatrixCodeProps['moduleShape']>\ntype EyeShape = NonNullable<MatrixCodeProps['eyeShape']>\n\n/**\n * 整张码绘制为一个 `<svg>`，`format` 选择码制；QR 下数据模块与三个码眼各成一条 `<path>`，其余码制只有前一条，静区依靠 viewBox 留出。\n * 矩阵由 connect 计算一次，这里只取现成的 path；没有可绘制的内容时不生成任何几何节点。\n *\n * 默认插槽中放置 XhMatrixCodeLogo 即在码面正中放置一块 logo：该片模块下方先铺一个底色矩形挖空，\n * 挖空排在插槽之前，logo 绘制在它上面。挖掉的码字超出所选 level 的纠错余量时，\n * connect 会向诊断通道报告一条警告，码照常绘制。\n */\nexport const XhMatrixCode = defineComponent({\n  name: 'XhMatrixCode',\n  // 缺省值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    format: { type: String as PropType<MatrixCodeFormat> },\n    value: { type: String },\n    // Boolean 显式保留 undefined：没给与给了 false 在 connect 里是两回事（rectangular 给了 qr 要报警告）\n    gs1: { type: Boolean, default: undefined },\n    // 取值域随码制：qr 是字母档，pdf417 是 0–8，aztec 是百分比\n    level: { type: [String, Number] as PropType<MatrixCodeLevel> },\n    rectangular: { type: Boolean, default: undefined },\n    columns: { type: Number },\n    pixelSize: { type: Number },\n    margin: { type: Number },\n    label: { type: String },\n    moduleShape: { type: String as PropType<ModuleShape> },\n    eyeShape: { type: String as PropType<EyeShape> },\n  },\n  setup(props, { slots }) {\n    // 插槽里有没有东西是渲染期才知道的事实，进不了 computed 的依赖：先落到 ref 上，再让 api 依赖这个 ref。\n    // 值没变时写入是空操作，不会多排一帧。\n    const hasLogo = shallowRef(false)\n    const api = computed(() => connectMatrixCode({\n      format: props.format,\n      value: props.value,\n      gs1: props.gs1,\n      level: props.level,\n      rectangular: props.rectangular,\n      columns: props.columns,\n      pixelSize: props.pixelSize,\n      margin: props.margin,\n      label: props.label,\n      moduleShape: props.moduleShape,\n      eyeShape: props.eyeShape,\n      logo: hasLogo.value,\n    } satisfies MatrixCodeProps, vueNormalize))\n    provideMatrixCode({ api })\n\n    return () => {\n      const content = slots.default?.() ?? []\n      // 插槽里只剩注释或空白时不算放了 logo：挖空是拿底色盖住一片模块，白挖一块就是白毁一片\n      hasLogo.value = slotPaints(content)\n\n      const current = api.value\n      const children: VNode[] = []\n      if (current.path !== '')\n        children.push(h('path', { 'data-xh-geom': 'modules', 'd': current.path }))\n      if (current.eyePath !== '')\n        children.push(h('path', { 'data-xh-geom': 'eyes', 'd': current.eyePath }))\n      const area = current.logoArea\n      if (area)\n        children.push(h('rect', { 'data-xh-geom': 'logo-clear', 'x': area.x, 'y': area.y, 'width': area.size, 'height': area.size }))\n      children.push(...content)\n\n      return h('svg', current.getRootProps() as Record<string, unknown>, children)\n    }\n  },\n})\n\n/**\n * 码面正中的 logo：落位与尺寸由 connect 给出，作者只需放入图形。\n * 渲染为嵌套 `<svg>`，其中写 `width=\"100%\" height=\"100%\"` 即铺满该区域，溢出部分由它自身裁剪。\n */\nexport const XhMatrixCodeLogo = defineComponent({\n  name: 'XhMatrixCodeLogo',\n  setup(_, { slots }) {\n    const ctx = useMatrixCodeContext()\n    return () => h('svg', ctx.api.value.getLogoProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAa,eAAe,gBAAgB;CAC1C,MAAM;CAEN,OAAO;EACL,QAAQ,EAAE,MAAM,OAAqC;EACrD,OAAO,EAAE,MAAM,OAAO;EAEtB,KAAK;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAEzC,OAAO,EAAE,MAAM,CAAC,QAAQ,MAAM,EAA+B;EAC7D,aAAa;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EACjD,SAAS,EAAE,MAAM,OAAO;EACxB,WAAW,EAAE,MAAM,OAAO;EAC1B,QAAQ,EAAE,MAAM,OAAO;EACvB,OAAO,EAAE,MAAM,OAAO;EACtB,aAAa,EAAE,MAAM,OAAgC;EACrD,UAAU,EAAE,MAAM,OAA6B;CACjD;CACA,MAAM,OAAO,EAAE,SAAS;EAGtB,MAAM,UAAU,WAAW,KAAK;EAChC,MAAM,MAAM,eAAe,kBAAkB;GAC3C,QAAQ,MAAM;GACd,OAAO,MAAM;GACb,KAAK,MAAM;GACX,OAAO,MAAM;GACb,aAAa,MAAM;GACnB,SAAS,MAAM;GACf,WAAW,MAAM;GACjB,QAAQ,MAAM;GACd,OAAO,MAAM;GACb,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,MAAM,QAAQ;EAChB,GAA6B,YAAY,CAAC;EAC1C,kBAAkB,EAAE,IAAI,CAAC;EAEzB,aAAa;GACX,MAAM,UAAU,MAAM,UAAU,KAAK,CAAC;GAEtC,QAAQ,QAAQ,WAAW,OAAO;GAElC,MAAM,UAAU,IAAI;GACpB,MAAM,WAAoB,CAAC;GAC3B,IAAI,QAAQ,SAAS,IACnB,SAAS,KAAK,EAAE,QAAQ;IAAE,gBAAgB;IAAW,KAAK,QAAQ;GAAK,CAAC,CAAC;GAC3E,IAAI,QAAQ,YAAY,IACtB,SAAS,KAAK,EAAE,QAAQ;IAAE,gBAAgB;IAAQ,KAAK,QAAQ;GAAQ,CAAC,CAAC;GAC3E,MAAM,OAAO,QAAQ;GACrB,IAAI,MACF,SAAS,KAAK,EAAE,QAAQ;IAAE,gBAAgB;IAAc,KAAK,KAAK;IAAG,KAAK,KAAK;IAAG,SAAS,KAAK;IAAM,UAAU,KAAK;GAAK,CAAC,CAAC;GAC9H,SAAS,KAAK,GAAG,OAAO;GAExB,OAAO,EAAE,OAAO,QAAQ,aAAa,GAA8B,QAAQ;EAC7E;CACF;AACF,CAAC;;;;;AAMD,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU,CAAC;CAClG;AACF,CAAC"}

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

@@ -2,7 +2,7 @@ import { MentionContext } from "./use-mention.js";
 import { ComputedRef } from "vue";
 import { MentionItemProps } from "@xihan-ui/headless";
 //#region src/components/mention/context.d.ts
-/** 候选自报的值与禁用，供 item-text 复用同一份声明。 */
+/** 候选声明的值与禁用，供 item-text 复用同一份声明。 */
 interface MentionItemContext {
   item: ComputedRef<MentionItemProps>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/components/mention/context.ts"],"mappings":";;;;;UAMiB;EACf,MAAM,YAAY;;iBAMJ,eAAe,KAAK;iBAIpB,qBAAqB;iBAOrB,mBAAmB,KAAK;iBAIxB,yBAAyB"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/components/mention/context.ts"],"mappings":";;;;;UAaiB;EACf,MAAM,YAAY;;iBAMJ,eAAe,KAAK;iBAIpB,qBAAqB;iBAOrB,mBAAmB,KAAK;iBAIxB,yBAAyB"}

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.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"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/mention/context.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// 提供 context 相关实现。\n\nimport 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":";;AAiBA,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

@@ -1,62 +1,68 @@
 import { PayloadOf } from "../../runtime/payload.js";
 import { PropType, SlotsType, VNode } from "vue";
-import { MentionApi, MentionInputHost, MentionNode, MentionNodeMeta, MentionSchema, MentionTranslations } from "@xihan-ui/headless";
-import { ControlVariant, Placement, Size, Tone } from "@xihan-ui/kernel";
+import { ControlVariant, Direction, Placement, Size, Tone } from "@xihan-ui/core";
+import { MentionApi, MentionNode, MentionNodeMeta, MentionSchema, MentionTranslations } from "@xihan-ui/headless";
 //#region src/components/mention/mention.d.ts
 type MentionProps = MentionSchema['props'];
 /** 默认插槽的载荷：浮层开合、正文与查询串、高亮候选，以及改写正文与收起浮层的句柄。 */
 type MentionRootSlotProps = Pick<MentionApi, 'open' | 'value' | 'query' | 'activePrefix' | 'highlightedValue' | 'setValue' | 'close'>;
 declare const XhMentionRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  prefix: {
+  triggerPrefix: {
     type: PropType<string | string[]>;
-    default: undefined;
   };
   collection: {
     type: PropType<MentionNode[]>;
-    default: undefined;
   };
   value: {
     type: StringConstructor;
-    default: undefined;
   };
   defaultValue: {
     type: StringConstructor;
+  };
+  disabled: {
+    type: BooleanConstructor;
     default: undefined;
   };
-  disabled: BooleanConstructor;
-  readOnly: BooleanConstructor;
-  invalid: BooleanConstructor;
-  placeholder: {
+  loading: BooleanConstructor;
+  name: {
     type: StringConstructor;
+  };
+  readOnly: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  invalid: {
+    type: BooleanConstructor;
     default: undefined;
   };
+  placeholder: {
+    type: StringConstructor;
+  };
   loop: {
     type: BooleanConstructor;
     default: undefined;
   };
   placement: {
     type: PropType<Placement>;
-    default: undefined;
   };
   offset: {
     type: NumberConstructor;
-    default: undefined;
+  };
+  /** 文字方向；浮层迁移到落点后无法继承作者子树上的方向，需要 RTL 时显式提供。 */
+  dir: {
+    type: PropType<Direction>;
   };
   translations: {
     type: PropType<MentionTranslations>;
-    default: undefined;
   };
   variant: {
     type: PropType<ControlVariant>;
-    default: undefined;
   };
   tone: {
     type: PropType<Tone>;
-    default: undefined;
   };
   size: {
     type: PropType<Size>;
-    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
@@ -67,56 +73,62 @@ declare const XhMentionRoot: import("vue").DefineComponent<import("vue").Extract
   'open-change': (_details: PayloadOf<MentionProps, "onOpenChange">) => true;
   'update:value': (_value: PayloadOf<MentionProps, "onValueChange">["value"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  prefix: {
+  triggerPrefix: {
     type: PropType<string | string[]>;
-    default: undefined;
   };
   collection: {
     type: PropType<MentionNode[]>;
-    default: undefined;
   };
   value: {
     type: StringConstructor;
-    default: undefined;
   };
   defaultValue: {
     type: StringConstructor;
+  };
+  disabled: {
+    type: BooleanConstructor;
     default: undefined;
   };
-  disabled: BooleanConstructor;
-  readOnly: BooleanConstructor;
-  invalid: BooleanConstructor;
-  placeholder: {
+  loading: BooleanConstructor;
+  name: {
     type: StringConstructor;
+  };
+  readOnly: {
+    type: BooleanConstructor;
     default: undefined;
   };
+  invalid: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  placeholder: {
+    type: StringConstructor;
+  };
   loop: {
     type: BooleanConstructor;
     default: undefined;
   };
   placement: {
     type: PropType<Placement>;
-    default: undefined;
   };
   offset: {
     type: NumberConstructor;
-    default: undefined;
+  };
+  /** 文字方向；浮层迁移到落点后无法继承作者子树上的方向，需要 RTL 时显式提供。 */
+  dir: {
+    type: PropType<Direction>;
   };
   translations: {
     type: PropType<MentionTranslations>;
-    default: undefined;
   };
   variant: {
     type: PropType<ControlVariant>;
-    default: undefined;
   };
   tone: {
     type: PropType<Tone>;
-    default: undefined;
   };
   size: {
     type: PropType<Size>;
-    default: undefined;
   };
 }>> & Readonly<{
   onSelect?: ((_details: import("@xihan-ui/headless").MentionSelectDetails) => any) | undefined;
@@ -126,52 +138,51 @@ declare const XhMentionRoot: import("vue").DefineComponent<import("vue").Extract
   "onQuery-change"?: ((_details: import("@xihan-ui/headless").MentionQueryChangeDetails) => any) | undefined;
 }>, {
   invalid: boolean;
-  value: string;
-  collection: MentionNode[];
-  defaultValue: string;
-  tone: Tone;
-  size: Size;
+  loop: boolean;
   disabled: boolean;
-  translations: MentionTranslations;
-  offset: number;
+  loading: boolean;
   readOnly: boolean;
-  prefix: string | string[];
-  placeholder: string;
-  loop: boolean;
-  placement: Placement;
-  variant: ControlVariant;
 }, SlotsType<{
   default?: (props: MentionRootSlotProps) => VNode[];
   /** 铺开 collection 时每条候选的文本插槽。 */
   item?: (props: MentionNodeMeta) => VNode[];
+  /** 只接管行首那一格，其余槽照旧由数据铺 */
+  'item-prefix'?: (props: MentionNodeMeta) => VNode[];
+  /** 只接管行尾那一格（计数、徽标、次级图标），其余槽照旧由数据铺 */
+  'item-suffix'?: (props: MentionNodeMeta) => VNode[];
+  /** 铺开 collection 时空态中的文案；未写时使用内建英文。 */
+  empty?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhMentionInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  /**
-   * 输入框渲染成哪个标签，默认 textarea。
-   * 写 input 即单行宿主：connect 随之补上 type、role 与 aria-expanded。
-   */
-  as: {
-    type: PropType<MentionInputHost>;
-    default: string;
+/** 标题；必须是原生 label，getLabelProps 的 for 恒指向输入框。 */
+declare const XhMentionLabel: 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 XhMentionInput: 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 XhMentionPositioner: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 本实例的 Portal 容器；优先于应用级配置。 */
+  container: {
+    type: PropType<Element>;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  /**
-   * 输入框渲染成哪个标签，默认 textarea。
-   * 写 input 即单行宿主：connect 随之补上 type、role 与 aria-expanded。
-   */
-  as: {
-    type: PropType<MentionInputHost>;
-    default: string;
+  /** 本实例的 Portal 容器；优先于应用级配置。 */
+  container: {
+    type: PropType<Element>;
   };
-}>> & Readonly<{}>, {
-  as: MentionInputHost;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhMentionPositioner: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhMentionContent: 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 XhMentionContent: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+/** 没有任何候选时显示的空态；与候选面板同级。 */
+declare const XhMentionEmpty: 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 XhMentionLoading: 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 XhMentionItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -200,6 +211,18 @@ declare const XhMentionItem: import("vue").DefineComponent<import("vue").Extract
 declare const XhMentionItemText: 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 XhMentionItemPrefix: 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 XhMentionItemSuffix: 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>;
+/** 条目的第 2 行副文本，跨文字槽、走 muted 档 */
+declare const XhMentionItemDescription: 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>;
 //#endregion
-export { MentionRootSlotProps, XhMentionContent, XhMentionInput, XhMentionItem, XhMentionItemText, XhMentionPositioner, XhMentionRoot };
+export { MentionRootSlotProps, XhMentionContent, XhMentionEmpty, XhMentionInput, XhMentionItem, XhMentionItemDescription, XhMentionItemPrefix, XhMentionItemSuffix, XhMentionItemText, XhMentionLabel, XhMentionLoading, XhMentionPositioner, XhMentionRoot };
 //# sourceMappingURL=mention.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"mention.d.ts","names":[],"sources":["../../../src/components/mention/mention.ts"],"mappings":";;;;;KAoBK,eAAe;;KAGR,uBAAuB,KACjC;cAUW,6BAAa,8BAAA;;IAIoB,MAAA;;;IACb,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAUT,MAAA,SAAS;;;;;;;IAGf,MAAA,SAAS;;;IACA,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;;;IA1BO,MAAA;;;IACb,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAUT,MAAA,SAAS;;;;;;;IAGf,MAAA,SAAS;;;IACA,MAAA,SAAS;;;IACd,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;;;;EAWrB,WAAC,OAAO,yBAAyB;;EAEpC,QAAC,OAAO,oBAAoB;;EAErB,iBAAC,OAAO,oBAAoB;;EAE5B,iBAAC,OAAO,oBAAoB;;EAElC,cAAM;kCAyClB;;cAGW,8BAAc,0BAAA,oBAAA,4BAAA;;8BAMzB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,8BAAc,0BAAA,oBAAA,4BAAA;;8BAczB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,8BAAA;;;IAIC,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;MAgBxC,oDAAA;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAY3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,8BAAc,0BAAA,oBAAA,4BAAA;;8BAMzB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAM3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,6BAAa,8BAAA;;;;;;;;;;;;;;;;;;;;;;qCAkBxB;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAO5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAOnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/mention/mention.js

@@ -1,64 +1,46 @@
 import { withXhConfig } from "../../config/config.js";
+import { XhPortal } from "../../runtime/portal.js";
 import { useScrollbars } from "../../runtime/use-scrollbars.js";
+import { useFormControlProps } from "../form/use-form-control.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 { Teleport, computed, defineComponent, h, mergeProps, onMounted, onUnmounted, onUpdated, watch } from "vue";
+import { computed, defineComponent, h, mergeProps, onMounted, onUnmounted, onUpdated, watch } from "vue";
 //#region src/components/mention/mention.ts
 const XhMentionRoot = defineComponent({
 	name: "XhMentionRoot",
 	props: {
-		prefix: {
-			type: [String, Array],
-			default: void 0
-		},
-		collection: {
-			type: Array,
-			default: void 0
-		},
-		value: {
-			type: String,
+		triggerPrefix: { type: [String, Array] },
+		collection: { type: Array },
+		value: { type: String },
+		defaultValue: { type: String },
+		disabled: {
+			type: Boolean,
 			default: void 0
 		},
-		defaultValue: {
-			type: String,
+		loading: Boolean,
+		name: { type: String },
+		readOnly: {
+			type: Boolean,
 			default: void 0
 		},
-		disabled: Boolean,
-		readOnly: Boolean,
-		invalid: Boolean,
-		placeholder: {
-			type: String,
+		invalid: {
+			type: Boolean,
 			default: void 0
 		},
+		placeholder: { type: String },
 		loop: {
 			type: Boolean,
 			default: void 0
 		},
-		placement: {
-			type: String,
-			default: void 0
-		},
-		offset: {
-			type: Number,
-			default: void 0
-		},
-		translations: {
-			type: Object,
-			default: void 0
-		},
-		variant: {
-			type: String,
-			default: void 0
-		},
-		tone: {
-			type: String,
-			default: void 0
-		},
-		size: {
-			type: String,
-			default: void 0
-		}
+		placement: { type: String },
+		offset: { type: Number },
+		/** 文字方向；浮层迁移到落点后无法继承作者子树上的方向，需要 RTL 时显式提供。 */
+		dir: { type: String },
+		translations: { type: Object },
+		variant: { type: String },
+		tone: { type: String },
+		size: { type: String }
 	},
 	emits: {
 		"value-change": (_details) => true,
@@ -76,7 +58,7 @@ const XhMentionRoot = defineComponent({
 		const notifyQuery = (details) => emit("query-change", details);
 		const notifySelect = (details) => emit("select", details);
 		const notifyOpen = (details) => emit("open-change", details);
-		const ctx = useMention(withXhConfig("mention", props), {
+		const ctx = useMention(withXhConfig("mention", useFormControlProps(props)), {
 			onValueChange: notifyValue,
 			onQueryChange: notifyQuery,
 			onSelect: notifySelect,
@@ -93,40 +75,49 @@ const XhMentionRoot = defineComponent({
 			highlightedValue: ctx.api.value.highlightedValue,
 			setValue: ctx.api.value.setValue,
 			close: ctx.api.value.close
-		}) : props.collection ? renderDefaultTree(ctx.api.value.collection, slots.item) : []);
+		}) : props.collection ? renderDefaultTree(ctx.api.value.collection, slots.item, slots["item-prefix"], slots["item-suffix"], slots.empty) : []);
 	}
 });
+/** 标题；必须是原生 label，getLabelProps 的 for 恒指向输入框。 */
+const XhMentionLabel = defineComponent({
+	name: "XhMentionLabel",
+	setup(_, { slots }) {
+		const ctx = useMentionContext();
+		return () => h("label", ctx.api.value.getLabelProps(), slots.default?.());
+	}
+});
+/** 单行输入框；正文写在它上面，候选浮层贴着它落位。 */
 const XhMentionInput = defineComponent({
 	name: "XhMentionInput",
-	props: { 
-	/**
-	* 输入框渲染成哪个标签，默认 textarea。
-	* 写 input 即单行宿主：connect 随之补上 type、role 与 aria-expanded。
-	*/
-as: {
-		type: String,
-		default: "textarea"
-	} },
-	setup(props) {
+	setup() {
 		const fieldWiring = useFieldStateWiring();
 		const fieldLabel = useFieldLabelWiring();
 		const ctx = useMentionContext();
-		return () => h(props.as, fieldLabel.value({
-			...ctx.api.value.getInputProps({ as: props.as }),
+		return () => h("input", fieldLabel.value({
+			...fieldWiring.value,
+			...ctx.api.value.getInputProps(),
 			ref: (el) => {
 				ctx.inputRef.value = el;
-			},
-			...fieldWiring.value
+			}
 		}));
 	}
 });
 const XhMentionPositioner = defineComponent({
 	name: "XhMentionPositioner",
+	props: { 
+	/** 本实例的 Portal 容器；优先于应用级配置。 */
+container: { type: Object } },
 	inheritAttrs: false,
-	setup(_, { slots, attrs }) {
+	setup(props, { slots, attrs }) {
 		const ctx = useMentionContext();
-		const bars = useScrollbars({ scrollable: () => ctx.contentRef.value });
-		return () => h(Teleport, { to: ctx.portalTarget.value }, [h("div", {
+		const bars = useScrollbars({
+			scrollable: () => ctx.contentRef.value,
+			props: { size: "sm" }
+		});
+		return () => h(XhPortal, {
+			to: props.container ?? ctx.portalTarget.value,
+			source: ctx.inputRef
+		}, () => [h("div", {
 			...mergeProps(ctx.api.value.getPositionerProps(), attrs),
 			ref: (el) => {
 				ctx.positionerRef.value = el;
@@ -147,6 +138,22 @@ const XhMentionContent = defineComponent({
 		}, slots.default?.());
 	}
 });
+/** 没有任何候选时显示的空态；与候选面板同级。 */
+const XhMentionEmpty = defineComponent({
+	name: "XhMentionEmpty",
+	setup(_, { slots }) {
+		const ctx = useMentionContext();
+		return () => h("div", ctx.api.value.getEmptyProps(), slots.default?.());
+	}
+});
+/** 候选仍在获取时显示的在途占位；与候选面板同级。 */
+const XhMentionLoading = defineComponent({
+	name: "XhMentionLoading",
+	setup(_, { slots }) {
+		const ctx = useMentionContext();
+		return () => h("div", ctx.api.value.getLoadingProps(), slots.default?.());
+	}
+});
 const XhMentionItem = defineComponent({
 	name: "XhMentionItem",
 	props: {
@@ -180,18 +187,51 @@ const XhMentionItemText = defineComponent({
 		return () => h("span", ctx.api.value.getItemTextProps(item.value), slots.default?.());
 	}
 });
+/** 条目行首的作者内容（图标、色块、头像），对读屏隐藏 */
+const XhMentionItemPrefix = defineComponent({
+	name: "XhMentionItemPrefix",
+	setup(_, { slots }) {
+		const ctx = useMentionContext();
+		const { item } = useMentionItemContext();
+		return () => h("span", ctx.api.value.getItemPrefixProps(item.value), slots.default?.());
+	}
+});
+/** 条目行尾的作者内容（计数、徽标） */
+const XhMentionItemSuffix = defineComponent({
+	name: "XhMentionItemSuffix",
+	setup(_, { slots }) {
+		const ctx = useMentionContext();
+		const { item } = useMentionItemContext();
+		return () => h("span", ctx.api.value.getItemSuffixProps(item.value), slots.default?.());
+	}
+});
+/** 条目的第 2 行副文本，跨文字槽、走 muted 档 */
+const XhMentionItemDescription = defineComponent({
+	name: "XhMentionItemDescription",
+	setup(_, { slots }) {
+		const ctx = useMentionContext();
+		const { item } = useMentionItemContext();
+		return () => h("span", ctx.api.value.getItemDescriptionProps(item.value), slots.default?.());
+	}
+});
 /**
-* 没写默认插槽时按 collection 铺开的整套结构，作者只交数据。
-* 与手写部件产出的 DOM 完全一致，要改结构就写默认插槽，行为不变。
-* 过滤仍归调用方：collection 就是此刻该显示的那几条候选。
+* 未写默认插槽时按 collection 铺开的整套结构，作者只提供数据。
+* 与手写部件产出的 DOM 完全一致，需要修改结构时写默认插槽，行为不变。
+* 过滤仍归调用方：collection 就是当前应显示的候选。
 */
-function renderDefaultTree(collection, itemSlot) {
+function renderDefaultTree(collection, itemSlot, prefixSlot, suffixSlot, emptySlot) {
+	const emptyText = emptySlot?.() ?? "No results";
 	return [h(XhMentionInput), h(XhMentionPositioner, null, () => [h(XhMentionContent, null, () => collection.map((node) => h(XhMentionItem, {
 		key: node.value,
 		value: node.value
-	}, () => [h(XhMentionItemText, null, () => itemSlot?.(node) ?? node.label)])))])];
+	}, () => [
+		...prefixSlot ? [h(XhMentionItemPrefix, null, () => prefixSlot(node))] : [],
+		h(XhMentionItemText, null, () => itemSlot?.(node) ?? node.label),
+		...node.description != null ? [h(XhMentionItemDescription, null, () => node.description)] : [],
+		...suffixSlot ? [h(XhMentionItemSuffix, null, () => suffixSlot(node))] : []
+	]))), h(XhMentionEmpty, null, () => emptyText)])];
 }
 //#endregion
-export { XhMentionContent, XhMentionInput, XhMentionItem, XhMentionItemText, XhMentionPositioner, XhMentionRoot };
+export { XhMentionContent, XhMentionEmpty, XhMentionInput, XhMentionItem, XhMentionItemDescription, XhMentionItemPrefix, XhMentionItemSuffix, XhMentionItemText, XhMentionLabel, XhMentionLoading, XhMentionPositioner, XhMentionRoot };
 
 //# sourceMappingURL=mention.js.map