@sdata/web-vue 1.7.1 → 1.8.0

package/es/config-provider/config-provider.vue.d.ts

@@ -15,6 +15,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     size: {
         type: PropType<Size>;
     };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     global: {
         type: BooleanConstructor;
         default: boolean;
@@ -52,6 +56,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     size: {
         type: PropType<Size>;
     };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     global: {
         type: BooleanConstructor;
         default: boolean;
@@ -80,6 +88,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     prefixCls: string;
+    allowClear: boolean;
     updateAtScroll: boolean;
     scrollToClose: boolean;
     rtl: boolean;

package/es/config-provider/config-provider.vue_vue_type_script_lang.js

@@ -12,6 +12,10 @@ var config_provider_vue_vue_type_script_lang_default = defineComponent({
 		},
 		locale: { type: Object },
 		size: { type: String },
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
 		global: {
 			type: Boolean,
 			default: false
@@ -36,12 +40,13 @@ var config_provider_vue_vue_type_script_lang_default = defineComponent({
 		themeMode: { type: String }
 	},
 	setup(props, { slots }) {
-		const { prefixCls, locale, size, updateAtScroll, scrollToClose, exchangeTime, rtl } = toRefs(props);
+		const { prefixCls, locale, size, allowClear, updateAtScroll, scrollToClose, exchangeTime, rtl } = toRefs(props);
 		const config = reactive({
 			slots,
 			prefixCls,
 			locale,
 			size,
+			allowClear,
 			updateAtScroll,
 			scrollToClose,
 			exchangeTime,

package/es/config-provider/context.d.ts

@@ -7,6 +7,7 @@ export interface ConfigProvider {
     prefixCls?: string;
     locale?: SDLang;
     size?: Size;
+    allowClear?: boolean;
     updateAtScroll?: boolean;
     scrollToClose?: boolean;
     exchangeTime?: boolean;

package/es/config-provider/index.d.ts

@@ -13,6 +13,10 @@ declare const ConfigProvider: {
         size: {
             type: import("vue").PropType<import("..").Size>;
         };
+        allowClear: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         global: {
             type: BooleanConstructor;
             default: boolean;
@@ -41,6 +45,7 @@ declare const ConfigProvider: {
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         prefixCls: string;
+        allowClear: boolean;
         updateAtScroll: boolean;
         scrollToClose: boolean;
         rtl: boolean;
@@ -111,6 +116,10 @@ declare const ConfigProvider: {
         size: {
             type: import("vue").PropType<import("..").Size>;
         };
+        allowClear: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         global: {
             type: BooleanConstructor;
             default: boolean;
@@ -139,6 +148,7 @@ declare const ConfigProvider: {
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, {
         prefixCls: string;
+        allowClear: boolean;
         updateAtScroll: boolean;
         scrollToClose: boolean;
         rtl: boolean;
@@ -159,6 +169,10 @@ declare const ConfigProvider: {
     size: {
         type: import("vue").PropType<import("..").Size>;
     };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     global: {
         type: BooleanConstructor;
         default: boolean;
@@ -187,6 +201,7 @@ declare const ConfigProvider: {
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     prefixCls: string;
+    allowClear: boolean;
     updateAtScroll: boolean;
     scrollToClose: boolean;
     rtl: boolean;

package/es/date-picker/index.d.ts

@@ -385,6 +385,7 @@ declare const DatePicker: {
         panelValue: import("vue").ComputedRef<(import("dayjs").Dayjs | undefined)[]>;
         inputValue: import("vue").Ref<(string | undefined)[] | undefined, (string | undefined)[] | undefined>;
         focusedIndex: import("vue").Ref<number, number>;
+        mergedAllowClear: import("vue").ComputedRef<boolean | undefined>;
         triggerDisabled: import("vue").ComputedRef<boolean>;
         mergedSize: import("vue").ComputedRef<"mini" | "small" | "medium" | "large" | undefined>;
         mergedError: import("vue").ComputedRef<boolean>;

package/es/date-picker/picker.js

@@ -33,7 +33,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 			error: _ctx.error,
 			disabled: _ctx.mergedDisabled,
 			readonly: !_ctx.inputEditable || _ctx.disabledInput,
-			"allow-clear": _ctx.allowClear && !_ctx.readonly,
+			"allow-clear": _ctx.mergedAllowClear && !_ctx.readonly,
 			placeholder: _ctx.computedPlaceholder,
 			"input-value": _ctx.inputValue,
 			value: _ctx.needConfirm ? _ctx.panelValue : _ctx.selectedValue,

package/es/date-picker/picker.vue.d.ts

@@ -197,6 +197,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     inputFormat: import("vue").ComputedRef<string | ((value: Dayjs) => string)>;
     computedPlaceholder: import("vue").ComputedRef<string>;
     panelVisible: import("vue").ComputedRef<boolean>;
+    mergedAllowClear: import("vue").ComputedRef<boolean | undefined>;
     inputEditable: import("vue").ComputedRef<boolean>;
     needConfirm: import("vue").ComputedRef<boolean>;
     mergedDisabled: import("vue").ComputedRef<boolean>;

package/es/date-picker/picker.vue_vue_type_script_lang.js

@@ -2,6 +2,7 @@ import { useFormItem } from "../_hooks/use-form-item.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isBoolean, isFunction } from "../_utils/is.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { omit } from "../_utils/omit.js";
 import pick from "../_utils/pick.js";
 import useState from "../_hooks/use-state.js";
@@ -136,12 +137,13 @@ var picker_vue_vue_type_script_lang_default = defineComponent({
 		"update:pickerValue": (_value) => true
 	},
 	setup(props, { emit, slots }) {
-		const { mode, modelValue, defaultValue, format, valueFormat, placeholder, popupVisible, defaultPopupVisible, disabled, showTime, timePickerProps, disabledDate, disabledTime, readonly, locale, pickerValue, defaultPickerValue, dayStartOfWeek, previewShortcut, showConfirmBtn } = toRefs(props);
+		const { mode, modelValue, defaultValue, format, valueFormat, placeholder, popupVisible, defaultPopupVisible, disabled, showTime, timePickerProps, disabledDate, disabledTime, readonly, allowClear, locale, pickerValue, defaultPickerValue, dayStartOfWeek, previewShortcut, showConfirmBtn } = toRefs(props);
 		const { locale: globalLocal } = useI18n();
 		watchEffect(() => {
 			initializeDateLocale(globalLocal.value, dayStartOfWeek.value);
 		});
 		const { mergedDisabled, eventHandlers } = useFormItem({ disabled });
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const datePickerT = useDatePickerTransform(reactive({ locale }));
 		const prefixCls = getPrefixCls("picker");
 		const refInput = ref();
@@ -395,6 +397,7 @@ var picker_vue_vue_type_script_lang_default = defineComponent({
 			inputFormat,
 			computedPlaceholder,
 			panelVisible,
+			mergedAllowClear,
 			inputEditable,
 			needConfirm,
 			mergedDisabled,

package/es/date-picker/range-picker.js

@@ -33,7 +33,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 			error: _ctx.error,
 			disabled: _ctx.disabled,
 			readonly: _ctx.readonly || _ctx.disabledInput,
-			"allow-clear": _ctx.allowClear && !_ctx.readonly,
+			"allow-clear": _ctx.mergedAllowClear && !_ctx.readonly,
 			placeholder: _ctx.computedPlaceholder,
 			"input-value": _ctx.inputValue,
 			value: _ctx.panelValue,

package/es/date-picker/range-picker.vue.d.ts

@@ -132,6 +132,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     panelValue: import("vue").ComputedRef<(Dayjs | undefined)[]>;
     inputValue: import("vue").Ref<(string | undefined)[] | undefined, (string | undefined)[] | undefined>;
     focusedIndex: import("vue").Ref<number, number>;
+    mergedAllowClear: import("vue").ComputedRef<boolean | undefined>;
     triggerDisabled: import("vue").ComputedRef<boolean>;
     mergedSize: import("vue").ComputedRef<"mini" | "small" | "medium" | "large" | undefined>;
     mergedError: import("vue").ComputedRef<boolean>;

package/es/date-picker/range-picker.vue_vue_type_script_lang.js

@@ -3,6 +3,7 @@ import { configProviderInjectionKey } from "../config-provider/context.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isArray, isBoolean } from "../_utils/is.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { omit } from "../_utils/omit.js";
 import pick from "../_utils/pick.js";
 import useState from "../_hooks/use-state.js";
@@ -138,7 +139,7 @@ var range_picker_vue_vue_type_script_lang_default = defineComponent({
 		}
 	},
 	setup(props, { emit, slots }) {
-		const { mode, showTime, format, modelValue, defaultValue, popupVisible, defaultPopupVisible, placeholder, timePickerProps, disabled, disabledDate, disabledTime, locale, pickerValue, defaultPickerValue, valueFormat, size, error, dayStartOfWeek, exchangeTime, previewShortcut, showConfirmBtn } = toRefs(props);
+		const { mode, showTime, format, modelValue, defaultValue, popupVisible, defaultPopupVisible, placeholder, timePickerProps, disabled, disabledDate, disabledTime, locale, pickerValue, defaultPickerValue, valueFormat, size, error, dayStartOfWeek, exchangeTime, previewShortcut, showConfirmBtn, allowClear } = toRefs(props);
 		const { locale: globalLocal } = useI18n();
 		const configCtx = inject(configProviderInjectionKey, void 0);
 		watchEffect(() => {
@@ -148,6 +149,7 @@ var range_picker_vue_vue_type_script_lang_default = defineComponent({
 			var _configCtx$exchangeTi;
 			return !(!exchangeTime.value || !((_configCtx$exchangeTi = configCtx === null || configCtx === void 0 ? void 0 : configCtx.exchangeTime) !== null && _configCtx$exchangeTi !== void 0 ? _configCtx$exchangeTi : true));
 		});
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const { mergedSize, mergedDisabled: formDisabled, mergedError, eventHandlers } = useFormItem({
 			size,
 			error
@@ -459,6 +461,7 @@ var range_picker_vue_vue_type_script_lang_default = defineComponent({
 			panelValue,
 			inputValue,
 			focusedIndex,
+			mergedAllowClear,
 			triggerDisabled,
 			mergedSize,
 			mergedError,

package/es/index.css

@@ -14669,6 +14669,75 @@ body {
   border-radius: 2px;
   box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
 }
+.sd-color-picker-panel .sd-color-picker-panel-head {
+  display: flex;
+  justify-content: center;
+  padding: 8px 8px 0;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-panel {
+  padding: 8px 8px 0;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-bar-shell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  user-select: none;
+  margin-inline: 8px;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-bar {
+  display: block;
+  width: 100%;
+  height: 8px;
+  padding: 0;
+  background-color: transparent;
+  border: 1px solid var(--color-border-2);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-thumb {
+  position: absolute;
+  z-index: 1;
+  width: 18px;
+  height: 18px;
+  padding: 2px;
+  background: var(--color-bg-white);
+  border: 1px solid var(--color-border-2);
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
+  transform: translateX(-50%);
+  cursor: pointer;
+  touch-action: none;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-thumb-active {
+  border-color: var(--color-primary-6);
+  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.16);
+}
+.sd-color-picker-panel .sd-color-picker-gradient-thumb-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-meta {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: 8px;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-label {
+  color: var(--color-text-2);
+  font-size: 12px;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-degree {
+  width: 72px;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-preview {
+  height: 32px;
+  margin-top: 8px;
+  border: 1px solid var(--color-border-2);
+  border-radius: 4px;
+}
 .sd-color-picker-panel .sd-color-picker-palette {
   position: relative;
   box-sizing: border-box;
@@ -14741,11 +14810,25 @@ body {
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-section:not(:first-child) {
   margin-top: 12px;
 }
+.sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-header {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: space-between;
+}
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-text {
   color: var(--color-text-1);
   font-weight: 400;
   font-size: 12px;
 }
+.sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-action {
+  padding: 0;
+  color: var(--color-primary-6);
+  font-size: 12px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-empty {
   margin: 12px 0;
   color: var(--color-text-3);
@@ -14831,13 +14914,21 @@ body {
   flex: 0 0 auto;
   width: 52px;
 }
+.sd-color-picker-panel .sd-color-picker-input-group {
+  width: 100%;
+}
+.sd-color-picker-panel .sd-color-picker-format-input {
+  min-width: 0;
+}
 .sd-color-picker-panel .sd-color-picker-input-hex .sd-input {
   padding-left: 4px;
 }
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-palette,
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-control-bar,
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-color-block,
-.sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-preview {
+.sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-preview,
+.sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-gradient-bar,
+.sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-gradient-thumb {
   cursor: not-allowed;
   opacity: 0.8;
 }

package/es/input/input.js

@@ -4,6 +4,7 @@ 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 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 { useSize } from "../_hooks/use-size.js";
@@ -68,7 +69,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 		"blur": (_ev) => true
 	},
 	setup(props, { emit, slots, attrs }) {
-		const { size, disabled, error, modelValue } = toRefs(props);
+		const { size, disabled, error, modelValue, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("input");
 		const inputRef = ref();
 		const { mergedSize: _mergedSize, mergedDisabled, mergedError: _mergedError, feedback, eventHandlers } = useFormItem({
@@ -77,6 +78,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 			error
 		});
 		const { mergedSize } = useSize(_mergedSize);
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const [recordCursor, setCursor] = useCursor(inputRef);
 		const _value = ref(props.defaultValue);
 		const computedValue = computed(() => {
@@ -91,7 +93,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 			preValue = oldValue;
 		});
 		const focused = ref(false);
-		const showClearBtn = computed(() => props.allowClear && !props.readonly && !mergedDisabled.value && Boolean(computedValue.value));
+		const showClearBtn = computed(() => mergedAllowClear.value && !props.readonly && !mergedDisabled.value && Boolean(computedValue.value));
 		const isComposition = ref(false);
 		const compositionValue = ref("");
 		const getValueLength = (value) => {

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

@@ -2,6 +2,7 @@ import { useFormItem } from "../_hooks/use-form-item.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber, isUndefined } from "../_utils/is.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";
@@ -79,7 +80,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(props, { emit, slots }) {
 		var _props$modelValue;
-		const { size, disabled } = toRefs(props);
+		const { size, disabled, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("input-number");
 		const inputRef = ref();
 		const { mergedSize: _mergedSize, mergedDisabled, eventHandlers } = useFormItem({
@@ -87,6 +88,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 			disabled
 		});
 		const { mergedSize } = useSize(_mergedSize);
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const mergedPrecision = computed(() => {
 			if (isNumber(props.precision)) {
 				const decimal = `${props.step}`.split(".")[1];
@@ -277,7 +279,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 				"ref": inputRef,
 				"class": cls.value,
 				"type": "text",
-				"allowClear": props.allowClear,
+				"allowClear": mergedAllowClear.value,
 				"size": mergedSize.value,
 				"modelValue": _value.value,
 				"placeholder": props.placeholder,

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

@@ -5,6 +5,7 @@ import { isNull, isObject, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import icon_hover_default from "../_components/icon-hover.js";
 import IconClose from "../icon/icon-close/index.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import feedback_icon_default from "../_components/feedback-icon.js";
 import { useSize } from "../_hooks/use-size.js";
 import { INPUT_EVENTS } from "../_utils/constant.js";
@@ -88,7 +89,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		"blur": (_ev) => true
 	},
 	setup(props, { emit, slots, attrs }) {
-		const { size, disabled, error, uninjectFormItemContext, modelValue } = toRefs(props);
+		const { size, disabled, error, uninjectFormItemContext, modelValue, allowClear } = toRefs(props);
 		const prefixCls = props.baseCls || getPrefixCls("input-tag");
 		const inputRef = ref();
 		const mirrorRef = ref();
@@ -99,6 +100,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			uninject: uninjectFormItemContext === null || uninjectFormItemContext === void 0 ? void 0 : uninjectFormItemContext.value
 		});
 		const { mergedSize } = useSize(_mergedSize);
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const mergedFieldNames = computed(() => _objectSpread2(_objectSpread2({}, DEFAULT_FIELD_NAMES), props.fieldNames));
 		const _focused = ref(false);
 		const _value = ref(props.defaultValue);
@@ -196,7 +198,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			updateValue([], e);
 			emit("clear", e);
 		};
-		const showClearBtn = computed(() => !mergedDisabled.value && !props.readonly && props.allowClear && Boolean(computedValue.value.length));
+		const showClearBtn = computed(() => !mergedDisabled.value && !props.readonly && mergedAllowClear.value && Boolean(computedValue.value.length));
 		const handlePressEnter = (e) => {
 			if (computedInputValue.value) {
 				var _computedValue$value2;

package/es/mention/mention.js

@@ -3,6 +3,7 @@ import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helper
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isNull, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import Input from "../input/index.js";
 import { getKeyFromValue } from "../select/utils.js";
 import { useSelect } from "../select/hooks/use-select.js";
@@ -62,6 +63,7 @@ var mention_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(props, { emit, attrs, slots }) {
 		const prefixCls = getPrefixCls("mention");
+		const { mergedAllowClear } = useAllowClear(toRef(props, "allowClear"));
 		let styleDeclaration;
 		const { mergedDisabled, eventHandlers } = useFormItem({ disabled: toRef(props, "disabled") });
 		const { data, modelValue } = toRefs(props);
@@ -211,7 +213,7 @@ var mention_default = /* @__PURE__ */ defineComponent({
 				var _computedValue$value;
 				return createVNode("div", { "class": prefixCls }, [createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode(Textarea, mergeProps(attrs, {
 					"ref": inputRef,
-					"allowClear": props.allowClear,
+					"allowClear": mergedAllowClear.value,
 					"modelValue": computedValue.value,
 					"disabled": mergedDisabled.value,
 					"onInput": handleInput,
@@ -251,7 +253,7 @@ var mention_default = /* @__PURE__ */ defineComponent({
 			}, {
 				default: () => [createVNode(Input, mergeProps(attrs, {
 					"ref": inputRef,
-					"allowClear": props.allowClear,
+					"allowClear": mergedAllowClear.value,
 					"modelValue": computedValue.value,
 					"disabled": mergedDisabled.value,
 					"onInput": handleInput,

package/es/rate/rate.js

@@ -1,6 +1,7 @@
 import { useFormItem } from "../_hooks/use-form-item.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNull, isObject, isString, isUndefined } from "../_utils/is.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import IconFaceFrownFill from "../icon/icon-face-frown-fill/index.js";
 import IconFaceMehFill from "../icon/icon-face-meh-fill/index.js";
 import IconFaceSmileFill from "../icon/icon-face-smile-fill/index.js";
@@ -51,9 +52,10 @@ var rate_default = /* @__PURE__ */ defineComponent({
 		"hoverChange": (_value) => true
 	},
 	setup(props, { emit, slots }) {
-		const { modelValue } = toRefs(props);
+		const { modelValue, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("rate");
 		const { mergedDisabled: _mergedDisabled, eventHandlers } = useFormItem({ disabled: toRef(props, "disabled") });
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const _value = ref(props.defaultValue);
 		const animation = ref(false);
 		watch(modelValue, (value) => {
@@ -107,7 +109,7 @@ var rate_default = /* @__PURE__ */ defineComponent({
 				emit("update:modelValue", newValue);
 				emit("change", newValue);
 				(_eventHandlers$value = eventHandlers.value) === null || _eventHandlers$value === void 0 || (_eventHandlers$value$ = _eventHandlers$value.onChange) === null || _eventHandlers$value$ === void 0 || _eventHandlers$value$.call(_eventHandlers$value);
-			} else if (props.allowClear) {
+			} else if (mergedAllowClear.value) {
 				var _eventHandlers$value2, _eventHandlers$value3;
 				_value.value = 0;
 				emit("update:modelValue", 0);

package/es/select/select.js

@@ -3,6 +3,7 @@ import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helper
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isArray, isBoolean, isEmptyObject, isFunction, isNull, isNumber, isObject, isString, isUndefined } from "../_utils/is.js";
 import virtual_list_v2_default from "../_components/virtual-list-v2/index.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { getKeyFromValue, hasEmptyStringKey, isGroupOptionInfo, isValidOption } from "./utils.js";
 import { useSelect } from "./hooks/use-select.js";
 import option_default from "./option.js";
@@ -176,13 +177,14 @@ var select_default = /* @__PURE__ */ defineComponent({
 		"exceedLimit": (_value, _ev) => true
 	},
 	setup(props, { slots, emit, attrs }) {
-		const { size, disabled, error, options, filterOption, valueKey, multiple, popupVisible, defaultPopupVisible, showExtraOptions, modelValue, fieldNames, loading, defaultActiveFirstOption } = toRefs(props);
+		const { size, disabled, error, options, filterOption, valueKey, multiple, popupVisible, defaultPopupVisible, showExtraOptions, modelValue, fieldNames, loading, defaultActiveFirstOption, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("select");
 		const { mergedSize, mergedDisabled, mergedError, eventHandlers } = useFormItem({
 			size,
 			disabled,
 			error
 		});
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const component = computed(() => props.virtualListProps ? "div" : "li");
 		const retainInputValue = computed(() => isObject(props.allowSearch) && Boolean(props.allowSearch.retainInputValue));
 		const dropdownRef = ref();
@@ -479,7 +481,7 @@ var select_default = /* @__PURE__ */ defineComponent({
 					"disabled": mergedDisabled.value,
 					"error": mergedError.value,
 					"loading": props.loading,
-					"allowClear": props.allowClear,
+					"allowClear": mergedAllowClear.value,
 					"allowCreate": props.allowCreate,
 					"allowSearch": Boolean(props.allowSearch),
 					"opened": computedPopupVisible.value,

package/es/textarea/index.d.ts

@@ -65,7 +65,7 @@ declare const Textarea: {
         mirrorRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
         mirrorStyle: import("vue").Ref<import("vue").CSSProperties | undefined, import("vue").CSSProperties | undefined>;
         computedValue: import("vue").ComputedRef<string>;
-        showClearBtn: import("vue").ComputedRef<string | false>;
+        showClearBtn: import("vue").ComputedRef<string | false | undefined>;
         valueLength: import("vue").ComputedRef<number>;
         computedMaxLength: import("vue").ComputedRef<number>;
         mergedDisabled: import("vue").ComputedRef<boolean>;
@@ -329,7 +329,7 @@ declare const Textarea: {
         mirrorRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
         mirrorStyle: import("vue").Ref<import("vue").CSSProperties | undefined, import("vue").CSSProperties | undefined>;
         computedValue: import("vue").ComputedRef<string>;
-        showClearBtn: import("vue").ComputedRef<string | false>;
+        showClearBtn: import("vue").ComputedRef<string | false | undefined>;
         valueLength: import("vue").ComputedRef<number>;
         computedMaxLength: import("vue").ComputedRef<number>;
         mergedDisabled: import("vue").ComputedRef<boolean>;
@@ -429,7 +429,7 @@ declare const Textarea: {
     mirrorRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
     mirrorStyle: import("vue").Ref<import("vue").CSSProperties | undefined, import("vue").CSSProperties | undefined>;
     computedValue: import("vue").ComputedRef<string>;
-    showClearBtn: import("vue").ComputedRef<string | false>;
+    showClearBtn: import("vue").ComputedRef<string | false | undefined>;
     valueLength: import("vue").ComputedRef<number>;
     computedMaxLength: import("vue").ComputedRef<number>;
     mergedDisabled: import("vue").ComputedRef<boolean>;

package/es/textarea/textarea.vue.d.ts

@@ -57,7 +57,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     mirrorRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
     mirrorStyle: import("vue").Ref<CSSProperties | undefined, CSSProperties | undefined>;
     computedValue: import("vue").ComputedRef<string>;
-    showClearBtn: import("vue").ComputedRef<string | false>;
+    showClearBtn: import("vue").ComputedRef<string | false | undefined>;
     valueLength: import("vue").ComputedRef<number>;
     computedMaxLength: import("vue").ComputedRef<number>;
     mergedDisabled: import("vue").ComputedRef<boolean>;

package/es/textarea/textarea.vue_vue_type_script_lang.js

@@ -5,6 +5,7 @@ import { isFunction, isNull, isObject, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import icon_hover_default from "../_components/icon-hover.js";
 import IconClose from "../icon/icon-close/index.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { useCursor } from "../_hooks/use-cursor.js";
 import { INPUT_EVENTS } from "../_utils/constant.js";
 import { omit } from "../_utils/omit.js";
@@ -64,12 +65,13 @@ var textarea_vue_vue_type_script_lang_default = defineComponent({
 		"blur": (_ev) => true
 	},
 	setup(props, { emit, attrs }) {
-		const { disabled, error, modelValue } = toRefs(props);
+		const { disabled, error, modelValue, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("textarea");
 		const { mergedDisabled, mergedError: _mergedError, eventHandlers } = useFormItem({
 			disabled,
 			error
 		});
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const textareaRef = ref();
 		const textareaStyle = ref();
 		const mirrorRef = ref();
@@ -97,7 +99,9 @@ var textarea_vue_vue_type_script_lang_default = defineComponent({
 		const mergedError = computed(() => _mergedError.value || Boolean(computedMaxLength.value && maxLengthErrorOnly.value && valueLength.value > computedMaxLength.value));
 		const isScroll = ref(false);
 		const focused = ref(false);
-		const showClearBtn = computed(() => props.allowClear && !mergedDisabled.value && computedValue.value);
+		const showClearBtn = computed(() => {
+			return mergedAllowClear.value && !mergedDisabled.value && computedValue.value;
+		});
 		const isComposition = ref(false);
 		const compositionValue = ref("");
 		const keepControl = () => {

package/es/time-picker/index.d.ts

@@ -100,6 +100,7 @@ declare const TimePicker: {
         inputValue: import("vue").Ref<string | (string | undefined)[] | undefined, string | (string | undefined)[] | undefined>;
         computedFormat: import("vue").ComputedRef<string>;
         computedUse12Hours: import("vue").ComputedRef<boolean>;
+        mergedAllowClear: import("vue").ComputedRef<boolean | undefined>;
         inputProps: import("vue").ComputedRef<{
             focusedIndex: number;
             onFocusedIndexChange: (index: number) => void;
@@ -3885,6 +3886,7 @@ declare const TimePicker: {
         inputValue: import("vue").Ref<string | (string | undefined)[] | undefined, string | (string | undefined)[] | undefined>;
         computedFormat: import("vue").ComputedRef<string>;
         computedUse12Hours: import("vue").ComputedRef<boolean>;
+        mergedAllowClear: import("vue").ComputedRef<boolean | undefined>;
         inputProps: import("vue").ComputedRef<{
             focusedIndex: number;
             onFocusedIndexChange: (index: number) => void;
@@ -4025,6 +4027,7 @@ declare const TimePicker: {
     inputValue: import("vue").Ref<string | (string | undefined)[] | undefined, string | (string | undefined)[] | undefined>;
     computedFormat: import("vue").ComputedRef<string>;
     computedUse12Hours: import("vue").ComputedRef<boolean>;
+    mergedAllowClear: import("vue").ComputedRef<boolean | undefined>;
     inputProps: import("vue").ComputedRef<{
         focusedIndex: number;
         onFocusedIndexChange: (index: number) => void;