@sdata/web-vue 3.29.0 → 4.0.0

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

@@ -1,674 +1,5 @@
-import { useFormItem } from "../_hooks/use-form-item.js";
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.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 { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, onMounted, reactive, ref, toRef, toRefs, watch } from "vue";
-//#region components/input-tag/input-tag.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-var DEFAULT_FIELD_NAMES = {
-	value: "value",
-	label: "label",
-	closable: "closable",
-	tagProps: "tagProps"
-};
-var input_tag_default = /* @__PURE__ */ defineComponent({
-	name: "InputTag",
-	inheritAttrs: false,
-	props: {
-		/**
-		* @zh 绑定值
-		* @en Value
-		* @vModel
-		*/
-		modelValue: { type: Array },
-		/**
-		* @zh 默认值（非受控状态）
-		* @en Default value (uncontrolled state)
-		*/
-		defaultValue: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		* @zh 输入框的值
-		* @en The value of the input
-		* @vModel
-		*/
-		inputValue: String,
-		/**
-		* @zh 输入框的默认值（非受控状态）
-		* @en The default value of the input (uncontrolled state)
-		*/
-		defaultInputValue: {
-			type: String,
-			default: ""
-		},
-		/**
-		* @zh 占位符
-		* @en Placeholder
-		*/
-		placeholder: String,
-		/**
-		* @zh 宽度是否适应文字内容
-		* @en Whether the width adapts to the text content
-		*/
-		fitWidth: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 最大宽度是否限制为父容器宽度
-		* @en Whether the maximum width is limited to the parent container width
-		*/
-		maxWFull: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 是否禁用
-		* @en Whether to disable
-		*/
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 是否为错误状态
-		* @en Whether it is an error state
-		*/
-		error: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 是否为只读模式
-		* @en Whether it is read-only mode
-		*/
-		readonly: {
-			type: [Boolean, String],
-			default: false
-		},
-		/**
-		* @zh 是否允许清空
-		* @en Whether to allow clear
-		*/
-		allowClear: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 输入框的大小
-		* @en The size of the input
-		* @values 'mini','small','medium','large'
-		* @defaultValue 'medium'
-		*/
-		size: { type: String },
-		/**
-		* @zh 最多展示的标签个数，`0` 表示不限制
-		* @en The maximum number of tags displayed, `0` means unlimited
-		*/
-		maxTagCount: {
-			type: [Number, String],
-			default: 0
-		},
-		/**
-		* @zh 是否保留输入框的内容
-		* @en Whether to keep the content of the input box
-		*/
-		retainInputValue: {
-			type: [Boolean, Object],
-			default: false
-		},
-		/**
-		* @zh 格式化标签内容
-		* @en Format tag content
-		*/
-		formatTag: { type: Function },
-		/**
-		* @zh 是否仅创建唯一的值
-		* @en Whether to create only unique values
-		* @version 2.15.0
-		*/
-		uniqueValue: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 自定义 `TagData` 中的字段
-		* @en Customize fields in `TagData`
-		* @version 2.22.0
-		*/
-		fieldNames: { type: Object },
-		/**
-		* @zh 标签内容不换行
-		* @en Tag content does not wrap
-		* @version 2.56.1
-		*/
-		tagNowrap: {
-			type: Boolean,
-			default: false
-		},
-		baseCls: String,
-		focused: Boolean,
-		disabledInput: Boolean,
-		uninjectFormItemContext: Boolean,
-		inputAttrs: Object
-	},
-	emits: {
-		"update:modelValue": (_value) => true,
-		"update:inputValue": (_inputValue) => true,
-		/**
-		* @zh 值发生改变时触发
-		* @en Triggered when the value changes
-		* @param {(string | number | TagData)[]} value
-		* @param {Event} ev
-		*/
-		"change": (_value, _ev) => true,
-		/**
-		* @zh 输入值发生改变时触发
-		* @en Trigger when the input value changes
-		* @param {string} inputValue
-		* @param {Event} ev
-		*/
-		"inputValueChange": (_inputValue, _ev) => true,
-		/**
-		* @zh 按下回车键时触发
-		* @en Triggered when the enter key is pressed
-		* @param {string} inputValue
-		* @param {KeyboardEvent} ev
-		*/
-		"pressEnter": (_inputValue, _ev) => true,
-		/**
-		* @zh 点击标签的删除按钮时触发
-		* @en Triggered when the delete button of the label is clicked
-		* @param {string | number} removed
-		* @param {Event} ev
-		*/
-		"remove": (_removed, _ev) => true,
-		/**
-		* @zh 点击清除按钮时触发
-		* @en Triggered when the clear button is clicked
-		* @param {MouseEvent} ev
-		*/
-		"clear": (_ev) => true,
-		/**
-		* @zh 输入框获取焦点时触发
-		* @en Triggered when the input box gets focus
-		* @param {FocusEvent} ev
-		*/
-		"focus": (_ev) => true,
-		/**
-		* @zh 输入框失去焦点时触发
-		* @en Triggered when the input box loses focus
-		* @param {FocusEvent} ev
-		*/
-		"blur": (_ev) => true
-	},
-	/**
-	* @zh 后缀元素
-	* @en Suffix
-	* @slot suffix
-	*/
-	/**
-	* @zh 前缀元素
-	* @en Prefix
-	* @slot prefix
-	*/
-	/**
-	* @zh 输入框标签的显示内容
-	* @en Display content of tag
-	* @slot tag
-	* @binding {TagData} data
-	*/
-	setup(props, { emit, slots, attrs }) {
-		const { size, disabled, error, uninjectFormItemContext, modelValue, allowClear } = toRefs(props);
-		const prefixCls = props.baseCls || getPrefixCls("input-tag");
-		const wrapperRef = ref();
-		const inputRef = ref();
-		const mirrorRef = ref();
-		const measureRef = ref();
-		const { mergedSize: _mergedSize, mergedDisabled, mergedError, feedback, eventHandlers } = useFormItem({
-			size,
-			disabled,
-			error,
-			uninject: uninjectFormItemContext === null || uninjectFormItemContext === void 0 ? void 0 : uninjectFormItemContext.value
-		});
-		const { mergedSize } = useSize(_mergedSize);
-		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 _focused = ref(false);
-		const _value = ref(props.defaultValue);
-		const _inputValue = ref(props.defaultInputValue);
-		const isComposition = ref(false);
-		const compositionValue = ref("");
-		const retainInputValue = computed(() => {
-			if (isObject(props.retainInputValue)) return _objectSpread2({
-				create: false,
-				blur: false
-			}, props.retainInputValue);
-			return {
-				create: props.retainInputValue,
-				blur: props.retainInputValue
-			};
-		});
-		const inputStyle = reactive({ width: "12px" });
-		const responsiveVisibleTagCount = ref(null);
-		const responsiveTagMaxWidth = ref(0);
-		const mergedFocused = computed(() => props.focused || _focused.value);
-		const isResponsiveMaxTagCount = computed(() => props.maxTagCount === "responsive");
-		const updateInputValue = (value, ev) => {
-			_inputValue.value = value;
-			emit("update:inputValue", value);
-			emit("inputValueChange", value, ev);
-		};
-		const handleComposition = (ev) => {
-			const { value } = ev.target;
-			if (ev.type === "compositionend") {
-				isComposition.value = false;
-				compositionValue.value = "";
-				updateInputValue(value, ev);
-				nextTick(() => {
-					if (inputRef.value && computedInputValue.value !== inputRef.value.value) inputRef.value.value = computedInputValue.value;
-				});
-			} else {
-				var _ev$data;
-				isComposition.value = true;
-				compositionValue.value = computedInputValue.value + ((_ev$data = ev.data) !== null && _ev$data !== void 0 ? _ev$data : "");
-			}
-		};
-		const computedValue = computed(() => {
-			var _props$modelValue;
-			return (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : _value.value;
-		});
-		const computedInputValue = computed(() => {
-			var _props$inputValue;
-			return (_props$inputValue = props.inputValue) !== null && _props$inputValue !== void 0 ? _props$inputValue : _inputValue.value;
-		});
-		watch(modelValue, (value) => {
-			if (isUndefined(value) || isNull(value)) _value.value = [];
-		});
-		const handleMousedown = (e) => {
-			if (inputRef.value && e.target !== inputRef.value) {
-				e.preventDefault();
-				inputRef.value.focus();
-			}
-		};
-		const handleInput = (ev) => {
-			const { value } = ev.target;
-			if (!isComposition.value) {
-				updateInputValue(value, ev);
-				nextTick(() => {
-					if (inputRef.value && computedInputValue.value !== inputRef.value.value) inputRef.value.value = computedInputValue.value;
-				});
-			}
-		};
-		const valueData = computed(() => getValueData(computedValue.value, mergedFieldNames.value));
-		const { fitWidthStyle, fitWidthValue } = useFitWidth({
-			fitWidth: () => props.fitWidth,
-			text: computed(() => compositionValue.value || computedInputValue.value || (valueData.value.length === 0 ? props.placeholder : void 0)),
-			fallbackWidth: () => valueData.value.length > 0 ? "12px" : "4ch",
-			target: inputRef,
-			additionalWidth: 12
-		});
-		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(() => {
-			const count = valueData.value.length - visibleTagCount.value;
-			return count > 0 ? count : 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);
-			const marginLeft = Number.parseFloat(style.marginLeft || "0") || 0;
-			const marginRight = Number.parseFloat(style.marginRight || "0") || 0;
-			return element.offsetWidth + marginLeft + marginRight;
-		};
-		const getCounterWidth = (hiddenCount) => {
-			if (!measureRef.value || hiddenCount <= 0) return 0;
-			const counterElement = measureRef.value.querySelector(`[data-hidden-count="${hiddenCount}"]`);
-			return getOuterWidth(counterElement);
-		};
-		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 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, ev) => {
-			var _eventHandlers$value, _eventHandlers$value$;
-			_value.value = value;
-			emit("update:modelValue", value);
-			emit("change", value, ev);
-			(_eventHandlers$value = eventHandlers.value) === null || _eventHandlers$value === void 0 || (_eventHandlers$value$ = _eventHandlers$value.onChange) === null || _eventHandlers$value$ === void 0 || _eventHandlers$value$.call(_eventHandlers$value, ev);
-		};
-		const handleRemove = (value, index, e) => {
-			var _computedValue$value;
-			const newValue = (_computedValue$value = computedValue.value) === null || _computedValue$value === void 0 ? void 0 : _computedValue$value.filter((_, i) => i !== index);
-			updateValue(newValue, e);
-			emit("remove", value, e);
-		};
-		const handleClear = (e) => {
-			updateValue([], e);
-			emit("clear", e);
-		};
-		const showClearBtn = computed(() => !mergedDisabled.value && !props.readonly && mergedAllowClear.value && Boolean(computedValue.value.length));
-		const handlePressEnter = (e) => {
-			if (computedInputValue.value) {
-				var _computedValue$value2;
-				e.preventDefault();
-				if (props.uniqueValue && ((_computedValue$value2 = computedValue.value) === null || _computedValue$value2 === void 0 ? void 0 : _computedValue$value2.includes(computedInputValue.value))) {
-					emit("pressEnter", computedInputValue.value, e);
-					return;
-				}
-				const newValue = computedValue.value.concat(computedInputValue.value);
-				updateValue(newValue, e);
-				emit("pressEnter", computedInputValue.value, e);
-				if (!retainInputValue.value.create) updateInputValue("", e);
-			}
-		};
-		const handleFocus = (ev) => {
-			var _eventHandlers$value2, _eventHandlers$value3;
-			_focused.value = true;
-			emit("focus", ev);
-			(_eventHandlers$value2 = eventHandlers.value) === null || _eventHandlers$value2 === void 0 || (_eventHandlers$value3 = _eventHandlers$value2.onFocus) === null || _eventHandlers$value3 === void 0 || _eventHandlers$value3.call(_eventHandlers$value2, ev);
-		};
-		const handleBlur = (ev) => {
-			var _eventHandlers$value4, _eventHandlers$value5;
-			_focused.value = false;
-			if (!retainInputValue.value.blur && computedInputValue.value) updateInputValue("", ev);
-			emit("blur", ev);
-			(_eventHandlers$value4 = eventHandlers.value) === null || _eventHandlers$value4 === void 0 || (_eventHandlers$value5 = _eventHandlers$value4.onBlur) === null || _eventHandlers$value5 === void 0 || _eventHandlers$value5.call(_eventHandlers$value4, ev);
-		};
-		const getLastClosableIndex = () => {
-			for (let i = valueData.value.length - 1; i >= 0; i--) if (valueData.value[i].closable) return i;
-			return -1;
-		};
-		const handleKeyDown = (e) => {
-			if (props.readonly && !mergedDisabled.value && isReadonlyModificationKey(e)) showReadonlyTip();
-			if (mergedDisabled.value || props.readonly) return;
-			const keyCode = e.key || e.code;
-			if (!isComposition.value && computedInputValue.value && keyCode === Enter.key) handlePressEnter(e);
-			if (!isComposition.value && tags.value.length > 0 && !computedInputValue.value && keyCode === Backspace.key) {
-				const lastIndex = getLastClosableIndex();
-				if (lastIndex >= 0) handleRemove(valueData.value[lastIndex].value, lastIndex, e);
-			}
-		};
-		const setInputWidth = (width) => {
-			if (width > 12) inputStyle.width = `${width}px`;
-			else inputStyle.width = "12px";
-		};
-		onMounted(() => {
-			if (mirrorRef.value) setInputWidth(mirrorRef.value.offsetWidth);
-			nextTick(() => {
-				syncResponsiveTags();
-			});
-		});
-		const handleResize = () => {
-			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 wrapperAttrs = omit(attrs, INPUT_EVENTS);
-			return _objectSpread2(_objectSpread2({}, wrapperAttrs), {}, { style: [fitWidthStyle.value, wrapperAttrs.style] });
-		});
-		const inputAttrs = computed(() => pick(attrs, INPUT_EVENTS));
-		const renderTagContent = (item, index) => {
-			var _ref, _slots$tag, _slots$tag2, _props$formatTag;
-			const content = (_ref = (_slots$tag = (_slots$tag2 = slots.tag) === null || _slots$tag2 === void 0 ? void 0 : _slots$tag2.call(slots, { data: item.raw })) !== null && _slots$tag !== void 0 ? _slots$tag : (_props$formatTag = props.formatTag) === null || _props$formatTag === void 0 ? void 0 : _props$formatTag.call(props, item.raw)) !== null && _ref !== void 0 ? _ref : item.label;
-			if (!isResponsiveMaxTagCount.value || hiddenTagCount.value === 0 || index !== 0 || responsiveTagMaxWidth.value <= 0) return content;
-			return createVNode(Ellipsis, { "class": `${prefixCls}-tag-ellipsis` }, _isSlot(content) ? content : { default: () => [content] });
-		};
-		const getTagStyle = (index) => {
-			if (!isResponsiveMaxTagCount.value || hiddenTagCount.value === 0 || index !== 0 || responsiveTagMaxWidth.value <= 0) return;
-			return { maxWidth: `${responsiveTagMaxWidth.value}px` };
-		};
-		const getInputStyle = computed(() => {
-			const width = props.fitWidth ? fitWidthValue : inputStyle.width;
-			if (!isResponsiveMaxTagCount.value) return _objectSpread2(_objectSpread2({}, inputStyle), {}, { width });
-			return _objectSpread2(_objectSpread2({}, inputStyle), {}, {
-				width,
-				flex: "0 0 auto",
-				minWidth: width
-			});
-		});
-		const isCompressedResponsiveTag = (index, value) => isResponsiveMaxTagCount.value && !isOverflowCounterTag(value) && hiddenTagCount.value > 0 && index === 0 && responsiveTagMaxWidth.value > 0;
-		const render = () => createVNode(Tooltip, {
-			"popupVisible": tipVisible.value,
-			"content": readonlyTipText.value,
-			"position": "top"
-		}, { default: () => {
-			var _slots$suffix;
-			return [createVNode("span", mergeProps({
-				"ref": wrapperRef,
-				"class": cls.value,
-				"onMousedown": handleMousedown
-			}, wrapperAttrs.value), [
-				isResponsiveMaxTagCount.value && valueData.value.length > 0 ? createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode("span", {
-					"class": `${prefixCls}-resize-observer`,
-					"aria-hidden": "true"
-				}, null)] }) : null,
-				createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode("span", {
-					"ref": mirrorRef,
-					"class": `${prefixCls}-mirror`
-				}, [valueData.value.length > 0 ? compositionValue.value || computedInputValue.value : compositionValue.value || computedInputValue.value || props.placeholder])] }),
-				isResponsiveMaxTagCount.value && valueData.value.length > 1 ? createVNode("span", {
-					"ref": measureRef,
-					"class": `${prefixCls}-measure`,
-					"aria-hidden": "true"
-				}, [valueData.value.map((item) => createVNode(Tag, mergeProps({
-					"key": `measure-tag-${item.value}`,
-					"class": `${prefixCls}-tag`,
-					"visible": true,
-					"nowrap": true,
-					"closable": isClosableTag(item)
-				}, item.tagProps), { default: () => {
-					var _ref2, _slots$tag3, _slots$tag4, _props$formatTag2;
-					return [(_ref2 = (_slots$tag3 = (_slots$tag4 = slots.tag) === null || _slots$tag4 === void 0 ? void 0 : _slots$tag4.call(slots, { data: item.raw })) !== null && _slots$tag3 !== void 0 ? _slots$tag3 : (_props$formatTag2 = props.formatTag) === null || _props$formatTag2 === void 0 ? void 0 : _props$formatTag2.call(props, item.raw)) !== null && _ref2 !== void 0 ? _ref2 : item.label];
-				} })), Array.from({ length: valueData.value.length - 1 }, (_, index) => index + 1).map((hiddenCount) => createVNode(Tag, {
-					"key": `measure-counter-${hiddenCount}`,
-					"class": `${prefixCls}-tag ${prefixCls}-tag-counter`,
-					"data-overflow-counter": "true",
-					"data-hidden-count": hiddenCount,
-					"visible": true,
-					"nowrap": true
-				}, { default: () => [`+${hiddenCount}`] }))]) : null,
-				slots.prefix && createVNode("span", { "class": `${prefixCls}-prefix` }, [slots.prefix()]),
-				createVNode(TransitionGroup, mergeProps({
-					"tag": "span",
-					"name": "input-tag-zoom"
-				}, { class: [`${prefixCls}-inner`, {
-					[`${prefixCls}-inner-responsive`]: isResponsiveMaxTagCount.value,
-					[`${prefixCls}-nowrap`]: props.tagNowrap
-				}] }), { default: () => {
-					var _props$inputAttrs;
-					return [tags.value.map((item, index) => {
-						let _slot;
-						return createVNode(Tag, mergeProps({
-							"key": `tag-${item.value}`,
-							"class": [`${prefixCls}-tag`, {
-								[`${prefixCls}-tag-counter`]: isOverflowCounterTag(item.value),
-								[`${prefixCls}-tag-overflow`]: isCompressedResponsiveTag(index, item.value)
-							}],
-							"closable": isClosableTag(item),
-							"visible": true,
-							"nowrap": props.tagNowrap || isResponsiveMaxTagCount.value,
-							"style": getTagStyle(index)
-						}, item.tagProps, { "onClose": (ev) => handleRemove(item.value, index, ev) }), _isSlot(_slot = renderTagContent(item, index)) ? _slot : { default: () => [_slot] });
-					}), createVNode("input", mergeProps(inputAttrs.value, (_props$inputAttrs = props.inputAttrs) !== null && _props$inputAttrs !== void 0 ? _props$inputAttrs : {}, {
-						"ref": inputRef,
-						"key": "input-tag-input",
-						"class": `${prefixCls}-input`,
-						"style": getInputStyle.value,
-						"placeholder": valueData.value.length === 0 ? props.placeholder : void 0,
-						"disabled": mergedDisabled.value,
-						"readonly": !!(props.readonly || props.disabledInput),
-						"onInput": handleInput,
-						"onKeydown": handleKeyDown,
-						"onFocus": handleFocus,
-						"onBlur": handleBlur,
-						"onCompositionstart": handleComposition,
-						"onCompositionupdate": handleComposition,
-						"onCompositionend": handleComposition
-					}), null)];
-				} }),
-				showClearBtn.value && createVNode(icon_hover_default, mergeProps({ "class": `${prefixCls}-clear-btn` }, {
-					onClick: handleClear,
-					onMousedown: (e) => e.stopPropagation()
-				}), { default: () => [createVNode(IconClose, null, null)] }),
-				(slots.suffix || Boolean(feedback.value)) && createVNode("span", { "class": `${prefixCls}-suffix` }, [(_slots$suffix = slots.suffix) === null || _slots$suffix === void 0 ? void 0 : _slots$suffix.call(slots), Boolean(feedback.value) && createVNode(feedback_icon_default, { "type": feedback.value }, null)])
-			])];
-		} });
-		return {
-			inputRef,
-			render
-		};
-	},
-	methods: {
-		/**
-		* @zh 使输入框获取焦点
-		* @en Make the input box focus
-		* @public
-		*/
-		focus() {
-			var _this$inputRef;
-			(_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 || _this$inputRef.focus();
-		},
-		/**
-		* @zh 使输入框失去焦点
-		* @en Make the input box lose focus
-		* @public
-		*/
-		blur() {
-			var _this$inputRef2;
-			(_this$inputRef2 = this.inputRef) === null || _this$inputRef2 === void 0 || _this$inputRef2.blur();
-		}
-	},
-	render() {
-		return this.render();
-	}
-});
+import input_tag_vue_vue_type_script_setup_true_lang_default from "./input-tag.vue_vue_type_script_setup_true_lang.js";
+//#region components/input-tag/input-tag.vue
+var input_tag_default = input_tag_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { input_tag_default as default };