@sdata/web-vue 3.18.0 → 3.19.0

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

@@ -46,6 +46,14 @@ declare const InputNumber: {
             type: FunctionConstructor;
         };
         placeholder: StringConstructor;
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         hideButton: {
             type: BooleanConstructor;
             default: boolean;
@@ -69,8 +77,8 @@ declare const InputNumber: {
             type: ObjectConstructor;
         };
     }>> & Readonly<{
-        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: Event) => any) | undefined;
+        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onChange?: ((_value: string | number | null | undefined, _ev: Event) => any) | undefined;
         onInput?: ((_value: string | number | null | undefined, _inputValue: string, _ev: Event) => any) | undefined;
@@ -91,10 +99,12 @@ declare const InputNumber: {
         input: (_value: string | number | null | undefined, _inputValue: string, _ev: Event) => true;
         keydown: (_ev: KeyboardEvent) => true;
     }, import("vue").PublicProps, {
+        disabled: boolean;
         error: boolean;
         readonly: string | boolean;
-        disabled: boolean;
         allowClear: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
         max: number;
         mode: "embed" | "button";
         step: number;
@@ -147,6 +157,14 @@ declare const InputNumber: {
             type: FunctionConstructor;
         };
         placeholder: StringConstructor;
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         hideButton: {
             type: BooleanConstructor;
             default: boolean;
@@ -170,8 +188,8 @@ declare const InputNumber: {
             type: ObjectConstructor;
         };
     }>> & Readonly<{
-        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: Event) => any) | undefined;
+        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onChange?: ((_value: string | number | null | undefined, _ev: Event) => any) | undefined;
         onInput?: ((_value: string | number | null | undefined, _inputValue: string, _ev: Event) => any) | undefined;
@@ -184,10 +202,12 @@ declare const InputNumber: {
         focus(): void;
         blur(): void;
     }, {
+        disabled: boolean;
         error: boolean;
         readonly: string | boolean;
-        disabled: boolean;
         allowClear: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
         max: number;
         mode: "embed" | "button";
         step: number;
@@ -237,6 +257,14 @@ declare const InputNumber: {
         type: FunctionConstructor;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hideButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -260,8 +288,8 @@ declare const InputNumber: {
         type: ObjectConstructor;
     };
 }>> & Readonly<{
-    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: Event) => any) | undefined;
+    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onChange?: ((_value: string | number | null | undefined, _ev: Event) => any) | undefined;
     onInput?: ((_value: string | number | null | undefined, _inputValue: string, _ev: Event) => any) | undefined;
@@ -282,10 +310,12 @@ declare const InputNumber: {
     input: (_value: string | number | null | undefined, _inputValue: string, _ev: Event) => true;
     keydown: (_ev: KeyboardEvent) => true;
 }, string, {
+    disabled: boolean;
     error: boolean;
     readonly: string | boolean;
-    disabled: boolean;
     allowClear: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
     max: number;
     mode: "embed" | "button";
     step: number;

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

@@ -40,6 +40,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: FunctionConstructor;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hideButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -115,6 +123,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: FunctionConstructor;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hideButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -138,18 +154,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: ObjectConstructor;
     };
 }>> & Readonly<{
-    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: Event) => any) | undefined;
+    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onChange?: ((_value: InputNumberValue, _ev: Event) => any) | undefined;
     onInput?: ((_value: InputNumberValue, _inputValue: string, _ev: Event) => any) | undefined;
     onKeydown?: ((_ev: KeyboardEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: InputNumberValue) => any) | undefined;
 }>, {
+    disabled: boolean;
     error: boolean;
     readonly: string | boolean;
-    disabled: boolean;
     allowClear: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
     max: number;
     mode: "embed" | "button";
     step: number;

package/es/input-number/input-number.js

@@ -101,6 +101,22 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 		*/
 		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 hide the button
 		*/
@@ -463,6 +479,9 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 				"size": mergedSize.value,
 				"modelValue": _value.value,
 				"placeholder": props.placeholder,
+				"fitWidth": props.fitWidth,
+				"maxWFull": props.maxWFull,
+				"fitWidthFallback": "2ch",
 				"disabled": mergedDisabled.value,
 				"readonly": props.readonly,
 				"error": props.error,

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

@@ -16,6 +16,14 @@ declare const InputTag: {
             default: string;
         };
         placeholder: StringConstructor;
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         disabled: {
             type: BooleanConstructor;
             default: boolean;
@@ -66,8 +74,8 @@ declare const InputTag: {
         uninjectFormItemContext: BooleanConstructor;
         inputAttrs: import("vue").PropType<Record<string, unknown>>;
     }>> & Readonly<{
-        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: MouseEvent) => any) | undefined;
+        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onChange?: ((_value: (string | number | import("./interface").TagData)[], _ev: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((_value: (string | number | import("./interface").TagData)[]) => any) | undefined;
@@ -92,11 +100,13 @@ declare const InputTag: {
         focus: (_ev: FocusEvent) => true;
         blur: (_ev: FocusEvent) => true;
     }, import("vue").PublicProps, {
+        disabled: boolean;
         error: boolean;
         readonly: string | boolean;
-        disabled: boolean;
         defaultValue: (string | number | import("./interface").TagData)[];
         allowClear: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
         focused: boolean;
         disabledInput: boolean;
         uninjectFormItemContext: boolean;
@@ -129,6 +139,14 @@ declare const InputTag: {
             default: string;
         };
         placeholder: StringConstructor;
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         disabled: {
             type: BooleanConstructor;
             default: boolean;
@@ -179,8 +197,8 @@ declare const InputTag: {
         uninjectFormItemContext: BooleanConstructor;
         inputAttrs: import("vue").PropType<Record<string, unknown>>;
     }>> & Readonly<{
-        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: MouseEvent) => any) | undefined;
+        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onChange?: ((_value: (string | number | import("./interface").TagData)[], _ev: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((_value: (string | number | import("./interface").TagData)[]) => any) | undefined;
@@ -195,11 +213,13 @@ declare const InputTag: {
         focus(): void;
         blur(): void;
     }, {
+        disabled: boolean;
         error: boolean;
         readonly: string | boolean;
-        disabled: boolean;
         defaultValue: (string | number | import("./interface").TagData)[];
         allowClear: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
         focused: boolean;
         disabledInput: boolean;
         uninjectFormItemContext: boolean;
@@ -229,6 +249,14 @@ declare const InputTag: {
         default: string;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -279,8 +307,8 @@ declare const InputTag: {
     uninjectFormItemContext: BooleanConstructor;
     inputAttrs: import("vue").PropType<Record<string, unknown>>;
 }>> & Readonly<{
-    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: MouseEvent) => any) | undefined;
+    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onChange?: ((_value: (string | number | import("./interface").TagData)[], _ev: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: (string | number | import("./interface").TagData)[]) => any) | undefined;
@@ -305,11 +333,13 @@ declare const InputTag: {
     focus: (_ev: FocusEvent) => true;
     blur: (_ev: FocusEvent) => true;
 }, string, {
+    disabled: boolean;
     error: boolean;
     readonly: string | boolean;
-    disabled: boolean;
     defaultValue: (string | number | import("./interface").TagData)[];
     allowClear: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
     focused: boolean;
     disabledInput: boolean;
     uninjectFormItemContext: boolean;

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

@@ -15,6 +15,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -94,6 +102,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -144,8 +160,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     uninjectFormItemContext: BooleanConstructor;
     inputAttrs: PropType<Record<string, unknown>>;
 }>> & Readonly<{
-    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: MouseEvent) => any) | undefined;
+    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onChange?: ((_value: (string | number | TagData)[], _ev: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: (string | number | TagData)[]) => any) | undefined;
@@ -154,11 +170,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onInputValueChange?: ((_inputValue: string, _ev: Event) => any) | undefined;
     onRemove?: ((_removed: string | number, _ev: Event) => any) | undefined;
 }>, {
+    disabled: boolean;
     error: boolean;
     readonly: string | boolean;
-    disabled: boolean;
     defaultValue: (string | number | TagData)[];
     allowClear: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
     focused: boolean;
     disabledInput: boolean;
     uninjectFormItemContext: boolean;

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

@@ -7,6 +7,7 @@ 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";
@@ -66,6 +67,22 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		*/
 		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
 		*/
@@ -306,6 +323,13 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			}
 		};
 		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;
@@ -501,10 +525,15 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 				[`${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}-has-placeholder`]: !computedValue.value.length,
+				[`${prefixCls}-fit-width`]: props.fitWidth,
+				[`${prefixCls}-max-w-full`]: props.maxWFull
 			}
 		]);
-		const wrapperAttrs = computed(() => omit(attrs, INPUT_EVENTS));
+		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;
@@ -517,10 +546,12 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			return { maxWidth: `${responsiveTagMaxWidth.value}px` };
 		};
 		const getInputStyle = computed(() => {
-			if (!isResponsiveMaxTagCount.value) return inputStyle;
+			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: inputStyle.width
+				minWidth: width
 			});
 		});
 		const isCompressedResponsiveTag = (index, value) => isResponsiveMaxTagCount.value && !isOverflowCounterTag(value) && hiddenTagCount.value > 0 && index === 0 && responsiveTagMaxWidth.value > 0;

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

@@ -588,6 +588,12 @@
   max-width: 100%;
   overflow: hidden;
 }
+.sd-input-tag.sd-input-tag-fit-width {
+  width: fit-content;
+}
+.sd-input-tag.sd-input-tag-max-w-full {
+  max-width: 100%;
+}
 .sd-input-tag.sd-input-tag-has-tag {
   padding-right: 4px;
   padding-left: 4px;

package/es/input-tag/style/input-tag.scss

@@ -80,6 +80,14 @@
   max-width: 100%;
   overflow: hidden;
 
+  &.#{$cls}-fit-width {
+    width: fit-content;
+  }
+
+  &.#{$cls}-max-w-full {
+    max-width: 100%;
+  }
+
   &.#{$cls}-has-tag {
     padding-right: $input-tag-padding-horizontal;
     padding-left: $input-tag-padding-horizontal;