@sdata/web-vue 3.29.0 → 4.0.0

package/es/input-tag/input-tag.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,585 @@
+import { useFormItem } from "../_hooks/use-form-item.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isNull, isObject, isUndefined } from "../_utils/is.js";
+import resize_observer_default from "../_components/resize-observer.js";
+import icon_hover_default from "../_components/icon-hover.js";
+import IconClose from "../icon/icon-close/index.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
+import feedback_icon_default from "../_components/feedback-icon.js";
+import { useFitWidth } from "../_hooks/use-fit-width.js";
+import { isReadonlyModificationKey, useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
+import { useSize } from "../_hooks/use-size.js";
+import { INPUT_EVENTS } from "../_utils/constant.js";
+import { Backspace, Enter } from "../_utils/keycode.js";
+import { omit } from "../_utils/omit.js";
+import pick from "../_utils/pick.js";
+import Tooltip from "../tooltip/index.js";
+import Ellipsis from "../ellipsis/index.js";
+import Tag from "../tag/index.js";
+import { getValueData } from "./utils.js";
+import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onMounted, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, toRef, toRefs, unref, useAttrs, useSlots, watch, withCtx, withModifiers } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+//#region components/input-tag/input-tag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"placeholder",
+	"disabled",
+	"readonly"
+];
+var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "InputTag",
+	inheritAttrs: false
+}), {}, {
+	__name: "input-tag",
+	props: {
+		modelValue: Array,
+		defaultValue: {
+			type: Array,
+			default: () => []
+		},
+		inputValue: String,
+		defaultInputValue: {
+			type: String,
+			default: ""
+		},
+		placeholder: String,
+		fitWidth: {
+			type: Boolean,
+			default: false
+		},
+		maxWFull: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: [Boolean, String],
+			default: false
+		},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		size: String,
+		maxTagCount: {
+			type: [Number, String],
+			default: 0
+		},
+		retainInputValue: {
+			type: [Boolean, Object],
+			default: false
+		},
+		formatTag: Function,
+		uniqueValue: {
+			type: Boolean,
+			default: false
+		},
+		fieldNames: Object,
+		tagNowrap: {
+			type: Boolean,
+			default: false
+		},
+		baseCls: String,
+		focused: Boolean,
+		disabledInput: Boolean,
+		uninjectFormItemContext: Boolean,
+		inputAttrs: Object
+	},
+	emits: {
+		"update:modelValue": (_value) => true,
+		"update:inputValue": (_inputValue) => true,
+		"change": (_value, _event) => true,
+		"inputValueChange": (_inputValue, _event) => true,
+		"pressEnter": (_inputValue, _event) => true,
+		"remove": (_removed, _event) => true,
+		"clear": (_event) => true,
+		"focus": (_event) => true,
+		"blur": (_event) => true
+	},
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const DEFAULT_FIELD_NAMES = {
+			value: "value",
+			label: "label",
+			closable: "closable",
+			tagProps: "tagProps"
+		};
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const { size, disabled, error, uninjectFormItemContext, allowClear } = toRefs(props);
+		const prefixCls = props.baseCls || getPrefixCls("input-tag");
+		const wrapperRef = ref();
+		const inputRef = ref();
+		const mirrorRef = ref();
+		const measureRef = ref();
+		const { mergedSize: formSize, mergedDisabled, mergedError, feedback, eventHandlers } = useFormItem({
+			size,
+			disabled,
+			error,
+			uninject: uninjectFormItemContext === null || uninjectFormItemContext === void 0 ? void 0 : uninjectFormItemContext.value
+		});
+		const { mergedSize } = useSize(formSize);
+		const { mergedAllowClear } = useAllowClear(allowClear);
+		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), mergedDisabled);
+		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
+		const mergedFieldNames = computed(() => _objectSpread2(_objectSpread2({}, DEFAULT_FIELD_NAMES), props.fieldNames));
+		const innerFocused = ref(false);
+		const innerValue = ref(props.defaultValue);
+		const innerInputValue = ref(props.defaultInputValue);
+		const isComposition = ref(false);
+		const compositionValue = ref("");
+		const inputStyle = reactive({ width: "12px" });
+		const responsiveVisibleTagCount = ref(null);
+		const responsiveTagMaxWidth = ref(0);
+		const [DefineTagContent, ReuseTagContent] = createReusableTemplate();
+		const retainInputValue = computed(() => isObject(props.retainInputValue) ? _objectSpread2({
+			create: false,
+			blur: false
+		}, props.retainInputValue) : {
+			create: props.retainInputValue,
+			blur: props.retainInputValue
+		});
+		const mergedFocused = computed(() => props.focused || innerFocused.value);
+		const isResponsiveMaxTagCount = computed(() => props.maxTagCount === "responsive");
+		const computedValue = computed(() => {
+			var _props$modelValue;
+			return (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : innerValue.value;
+		});
+		const computedInputValue = computed(() => {
+			var _props$inputValue;
+			return (_props$inputValue = props.inputValue) !== null && _props$inputValue !== void 0 ? _props$inputValue : innerInputValue.value;
+		});
+		const valueData = computed(() => getValueData(computedValue.value, mergedFieldNames.value));
+		const mirrorText = computed(() => valueData.value.length > 0 ? compositionValue.value || computedInputValue.value : compositionValue.value || computedInputValue.value || props.placeholder);
+		const fitWidthText = computed(() => compositionValue.value || computedInputValue.value || (valueData.value.length === 0 ? props.placeholder : void 0));
+		const { fitWidthStyle, fitWidthValue } = useFitWidth({
+			fitWidth: () => props.fitWidth,
+			text: fitWidthText,
+			fallbackWidth: () => valueData.value.length > 0 ? "12px" : "4ch",
+			target: inputRef,
+			additionalWidth: 12
+		});
+		const updateInputValue = (value, event) => {
+			innerInputValue.value = value;
+			emit("update:inputValue", value);
+			emit("inputValueChange", value, event);
+		};
+		const handleComposition = (event) => {
+			const { value } = event.target;
+			if (event.type === "compositionend") {
+				isComposition.value = false;
+				compositionValue.value = "";
+				updateInputValue(value, event);
+				nextTick(() => {
+					if (inputRef.value && computedInputValue.value !== inputRef.value.value) inputRef.value.value = computedInputValue.value;
+				});
+			} else {
+				var _event$data;
+				isComposition.value = true;
+				compositionValue.value = computedInputValue.value + ((_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : "");
+			}
+		};
+		watch(() => props.modelValue, (value) => {
+			if (isUndefined(value) || isNull(value)) innerValue.value = [];
+		});
+		const handleMousedown = (event) => {
+			if (inputRef.value && event.target !== inputRef.value) {
+				event.preventDefault();
+				inputRef.value.focus();
+			}
+		};
+		const handleInput = (event) => {
+			const { value } = event.target;
+			if (!isComposition.value) {
+				updateInputValue(value, event);
+				nextTick(() => {
+					if (inputRef.value && computedInputValue.value !== inputRef.value.value) inputRef.value.value = computedInputValue.value;
+				});
+			}
+		};
+		const visibleTagCount = computed(() => {
+			if (isResponsiveMaxTagCount.value) {
+				var _responsiveVisibleTag;
+				if (!valueData.value.length) return 0;
+				return Math.min(valueData.value.length, Math.max(1, (_responsiveVisibleTag = responsiveVisibleTagCount.value) !== null && _responsiveVisibleTag !== void 0 ? _responsiveVisibleTag : valueData.value.length));
+			}
+			if (typeof props.maxTagCount === "number" && props.maxTagCount > 0) return Math.min(props.maxTagCount, valueData.value.length);
+			return valueData.value.length;
+		});
+		const hiddenTagCount = computed(() => Math.max(valueData.value.length - visibleTagCount.value, 0));
+		const isOverflowCounterTag = (value) => value === "__arco__more";
+		const tags = computed(() => {
+			const visibleTags = valueData.value.slice(0, visibleTagCount.value);
+			if (!hiddenTagCount.value) return visibleTags;
+			const raw = {
+				value: "__arco__more",
+				label: `+${hiddenTagCount.value}`,
+				closable: false
+			};
+			return visibleTags.concat(_objectSpread2({ raw }, raw));
+		});
+		const getOuterWidth = (element) => {
+			if (!element) return 0;
+			const style = window.getComputedStyle(element);
+			return element.offsetWidth + (Number.parseFloat(style.marginLeft || "0") || 0) + (Number.parseFloat(style.marginRight || "0") || 0);
+		};
+		const getCounterWidth = (hiddenCount) => {
+			if (!measureRef.value || hiddenCount <= 0) return 0;
+			return getOuterWidth(measureRef.value.querySelector(`[data-hidden-count="${hiddenCount}"]`));
+		};
+		const isClosableTag = (item) => {
+			var _item$tagProps$closab, _item$tagProps;
+			return Boolean((_item$tagProps$closab = (_item$tagProps = item.tagProps) === null || _item$tagProps === void 0 ? void 0 : _item$tagProps.closable) !== null && _item$tagProps$closab !== void 0 ? _item$tagProps$closab : !mergedDisabled.value && !props.readonly && item.closable);
+		};
+		const getSlotData = (item) => item.raw;
+		const syncResponsiveTags = () => {
+			var _inputRef$value$offse, _inputRef$value;
+			if (!isResponsiveMaxTagCount.value) {
+				responsiveVisibleTagCount.value = null;
+				responsiveTagMaxWidth.value = 0;
+				return;
+			}
+			const totalTags = valueData.value.length;
+			if (totalTags <= 1) {
+				responsiveVisibleTagCount.value = totalTags;
+				responsiveTagMaxWidth.value = 0;
+				return;
+			}
+			const wrapperElement = wrapperRef.value;
+			const measureElement = measureRef.value;
+			const innerElement = wrapperElement === null || wrapperElement === void 0 ? void 0 : wrapperElement.querySelector(`.${prefixCls}-inner`);
+			if (!wrapperElement || !measureElement || !innerElement) {
+				responsiveVisibleTagCount.value = totalTags;
+				responsiveTagMaxWidth.value = 0;
+				return;
+			}
+			const inputWidth = ((_inputRef$value$offse = (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value.offsetWidth) !== null && _inputRef$value$offse !== void 0 ? _inputRef$value$offse : Number.parseFloat(inputStyle.width)) || 12;
+			const availableWidth = Math.max(innerElement.clientWidth - inputWidth, 0);
+			if (availableWidth <= 0) {
+				responsiveVisibleTagCount.value = 1;
+				responsiveTagMaxWidth.value = 0;
+				return;
+			}
+			const tagWidths = Array.from(measureElement.querySelectorAll(`.${prefixCls}-tag`)).slice(0, totalTags).map(getOuterWidth);
+			for (let candidate = totalTags; candidate >= 1; candidate -= 1) {
+				const hiddenCount = totalTags - candidate;
+				const counterWidth = getCounterWidth(hiddenCount);
+				const visibleWidth = tagWidths.slice(0, candidate).reduce((sum, width) => sum + width, 0);
+				if (hiddenCount === 0 && visibleWidth <= availableWidth) {
+					responsiveVisibleTagCount.value = candidate;
+					responsiveTagMaxWidth.value = 0;
+					return;
+				}
+				if (hiddenCount > 0 && candidate > 1 && visibleWidth + counterWidth <= availableWidth) {
+					responsiveVisibleTagCount.value = candidate;
+					responsiveTagMaxWidth.value = 0;
+					return;
+				}
+				if (hiddenCount > 0 && candidate === 1) {
+					const leadTagWidth = Math.max(availableWidth - counterWidth, 0);
+					if (leadTagWidth > 0) {
+						responsiveVisibleTagCount.value = 1;
+						responsiveTagMaxWidth.value = leadTagWidth;
+						return;
+					}
+				}
+			}
+			responsiveVisibleTagCount.value = 1;
+			responsiveTagMaxWidth.value = Math.max(availableWidth - getCounterWidth(totalTags - 1), 0);
+		};
+		const updateValue = (value, event) => {
+			var _eventHandlers$value, _eventHandlers$value$;
+			innerValue.value = value;
+			emit("update:modelValue", value);
+			emit("change", value, event);
+			(_eventHandlers$value = eventHandlers.value) === null || _eventHandlers$value === void 0 || (_eventHandlers$value$ = _eventHandlers$value.onChange) === null || _eventHandlers$value$ === void 0 || _eventHandlers$value$.call(_eventHandlers$value, event);
+		};
+		const handleRemove = (value, index, event) => {
+			var _computedValue$value;
+			updateValue((_computedValue$value = computedValue.value) === null || _computedValue$value === void 0 ? void 0 : _computedValue$value.filter((_, itemIndex) => itemIndex !== index), event);
+			emit("remove", value, event);
+		};
+		const handleClear = (event) => {
+			updateValue([], event);
+			emit("clear", event);
+		};
+		const showClearBtn = computed(() => !mergedDisabled.value && !props.readonly && mergedAllowClear.value && Boolean(computedValue.value.length));
+		const handlePressEnter = (event) => {
+			var _computedValue$value2;
+			if (!computedInputValue.value) return;
+			event.preventDefault();
+			if (props.uniqueValue && ((_computedValue$value2 = computedValue.value) === null || _computedValue$value2 === void 0 ? void 0 : _computedValue$value2.includes(computedInputValue.value))) {
+				emit("pressEnter", computedInputValue.value, event);
+				return;
+			}
+			updateValue(computedValue.value.concat(computedInputValue.value), event);
+			emit("pressEnter", computedInputValue.value, event);
+			if (!retainInputValue.value.create) updateInputValue("", event);
+		};
+		const handleFocus = (event) => {
+			var _eventHandlers$value2, _eventHandlers$value3;
+			innerFocused.value = true;
+			emit("focus", event);
+			(_eventHandlers$value2 = eventHandlers.value) === null || _eventHandlers$value2 === void 0 || (_eventHandlers$value3 = _eventHandlers$value2.onFocus) === null || _eventHandlers$value3 === void 0 || _eventHandlers$value3.call(_eventHandlers$value2, event);
+		};
+		const handleBlur = (event) => {
+			var _eventHandlers$value4, _eventHandlers$value5;
+			innerFocused.value = false;
+			if (!retainInputValue.value.blur && computedInputValue.value) updateInputValue("", event);
+			emit("blur", event);
+			(_eventHandlers$value4 = eventHandlers.value) === null || _eventHandlers$value4 === void 0 || (_eventHandlers$value5 = _eventHandlers$value4.onBlur) === null || _eventHandlers$value5 === void 0 || _eventHandlers$value5.call(_eventHandlers$value4, event);
+		};
+		const getLastClosableIndex = () => {
+			for (let index = valueData.value.length - 1; index >= 0; index -= 1) if (valueData.value[index].closable) return index;
+			return -1;
+		};
+		const handleKeyDown = (event) => {
+			if (props.readonly && !mergedDisabled.value && isReadonlyModificationKey(event)) showReadonlyTip();
+			if (mergedDisabled.value || props.readonly) return;
+			const keyCode = event.key || event.code;
+			if (!isComposition.value && computedInputValue.value && keyCode === Enter.key) handlePressEnter(event);
+			if (!isComposition.value && tags.value.length && !computedInputValue.value && keyCode === Backspace.key) {
+				const lastIndex = getLastClosableIndex();
+				if (lastIndex >= 0) handleRemove(valueData.value[lastIndex].value, lastIndex, event);
+			}
+		};
+		const setInputWidth = (width) => {
+			inputStyle.width = width > 12 ? `${width}px` : "12px";
+		};
+		const handleResize = () => {
+			if (mirrorRef.value) setInputWidth(mirrorRef.value.offsetWidth);
+			nextTick(syncResponsiveTags);
+		};
+		onMounted(() => {
+			if (mirrorRef.value) setInputWidth(mirrorRef.value.offsetWidth);
+			nextTick(syncResponsiveTags);
+		});
+		watch(computedInputValue, (value) => {
+			if (inputRef.value && !isComposition.value && value !== inputRef.value.value) inputRef.value.value = value;
+		});
+		watch([
+			valueData,
+			computedInputValue,
+			() => props.maxTagCount
+		], () => nextTick(syncResponsiveTags), { deep: true });
+		const cls = computed(() => [
+			prefixCls,
+			`${prefixCls}-size-${mergedSize.value}`,
+			{
+				[`${prefixCls}-disabled`]: mergedDisabled.value,
+				[`${prefixCls}-disabled-input`]: props.disabledInput,
+				[`${prefixCls}-error`]: mergedError.value,
+				[`${prefixCls}-focus`]: mergedFocused.value,
+				[`${prefixCls}-readonly`]: props.readonly,
+				[`${prefixCls}-responsive`]: isResponsiveMaxTagCount.value,
+				[`${prefixCls}-has-tag`]: valueData.value.length > 0,
+				[`${prefixCls}-has-prefix`]: Boolean(slots.prefix),
+				[`${prefixCls}-has-suffix`]: Boolean(slots.suffix) || showClearBtn.value || feedback.value,
+				[`${prefixCls}-has-placeholder`]: !computedValue.value.length,
+				[`${prefixCls}-fit-width`]: props.fitWidth,
+				[`${prefixCls}-max-w-full`]: props.maxWFull
+			}
+		]);
+		const wrapperAttrs = computed(() => {
+			const outerAttrs = omit(attrs, INPUT_EVENTS);
+			return _objectSpread2(_objectSpread2({}, outerAttrs), {}, { style: [fitWidthStyle.value, outerAttrs.style] });
+		});
+		const inputEventAttrs = computed(() => pick(attrs, INPUT_EVENTS));
+		const mergedInputAttrs = computed(() => _objectSpread2(_objectSpread2({}, inputEventAttrs.value), props.inputAttrs));
+		const getTagStyle = (index) => {
+			var _tags$value$index;
+			return isCompressedResponsiveTag(index, (_tags$value$index = tags.value[index]) === null || _tags$value$index === void 0 ? void 0 : _tags$value$index.value) ? { maxWidth: `${responsiveTagMaxWidth.value}px` } : void 0;
+		};
+		const inputElementStyle = computed(() => {
+			const width = props.fitWidth ? fitWidthValue : inputStyle.width;
+			return isResponsiveMaxTagCount.value ? _objectSpread2(_objectSpread2({}, inputStyle), {}, {
+				width,
+				flex: "0 0 auto",
+				minWidth: width
+			}) : _objectSpread2(_objectSpread2({}, inputStyle), {}, { width });
+		});
+		function isCompressedResponsiveTag(index, value) {
+			return isResponsiveMaxTagCount.value && !isOverflowCounterTag(value) && hiddenTagCount.value > 0 && index === 0 && responsiveTagMaxWidth.value > 0;
+		}
+		const focus = () => {
+			var _inputRef$value2;
+			return (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 ? void 0 : _inputRef$value2.focus();
+		};
+		const blur = () => {
+			var _inputRef$value3;
+			return (_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 ? void 0 : _inputRef$value3.blur();
+		};
+		__expose({
+			inputRef,
+			focus,
+			blur
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineTagContent), null, {
+				default: withCtx(({ item, index, measure }) => [measure || !isCompressedResponsiveTag(index, item.value) ? renderSlot(_ctx.$slots, "tag", { data: getSlotData(item) }, () => {
+					var _props$formatTag, _props$formatTag2;
+					return [createTextVNode(toDisplayString((_props$formatTag = (_props$formatTag2 = props.formatTag) === null || _props$formatTag2 === void 0 ? void 0 : _props$formatTag2.call(props, item.raw)) !== null && _props$formatTag !== void 0 ? _props$formatTag : item.label), 1)];
+				}, void 0, 0) : (openBlock(), createBlock(unref(Ellipsis), {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-tag-ellipsis`)
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "tag", { data: getSlotData(item) }, () => {
+						var _props$formatTag3, _props$formatTag4;
+						return [createTextVNode(toDisplayString((_props$formatTag3 = (_props$formatTag4 = props.formatTag) === null || _props$formatTag4 === void 0 ? void 0 : _props$formatTag4.call(props, item.raw)) !== null && _props$formatTag3 !== void 0 ? _props$formatTag3 : item.label), 1)];
+					})]),
+					_: 2
+				}, 1032, ["class"]))]),
+				_: 3
+			}), createVNode(unref(Tooltip), {
+				"popup-visible": unref(tipVisible),
+				content: unref(readonlyTipText),
+				position: "top"
+			}, {
+				default: withCtx(() => [createElementVNode("span", mergeProps({
+					ref_key: "wrapperRef",
+					ref: wrapperRef
+				}, wrapperAttrs.value, {
+					class: cls.value,
+					onMousedown: handleMousedown
+				}), [
+					isResponsiveMaxTagCount.value && valueData.value.length > 0 ? (openBlock(), createBlock(resize_observer_default, {
+						key: 0,
+						onResize: handleResize
+					}, {
+						default: withCtx(() => [createElementVNode("span", {
+							class: normalizeClass(`${unref(prefixCls)}-resize-observer`),
+							"aria-hidden": "true"
+						}, null, 2)]),
+						_: 1
+					})) : createCommentVNode("", true),
+					createVNode(resize_observer_default, { onResize: handleResize }, {
+						default: withCtx(() => [createElementVNode("span", {
+							ref_key: "mirrorRef",
+							ref: mirrorRef,
+							class: normalizeClass(`${unref(prefixCls)}-mirror`)
+						}, toDisplayString(mirrorText.value), 3)]),
+						_: 1
+					}),
+					isResponsiveMaxTagCount.value && valueData.value.length > 1 ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						ref_key: "measureRef",
+						ref: measureRef,
+						class: normalizeClass(`${unref(prefixCls)}-measure`),
+						"aria-hidden": "true"
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(valueData.value, (item, index) => {
+						return openBlock(), createBlock(unref(Tag), mergeProps({
+							key: `measure-tag-${item.value}`,
+							class: `${unref(prefixCls)}-tag`,
+							visible: "",
+							nowrap: "",
+							closable: isClosableTag(item)
+						}, { ref_for: true }, item.tagProps), {
+							default: withCtx(() => [createVNode(unref(ReuseTagContent), {
+								item,
+								index,
+								measure: ""
+							}, null, 8, ["item", "index"])]),
+							_: 2
+						}, 1040, ["class", "closable"]);
+					}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(Math.max(valueData.value.length - 1, 0), (hiddenCount) => {
+						return openBlock(), createBlock(unref(Tag), {
+							key: `measure-counter-${hiddenCount}`,
+							class: normalizeClass([`${unref(prefixCls)}-tag`, `${unref(prefixCls)}-tag-counter`]),
+							"data-overflow-counter": "true",
+							"data-hidden-count": hiddenCount,
+							visible: "",
+							nowrap: ""
+						}, {
+							default: withCtx(() => [createTextVNode(" +" + toDisplayString(hiddenCount), 1)]),
+							_: 2
+						}, 1032, ["class", "data-hidden-count"]);
+					}), 128))], 2)) : createCommentVNode("", true),
+					_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(`${unref(prefixCls)}-prefix`)
+					}, [renderSlot(_ctx.$slots, "prefix")], 2)) : createCommentVNode("", true),
+					createVNode(TransitionGroup, {
+						tag: "span",
+						name: "input-tag-zoom",
+						class: normalizeClass([`${unref(prefixCls)}-inner`, {
+							[`${unref(prefixCls)}-inner-responsive`]: isResponsiveMaxTagCount.value,
+							[`${unref(prefixCls)}-nowrap`]: props.tagNowrap
+						}])
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (item, index) => {
+							return openBlock(), createBlock(unref(Tag), mergeProps({
+								key: `tag-${item.value}`,
+								class: [`${unref(prefixCls)}-tag`, {
+									[`${unref(prefixCls)}-tag-counter`]: isOverflowCounterTag(item.value),
+									[`${unref(prefixCls)}-tag-overflow`]: isCompressedResponsiveTag(index, item.value)
+								}],
+								closable: isClosableTag(item),
+								visible: "",
+								nowrap: props.tagNowrap || isResponsiveMaxTagCount.value,
+								style: getTagStyle(index)
+							}, { ref_for: true }, item.tagProps, { onClose: ($event) => handleRemove(item.value, index, $event) }), {
+								default: withCtx(() => [createVNode(unref(ReuseTagContent), {
+									item,
+									index,
+									measure: false
+								}, null, 8, ["item", "index"])]),
+								_: 2
+							}, 1040, [
+								"class",
+								"closable",
+								"nowrap",
+								"style",
+								"onClose"
+							]);
+						}), 128)), createElementVNode("input", mergeProps({
+							key: "input-tag-input",
+							ref_key: "inputRef",
+							ref: inputRef
+						}, mergedInputAttrs.value, {
+							class: `${unref(prefixCls)}-input`,
+							style: inputElementStyle.value,
+							placeholder: valueData.value.length === 0 ? props.placeholder : void 0,
+							disabled: unref(mergedDisabled),
+							readonly: Boolean(props.readonly || props.disabledInput),
+							onInput: handleInput,
+							onKeydown: handleKeyDown,
+							onFocus: handleFocus,
+							onBlur: handleBlur,
+							onCompositionstart: handleComposition,
+							onCompositionupdate: handleComposition,
+							onCompositionend: handleComposition
+						}), null, 16, _hoisted_1)]),
+						_: 1
+					}, 8, ["class"]),
+					showClearBtn.value ? (openBlock(), createBlock(icon_hover_default, {
+						key: 3,
+						class: normalizeClass(`${unref(prefixCls)}-clear-btn`),
+						onClick: handleClear,
+						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+					}, {
+						default: withCtx(() => [createVNode(unref(IconClose))]),
+						_: 1
+					}, 8, ["class"])) : createCommentVNode("", true),
+					_ctx.$slots.suffix || unref(feedback) ? (openBlock(), createElementBlock("span", {
+						key: 4,
+						class: normalizeClass(`${unref(prefixCls)}-suffix`)
+					}, [renderSlot(_ctx.$slots, "suffix"), unref(feedback) ? (openBlock(), createBlock(feedback_icon_default, {
+						key: 0,
+						type: unref(feedback)
+					}, null, 8, ["type"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
+				], 16)]),
+				_: 3
+			}, 8, ["popup-visible", "content"])], 64);
+		};
+	}
+}));
+//#endregion
+export { input_tag_vue_vue_type_script_setup_true_lang_default as default };

package/es/input-tag/utils.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { isNumber, isObject } from "../_utils/is.js";
 //#region components/input-tag/utils.ts
 var getValueData = (value, fieldNames) => {

package/es/json-form/json-form-component.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { JSON_FORM_COMPONENT_TYPES } from "./types.js";
 import { mergeJsonFormClassName, shouldStretchJsonFormControl } from "./utils.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toHandlers, useModel, useSlots, withCtx } from "vue";
@@ -27,6 +27,7 @@ var json_form_component_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 			const type = (_props$schema$type2 = props.schema.type) !== null && _props$schema$type2 !== void 0 ? _props$schema$type2 : JSON_FORM_COMPONENT_TYPES.input;
 			if ([
 				JSON_FORM_COMPONENT_TYPES.input,
+				JSON_FORM_COMPONENT_TYPES.inputMask,
 				JSON_FORM_COMPONENT_TYPES.inputSearch,
 				JSON_FORM_COMPONENT_TYPES.inputNumber,
 				JSON_FORM_COMPONENT_TYPES.inputPassword,

package/es/json-form/json-form-item.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import grid_col_default from "../grid/grid-col.js";
 import grid_row_default from "../grid/grid-row.js";
 import form_item_default from "../form/form-item.js";

package/es/json-form/json-form.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import { configProviderInjectionKey } from "../config-provider/context.js";
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import form_default from "../form/form.js";
 import { JSON_FORM_ADAPTERS } from "./types.js";

package/es/json-form/types.d.ts

@@ -6,6 +6,7 @@ import type { DatePickerInstance, RangePickerInstance } from '../date-picker';
 import type { FieldRule, FormItemInstance } from '../form';
 import type { GridColInstance, GridRowInstance } from '../grid';
 import type { InputInstance, InputPasswordInstance, InputSearchInstance } from '../input';
+import type { InputMaskInstance } from '../input-mask';
 import type { InputNumberInstance } from '../input-number';
 import type { InputTagInstance } from '../input-tag';
 import type { MentionInstance } from '../mention';
@@ -31,6 +32,7 @@ export declare const JSON_FORM_COMPONENT_TYPES: {
     readonly checkboxGroup: "checkboxGroup";
     readonly datePicker: "datePicker";
     readonly input: "input";
+    readonly inputMask: "inputMask";
     readonly inputNumber: "inputNumber";
     readonly inputPassword: "inputPassword";
     readonly inputSearch: "inputSearch";
@@ -67,6 +69,7 @@ type JsonFormBuiltInComponentPropsMap = {
     checkboxGroup: CheckboxGroupInstance['$props'];
     datePicker: DatePickerInstance['$props'];
     input: InputInstance['$props'];
+    inputMask: InputMaskInstance['$props'];
     inputNumber: InputNumberInstance['$props'];
     inputPassword: InputPasswordInstance['$props'];
     inputSearch: InputSearchInstance['$props'];
@@ -94,6 +97,7 @@ type JsonFormBuiltInComponentEventsMap = {
     checkboxGroup: CheckboxGroupInstance['$emit'];
     datePicker: DatePickerInstance['$emit'];
     input: InputInstance['$emit'];
+    inputMask: InputMaskInstance['$emit'];
     inputNumber: InputNumberInstance['$emit'];
     inputPassword: InputPasswordInstance['$emit'];
     inputSearch: InputSearchInstance['$emit'];

package/es/json-form/types.js

@@ -11,6 +11,7 @@ var JSON_FORM_COMPONENT_TYPES = {
 	checkboxGroup: "checkboxGroup",
 	datePicker: "datePicker",
 	input: "input",
+	inputMask: "inputMask",
 	inputNumber: "inputNumber",
 	inputPassword: "inputPassword",
 	inputSearch: "inputSearch",