@xihan-ui/vue 4.2.0 → 5.0.0

package/dist/components/format-input/format-input.js

@@ -0,0 +1,189 @@
+import { renderStructure } from "../../runtime/structure.js";
+import { withXhConfig } from "../../config/config.js";
+import { useFormControlProps } from "../form/use-form-control.js";
+import { useFieldGroupWiring, useFieldLabelWiring } from "../field/use-field-control.js";
+import { XhComboboxRoot } from "../combobox/combobox.js";
+import { XhNumberFieldRoot } from "../number-field/number-field.js";
+import { XhSelectRoot } from "../select/select.js";
+import { XhSwitch } from "../switch/switch.js";
+import { XhToggleGroupRoot } from "../toggle-group/toggle-group.js";
+import { provideFormatInput, useFormatInputContext } from "./context.js";
+import { useFormatInput } from "./use-format-input.js";
+import { formatInputItemLabelTag, formatInputItemTag, formatInputStructure } from "@xihan-ui/headless";
+import { defineComponent, h, onUnmounted } from "vue";
+//#region src/components/format-input/format-input.ts
+const XhFormatInputRoot = defineComponent({
+	name: "XhFormatInputRoot",
+	props: {
+		/** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+		ariaLabel: { type: String },
+		value: { type: Object },
+		defaultValue: { type: Object },
+		kinds: { type: Array },
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		/** 几个对象的取值各不相同：种类一项都不选、下拉显示「多个值」，选了种类即派发。 */
+		mixed: {
+			type: Boolean,
+			default: void 0
+		},
+		datePatterns: { type: Array },
+		sample: { type: null },
+		locale: { type: String },
+		timeZone: { type: String },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readOnly: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		variant: { type: String },
+		size: { type: String },
+		translations: { type: Object }
+	},
+	emits: {
+		"value-change": (_details) => true,
+		"update:value": (_value) => true
+	},
+	slots: Object,
+	setup(props, { slots, emit }) {
+		const notify = (details) => {
+			emit("value-change", details);
+			emit("update:value", details.value);
+		};
+		const ctx = useFormatInput(withXhConfig("format-input", useFormControlProps(props)), notify);
+		provideFormatInput(ctx);
+		const fieldWiring = useFieldGroupWiring();
+		const fieldLabel = useFieldLabelWiring();
+		return () => {
+			const api = ctx.api.value;
+			return h("div", fieldLabel.value({
+				...fieldWiring.value,
+				...api.getRootProps()
+			}), slots.default ? slots.default({
+				value: api.value,
+				kind: api.kind,
+				draft: api.draft,
+				issue: api.issue,
+				issueText: api.issueText,
+				previewText: api.previewText,
+				options: api.options,
+				kindItems: api.kindItems,
+				kindControl: api.kindControl,
+				setKind: api.setKind,
+				setDecimalsMode: api.setDecimalsMode,
+				setDecimals: api.setDecimals,
+				setGrouping: api.setGrouping,
+				setRounding: api.setRounding,
+				setPattern: api.setPattern,
+				setNumeralStyle: api.setNumeralStyle
+			}) : renderDefaultStructure(api, ctx.translations.value));
+		};
+	}
+});
+const XhFormatInputLabel = defineComponent({
+	name: "XhFormatInputLabel",
+	setup(_, { slots }) {
+		const ctx = useFormatInputContext();
+		ctx.labelCount.value++;
+		onUnmounted(() => {
+			ctx.labelCount.value--;
+		});
+		return () => h("span", ctx.api.value.getLabelProps(), slots.default?.());
+	}
+});
+const XhFormatInputKind = defineComponent({
+	name: "XhFormatInputKind",
+	setup(_, { slots }) {
+		const ctx = useFormatInputContext();
+		return () => h(formatInputItemTag("kind", ctx.api.value.kindControl), ctx.api.value.getKindProps(), slots.default?.());
+	}
+});
+const XhFormatInputFieldGroup = defineComponent({
+	name: "XhFormatInputFieldGroup",
+	setup(_, { slots }) {
+		const ctx = useFormatInputContext();
+		return () => h("div", ctx.api.value.getFieldGroupProps(), slots.default?.());
+	}
+});
+const XhFormatInputItem = defineComponent({
+	name: "XhFormatInputItem",
+	props: { 
+	/** 参数名：decimals-mode、decimals、min-decimals、max-decimals、grouping、rounding、pattern、numeral-style。 */
+value: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		const ctx = useFormatInputContext();
+		return () => h(formatInputItemTag(props.value, ctx.api.value.kindControl), ctx.api.value.getItemProps(props.value), slots.default?.());
+	}
+});
+const XhFormatInputItemLabel = defineComponent({
+	name: "XhFormatInputItemLabel",
+	props: { 
+	/** 名字所属的那一行：参数名，或 kind。 */
+value: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		const ctx = useFormatInputContext();
+		return () => h(formatInputItemLabelTag(props.value, ctx.api.value.kindControl), ctx.api.value.getItemLabelProps(props.value), slots.default?.());
+	}
+});
+const XhFormatInputPatternDescription = defineComponent({
+	name: "XhFormatInputPatternDescription",
+	setup(_, { slots }) {
+		const ctx = useFormatInputContext();
+		return () => h("p", ctx.api.value.getPatternDescriptionProps(), slots.default?.());
+	}
+});
+const XhFormatInputPreview = defineComponent({
+	name: "XhFormatInputPreview",
+	setup(_, { slots }) {
+		const ctx = useFormatInputContext();
+		return () => h("div", ctx.api.value.getPreviewProps(), slots.default?.() ?? ctx.api.value.previewText);
+	}
+});
+const XhFormatInputErrorText = defineComponent({
+	name: "XhFormatInputErrorText",
+	setup(_, { slots }) {
+		const ctx = useFormatInputContext();
+		return () => h("p", ctx.api.value.getErrorTextProps(), slots.default?.() ?? ctx.api.value.issueText);
+	}
+});
+/** 标准结构里各部件对应的组件。 */
+const FORMAT_INPUT_PARTS = {
+	"kind": XhFormatInputKind,
+	"field-group": XhFormatInputFieldGroup,
+	"item": XhFormatInputItem,
+	"item-label": XhFormatInputItemLabel,
+	"pattern-description": XhFormatInputPatternDescription,
+	"preview": XhFormatInputPreview,
+	"error-text": XhFormatInputErrorText
+};
+/** 标准结构里组合进来的组件：与 Web Components 元素的 static dependencies 是同一份清单。 */
+const FORMAT_INPUT_INSTANCES = {
+	"combobox": XhComboboxRoot,
+	"number-field": XhNumberFieldRoot,
+	"select": XhSelectRoot,
+	"switch": XhSwitch,
+	"toggle-group": XhToggleGroupRoot
+};
+/** 未写默认插槽时铺开的整套结构：照 headless 的 formatInputStructure 渲，与 Web Components 不写部件时元素生成的节点出自同一份。 */
+function renderDefaultStructure(api, translations) {
+	return renderStructure(formatInputStructure(api, translations), FORMAT_INPUT_PARTS, void 0, FORMAT_INPUT_INSTANCES);
+}
+//#endregion
+export { XhFormatInputErrorText, XhFormatInputFieldGroup, XhFormatInputItem, XhFormatInputItemLabel, XhFormatInputKind, XhFormatInputLabel, XhFormatInputPatternDescription, XhFormatInputPreview, XhFormatInputRoot };
+
+//# sourceMappingURL=format-input.js.map

package/dist/components/format-input/format-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-input.js","names":[],"sources":["../../../src/components/format-input/format-input.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// 提供 format input 相关实现。\n\nimport type { ControlVariant, Size } from '@xihan-ui/core'\nimport type { FormatSpec } from '@xihan-ui/expression'\nimport type { FormatInputApi, FormatInputKind, FormatInputOption, FormatInputSchema, FormatInputTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { formatInputItemLabelTag, formatInputItemTag, formatInputStructure } from '@xihan-ui/headless'\nimport { defineComponent, h, onUnmounted } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { renderStructure } from '../../runtime/structure'\nimport { XhComboboxRoot } from '../combobox/combobox'\nimport { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { XhNumberFieldRoot } from '../number-field/number-field'\nimport { XhSelectRoot } from '../select/select'\nimport { XhSwitch } from '../switch/switch'\nimport { XhToggleGroupRoot } from '../toggle-group/toggle-group'\nimport { provideFormatInput, useFormatInputContext } from './context'\nimport { useFormatInput } from './use-format-input'\n\ntype FormatInputProps = FormatInputSchema['props']\n\n/** 默认插槽的载荷：当前值、草稿、问题与改参数的方法。 */\nexport type FormatInputRootSlotProps = Pick<\n  FormatInputApi,\n  'value' | 'kind' | 'draft' | 'issue' | 'issueText' | 'previewText' | 'options' | 'kindItems' | 'kindControl' | 'setKind' | 'setDecimalsMode' | 'setDecimals' | 'setGrouping' | 'setRounding' | 'setPattern' | 'setNumeralStyle'\n>\n\nexport const XhFormatInputRoot = defineComponent({\n  name: 'XhFormatInputRoot',\n  props: {\n    /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */\n    ariaLabel: { type: String },\n    // 缺席值 undefined 表示非受控；null 表示不设格式\n    value: { type: Object as PropType<FormatSpec | null> },\n    defaultValue: { type: Object as PropType<FormatSpec | null> },\n    kinds: { type: Array as PropType<readonly FormatInputKind[]> },\n    // undefined 才表示「本实例没说」，缺省 true\n    clearable: { type: Boolean, default: undefined },\n    /** 几个对象的取值各不相同：种类一项都不选、下拉显示「多个值」，选了种类即派发。 */\n    mixed: { type: Boolean, default: undefined },\n    datePatterns: { type: Array as PropType<readonly string[]> },\n    sample: { type: null as unknown as PropType<unknown> },\n    locale: { type: String },\n    timeZone: { type: String },\n    // undefined 才表示「本实例没说」，Form/Field 才能安全地下传状态；false 是显式顶掉继承。\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    variant: { type: String as PropType<ControlVariant> },\n    size: { type: String as PropType<Size> },\n    translations: { type: Object as PropType<FormatInputProps['translations']> },\n  },\n  // value-change 携带 { value }，update:value 携带格式说明本身\n  emits: {\n    'value-change': (_details: PayloadOf<FormatInputProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<FormatInputProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FormatInputRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: FormatInputProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const ctx = useFormatInput(withXhConfig('format-input', useFormControlProps(props)) as FormatInputProps, notify)\n    provideFormatInput(ctx)\n    // 放进表单字段时，字段的标题与说明接到组上：读屏进组时念组名与说明\n    const fieldWiring = useFieldGroupWiring()\n    const fieldLabel = useFieldLabelWiring()\n    return () => {\n      const api = ctx.api.value\n      return h('div', fieldLabel.value({ ...fieldWiring.value, ...api.getRootProps() as Record<string, unknown> }), slots.default\n        ? slots.default({\n            value: api.value,\n            kind: api.kind,\n            draft: api.draft,\n            issue: api.issue,\n            issueText: api.issueText,\n            previewText: api.previewText,\n            options: api.options,\n            kindItems: api.kindItems,\n            kindControl: api.kindControl,\n            setKind: api.setKind,\n            setDecimalsMode: api.setDecimalsMode,\n            setDecimals: api.setDecimals,\n            setGrouping: api.setGrouping,\n            setRounding: api.setRounding,\n            setPattern: api.setPattern,\n            setNumeralStyle: api.setNumeralStyle,\n          })\n        : renderDefaultStructure(api, ctx.translations.value))\n    }\n  },\n})\n\nexport const XhFormatInputLabel = defineComponent({\n  name: 'XhFormatInputLabel',\n  setup(_, { slots }) {\n    const ctx = useFormatInputContext()\n    // 渲出来就登记，在 setup 里同步做：首帧与服务端直出就带上名字\n    ctx.labelCount.value++\n    onUnmounted(() => {\n      ctx.labelCount.value--\n    })\n    return () => h('span', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFormatInputKind = defineComponent({\n  name: 'XhFormatInputKind',\n  setup(_, { slots }) {\n    const ctx = useFormatInputContext()\n    // 分段切换时是 fieldset（名字在 legend），下拉时是 div\n    return () => h(formatInputItemTag('kind', ctx.api.value.kindControl), ctx.api.value.getKindProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFormatInputFieldGroup = defineComponent({\n  name: 'XhFormatInputFieldGroup',\n  setup(_, { slots }) {\n    const ctx = useFormatInputContext()\n    return () => h('div', ctx.api.value.getFieldGroupProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFormatInputItem = defineComponent({\n  name: 'XhFormatInputItem',\n  props: {\n    /** 参数名：decimals-mode、decimals、min-decimals、max-decimals、grouping、rounding、pattern、numeral-style。 */\n    value: { type: String as PropType<FormatInputOption>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFormatInputContext()\n    // 分段切换那一行是 fieldset、开关那一行是 label，其余是 div\n    return () => h(formatInputItemTag(props.value, ctx.api.value.kindControl), ctx.api.value.getItemProps(props.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFormatInputItemLabel = defineComponent({\n  name: 'XhFormatInputItemLabel',\n  props: {\n    /** 名字所属的那一行：参数名，或 kind。 */\n    value: { type: String as PropType<FormatInputOption | 'kind'>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFormatInputContext()\n    // 在 fieldset 里是 legend，其余是 span\n    return () => h(formatInputItemLabelTag(props.value, ctx.api.value.kindControl), ctx.api.value.getItemLabelProps(props.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFormatInputPatternDescription = defineComponent({\n  name: 'XhFormatInputPatternDescription',\n  setup(_, { slots }) {\n    const ctx = useFormatInputContext()\n    return () => h('p', ctx.api.value.getPatternDescriptionProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFormatInputPreview = defineComponent({\n  name: 'XhFormatInputPreview',\n  setup(_, { slots }) {\n    const ctx = useFormatInputContext()\n    return () => h('div', ctx.api.value.getPreviewProps() as Record<string, unknown>, slots.default?.() ?? ctx.api.value.previewText)\n  },\n})\n\nexport const XhFormatInputErrorText = defineComponent({\n  name: 'XhFormatInputErrorText',\n  setup(_, { slots }) {\n    const ctx = useFormatInputContext()\n    return () => h('p', ctx.api.value.getErrorTextProps() as Record<string, unknown>, slots.default?.() ?? ctx.api.value.issueText)\n  },\n})\n\n/** 标准结构里各部件对应的组件。 */\nconst FORMAT_INPUT_PARTS = {\n  'kind': XhFormatInputKind,\n  'field-group': XhFormatInputFieldGroup,\n  'item': XhFormatInputItem,\n  'item-label': XhFormatInputItemLabel,\n  'pattern-description': XhFormatInputPatternDescription,\n  'preview': XhFormatInputPreview,\n  'error-text': XhFormatInputErrorText,\n}\n\n/** 标准结构里组合进来的组件：与 Web Components 元素的 static dependencies 是同一份清单。 */\nconst FORMAT_INPUT_INSTANCES = {\n  'combobox': XhComboboxRoot,\n  'number-field': XhNumberFieldRoot,\n  'select': XhSelectRoot,\n  'switch': XhSwitch,\n  'toggle-group': XhToggleGroupRoot,\n}\n\n/** 未写默认插槽时铺开的整套结构：照 headless 的 formatInputStructure 渲，与 Web Components 不写部件时元素生成的节点出自同一份。 */\nfunction renderDefaultStructure(api: FormatInputApi, translations: FormatInputTranslations): VNode[] {\n  return renderStructure(formatInputStructure(api, translations), FORMAT_INPUT_PARTS, undefined, FORMAT_INPUT_INSTANCES)\n}\n"],"mappings":"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"}

package/dist/components/format-input/use-format-input.d.ts

@@ -0,0 +1,16 @@
+import { FormatInputApi, FormatInputSchema, FormatInputTranslations } from "@xihan-ui/headless";
+import { ComputedRef, Ref } from "vue";
+import { Service } from "@xihan-ui/core";
+//#region src/components/format-input/use-format-input.d.ts
+interface FormatInputContext {
+  /** 已渲染的 label 部件数量，由 XhFormatInputLabel 在 setup 里同步登记、卸载时撤销；根的 aria-labelledby 据此决定指不指过去。 */
+  labelCount: Ref<number>;
+  service: Service<FormatInputSchema>;
+  api: ComputedRef<FormatInputApi>;
+  /** 解析后的文案，给标准结构里的名字与说明用。 */
+  translations: ComputedRef<FormatInputTranslations>;
+}
+declare function useFormatInput(props: FormatInputSchema['props'], onValueChange?: FormatInputSchema['props']['onValueChange']): FormatInputContext;
+//#endregion
+export { FormatInputContext, useFormatInput };
+//# sourceMappingURL=use-format-input.d.ts.map

package/dist/components/format-input/use-format-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-format-input.d.ts","names":[],"sources":["../../../src/components/format-input/use-format-input.ts"],"mappings":";;;;UAeiB;;EAEf,YAAY;EACZ,SAAS,QAAQ;EACjB,KAAK,YAAY;;EAEjB,cAAc,YAAY;;iBAGZ,eACd,OAAO,4BACP,gBAAgB,8CACf"}

package/dist/components/format-input/use-format-input.js

@@ -0,0 +1,27 @@
+import { vueNormalize } from "../../runtime/normalize-props.js";
+import { useMachine } from "../../runtime/use-machine.js";
+import { connectFormatInput, formatInputMachine, formatInputTranslations } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
+//#region src/components/format-input/use-format-input.ts
+function useFormatInput(props, onValueChange) {
+	const labelCount = ref(0);
+	const service = useMachine(formatInputMachine, () => ({
+		...props,
+		labelled: labelCount.value > 0,
+		onValueChange
+	}));
+	const api = computed(() => connectFormatInput(service, vueNormalize));
+	return {
+		labelCount,
+		service,
+		api,
+		translations: computed(() => {
+			api.value;
+			return formatInputTranslations(service.prop);
+		})
+	};
+}
+//#endregion
+export { useFormatInput };
+
+//# sourceMappingURL=use-format-input.js.map

package/dist/components/format-input/use-format-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-format-input.js","names":[],"sources":["../../../src/components/format-input/use-format-input.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use format input 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { FormatInputApi, FormatInputSchema, FormatInputTranslations } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectFormatInput, formatInputMachine, formatInputTranslations } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface FormatInputContext {\n  /** 已渲染的 label 部件数量，由 XhFormatInputLabel 在 setup 里同步登记、卸载时撤销；根的 aria-labelledby 据此决定指不指过去。 */\n  labelCount: Ref<number>\n  service: Service<FormatInputSchema>\n  api: ComputedRef<FormatInputApi>\n  /** 解析后的文案，给标准结构里的名字与说明用。 */\n  translations: ComputedRef<FormatInputTranslations>\n}\n\nexport function useFormatInput(\n  props: FormatInputSchema['props'],\n  onValueChange?: FormatInputSchema['props']['onValueChange'],\n): FormatInputContext {\n  const labelCount = ref(0)\n  const service = useMachine(formatInputMachine, () => ({ ...props, labelled: labelCount.value > 0, onValueChange }))\n  const api = computed(() => connectFormatInput(service, vueNormalize))\n  const translations = computed(() => {\n    void api.value\n    return formatInputTranslations(service.prop)\n  })\n  return { labelCount, service, api, translations }\n}\n"],"mappings":";;;;;AAwBA,SAAgB,eACd,OACA,eACoB;CACpB,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,UAAU,WAAW,2BAA2B;EAAE,GAAG;EAAO,UAAU,WAAW,QAAQ;EAAG;CAAc,EAAE;CAClH,MAAM,MAAM,eAAe,mBAAmB,SAAS,YAAY,CAAC;CAKpE,OAAO;EAAE;EAAY;EAAS;EAAK,cAJd,eAAe;GAClC,IAAS;GACT,OAAO,wBAAwB,QAAQ,IAAI;EAC7C,CAC8C;CAAE;AAClD"}

package/dist/components/funnel-chart/funnel-chart.d.ts

@@ -1,6 +1,6 @@
 import { PayloadOf } from "../../runtime/payload.js";
-import { PropType, SlotsType, VNode } from "vue";
 import { ChartDatumDetails, ChartKey, ChartPalette, ChartRow, FunnelAlign, FunnelChartApi, FunnelChartSchema, FunnelChartTranslations, FunnelConversion, FunnelDirection, FunnelLabels, FunnelShape, FunnelTooltipModel, NumberFormatSpec } from "@xihan-ui/headless";
+import { PropType, SlotsType, VNode } from "vue";
 //#region src/components/funnel-chart/funnel-chart.d.ts
 type FunnelChartProps = FunnelChartSchema['props'];
 /** 默认插槽的载荷：自行摆放部件时用得上的状态与动作。 */
@@ -151,15 +151,15 @@ declare const XhFunnelChartRoot: import("vue").DefineComponent<import("vue").Ext
     type: PropType<Partial<FunnelChartTranslations>>;
   };
 }>> & Readonly<{
-  "onHidden-series-change"?: ((_details: import("@xihan-ui/headless").ChartHiddenSeriesChangeDetails) => any) | undefined;
-  "onUpdate:hiddenSeries"?: ((_hidden: string[]) => any) | undefined;
-  "onActive-key-change"?: ((_details: import("@xihan-ui/headless").ChartActiveKeyChangeDetails) => any) | undefined;
-  "onUpdate:activeKey"?: ((_key: ChartKey | null) => any) | undefined;
   "onDatum-active"?: ((_details: ChartDatumDetails | null) => any) | undefined;
   "onDatum-press"?: ((_details: ChartDatumDetails) => any) | undefined;
+  "onActive-key-change"?: ((_details: import("@xihan-ui/headless").ChartActiveKeyChangeDetails) => any) | undefined;
+  "onUpdate:activeKey"?: ((_key: ChartKey | null) => any) | undefined;
+  "onHidden-series-change"?: ((_details: import("@xihan-ui/headless").ChartHiddenSeriesChangeDetails) => any) | undefined;
+  "onUpdate:hiddenSeries"?: ((_hidden: string[]) => any) | undefined;
 }>, {
-  pending: boolean;
   animated: boolean;
+  pending: boolean;
 }, SlotsType<{
   /** 自行摆放部件；不写时铺开缺省结构：视口（绘图区与空态）、提示框。 */
   default?: (props: FunnelChartRootSlotProps) => VNode[];

package/dist/components/funnel-chart/use-funnel-chart.d.ts

@@ -1,6 +1,6 @@
+import { FunnelChartApi, FunnelChartSchema } from "@xihan-ui/headless";
 import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
-import { FunnelChartApi, FunnelChartSchema } from "@xihan-ui/headless";
 //#region src/components/funnel-chart/use-funnel-chart.d.ts
 /** 对外的回调：由外壳（emit）或组合式调用方提供，随 props 一并喂给机器。 */
 type FunnelChartNotifiers = Pick<FunnelChartSchema['props'], 'onHiddenSeriesChange' | 'onActiveKeyChange' | 'onDatumActive' | 'onDatumPress'>;

package/dist/components/funnel-chart/use-funnel-chart.js

@@ -1,7 +1,7 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
-import { computed, ref } from "vue";
 import { connectFunnelChart, funnelChartMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
 //#region src/components/funnel-chart/use-funnel-chart.ts
 /** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */
 function useFunnelChart(props, notify) {

package/dist/components/graph-chart/graph-chart.d.ts

@@ -1,6 +1,6 @@
 import { PayloadOf } from "../../runtime/payload.js";
-import { PropType, SlotsType, VNode } from "vue";
 import { ChartDatumDetails, ChartKey, GraphChartApi, GraphChartSchema, GraphChartTranslations, GraphLayout, GraphLinkDatum, GraphNodeDatum, GraphTooltipModel, GraphView, NumberFormatSpec } from "@xihan-ui/headless";
+import { PropType, SlotsType, VNode } from "vue";
 //#region src/components/graph-chart/graph-chart.d.ts
 type GraphChartProps = GraphChartSchema['props'];
 /** 默认插槽的载荷：自行摆放部件时用得上的状态与动作。 */
@@ -165,18 +165,18 @@ declare const XhGraphChartRoot: import("vue").DefineComponent<import("vue").Extr
     type: PropType<Partial<GraphChartTranslations>>;
   };
 }>> & Readonly<{
-  "onHidden-series-change"?: ((_details: import("@xihan-ui/headless").ChartHiddenSeriesChangeDetails) => any) | undefined;
-  "onUpdate:hiddenSeries"?: ((_hidden: string[]) => any) | undefined;
-  "onActive-key-change"?: ((_details: import("@xihan-ui/headless").ChartActiveKeyChangeDetails) => any) | undefined;
-  "onUpdate:activeKey"?: ((_key: ChartKey | null) => any) | undefined;
   "onDatum-active"?: ((_details: ChartDatumDetails | null) => any) | undefined;
   "onDatum-press"?: ((_details: ChartDatumDetails) => any) | undefined;
+  "onActive-key-change"?: ((_details: import("@xihan-ui/headless").ChartActiveKeyChangeDetails) => any) | undefined;
+  "onUpdate:activeKey"?: ((_key: ChartKey | null) => any) | undefined;
+  "onHidden-series-change"?: ((_details: import("@xihan-ui/headless").ChartHiddenSeriesChangeDetails) => any) | undefined;
+  "onUpdate:hiddenSeries"?: ((_hidden: string[]) => any) | undefined;
   "onView-change"?: ((_details: import("@xihan-ui/headless").GraphViewChangeDetails) => any) | undefined;
   "onUpdate:view"?: ((_view: GraphView) => any) | undefined;
 }>, {
+  animated: boolean;
   pending: boolean;
   zoom: boolean;
-  animated: boolean;
   directed: boolean;
   draggableNodes: boolean;
 }, SlotsType<{

package/dist/components/graph-chart/use-graph-chart.d.ts

@@ -1,6 +1,6 @@
+import { GraphChartApi, GraphChartSchema } from "@xihan-ui/headless";
 import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
-import { GraphChartApi, GraphChartSchema } from "@xihan-ui/headless";
 //#region src/components/graph-chart/use-graph-chart.d.ts
 /** 对外的回调：由外壳（emit）或组合式调用方提供，随 props 一并喂给机器。 */
 type GraphChartNotifiers = Pick<GraphChartSchema['props'], 'onHiddenSeriesChange' | 'onActiveKeyChange' | 'onDatumActive' | 'onDatumPress' | 'onViewChange'>;

package/dist/components/graph-chart/use-graph-chart.js

@@ -1,7 +1,7 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
-import { computed, ref } from "vue";
 import { connectGraphChart, graphChartMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
 //#region src/components/graph-chart/use-graph-chart.ts
 /** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */
 function useGraphChart(props, notify) {

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

@@ -1,5 +1,5 @@
-import { ComputedRef } from "vue";
 import { GridApi } from "@xihan-ui/headless";
+import { ComputedRef } from "vue";
 //#region src/components/grid/context.d.ts
 interface GridContext {
   api: ComputedRef<GridApi>;

package/dist/components/grid/grid.d.ts

@@ -1,5 +1,5 @@
-import { PropType } from "vue";
 import { GridColumnCount, GridColumnOffset, GridItemProps, GridProps, GridRowCount } from "@xihan-ui/headless";
+import { PropType } from "vue";
 //#region src/components/grid/grid.d.ts
 /** 断点对象形态的列数，从 GridProps 上取，不在这里另抄一份档位清单。 */
 type ColsByBreakpoint = Exclude<GridProps['cols'], GridColumnCount | undefined>;
@@ -32,6 +32,10 @@ declare const XhGridRoot: import("vue").DefineComponent<import("vue").ExtractPro
   justifyItems: {
     type: PropType<GridProps["justifyItems"]>;
   };
+  ruled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -59,7 +63,13 @@ declare const XhGridRoot: import("vue").DefineComponent<import("vue").ExtractPro
   justifyItems: {
     type: PropType<GridProps["justifyItems"]>;
   };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+  ruled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  ruled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhGridItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   span: {
     type: PropType<GridColumnCount | string | SpanByBreakpoint>;

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

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","names":[],"sources":["../../../src/components/grid/grid.ts"],"mappings":";;;;KAeK,mBAAmB,QAAQ,mBAAmB;;KAE9C,mBAAmB,QAAQ,uBAAuB;KAClD,qBAAqB,QAAQ,yBAAyB;KACtD,sBAAsB,QAAQ,0BAA0B;cAEhD,0BAAU,8BAAA;;IAMiB,MAAA,SAAS,2BAA2B;;;IAEtC,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACjB,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;IARL,MAAA,SAAS,2BAA2B;;;IAEtC,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACjB,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACF,MAAA,SAAS;;MAgB3C,oDAAA;cAEW,0BAAU,8BAAA;;IAKiB,MAAA,SAAS,2BAA2B;;;IAGpC,MAAA,SAAS,4BAA4B;;;IAGrC,MAAA,SAAS,wBAAwB;;;;;;IANjC,MAAA,SAAS,2BAA2B;;;IAGpC,MAAA,SAAS,4BAA4B;;;IAGrC,MAAA,SAAS,wBAAwB;;MAevE,oDAAA"}
+{"version":3,"file":"grid.d.ts","names":[],"sources":["../../../src/components/grid/grid.ts"],"mappings":";;;;KAeK,mBAAmB,QAAQ,mBAAmB;;KAE9C,mBAAmB,QAAQ,uBAAuB;KAClD,qBAAqB,QAAQ,yBAAyB;KACtD,sBAAsB,QAAQ,0BAA0B;cAEhD,0BAAU,8BAAA;;IAMiB,MAAA,SAAS,2BAA2B;;;IAEtC,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACjB,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;;;IARL,MAAA,SAAS,2BAA2B;;;IAEtC,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACjB,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;qCAkB3C;cAEW,0BAAU,8BAAA;;IAKiB,MAAA,SAAS,2BAA2B;;;IAGpC,MAAA,SAAS,4BAA4B;;;IAGrC,MAAA,SAAS,wBAAwB;;;;;;IANjC,MAAA,SAAS,2BAA2B;;;IAGpC,MAAA,SAAS,4BAA4B;;;IAGrC,MAAA,SAAS,wBAAwB;;MAevE,oDAAA"}

package/dist/components/grid/grid.js

@@ -1,7 +1,7 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { provideGrid, useGridContext } from "./context.js";
-import { computed, defineComponent, h } from "vue";
 import { connectGrid, normalizeGridCount, normalizeGridTier } from "@xihan-ui/headless";
+import { computed, defineComponent, h } from "vue";
 //#region src/components/grid/grid.ts
 const XhGridRoot = defineComponent({
 	name: "XhGridRoot",
@@ -17,7 +17,11 @@ const XhGridRoot = defineComponent({
 		rowGap: { type: String },
 		columnGap: { type: String },
 		align: { type: String },
-		justifyItems: { type: String }
+		justifyItems: { type: String },
+		ruled: {
+			type: Boolean,
+			default: void 0
+		}
 	},
 	setup(props, { slots }) {
 		const api = computed(() => connectGrid({
@@ -28,7 +32,8 @@ const XhGridRoot = defineComponent({
 			rowGap: props.rowGap,
 			columnGap: props.columnGap,
 			align: props.align,
-			justifyItems: props.justifyItems
+			justifyItems: props.justifyItems,
+			ruled: props.ruled
 		}, vueNormalize));
 		provideGrid({ api });
 		return () => h("div", api.value.getRootProps(), slots.default?.());

package/dist/components/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/grid/grid.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// 提供 grid 相关实现。\n\nimport type { GridColumnCount, GridColumnOffset, GridItemProps, GridProps, GridRowCount } from '@xihan-ui/headless'\nimport type { PropType } from 'vue'\nimport { connectGrid, normalizeGridCount, normalizeGridTier } from '@xihan-ui/headless'\nimport { computed, defineComponent, h } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { provideGrid, useGridContext } from './context'\n\n/** 断点对象形态的列数，从 GridProps 上取，不在这里另抄一份档位清单。 */\ntype ColsByBreakpoint = Exclude<GridProps['cols'], GridColumnCount | undefined>\n/** 断点对象形态的跨列与错列，同样从类型上取。 */\ntype SpanByBreakpoint = Exclude<GridItemProps['span'], GridColumnCount | undefined>\ntype OffsetByBreakpoint = Exclude<GridItemProps['offset'], GridColumnOffset | undefined>\ntype RowSpanByBreakpoint = Exclude<GridItemProps['rowSpan'], GridRowCount | undefined>\n\nexport const XhGridRoot = defineComponent({\n  name: 'XhGridRoot',\n  // 有 connect 兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    // 列数由作者声明：兼收字符串以支持模板里写 cols=\"3\"，收对象则是逐档的列数\n    cols: {\n      type: [Number, String, Object] as PropType<GridColumnCount | string | ColsByBreakpoint>,\n    },\n    rows: { type: [Number, String] as PropType<GridRowCount | string> },\n    minColWidth: { type: String as PropType<GridProps['minColWidth']> },\n    gap: { type: String as PropType<GridProps['gap']> },\n    rowGap: { type: String as PropType<GridProps['rowGap']> },\n    columnGap: { type: String as PropType<GridProps['columnGap']> },\n    align: { type: String as PropType<GridProps['align']> },\n    justifyItems: { type: String as PropType<GridProps['justifyItems']> },\n  },\n  setup(props, { slots }) {\n    const api = computed(() => connectGrid({\n      cols: normalizeGridTier(props.cols) as GridProps['cols'],\n      rows: normalizeGridCount(props.rows) as GridRowCount | undefined,\n      minColWidth: props.minColWidth,\n      gap: props.gap,\n      rowGap: props.rowGap,\n      columnGap: props.columnGap,\n      align: props.align,\n      justifyItems: props.justifyItems,\n    }, vueNormalize))\n    provideGrid({ api })\n    return () => h('div', api.value.getRootProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhGridItem = defineComponent({\n  name: 'XhGridItem',\n  props: {\n    // 跨列与错列由每一格自报，同样兼收字符串；收对象则是逐档的跨列 / 错列\n    span: {\n      type: [Number, String, Object] as PropType<GridColumnCount | string | SpanByBreakpoint>,\n    },\n    offset: {\n      type: [Number, String, Object] as PropType<GridColumnOffset | string | OffsetByBreakpoint>,\n    },\n    rowSpan: {\n      type: [Number, String, Object] as PropType<GridRowCount | string | RowSpanByBreakpoint>,\n    },\n  },\n  setup(props, { slots }) {\n    const ctx = useGridContext()\n    return () => h(\n      'div',\n      ctx.api.value.getItemProps({\n        span: normalizeGridTier(props.span) as GridItemProps['span'],\n        offset: normalizeGridTier(props.offset) as GridItemProps['offset'],\n        rowSpan: normalizeGridTier(props.rowSpan) as GridItemProps['rowSpan'],\n      }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n"],"mappings":";;;;;AAqBA,MAAa,aAAa,gBAAgB;CACxC,MAAM;CAEN,OAAO;EAEL,MAAM,EACJ,MAAM;GAAC;GAAQ;GAAQ;EAAM,EAC/B;EACA,MAAM,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAqC;EAClE,aAAa,EAAE,MAAM,OAA6C;EAClE,KAAK,EAAE,MAAM,OAAqC;EAClD,QAAQ,EAAE,MAAM,OAAwC;EACxD,WAAW,EAAE,MAAM,OAA2C;EAC9D,OAAO,EAAE,MAAM,OAAuC;EACtD,cAAc,EAAE,MAAM,OAA8C;CACtE;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,eAAe,YAAY;GACrC,MAAM,kBAAkB,MAAM,IAAI;GAClC,MAAM,mBAAmB,MAAM,IAAI;GACnC,aAAa,MAAM;GACnB,KAAK,MAAM;GACX,QAAQ,MAAM;GACd,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,cAAc,MAAM;EACtB,GAAG,YAAY,CAAC;EAChB,YAAY,EAAE,IAAI,CAAC;EACnB,aAAa,EAAE,OAAO,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU,CAAC;CAC9F;AACF,CAAC;AAED,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO;EAEL,MAAM,EACJ,MAAM;GAAC;GAAQ;GAAQ;EAAM,EAC/B;EACA,QAAQ,EACN,MAAM;GAAC;GAAQ;GAAQ;EAAM,EAC/B;EACA,SAAS,EACP,MAAM;GAAC;GAAQ;GAAQ;EAAM,EAC/B;CACF;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,eAAe;EAC3B,aAAa,EACX,OACA,IAAI,IAAI,MAAM,aAAa;GACzB,MAAM,kBAAkB,MAAM,IAAI;GAClC,QAAQ,kBAAkB,MAAM,MAAM;GACtC,SAAS,kBAAkB,MAAM,OAAO;EAC1C,CAAC,GACD,MAAM,UAAU,CAClB;CACF;AACF,CAAC"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/grid/grid.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// 提供 grid 相关实现。\n\nimport type { GridColumnCount, GridColumnOffset, GridItemProps, GridProps, GridRowCount } from '@xihan-ui/headless'\nimport type { PropType } from 'vue'\nimport { connectGrid, normalizeGridCount, normalizeGridTier } from '@xihan-ui/headless'\nimport { computed, defineComponent, h } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { provideGrid, useGridContext } from './context'\n\n/** 断点对象形态的列数，从 GridProps 上取，不在这里另抄一份档位清单。 */\ntype ColsByBreakpoint = Exclude<GridProps['cols'], GridColumnCount | undefined>\n/** 断点对象形态的跨列与错列，同样从类型上取。 */\ntype SpanByBreakpoint = Exclude<GridItemProps['span'], GridColumnCount | undefined>\ntype OffsetByBreakpoint = Exclude<GridItemProps['offset'], GridColumnOffset | undefined>\ntype RowSpanByBreakpoint = Exclude<GridItemProps['rowSpan'], GridRowCount | undefined>\n\nexport const XhGridRoot = defineComponent({\n  name: 'XhGridRoot',\n  // 有 connect 兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    // 列数由作者声明：兼收字符串以支持模板里写 cols=\"3\"，收对象则是逐档的列数\n    cols: {\n      type: [Number, String, Object] as PropType<GridColumnCount | string | ColsByBreakpoint>,\n    },\n    rows: { type: [Number, String] as PropType<GridRowCount | string> },\n    minColWidth: { type: String as PropType<GridProps['minColWidth']> },\n    gap: { type: String as PropType<GridProps['gap']> },\n    rowGap: { type: String as PropType<GridProps['rowGap']> },\n    columnGap: { type: String as PropType<GridProps['columnGap']> },\n    align: { type: String as PropType<GridProps['align']> },\n    justifyItems: { type: String as PropType<GridProps['justifyItems']> },\n    ruled: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const api = computed(() => connectGrid({\n      cols: normalizeGridTier(props.cols) as GridProps['cols'],\n      rows: normalizeGridCount(props.rows) as GridRowCount | undefined,\n      minColWidth: props.minColWidth,\n      gap: props.gap,\n      rowGap: props.rowGap,\n      columnGap: props.columnGap,\n      align: props.align,\n      justifyItems: props.justifyItems,\n      ruled: props.ruled,\n    }, vueNormalize))\n    provideGrid({ api })\n    return () => h('div', api.value.getRootProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhGridItem = defineComponent({\n  name: 'XhGridItem',\n  props: {\n    // 跨列与错列由每一格自报，同样兼收字符串；收对象则是逐档的跨列 / 错列\n    span: {\n      type: [Number, String, Object] as PropType<GridColumnCount | string | SpanByBreakpoint>,\n    },\n    offset: {\n      type: [Number, String, Object] as PropType<GridColumnOffset | string | OffsetByBreakpoint>,\n    },\n    rowSpan: {\n      type: [Number, String, Object] as PropType<GridRowCount | string | RowSpanByBreakpoint>,\n    },\n  },\n  setup(props, { slots }) {\n    const ctx = useGridContext()\n    return () => h(\n      'div',\n      ctx.api.value.getItemProps({\n        span: normalizeGridTier(props.span) as GridItemProps['span'],\n        offset: normalizeGridTier(props.offset) as GridItemProps['offset'],\n        rowSpan: normalizeGridTier(props.rowSpan) as GridItemProps['rowSpan'],\n      }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n"],"mappings":";;;;;AAqBA,MAAa,aAAa,gBAAgB;CACxC,MAAM;CAEN,OAAO;EAEL,MAAM,EACJ,MAAM;GAAC;GAAQ;GAAQ;EAAM,EAC/B;EACA,MAAM,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAqC;EAClE,aAAa,EAAE,MAAM,OAA6C;EAClE,KAAK,EAAE,MAAM,OAAqC;EAClD,QAAQ,EAAE,MAAM,OAAwC;EACxD,WAAW,EAAE,MAAM,OAA2C;EAC9D,OAAO,EAAE,MAAM,OAAuC;EACtD,cAAc,EAAE,MAAM,OAA8C;EACpE,OAAO;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;CAC7C;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,eAAe,YAAY;GACrC,MAAM,kBAAkB,MAAM,IAAI;GAClC,MAAM,mBAAmB,MAAM,IAAI;GACnC,aAAa,MAAM;GACnB,KAAK,MAAM;GACX,QAAQ,MAAM;GACd,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,cAAc,MAAM;GACpB,OAAO,MAAM;EACf,GAAG,YAAY,CAAC;EAChB,YAAY,EAAE,IAAI,CAAC;EACnB,aAAa,EAAE,OAAO,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU,CAAC;CAC9F;AACF,CAAC;AAED,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO;EAEL,MAAM,EACJ,MAAM;GAAC;GAAQ;GAAQ;EAAM,EAC/B;EACA,QAAQ,EACN,MAAM;GAAC;GAAQ;GAAQ;EAAM,EAC/B;EACA,SAAS,EACP,MAAM;GAAC;GAAQ;GAAQ;EAAM,EAC/B;CACF;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,eAAe;EAC3B,aAAa,EACX,OACA,IAAI,IAAI,MAAM,aAAa;GACzB,MAAM,kBAAkB,MAAM,IAAI;GAClC,QAAQ,kBAAkB,MAAM,MAAM;GACtC,SAAS,kBAAkB,MAAM,OAAO;EAC1C,CAAC,GACD,MAAM,UAAU,CAClB;CACF;AACF,CAAC"}

package/dist/components/grid-list/context.d.ts

@@ -1,6 +1,6 @@
 import { GridListContext } from "./use-grid-list.js";
-import { ComputedRef } from "vue";
 import { GridListRowProps } from "@xihan-ui/headless";
+import { ComputedRef } from "vue";
 //#region src/components/grid-list/context.d.ts
 declare function useGridListContext(): GridListContext;
 declare function useGridListRow(): ComputedRef<GridListRowProps>;

package/dist/components/grid-list/grid-list.d.ts

@@ -1,7 +1,7 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { GridListNode, GridListSchema, GridListSelectionMode, GridListTranslations } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { ControlVariant, Direction, Size, Tone } from "@xihan-ui/core";
-import { GridListNode, GridListSchema, GridListSelectionMode, GridListTranslations } from "@xihan-ui/headless";
 //#region src/components/grid-list/grid-list.d.ts
 type GridListProps = GridListSchema['props'];
 declare const XhGridListRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/components/grid-list/grid-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-list.d.ts","names":[],"sources":["../../../src/components/grid-list/grid-list.ts"],"mappings":";;;;;KAgBK,gBAAgB;cAER,8BAAc,8BAAA;;IAGM,MAAA,SAAS;;;IACJ,MAAA;;;IACO,MAAA;;;IACR,MAAA,SAAS;;;;;;;;;;;;;;;IAOnB,MAAA,SAAS;;;IACL,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;EAGtB,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;EACd,SAAA,UAAA,UAAU;;;IAnBF,MAAA,SAAS;;;IACJ,MAAA;;;IACO,MAAA;;;IACR,MAAA,SAAS;;;;;;;;;;;;;;;IAOnB,MAAA,SAAS;;;IACL,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;EAOZ,gBAAM;kCAgB7C;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAM1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,6BAAa,8BAAA;;;;;;;;;;;;;;;;;;;;;;qCAYxB;cAiBW;cACA;cACA;cACA;cACA;cAEA,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAM1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"grid-list.d.ts","names":[],"sources":["../../../src/components/grid-list/grid-list.ts"],"mappings":";;;;;KAgBK,gBAAgB;cAER,8BAAc,8BAAA;;IAGM,MAAA,SAAS;;;IACJ,MAAA;;;IACO,MAAA;;;IACR,MAAA,SAAS;;;;;;;;;;;;;;;IAOnB,MAAA,SAAS;;;IACL,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;EAGtB,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;EACd,SAAA,UAAA,UAAU;;;IAnBF,MAAA,SAAS;;;IACJ,MAAA;;;IACO,MAAA;;;IACR,MAAA,SAAS;;;;;;;;;;;;;;;IAOnB,MAAA,SAAS;;;IACL,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;EAOZ,gBAAM;kCAgB7C;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAW1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,6BAAa,8BAAA;;;;;;;;;;;;;;;;;;;;;;qCAYxB;cAiBW;cACA;cACA;cACA;cACA;cAEA,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAM1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/grid-list/grid-list.js

@@ -1,7 +1,7 @@
 import { withXhConfig } from "../../config/config.js";
 import { provideGridList, provideGridListRow, useGridListContext, useGridListRow } from "./context.js";
 import { useGridList } from "./use-grid-list.js";
-import { computed, defineComponent, h } from "vue";
+import { computed, defineComponent, h, onUnmounted } from "vue";
 //#region src/components/grid-list/grid-list.ts
 const XhGridListRoot = defineComponent({
 	name: "XhGridListRoot",
@@ -50,6 +50,10 @@ const XhGridListLabel = defineComponent({
 	name: "XhGridListLabel",
 	setup(_, { slots }) {
 		const context = useGridListContext();
+		context.labelCount.value++;
+		onUnmounted(() => {
+			context.labelCount.value--;
+		});
 		return () => h("span", context.api.value.getLabelProps(), slots.default?.());
 	}
 });

package/dist/components/grid-list/grid-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-list.js","names":[],"sources":["../../../src/components/grid-list/grid-list.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// 提供 grid list 相关实现。\n\nimport type { ControlVariant, Direction, Size, Tone } from '@xihan-ui/core'\nimport type { GridListNode, GridListRowProps, GridListSchema, GridListSelectionMode, GridListTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { provideGridList, provideGridListRow, useGridListContext, useGridListRow } from './context'\nimport { useGridList } from './use-grid-list'\n\ntype GridListProps = GridListSchema['props']\n\nexport const XhGridListRoot = defineComponent({\n  name: 'XhGridListRoot',\n  props: {\n    collection: { type: Array as PropType<GridListNode[]> },\n    value: { type: [String, Array] as PropType<string | string[]> },\n    defaultValue: { type: [String, Array] as PropType<string | string[]> },\n    selectionMode: { type: String as PropType<GridListSelectionMode> },\n    disabled: Boolean,\n    readOnly: Boolean,\n    invalid: Boolean,\n    loading: Boolean,\n    loop: { type: Boolean, default: undefined },\n    typeahead: { type: Boolean, default: undefined },\n    dir: { type: String as PropType<Direction> },\n    variant: { type: String as PropType<ControlVariant> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    translations: { type: Object as PropType<Partial<GridListTranslations>> },\n  },\n  emits: {\n    'value-change': (_details: PayloadOf<GridListProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<GridListProps, 'onValueChange'>['value']) => true,\n    'action': (_details: PayloadOf<GridListProps, 'onAction'>) => true,\n  },\n  slots: Object as SlotsType<{ default?: () => VNode[] }>,\n  setup(props, { slots, emit }) {\n    const context = useGridList(\n      withXhConfig('grid-list', props) as GridListProps,\n      (details) => {\n        emit('value-change', details)\n        emit('update:value', details.value)\n      },\n      details => emit('action', details),\n    )\n    provideGridList(context)\n    return () => {\n      const api = context.api.value\n      return h('div', api.getRootProps() as Record<string, unknown>, slots.default?.())\n    }\n  },\n})\n\nexport const XhGridListLabel = defineComponent({\n  name: 'XhGridListLabel',\n  setup(_, { slots }) {\n    const context = useGridListContext()\n    return () => h('span', context.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhGridListRow = defineComponent({\n  name: 'XhGridListRow',\n  props: {\n    value: { type: String, required: true },\n    disabled: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const context = useGridListContext()\n    const row = computed<GridListRowProps>(() => ({ value: props.value, disabled: props.disabled }))\n    provideGridListRow(row)\n    return () => h('div', context.api.value.getRowProps(row.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nfunction rowPart(name: string, getter: keyof Pick<\n  ReturnType<typeof useGridList>['api']['value'],\n  'getRowSelectionIndicatorProps' | 'getRowContentProps' | 'getRowTextProps' | 'getRowDescriptionProps' | 'getRowActionsProps'\n>, tag: 'div' | 'span' = 'div'): ReturnType<typeof defineComponent> {\n  return defineComponent({\n    name,\n    setup(_, { slots }) {\n      const context = useGridListContext()\n      const row = useGridListRow()\n      return () => h(tag, (context.api.value[getter] as (props: GridListRowProps) => Record<string, unknown>)(row.value), slots.default?.())\n    },\n  })\n}\n\n// 选择标记与同族条目指示器一样是 span，与 React 版同一个标签\nexport const XhGridListRowSelectionIndicator = rowPart('XhGridListRowSelectionIndicator', 'getRowSelectionIndicatorProps', 'span')\nexport const XhGridListRowContent = rowPart('XhGridListRowContent', 'getRowContentProps')\nexport const XhGridListRowText = rowPart('XhGridListRowText', 'getRowTextProps')\nexport const XhGridListRowDescription = rowPart('XhGridListRowDescription', 'getRowDescriptionProps')\nexport const XhGridListRowActions = rowPart('XhGridListRowActions', 'getRowActionsProps')\n\nexport const XhGridListRowAction = defineComponent({\n  name: 'XhGridListRowAction',\n  setup(_, { slots }) {\n    const context = useGridListContext()\n    const row = useGridListRow()\n    return () => h('button', context.api.value.getRowActionProps(row.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhGridListEmpty = defineComponent({\n  name: 'XhGridListEmpty',\n  setup(_, { slots }) {\n    const context = useGridListContext()\n    return () => h('div', context.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhGridListLoading = defineComponent({\n  name: 'XhGridListLoading',\n  setup(_, { slots }) {\n    const context = useGridListContext()\n    return () => h('div', context.api.value.getLoadingProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"grid-list.js","names":[],"sources":["../../../src/components/grid-list/grid-list.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// 提供 grid list 相关实现。\n\nimport type { ControlVariant, Direction, Size, Tone } from '@xihan-ui/core'\nimport type { GridListNode, GridListRowProps, GridListSchema, GridListSelectionMode, GridListTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, onUnmounted } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { provideGridList, provideGridListRow, useGridListContext, useGridListRow } from './context'\nimport { useGridList } from './use-grid-list'\n\ntype GridListProps = GridListSchema['props']\n\nexport const XhGridListRoot = defineComponent({\n  name: 'XhGridListRoot',\n  props: {\n    collection: { type: Array as PropType<GridListNode[]> },\n    value: { type: [String, Array] as PropType<string | string[]> },\n    defaultValue: { type: [String, Array] as PropType<string | string[]> },\n    selectionMode: { type: String as PropType<GridListSelectionMode> },\n    disabled: Boolean,\n    readOnly: Boolean,\n    invalid: Boolean,\n    loading: Boolean,\n    loop: { type: Boolean, default: undefined },\n    typeahead: { type: Boolean, default: undefined },\n    dir: { type: String as PropType<Direction> },\n    variant: { type: String as PropType<ControlVariant> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    translations: { type: Object as PropType<Partial<GridListTranslations>> },\n  },\n  emits: {\n    'value-change': (_details: PayloadOf<GridListProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<GridListProps, 'onValueChange'>['value']) => true,\n    'action': (_details: PayloadOf<GridListProps, 'onAction'>) => true,\n  },\n  slots: Object as SlotsType<{ default?: () => VNode[] }>,\n  setup(props, { slots, emit }) {\n    const context = useGridList(\n      withXhConfig('grid-list', props) as GridListProps,\n      (details) => {\n        emit('value-change', details)\n        emit('update:value', details.value)\n      },\n      details => emit('action', details),\n    )\n    provideGridList(context)\n    return () => {\n      const api = context.api.value\n      return h('div', api.getRootProps() as Record<string, unknown>, slots.default?.())\n    }\n  },\n})\n\nexport const XhGridListLabel = defineComponent({\n  name: 'XhGridListLabel',\n  setup(_, { slots }) {\n    const context = useGridListContext()\n    // 渲出来就登记，在 setup 里同步做：排在输入之前时首帧与服务端直出就带上名字\n    context.labelCount.value++\n    onUnmounted(() => {\n      context.labelCount.value--\n    })\n    return () => h('span', context.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhGridListRow = defineComponent({\n  name: 'XhGridListRow',\n  props: {\n    value: { type: String, required: true },\n    disabled: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const context = useGridListContext()\n    const row = computed<GridListRowProps>(() => ({ value: props.value, disabled: props.disabled }))\n    provideGridListRow(row)\n    return () => h('div', context.api.value.getRowProps(row.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nfunction rowPart(name: string, getter: keyof Pick<\n  ReturnType<typeof useGridList>['api']['value'],\n  'getRowSelectionIndicatorProps' | 'getRowContentProps' | 'getRowTextProps' | 'getRowDescriptionProps' | 'getRowActionsProps'\n>, tag: 'div' | 'span' = 'div'): ReturnType<typeof defineComponent> {\n  return defineComponent({\n    name,\n    setup(_, { slots }) {\n      const context = useGridListContext()\n      const row = useGridListRow()\n      return () => h(tag, (context.api.value[getter] as (props: GridListRowProps) => Record<string, unknown>)(row.value), slots.default?.())\n    },\n  })\n}\n\n// 选择标记与同族条目指示器一样是 span，与 React 版同一个标签\nexport const XhGridListRowSelectionIndicator = rowPart('XhGridListRowSelectionIndicator', 'getRowSelectionIndicatorProps', 'span')\nexport const XhGridListRowContent = rowPart('XhGridListRowContent', 'getRowContentProps')\nexport const XhGridListRowText = rowPart('XhGridListRowText', 'getRowTextProps')\nexport const XhGridListRowDescription = rowPart('XhGridListRowDescription', 'getRowDescriptionProps')\nexport const XhGridListRowActions = rowPart('XhGridListRowActions', 'getRowActionsProps')\n\nexport const XhGridListRowAction = defineComponent({\n  name: 'XhGridListRowAction',\n  setup(_, { slots }) {\n    const context = useGridListContext()\n    const row = useGridListRow()\n    return () => h('button', context.api.value.getRowActionProps(row.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhGridListEmpty = defineComponent({\n  name: 'XhGridListEmpty',\n  setup(_, { slots }) {\n    const context = useGridListContext()\n    return () => h('div', context.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhGridListLoading = defineComponent({\n  name: 'XhGridListLoading',\n  setup(_, { slots }) {\n    const context = useGridListContext()\n    return () => h('div', context.api.value.getLoadingProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}

package/dist/components/grid-list/use-grid-list.d.ts

@@ -1,8 +1,13 @@
-import { ComputedRef } from "vue";
-import { Service } from "@xihan-ui/core";
 import { GridListApi, GridListSchema } from "@xihan-ui/headless";
+import { ComputedRef, Ref } from "vue";
+import { Service } from "@xihan-ui/core";
 //#region src/components/grid-list/use-grid-list.d.ts
 interface GridListContext {
+  /**
+   * 已渲染的 label 部件数量，由 XhGridListLabel 在 setup 里同步登记、卸载时撤销。
+   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。
+   */
+  labelCount: Ref<number>;
   api: ComputedRef<GridListApi>;
   service: Service<GridListSchema>;
 }

package/dist/components/grid-list/use-grid-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-grid-list.d.ts","names":[],"sources":["../../../src/components/grid-list/use-grid-list.ts"],"mappings":";;;;UAeiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;iBAGH,YACd,OAAO,yBACP,gBAAgB,0CAChB,WAAW,sCACV"}
+{"version":3,"file":"use-grid-list.d.ts","names":[],"sources":["../../../src/components/grid-list/use-grid-list.ts"],"mappings":";;;;UAeiB;;;;;EAKf,YAAY;EACZ,KAAK,YAAY;EACjB,SAAS,QAAQ;;iBAGH,YACd,OAAO,yBACP,gBAAgB,0CAChB,WAAW,sCACV"}

package/dist/components/grid-list/use-grid-list.js

@@ -1,15 +1,18 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
-import { computed } from "vue";
 import { connectGridList, gridListMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
 //#region src/components/grid-list/use-grid-list.ts
 function useGridList(props, onValueChange, onAction) {
+	const labelCount = ref(0);
 	const service = useMachine(gridListMachine, () => ({
 		...props,
+		labelled: labelCount.value > 0,
 		onValueChange,
 		onAction
 	}));
 	return {
+		labelCount,
 		api: computed(() => connectGridList(service, vueNormalize)),
 		service
 	};