@sdata/web-vue 3.18.0 → 3.19.0

package/es/input/index.d.ts

@@ -31,6 +31,14 @@ declare const Input: {
             default: boolean;
         };
         placeholder: StringConstructor;
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         maxLength: {
             type: import("vue").PropType<number | {
                 length: number;
@@ -55,11 +63,15 @@ declare const Input: {
             type: import("vue").PropType<"text" | "password">;
             default: string;
         };
+        fitWidthFallback: {
+            type: StringConstructor;
+            default: string;
+        };
         prepend: StringConstructor;
         append: StringConstructor;
     }>> & Readonly<{
-        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: MouseEvent) => any) | undefined;
+        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onChange?: ((_value: string, _ev: Event) => any) | undefined;
         onInput?: ((_value: string, _ev: Event) => any) | undefined;
@@ -81,16 +93,19 @@ declare const Input: {
         blur: (_ev: FocusEvent) => true;
     }, import("vue").PublicProps, {
         type: "text" | "password";
+        disabled: boolean;
         error: boolean;
         readonly: string | boolean;
-        disabled: boolean;
         defaultValue: string;
         allowClear: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
         maxLength: number | {
             length: number;
             errorOnly?: boolean;
         };
         showWordLimit: boolean;
+        fitWidthFallback: string;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -124,6 +139,14 @@ declare const Input: {
             default: boolean;
         };
         placeholder: StringConstructor;
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         maxLength: {
             type: import("vue").PropType<number | {
                 length: number;
@@ -148,11 +171,15 @@ declare const Input: {
             type: import("vue").PropType<"text" | "password">;
             default: string;
         };
+        fitWidthFallback: {
+            type: StringConstructor;
+            default: string;
+        };
         prepend: StringConstructor;
         append: StringConstructor;
     }>> & Readonly<{
-        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: MouseEvent) => any) | undefined;
+        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onChange?: ((_value: string, _ev: Event) => any) | undefined;
         onInput?: ((_value: string, _ev: Event) => any) | undefined;
@@ -166,16 +193,19 @@ declare const Input: {
         blur(): void;
     }, {
         type: "text" | "password";
+        disabled: boolean;
         error: boolean;
         readonly: string | boolean;
-        disabled: boolean;
         defaultValue: string;
         allowClear: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
         maxLength: number | {
             length: number;
             errorOnly?: boolean;
         };
         showWordLimit: boolean;
+        fitWidthFallback: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -206,6 +236,14 @@ declare const Input: {
         default: boolean;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     maxLength: {
         type: import("vue").PropType<number | {
             length: number;
@@ -230,11 +268,15 @@ declare const Input: {
         type: import("vue").PropType<"text" | "password">;
         default: string;
     };
+    fitWidthFallback: {
+        type: StringConstructor;
+        default: string;
+    };
     prepend: StringConstructor;
     append: StringConstructor;
 }>> & Readonly<{
-    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: MouseEvent) => any) | undefined;
+    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onChange?: ((_value: string, _ev: Event) => any) | undefined;
     onInput?: ((_value: string, _ev: Event) => any) | undefined;
@@ -256,16 +298,19 @@ declare const Input: {
     blur: (_ev: FocusEvent) => true;
 }, string, {
     type: "text" | "password";
+    disabled: boolean;
     error: boolean;
     readonly: string | boolean;
-    disabled: boolean;
     defaultValue: string;
     allowClear: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
     maxLength: number | {
         length: number;
         errorOnly?: boolean;
     };
     showWordLimit: boolean;
+    fitWidthFallback: string;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     Search: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         searchButton: {
@@ -289,6 +334,14 @@ declare const Input: {
         buttonProps: {
             type: import("vue").PropType<import("../index.ts").ButtonProps>;
         };
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>, {
         inputRef: import("vue").Ref<any, any>;
         render: () => import("vue/jsx-runtime").JSX.Element;
@@ -319,10 +372,20 @@ declare const Input: {
         buttonProps: {
             type: import("vue").PropType<import("../index.ts").ButtonProps>;
         };
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{
         onSearch?: ((_value: string, _ev: MouseEvent) => any) | undefined;
     }>, {
         disabled: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
         searchButton: boolean;
         loading: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -340,6 +403,14 @@ declare const Input: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            fitWidth: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            maxWFull: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>> & Readonly<{
             "onVisibility-change"?: ((_visible: boolean) => any) | undefined;
             "onUpdate:visibility"?: ((_visible: boolean) => any) | undefined;
@@ -350,6 +421,8 @@ declare const Input: {
             "visibility-change": (_visible: boolean) => any;
             "update:visibility": (_visible: boolean) => any;
         }, import("vue").PublicProps, {
+            fitWidth: boolean;
+            maxWFull: boolean;
             visibility: boolean;
             defaultVisibility: boolean;
             invisibleButton: boolean;
@@ -373,6 +446,14 @@ declare const Input: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            fitWidth: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            maxWFull: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>> & Readonly<{
             "onVisibility-change"?: ((_visible: boolean) => any) | undefined;
             "onUpdate:visibility"?: ((_visible: boolean) => any) | undefined;
@@ -380,6 +461,8 @@ declare const Input: {
             focus: () => void;
             blur: () => void;
         }, {}, {}, {}, {
+            fitWidth: boolean;
+            maxWFull: boolean;
             visibility: boolean;
             defaultVisibility: boolean;
             invisibleButton: boolean;
@@ -400,6 +483,14 @@ declare const Input: {
             type: BooleanConstructor;
             default: boolean;
         };
+        fitWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maxWFull: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{
         "onVisibility-change"?: ((_visible: boolean) => any) | undefined;
         "onUpdate:visibility"?: ((_visible: boolean) => any) | undefined;
@@ -410,6 +501,8 @@ declare const Input: {
         "visibility-change": (_visible: boolean) => any;
         "update:visibility": (_visible: boolean) => any;
     }, string, {
+        fitWidth: boolean;
+        maxWFull: boolean;
         visibility: boolean;
         defaultVisibility: boolean;
         invisibleButton: boolean;

package/es/input/input-password.vue.d.ts

@@ -21,6 +21,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     focus: () => void;
     blur: () => void;
@@ -40,10 +48,20 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onVisibility-change"?: ((_visible: boolean) => any) | undefined;
     "onUpdate:visibility"?: ((_visible: boolean) => any) | undefined;
 }>, {
+    fitWidth: boolean;
+    maxWFull: boolean;
     visibility: boolean;
     defaultVisibility: boolean;
     invisibleButton: boolean;

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

@@ -33,6 +33,22 @@ var input_password_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		invisibleButton: {
 			type: Boolean,
 			default: true
+		},
+		/**
+		* @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
 		}
 	},
 	emits: ["visibility-change", "update:visibility"],
@@ -68,7 +84,9 @@ var input_password_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			return openBlock(), createBlock(unref(input_default), {
 				ref_key: "inputRef",
 				ref: inputRef,
-				type: unref(mergedVisible) ? "password" : "text"
+				type: unref(mergedVisible) ? "password" : "text",
+				"fit-width": __props.fitWidth,
+				"max-w-full": __props.maxWFull
 			}, createSlots({ _: 2 }, [
 				_ctx.$slots.prepend ? {
 					name: "prepend",
@@ -98,7 +116,11 @@ var input_password_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
 					key: "3"
 				} : void 0
-			]), 1032, ["type"]);
+			]), 1032, [
+				"type",
+				"fit-width",
+				"max-w-full"
+			]);
 		};
 	}
 }));

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

@@ -23,6 +23,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     buttonProps: {
         type: PropType<ButtonProps>;
     };
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     inputRef: import("vue").Ref<any, any>;
     render: () => import("vue/jsx-runtime").JSX.Element;
@@ -53,10 +61,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     buttonProps: {
         type: PropType<ButtonProps>;
     };
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSearch?: ((_value: string, _ev: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
     searchButton: boolean;
     loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/input/input-search.js

@@ -51,7 +51,23 @@ var input_search_default = /* @__PURE__ */ defineComponent({
 		* @zh 搜索按钮的属性
 		* @en Button props
 		*/
-		buttonProps: { type: Object }
+		buttonProps: { type: Object },
+		/**
+		* @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
+		}
 	},
 	emits: { 
 	/**
@@ -94,7 +110,9 @@ search: (_value, _ev) => true },
 			"ref": inputRef,
 			"class": prefixCls,
 			"size": mergedSize.value,
-			"disabled": props.disabled
+			"disabled": props.disabled,
+			"fitWidth": props.fitWidth,
+			"maxWFull": props.maxWFull
 		}, {
 			prepend: slots.prepend,
 			prefix: slots.prefix,

package/es/input/input.d.ts

@@ -26,6 +26,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     maxLength: {
         type: PropType<number | {
             length: number;
@@ -50,6 +58,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"text" | "password">;
         default: string;
     };
+    fitWidthFallback: {
+        type: StringConstructor;
+        default: string;
+    };
     prepend: StringConstructor;
     append: StringConstructor;
 }>, {
@@ -92,6 +104,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     placeholder: StringConstructor;
+    fitWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWFull: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     maxLength: {
         type: PropType<number | {
             length: number;
@@ -116,11 +136,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"text" | "password">;
         default: string;
     };
+    fitWidthFallback: {
+        type: StringConstructor;
+        default: string;
+    };
     prepend: StringConstructor;
     append: StringConstructor;
 }>> & Readonly<{
-    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: MouseEvent) => any) | undefined;
+    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onChange?: ((_value: string, _ev: Event) => any) | undefined;
     onInput?: ((_value: string, _ev: Event) => any) | undefined;
@@ -128,15 +152,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onPressEnter?: ((_ev: KeyboardEvent) => any) | undefined;
 }>, {
     type: "text" | "password";
+    disabled: boolean;
     error: boolean;
     readonly: string | boolean;
-    disabled: boolean;
     defaultValue: string;
     allowClear: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
     maxLength: number | {
         length: number;
         errorOnly?: boolean;
     };
     showWordLimit: boolean;
+    fitWidthFallback: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/input/input.js

@@ -9,6 +9,7 @@ import { useI18n } from "../locale/index.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import feedback_icon_default from "../_components/feedback-icon.js";
 import { useCursor } from "../_hooks/use-cursor.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";
@@ -83,6 +84,22 @@ var input_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 输入值的最大长度，errorOnly 属性在 2.12.0 版本添加
 		* @en Enter the maximum length of the value, the errorOnly attribute was added in version 2.12.0
 		*/
@@ -119,6 +136,10 @@ var input_default = /* @__PURE__ */ defineComponent({
 			type: String,
 			default: "text"
 		},
+		fitWidthFallback: {
+			type: String,
+			default: "4ch"
+		},
 		/**
 		* @zh 前置标签
 		* @en Prepend
@@ -224,6 +245,15 @@ var input_default = /* @__PURE__ */ defineComponent({
 		const showClearBtn = computed(() => mergedAllowClear.value && !props.readonly && !mergedDisabled.value && Boolean(computedValue.value));
 		const isComposition = ref(false);
 		const compositionValue = ref("");
+		const { fitWidthStyle, fitWidthValue } = useFitWidth({
+			fitWidth: () => props.fitWidth,
+			text: computed(() => {
+				const value = compositionValue.value || computedValue.value;
+				return (props.type === "password" ? "•".repeat(Array.from(value).length) : value) || props.placeholder;
+			}),
+			fallbackWidth: () => props.fitWidthFallback,
+			target: inputRef
+		});
 		const getValueLength = (value) => {
 			var _value$length;
 			if (isFunction(props.wordLength)) return props.wordLength(value);
@@ -342,21 +372,33 @@ var input_default = /* @__PURE__ */ defineComponent({
 			`${prefixCls}-outer-size-${mergedSize.value}`,
 			{
 				[`${prefixCls}-outer-has-suffix`]: Boolean(slots.suffix),
-				[`${prefixCls}-outer-disabled`]: mergedDisabled.value
+				[`${prefixCls}-outer-disabled`]: mergedDisabled.value,
+				[`${prefixCls}-fit-width`]: props.fitWidth,
+				[`${prefixCls}-max-w-full`]: props.maxWFull
 			}
 		]);
 		const wrapperCls = computed(() => [`${prefixCls}-wrapper`, {
 			[`${prefixCls}-error`]: mergedError.value,
 			[`${prefixCls}-disabled`]: mergedDisabled.value,
-			[`${prefixCls}-focus`]: focused.value
+			[`${prefixCls}-focus`]: focused.value,
+			[`${prefixCls}-fit-width`]: props.fitWidth,
+			[`${prefixCls}-max-w-full`]: props.maxWFull
 		}]);
 		const cls = computed(() => [prefixCls, `${prefixCls}-size-${mergedSize.value}`]);
-		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 mergeInputAttrs = computed(() => {
 			const attrs = _objectSpread2(_objectSpread2({}, inputAttrs.value), props.inputAttrs);
 			if (formItemCtx.fieldId && attrs.id === void 0) attrs.id = formItemCtx.fieldId;
 			if (mergedError.value) attrs["aria-invalid"] = true;
+			attrs.style = [props.fitWidth ? {
+				flex: `0 1 ${fitWidthValue}`,
+				width: fitWidthValue,
+				minWidth: 0
+			} : void 0, attrs.style];
 			return attrs;
 		});
 		const renderInput = (hasOuter) => {

package/es/input/style/index.css

@@ -148,6 +148,12 @@
 .sd-input-wrapper:not(.sd-input-focus) .sd-input-icon-hover:hover::before {
   background-color: var(--sd-color-fill-4);
 }
+.sd-input-wrapper.sd-input-fit-width {
+  width: fit-content;
+}
+.sd-input-wrapper.sd-input-max-w-full {
+  max-width: 100%;
+}
 .sd-input-wrapper .sd-input {
   width: 100%;
   padding-right: 0;
@@ -212,6 +218,16 @@
   display: inline-flex;
   width: 100%;
 }
+.sd-input-outer.sd-input-fit-width {
+  width: fit-content;
+}
+.sd-input-outer.sd-input-fit-width > .sd-input-wrapper {
+  flex: 0 1 auto;
+  width: auto;
+}
+.sd-input-outer.sd-input-max-w-full {
+  max-width: 100%;
+}
 .sd-input-outer > .sd-input-wrapper {
   border-radius: 0;
 }

package/es/input/style/index.scss

@@ -28,6 +28,14 @@ $input-prefix-cls: string.unquote('#{theme.$prefix}-input');
 .#{$input-prefix-cls}-wrapper {
   @include input-wrapper-style($input-prefix-cls);
 
+  &.#{$input-prefix-cls}-fit-width {
+    width: fit-content;
+  }
+
+  &.#{$input-prefix-cls}-max-w-full {
+    max-width: 100%;
+  }
+
   .#{$input-prefix-cls} {
     @include input-style();
 
@@ -58,6 +66,19 @@ $input-prefix-cls: string.unquote('#{theme.$prefix}-input');
   display: inline-flex;
   width: 100%;
 
+  &.#{$input-prefix-cls}-fit-width {
+    width: fit-content;
+
+    > .#{$input-prefix-cls}-wrapper {
+      flex: 0 1 auto;
+      width: auto;
+    }
+  }
+
+  &.#{$input-prefix-cls}-max-w-full {
+    max-width: 100%;
+  }
+
   > .#{$input-prefix-cls}-wrapper {
     border-radius: 0;
   }