@sdata/web-vue 3.12.0 → 3.14.0

package/es/index.js

@@ -4,6 +4,9 @@ import Affix from "./affix/index.js";
 import Alert from "./alert/index.js";
 import anchor_link_default from "./anchor/anchor-link.js";
 import Anchor from "./anchor/index.js";
+import { addI18nMessages, getLocale, useLocale } from "./locale/index.js";
+import Trigger from "./trigger/index.js";
+import Tooltip from "./tooltip/index.js";
 import input_group_default from "./input/input-group.js";
 import input_password_default from "./input/input-password.js";
 import button_group_default from "./button/button-group.js";
@@ -12,7 +15,6 @@ import input_search_default from "./input/input-search.js";
 import Input from "./input/index.js";
 import Scrollbar from "./scrollbar/index.js";
 import Spin from "./spin/index.js";
-import Trigger from "./trigger/index.js";
 import AutoComplete from "./auto-complete/index.js";
 import Popover from "./popover/index.js";
 import AvatarGroup from "./avatar/avatar-group.js";
@@ -20,7 +22,6 @@ import Avatar from "./avatar/index.js";
 import BackTop from "./back-top/index.js";
 import Badge from "./badge/index.js";
 import BorderBeam from "./border-beam/index.js";
-import { addI18nMessages, getLocale, useLocale } from "./locale/index.js";
 import Empty from "./empty/index.js";
 import dropdown_button_default from "./dropdown/dropdown-button.js";
 import dropdown_group_default from "./dropdown/dropdown-group.js";
@@ -29,7 +30,6 @@ import dropdown_submenu_default from "./dropdown/dropdown-submenu.js";
 import Dropdown from "./dropdown/index.js";
 import breadcrumb_item_default from "./breadcrumb/breadcrumb-item.js";
 import Breadcrumb from "./breadcrumb/index.js";
-import Tooltip from "./tooltip/index.js";
 import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
 import Calendar from "./calendar/index.js";
 import card_grid_default from "./card/card-grid.js";

package/es/input/index.d.ts

@@ -23,7 +23,7 @@ declare const Input: {
             default: boolean;
         };
         readonly: {
-            type: BooleanConstructor;
+            type: (StringConstructor | BooleanConstructor)[];
             default: boolean;
         };
         error: {
@@ -82,7 +82,7 @@ declare const Input: {
     }, import("vue").PublicProps, {
         type: "text" | "password";
         error: boolean;
-        readonly: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         defaultValue: string;
         allowClear: boolean;
@@ -116,7 +116,7 @@ declare const Input: {
             default: boolean;
         };
         readonly: {
-            type: BooleanConstructor;
+            type: (StringConstructor | BooleanConstructor)[];
             default: boolean;
         };
         error: {
@@ -167,7 +167,7 @@ declare const Input: {
     }, {
         type: "text" | "password";
         error: boolean;
-        readonly: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         defaultValue: string;
         allowClear: boolean;
@@ -198,7 +198,7 @@ declare const Input: {
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     error: {
@@ -257,7 +257,7 @@ declare const Input: {
 }, string, {
     type: "text" | "password";
     error: boolean;
-    readonly: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     defaultValue: string;
     allowClear: boolean;

package/es/input/input.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     error: {
@@ -84,7 +84,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     error: {
@@ -129,7 +129,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     type: "text" | "password";
     error: boolean;
-    readonly: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     defaultValue: string;
     allowClear: boolean;

package/es/input/input.js

@@ -3,17 +3,23 @@ import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helper
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isNull, isObject, isUndefined } from "../_utils/is.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { isActivationKey } from "../_utils/keyboard.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 { useCursor } from "../_hooks/use-cursor.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 { Enter } from "../_utils/keycode.js";
 import { omit } from "../_utils/omit.js";
 import pick from "../_utils/pick.js";
-import { computed, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, ref, toRefs, watch } from "vue";
+import Tooltip from "../tooltip/index.js";
+import { computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, nextTick, ref, toRef, toRefs, watch } from "vue";
 //#region components/input/input.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var input_default = /* @__PURE__ */ defineComponent({
 	name: "Input",
 	inheritAttrs: false,
@@ -59,7 +65,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 		* @en Whether it is read-only
 		*/
 		readonly: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: false
 		},
 		/**
@@ -190,7 +196,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 		const { size, disabled, error, modelValue, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("input");
 		const inputRef = ref();
-		const { mergedSize: _mergedSize, mergedDisabled, mergedError: _mergedError, feedback, eventHandlers } = useFormItem({
+		const { mergedSize: _mergedSize, mergedDisabled, mergedError: _mergedError, feedback, eventHandlers, formItemCtx } = useFormItem({
 			size,
 			disabled,
 			error
@@ -198,6 +204,8 @@ var input_default = /* @__PURE__ */ defineComponent({
 		const { mergedSize } = useSize(_mergedSize);
 		const { mergedAllowClear } = useAllowClear(allowClear);
 		const [recordCursor, setCursor] = useCursor(inputRef);
+		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), mergedDisabled);
+		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
 		const _value = ref(props.defaultValue);
 		const computedValue = computed(() => {
 			var _props$modelValue;
@@ -313,7 +321,14 @@ var input_default = /* @__PURE__ */ defineComponent({
 			emitChange("", ev);
 			emit("clear", ev);
 		};
+		const handleClearKeydown = (ev) => {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				handleClear(ev);
+			}
+		};
 		const handleKeyDown = (e) => {
+			if (props.readonly && !mergedDisabled.value && isReadonlyModificationKey(e)) showReadonlyTip();
 			const keyCode = e.key || e.code;
 			if (!isComposition.value && keyCode === Enter.key) {
 				emitChange(computedValue.value, e);
@@ -338,6 +353,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 		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;
 			return attrs;
 		});
@@ -354,7 +370,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 					"value": computedValue.value,
 					"type": props.type,
 					"placeholder": props.placeholder,
-					"readonly": props.readonly,
+					"readonly": !!props.readonly,
 					"disabled": mergedDisabled.value,
 					"onInput": handleInput,
 					"onKeydown": handleKeyDown,
@@ -367,7 +383,13 @@ var input_default = /* @__PURE__ */ defineComponent({
 				showClearBtn.value && createVNode(icon_hover_default, mergeProps({
 					"prefix": prefixCls,
 					"class": `${prefixCls}-clear-btn`
-				}, { onClick: handleClear }), { default: () => [createVNode(IconClose, null, null)] }),
+				}, {
+					"onClick": handleClear,
+					"onKeydown": handleClearKeydown,
+					"role": "button",
+					"tabindex": 0,
+					"aria-label": "Clear"
+				}), { default: () => [createVNode(IconClose, null, null)] }),
 				(slots.suffix || Boolean(props.maxLength) && props.showWordLimit || Boolean(feedback.value)) && createVNode("span", { "class": [`${prefixCls}-suffix`, { [`${prefixCls}-suffix-has-feedback`]: feedback.value }] }, [
 					Boolean(props.maxLength) && props.showWordLimit && createVNode("span", { "class": `${prefixCls}-word-limit` }, [
 						valueLength.value,
@@ -380,12 +402,16 @@ var input_default = /* @__PURE__ */ defineComponent({
 			]);
 		};
 		const render = () => {
-			if (slots.prepend || slots.append || props.prepend || props.append) return createVNode("span", mergeProps({ "class": outerCls.value }, wrapperAttrs.value), [
+			const node = slots.prepend || slots.append || props.prepend || props.append ? createVNode("span", mergeProps({ "class": outerCls.value }, wrapperAttrs.value), [
 				(slots.prepend || props.prepend) && createVNode("span", { "class": `${prefixCls}-prepend` }, [slots.prepend ? slots.prepend() : props.prepend]),
 				renderInput(true),
 				(slots.append || props.append) && createVNode("span", { "class": `${prefixCls}-append` }, [slots.append ? slots.append() : props.append])
-			]);
-			return renderInput();
+			]) : renderInput();
+			return createVNode(Tooltip, {
+				"popupVisible": tipVisible.value,
+				"content": readonlyTipText.value,
+				"position": "top"
+			}, _isSlot(node) ? node : { default: () => [node] });
 		};
 		return {
 			inputRef,

package/es/input/style/index.css

@@ -55,7 +55,7 @@
   border: 1px solid transparent;
   border-radius: var(--sd-border-radius-small);
   cursor: text;
-  transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-wrapper:hover {
   background-color: var(--sd-color-fill-3);
@@ -140,7 +140,7 @@
 }
 .sd-input-wrapper .sd-input-clear-btn > svg {
   position: relative;
-  transition: color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-wrapper:hover .sd-input-clear-btn {
   visibility: visible;

package/es/input/style/input.scss

@@ -52,9 +52,9 @@
   border-radius: $input-border-radius;
   cursor: text;
   transition:
-    color theme.$transition-duration-1 theme.$transition-timing-function-linear,
-    border-color theme.$transition-duration-1 theme.$transition-timing-function-linear,
-    background-color theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    border-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
 
   &:hover {
     background-color: $input-color-bg_hover;
@@ -143,7 +143,7 @@
 
     > svg {
       position: relative;
-      transition: color theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: color theme.$transition-duration-1 theme.$transition-timing-function-standard;
     }
   }
 

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

@@ -61,8 +61,8 @@ declare const InputNumber: {
             type: import("vue").PropType<"change" | "input">;
             default: string;
         };
-        readOnly: {
-            type: BooleanConstructor;
+        readonly: {
+            type: (StringConstructor | BooleanConstructor)[];
             default: boolean;
         };
         inputAttrs: {
@@ -92,6 +92,7 @@ declare const InputNumber: {
         keydown: (_ev: KeyboardEvent) => true;
     }, import("vue").PublicProps, {
         error: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         allowClear: boolean;
         max: number;
@@ -100,7 +101,6 @@ declare const InputNumber: {
         min: number;
         hideButton: boolean;
         modelEvent: "change" | "input";
-        readOnly: boolean;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -162,8 +162,8 @@ declare const InputNumber: {
             type: import("vue").PropType<"change" | "input">;
             default: string;
         };
-        readOnly: {
-            type: BooleanConstructor;
+        readonly: {
+            type: (StringConstructor | BooleanConstructor)[];
             default: boolean;
         };
         inputAttrs: {
@@ -185,6 +185,7 @@ declare const InputNumber: {
         blur(): void;
     }, {
         error: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         allowClear: boolean;
         max: number;
@@ -193,7 +194,6 @@ declare const InputNumber: {
         min: number;
         hideButton: boolean;
         modelEvent: "change" | "input";
-        readOnly: boolean;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -252,8 +252,8 @@ declare const InputNumber: {
         type: import("vue").PropType<"change" | "input">;
         default: string;
     };
-    readOnly: {
-        type: BooleanConstructor;
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     inputAttrs: {
@@ -283,6 +283,7 @@ declare const InputNumber: {
     keydown: (_ev: KeyboardEvent) => true;
 }, string, {
     error: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     allowClear: boolean;
     max: number;
@@ -291,7 +292,6 @@ declare const InputNumber: {
     min: number;
     hideButton: boolean;
     modelEvent: "change" | "input";
-    readOnly: boolean;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;
 };

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

@@ -55,8 +55,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"change" | "input">;
         default: string;
     };
-    readOnly: {
-        type: BooleanConstructor;
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     inputAttrs: {
@@ -130,8 +130,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"change" | "input">;
         default: string;
     };
-    readOnly: {
-        type: BooleanConstructor;
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     inputAttrs: {
@@ -147,6 +147,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((_value: InputNumberValue) => any) | undefined;
 }>, {
     error: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     allowClear: boolean;
     max: number;
@@ -155,6 +156,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     min: number;
     hideButton: boolean;
     modelEvent: "change" | "input";
-    readOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -2,11 +2,11 @@ import { useFormItem } from "../_hooks/use-form-item.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber, isUndefined } from "../_utils/is.js";
+import { KEYBOARD_KEY, getKeyDownHandler } from "../_utils/keyboard.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { useSize } from "../_hooks/use-size.js";
 import Button from "../button/index.js";
 import Input from "../input/index.js";
-import { KEYBOARD_KEY, getKeyDownHandler } from "../_utils/keyboard.js";
 import IconDown from "../icon/icon-down/index.js";
 import IconUp from "../icon/icon-up/index.js";
 import IconMinus from "../icon/icon-minus/index.js";
@@ -135,8 +135,8 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 		* @en Readonly
 		* @version 2.33.1
 		*/
-		readOnly: {
-			type: Boolean,
+		readonly: {
+			type: [Boolean, String],
 			default: false
 		},
 		/**
@@ -321,7 +321,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 		const handleStepButton = (event, method, needRepeat = false) => {
 			var _inputRef$value;
 			event.preventDefault();
-			if (props.readOnly) return;
+			if (props.readonly) return;
 			(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.focus();
 			nextStep(method, event);
 			if (needRepeat) repeatTimer = window.setTimeout(() => event.target.dispatchEvent(event), repeatTimer ? SPEED : FIRST_DELAY);
@@ -364,10 +364,10 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 		};
 		const keyDownHandler = getKeyDownHandler(new Map([[KEYBOARD_KEY.ARROW_UP, (ev) => {
 			ev.preventDefault();
-			!props.readOnly && nextStep("plus", ev);
+			!props.readonly && nextStep("plus", ev);
 		}], [KEYBOARD_KEY.ARROW_DOWN, (ev) => {
 			ev.preventDefault();
-			!props.readOnly && nextStep("minus", ev);
+			!props.readonly && nextStep("minus", ev);
 		}]]));
 		const onKeyDown = (event) => {
 			emit("keydown", event);
@@ -387,11 +387,12 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 		});
 		const renderSuffix = () => {
 			var _slots$suffix, _slots$plus, _slots$minus;
-			if (props.readOnly) return null;
+			if (props.readonly) return null;
 			return createVNode(Fragment, null, [slots.suffix && createVNode("div", { "class": `${prefixCls}-suffix` }, [(_slots$suffix = slots.suffix) === null || _slots$suffix === void 0 ? void 0 : _slots$suffix.call(slots)]), createVNode("div", { "class": `${prefixCls}-step` }, [createVNode("button", {
 				"class": [`${prefixCls}-step-button`, { [`${prefixCls}-step-button-disabled`]: mergedDisabled.value || isMax.value }],
 				"type": "button",
 				"tabindex": "-1",
+				"aria-label": "Increase",
 				"disabled": mergedDisabled.value || isMax.value,
 				"onMousedown": (e) => handleStepButton(e, "plus", true),
 				"onMouseup": clearRepeatTimer,
@@ -400,6 +401,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 				"class": [`${prefixCls}-step-button`, { [`${prefixCls}-step-button-disabled`]: mergedDisabled.value || isMin.value }],
 				"type": "button",
 				"tabindex": "-1",
+				"aria-label": "Decrease",
 				"disabled": mergedDisabled.value || isMin.value,
 				"onMousedown": (e) => handleStepButton(e, "minus", true),
 				"onMouseup": clearRepeatTimer,
@@ -410,11 +412,12 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 			prefixCls,
 			`${prefixCls}-mode-${props.mode}`,
 			`${prefixCls}-size-${mergedSize.value}`,
-			{ [`${prefixCls}-readonly`]: props.readOnly }
+			{ [`${prefixCls}-readonly`]: props.readonly }
 		]);
 		const renderPrependButton = () => {
 			return createVNode(Button, mergeProps({
 				"size": mergedSize.value,
+				"aria-label": "Decrease",
 				"class": `${prefixCls}-step-button`,
 				"disabled": mergedDisabled.value || isMin.value
 			}, {
@@ -427,6 +430,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 		const renderAppendButton = () => {
 			return createVNode(Button, mergeProps({
 				"size": mergedSize.value,
+				"aria-label": "Increase",
 				"class": `${prefixCls}-step-button`,
 				"disabled": mergedDisabled.value || isMax.value
 			}, {
@@ -458,7 +462,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 				"modelValue": _value.value,
 				"placeholder": props.placeholder,
 				"disabled": mergedDisabled.value,
-				"readonly": props.readOnly,
+				"readonly": props.readonly,
 				"error": props.error,
 				"inputAttrs": _objectSpread2({
 					"role": "spinbutton",

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

@@ -36,7 +36,7 @@
   background-color: var(--sd-color-fill-2);
   cursor: pointer;
   user-select: none;
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-number-step-button:hover {
   background-color: var(--sd-color-fill-3);
@@ -59,7 +59,7 @@
   position: relative;
 }
 .sd-input-number-prefix, .sd-input-number-suffix {
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-number-mode-embed .sd-input-number-step {
   position: absolute;
@@ -70,7 +70,7 @@
   overflow: hidden;
   border-radius: 1px;
   opacity: 0;
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-number-mode-embed .sd-input-number-step .sd-input-number-step-button {
   width: 100%;

package/es/input-number/style/index.scss

@@ -14,7 +14,11 @@ $input-number-prefix-cls: string.unquote('#{theme.$prefix}-input-number');
   border-radius: $input-number-border-radius;
 
   @mixin transition() {
-    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    transition:
+      color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+      background-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+      border-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+      opacity theme.$transition-duration-1 theme.$transition-timing-function-standard;
   }
 
   &-step-button {

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

@@ -25,7 +25,7 @@ declare const InputTag: {
             default: boolean;
         };
         readonly: {
-            type: BooleanConstructor;
+            type: (StringConstructor | BooleanConstructor)[];
             default: boolean;
         };
         allowClear: {
@@ -64,6 +64,7 @@ declare const InputTag: {
         focused: BooleanConstructor;
         disabledInput: BooleanConstructor;
         uninjectFormItemContext: BooleanConstructor;
+        inputAttrs: import("vue").PropType<Record<string, unknown>>;
     }>> & Readonly<{
         onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: MouseEvent) => any) | undefined;
@@ -92,7 +93,7 @@ declare const InputTag: {
         blur: (_ev: FocusEvent) => true;
     }, import("vue").PublicProps, {
         error: boolean;
-        readonly: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         defaultValue: (string | number | import("./interface").TagData)[];
         allowClear: boolean;
@@ -137,7 +138,7 @@ declare const InputTag: {
             default: boolean;
         };
         readonly: {
-            type: BooleanConstructor;
+            type: (StringConstructor | BooleanConstructor)[];
             default: boolean;
         };
         allowClear: {
@@ -176,6 +177,7 @@ declare const InputTag: {
         focused: BooleanConstructor;
         disabledInput: BooleanConstructor;
         uninjectFormItemContext: BooleanConstructor;
+        inputAttrs: import("vue").PropType<Record<string, unknown>>;
     }>> & Readonly<{
         onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: MouseEvent) => any) | undefined;
@@ -194,7 +196,7 @@ declare const InputTag: {
         blur(): void;
     }, {
         error: boolean;
-        readonly: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         defaultValue: (string | number | import("./interface").TagData)[];
         allowClear: boolean;
@@ -236,7 +238,7 @@ declare const InputTag: {
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     allowClear: {
@@ -275,6 +277,7 @@ declare const InputTag: {
     focused: BooleanConstructor;
     disabledInput: BooleanConstructor;
     uninjectFormItemContext: BooleanConstructor;
+    inputAttrs: import("vue").PropType<Record<string, unknown>>;
 }>> & Readonly<{
     onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: MouseEvent) => any) | undefined;
@@ -303,7 +306,7 @@ declare const InputTag: {
     blur: (_ev: FocusEvent) => true;
 }, string, {
     error: boolean;
-    readonly: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     defaultValue: (string | number | import("./interface").TagData)[];
     allowClear: boolean;

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

@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     allowClear: {
@@ -63,6 +63,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     focused: BooleanConstructor;
     disabledInput: BooleanConstructor;
     uninjectFormItemContext: BooleanConstructor;
+    inputAttrs: PropType<Record<string, unknown>>;
 }>, {
     inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
     render: () => import("vue/jsx-runtime").JSX.Element;
@@ -102,7 +103,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     allowClear: {
@@ -141,6 +142,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     focused: BooleanConstructor;
     disabledInput: BooleanConstructor;
     uninjectFormItemContext: BooleanConstructor;
+    inputAttrs: PropType<Record<string, unknown>>;
 }>> & Readonly<{
     onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: MouseEvent) => any) | undefined;
@@ -153,7 +155,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onRemove?: ((_removed: string | number, _ev: Event) => any) | undefined;
 }>, {
     error: boolean;
-    readonly: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     defaultValue: (string | number | TagData)[];
     allowClear: boolean;