@sdata/web-vue 1.8.0 → 1.9.0

package/es/index.css

@@ -2012,6 +2012,7 @@ body {
 }
 .sd-select-view-multiple .sd-select-view-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -2019,9 +2020,16 @@ body {
   display: flex;
   flex-wrap: wrap;
 }
+.sd-select-view-multiple .sd-select-view-inner.sd-select-view-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -2039,6 +2047,19 @@ body {
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   width: 100%;
   padding-right: 0;
@@ -2065,6 +2086,9 @@ body {
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   box-sizing: border-box;
 }
+.sd-select-view-inner-responsive .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
+  flex: 0 0 auto;
+}
 .sd-select-view-multiple .sd-select-view-mirror {
   position: absolute;
   top: 0;
@@ -2073,6 +2097,27 @@ body {
   visibility: hidden;
   pointer-events: none;
 }
+.sd-select-view-multiple .sd-select-view-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-select-view-multiple .sd-select-view-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-select-view-multiple .sd-select-view-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);
@@ -10160,6 +10205,7 @@ body {
 }
 .sd-input-tag .sd-input-tag-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -10167,9 +10213,16 @@ body {
   display: flex;
   flex-wrap: wrap;
 }
+.sd-input-tag .sd-input-tag-inner.sd-input-tag-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -10187,6 +10240,19 @@ body {
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   width: 100%;
   padding-right: 0;
@@ -10213,6 +10279,9 @@ body {
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   box-sizing: border-box;
 }
+.sd-input-tag-inner-responsive .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
+  flex: 0 0 auto;
+}
 .sd-input-tag .sd-input-tag-mirror {
   position: absolute;
   top: 0;
@@ -10221,6 +10290,27 @@ body {
   visibility: hidden;
   pointer-events: none;
 }
+.sd-input-tag .sd-input-tag-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);

package/es/index.js

@@ -33,6 +33,8 @@ import Breadcrumb from "./breadcrumb/index.js";
 import radio_group_default from "./radio/radio-group.js";
 import Radio from "./radio/index.js";
 import optgroup_default from "./select/optgroup.js";
+import Tooltip from "./tooltip/index.js";
+import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
 import Tag from "./tag/index.js";
 import InputTag from "./input-tag/index.js";
 import Select from "./select/index.js";
@@ -61,8 +63,6 @@ import descriptions_item_default from "./descriptions/descriptions-item.js";
 import Descriptions from "./descriptions/index.js";
 import Divider from "./divider/index.js";
 import Drawer from "./drawer/index.js";
-import Tooltip from "./tooltip/index.js";
-import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
 import grid_col_default from "./grid/grid-col.js";
 import grid_item_default from "./grid/grid-item.js";
 import grid_row_default from "./grid/grid-row.js";

package/es/input-tag/index.d.ts

@@ -36,7 +36,7 @@ declare const InputTag: {
             type: import("vue").PropType<import("..").Size>;
         };
         maxTagCount: {
-            type: NumberConstructor;
+            type: import("vue").PropType<number | "responsive">;
             default: number;
         };
         retainInputValue: {
@@ -100,7 +100,7 @@ declare const InputTag: {
         disabledInput: boolean;
         uninjectFormItemContext: boolean;
         defaultInputValue: string;
-        maxTagCount: number;
+        maxTagCount: number | "responsive";
         retainInputValue: boolean | {
             create?: boolean;
             blur?: boolean;
@@ -148,7 +148,7 @@ declare const InputTag: {
             type: import("vue").PropType<import("..").Size>;
         };
         maxTagCount: {
-            type: NumberConstructor;
+            type: import("vue").PropType<number | "responsive">;
             default: number;
         };
         retainInputValue: {
@@ -202,7 +202,7 @@ declare const InputTag: {
         disabledInput: boolean;
         uninjectFormItemContext: boolean;
         defaultInputValue: string;
-        maxTagCount: number;
+        maxTagCount: number | "responsive";
         retainInputValue: boolean | {
             create?: boolean;
             blur?: boolean;
@@ -247,7 +247,7 @@ declare const InputTag: {
         type: import("vue").PropType<import("..").Size>;
     };
     maxTagCount: {
-        type: NumberConstructor;
+        type: import("vue").PropType<number | "responsive">;
         default: number;
     };
     retainInputValue: {
@@ -311,7 +311,7 @@ declare const InputTag: {
     disabledInput: boolean;
     uninjectFormItemContext: boolean;
     defaultInputValue: string;
-    maxTagCount: number;
+    maxTagCount: number | "responsive";
     retainInputValue: boolean | {
         create?: boolean;
         blur?: boolean;

package/es/input-tag/input-tag.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<Size>;
     };
     maxTagCount: {
-        type: NumberConstructor;
+        type: PropType<number | "responsive">;
         default: number;
     };
     retainInputValue: {
@@ -113,7 +113,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<Size>;
     };
     maxTagCount: {
-        type: NumberConstructor;
+        type: PropType<number | "responsive">;
         default: number;
     };
     retainInputValue: {
@@ -161,7 +161,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     disabledInput: boolean;
     uninjectFormItemContext: boolean;
     defaultInputValue: string;
-    maxTagCount: number;
+    maxTagCount: number | "responsive";
     retainInputValue: boolean | {
         create?: boolean;
         blur?: boolean;

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

@@ -12,10 +12,14 @@ 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 Ellipsis from "../ellipsis/index.js";
 import Tag from "../tag/index.js";
 import { getValueData } from "./utils.js";
-import { TransitionGroup, computed, createVNode, defineComponent, mergeProps, nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
+import { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, onMounted, reactive, ref, 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",
@@ -55,7 +59,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		},
 		size: { type: String },
 		maxTagCount: {
-			type: Number,
+			type: [Number, String],
 			default: 0
 		},
 		retainInputValue: {
@@ -91,8 +95,10 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 	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,
@@ -118,7 +124,10 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			};
 		});
 		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);
@@ -166,22 +175,96 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			}
 		};
 		const valueData = computed(() => getValueData(computedValue.value, mergedFieldNames.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(() => {
+			const count = valueData.value.length - visibleTagCount.value;
+			return count > 0 ? count : 0;
+		});
+		const isOverflowCounterTag = (value) => value === "__arco__more";
 		const tags = computed(() => {
-			if (props.maxTagCount > 0) {
-				const invisibleTags = valueData.value.length - props.maxTagCount;
-				if (invisibleTags > 0) {
-					const result = valueData.value.slice(0, props.maxTagCount);
-					const raw = {
-						value: "__arco__more",
-						label: `+${invisibleTags}...`,
-						closable: false
-					};
-					result.push(_objectSpread2({ raw }, raw));
-					return result;
+			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;
+			return getOuterWidth(measureRef.value.querySelector(`[data-hidden-count="${hiddenCount}"]`));
+		};
+		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;
+					}
 				}
 			}
-			return valueData.value;
-		});
+			responsiveVisibleTagCount.value = 1;
+			responsiveTagMaxWidth.value = Math.max(availableWidth - getCounterWidth(totalTags - 1), 0);
+		};
 		const updateValue = (value, ev) => {
 			var _eventHandlers$value, _eventHandlers$value$;
 			_value.value = value;
@@ -244,13 +327,28 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		};
 		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}`,
@@ -260,7 +358,8 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 				[`${prefixCls}-error`]: mergedError.value,
 				[`${prefixCls}-focus`]: mergedFocused.value,
 				[`${prefixCls}-readonly`]: props.readonly,
-				[`${prefixCls}-has-tag`]: tags.value.length > 0,
+				[`${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
@@ -268,36 +367,86 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		]);
 		const wrapperAttrs = computed(() => omit(attrs, INPUT_EVENTS));
 		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(() => {
+			if (!isResponsiveMaxTagCount.value) return inputStyle;
+			return _objectSpread2(_objectSpread2({}, inputStyle), {}, {
+				flex: "0 0 auto",
+				minWidth: inputStyle.width
+			});
+		});
+		const isCompressedResponsiveTag = (index, value) => isResponsiveMaxTagCount.value && !isOverflowCounterTag(value) && hiddenTagCount.value > 0 && index === 0 && responsiveTagMaxWidth.value > 0;
 		const render = () => {
 			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`
-				}, [tags.value.length > 0 ? compositionValue.value || computedInputValue.value : compositionValue.value || computedInputValue.value || props.placeholder])] }),
+				}, [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
+				}, 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, {
 					"tag": "span",
 					"name": "input-tag-zoom",
-					"class": [`${prefixCls}-inner`, { [`${prefixCls}-nowrap`]: props.tagNowrap }]
-				}, { default: () => [tags.value.map((item, index) => createVNode(Tag, mergeProps({
-					"key": `tag-${item.value}`,
-					"class": `${prefixCls}-tag`,
-					"closable": !mergedDisabled.value && !props.readonly && item.closable,
-					"visible": true,
-					"nowrap": props.tagNowrap
-				}, item.tagProps, { "onClose": (ev) => handleRemove(item.value, index, ev) }), { default: () => {
-					var _ref, _slots$tag, _slots$tag2, _props$formatTag;
-					return [(_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];
-				} })), createVNode("input", mergeProps(inputAttrs.value, {
+					"class": [`${prefixCls}-inner`, {
+						[`${prefixCls}-inner-responsive`]: isResponsiveMaxTagCount.value,
+						[`${prefixCls}-nowrap`]: props.tagNowrap
+					}]
+				}, { default: () => [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": !mergedDisabled.value && !props.readonly && item.closable,
+						"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, {
 					"ref": inputRef,
 					"key": "input-tag-input",
 					"class": `${prefixCls}-input`,
-					"style": inputStyle,
-					"placeholder": tags.value.length === 0 ? props.placeholder : void 0,
+					"style": getInputStyle.value,
+					"placeholder": valueData.value.length === 0 ? props.placeholder : void 0,
 					"disabled": mergedDisabled.value,
 					"readonly": props.readonly || props.disabledInput,
 					"onInput": handleInput,

package/es/input-tag/style/index.css

@@ -587,6 +587,7 @@
 }
 .sd-input-tag .sd-input-tag-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -594,9 +595,16 @@
   display: flex;
   flex-wrap: wrap;
 }
+.sd-input-tag .sd-input-tag-inner.sd-input-tag-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -614,6 +622,19 @@
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   width: 100%;
   padding-right: 0;
@@ -640,6 +661,9 @@
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   box-sizing: border-box;
 }
+.sd-input-tag-inner-responsive .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
+  flex: 0 0 auto;
+}
 .sd-input-tag .sd-input-tag-mirror {
   position: absolute;
   top: 0;
@@ -648,6 +672,27 @@
   visibility: hidden;
   pointer-events: none;
 }
+.sd-input-tag .sd-input-tag-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);