@xihan-ui/vue 4.1.0 → 5.0.0

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

@@ -1,13 +1,19 @@
+import { renderStructure } from "../../runtime/structure.js";
 import { withXhConfig } from "../../config/config.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
 import { providePasswordInput, usePasswordInputContext } from "./context.js";
 import { usePasswordInput } from "./use-password-input.js";
-import { defineComponent, h } from "vue";
+import { passwordInputStructure, withFieldDescription } from "@xihan-ui/headless";
+import { defineComponent, h, onUnmounted } from "vue";
 //#region src/components/password-input/password-input.ts
 const XhPasswordInputRoot = defineComponent({
 	name: "XhPasswordInputRoot",
 	props: {
+		/** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+		label: { type: String },
+		/** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+		ariaLabel: { type: String },
 		value: { type: String },
 		defaultValue: { type: String },
 		revealed: {
@@ -64,22 +70,29 @@ const XhPasswordInputRoot = defineComponent({
 			onRevealedChange
 		});
 		providePasswordInput(ctx);
-		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
-			value: ctx.api.value.value,
-			empty: ctx.api.value.empty,
-			revealed: ctx.api.value.revealed,
-			capsLock: ctx.api.value.capsLock,
-			inputType: ctx.api.value.inputType,
-			setValue: ctx.api.value.setValue,
-			setRevealed: ctx.api.value.setRevealed,
-			toggleRevealed: ctx.api.value.toggleRevealed
-		}));
+		return () => {
+			const api = ctx.api.value;
+			return h("div", api.getRootProps(), slots.default ? slots.default({
+				value: api.value,
+				empty: api.empty,
+				revealed: api.revealed,
+				capsLock: api.capsLock,
+				inputType: api.inputType,
+				setValue: api.setValue,
+				setRevealed: api.setRevealed,
+				toggleRevealed: api.toggleRevealed
+			}) : renderDefaultStructure(api, props.label, slots.label));
+		};
 	}
 });
 const XhPasswordInputLabel = defineComponent({
 	name: "XhPasswordInputLabel",
 	setup(_, { slots }) {
 		const ctx = usePasswordInputContext();
+		ctx.labelCount.value++;
+		onUnmounted(() => {
+			ctx.labelCount.value--;
+		});
 		return () => h("label", ctx.api.value.getLabelProps(), slots.default?.());
 	}
 });
@@ -96,10 +109,10 @@ const XhPasswordInputInput = defineComponent({
 		const fieldWiring = useFieldStateWiring();
 		const fieldLabel = useFieldLabelWiring();
 		const ctx = usePasswordInputContext();
-		return () => h("input", fieldLabel.value({
+		return () => h("input", fieldLabel.value(withFieldDescription({
 			...fieldWiring.value,
 			...ctx.api.value.getInputProps()
-		}));
+		}, fieldWiring.value["aria-describedby"])));
 	}
 });
 const XhPasswordInputVisibilityTrigger = defineComponent({
@@ -124,6 +137,25 @@ const XhPasswordInputStrengthMeter = defineComponent({
 		return () => h("div", ctx.api.value.getStrengthMeterProps(), slots.default?.());
 	}
 });
+/** 标准结构里各部件对应的组件。 */
+const PASSWORD_INPUT_PARTS = {
+	"label": XhPasswordInputLabel,
+	"control": XhPasswordInputControl,
+	"input": XhPasswordInputInput,
+	"caps-lock-indicator": XhPasswordInputCapsLockIndicator,
+	"visibility-trigger": XhPasswordInputVisibilityTrigger,
+	"strength-meter": XhPasswordInputStrengthMeter
+};
+/**
+* 未写默认插槽时铺开的整套结构：照 headless 的 passwordInputStructure 渲，
+* 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。
+*/
+function renderDefaultStructure(api, label, labelSlot) {
+	return renderStructure(passwordInputStructure(api, {
+		label,
+		slotted: (name) => name === "label" && labelSlot != null
+	}), PASSWORD_INPUT_PARTS, (node) => node.slot ? labelSlot?.() : void 0);
+}
 //#endregion
 export { XhPasswordInputCapsLockIndicator, XhPasswordInputControl, XhPasswordInputInput, XhPasswordInputLabel, XhPasswordInputRoot, XhPasswordInputStrengthMeter, XhPasswordInputVisibilityTrigger };
 

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

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-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// 提供 password input 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { PasswordInputApi, PasswordInputSchema, PasswordInputTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { providePasswordInput, usePasswordInputContext } from './context'\nimport { usePasswordInput } from './use-password-input'\n\ntype PasswordInputProps = PasswordInputSchema['props']\n\n/** 默认插槽的载荷：当前值与空标志、明暗与大写锁定，以及写值与切换明暗的动作。 */\nexport type PasswordInputRootSlotProps = Pick<\n  PasswordInputApi,\n  'value' | 'empty' | 'revealed' | 'capsLock' | 'inputType' | 'setValue' | 'setRevealed' | 'toggleRevealed'\n>\n\nexport const XhPasswordInputRoot = defineComponent({\n  name: 'XhPasswordInputRoot',\n  props: {\n    // 缺席值 undefined 表示非受控\n    value: { type: String },\n    defaultValue: { type: String },\n    revealed: { type: Boolean, default: undefined },\n    defaultRevealed: { type: Boolean, default: undefined },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    name: { type: String },\n    placeholder: { type: String },\n    autoComplete: { type: String },\n    strength: { type: Number },\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<PasswordInputTranslations>> },\n  },\n  // value-change 携带 { value }，update:value 携带裸串；明暗走 visibility-change 一路\n  emits: {\n    'value-change': (_details: PayloadOf<PasswordInputProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<PasswordInputProps, 'onValueChange'>['value']) => true,\n    'revealed-change': (_details: PayloadOf<PasswordInputProps, 'onRevealedChange'>) => true,\n    'update:revealed': (_revealed: PayloadOf<PasswordInputProps, 'onRevealedChange'>['revealed']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: PasswordInputRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const onValueChange: PasswordInputProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const onRevealedChange: PasswordInputProps['onRevealedChange'] = (details) => {\n      emit('revealed-change', details)\n      emit('update:revealed', details.revealed)\n    }\n    const ctx = usePasswordInput(\n      withXhConfig('password-input', useFormControlProps(props)) as PasswordInputProps,\n      { onValueChange, onRevealedChange },\n    )\n    providePasswordInput(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      value: ctx.api.value.value,\n      empty: ctx.api.value.empty,\n      revealed: ctx.api.value.revealed,\n      capsLock: ctx.api.value.capsLock,\n      inputType: ctx.api.value.inputType,\n      setValue: ctx.api.value.setValue,\n      setRevealed: ctx.api.value.setRevealed,\n      toggleRevealed: ctx.api.value.toggleRevealed,\n    }))\n  },\n})\n\nexport const XhPasswordInputLabel = defineComponent({\n  name: 'XhPasswordInputLabel',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 必须是原生 <label>，connect 把 for 写向 input\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputControl = defineComponent({\n  name: 'XhPasswordInputControl',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 视觉盒：输入框、切换钮与大写锁定提示都排在它里面\n    return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputInput = defineComponent({\n  name: 'XhPasswordInputInput',\n  setup() {\n    // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n    const fieldLabel = useFieldLabelWiring()\n    const ctx = usePasswordInputContext()\n    // 原生 <input>：光标、选区与撤销都归浏览器，label 的 for 也指着它\n    return () => h('input', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getInputProps() as Record<string, unknown> }))\n  },\n})\n\nexport const XhPasswordInputVisibilityTrigger = defineComponent({\n  name: 'XhPasswordInputVisibilityTrigger',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 原生 <button>，Enter / Space 的激活交给平台\n    return () => h('button', ctx.api.value.getVisibilityTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputCapsLockIndicator = defineComponent({\n  name: 'XhPasswordInputCapsLockIndicator',\n  setup() {\n    const ctx = usePasswordInputContext()\n    // 区内文字由组件写：活区域播报的是内容，不是名字。关着时是空串，节点仍在场\n    return () => h('span', ctx.api.value.getCapsLockIndicatorProps() as Record<string, unknown>, ctx.api.value.capsLockMessage)\n  },\n})\n\n/** 强度条：档位由调用方评分后经 strength 传入，未提供时收起。 */\nexport const XhPasswordInputStrengthMeter = defineComponent({\n  name: 'XhPasswordInputStrengthMeter',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    return () => h('div', ctx.api.value.getStrengthMeterProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-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// 提供 password input 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { PasswordInputApi, PasswordInputSchema, PasswordInputTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { passwordInputStructure, withFieldDescription } from '@xihan-ui/headless'\nimport { defineComponent, h, onUnmounted } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { renderStructure } from '../../runtime/structure'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { providePasswordInput, usePasswordInputContext } from './context'\nimport { usePasswordInput } from './use-password-input'\n\ntype PasswordInputProps = PasswordInputSchema['props']\n\n/** 默认插槽的载荷：当前值与空标志、明暗与大写锁定，以及写值与切换明暗的动作。 */\nexport type PasswordInputRootSlotProps = Pick<\n  PasswordInputApi,\n  'value' | 'empty' | 'revealed' | 'capsLock' | 'inputType' | 'setValue' | 'setRevealed' | 'toggleRevealed'\n>\n\nexport const XhPasswordInputRoot = defineComponent({\n  name: 'XhPasswordInputRoot',\n  props: {\n    /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */\n    label: { type: String },\n    /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */\n    ariaLabel: { type: String },\n    // 缺席值 undefined 表示非受控\n    value: { type: String },\n    defaultValue: { type: String },\n    revealed: { type: Boolean, default: undefined },\n    defaultRevealed: { type: Boolean, default: undefined },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    name: { type: String },\n    placeholder: { type: String },\n    autoComplete: { type: String },\n    strength: { type: Number },\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<PasswordInputTranslations>> },\n  },\n  // value-change 携带 { value }，update:value 携带裸串；明暗走 visibility-change 一路\n  emits: {\n    'value-change': (_details: PayloadOf<PasswordInputProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<PasswordInputProps, 'onValueChange'>['value']) => true,\n    'revealed-change': (_details: PayloadOf<PasswordInputProps, 'onRevealedChange'>) => true,\n    'update:revealed': (_revealed: PayloadOf<PasswordInputProps, 'onRevealedChange'>['revealed']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: PasswordInputRootSlotProps) => VNode[]\n    /** 不写默认插槽时标题的内容，代替 label 文字。 */\n    label?: () => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const onValueChange: PasswordInputProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const onRevealedChange: PasswordInputProps['onRevealedChange'] = (details) => {\n      emit('revealed-change', details)\n      emit('update:revealed', details.revealed)\n    }\n    const ctx = usePasswordInput(\n      withXhConfig('password-input', useFormControlProps(props)) as PasswordInputProps,\n      { onValueChange, onRevealedChange },\n    )\n    providePasswordInput(ctx)\n    return () => {\n      const api = ctx.api.value\n      return h('div', api.getRootProps() as Record<string, unknown>, slots.default\n        ? slots.default({\n            value: api.value,\n            empty: api.empty,\n            revealed: api.revealed,\n            capsLock: api.capsLock,\n            inputType: api.inputType,\n            setValue: api.setValue,\n            setRevealed: api.setRevealed,\n            toggleRevealed: api.toggleRevealed,\n          })\n        : renderDefaultStructure(api, props.label, slots.label))\n    }\n  },\n})\n\nexport const XhPasswordInputLabel = defineComponent({\n  name: 'XhPasswordInputLabel',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 渲出来就登记，在 setup 里同步做：排在输入之前时首帧与服务端直出就带上名字\n    ctx.labelCount.value++\n    onUnmounted(() => {\n      ctx.labelCount.value--\n    })\n    // 必须是原生 <label>，connect 把 for 写向 input\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputControl = defineComponent({\n  name: 'XhPasswordInputControl',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 视觉盒：输入框、切换钮与大写锁定提示都排在它里面\n    return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputInput = defineComponent({\n  name: 'XhPasswordInputInput',\n  setup() {\n    // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n    const fieldLabel = useFieldLabelWiring()\n    const ctx = usePasswordInputContext()\n    // 原生 <input>：光标、选区与撤销都归浏览器，label 的 for 也指着它\n    // 输入框自己的描述链（大写锁定提示）与字段的拼起来，不互相顶掉\n    return () => h('input', fieldLabel.value(withFieldDescription(\n      { ...fieldWiring.value, ...ctx.api.value.getInputProps() as Record<string, unknown> },\n      fieldWiring.value['aria-describedby'] as string | undefined,\n    )))\n  },\n})\n\nexport const XhPasswordInputVisibilityTrigger = defineComponent({\n  name: 'XhPasswordInputVisibilityTrigger',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 原生 <button>，Enter / Space 的激活交给平台\n    return () => h('button', ctx.api.value.getVisibilityTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputCapsLockIndicator = defineComponent({\n  name: 'XhPasswordInputCapsLockIndicator',\n  setup() {\n    const ctx = usePasswordInputContext()\n    // 区内文字由组件写：活区域播报的是内容，不是名字。关着时是空串，节点仍在场\n    return () => h('span', ctx.api.value.getCapsLockIndicatorProps() as Record<string, unknown>, ctx.api.value.capsLockMessage)\n  },\n})\n\n/** 强度条：档位由调用方评分后经 strength 传入，未提供时收起。 */\nexport const XhPasswordInputStrengthMeter = defineComponent({\n  name: 'XhPasswordInputStrengthMeter',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    return () => h('div', ctx.api.value.getStrengthMeterProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 标准结构里各部件对应的组件。 */\nconst PASSWORD_INPUT_PARTS = {\n  'label': XhPasswordInputLabel,\n  'control': XhPasswordInputControl,\n  'input': XhPasswordInputInput,\n  'caps-lock-indicator': XhPasswordInputCapsLockIndicator,\n  'visibility-trigger': XhPasswordInputVisibilityTrigger,\n  'strength-meter': XhPasswordInputStrengthMeter,\n}\n\n/**\n * 未写默认插槽时铺开的整套结构：照 headless 的 passwordInputStructure 渲，\n * 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。\n */\nfunction renderDefaultStructure(api: PasswordInputApi, label: string | undefined, labelSlot?: () => VNode[]): VNode[] {\n  const nodes = passwordInputStructure(api, { label, slotted: name => name === 'label' && labelSlot != null })\n  return renderStructure(nodes, PASSWORD_INPUT_PARTS, node => (node.slot ? labelSlot?.() : undefined))\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,12 @@
-import { ComputedRef } from "vue";
 import { PasswordInputApi, PasswordInputSchema } from "@xihan-ui/headless";
+import { ComputedRef, Ref } from "vue";
 //#region src/components/password-input/use-password-input.d.ts
 interface PasswordInputContext {
+  /**
+   * 已渲染的 label 部件数量，由 XhPasswordInputLabel 在 setup 里同步登记、卸载时撤销。
+   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。
+   */
+  labelCount: Ref<number>;
   api: ComputedRef<PasswordInputApi>;
 }
 declare function usePasswordInput(props: PasswordInputSchema['props'], handlers?: Pick<PasswordInputSchema['props'], 'onValueChange' | 'onRevealedChange'>): PasswordInputContext;

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

@@ -1 +1 @@
-{"version":3,"file":"use-password-input.d.ts","names":[],"sources":["../../../src/components/password-input/use-password-input.ts"],"mappings":";;;UAgBiB;EACf,KAAK,YAAY;;iBAGH,iBACd,OAAO,8BACP,WAAU,KAAK,sEACd"}
+{"version":3,"file":"use-password-input.d.ts","names":[],"sources":["../../../src/components/password-input/use-password-input.ts"],"mappings":";;;UAgBiB;;;;;EAKf,YAAY;EACZ,KAAK,YAAY;;iBAGH,iBACd,OAAO,8BACP,WAAU,KAAK,sEACd"}

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

@@ -1,16 +1,22 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
-import { computed } from "vue";
-import { createScope } from "@xihan-ui/core";
 import { connectPasswordInput, passwordInputMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
+import { createScope } from "@xihan-ui/core";
 //#region src/components/password-input/use-password-input.ts
 function usePasswordInput(props, handlers = {}) {
+	const scope = createScope(null, createVueIdGenerator());
+	const labelCount = ref(0);
 	const service = useMachine(passwordInputMachine, () => ({
 		...props,
+		labelled: labelCount.value > 0,
 		...handlers
-	}), createScope(null, createVueIdGenerator()));
-	return { api: computed(() => connectPasswordInput(service, vueNormalize)) };
+	}), scope);
+	return {
+		labelCount,
+		api: computed(() => connectPasswordInput(service, vueNormalize))
+	};
 }
 //#endregion
 export { usePasswordInput };

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

@@ -1 +1 @@
-{"version":3,"file":"use-password-input.js","names":[],"sources":["../../../src/components/password-input/use-password-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 password input 相关实现。\n\nimport type { PasswordInputApi, PasswordInputSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectPasswordInput, passwordInputMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface PasswordInputContext {\n  api: ComputedRef<PasswordInputApi>\n}\n\nexport function usePasswordInput(\n  props: PasswordInputSchema['props'],\n  handlers: Pick<PasswordInputSchema['props'], 'onValueChange' | 'onRevealedChange'> = {},\n): PasswordInputContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(passwordInputMachine, () => ({ ...props, ...handlers }), scope)\n  const api = computed(() => connectPasswordInput(service, vueNormalize))\n  return { api }\n}\n"],"mappings":";;;;;;;AAoBA,SAAgB,iBACd,OACA,WAAqF,CAAC,GAChE;CAItB,MAAM,UAAU,WAAW,6BAA6B;EAAE,GAAG;EAAO,GAAG;CAAS,IADlE,YAAY,MADZ,qBACsB,CACoD,CAAC;CAEzF,OAAO,EAAE,KADG,eAAe,qBAAqB,SAAS,YAAY,CAC1D,EAAE;AACf"}
+{"version":3,"file":"use-password-input.js","names":[],"sources":["../../../src/components/password-input/use-password-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 password input 相关实现。\n\nimport type { PasswordInputApi, PasswordInputSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectPasswordInput, passwordInputMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface PasswordInputContext {\n  /**\n   * 已渲染的 label 部件数量，由 XhPasswordInputLabel 在 setup 里同步登记、卸载时撤销。\n   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。\n   */\n  labelCount: Ref<number>\n  api: ComputedRef<PasswordInputApi>\n}\n\nexport function usePasswordInput(\n  props: PasswordInputSchema['props'],\n  handlers: Pick<PasswordInputSchema['props'], 'onValueChange' | 'onRevealedChange'> = {},\n): PasswordInputContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const labelCount = ref(0)\n  const service = useMachine(passwordInputMachine, () => ({ ...props, labelled: labelCount.value > 0, ...handlers }), scope)\n  const api = computed(() => connectPasswordInput(service, vueNormalize))\n  return { labelCount, api }\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,iBACd,OACA,WAAqF,CAAC,GAChE;CAGtB,MAAM,QAAQ,YAAY,MADZ,qBACsB,CAAC;CACrC,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,UAAU,WAAW,6BAA6B;EAAE,GAAG;EAAO,UAAU,WAAW,QAAQ;EAAG,GAAG;CAAS,IAAI,KAAK;CAEzH,OAAO;EAAE;EAAY,KADT,eAAe,qBAAqB,SAAS,YAAY,CAC9C;CAAE;AAC3B"}

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

@@ -1,6 +1,6 @@
 import { PayloadOf } from "../../runtime/payload.js";
-import { PropType, SlotsType, VNode } from "vue";
 import { ChartDatumDetails, ChartKey, ChartRow, NumberFormatSpec, PieChartApi, PieChartSchema, PieChartTranslations, PieLabelContent, PieLabelDetails, PieLabels, PieSort, PieSweep, PieTooltipModel, PieVariant } from "@xihan-ui/headless";
+import { PropType, SlotsType, VNode } from "vue";
 //#region src/components/pie-chart/pie-chart.d.ts
 type PieChartProps = PieChartSchema['props'];
 /** 默认插槽的载荷：自行摆放部件时用得上的状态与动作。 */
@@ -176,15 +176,15 @@ declare const XhPieChartRoot: import("vue").DefineComponent<import("vue").Extrac
     type: PropType<Partial<PieChartTranslations>>;
   };
 }>> & 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;
   rose: boolean;
 }, SlotsType<{
   /** 自行摆放部件；不写时铺开缺省结构：图例、视口（绘图区、环形中心与空态）、提示框。 */

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

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

package/dist/components/pie-chart/use-pie-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 { connectPieChart, pieChartMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
 //#region src/components/pie-chart/use-pie-chart.ts
 /** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */
 function usePieChart(props, notify) {

package/dist/components/pin-input/pin-input.d.ts

@@ -1,12 +1,20 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { PinInputApi, PinInputSchema, PinInputTranslations, PinInputType } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { ControlVariant, Size, Tone } from "@xihan-ui/core";
-import { PinInputApi, PinInputSchema, PinInputTranslations, PinInputType } from "@xihan-ui/headless";
 //#region src/components/pin-input/pin-input.d.ts
 type PinInputProps = PinInputSchema['props'];
 /** 默认插槽的载荷：逐格的值与拼接后的串、是否填满、格数与焦点所在格，以及修改值、清空的命令。 */
 type PinInputRootSlotProps = Pick<PinInputApi, 'value' | 'valueAsString' | 'complete' | 'length' | 'focusedIndex' | 'setValue' | 'clear'>;
 declare const XhPinInputRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
+  /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+  label: {
+    type: StringConstructor;
+  };
   value: {
     type: PropType<string[]>;
   };
@@ -66,6 +74,14 @@ declare const XhPinInputRoot: import("vue").DefineComponent<import("vue").Extrac
   'value-complete': (_details: PayloadOf<PinInputProps, "onValueComplete">) => true;
   'update:value': (_value: PayloadOf<PinInputProps, "onValueChange">["value"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
+  /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+  label: {
+    type: StringConstructor;
+  };
   value: {
     type: PropType<string[]>;
   };
@@ -132,6 +148,8 @@ declare const XhPinInputRoot: import("vue").DefineComponent<import("vue").Extrac
   blurOnComplete: boolean;
 }, SlotsType<{
   default?: (props: PinInputRootSlotProps) => VNode[];
+  /** 不写默认插槽时标题的内容，代替 label 文字。 */
+  label?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhPinInputLabel: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;

package/dist/components/pin-input/pin-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pin-input.d.ts","names":[],"sources":["../../../src/components/pin-input/pin-input.ts"],"mappings":";;;;;KAkBK,gBAAgB;;KAGT,wBAAwB,KAClC;cAIW,8BAAc,8BAAA;;IAIC,MAAA;;;IACO,MAAA;;;;;;IAGP,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWN,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;EAItB,iBAAA,UAAA,UAAU;EACR,mBAAA,UAAA,UAAU;EACd,iBAAA,QAAA,UAAU;;;IAxBX,MAAA;;;IACO,MAAA;;;;;;IAGP,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWN,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;EASvC,WAAC,OAAO,0BAA0B;kCAuB9C;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAO1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAM1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+BAAe,8BAAA;;IAIW,MAAA;;;;;;;IAAA,MAAA;;;MAMrC,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAMhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"pin-input.d.ts","names":[],"sources":["../../../src/components/pin-input/pin-input.ts"],"mappings":";;;;;KAoBK,gBAAgB;;KAGT,wBAAwB,KAClC;cAIW,8BAAc,8BAAA;;;;;;;;;;IAQC,MAAA;;;IACO,MAAA;;;;;;IAGP,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWN,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;EAItB,iBAAA,UAAA,UAAU;EACR,mBAAA,UAAA,UAAU;EACd,iBAAA,QAAA,UAAU;;;;;;;;;;;IAxBX,MAAA;;;IACO,MAAA;;;;;;IAGP,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWN,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;EASvC,WAAC,OAAO,0BAA0B;;EAEpC,cAAM;kCAyBhB;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAY1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAM1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+BAAe,8BAAA;;IAIW,MAAA;;;;;;;IAAA,MAAA;;;MAMrC,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAMhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

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

@@ -1,13 +1,19 @@
+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 { providePinInput, usePinInputContext } from "./context.js";
 import { usePinInput } from "./use-pin-input.js";
-import { defineComponent, h } from "vue";
+import { pinInputStructure } from "@xihan-ui/headless";
+import { defineComponent, h, onUnmounted } from "vue";
 //#region src/components/pin-input/pin-input.ts
 const XhPinInputRoot = defineComponent({
 	name: "XhPinInputRoot",
 	props: {
+		/** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+		ariaLabel: { type: String },
+		/** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+		label: { type: String },
 		value: { type: Array },
 		defaultValue: { type: Array },
 		length: { type: Number },
@@ -61,7 +67,7 @@ const XhPinInputRoot = defineComponent({
 		return () => h("div", fieldLabel.value({
 			...fieldWiring.value,
 			...ctx.api.value.getRootProps()
-		}), slots.default?.({
+		}), slots.default ? slots.default({
 			value: ctx.api.value.value,
 			valueAsString: ctx.api.value.valueAsString,
 			complete: ctx.api.value.complete,
@@ -69,13 +75,20 @@ const XhPinInputRoot = defineComponent({
 			focusedIndex: ctx.api.value.focusedIndex,
 			setValue: ctx.api.value.setValue,
 			clear: ctx.api.value.clear
-		}));
+		}) : renderDefaultStructure(ctx.api.value, {
+			label: props.label,
+			hiddenInput: props.name !== void 0
+		}, slots.label));
 	}
 });
 const XhPinInputLabel = defineComponent({
 	name: "XhPinInputLabel",
 	setup(_, { slots }) {
 		const ctx = usePinInputContext();
+		ctx.labelCount.value++;
+		onUnmounted(() => {
+			ctx.labelCount.value--;
+		});
 		return () => h("label", ctx.api.value.getLabelProps(), slots.default?.());
 	}
 });
@@ -113,6 +126,23 @@ const XhPinInputHiddenInput = defineComponent({
 		return () => h("input", ctx.api.value.getHiddenInputProps());
 	}
 });
+/** 标准结构里各部件对应的组件。 */
+const PIN_INPUT_PARTS = {
+	"label": XhPinInputLabel,
+	"group": XhPinInputGroup,
+	"input": XhPinInputInput,
+	"hidden-input": XhPinInputHiddenInput
+};
+/**
+* 未写默认插槽时铺开的整套结构：照 headless 的 pinInputStructure 渲，
+* 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。
+*/
+function renderDefaultStructure(api, options, labelSlot) {
+	return renderStructure(pinInputStructure(api, {
+		...options,
+		slotted: (name) => name === "label" && labelSlot != null
+	}), PIN_INPUT_PARTS, (node) => node.slot ? labelSlot?.() : void 0);
+}
 //#endregion
 export { XhPinInputGroup, XhPinInputHiddenInput, XhPinInputInput, XhPinInputLabel, XhPinInputRoot, XhPinInputSeparator };
 

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

@@ -1 +1 @@
-{"version":3,"file":"pin-input.js","names":[],"sources":["../../../src/components/pin-input/pin-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// 提供 pin input 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { PinInputApi, PinInputSchema, PinInputTranslations, PinInputType } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { providePinInput, usePinInputContext } from './context'\nimport { usePinInput } from './use-pin-input'\n\ntype PinInputProps = PinInputSchema['props']\n\n/** 默认插槽的载荷：逐格的值与拼接后的串、是否填满、格数与焦点所在格，以及修改值、清空的命令。 */\nexport type PinInputRootSlotProps = Pick<\n  PinInputApi,\n  'value' | 'valueAsString' | 'complete' | 'length' | 'focusedIndex' | 'setValue' | 'clear'\n>\n\nexport const XhPinInputRoot = defineComponent({\n  name: 'XhPinInputRoot',\n  props: {\n    // 缺席值 undefined 表示非受控\n    value: { type: Array as PropType<string[]> },\n    defaultValue: { type: Array as PropType<string[]> },\n    // 缺省值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n    length: { type: Number },\n    type: { type: String as PropType<PinInputType> },\n    pattern: { type: String },\n    mask: Boolean,\n    otp: Boolean,\n    placeholder: { type: String },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    blurOnComplete: Boolean,\n    name: { type: String },\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<PinInputTranslations>> },\n  },\n  // value-change 携带 { value, valueAsString }，update:value 携带裸数组\n  emits: {\n    'value-change': (_details: PayloadOf<PinInputProps, 'onValueChange'>) => true,\n    'value-complete': (_details: PayloadOf<PinInputProps, 'onValueComplete'>) => true,\n    'update:value': (_value: PayloadOf<PinInputProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: PinInputRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const onValueChange: PinInputProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const onValueComplete: PinInputProps['onValueComplete'] = details => emit('value-complete', details)\n    const ctx = usePinInput(withXhConfig('pin-input', useFormControlProps(props)) as PinInputProps, { onValueChange, onValueComplete })\n    providePinInput(ctx)\n    // 放进表单字段时，字段的标题与说明接到整组上：读屏进组时念组名与说明，每格的名字仍是「第几格」\n    const fieldWiring = useFieldGroupWiring()\n    const fieldLabel = useFieldLabelWiring()\n    return () => h('div', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getRootProps() as Record<string, unknown> }), slots.default?.({\n      value: ctx.api.value.value,\n      valueAsString: ctx.api.value.valueAsString,\n      complete: ctx.api.value.complete,\n      length: ctx.api.value.length,\n      focusedIndex: ctx.api.value.focusedIndex,\n      setValue: ctx.api.value.setValue,\n      clear: ctx.api.value.clear,\n    }))\n  },\n})\n\nexport const XhPinInputLabel = defineComponent({\n  name: 'XhPinInputLabel',\n  setup(_, { slots }) {\n    const ctx = usePinInputContext()\n    // 必须是原生 label，getLabelProps 的 for 恒写向首格\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 分段：相邻的几格圈为一段（123-456 这种分段写法）。 */\nexport const XhPinInputGroup = defineComponent({\n  name: 'XhPinInputGroup',\n  setup(_, { slots }) {\n    const ctx = usePinInputContext()\n    return () => h('div', ctx.api.value.getGroupProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 段与段之间的分隔；对读屏隐藏。 */\nexport const XhPinInputSeparator = defineComponent({\n  name: 'XhPinInputSeparator',\n  setup(_, { slots }) {\n    const ctx = usePinInputContext()\n    return () => h('span', ctx.api.value.getSeparatorProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPinInputInput = defineComponent({\n  name: 'XhPinInputInput',\n  props: {\n    // 下标由作者声明，兼收字符串以支持模板里写 index=\"0\"\n    index: { type: [Number, String] as PropType<number | string>, required: true },\n  },\n  setup(props) {\n    const ctx = usePinInputContext()\n    return () => h('input', ctx.api.value.getInputProps({ index: Math.trunc(Number(props.index)) }) as Record<string, unknown>)\n  },\n})\n\nexport const XhPinInputHiddenInput = defineComponent({\n  name: 'XhPinInputHiddenInput',\n  setup() {\n    const ctx = usePinInputContext()\n    return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"pin-input.js","names":[],"sources":["../../../src/components/pin-input/pin-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// 提供 pin input 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { PinInputApi, PinInputSchema, PinInputTranslations, PinInputType } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { pinInputStructure } from '@xihan-ui/headless'\nimport { defineComponent, h, onUnmounted } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { renderStructure } from '../../runtime/structure'\nimport { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { providePinInput, usePinInputContext } from './context'\nimport { usePinInput } from './use-pin-input'\n\ntype PinInputProps = PinInputSchema['props']\n\n/** 默认插槽的载荷：逐格的值与拼接后的串、是否填满、格数与焦点所在格，以及修改值、清空的命令。 */\nexport type PinInputRootSlotProps = Pick<\n  PinInputApi,\n  'value' | 'valueAsString' | 'complete' | 'length' | 'focusedIndex' | 'setValue' | 'clear'\n>\n\nexport const XhPinInputRoot = defineComponent({\n  name: 'XhPinInputRoot',\n  props: {\n    /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */\n    ariaLabel: { type: String },\n    /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */\n    label: { type: String },\n    // 缺席值 undefined 表示非受控\n    value: { type: Array as PropType<string[]> },\n    defaultValue: { type: Array as PropType<string[]> },\n    // 缺省值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n    length: { type: Number },\n    type: { type: String as PropType<PinInputType> },\n    pattern: { type: String },\n    mask: Boolean,\n    otp: Boolean,\n    placeholder: { type: String },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    blurOnComplete: Boolean,\n    name: { type: String },\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<PinInputTranslations>> },\n  },\n  // value-change 携带 { value, valueAsString }，update:value 携带裸数组\n  emits: {\n    'value-change': (_details: PayloadOf<PinInputProps, 'onValueChange'>) => true,\n    'value-complete': (_details: PayloadOf<PinInputProps, 'onValueComplete'>) => true,\n    'update:value': (_value: PayloadOf<PinInputProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: PinInputRootSlotProps) => VNode[]\n    /** 不写默认插槽时标题的内容，代替 label 文字。 */\n    label?: () => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const onValueChange: PinInputProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const onValueComplete: PinInputProps['onValueComplete'] = details => emit('value-complete', details)\n    const ctx = usePinInput(withXhConfig('pin-input', useFormControlProps(props)) as PinInputProps, { onValueChange, onValueComplete })\n    providePinInput(ctx)\n    // 放进表单字段时，字段的标题与说明接到整组上：读屏进组时念组名与说明，每格的名字仍是「第几格」\n    const fieldWiring = useFieldGroupWiring()\n    const fieldLabel = useFieldLabelWiring()\n    return () => h('div', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getRootProps() as Record<string, unknown> }), slots.default\n      ? slots.default({\n          value: ctx.api.value.value,\n          valueAsString: ctx.api.value.valueAsString,\n          complete: ctx.api.value.complete,\n          length: ctx.api.value.length,\n          focusedIndex: ctx.api.value.focusedIndex,\n          setValue: ctx.api.value.setValue,\n          clear: ctx.api.value.clear,\n        })\n      : renderDefaultStructure(ctx.api.value, { label: props.label, hiddenInput: props.name !== undefined }, slots.label))\n  },\n})\n\nexport const XhPinInputLabel = defineComponent({\n  name: 'XhPinInputLabel',\n  setup(_, { slots }) {\n    const ctx = usePinInputContext()\n    // 渲出来就登记，在 setup 里同步做：排在输入之前时首帧与服务端直出就带上名字\n    ctx.labelCount.value++\n    onUnmounted(() => {\n      ctx.labelCount.value--\n    })\n    // 必须是原生 label，getLabelProps 的 for 恒写向首格\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 分段：相邻的几格圈为一段（123-456 这种分段写法）。 */\nexport const XhPinInputGroup = defineComponent({\n  name: 'XhPinInputGroup',\n  setup(_, { slots }) {\n    const ctx = usePinInputContext()\n    return () => h('div', ctx.api.value.getGroupProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 段与段之间的分隔；对读屏隐藏。 */\nexport const XhPinInputSeparator = defineComponent({\n  name: 'XhPinInputSeparator',\n  setup(_, { slots }) {\n    const ctx = usePinInputContext()\n    return () => h('span', ctx.api.value.getSeparatorProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPinInputInput = defineComponent({\n  name: 'XhPinInputInput',\n  props: {\n    // 下标由作者声明，兼收字符串以支持模板里写 index=\"0\"\n    index: { type: [Number, String] as PropType<number | string>, required: true },\n  },\n  setup(props) {\n    const ctx = usePinInputContext()\n    return () => h('input', ctx.api.value.getInputProps({ index: Math.trunc(Number(props.index)) }) as Record<string, unknown>)\n  },\n})\n\nexport const XhPinInputHiddenInput = defineComponent({\n  name: 'XhPinInputHiddenInput',\n  setup() {\n    const ctx = usePinInputContext()\n    return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n  },\n})\n\n/** 标准结构里各部件对应的组件。 */\nconst PIN_INPUT_PARTS = {\n  'label': XhPinInputLabel,\n  'group': XhPinInputGroup,\n  'input': XhPinInputInput,\n  'hidden-input': XhPinInputHiddenInput,\n}\n\n/**\n * 未写默认插槽时铺开的整套结构：照 headless 的 pinInputStructure 渲，\n * 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。\n */\nfunction renderDefaultStructure(api: PinInputApi, options: { label?: string, hiddenInput: boolean }, labelSlot?: () => VNode[]): VNode[] {\n  const nodes = pinInputStructure(api, { ...options, slotted: name => name === 'label' && labelSlot != null })\n  return renderStructure(nodes, PIN_INPUT_PARTS, node => (node.slot ? labelSlot?.() : undefined))\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,12 @@
-import { ComputedRef } from "vue";
 import { PinInputApi, PinInputSchema } from "@xihan-ui/headless";
+import { ComputedRef, Ref } from "vue";
 //#region src/components/pin-input/use-pin-input.d.ts
 interface PinInputContext {
+  /**
+   * 已渲染的 label 部件数量，由 XhPinInputLabel 在 setup 里同步登记、卸载时撤销。
+   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。
+   */
+  labelCount: Ref<number>;
   api: ComputedRef<PinInputApi>;
 }
 declare function usePinInput(props: PinInputSchema['props'], handlers?: Pick<PinInputSchema['props'], 'onValueChange' | 'onValueComplete'>): PinInputContext;

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

@@ -1 +1 @@
-{"version":3,"file":"use-pin-input.d.ts","names":[],"sources":["../../../src/components/pin-input/use-pin-input.ts"],"mappings":";;;UAgBiB;EACf,KAAK,YAAY;;iBAGH,YACd,OAAO,yBACP,WAAU,KAAK,gEACd"}
+{"version":3,"file":"use-pin-input.d.ts","names":[],"sources":["../../../src/components/pin-input/use-pin-input.ts"],"mappings":";;;UAgBiB;;;;;EAKf,YAAY;EACZ,KAAK,YAAY;;iBAGH,YACd,OAAO,yBACP,WAAU,KAAK,gEACd"}

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

@@ -1,16 +1,22 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
-import { computed } from "vue";
-import { createScope } from "@xihan-ui/core";
 import { connectPinInput, pinInputMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
+import { createScope } from "@xihan-ui/core";
 //#region src/components/pin-input/use-pin-input.ts
 function usePinInput(props, handlers = {}) {
+	const scope = createScope(null, createVueIdGenerator());
+	const labelCount = ref(0);
 	const service = useMachine(pinInputMachine, () => ({
 		...props,
+		labelled: labelCount.value > 0,
 		...handlers
-	}), createScope(null, createVueIdGenerator()));
-	return { api: computed(() => connectPinInput(service, vueNormalize)) };
+	}), scope);
+	return {
+		labelCount,
+		api: computed(() => connectPinInput(service, vueNormalize))
+	};
 }
 //#endregion
 export { usePinInput };

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

@@ -1 +1 @@
-{"version":3,"file":"use-pin-input.js","names":[],"sources":["../../../src/components/pin-input/use-pin-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 pin input 相关实现。\n\nimport type { PinInputApi, PinInputSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectPinInput, pinInputMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface PinInputContext {\n  api: ComputedRef<PinInputApi>\n}\n\nexport function usePinInput(\n  props: PinInputSchema['props'],\n  handlers: Pick<PinInputSchema['props'], 'onValueChange' | 'onValueComplete'> = {},\n): PinInputContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(pinInputMachine, () => ({ ...props, ...handlers }), scope)\n  const api = computed(() => connectPinInput(service, vueNormalize))\n  return { api }\n}\n"],"mappings":";;;;;;;AAoBA,SAAgB,YACd,OACA,WAA+E,CAAC,GAC/D;CAIjB,MAAM,UAAU,WAAW,wBAAwB;EAAE,GAAG;EAAO,GAAG;CAAS,IAD7D,YAAY,MADZ,qBACsB,CAC+C,CAAC;CAEpF,OAAO,EAAE,KADG,eAAe,gBAAgB,SAAS,YAAY,CACrD,EAAE;AACf"}
+{"version":3,"file":"use-pin-input.js","names":[],"sources":["../../../src/components/pin-input/use-pin-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 pin input 相关实现。\n\nimport type { PinInputApi, PinInputSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectPinInput, pinInputMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface PinInputContext {\n  /**\n   * 已渲染的 label 部件数量，由 XhPinInputLabel 在 setup 里同步登记、卸载时撤销。\n   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。\n   */\n  labelCount: Ref<number>\n  api: ComputedRef<PinInputApi>\n}\n\nexport function usePinInput(\n  props: PinInputSchema['props'],\n  handlers: Pick<PinInputSchema['props'], 'onValueChange' | 'onValueComplete'> = {},\n): PinInputContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const labelCount = ref(0)\n  const service = useMachine(pinInputMachine, () => ({ ...props, labelled: labelCount.value > 0, ...handlers }), scope)\n  const api = computed(() => connectPinInput(service, vueNormalize))\n  return { labelCount, api }\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,YACd,OACA,WAA+E,CAAC,GAC/D;CAGjB,MAAM,QAAQ,YAAY,MADZ,qBACsB,CAAC;CACrC,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,UAAU,WAAW,wBAAwB;EAAE,GAAG;EAAO,UAAU,WAAW,QAAQ;EAAG,GAAG;CAAS,IAAI,KAAK;CAEpH,OAAO;EAAE;EAAY,KADT,eAAe,gBAAgB,SAAS,YAAY,CACzC;CAAE;AAC3B"}

package/dist/components/popconfirm/popconfirm.d.ts

@@ -1,7 +1,7 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { PopconfirmApi, PopconfirmConfirmErrorDetails, PopconfirmNotifiers, PopconfirmProps } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { Direction, Placement, Size } from "@xihan-ui/core";
-import { PopconfirmApi, PopconfirmConfirmErrorDetails, PopconfirmNotifiers, PopconfirmProps } from "@xihan-ui/headless";
 //#region src/components/popconfirm/popconfirm.d.ts
 /** 默认插槽的载荷：开合、确认事务状态与三个动作。 */
 type PopconfirmRootSlotProps = Pick<PopconfirmApi, 'open' | 'pending' | 'actionError' | 'setOpen' | 'confirm' | 'cancel'>;
@@ -51,7 +51,7 @@ declare const XhPopconfirmRoot: import("vue").DefineComponent<import("vue").Extr
   'open-change': (_details: PayloadOf<PopconfirmProps, "onOpenChange">) => true;
   'update:open': (_open: PayloadOf<PopconfirmProps, "onOpenChange">["open"]) => true;
   'confirm-error': (_details: PopconfirmConfirmErrorDetails) => true;
-  cancel: () => true;
+  'cancel-press': () => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   open: {
     type: BooleanConstructor;
@@ -93,10 +93,10 @@ declare const XhPopconfirmRoot: import("vue").DefineComponent<import("vue").Extr
     type: PropType<PopconfirmNotifiers["onConfirm"]>;
   };
 }>> & Readonly<{
-  onCancel?: (() => any) | undefined;
   "onOpen-change"?: ((_details: import("@xihan-ui/headless").PopoverOpenChangeDetails) => any) | undefined;
   "onUpdate:open"?: ((_open: boolean) => any) | undefined;
   "onConfirm-error"?: ((_details: PopconfirmConfirmErrorDetails) => any) | undefined;
+  "onCancel-press"?: (() => any) | undefined;
 }>, {
   disabled: boolean;
   open: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"popconfirm.d.ts","names":[],"sources":["../../../src/components/popconfirm/popconfirm.ts"],"mappings":";;;;;;KAoBY,0BAA0B,KACpC;cAIW,gCAAgB,8BAAA;;;;;;;IAKI,MAAA,SAAS;;;;;;;IAGf,MAAA,SAAS;;;;;;;;;;;;;;;;IAKR,MAAA,SAAS;;;;;;;;IAMF,MAAA,SAAS;;;;;EAId,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACL,kBAAA,UAAA;;;;;;;;;IApBC,MAAA,SAAS;;;;;;;IAGf,MAAA,SAAS;;;;;;;;;;;;;;;;IAKR,MAAA,SAAS;;;;;;;;IAMF,MAAA,SAAS;;;;;;;;;;;;;;EAU9B,WAAC,OAAO,4BAA4B;kCAuBhD;cAEW,mCAAmB,8BAAA;;;;;;;;;;qCAyB9B;cAEW,sCAAsB,8BAAA;;;IAIF,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;MAgBxC,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAY9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAMlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAMrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAMpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"popconfirm.d.ts","names":[],"sources":["../../../src/components/popconfirm/popconfirm.ts"],"mappings":";;;;;;KAqBY,0BAA0B,KACpC;cAIW,gCAAgB,8BAAA;;;;;;;IAKI,MAAA,SAAS;;;;;;;IAGf,MAAA,SAAS;;;;;;;;;;;;;;;;IAKR,MAAA,SAAS;;;;;;;;IAMF,MAAA,SAAS;;;;;EAId,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACL,kBAAA,UAAA;;;;;;;;;IApBC,MAAA,SAAS;;;;;;;IAGf,MAAA,SAAS;;;;;;;;;;;;;;;;IAKR,MAAA,SAAS;;;;;;;;IAMF,MAAA,SAAS;;;;;;;;;;;;;;EAU9B,WAAC,OAAO,4BAA4B;kCAuBhD;cAEW,mCAAmB,8BAAA;;;;;;;;;;qCAyB9B;cAEW,sCAAsB,8BAAA;;;IAIF,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;MAgBxC,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAY9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAO5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAQlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAMrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAMpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/popconfirm/popconfirm.js

@@ -1,3 +1,4 @@
+import { useDescriptionPart, useTitleDescriptionPart } from "../../runtime/title-description.js";
 import { mergePartProps } from "../../runtime/merge-props.js";
 import { mergeIntoChild } from "../../runtime/as-child.js";
 import { XhPortal } from "../../runtime/portal.js";
@@ -43,7 +44,7 @@ const XhPopconfirmRoot = defineComponent({
 		"open-change": (_details) => true,
 		"update:open": (_open) => true,
 		"confirm-error": (_details) => true,
-		"cancel": () => true
+		"cancel-press": () => true
 	},
 	slots: Object,
 	setup(props, { slots, emit }) {
@@ -54,8 +55,8 @@ const XhPopconfirmRoot = defineComponent({
 			},
 			onConfirm: () => props.onConfirm?.(),
 			onConfirmError: (details) => emit("confirm-error", details),
-			onCancel: () => {
-				emit("cancel");
+			onCancelPress: () => {
+				emit("cancel-press");
 			}
 		});
 		providePopconfirm(ctx);
@@ -134,6 +135,7 @@ const XhPopconfirmTitle = defineComponent({
 	name: "XhPopconfirmTitle",
 	setup(_, { slots }) {
 		const ctx = usePopconfirmContext();
+		useTitleDescriptionPart(ctx.presence, "title");
 		return () => h("h2", ctx.api.value.getTitleProps(), slots.default?.());
 	}
 });
@@ -141,7 +143,11 @@ const XhPopconfirmDescription = defineComponent({
 	name: "XhPopconfirmDescription",
 	setup(_, { slots }) {
 		const ctx = usePopconfirmContext();
-		return () => h("p", ctx.api.value.getDescriptionProps(), slots.default?.());
+		const el = useDescriptionPart(ctx.presence);
+		return () => h("p", {
+			...ctx.api.value.getDescriptionProps(),
+			ref: el
+		}, slots.default?.());
 	}
 });
 const XhPopconfirmConfirmTrigger = defineComponent({