@sdata/web-vue 1.7.0 → 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

@@ -1,4 +1,4 @@
-import { InjectionKey, Slots } from 'vue';
+import { InjectionKey, Ref, Slots } from 'vue';
 import { Size } from '../_utils/constant';
 import { SDLang } from '../locale/interface';
 import { SDThemeNormalized } from './theme';
@@ -7,6 +7,7 @@ export interface ConfigProvider {
     prefixCls?: string;
     locale?: SDLang;
     size?: Size;
+    allowClear?: boolean;
     updateAtScroll?: boolean;
     scrollToClose?: boolean;
     exchangeTime?: boolean;
@@ -14,3 +15,4 @@ export interface ConfigProvider {
     theme?: SDThemeNormalized;
 }
 export declare const configProviderInjectionKey: InjectionKey<ConfigProvider>;
+export declare const themePopupContainerInjectionKey: InjectionKey<Ref<HTMLElement | null>>;

package/es/config-provider/context.js

@@ -1,4 +1,5 @@
 //#region components/config-provider/context.ts
 var configProviderInjectionKey = Symbol("SDConfigProvider");
+var themePopupContainerInjectionKey = Symbol("SDThemePopupContainer");
 //#endregion
-export { configProviderInjectionKey };
+export { configProviderInjectionKey, themePopupContainerInjectionKey };

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/config-provider/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/config-provider/style/index.css

@@ -0,0 +1,29 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-theme-provider {
+  min-width: 0;
+}
+
+.sd-theme-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 0;
+  pointer-events: none;
+}

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

@@ -1 +1 @@
-export {};
+import './index.scss';

package/es/config-provider/style/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/config-provider/style/index.scss

@@ -0,0 +1,17 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+
+$theme-prefix-cls: string.unquote('#{theme.$prefix}-theme');
+
+.#{$theme-prefix-cls}-provider {
+  min-width: 0;
+}
+
+.#{$theme-prefix-cls}-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 0;
+  pointer-events: none;
+}

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

@@ -1,7 +1,5 @@
-import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
 import theme_provider_vue_vue_type_script_setup_true_lang_default from "./theme-provider.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                               */
 //#region components/config-provider/theme-provider.vue
-var theme_provider_default = /* @__PURE__ */ _plugin_vue_export_helper_default(theme_provider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a0a91a8a"]]);
+var theme_provider_default = theme_provider_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { theme_provider_default as default };

package/es/config-provider/theme-provider.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,9 @@
+import { themePopupContainerInjectionKey } from "./context.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import usePopupManager from "../_hooks/use-popup-manager.js";
 import { applyThemeCSSVariables, clearThemeCSSVariables, normalizeTheme } from "./theme.js";
-import { computed, createBlock, defineComponent, onBeforeUnmount, openBlock, renderSlot, resolveDynamicComponent, shallowRef, watch, withCtx } from "vue";
+import { computed, createBlock, defineComponent, normalizeClass, onBeforeUnmount, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, withCtx } from "vue";
 //#region components/config-provider/theme-provider.vue?vue&type=script&setup=true&lang.ts
 var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent(_objectSpread2(_objectSpread2({}, { name: "ThemeProvider" }), {}, {
 	__name: "theme-provider",
@@ -16,14 +19,48 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	setup(__props) {
 		const props = __props;
 		const rootElement = shallowRef(null);
+		const popupContainer = shallowRef(null);
+		provide(themePopupContainerInjectionKey, popupContainer);
 		const normalizedTheme = computed(() => normalizeTheme(props.theme));
 		const usesLocalThemeContainer = computed(() => {
 			if (props.global) return false;
 			return Boolean(props.themeMode) || Object.keys(normalizedTheme.value.tokens).length > 0 || Object.keys(normalizedTheme.value.components).length > 0;
 		});
+		const themePopupContainerPrefixCls = getPrefixCls("theme-popup-container");
+		const { zIndex } = usePopupManager("popup", { visible: usesLocalThemeContainer });
 		let appliedThemeKeys = /* @__PURE__ */ new Set();
+		let appliedPopupThemeKeys = /* @__PURE__ */ new Set();
 		let activeTarget = null;
 		let previousGlobalThemeMode;
+		function cleanupPopupContainer() {
+			if (!popupContainer.value) return;
+			clearThemeCSSVariables(popupContainer.value, appliedPopupThemeKeys);
+			appliedPopupThemeKeys = /* @__PURE__ */ new Set();
+			popupContainer.value.removeAttribute("sd-theme");
+			if (popupContainer.value.parentNode) popupContainer.value.parentNode.removeChild(popupContainer.value);
+			popupContainer.value = null;
+		}
+		function ensurePopupContainer() {
+			if (popupContainer.value || typeof document === "undefined") return;
+			const containerElement = document.createElement("div");
+			containerElement.className = themePopupContainerPrefixCls;
+			document.body.appendChild(containerElement);
+			popupContainer.value = containerElement;
+		}
+		function syncPopupContainerTheme(target) {
+			var _target$closest;
+			if (props.global || !target || !usesLocalThemeContainer.value) {
+				cleanupPopupContainer();
+				return;
+			}
+			ensurePopupContainer();
+			if (!popupContainer.value) return;
+			popupContainer.value.style.zIndex = String(zIndex.value);
+			appliedPopupThemeKeys = applyThemeCSSVariables(popupContainer.value, normalizedTheme.value, appliedPopupThemeKeys);
+			const inheritedThemeMode = (_target$closest = target.closest("[sd-theme]")) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute("sd-theme");
+			if (inheritedThemeMode) popupContainer.value.setAttribute("sd-theme", inheritedThemeMode);
+			else popupContainer.value.removeAttribute("sd-theme");
+		}
 		function resolveThemeTarget() {
 			if (typeof document === "undefined") return null;
 			if (props.global) return document.body || document.documentElement;
@@ -68,6 +105,7 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			const nextTarget = resolveThemeTarget();
 			if (!nextTarget) {
 				resetActiveTarget();
+				cleanupPopupContainer();
 				return;
 			}
 			if (activeTarget && activeTarget !== nextTarget) cleanupTarget(activeTarget);
@@ -75,6 +113,7 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			appliedThemeKeys = applyThemeCSSVariables(nextTarget, normalizedTheme.value, appliedThemeKeys);
 			restoreThemeMode(nextTarget);
 			activeTarget = nextTarget;
+			syncPopupContainerTheme(nextTarget);
 		}
 		watch([
 			normalizedTheme,
@@ -89,6 +128,7 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		});
 		onBeforeUnmount(() => {
 			cleanupTarget(activeTarget);
+			cleanupPopupContainer();
 			activeTarget = null;
 		});
 		return (_ctx, _cache) => {
@@ -96,11 +136,11 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				key: 0,
 				ref_key: "rootElement",
 				ref: rootElement,
-				class: "sd-theme-provider"
+				class: normalizeClass(unref(getPrefixCls)("theme-provider"))
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 512)) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true);
+			}, 8, ["class"])) : renderSlot(_ctx.$slots, "default", { key: 1 });
 		};
 	}
 }));

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/drawer/drawer.vue.d.ts

@@ -108,7 +108,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     handleClose: () => void;
     handleMask: (e: Event) => void;
     isFixed: import("vue").ComputedRef<boolean>;
-    teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:visible': (_visible: boolean) => true;
     ok: (_e: Event) => true;

package/es/drawer/index.d.ts

@@ -115,7 +115,7 @@ declare const Drawer: {
         handleClose: () => void;
         handleMask: (e: Event) => void;
         isFixed: import("vue").ComputedRef<boolean>;
-        teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+        teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:visible': (_visible: boolean) => true;
         ok: (_e: Event) => true;
@@ -850,7 +850,7 @@ declare const Drawer: {
         handleClose: () => void;
         handleMask: (e: Event) => void;
         isFixed: import("vue").ComputedRef<boolean>;
-        teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+        teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     }, {}, {}, {}, {
         footer: boolean;
         header: boolean;
@@ -984,7 +984,7 @@ declare const Drawer: {
     handleClose: () => void;
     handleMask: (e: Event) => void;
     isFixed: import("vue").ComputedRef<boolean>;
-    teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:visible': (_visible: boolean) => true;
     ok: (_e: Event) => true;

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;
 }
@@ -17868,4 +17959,17 @@ body {
 .sd-affix {
   position: fixed;
   z-index: 999;
+}
+
+.sd-theme-provider {
+  min-width: 0;
+}
+
+.sd-theme-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 0;
+  pointer-events: none;
 }

package/es/index.scss

@@ -75,3 +75,4 @@
 @use '@components/anchor/style/index.scss' as *;
 @use '@components/alert/style/index.scss' as *;
 @use '@components/affix/style/index.scss' as *;
+@use '@components/config-provider/style/index.scss' as *;

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) => {