npm - @xihan-ui/vue - Versions diffs - 2.1.0 → 3.1.0 - Mend

@xihan-ui/vue 2.1.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (708) hide show

package/dist/components/tags-input/tags-input.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { withXhConfig } from "../../config/config.js";
+import { withHandlers } from "../../runtime/with-handlers.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
 import { provideTagsInput, provideTagsInputItem, useTagsInputContext, useTagsInputItemContext } from "./context.js";
@@ -33,7 +34,8 @@ const XhTagsInputRoot = defineComponent({
 		showCount: Boolean,
 		name: { type: String },
 		placeholder: { type: String },
-		delimiter: { type: String },
+		delimiter: { type: [String, Array] },
+		validate: { type: Function },
 		addOnPaste: Boolean,
 		editable: Boolean,
 		blurBehavior: { type: String },
@@ -43,10 +45,12 @@ const XhTagsInputRoot = defineComponent({
 		translations: { type: Object }
 	},
 	emits: {
+		"clear": () => true,
 		"value-change": (_details) => true,
 		"update:value": (_value) => true,
 		"input-value-change": (_details) => true,
-		"update:inputValue": (_inputValue) => true
+		"update:inputValue": (_inputValue) => true,
+		"tag-reject": (_details) => true
 	},
 	slots: Object,
 	setup(props, { slots, emit }) {
@@ -58,9 +62,11 @@ const XhTagsInputRoot = defineComponent({
 			emit("input-value-change", details);
 			emit("update:inputValue", details.inputValue);
 		};
-		const ctx = useTagsInput(withXhConfig("tags-input", useFormControlProps(props)), {
+		const onTagReject = (details) => emit("tag-reject", details);
+		const ctx = useTagsInput(withHandlers(withXhConfig("tags-input", useFormControlProps(props)), { onClear: () => emit("clear") }), {
 			onValueChange,
-			onInputValueChange
+			onInputValueChange,
+			onTagReject
 		});
 		provideTagsInput(ctx);
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
@@ -94,7 +100,10 @@ const XhTagsInputControl = defineComponent({
 	name: "XhTagsInputControl",
 	setup(_, { slots }) {
 		const ctx = useTagsInputContext();
-		return () => h("div", ctx.api.value.getControlProps(), slots.default?.());
+		return () => h("div", {
+			...ctx.api.value.getControlProps(),
+			ref: ctx.controlRef
+		}, slots.default?.());
 	}
 });
 const XhTagsInputInput = defineComponent({

package/dist/components/tags-input/tags-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tags-input.js","names":[],"sources":["../../../src/components/tags-input/tags-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// 提供 tags input 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { TagsInputApi, TagsInputBlurBehavior, TagsInputItemProps, TagsInputSchema, TagsInputTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideTagsInput, provideTagsInputItem, useTagsInputContext, useTagsInputItemContext } from './context'\nimport { useTagsInput } from './use-tags-input'\n\ntype TagsInputProps = TagsInputSchema['props']\n\n/* 计数部件默认插槽的载荷：当前个数、上限与已达上限、越界两个标志。 /\nexport type TagsInputCountSlotProps = Pick<TagsInputApi, 'count' \| 'max' \| 'atMax' \| 'overflow'>\n\n/* 默认插槽的载荷：标签集合与输入文本、数量与越界标志、光标与编辑锚点，以及增删改与清空的动作。 /\nexport type TagsInputRootSlotProps = Pick<\n TagsInputApi,\n \| 'value'\n \| 'count'\n \| 'inputValue'\n \| 'empty'\n \| 'atMax'\n \| 'overflow'\n \| 'highlightedValue'\n \| 'editedValue'\n \| 'canClear'\n \| 'setValue'\n \| 'addValue'\n \| 'deleteValue'\n \| 'clear'\n \| 'setInputValue'\n \| 'highlight'\n \| 'edit'\n>\n\nexport const XhTagsInputRoot = defineComponent({\n name: 'XhTagsInputRoot',\n // 有 connect 与机器兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n props: {\n // 缺席值 undefined 表示非受控\n value: { type: Array as PropType<string[]> },\n defaultValue: { type: Array as PropType<string[]> },\n inputValue: { type: String },\n defaultInputValue: { type: String },\n max: { type: Number },\n allowOverflow: Boolean,\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 showCount: Boolean,\n name: { type: String },\n placeholder: { type: String },\n delimiter: { type: String },\n addOnPaste: Boolean,\n editable: Boolean,\n blurBehavior: { type: String as PropType<TagsInputBlurBehavior \| null> },\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<TagsInputTranslations>> },\n },\n // value-change 携带 { value }，update:value 携带裸数组；输入文本走 input-value-change 一路\n emits: {\n 'value-change': (_details: PayloadOf<TagsInputProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<TagsInputProps, 'onValueChange'>['value']) => true,\n 'input-value-change': (_details: PayloadOf<TagsInputProps, 'onInputValueChange'>) => true,\n 'update:inputValue': (_inputValue: PayloadOf<TagsInputProps, 'onInputValueChange'>['inputValue']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: TagsInputRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const onValueChange: TagsInputProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const onInputValueChange: TagsInputProps['onInputValueChange'] = (details) => {\n emit('input-value-change', details)\n emit('update:inputValue', details.inputValue)\n }\n const ctx = useTagsInput(withXhConfig('tags-input', useFormControlProps(props)) as TagsInputProps, { onValueChange, onInputValueChange })\n provideTagsInput(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n value: ctx.api.value.value,\n count: ctx.api.value.count,\n inputValue: ctx.api.value.inputValue,\n empty: ctx.api.value.empty,\n atMax: ctx.api.value.atMax,\n overflow: ctx.api.value.overflow,\n highlightedValue: ctx.api.value.highlightedValue,\n editedValue: ctx.api.value.editedValue,\n canClear: ctx.api.value.canClear,\n setValue: ctx.api.value.setValue,\n addValue: ctx.api.value.addValue,\n deleteValue: ctx.api.value.deleteValue,\n clear: ctx.api.value.clear,\n setInputValue: ctx.api.value.setInputValue,\n highlight: ctx.api.value.highlight,\n edit: ctx.api.value.edit,\n }))\n },\n})\n\nexport const XhTagsInputLabel = defineComponent({\n name: 'XhTagsInputLabel',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n // 用原生 label，getLabelProps 的 for 指向输入框\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTagsInputControl = defineComponent({\n name: 'XhTagsInputControl',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTagsInputInput = defineComponent({\n name: 'XhTagsInputInput',\n setup() {\n // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n const fieldWiring = useFieldStateWiring()\n // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n const fieldLabel = useFieldLabelWiring()\n const ctx = useTagsInputContext()\n return () => h('input', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getInputProps() as Record<string, unknown> }))\n },\n})\n\nexport const XhTagsInputItem = defineComponent({\n name: 'XhTagsInputItem',\n props: {\n value: { type: String, required: true },\n },\n setup(props, { slots }) {\n const ctx = useTagsInputContext()\n const item = computed<TagsInputItemProps>(() => ({ value: props.value }))\n provideTagsInputItem({ item })\n // 本标签持有焦点时，value 变更或卸载都上报焦点离场以终止编辑会话\n const itemEl = ref<HTMLElement \| null>(null)\n const holdsFocus = (): boolean => {\n const { service } = ctx\n if (service.getStatus() !== 'Started')\n return false\n const active = service.scope.getActiveElement()\n return !!itemEl.value && !!active && (itemEl.value === active \|\| itemEl.value.contains(active))\n }\n watch(() => props.value, (next, prev) => {\n if (next !== prev && holdsFocus())\n ctx.service.send({ type: 'ITEM.FOCUS_LOST' })\n })\n onBeforeUnmount(() => {\n if (holdsFocus())\n ctx.service.send({ type: 'ITEM.FOCUS_LOST' })\n })\n return () => h(\n 'div',\n { ...ctx.api.value.getItemProps(item.value) as Record<string, unknown>, ref: itemEl },\n slots.default?.(),\n )\n },\n})\n\n/* 标签的预览：渲染为库内 tag 的 root（data-scope=\"tag\"），就地编辑时由 tag 收起。 /\nexport const XhTagsInputItemPreview = defineComponent({\n name: 'XhTagsInputItemPreview',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n const { item } = useTagsInputItemContext()\n return () => h('span', ctx.api.value.getItemPreviewProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/* 标签文字：渲染为 tag 的 label，截断落在这一层。 /\nexport const XhTagsInputItemText = defineComponent({\n name: 'XhTagsInputItemText',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n const { item } = useTagsInputItemContext()\n return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/* 删除按钮：渲染为所在标签那份 tag 的 close-trigger，不占 Tab 位；禁用与只读时保留位置、原生 disabled。 /\nexport const XhTagsInputItemDeleteTrigger = defineComponent({\n name: 'XhTagsInputItemDeleteTrigger',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n const { item } = useTagsInputItemContext()\n return () => h('button', ctx.api.value.getItemDeleteTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTagsInputItemInput = defineComponent({\n name: 'XhTagsInputItemInput',\n setup() {\n const ctx = useTagsInputContext()\n const { item } = useTagsInputItemContext()\n return () => h('input', ctx.api.value.getItemInputProps(item.value) as Record<string, unknown>)\n },\n})\n\nexport const XhTagsInputClearTrigger = defineComponent({\n name: 'XhTagsInputClearTrigger',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/* 计数：未写内容时渲染「已用 / 上限」，未设上限时只渲染已用。 */\nexport const XhTagsInputCount = defineComponent({\n name: 'XhTagsInputCount',\n slots: Object as SlotsType<{\n default?: (props: TagsInputCountSlotProps) => VNode[]\n }>,\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n return () => {\n const api = ctx.api.value\n const fallback = api.max === undefined ? `${api.count}` : `${api.count} / ${api.max}`\n return h(\n 'span',\n api.getCountProps() as Record<string, unknown>,\n slots.default?.({ count: api.count, max: api.max, atMax: api.atMax, overflow: api.overflow }) ?? fallback,\n )\n }\n },\n})\n\nexport const XhTagsInputHiddenInput = defineComponent({\n name: 'XhTagsInputHiddenInput',\n setup() {\n const ctx = useTagsInputContext()\n return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n },\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"tags-input.js","names":[],"sources":["../../../src/components/tags-input/tags-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// 提供 tags input 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { TagsInputApi, TagsInputBlurBehavior, TagsInputItemProps, TagsInputSchema, TagsInputTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { withHandlers } from '../../runtime/with-handlers'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideTagsInput, provideTagsInputItem, useTagsInputContext, useTagsInputItemContext } from './context'\nimport { useTagsInput } from './use-tags-input'\n\ntype TagsInputProps = TagsInputSchema['props']\n\n/* 计数部件默认插槽的载荷：当前个数、上限与已达上限、越界两个标志。 /\nexport type TagsInputCountSlotProps = Pick<TagsInputApi, 'count' \| 'max' \| 'atMax' \| 'overflow'>\n\n/* 默认插槽的载荷：标签集合与输入文本、数量与越界标志、光标与编辑锚点，以及增删改与清空的动作。 /\nexport type TagsInputRootSlotProps = Pick<\n TagsInputApi,\n \| 'value'\n \| 'count'\n \| 'inputValue'\n \| 'empty'\n \| 'atMax'\n \| 'overflow'\n \| 'highlightedValue'\n \| 'editedValue'\n \| 'canClear'\n \| 'setValue'\n \| 'addValue'\n \| 'deleteValue'\n \| 'clear'\n \| 'setInputValue'\n \| 'highlight'\n \| 'edit'\n>\n\nexport const XhTagsInputRoot = defineComponent({\n name: 'XhTagsInputRoot',\n // 有 connect 与机器兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n props: {\n // 缺席值 undefined 表示非受控\n value: { type: Array as PropType<string[]> },\n defaultValue: { type: Array as PropType<string[]> },\n inputValue: { type: String },\n defaultInputValue: { type: String },\n max: { type: Number },\n allowOverflow: Boolean,\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 showCount: Boolean,\n name: { type: String },\n placeholder: { type: String },\n delimiter: { type: [String, Array] as PropType<string \| string[]> },\n validate: { type: Function as PropType<TagsInputProps['validate']> },\n addOnPaste: Boolean,\n editable: Boolean,\n blurBehavior: { type: String as PropType<TagsInputBlurBehavior \| null> },\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<TagsInputTranslations>> },\n },\n // value-change 携带 { value }，update:value 携带裸数组；输入文本走 input-value-change 一路\n emits: {\n 'clear': () => true,\n 'value-change': (_details: PayloadOf<TagsInputProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<TagsInputProps, 'onValueChange'>['value']) => true,\n 'input-value-change': (_details: PayloadOf<TagsInputProps, 'onInputValueChange'>) => true,\n 'update:inputValue': (_inputValue: PayloadOf<TagsInputProps, 'onInputValueChange'>['inputValue']) => true,\n 'tag-reject': (_details: PayloadOf<TagsInputProps, 'onTagReject'>) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: TagsInputRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const onValueChange: TagsInputProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const onInputValueChange: TagsInputProps['onInputValueChange'] = (details) => {\n emit('input-value-change', details)\n emit('update:inputValue', details.inputValue)\n }\n const onTagReject: TagsInputProps['onTagReject'] = details => emit('tag-reject', details)\n const ctx = useTagsInput(withHandlers(withXhConfig('tags-input', useFormControlProps(props)), { onClear: () => emit('clear') }) as TagsInputProps, { onValueChange, onInputValueChange, onTagReject })\n provideTagsInput(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n value: ctx.api.value.value,\n count: ctx.api.value.count,\n inputValue: ctx.api.value.inputValue,\n empty: ctx.api.value.empty,\n atMax: ctx.api.value.atMax,\n overflow: ctx.api.value.overflow,\n highlightedValue: ctx.api.value.highlightedValue,\n editedValue: ctx.api.value.editedValue,\n canClear: ctx.api.value.canClear,\n setValue: ctx.api.value.setValue,\n addValue: ctx.api.value.addValue,\n deleteValue: ctx.api.value.deleteValue,\n clear: ctx.api.value.clear,\n setInputValue: ctx.api.value.setInputValue,\n highlight: ctx.api.value.highlight,\n edit: ctx.api.value.edit,\n }))\n },\n})\n\nexport const XhTagsInputLabel = defineComponent({\n name: 'XhTagsInputLabel',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n // 用原生 label，getLabelProps 的 for 指向输入框\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTagsInputControl = defineComponent({\n name: 'XhTagsInputControl',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n return () => h('div', { ...(ctx.api.value.getControlProps() as Record<string, unknown>), ref: ctx.controlRef }, slots.default?.())\n },\n})\n\nexport const XhTagsInputInput = defineComponent({\n name: 'XhTagsInputInput',\n setup() {\n // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n const fieldWiring = useFieldStateWiring()\n // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n const fieldLabel = useFieldLabelWiring()\n const ctx = useTagsInputContext()\n return () => h('input', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getInputProps() as Record<string, unknown> }))\n },\n})\n\nexport const XhTagsInputItem = defineComponent({\n name: 'XhTagsInputItem',\n props: {\n value: { type: String, required: true },\n },\n setup(props, { slots }) {\n const ctx = useTagsInputContext()\n const item = computed<TagsInputItemProps>(() => ({ value: props.value }))\n provideTagsInputItem({ item })\n // 本标签持有焦点时，value 变更或卸载都上报焦点离场以终止编辑会话\n const itemEl = ref<HTMLElement \| null>(null)\n const holdsFocus = (): boolean => {\n const { service } = ctx\n if (service.getStatus() !== 'Started')\n return false\n const active = service.scope.getActiveElement()\n return !!itemEl.value && !!active && (itemEl.value === active \|\| itemEl.value.contains(active))\n }\n watch(() => props.value, (next, prev) => {\n if (next !== prev && holdsFocus())\n ctx.service.send({ type: 'ITEM.FOCUS_LOST' })\n })\n onBeforeUnmount(() => {\n if (holdsFocus())\n ctx.service.send({ type: 'ITEM.FOCUS_LOST' })\n })\n return () => h(\n 'div',\n { ...ctx.api.value.getItemProps(item.value) as Record<string, unknown>, ref: itemEl },\n slots.default?.(),\n )\n },\n})\n\n/* 标签的预览：渲染为库内 tag 的 root（data-scope=\"tag\"），就地编辑时由 tag 收起。 /\nexport const XhTagsInputItemPreview = defineComponent({\n name: 'XhTagsInputItemPreview',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n const { item } = useTagsInputItemContext()\n return () => h('span', ctx.api.value.getItemPreviewProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/* 标签文字：渲染为 tag 的 label，截断落在这一层。 /\nexport const XhTagsInputItemText = defineComponent({\n name: 'XhTagsInputItemText',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n const { item } = useTagsInputItemContext()\n return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/* 删除按钮：渲染为所在标签那份 tag 的 close-trigger，不占 Tab 位；禁用与只读时保留位置、原生 disabled。 /\nexport const XhTagsInputItemDeleteTrigger = defineComponent({\n name: 'XhTagsInputItemDeleteTrigger',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n const { item } = useTagsInputItemContext()\n return () => h('button', ctx.api.value.getItemDeleteTriggerProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTagsInputItemInput = defineComponent({\n name: 'XhTagsInputItemInput',\n setup() {\n const ctx = useTagsInputContext()\n const { item } = useTagsInputItemContext()\n return () => h('input', ctx.api.value.getItemInputProps(item.value) as Record<string, unknown>)\n },\n})\n\nexport const XhTagsInputClearTrigger = defineComponent({\n name: 'XhTagsInputClearTrigger',\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/* 计数：未写内容时渲染「已用 / 上限」，未设上限时只渲染已用。 */\nexport const XhTagsInputCount = defineComponent({\n name: 'XhTagsInputCount',\n slots: Object as SlotsType<{\n default?: (props: TagsInputCountSlotProps) => VNode[]\n }>,\n setup(_, { slots }) {\n const ctx = useTagsInputContext()\n return () => {\n const api = ctx.api.value\n const fallback = api.max === undefined ? `${api.count}` : `${api.count} / ${api.max}`\n return h(\n 'span',\n api.getCountProps() as Record<string, unknown>,\n slots.default?.({ count: api.count, max: api.max, atMax: api.atMax, overflow: api.overflow }) ?? fallback,\n )\n }\n },\n})\n\nexport const XhTagsInputHiddenInput = defineComponent({\n name: 'XhTagsInputHiddenInput',\n setup() {\n const ctx = useTagsInputContext()\n return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n },\n})\n"],"mappings":"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"}

package/dist/components/tags-input/use-tags-input.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ComputedRef } from "vue";
+import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
 import { TagsInputApi, TagsInputSchema } from "@xihan-ui/headless";
 //#region src/components/tags-input/use-tags-input.d.ts
@@ -6,8 +6,10 @@ interface TagsInputContext {
   api: ComputedRef<TagsInputApi>;
   /** 状态机实例，供部件上报 DOM 侧的事实（如标签节点带着焦点离场）。 */
   service: Service<TagsInputSchema>;
+  /** 标签所在的容器：列表动效接在它上面。 */
+  controlRef: Ref<HTMLElement | null>;
 }
-declare function useTagsInput(props: TagsInputSchema['props'], handlers?: Pick<TagsInputSchema['props'], 'onValueChange' | 'onInputValueChange'>): TagsInputContext;
+declare function useTagsInput(props: TagsInputSchema['props'], handlers?: Pick<TagsInputSchema['props'], 'onValueChange' | 'onInputValueChange' | 'onTagReject'>): TagsInputContext;
 //#endregion
 export { TagsInputContext, useTagsInput };
 //# sourceMappingURL=use-tags-input.d.ts.map

package/dist/components/tags-input/use-tags-input.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tags-input.d.ts","names":[],"sources":["../../../src/components/tags-input/use-tags-input.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;~~iBAGH~~,aACd,OAAO,0BACP,WAAU,KAAK,~~oEACd~~"}
1	+ {"version":3,"file":"use-tags-input.d.ts","names":[],"sources":["../../../src/components/tags-input/use-tags-input.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;EAEjB,YAAY,IAAI;;iBAGF,aACd,OAAO,0BACP,WAAU,KAAK,oFACd"}

package/dist/components/tags-input/use-tags-input.js CHANGED Viewed

@@ -1,7 +1,7 @@
 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 { computed, ref } from "vue";
 import { createScope } from "@xihan-ui/core";
 import { connectTagsInput, tagsInputMachine } from "@xihan-ui/headless";
 //#region src/components/tags-input/use-tags-input.ts
@@ -10,9 +10,12 @@ function useTagsInput(props, handlers = {}) {
 		...props,
 		...handlers
 	}), createScope(null, createVueIdGenerator()));
+	const controlRef = ref(null);
+	service.refs.set("getControlEl", () => controlRef.value);
 	return {
 		api: computed(() => connectTagsInput(service, vueNormalize)),
-		service
+		service,
+		controlRef
 	};
 }
 //#endregion

package/dist/components/tags-input/use-tags-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tags-input.js","names":[],"sources":["../../../src/components/tags-input/use-tags-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 tags input 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { TagsInputApi, TagsInputSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectTagsInput, tagsInputMachine } 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 TagsInputContext {\n api: ComputedRef<TagsInputApi>\n /* 状态机实例，供部件上报 DOM 侧的事实（如标签节点带着焦点离场）。 */\n service: Service<TagsInputSchema>\n}\n\nexport function useTagsInput(\n props: TagsInputSchema['props'],\n handlers: Pick<TagsInputSchema['props'], 'onValueChange' \| 'onInputValueChange'> = {},\n): TagsInputContext {\n // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n const idGen = createVueIdGenerator()\n const scope = createScope(null, idGen)\n const service = useMachine(tagsInputMachine, () => ({ ...props, ...handlers }), scope)\n const api = computed(() => connectTagsInput(service, vueNormalize))\n return { api, service }\n}\n"],"mappings":";;;;;;;~~AAuBA~~,SAAgB,aACd,OACA,~~WAAmF~~,CAAC,~~GAClE~~;CAIlB,MAAM,UAAU,WAAW,yBAAyB;EAAE,GAAG;EAAO,GAAG;CAAS,IAD9D,YAAY,MADZ,qBACsB,CACgD,CAAC;~~CAErF~~,OAAO;EAAE,KADG,eAAe,iBAAiB,SAAS,YAAY,CACtD;EAAG;~~CAAQ~~;~~AACxB~~"}
1	+ {"version":3,"file":"use-tags-input.js","names":[],"sources":["../../../src/components/tags-input/use-tags-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 tags input 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { TagsInputApi, TagsInputSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectTagsInput, tagsInputMachine } 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 TagsInputContext {\n api: ComputedRef<TagsInputApi>\n /* 状态机实例，供部件上报 DOM 侧的事实（如标签节点带着焦点离场）。 /\n service: Service<TagsInputSchema>\n /* 标签所在的容器：列表动效接在它上面。 */\n controlRef: Ref<HTMLElement \| null>\n}\n\nexport function useTagsInput(\n props: TagsInputSchema['props'],\n handlers: Pick<TagsInputSchema['props'], 'onValueChange' \| 'onInputValueChange' \| 'onTagReject'> = {},\n): TagsInputContext {\n // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n const idGen = createVueIdGenerator()\n const scope = createScope(null, idGen)\n const service = useMachine(tagsInputMachine, () => ({ ...props, ...handlers }), scope)\n const controlRef = ref<HTMLElement \| null>(null)\n // 传 getter 而非节点本身，ref 在挂载后才有值\n service.refs.set('getControlEl', () => controlRef.value)\n const api = computed(() => connectTagsInput(service, vueNormalize))\n return { api, service, controlRef }\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,aACd,OACA,WAAmG,CAAC,GAClF;CAIlB,MAAM,UAAU,WAAW,yBAAyB;EAAE,GAAG;EAAO,GAAG;CAAS,IAD9D,YAAY,MADZ,qBACsB,CACgD,CAAC;CACrF,MAAM,aAAa,IAAwB,IAAI;CAE/C,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CAEvD,OAAO;EAAE,KADG,eAAe,iBAAiB,SAAS,YAAY,CACtD;EAAG;EAAS;CAAW;AACpC"}

package/dist/components/text-field/text-field.d.ts CHANGED Viewed

@@ -64,6 +64,7 @@ declare const XhTextFieldRoot: import("vue").DefineComponent<import("vue").Extra
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  clear: () => true;
   'value-change': (_details: PayloadOf<TextFieldProps, "onValueChange">) => true;
   'update:value': (_value: PayloadOf<TextFieldProps, "onValueChange">["value"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -122,6 +123,7 @@ declare const XhTextFieldRoot: import("vue").DefineComponent<import("vue").Extra
 }>> & Readonly<{
   "onValue-change"?: ((_details: import("@xihan-ui/headless").TextFieldValueChangeDetails) => any) | undefined;
   "onUpdate:value"?: ((_value: string) => any) | undefined;
+  onClear?: (() => any) | undefined;
 }>, {
   required: boolean;
   invalid: boolean;

package/dist/components/text-field/text-field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-field.d.ts","names":[],"sources":["../../../src/components/text-field/text-field.ts"],"mappings":";;;;;~~KAmBK~~,iBAAiB;;KAGV,yBAAyB,KACnC;;KAKU,0BAA0B,KAAK;cAE9B,+BAAe,8BAAA;;;;;;;;IAMA,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWM,MAAA,SAAS;;;;IACrB,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS~~;;;;;EAId~~,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;;;;;;;~~IApBX~~,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWM,MAAA,SAAS;;;;IACrB,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS~~;;;;;;;;;;;;;;EAQ~~/B,WAAC,OAAO,2BAA2B;kCAmB/C;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAO3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAO7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gCAAgB,8BAAA;;;IAIH,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;;;qCAkCjC;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,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;;cAGW,gCAAgB,0BAAA,oBAAA,4BAAA;;;EAGf,WAAC,OAAO,4BAA4B;kCAchD"}
1	+ {"version":3,"file":"text-field.d.ts","names":[],"sources":["../../../src/components/text-field/text-field.ts"],"mappings":";;;;;KAoBK,iBAAiB;;KAGV,yBAAyB,KACnC;;KAKU,0BAA0B,KAAK;cAE9B,+BAAe,8BAAA;;;;;;;;IAMA,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWM,MAAA,SAAS;;;;IACrB,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS;;;;;;EAKd,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;;;;;;;IArBX,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWM,MAAA,SAAS;;;;IACrB,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS;;;;;;;;;;;;;;;EAS/B,WAAC,OAAO,2BAA2B;kCAmB/C;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAO3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAO7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gCAAgB,8BAAA;;;IAIH,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;;;qCAkCjC;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,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;;cAGW,gCAAgB,0BAAA,oBAAA,4BAAA;;;EAGf,WAAC,OAAO,4BAA4B;kCAchD"}

package/dist/components/text-field/text-field.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { withXhConfig } from "../../config/config.js";
+import { withHandlers } from "../../runtime/with-handlers.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
 import { provideTextField, useTextFieldContext } from "./context.js";
@@ -43,6 +44,7 @@ const XhTextFieldRoot = defineComponent({
 		translations: { type: Object }
 	},
 	emits: {
+		"clear": () => true,
 		"value-change": (_details) => true,
 		"update:value": (_value) => true
 	},
@@ -52,7 +54,7 @@ const XhTextFieldRoot = defineComponent({
 			emit("value-change", details);
 			emit("update:value", details.value);
 		};
-		const ctx = useTextField(withXhConfig("text-field", useFormControlProps(props)), notify);
+		const ctx = useTextField(withHandlers(withXhConfig("text-field", useFormControlProps(props)), { onClear: () => emit("clear") }), notify);
 		provideTextField(ctx);
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
 			value: ctx.api.value.value,

package/dist/components/text-field/text-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-field.js","names":[],"sources":["../../../src/components/text-field/text-field.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// 提供 text field 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { TextFieldApi, TextFieldInputHost, TextFieldSchema, TextFieldType } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { autoSizeTextarea } from '@xihan-ui/headless'\nimport { defineComponent, h, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideTextField, useTextFieldContext } from './context'\nimport { useTextField } from './use-text-field'\n\ntype TextFieldProps = TextFieldSchema['props']\n\n/* 默认插槽的载荷：当前值、值状态标志与写值方法。 /\nexport type TextFieldRootSlotProps = Pick<\n TextFieldApi,\n 'value' \| 'empty' \| 'atLimit' \| 'count' \| 'canClear' \| 'setValue' \| 'clear'\n>\n\n/* 字数部件默认插槽的载荷：当前字数、上限与已达上限的标志。 /\nexport type TextFieldCountSlotProps = Pick<TextFieldApi, 'count' \| 'maxLength' \| 'atLimit'>\n\nexport const XhTextFieldRoot = defineComponent({\n name: 'XhTextFieldRoot',\n props: {\n // 缺席值 undefined 表示非受控\n value: { type: String },\n defaultValue: { type: String },\n type: { type: String as PropType<TextFieldType> },\n placeholder: { type: String },\n // undefined 才表示「本实例没说」，Form/Field 才能安全地下传状态；false 是显式顶掉继承。\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 maxLength: { type: Number },\n clearable: Boolean,\n showCount: Boolean,\n autoSize: { type: [Boolean, Object] as PropType<TextFieldProps['autoSize']>, default: undefined },\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<TextFieldProps['translations']> },\n },\n // value-change 携带 { value }，update:value 携带裸串\n emits: {\n 'value-change': (_details: PayloadOf<TextFieldProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<TextFieldProps, 'onValueChange'>['value']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: TextFieldRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: TextFieldProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const ctx = useTextField(withXhConfig('text-field', useFormControlProps(props)) as TextFieldProps, notify)\n provideTextField(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 atLimit: ctx.api.value.atLimit,\n count: ctx.api.value.count,\n canClear: ctx.api.value.canClear,\n setValue: ctx.api.value.setValue,\n clear: ctx.api.value.clear,\n }))\n },\n})\n\nexport const XhTextFieldLabel = defineComponent({\n name: 'XhTextFieldLabel',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n // 必须是原生 <label>，connect 把 for 写向 input\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTextFieldControl = defineComponent({\n name: 'XhTextFieldControl',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n // 视觉盒：输入框与清空按钮都放进来，皮肤把描边、底色、聚焦环画在它身上\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTextFieldInput = defineComponent({\n name: 'XhTextFieldInput',\n props: {\n /* 输入框渲染为哪个标签，默认 input；写 textarea 即多行宿主，接入 autoSize 自动高度。 /\n as: { type: String as PropType<TextFieldInputHost>, default: 'input' },\n },\n setup(props) {\n // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n const fieldWiring = useFieldStateWiring()\n // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n const fieldLabel = useFieldLabelWiring()\n const ctx = useTextFieldContext()\n const el = ref<HTMLTextAreaElement \| null>(null)\n const setInputRef = (node: unknown): void => {\n const next = props.as === 'textarea' ? node as HTMLTextAreaElement \| null : null\n if (el.value && el.value !== next)\n autoSizeTextarea(el.value, false)\n el.value = next\n }\n const syncAutoSize = (): void => {\n if (el.value)\n autoSizeTextarea(el.value, ctx.api.value.autoSize)\n }\n // 模板 ref 赋值时节点尚未接入 Document；挂载及更新提交后再量，程序化写值与配置变化也走这条。\n onMounted(syncAutoSize)\n onUpdated(syncAutoSize)\n onBeforeUnmount(() => {\n if (el.value)\n autoSizeTextarea(el.value, false)\n el.value = null\n })\n // 自己渲染宿主节点，label 的 for 指向它\n return () => h(props.as, fieldLabel.value({\n ...fieldWiring.value,\n ...ctx.api.value.getInputProps({ as: props.as }) as Record<string, unknown>,\n ref: setInputRef,\n }))\n },\n})\n\nexport const XhTextFieldPrefix = defineComponent({\n name: 'XhTextFieldPrefix',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n return () => h('span', ctx.api.value.getPrefixProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTextFieldSuffix = defineComponent({\n name: 'XhTextFieldSuffix',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n return () => h('span', ctx.api.value.getSuffixProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTextFieldClearTrigger = defineComponent({\n name: 'XhTextFieldClearTrigger',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/* 字数：未写内容时渲染 `已用 / 上限`，未设上限时只渲染已用。 */\nexport const XhTextFieldCount = defineComponent({\n name: 'XhTextFieldCount',\n slots: Object as SlotsType<{\n default?: (props: TextFieldCountSlotProps) => VNode[]\n }>,\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n return () => {\n const api = ctx.api.value\n const fallback = api.maxLength === undefined ? `${api.count}` : `${api.count} / ${api.maxLength}`\n return h(\n 'span',\n api.getCountProps() as Record<string, unknown>,\n slots.default?.({ count: api.count, maxLength: api.maxLength, atLimit: api.atLimit }) ?? fallback,\n )\n }\n },\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"text-field.js","names":[],"sources":["../../../src/components/text-field/text-field.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// 提供 text field 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { TextFieldApi, TextFieldInputHost, TextFieldSchema, TextFieldType } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { autoSizeTextarea } from '@xihan-ui/headless'\nimport { defineComponent, h, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { withHandlers } from '../../runtime/with-handlers'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideTextField, useTextFieldContext } from './context'\nimport { useTextField } from './use-text-field'\n\ntype TextFieldProps = TextFieldSchema['props']\n\n/* 默认插槽的载荷：当前值、值状态标志与写值方法。 /\nexport type TextFieldRootSlotProps = Pick<\n TextFieldApi,\n 'value' \| 'empty' \| 'atLimit' \| 'count' \| 'canClear' \| 'setValue' \| 'clear'\n>\n\n/* 字数部件默认插槽的载荷：当前字数、上限与已达上限的标志。 /\nexport type TextFieldCountSlotProps = Pick<TextFieldApi, 'count' \| 'maxLength' \| 'atLimit'>\n\nexport const XhTextFieldRoot = defineComponent({\n name: 'XhTextFieldRoot',\n props: {\n // 缺席值 undefined 表示非受控\n value: { type: String },\n defaultValue: { type: String },\n type: { type: String as PropType<TextFieldType> },\n placeholder: { type: String },\n // undefined 才表示「本实例没说」，Form/Field 才能安全地下传状态；false 是显式顶掉继承。\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 maxLength: { type: Number },\n clearable: Boolean,\n showCount: Boolean,\n autoSize: { type: [Boolean, Object] as PropType<TextFieldProps['autoSize']>, default: undefined },\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<TextFieldProps['translations']> },\n },\n // value-change 携带 { value }，update:value 携带裸串\n emits: {\n 'clear': () => true,\n 'value-change': (_details: PayloadOf<TextFieldProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<TextFieldProps, 'onValueChange'>['value']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: TextFieldRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: TextFieldProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const ctx = useTextField(withHandlers(withXhConfig('text-field', useFormControlProps(props)), { onClear: () => emit('clear') }) as TextFieldProps, notify)\n provideTextField(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 atLimit: ctx.api.value.atLimit,\n count: ctx.api.value.count,\n canClear: ctx.api.value.canClear,\n setValue: ctx.api.value.setValue,\n clear: ctx.api.value.clear,\n }))\n },\n})\n\nexport const XhTextFieldLabel = defineComponent({\n name: 'XhTextFieldLabel',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n // 必须是原生 <label>，connect 把 for 写向 input\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTextFieldControl = defineComponent({\n name: 'XhTextFieldControl',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n // 视觉盒：输入框与清空按钮都放进来，皮肤把描边、底色、聚焦环画在它身上\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTextFieldInput = defineComponent({\n name: 'XhTextFieldInput',\n props: {\n /* 输入框渲染为哪个标签，默认 input；写 textarea 即多行宿主，接入 autoSize 自动高度。 /\n as: { type: String as PropType<TextFieldInputHost>, default: 'input' },\n },\n setup(props) {\n // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n const fieldWiring = useFieldStateWiring()\n // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n const fieldLabel = useFieldLabelWiring()\n const ctx = useTextFieldContext()\n const el = ref<HTMLTextAreaElement \| null>(null)\n const setInputRef = (node: unknown): void => {\n const next = props.as === 'textarea' ? node as HTMLTextAreaElement \| null : null\n if (el.value && el.value !== next)\n autoSizeTextarea(el.value, false)\n el.value = next\n }\n const syncAutoSize = (): void => {\n if (el.value)\n autoSizeTextarea(el.value, ctx.api.value.autoSize)\n }\n // 模板 ref 赋值时节点尚未接入 Document；挂载及更新提交后再量，程序化写值与配置变化也走这条。\n onMounted(syncAutoSize)\n onUpdated(syncAutoSize)\n onBeforeUnmount(() => {\n if (el.value)\n autoSizeTextarea(el.value, false)\n el.value = null\n })\n // 自己渲染宿主节点，label 的 for 指向它\n return () => h(props.as, fieldLabel.value({\n ...fieldWiring.value,\n ...ctx.api.value.getInputProps({ as: props.as }) as Record<string, unknown>,\n ref: setInputRef,\n }))\n },\n})\n\nexport const XhTextFieldPrefix = defineComponent({\n name: 'XhTextFieldPrefix',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n return () => h('span', ctx.api.value.getPrefixProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTextFieldSuffix = defineComponent({\n name: 'XhTextFieldSuffix',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n return () => h('span', ctx.api.value.getSuffixProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTextFieldClearTrigger = defineComponent({\n name: 'XhTextFieldClearTrigger',\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/* 字数：未写内容时渲染 `已用 / 上限`，未设上限时只渲染已用。 */\nexport const XhTextFieldCount = defineComponent({\n name: 'XhTextFieldCount',\n slots: Object as SlotsType<{\n default?: (props: TextFieldCountSlotProps) => VNode[]\n }>,\n setup(_, { slots }) {\n const ctx = useTextFieldContext()\n return () => {\n const api = ctx.api.value\n const fallback = api.maxLength === undefined ? `${api.count}` : `${api.count} / ${api.maxLength}`\n return h(\n 'span',\n api.getCountProps() as Record<string, unknown>,\n slots.default?.({ count: api.count, maxLength: api.maxLength, atLimit: api.atLimit }) ?? fallback,\n )\n }\n },\n})\n"],"mappings":"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"}

package/dist/components/time-field/time-field.d.ts CHANGED Viewed

@@ -65,6 +65,7 @@ declare const XhTimeFieldRoot: import("vue").DefineComponent<import("vue").Extra
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  clear: () => true;
   'value-change': (_details: PayloadOf<TimeFieldProps, "onValueChange">) => true;
   'update:value': (_value: PayloadOf<TimeFieldProps, "onValueChange">["value"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -126,6 +127,7 @@ declare const XhTimeFieldRoot: import("vue").DefineComponent<import("vue").Extra
 }>> & Readonly<{
   "onValue-change"?: ((_details: import("@xihan-ui/headless").TimeFieldValueChangeDetails) => any) | undefined;
   "onUpdate:value"?: ((_value: string) => any) | undefined;
+  onClear?: (() => any) | undefined;
 }>, {
   required: boolean;
   invalid: boolean;

package/dist/components/time-field/time-field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-field.d.ts","names":[],"sources":["../../../src/components/time-field/time-field.ts"],"mappings":";;;;;~~KAiBK~~,iBAAiB;;KAGV,yBAAyB,KACnC;cAIW,+BAAe,8BAAA;;;;;;;;;;;;;;;;;IAUK,MAAA,SAAS;;;IACP,MAAA,SAAS;;;;;;;IAER,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;IAMd,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS~~;;;;;EAIN~~,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;;;;;;;;;;;;;;;;~~IAhBN~~,MAAA,SAAS;;;IACP,MAAA,SAAS;;;;;;;IAER,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;IAMd,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS~~;;;;;;;;;;;EAQvB~~,WAAC,OAAO,2BAA2B;kCAsB/C;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAO3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAMlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,8BAAA;;IAIA,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;;MAWtC,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAOlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
1	+ {"version":3,"file":"time-field.d.ts","names":[],"sources":["../../../src/components/time-field/time-field.ts"],"mappings":";;;;;KAkBK,iBAAiB;;KAGV,yBAAyB,KACnC;cAIW,+BAAe,8BAAA;;;;;;;;;;;;;;;;;IAUK,MAAA,SAAS;;;IACP,MAAA,SAAS;;;;;;;IAER,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;IAMd,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;EAKN,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;;;;;;;;;;;;;;;;IAjBN,MAAA,SAAS;;;IACP,MAAA,SAAS;;;;;;;IAER,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;IAMd,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;EASvB,WAAC,OAAO,2BAA2B;kCAsB/C;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAO3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAMlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,8BAAA;;IAIA,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;;MAWtC,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAOlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/time-field/time-field.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { withXhConfig } from "../../config/config.js";
+import { withHandlers } from "../../runtime/with-handlers.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { provideTimeField, useTimeFieldContext } from "./context.js";
 import { useTimeField } from "./use-time-field.js";
@@ -38,6 +39,7 @@ const XhTimeFieldRoot = defineComponent({
 		size: { type: String }
 	},
 	emits: {
+		"clear": () => true,
 		"value-change": (_details) => true,
 		"update:value": (_value) => true
 	},
@@ -47,7 +49,7 @@ const XhTimeFieldRoot = defineComponent({
 			emit("value-change", details);
 			emit("update:value", details.value);
 		};
-		const ctx = useTimeField(withXhConfig("time-field", useFormControlProps(props)), { onValueChange });
+		const ctx = useTimeField(withHandlers(withXhConfig("time-field", useFormControlProps(props)), { onClear: () => emit("clear") }), { onValueChange });
 		provideTimeField(ctx);
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
 			value: ctx.api.value.value,

package/dist/components/time-field/time-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-field.js","names":[],"sources":["../../../src/components/time-field/time-field.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// 提供 time field 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { TimeFieldApi, TimeFieldSchema, TimeGranularity, TimeHourCycle, TimeSegmentType } 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 { useFormControlProps } from '../form/use-form-control'\nimport { provideTimeField, useTimeFieldContext } from './context'\nimport { useTimeField } from './use-time-field'\n\ntype TimeFieldProps = TimeFieldSchema['props']\n\n/* 默认插槽的载荷：当前值、值状态标志、参与显示的段与写值方法。 */\nexport type TimeFieldRootSlotProps = Pick<\n TimeFieldApi,\n 'value' \| 'empty' \| 'outOfRange' \| 'canClear' \| 'segments' \| 'focusedSegment' \| 'hourCycle' \| 'granularity' \| 'setValue' \| 'clear'\n>\n\nexport const XhTimeFieldRoot = defineComponent({\n name: 'XhTimeFieldRoot',\n props: {\n // 缺席值 undefined 表示非受控\n value: { type: String },\n defaultValue: { type: String },\n min: { type: String },\n max: { type: String },\n locale: { type: String },\n // 缺省值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n hourCycle: { type: Number as PropType<TimeHourCycle> },\n granularity: { type: String as PropType<TimeGranularity> },\n disabled: { type: Boolean, default: undefined },\n translations: { type: Object as PropType<TimeFieldProps['translations']> },\n readOnly: { type: Boolean, default: undefined },\n invalid: { type: Boolean, default: undefined },\n required: { type: Boolean, default: undefined },\n name: { type: String },\n placeholder: { type: String },\n variant: { type: String as PropType<ControlVariant> },\n tone: { type: String as PropType<Tone> },\n size: { type: String as PropType<Size> },\n },\n // value-change 携带 { value }，update:value 携带裸串\n emits: {\n 'value-change': (_details: PayloadOf<TimeFieldProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<TimeFieldProps, 'onValueChange'>['value']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: TimeFieldRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const onValueChange: TimeFieldProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const ctx = useTimeField(withXhConfig('time-field', useFormControlProps(props)) as TimeFieldProps, { onValueChange })\n provideTimeField(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 outOfRange: ctx.api.value.outOfRange,\n canClear: ctx.api.value.canClear,\n segments: ctx.api.value.segments,\n focusedSegment: ctx.api.value.focusedSegment,\n hourCycle: ctx.api.value.hourCycle,\n granularity: ctx.api.value.granularity,\n setValue: ctx.api.value.setValue,\n clear: ctx.api.value.clear,\n }))\n },\n})\n\nexport const XhTimeFieldLabel = defineComponent({\n name: 'XhTimeFieldLabel',\n setup(_, { slots }) {\n const ctx = useTimeFieldContext()\n // 仍用原生 label 保持表单语义，点标题聚焦第一段由连接层的 click 接管\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTimeFieldControl = defineComponent({\n name: 'XhTimeFieldControl',\n setup(_, { slots }) {\n const ctx = useTimeFieldContext()\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTimeFieldSegmentGroup = defineComponent({\n name: 'XhTimeFieldSegmentGroup',\n setup(_, { slots }) {\n const ctx = useTimeFieldContext()\n return () => h('div', ctx.api.value.getSegmentGroupProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTimeFieldSegment = defineComponent({\n name: 'XhTimeFieldSegment',\n props: {\n // 段的身份由作者声明\n segment: { type: String as PropType<TimeSegmentType>, required: true },\n },\n setup(props, { slots }) {\n const ctx = useTimeFieldContext()\n // 有插槽用插槽，否则显示该段的文字，空段为占位串\n return () => h(\n 'span',\n ctx.api.value.getSegmentProps({ segment: props.segment }) as Record<string, unknown>,\n slots.default?.() ?? ctx.api.value.getSegmentText({ segment: props.segment }),\n )\n },\n})\n\nexport const XhTimeFieldClearTrigger = defineComponent({\n name: 'XhTimeFieldClearTrigger',\n setup(_, { slots }) {\n const ctx = useTimeFieldContext()\n // 没写内容时由皮肤画兜底字形\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTimeFieldHiddenInput = defineComponent({\n name: 'XhTimeFieldHiddenInput',\n setup() {\n const ctx = useTimeFieldContext()\n return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n },\n})\n"],"mappings":"~~;;;;;;AAyBA~~,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,OAAO;EAEL,OAAO,EAAE,MAAM,OAAO;EACtB,cAAc,EAAE,MAAM,OAAO;EAC7B,KAAK,EAAE,MAAM,OAAO;EACpB,KAAK,EAAE,MAAM,OAAO;EACpB,QAAQ,EAAE,MAAM,OAAO;EAEvB,WAAW,EAAE,MAAM,OAAkC;EACrD,aAAa,EAAE,MAAM,OAAoC;EACzD,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,cAAc,EAAE,MAAM,OAAmD;EACzE,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC7C,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,MAAM,EAAE,MAAM,OAAO;EACrB,aAAa,EAAE,MAAM,OAAO;EAC5B,SAAS,EAAE,MAAM,OAAmC;EACpD,MAAM,EAAE,MAAM,OAAyB;EACvC,MAAM,EAAE,MAAM,OAAyB;CACzC;CAEA,OAAO;EACL,iBAAiB,aAAyD;EAC1E,iBAAiB,WAAgE;CACnF;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,iBAAkD,YAAY;GAClE,KAAK,gBAAgB,OAAO;GAC5B,KAAK,gBAAgB,QAAQ,KAAK;EACpC;EACA,MAAM,MAAM,aAAa,aAAa,cAAc,oBAAoB,KAAK,CAAC,GAAqB,EAAE,cAAc,CAAC;~~EACpH~~,iBAAiB,GAAG;EACpB,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU;GAC7F,OAAO,IAAI,IAAI,MAAM;GACrB,OAAO,IAAI,IAAI,MAAM;GACrB,YAAY,IAAI,IAAI,MAAM;GAC1B,UAAU,IAAI,IAAI,MAAM;GACxB,UAAU,IAAI,IAAI,MAAM;GACxB,gBAAgB,IAAI,IAAI,MAAM;GAC9B,WAAW,IAAI,IAAI,MAAM;GACzB,aAAa,IAAI,IAAI,MAAM;GAC3B,UAAU,IAAI,IAAI,MAAM;GACxB,OAAO,IAAI,IAAI,MAAM;EACvB,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,oBAAoB;EAEhC,aAAa,EAAE,SAAS,IAAI,IAAI,MAAM,cAAc,GAA8B,MAAM,UAAU,CAAC;CACrG;AACF,CAAC;AAED,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,oBAAoB;EAChC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,gBAAgB,GAA8B,MAAM,UAAU,CAAC;CACrG;AACF,CAAC;AAED,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,oBAAoB;EAChC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,qBAAqB,GAA8B,MAAM,UAAU,CAAC;CAC1G;AACF,CAAC;AAED,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,OAAO,EAEL,SAAS;EAAE,MAAM;EAAqC,UAAU;CAAK,EACvE;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,oBAAoB;EAEhC,aAAa,EACX,QACA,IAAI,IAAI,MAAM,gBAAgB,EAAE,SAAS,MAAM,QAAQ,CAAC,GACxD,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,eAAe,EAAE,SAAS,MAAM,QAAQ,CAAC,CAC9E;CACF;AACF,CAAC;AAED,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,oBAAoB;EAEhC,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,qBAAqB,GAA8B,MAAM,UAAU,CAAC;CAC7G;AACF,CAAC;AAED,MAAa,yBAAyB,gBAAgB;CACpD,MAAM;CACN,QAAQ;EACN,MAAM,MAAM,oBAAoB;EAChC,aAAa,EAAE,SAAS,IAAI,IAAI,MAAM,oBAAoB,CAA4B;CACxF;AACF,CAAC"}
1	+ {"version":3,"file":"time-field.js","names":[],"sources":["../../../src/components/time-field/time-field.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// 提供 time field 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { TimeFieldApi, TimeFieldSchema, TimeGranularity, TimeHourCycle, TimeSegmentType } 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 { withHandlers } from '../../runtime/with-handlers'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideTimeField, useTimeFieldContext } from './context'\nimport { useTimeField } from './use-time-field'\n\ntype TimeFieldProps = TimeFieldSchema['props']\n\n/* 默认插槽的载荷：当前值、值状态标志、参与显示的段与写值方法。 */\nexport type TimeFieldRootSlotProps = Pick<\n TimeFieldApi,\n 'value' \| 'empty' \| 'outOfRange' \| 'canClear' \| 'segments' \| 'focusedSegment' \| 'hourCycle' \| 'granularity' \| 'setValue' \| 'clear'\n>\n\nexport const XhTimeFieldRoot = defineComponent({\n name: 'XhTimeFieldRoot',\n props: {\n // 缺席值 undefined 表示非受控\n value: { type: String },\n defaultValue: { type: String },\n min: { type: String },\n max: { type: String },\n locale: { type: String },\n // 缺省值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n hourCycle: { type: Number as PropType<TimeHourCycle> },\n granularity: { type: String as PropType<TimeGranularity> },\n disabled: { type: Boolean, default: undefined },\n translations: { type: Object as PropType<TimeFieldProps['translations']> },\n readOnly: { type: Boolean, default: undefined },\n invalid: { type: Boolean, default: undefined },\n required: { type: Boolean, default: undefined },\n name: { type: String },\n placeholder: { type: String },\n variant: { type: String as PropType<ControlVariant> },\n tone: { type: String as PropType<Tone> },\n size: { type: String as PropType<Size> },\n },\n // value-change 携带 { value }，update:value 携带裸串\n emits: {\n 'clear': () => true,\n 'value-change': (_details: PayloadOf<TimeFieldProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<TimeFieldProps, 'onValueChange'>['value']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: TimeFieldRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const onValueChange: TimeFieldProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const ctx = useTimeField(withHandlers(withXhConfig('time-field', useFormControlProps(props)), { onClear: () => emit('clear') }) as TimeFieldProps, { onValueChange })\n provideTimeField(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 outOfRange: ctx.api.value.outOfRange,\n canClear: ctx.api.value.canClear,\n segments: ctx.api.value.segments,\n focusedSegment: ctx.api.value.focusedSegment,\n hourCycle: ctx.api.value.hourCycle,\n granularity: ctx.api.value.granularity,\n setValue: ctx.api.value.setValue,\n clear: ctx.api.value.clear,\n }))\n },\n})\n\nexport const XhTimeFieldLabel = defineComponent({\n name: 'XhTimeFieldLabel',\n setup(_, { slots }) {\n const ctx = useTimeFieldContext()\n // 仍用原生 label 保持表单语义，点标题聚焦第一段由连接层的 click 接管\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTimeFieldControl = defineComponent({\n name: 'XhTimeFieldControl',\n setup(_, { slots }) {\n const ctx = useTimeFieldContext()\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTimeFieldSegmentGroup = defineComponent({\n name: 'XhTimeFieldSegmentGroup',\n setup(_, { slots }) {\n const ctx = useTimeFieldContext()\n return () => h('div', ctx.api.value.getSegmentGroupProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTimeFieldSegment = defineComponent({\n name: 'XhTimeFieldSegment',\n props: {\n // 段的身份由作者声明\n segment: { type: String as PropType<TimeSegmentType>, required: true },\n },\n setup(props, { slots }) {\n const ctx = useTimeFieldContext()\n // 有插槽用插槽，否则显示该段的文字，空段为占位串\n return () => h(\n 'span',\n ctx.api.value.getSegmentProps({ segment: props.segment }) as Record<string, unknown>,\n slots.default?.() ?? ctx.api.value.getSegmentText({ segment: props.segment }),\n )\n },\n})\n\nexport const XhTimeFieldClearTrigger = defineComponent({\n name: 'XhTimeFieldClearTrigger',\n setup(_, { slots }) {\n const ctx = useTimeFieldContext()\n // 没写内容时由皮肤画兜底字形\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhTimeFieldHiddenInput = defineComponent({\n name: 'XhTimeFieldHiddenInput',\n setup() {\n const ctx = useTimeFieldContext()\n return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n },\n})\n"],"mappings":"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"}

package/dist/components/time-picker/context.js CHANGED Viewed

@@ -18,7 +18,16 @@ function useTimePickerColumnContext() {
 	if (!ctx) throw new Error("[xh] TimePicker 选项必须用在 XhTimePickerColumn 内");
 	return ctx;
 }
+const TAG_KEY = Symbol.for("xh-time-picker-tag");
+function provideTimePickerTag(ctx) {
+	provide(TAG_KEY, ctx);
+}
+function useTimePickerTagContext() {
+	const ctx = inject(TAG_KEY, null);
+	if (!ctx) throw new Error("[xh] TimePicker 标签子部件必须用在 XhTimePickerTag 内");
+	return ctx;
+}
 //#endregion
-export { provideTimePicker, provideTimePickerColumn, useTimePickerColumnContext, useTimePickerContext };
+export { provideTimePicker, provideTimePickerColumn, provideTimePickerTag, useTimePickerColumnContext, useTimePickerContext, useTimePickerTagContext };
 //# sourceMappingURL=context.js.map

package/dist/components/time-picker/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../src/components/time-picker/context.ts"],"sourcesContent":["/\n Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n /\n\n// 提供 context 相关实现。\n\nimport type { TimePickerColumnUnit } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { TimePickerContext } from './use-time-picker'\nimport { inject, provide } from 'vue'\n\n/* 列声明的单位，供列内选项取到自己所属的列。 */\nexport interface TimePickerColumnContext {\n unit: ComputedRef<TimePickerColumnUnit>\n}\n\nconst KEY: InjectionKey<TimePickerContext> = Symbol.for('xh-time-picker')\nconst COLUMN_KEY: InjectionKey<TimePickerColumnContext> = Symbol.for('xh-time-picker-column')\n\nexport function provideTimePicker(ctx: TimePickerContext): void {\n provide(KEY, ctx)\n}\n\nexport function useTimePickerContext(): TimePickerContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] TimePicker 部件必须用在 XhTimePickerRoot 内')\n return ctx\n}\n\nexport function provideTimePickerColumn(ctx: TimePickerColumnContext): void {\n provide(COLUMN_KEY, ctx)\n}\n\nexport function useTimePickerColumnContext(): TimePickerColumnContext {\n const ctx = inject(COLUMN_KEY, null)\n if (!ctx)\n throw new Error('[xh] TimePicker 选项必须用在 XhTimePickerColumn 内')\n return ctx\n}\n"],"mappings":";;AAiBA,MAAM,MAAuC,OAAO,IAAI,gBAAgB;AACxE,MAAM,aAAoD,OAAO,IAAI,uBAAuB;AAE5F,SAAgB,kBAAkB,KAA8B;CAC9D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,uBAA0C;CACxD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT;AAEA,SAAgB,wBAAwB,KAAoC;CAC1E,QAAQ,YAAY,GAAG;AACzB;AAEA,SAAgB,6BAAsD;CACpE,MAAM,MAAM,OAAO,YAAY,IAAI;CACnC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,6CAA6C;CAC/D,OAAO;AACT"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../src/components/time-picker/context.ts"],"sourcesContent":["/\n Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n /\n\n// 提供 context 相关实现。\n\nimport type { TimePickerColumnUnit } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { TimePickerContext } from './use-time-picker'\nimport { inject, provide } from 'vue'\n\n/* 列声明的单位，供列内选项取到自己所属的列。 /\nexport interface TimePickerColumnContext {\n unit: ComputedRef<TimePickerColumnUnit>\n}\n\nconst KEY: InjectionKey<TimePickerContext> = Symbol.for('xh-time-picker')\nconst COLUMN_KEY: InjectionKey<TimePickerColumnContext> = Symbol.for('xh-time-picker-column')\n\nexport function provideTimePicker(ctx: TimePickerContext): void {\n provide(KEY, ctx)\n}\n\nexport function useTimePickerContext(): TimePickerContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] TimePicker 部件必须用在 XhTimePickerRoot 内')\n return ctx\n}\n\nexport function provideTimePickerColumn(ctx: TimePickerColumnContext): void {\n provide(COLUMN_KEY, ctx)\n}\n\nexport function useTimePickerColumnContext(): TimePickerColumnContext {\n const ctx = inject(COLUMN_KEY, null)\n if (!ctx)\n throw new Error('[xh] TimePicker 选项必须用在 XhTimePickerColumn 内')\n return ctx\n}\n\n/* 标签声明的值，供标签中的删除按钮复用同一份声明。 */\nexport interface TimePickerTagContext {\n value: () => string\n}\n\nconst TAG_KEY: InjectionKey<TimePickerTagContext> = Symbol.for('xh-time-picker-tag')\n\nexport function provideTimePickerTag(ctx: TimePickerTagContext): void {\n provide(TAG_KEY, ctx)\n}\n\nexport function useTimePickerTagContext(): TimePickerTagContext {\n const ctx = inject(TAG_KEY, null)\n if (!ctx)\n throw new Error('[xh] TimePicker 标签子部件必须用在 XhTimePickerTag 内')\n return ctx\n}\n"],"mappings":";;AAiBA,MAAM,MAAuC,OAAO,IAAI,gBAAgB;AACxE,MAAM,aAAoD,OAAO,IAAI,uBAAuB;AAE5F,SAAgB,kBAAkB,KAA8B;CAC9D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,uBAA0C;CACxD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT;AAEA,SAAgB,wBAAwB,KAAoC;CAC1E,QAAQ,YAAY,GAAG;AACzB;AAEA,SAAgB,6BAAsD;CACpE,MAAM,MAAM,OAAO,YAAY,IAAI;CACnC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,6CAA6C;CAC/D,OAAO;AACT;AAOA,MAAM,UAA8C,OAAO,IAAI,oBAAoB;AAEnF,SAAgB,qBAAqB,KAAiC;CACpE,QAAQ,SAAS,GAAG;AACtB;AAEA,SAAgB,0BAAgD;CAC9D,MAAM,MAAM,OAAO,SAAS,IAAI;CAChC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,6CAA6C;CAC/D,OAAO;AACT"}

package/dist/components/time-picker/time-picker.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { PayloadOf } from "../../runtime/payload.js";
 import { PropType, SlotsType, VNode } from "vue";
 import { ControlVariant, Direction, Placement, Size, Tone } from "@xihan-ui/core";
-import { TimeGranularity, TimeHourCycle, TimePickerApi, TimePickerColumn, TimePickerColumnUnit, TimePickerPreset, TimePickerPresetState, TimePickerSchema, TimeSegmentType } from "@xihan-ui/headless";
+import { TimeGranularity, TimeHourCycle, TimePickerApi, TimePickerColumn, TimePickerColumnUnit, TimePickerPreset, TimePickerPresetState, TimePickerSchema, TimePickerSelectionMode, TimeSegmentType, TimeStep, TimeUnavailablePredicate } from "@xihan-ui/headless";
 //#region src/components/time-picker/time-picker.d.ts
 type TimePickerProps = TimePickerSchema['props'];
 /** 默认插槽的载荷：浮层开合与当前值、值状态标志、当前的段与列，以及开合、写值、清空的动作。 */
-type TimePickerRootSlotProps = Pick<TimePickerApi, 'open' | 'value' | 'empty' | 'outOfRange' | 'segments' | 'columns' | 'canClear' | 'setOpen' | 'setValue' | 'clear'>;
+type TimePickerRootSlotProps = Pick<TimePickerApi, 'open' | 'value' | 'empty' | 'outOfRange' | 'segments' | 'columns' | 'canClear' | 'canAdd' | 'setOpen' | 'setValue' | 'clear' | 'add'>;
 /** 默认插槽的载荷：该列当前的可选值。 */
 interface TimePickerColumnSlotProps {
   options: TimePickerColumn['options'];
@@ -15,11 +15,24 @@ interface TimePickerPresetsSlotProps {
   presets: readonly TimePickerPresetState[];
 }
 declare const XhTimePickerRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 选中的时刻，ISO 时间串数组；单选可写裸串。 */
   value: {
-    type: StringConstructor;
+    type: PropType<string | string[]>;
   };
   defaultValue: {
-    type: StringConstructor;
+    type: PropType<string | string[]>;
+  };
+  /** 选择模式，默认 single；multiple 时列上拼草稿、按「添加」收进值，输入行里排成标签。 */
+  selectionMode: {
+    type: PropType<TimePickerSelectionMode>;
+  };
+  /** multiple 下最多选几个时刻。 */
+  maxSelected: {
+    type: NumberConstructor;
+  };
+  /** 多选时输入行最多摆几枚标签，其余折进 +N 那一枚；默认 3。 */
+  maxTagCount: {
+    type: NumberConstructor;
   };
   open: {
     type: BooleanConstructor;
@@ -41,8 +54,9 @@ declare const XhTimePickerRoot: import("vue").DefineComponent<import("vue").Extr
   granularity: {
     type: PropType<TimeGranularity>;
   };
-  step: {
-    type: NumberConstructor;
+  /** 按单位的步进：`{ hour?, minute?, second? }`，各单位缺省 1。 */
+  timeStep: {
+    type: PropType<TimeStep>;
   };
   /** 快捷选项；提供后浮层中多出一列，时刻要在自己的 computed 中计算后再传入。 */
   presets: {
@@ -55,8 +69,9 @@ declare const XhTimePickerRoot: import("vue").DefineComponent<import("vue").Extr
   translations: {
     type: PropType<TimePickerProps["translations"]>;
   };
+  /** 逐格可选性：时列按 24 小时制给值，第三个参数带已选的时与分。 */
   isTimeUnavailable: {
-    type: PropType<(value: string, unit: TimePickerColumnUnit) => boolean>;
+    type: PropType<TimeUnavailablePredicate>;
   };
   readOnly: {
     type: BooleanConstructor;
@@ -95,16 +110,30 @@ declare const XhTimePickerRoot: import("vue").DefineComponent<import("vue").Extr
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  clear: () => true;
   'value-change': (_details: PayloadOf<TimePickerProps, "onValueChange">) => true;
   'open-change': (_details: PayloadOf<TimePickerProps, "onOpenChange">) => true;
   'update:value': (_value: PayloadOf<TimePickerProps, "onValueChange">["value"]) => true;
   'update:open': (_open: PayloadOf<TimePickerProps, "onOpenChange">["open"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 选中的时刻，ISO 时间串数组；单选可写裸串。 */
   value: {
-    type: StringConstructor;
+    type: PropType<string | string[]>;
   };
   defaultValue: {
-    type: StringConstructor;
+    type: PropType<string | string[]>;
+  };
+  /** 选择模式，默认 single；multiple 时列上拼草稿、按「添加」收进值，输入行里排成标签。 */
+  selectionMode: {
+    type: PropType<TimePickerSelectionMode>;
+  };
+  /** multiple 下最多选几个时刻。 */
+  maxSelected: {
+    type: NumberConstructor;
+  };
+  /** 多选时输入行最多摆几枚标签，其余折进 +N 那一枚；默认 3。 */
+  maxTagCount: {
+    type: NumberConstructor;
   };
   open: {
     type: BooleanConstructor;
@@ -126,8 +155,9 @@ declare const XhTimePickerRoot: import("vue").DefineComponent<import("vue").Extr
   granularity: {
     type: PropType<TimeGranularity>;
   };
-  step: {
-    type: NumberConstructor;
+  /** 按单位的步进：`{ hour?, minute?, second? }`，各单位缺省 1。 */
+  timeStep: {
+    type: PropType<TimeStep>;
   };
   /** 快捷选项；提供后浮层中多出一列，时刻要在自己的 computed 中计算后再传入。 */
   presets: {
@@ -140,8 +170,9 @@ declare const XhTimePickerRoot: import("vue").DefineComponent<import("vue").Extr
   translations: {
     type: PropType<TimePickerProps["translations"]>;
   };
+  /** 逐格可选性：时列按 24 小时制给值，第三个参数带已选的时与分。 */
   isTimeUnavailable: {
-    type: PropType<(value: string, unit: TimePickerColumnUnit) => boolean>;
+    type: PropType<TimeUnavailablePredicate>;
   };
   readOnly: {
     type: BooleanConstructor;
@@ -179,7 +210,8 @@ declare const XhTimePickerRoot: import("vue").DefineComponent<import("vue").Extr
   };
 }>> & Readonly<{
   "onValue-change"?: ((_details: import("@xihan-ui/headless").TimePickerValueChangeDetails) => any) | undefined;
-  "onUpdate:value"?: ((_value: string) => any) | undefined;
+  "onUpdate:value"?: ((_value: string[]) => any) | undefined;
+  onClear?: (() => any) | undefined;
   "onOpen-change"?: ((_details: import("@xihan-ui/headless").TimePickerOpenChangeDetails) => any) | undefined;
   "onUpdate:open"?: ((_open: boolean) => any) | undefined;
 }>, {
@@ -198,6 +230,41 @@ declare const XhTimePickerLabel: import("vue").DefineComponent<{}, () => VNode<i
 declare const XhTimePickerControl: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 标签文字所在的块（tag 的 label）。 */
+declare const XhTimePickerTagLabel: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 标签中的删除按钮：即所在标签那份 tag 的 close-trigger，可及名使用 translations.deleteItem；点按摘掉所在标签的选中值，焦点不动。 */
+declare const XhTimePickerItemDeleteTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 多选时一个选中值一个标签，即库内 tag 的 root（data-scope="tag"）。 */
+declare const XhTimePickerTag: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 它代表哪个选中值。 */
+  value: {
+    type: StringConstructor;
+    required: true;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 它代表哪个选中值。 */
+  value: {
+    type: StringConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 折叠的标签合成的一个标签：有插槽时使用插槽，否则显示 +N。没有折叠的标签时连接层写 hidden。 */
+declare const XhTimePickerOverflowTag: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 标签行：多选时放在盒里、触发钮之前；单选时连接层给 hidden。
+ * 不写插槽即按 tags 铺出带删除钮的标签与 +N 那一枚，写了插槽由作者自己铺。
+ */
+declare const XhTimePickerTagList: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhTimePickerSegmentGroup: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -290,9 +357,15 @@ declare const XhTimePickerItem: import("vue").DefineComponent<import("vue").Extr
     required: true;
   };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhTimePickerHiddenInput: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+/** 「添加」：多选时把浮层里拼好的草稿收进值，浮层不收；单选时连接层给 hidden。文字由作者写。 */
+declare const XhTimePickerConfirmTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhTimePickerHiddenInput: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { TimePickerColumnSlotProps, TimePickerPresetsSlotProps, TimePickerRootSlotProps, XhTimePickerClearTrigger, XhTimePickerColumn, XhTimePickerContent, XhTimePickerControl, XhTimePickerHiddenInput, XhTimePickerItem, XhTimePickerLabel, XhTimePickerPositioner, XhTimePickerPreset, XhTimePickerPresetGroup, XhTimePickerRoot, XhTimePickerSegment, XhTimePickerSegmentGroup, XhTimePickerTrigger };
+export { TimePickerColumnSlotProps, TimePickerPresetsSlotProps, TimePickerRootSlotProps, XhTimePickerClearTrigger, XhTimePickerColumn, XhTimePickerConfirmTrigger, XhTimePickerContent, XhTimePickerControl, XhTimePickerHiddenInput, XhTimePickerItem, XhTimePickerItemDeleteTrigger, XhTimePickerLabel, XhTimePickerOverflowTag, XhTimePickerPositioner, XhTimePickerPreset, XhTimePickerPresetGroup, XhTimePickerRoot, XhTimePickerSegment, XhTimePickerSegmentGroup, XhTimePickerTag, XhTimePickerTagLabel, XhTimePickerTagList, XhTimePickerTrigger };
 //# sourceMappingURL=time-picker.d.ts.map