@sdata/web-vue 3.30.0 → 4.1.0

package/es/color-picker/color-picker.js

@@ -1,295 +1,5 @@
-import { configProviderInjectionKey } from "../config-provider/context.js";
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
-import { getPrefixCls } from "../_utils/global-config.js";
-import { useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
-import Trigger from "../trigger/index.js";
-import Tooltip from "../tooltip/index.js";
-import Input from "../input/index.js";
-import { formatColorState, getColorBackground, getColorObject, normalizeFormat, parseColorState } from "./utils.js";
-import panel_default from "./panel.js";
-import { computed, createVNode, defineComponent, inject, mergeProps, ref, toRef } from "vue";
-//#region components/color-picker/color-picker.tsx
-var color_picker_default = /* @__PURE__ */ defineComponent({
-	name: "ColorPicker",
-	props: {
-		borderless: Boolean,
-		clearable: Boolean,
-		colorModes: {
-			type: Array,
-			default: () => ["monochrome"]
-		},
-		enableMultipleGradient: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 色值
-		* @en Value
-		*/
-		modelValue: String,
-		/**
-		* @zh 默认色值
-		* @en Default value
-		*/
-		defaultValue: {
-			type: String,
-			default: ""
-		},
-		/**
-		* @zh 格式化色值
-		* @en Value format
-		*/
-		format: {
-			type: String,
-			default: "RGB"
-		},
-		/**
-		* @zh 尺寸
-		* @en Size
-		* @values 'mini','small','medium','large'
-		*/
-		size: {
-			type: String,
-			default: "medium"
-		},
-		/**
-		* @zh 是否开启透明通道
-		* @en Whether alpha channel is enabled
-		*/
-		enableAlpha: Boolean,
-		/**
-		* @zh 是否展示颜色预览块
-		* @en Whether to show primary color preview
-		*/
-		showPrimaryColorPreview: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 输入框透传属性
-		* @en Input props
-		*/
-		inputProps: { type: Object },
-		/**
-		* @zh 最近使用颜色
-		* @en Recent colors
-		*/
-		recentColors: {
-			type: [Array, Boolean],
-			default: void 0
-		},
-		/**
-		* @zh 最近使用颜色，非受控
-		* @en Default recent colors
-		*/
-		defaultRecentColors: {
-			type: [Array, Boolean],
-			default: () => []
-		},
-		/**
-		* @zh 系统色板
-		* @en Swatch colors
-		*/
-		swatchColors: {
-			type: Array,
-			default: void 0
-		},
-		/**
-		* @zh 是否禁用
-		* @en Disabled
-		*/
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 是否为只读状态
-		* @en Whether it is read-only
-		*/
-		readonly: {
-			type: [Boolean, String],
-			default: false
-		},
-		/**
-		* @zh 是否内联面板
-		* @en Render panel inline
-		*/
-		hideTrigger: Boolean,
-		/**
-		* @zh 透传 Trigger 组件属性
-		* @en Trigger props
-		*/
-		triggerProps: { type: Object },
-		floatingOptions: { type: Object }
-	},
-	emits: {
-		"update:modelValue": (_value) => true,
-		/**
-		* @zh 颜色值改变时触发
-		* @en Triggered when the color value changes
-		*/
-		"change": (_value, _context) => true,
-		/**
-		* @zh 颜色面板展开和收起时触发
-		* @en Triggered when the color panel is expanded and collapsed
-		*/
-		"popup-visible-change": (_visible, _value) => true,
-		"clear": (_context) => true,
-		"palette-bar-change": (_context) => true,
-		"recent-colors-change": (_value) => true
-	},
-	setup(props, { emit, slots }) {
-		const prefixCls = getPrefixCls("color-picker");
-		const configProvider = inject(configProviderInjectionKey, void 0);
-		const innerValue = ref(props.defaultValue);
-		const popupVisible = ref(false);
-		const innerRecentColors = ref(Array.isArray(props.defaultRecentColors) ? props.defaultRecentColors : []);
-		const mergedValue = computed(() => {
-			var _props$modelValue;
-			return (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : innerValue.value;
-		});
-		const mergedEnableAlpha = computed(() => props.enableAlpha);
-		const normalizedFormat = computed(() => normalizeFormat(props.format, mergedEnableAlpha.value));
-		const mergedRecentColors = computed(() => {
-			if (props.recentColors === null || props.recentColors === false) return props.recentColors;
-			if (Array.isArray(props.recentColors)) return props.recentColors;
-			return innerRecentColors.value;
-		});
-		const mergedSwatchColors = computed(() => {
-			var _configProvider$color, _configProvider$color2;
-			if (props.swatchColors !== void 0) return props.swatchColors;
-			return (_configProvider$color = configProvider === null || configProvider === void 0 || (_configProvider$color2 = configProvider.colorPicker) === null || _configProvider$color2 === void 0 ? void 0 : _configProvider$color2.swatchColors) !== null && _configProvider$color !== void 0 ? _configProvider$color : [];
-		});
-		const colorState = computed(() => parseColorState(mergedValue.value, props.colorModes));
-		const triggerInputValue = computed(() => {
-			if (!mergedValue.value) return "";
-			return formatColorState(colorState.value, normalizedFormat.value, mergedEnableAlpha.value);
-		});
-		const previewStyle = computed(() => {
-			const background = getColorBackground(colorState.value);
-			return colorState.value.mode === "linear-gradient" ? { backgroundImage: background } : { backgroundColor: background };
-		});
-		const syncValue = (value) => {
-			if (props.modelValue === void 0) innerValue.value = value;
-			emit("update:modelValue", value);
-		};
-		const syncRecentColors = (value) => {
-			if (props.recentColors === void 0) innerRecentColors.value = value;
-			emit("recent-colors-change", value);
-		};
-		const emitChange = (value, trigger) => {
-			syncValue(value);
-			emit("change", value, {
-				color: getColorObject(parseColorState(value, props.colorModes)),
-				trigger
-			});
-		};
-		const handleColorChange = (value, trigger) => {
-			if (props.disabled) return;
-			emitChange(value, trigger);
-		};
-		const handleClear = (event) => {
-			syncValue("");
-			emit("clear", { e: event });
-			emit("change", "", {
-				color: getColorObject(parseColorState("", props.colorModes)),
-				trigger: "clear"
-			});
-		};
-		const handleTriggerInputChange = (value) => {
-			if (!value) {
-				handleClear(new MouseEvent("click"));
-				return;
-			}
-			const nextState = parseColorState(value, props.colorModes);
-			handleColorChange(formatColorState(nextState, normalizedFormat.value, mergedEnableAlpha.value), "input");
-		};
-		const onPopupVisibleChange = (visible) => {
-			popupVisible.value = visible;
-			emit("popup-visible-change", visible, triggerInputValue.value);
-		};
-		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), toRef(props, "disabled"));
-		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
-		const mergedTriggerProps = computed(() => {
-			var _props$floatingOption, _props$triggerProps;
-			return _objectSpread2(_objectSpread2({
-				trigger: "click",
-				position: "bl",
-				disabled: props.disabled || !!props.readonly,
-				popupOffset: 4,
-				animationName: "slide-dynamic-origin"
-			}, props.triggerProps), {}, { floatingOptions: (_props$floatingOption = props.floatingOptions) !== null && _props$floatingOption !== void 0 ? _props$floatingOption : (_props$triggerProps = props.triggerProps) === null || _props$triggerProps === void 0 ? void 0 : _props$triggerProps.floatingOptions });
-		});
-		const renderTriggerInput = () => {
-			return createVNode("div", {
-				"class": {
-					[prefixCls]: true,
-					[`${prefixCls}-size-${props.size}`]: props.size,
-					[`${prefixCls}-disabled`]: props.disabled,
-					[`${prefixCls}-readonly`]: !!props.readonly,
-					[`${prefixCls}-borderless`]: props.borderless
-				},
-				"onClick": showReadonlyTip
-			}, [createVNode(Input, mergeProps({
-				"class": `${prefixCls}-trigger-input`,
-				"size": props.size === "mini" ? "mini" : props.size,
-				"allowClear": props.clearable,
-				"disabled": props.disabled,
-				"readonly": props.readonly,
-				"modelValue": triggerInputValue.value,
-				"inputAttrs": {
-					"aria-haspopup": "dialog",
-					"aria-expanded": popupVisible.value
-				},
-				"onChange": handleTriggerInputChange,
-				"onClear": handleClear
-			}, props.inputProps), { prefix: () => createVNode("div", {
-				"class": `${prefixCls}-preview`,
-				"style": previewStyle.value
-			}, null) })]);
-		};
-		const renderPanel = () => {
-			return createVNode(panel_default, {
-				"value": mergedValue.value,
-				"colorModes": props.colorModes,
-				"enableMultipleGradient": props.enableMultipleGradient,
-				"recentColors": mergedRecentColors.value,
-				"swatchColors": mergedSwatchColors.value,
-				"disabled": props.disabled,
-				"enableAlpha": mergedEnableAlpha.value,
-				"format": normalizedFormat.value,
-				"showPrimaryColorPreview": props.showPrimaryColorPreview,
-				"onChange": handleColorChange,
-				"onRecentColorsChange": syncRecentColors,
-				"onPaletteBarChange": (context) => {
-					emit("palette-bar-change", context);
-				}
-			}, null);
-		};
-		return () => {
-			if (props.hideTrigger) return renderPanel();
-			return createVNode(Tooltip, {
-				"popupVisible": tipVisible.value,
-				"content": readonlyTipText.value,
-				"position": "top"
-			}, { default: () => [createVNode(Trigger, mergeProps({ "onPopupVisibleChange": onPopupVisibleChange }, mergedTriggerProps.value), {
-				default: () => {
-					var _ref, _slots$trigger, _slots$trigger2, _slots$default;
-					return [(_ref = (_slots$trigger = (_slots$trigger2 = slots.trigger) === null || _slots$trigger2 === void 0 ? void 0 : _slots$trigger2.call(slots, {
-						value: mergedValue.value,
-						displayValue: triggerInputValue.value,
-						color: getColorObject(colorState.value),
-						popupVisible: popupVisible.value,
-						disabled: props.disabled,
-						readonly: Boolean(props.readonly),
-						format: normalizedFormat.value,
-						previewStyle: previewStyle.value
-					})) !== null && _slots$trigger !== void 0 ? _slots$trigger : (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) !== null && _ref !== void 0 ? _ref : renderTriggerInput()];
-				},
-				content: renderPanel
-			})] });
-		};
-	}
-});
+import color_picker_vue_vue_type_script_setup_true_lang_default from "./color-picker.vue_vue_type_script_setup_true_lang.js";
+//#region components/color-picker/color-picker.vue
+var color_picker_default = color_picker_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { color_picker_default as default };

package/es/color-picker/{color-picker.d.ts → color-picker.vue.d.ts}

@@ -1,9 +1,13 @@
-import { PropType } from 'vue';
+import type { PropType } from 'vue';
 import type { FloatingOptions } from '../_utils/floating';
+import type { ColorFormat, ColorModes, ColorObject, ColorPickerChangeTrigger, ColorPickerTriggerSlotProps, LegacyFormat, RecentColorsValue } from './interface';
 import { Size } from '../_utils/constant';
-import { TriggerProps } from '../trigger';
-import { ColorFormat, ColorModes, ColorObject, ColorPickerChangeTrigger, LegacyFormat, RecentColorsValue } from './interface';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+import { type TriggerProps } from '../trigger';
+type __VLS_Slots = {
+    default(): unknown;
+    trigger(props: ColorPickerTriggerSlotProps): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     borderless: BooleanConstructor;
     clearable: BooleanConstructor;
     colorModes: {
@@ -62,20 +66,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     floatingOptions: {
         type: PropType<FloatingOptions>;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (_value: string) => true;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (_context: {
+        e: MouseEvent;
+    }) => void;
     change: (_value: string, _context: {
         color: ColorObject;
         trigger: ColorPickerChangeTrigger;
-    }) => true;
-    'popup-visible-change': (_visible: boolean, _value: string) => true;
-    clear: (_context: {
-        e: MouseEvent;
-    }) => true;
-    'palette-bar-change': (_context: {
+    }) => void;
+    "update:modelValue": (_value: string) => void;
+    "popup-visible-change": (_visible: boolean, _value: string) => void;
+    "palette-bar-change": (_context: {
         color: ColorObject;
-    }) => true;
-    'recent-colors-change': (_value: string[]) => true;
+    }) => void;
+    "recent-colors-change": (_value: string[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     borderless: BooleanConstructor;
     clearable: BooleanConstructor;
@@ -166,4 +170,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     borderless: boolean;
     defaultRecentColors: RecentColorsValue;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/color-picker/color-picker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,256 @@
+import { configProviderInjectionKey } from "../config-provider/context.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
+import Trigger from "../trigger/index.js";
+import Tooltip from "../tooltip/index.js";
+import Input from "../input/index.js";
+import { formatColorState, getColorBackground, getColorObject, normalizeFormat, parseColorState } from "./utils.js";
+import panel_default from "./panel.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, toRef, unref, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+//#region components/color-picker/color-picker.vue?vue&type=script&setup=true&lang.ts
+var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "ColorPicker" }), {}, {
+	__name: "color-picker",
+	props: {
+		borderless: Boolean,
+		clearable: Boolean,
+		colorModes: {
+			type: Array,
+			default: () => ["monochrome"]
+		},
+		enableMultipleGradient: {
+			type: Boolean,
+			default: true
+		},
+		modelValue: String,
+		defaultValue: {
+			type: String,
+			default: ""
+		},
+		format: {
+			type: String,
+			default: "RGB"
+		},
+		size: {
+			type: String,
+			default: "medium"
+		},
+		enableAlpha: Boolean,
+		showPrimaryColorPreview: {
+			type: Boolean,
+			default: true
+		},
+		inputProps: { type: Object },
+		recentColors: {
+			type: [Array, Boolean],
+			default: void 0
+		},
+		defaultRecentColors: {
+			type: [Array, Boolean],
+			default: () => []
+		},
+		swatchColors: {
+			type: Array,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: [Boolean, String],
+			default: false
+		},
+		hideTrigger: Boolean,
+		triggerProps: { type: Object },
+		floatingOptions: { type: Object }
+	},
+	emits: {
+		"update:modelValue": (_value) => true,
+		"change": (_value, _context) => true,
+		"popup-visible-change": (_visible, _value) => true,
+		"clear": (_context) => true,
+		"palette-bar-change": (_context) => true,
+		"recent-colors-change": (_value) => true
+	},
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const [DefinePanel, ReusePanel] = createReusableTemplate();
+		const prefixCls = getPrefixCls("color-picker");
+		const configProvider = inject(configProviderInjectionKey, void 0);
+		const innerValue = ref(props.defaultValue);
+		const popupVisible = ref(false);
+		const innerRecentColors = ref(Array.isArray(props.defaultRecentColors) ? props.defaultRecentColors : []);
+		const mergedValue = computed(() => {
+			var _props$modelValue;
+			return (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : innerValue.value;
+		});
+		const mergedEnableAlpha = computed(() => props.enableAlpha);
+		const normalizedFormat = computed(() => normalizeFormat(props.format, mergedEnableAlpha.value));
+		const mergedRecentColors = computed(() => {
+			if (props.recentColors === null || props.recentColors === false) return props.recentColors;
+			if (Array.isArray(props.recentColors)) return props.recentColors;
+			return innerRecentColors.value;
+		});
+		const mergedSwatchColors = computed(() => {
+			var _configProvider$color, _configProvider$color2;
+			if (props.swatchColors !== void 0) return props.swatchColors;
+			return (_configProvider$color = configProvider === null || configProvider === void 0 || (_configProvider$color2 = configProvider.colorPicker) === null || _configProvider$color2 === void 0 ? void 0 : _configProvider$color2.swatchColors) !== null && _configProvider$color !== void 0 ? _configProvider$color : [];
+		});
+		const colorState = computed(() => parseColorState(mergedValue.value, props.colorModes));
+		const triggerInputValue = computed(() => {
+			if (!mergedValue.value) return "";
+			return formatColorState(colorState.value, normalizedFormat.value, mergedEnableAlpha.value);
+		});
+		const previewStyle = computed(() => {
+			const background = getColorBackground(colorState.value);
+			const style = {};
+			style[colorState.value.mode === "linear-gradient" ? "backgroundImage" : "backgroundColor"] = background;
+			return style;
+		});
+		const syncValue = (value) => {
+			if (props.modelValue === void 0) innerValue.value = value;
+			emit("update:modelValue", value);
+		};
+		const syncRecentColors = (value) => {
+			if (props.recentColors === void 0) innerRecentColors.value = value;
+			emit("recent-colors-change", value);
+		};
+		const emitChange = (value, trigger) => {
+			syncValue(value);
+			emit("change", value, {
+				color: getColorObject(parseColorState(value, props.colorModes)),
+				trigger
+			});
+		};
+		const handleColorChange = (value, trigger) => {
+			if (!props.disabled) emitChange(value, trigger);
+		};
+		const handleClear = (event) => {
+			syncValue("");
+			emit("clear", { e: event });
+			emit("change", "", {
+				color: getColorObject(parseColorState("", props.colorModes)),
+				trigger: "clear"
+			});
+		};
+		const handleTriggerInputChange = (value) => {
+			if (!value) {
+				handleClear(new MouseEvent("click"));
+				return;
+			}
+			const nextState = parseColorState(value, props.colorModes);
+			handleColorChange(formatColorState(nextState, normalizedFormat.value, mergedEnableAlpha.value), "input");
+		};
+		const onPopupVisibleChange = (visible) => {
+			popupVisible.value = visible;
+			emit("popup-visible-change", visible, triggerInputValue.value);
+		};
+		const handlePaletteBarChange = (context) => {
+			emit("palette-bar-change", context);
+		};
+		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), toRef(props, "disabled"));
+		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
+		const mergedTriggerProps = computed(() => {
+			var _props$floatingOption, _props$triggerProps;
+			return _objectSpread2(_objectSpread2({
+				trigger: "click",
+				position: "bl",
+				disabled: props.disabled || !!props.readonly,
+				popupOffset: 4,
+				animationName: "slide-dynamic-origin"
+			}, props.triggerProps), {}, { floatingOptions: (_props$floatingOption = props.floatingOptions) !== null && _props$floatingOption !== void 0 ? _props$floatingOption : (_props$triggerProps = props.triggerProps) === null || _props$triggerProps === void 0 ? void 0 : _props$triggerProps.floatingOptions });
+		});
+		const triggerSlotProps = computed(() => ({
+			value: mergedValue.value,
+			displayValue: triggerInputValue.value,
+			color: getColorObject(colorState.value),
+			popupVisible: popupVisible.value,
+			disabled: props.disabled,
+			readonly: Boolean(props.readonly),
+			format: normalizedFormat.value,
+			previewStyle: previewStyle.value
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefinePanel), null, {
+				default: withCtx(() => [createVNode(panel_default, {
+					value: mergedValue.value,
+					"color-modes": props.colorModes,
+					"enable-multiple-gradient": props.enableMultipleGradient,
+					"recent-colors": mergedRecentColors.value,
+					"swatch-colors": mergedSwatchColors.value,
+					disabled: props.disabled,
+					"enable-alpha": mergedEnableAlpha.value,
+					format: normalizedFormat.value,
+					"show-primary-color-preview": props.showPrimaryColorPreview,
+					onChange: handleColorChange,
+					onRecentColorsChange: syncRecentColors,
+					onPaletteBarChange: handlePaletteBarChange
+				}, null, 8, [
+					"value",
+					"color-modes",
+					"enable-multiple-gradient",
+					"recent-colors",
+					"swatch-colors",
+					"disabled",
+					"enable-alpha",
+					"format",
+					"show-primary-color-preview"
+				])]),
+				_: 1
+			}), props.hideTrigger ? (openBlock(), createBlock(unref(ReusePanel), { key: 0 })) : (openBlock(), createBlock(unref(Tooltip), {
+				key: 1,
+				"popup-visible": unref(tipVisible),
+				content: unref(readonlyTipText),
+				position: "top"
+			}, {
+				default: withCtx(() => [createVNode(unref(Trigger), mergeProps(mergedTriggerProps.value, { onPopupVisibleChange }), {
+					content: withCtx(() => [createVNode(unref(ReusePanel))]),
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerSlotProps.value)), () => [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
+						class: normalizeClass({
+							[unref(prefixCls)]: true,
+							[`${unref(prefixCls)}-size-${props.size}`]: props.size,
+							[`${unref(prefixCls)}-disabled`]: props.disabled,
+							[`${unref(prefixCls)}-readonly`]: !!props.readonly,
+							[`${unref(prefixCls)}-borderless`]: props.borderless
+						}),
+						onClick: _cache[0] || (_cache[0] = (...args) => unref(showReadonlyTip) && unref(showReadonlyTip)(...args))
+					}, [createVNode(unref(Input), mergeProps(props.inputProps, {
+						class: `${unref(prefixCls)}-trigger-input`,
+						size: props.size === "mini" ? "mini" : props.size,
+						"allow-clear": props.clearable,
+						disabled: props.disabled,
+						readonly: props.readonly,
+						"model-value": triggerInputValue.value,
+						"input-attrs": {
+							"aria-haspopup": "dialog",
+							"aria-expanded": popupVisible.value
+						},
+						onChange: handleTriggerInputChange,
+						onClear: handleClear
+					}), {
+						prefix: withCtx(() => [createElementVNode("div", {
+							class: normalizeClass(`${unref(prefixCls)}-preview`),
+							style: normalizeStyle(previewStyle.value)
+						}, null, 6)]),
+						_: 1
+					}, 16, [
+						"class",
+						"size",
+						"allow-clear",
+						"disabled",
+						"readonly",
+						"model-value",
+						"input-attrs"
+					])], 2)])])]),
+					_: 3
+				}, 16)]),
+				_: 3
+			}, 8, ["popup-visible", "content"]))], 64);
+		};
+	}
+}));
+//#endregion
+export { color_picker_vue_vue_type_script_setup_true_lang_default as default };

package/es/color-picker/control-bar.js

@@ -1,56 +1,5 @@
-import { getPrefixCls } from "../_utils/global-config.js";
-import { useControlBlock } from "./hooks/use-control-block.js";
-import { computed, createVNode, defineComponent } from "vue";
-//#region components/color-picker/control-bar.tsx
-var control_bar_default = /* @__PURE__ */ defineComponent({
-	name: "ControlBar",
-	props: {
-		x: {
-			type: Number,
-			required: true
-		},
-		color: {
-			type: Object,
-			required: true
-		},
-		colorString: String,
-		type: String,
-		onChange: Function
-	},
-	setup(props) {
-		const prefixCls = getPrefixCls("color-picker");
-		const rgb = computed(() => props.color.rgb);
-		const { blockRef, handlerRef, onMouseDown } = useControlBlock({
-			value: [props.x, 0],
-			onChange: (pos) => {
-				var _props$onChange;
-				return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, pos[0]);
-			}
-		});
-		const renderHandler = () => {
-			return createVNode("div", {
-				"ref": handlerRef,
-				"class": `${prefixCls}-handler`,
-				"style": {
-					left: `${props.x * 100}%`,
-					color: props.colorString
-				}
-			}, null);
-		};
-		return () => {
-			if (props.type === "alpha") return createVNode("div", { "class": `${prefixCls}-control-bar-bg` }, [createVNode("div", {
-				"ref": blockRef,
-				"class": [`${prefixCls}-control-bar`, `${prefixCls}-control-bar-alpha`],
-				"style": { background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}))` },
-				"onMousedown": onMouseDown
-			}, [renderHandler()])]);
-			return createVNode("div", {
-				"ref": blockRef,
-				"class": [`${prefixCls}-control-bar`, `${prefixCls}-control-bar-hue`],
-				"onMousedown": onMouseDown
-			}, [renderHandler()]);
-		};
-	}
-});
+import control_bar_vue_vue_type_script_setup_true_lang_default from "./control-bar.vue_vue_type_script_setup_true_lang.js";
+//#region components/color-picker/control-bar.vue
+var control_bar_default = control_bar_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { control_bar_default as default };