@sdata/web-vue 1.7.1 → 1.9.0

package/es/color-picker/panel.js

@@ -1,133 +1,467 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import useState from "../_hooks/use-state.js";
-import { useI18n } from "../locale/index.js";
+import input_group_default from "../input/input-group.js";
+import Input from "../input/index.js";
+import Radio from "../radio/index.js";
 import Select from "../select/index.js";
-import { hexToRgb, rgbToHsv } from "../_utils/color.js";
+import { colors } from "./colors.js";
+import InputNumber from "../input-number/index.js";
 import control_bar_default from "./control-bar.js";
-import input_hex_default from "./input-hex.js";
-import input_rgb_default from "./input-rgb.js";
 import palette_default from "./palette.js";
-import { computed, createVNode, defineComponent } from "vue";
+import { addGradientColor, formatColor, formatColorState, getActiveGradientPoint, getColorBackground, getColorObject, getDefaultColorState, getDefaultGradientState, getFormatInputs, getGradientThumbBackground, getLinearGradientString, normalizeFormat, parseColorState, parseFormatInputValues, removeGradientColor, round, setActiveColorHsva, setGradientColors, setGradientDegree, setGradientSelectedPoint } from "./utils.js";
+import { computed, createTextVNode, createVNode, defineComponent, isVNode, ref, watch } from "vue";
+import { useDraggable } from "@vueuse/core";
 //#region components/color-picker/panel.tsx
-var panel_default = /* @__PURE__ */ defineComponent({
-	name: "Panel",
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var MODE_OPTIONS = [{
+	value: "monochrome",
+	label: "单色"
+}, {
+	value: "linear-gradient",
+	label: "渐变"
+}];
+var clampPercent = (value) => Math.min(100, Math.max(0, value));
+var getGradientPointComparableColor = (point) => formatColor(point.hsva, "CSS", true);
+var matchGradientPoint = (previousPoints, nextPoint, usedIds) => {
+	const availablePoints = previousPoints.filter((point) => !usedIds.has(point.id));
+	if (!availablePoints.length) return;
+	const nextColor = getGradientPointComparableColor(nextPoint);
+	const sameColorPoints = availablePoints.filter((point) => getGradientPointComparableColor(point) === nextColor);
+	return (sameColorPoints.length ? sameColorPoints : availablePoints).reduce((closestPoint, point) => {
+		if (!closestPoint) return point;
+		return Math.abs(point.left - nextPoint.left) < Math.abs(closestPoint.left - nextPoint.left) ? point : closestPoint;
+	}, void 0);
+};
+var reconcileGradientState = (previousState, nextState) => {
+	if (previousState.mode !== "linear-gradient" || nextState.mode !== "linear-gradient") return nextState;
+	const usedIds = /* @__PURE__ */ new Set();
+	const nextColors = nextState.gradientColors.map((point) => {
+		const matchedPoint = matchGradientPoint(previousState.gradientColors, point, usedIds);
+		if (!matchedPoint) return point;
+		usedIds.add(matchedPoint.id);
+		return _objectSpread2(_objectSpread2({}, point), {}, { id: matchedPoint.id });
+	});
+	const selectedPoint = nextColors.find((point) => point.id === previousState.gradientSelectedId) || nextColors[0];
+	return _objectSpread2(_objectSpread2({}, nextState), {}, {
+		gradientColors: nextColors,
+		gradientSelectedId: (selectedPoint === null || selectedPoint === void 0 ? void 0 : selectedPoint.id) || "",
+		hsva: (selectedPoint === null || selectedPoint === void 0 ? void 0 : selectedPoint.hsva) || nextState.hsva
+	});
+};
+var GradientThumb = /* @__PURE__ */ defineComponent({
+	name: "GradientThumb",
 	props: {
-		color: {
+		point: {
 			type: Object,
 			required: true
 		},
-		alpha: {
-			type: Number,
+		prefixCls: {
+			type: String,
 			required: true
 		},
-		colorString: String,
+		active: Boolean,
+		disabled: Boolean,
+		onSelect: Function,
+		onMove: Function,
+		onRemove: Function
+	},
+	setup(props) {
+		const thumbRef = ref();
+		const shouldIgnoreClick = ref(false);
+		useDraggable(thumbRef, {
+			axis: "x",
+			buttons: [0, -1],
+			disabled: computed(() => props.disabled),
+			preventDefault: true,
+			stopPropagation: true,
+			onStart: () => {
+				var _props$onSelect;
+				(_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props);
+				shouldIgnoreClick.value = false;
+			},
+			onMove: (_, event) => {
+				var _props$onMove;
+				shouldIgnoreClick.value = true;
+				(_props$onMove = props.onMove) === null || _props$onMove === void 0 || _props$onMove.call(props, event.clientX);
+			},
+			onEnd: () => {
+				window.setTimeout(() => {
+					shouldIgnoreClick.value = false;
+				}, 0);
+			}
+		});
+		const handleClick = (event) => {
+			var _props$onSelect2;
+			event.stopPropagation();
+			if (shouldIgnoreClick.value) return;
+			(_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 || _props$onSelect2.call(props);
+		};
+		const handleKeyDown = (event) => {
+			if (event.key === "Delete" || event.key === "Backspace") {
+				var _props$onRemove;
+				(_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 || _props$onRemove.call(props);
+			}
+		};
+		return () => createVNode("button", {
+			"ref": thumbRef,
+			"type": "button",
+			"class": {
+				[`${props.prefixCls}-gradient-thumb`]: true,
+				[`${props.prefixCls}-gradient-thumb-active`]: props.active
+			},
+			"style": { left: `${props.point.left}%` },
+			"onClick": handleClick,
+			"onKeydown": handleKeyDown
+		}, [createVNode("span", {
+			"class": `${props.prefixCls}-gradient-thumb-inner`,
+			"style": { backgroundColor: formatColor(props.point.hsva, "CSS", true) }
+		}, null)]);
+	}
+});
+var panel_default = /* @__PURE__ */ defineComponent({
+	name: "Panel",
+	props: {
+		value: {
+			type: String,
+			default: ""
+		},
+		colorModes: {
+			type: Array,
+			default: () => ["monochrome"]
+		},
+		enableMultipleGradient: {
+			type: Boolean,
+			default: true
+		},
 		disabled: Boolean,
-		disabledAlpha: Boolean,
-		showHistory: Boolean,
-		showPreset: Boolean,
-		format: String,
-		historyColors: Array,
-		presetColors: Array,
-		onAlphaChange: Function,
-		onHsvChange: Function
+		enableAlpha: Boolean,
+		showPrimaryColorPreview: {
+			type: Boolean,
+			default: true
+		},
+		format: {
+			type: String,
+			default: "RGB"
+		},
+		recentColors: {
+			type: [Array, Boolean],
+			default: () => []
+		},
+		swatchColors: {
+			type: Array,
+			default: () => colors
+		},
+		onChange: Function,
+		onRecentColorsChange: Function,
+		onPaletteBarChange: Function
 	},
 	setup(props) {
-		const { t } = useI18n();
 		const prefixCls = getPrefixCls("color-picker");
-		const hsv = computed(() => props.color.hsv);
-		const [format, setFormat] = useState(props.format || "hex");
-		const onChange = (value) => {
-			setFormat(value);
-		};
-		const onHexInputChange = (value) => {
-			var _props$onHsvChange;
-			const _rgb = hexToRgb(value) || {
-				r: 255,
-				g: 0,
-				b: 0
-			};
-			const _hsv = rgbToHsv(_rgb.r, _rgb.g, _rgb.b);
-			(_props$onHsvChange = props.onHsvChange) === null || _props$onHsvChange === void 0 || _props$onHsvChange.call(props, _hsv);
-		};
-		const renderInput = () => {
-			const commonProps = {
-				color: props.color,
-				alpha: props.alpha,
-				disabled: props.disabled,
-				disabledAlpha: props.disabledAlpha,
-				onHsvChange: props.onHsvChange,
-				onAlphaChange: props.onAlphaChange
+		const sliderRef = ref();
+		const gradientShellRef = ref();
+		const colorState = ref(parseColorState(props.value, props.colorModes));
+		const selectedFormat = ref(normalizeFormat(props.format, props.enableAlpha));
+		const formatDrafts = ref([]);
+		const activeHsva = computed(() => {
+			var _getActiveGradientPoi;
+			return ((_getActiveGradientPoi = getActiveGradientPoint(colorState.value)) === null || _getActiveGradientPoi === void 0 ? void 0 : _getActiveGradientPoi.hsva) || colorState.value.hsva;
+		});
+		const syncDrafts = () => {
+			formatDrafts.value = getFormatInputs(activeHsva.value, selectedFormat.value, props.enableAlpha);
+		};
+		watch(() => [props.value, props.colorModes], () => {
+			colorState.value = reconcileGradientState(colorState.value, parseColorState(props.value, props.colorModes));
+			syncDrafts();
+		}, { deep: true });
+		watch(() => [props.format, props.enableAlpha], () => {
+			selectedFormat.value = normalizeFormat(props.format, props.enableAlpha);
+			syncDrafts();
+		});
+		syncDrafts();
+		const formatOptions = computed(() => {
+			const base = [
+				{
+					value: "HEX",
+					label: "HEX"
+				},
+				{
+					value: "RGB",
+					label: "RGB"
+				},
+				{
+					value: "HSL",
+					label: "HSL"
+				},
+				{
+					value: "HSV",
+					label: "HSV"
+				},
+				{
+					value: "CMYK",
+					label: "CMYK"
+				},
+				{
+					value: "CSS",
+					label: "CSS"
+				}
+			];
+			if (!props.enableAlpha) return base;
+			return [
+				{
+					value: "HEX8",
+					label: "HEX8"
+				},
+				{
+					value: "RGBA",
+					label: "RGBA"
+				},
+				{
+					value: "HSLA",
+					label: "HSLA"
+				},
+				{
+					value: "HSVA",
+					label: "HSVA"
+				},
+				...base
+			];
+		});
+		const previewColor = computed(() => getColorBackground(colorState.value));
+		const colorModel = computed(() => {
+			const colorObject = getColorObject(colorState.value);
+			return {
+				hsv: {
+					h: activeHsva.value.h,
+					s: activeHsva.value.s,
+					v: activeHsva.value.v
+				},
+				rgb: {
+					r: colorObject.red,
+					g: colorObject.green,
+					b: colorObject.blue
+				},
+				hex: colorObject.hex.replace("#", "")
 			};
-			if (format.value === "rgb") return createVNode(input_rgb_default, commonProps, null);
-			return createVNode(input_hex_default, commonProps, null);
+		});
+		const recentColorList = computed(() => {
+			if (!Array.isArray(props.recentColors)) return void 0;
+			return props.colorModes.length === 1 && props.colorModes[0] === "linear-gradient" ? props.recentColors.filter((item) => item.startsWith("linear-gradient(")) : props.recentColors;
+		});
+		const swatchColorList = computed(() => {
+			if (!Array.isArray(props.swatchColors)) return void 0;
+			return props.colorModes.length === 1 && props.colorModes[0] === "linear-gradient" ? props.swatchColors.filter((item) => item.startsWith("linear-gradient(")) : props.swatchColors;
+		});
+		const emitStateChange = (nextState, trigger, notifyPaletteBar) => {
+			var _props$onChange;
+			colorState.value = nextState;
+			syncDrafts();
+			(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, formatColorState(nextState, selectedFormat.value, props.enableAlpha), trigger);
+			if (notifyPaletteBar) {
+				var _props$onPaletteBarCh;
+				(_props$onPaletteBarCh = props.onPaletteBarChange) === null || _props$onPaletteBarCh === void 0 || _props$onPaletteBarCh.call(props, { color: getColorObject(nextState) });
+			}
+		};
+		const handleHsvaChange = (nextHsva, trigger, notifyPaletteBar) => {
+			emitStateChange(setActiveColorHsva(colorState.value, nextHsva), trigger, notifyPaletteBar);
+		};
+		const handleModeChange = (mode) => {
+			if (props.disabled || typeof mode !== "string" || mode === colorState.value.mode) return;
+			if (mode === "linear-gradient") {
+				emitStateChange(getDefaultGradientState(formatColor(activeHsva.value, "CSS", true)), "input");
+				return;
+			}
+			emitStateChange(_objectSpread2(_objectSpread2({}, getDefaultColorState()), {}, {
+				mode: "monochrome",
+				hsva: activeHsva.value
+			}), "input");
+		};
+		const updateDraft = (index, value) => {
+			const nextDrafts = [...formatDrafts.value];
+			nextDrafts[index] = value;
+			formatDrafts.value = nextDrafts;
+		};
+		const commitDrafts = () => {
+			handleHsvaChange(parseFormatInputValues(formatDrafts.value, selectedFormat.value, props.enableAlpha), "input");
+		};
+		const getThumbTrackRect = () => {
+			const slider = sliderRef.value || gradientShellRef.value;
+			return slider === null || slider === void 0 ? void 0 : slider.getBoundingClientRect();
+		};
+		const updateThumbLeft = (pointId, clientX) => {
+			const rect = getThumbTrackRect();
+			if (!rect) return;
+			const nextLeft = clampPercent((clientX - rect.left) / rect.width * 100);
+			const gradientColors = colorState.value.gradientColors.map((point) => point.id === pointId ? _objectSpread2(_objectSpread2({}, point), {}, { left: round(nextLeft, 2) }) : point);
+			emitStateChange(setGradientColors(colorState.value, gradientColors), "input");
+		};
+		const handleGradientBarClick = (event) => {
+			if (props.disabled || !props.enableMultipleGradient || colorState.value.mode !== "linear-gradient") return;
+			if (event.target !== sliderRef.value && event.target !== gradientShellRef.value) return;
+			const slider = sliderRef.value || gradientShellRef.value;
+			if (!slider) return;
+			const rect = slider.getBoundingClientRect();
+			const left = clampPercent((event.clientX - rect.left) / rect.width * 100);
+			emitStateChange(addGradientColor(colorState.value, left), "input");
 		};
-		const renderColorBlock = (color) => {
-			return createVNode("div", {
-				"key": color,
+		const handleGradientBarKeyDown = (event) => {
+			if ((event.key === "Enter" || event.key === " ") && !props.disabled && props.enableMultipleGradient) {
+				event.preventDefault();
+				emitStateChange(addGradientColor(colorState.value, 50), "input");
+			}
+		};
+		const handleThumbRemove = (pointId) => {
+			if (colorState.value.gradientColors.length <= 2) return;
+			emitStateChange(removeGradientColor(colorState.value, pointId), "input");
+		};
+		const addRecentColor = () => {
+			var _props$onRecentColors;
+			if (props.recentColors === null || props.recentColors === false) return;
+			const currentValue = formatColorState(colorState.value, selectedFormat.value, props.enableAlpha);
+			const next = [...recentColorList.value || []];
+			const index = next.indexOf(currentValue);
+			if (index !== -1) next.splice(index, 1);
+			next.unshift(currentValue);
+			if (next.length > 8) next.length = 8;
+			(_props$onRecentColors = props.onRecentColorsChange) === null || _props$onRecentColors === void 0 || _props$onRecentColors.call(props, next);
+		};
+		const renderColorBlock = (value, trigger) => {
+			const style = value.startsWith("linear-gradient(") ? { backgroundImage: value } : { backgroundColor: value };
+			return createVNode("button", {
+				"key": value,
+				"type": "button",
 				"class": `${prefixCls}-color-block`,
-				"style": { backgroundColor: color },
-				"onClick": () => onHexInputChange(color)
+				"aria-label": `选择颜色 ${value}`,
+				"onClick": () => emitStateChange(parseColorState(value, props.colorModes), trigger)
 			}, [createVNode("div", {
 				"class": `${prefixCls}-block`,
-				"style": { backgroundColor: color }
+				"style": style
 			}, null)]);
 		};
-		const renderColorSection = (text, colors) => createVNode("div", { "class": `${prefixCls}-colors-section` }, [createVNode("div", { "class": `${prefixCls}-colors-text` }, [text]), createVNode("div", { "class": `${prefixCls}-colors-wrapper` }, [(colors === null || colors === void 0 ? void 0 : colors.length) ? createVNode("div", { "class": `${prefixCls}-colors-list` }, [colors.map(renderColorBlock)]) : createVNode("span", { "class": `${prefixCls}-colors-empty` }, [t("colorPicker.empty")])])]);
+		const renderColorSection = (text, values, trigger) => createVNode("div", { "class": `${prefixCls}-colors-section` }, [createVNode("div", { "class": `${prefixCls}-colors-header` }, [createVNode("div", { "class": `${prefixCls}-colors-text` }, [text]), trigger === "recent" && values && createVNode("button", {
+			"type": "button",
+			"class": `${prefixCls}-colors-action`,
+			"onClick": addRecentColor
+		}, [createTextVNode("添加当前颜色")])]), createVNode("div", { "class": `${prefixCls}-colors-wrapper` }, [(values === null || values === void 0 ? void 0 : values.length) ? createVNode("div", { "class": `${prefixCls}-colors-list` }, [values.map((value) => renderColorBlock(value, trigger))]) : createVNode("span", { "class": `${prefixCls}-colors-empty` }, [createTextVNode("暂无颜色")])])]);
 		const renderColorSec = () => {
-			if (props.showHistory || props.showPreset) return createVNode("div", { "class": `${prefixCls}-panel-colors` }, [props.showHistory && renderColorSection(t("colorPicker.history"), props.historyColors), props.showPreset && renderColorSection(t("colorPicker.preset"), props.presetColors)]);
+			var _swatchColorList$valu;
+			const showRecent = Boolean(recentColorList.value);
+			const showSwatches = Boolean((_swatchColorList$valu = swatchColorList.value) === null || _swatchColorList$valu === void 0 ? void 0 : _swatchColorList$valu.length);
+			if (showRecent || showSwatches) return createVNode("div", { "class": `${prefixCls}-panel-colors` }, [showRecent && renderColorSection("最近使用", recentColorList.value, "recent"), showSwatches && renderColorSection("系统色板", swatchColorList.value, "preset")]);
 			return null;
 		};
+		const renderGradientPanel = () => {
+			if (colorState.value.mode !== "linear-gradient") return null;
+			return createVNode("div", { "class": `${prefixCls}-gradient-panel` }, [
+				createVNode("div", {
+					"ref": gradientShellRef,
+					"class": `${prefixCls}-gradient-bar-shell`
+				}, [createVNode("button", {
+					"ref": sliderRef,
+					"type": "button",
+					"class": `${prefixCls}-gradient-bar`,
+					"disabled": props.disabled,
+					"style": { backgroundImage: getGradientThumbBackground(colorState.value.gradientColors) },
+					"onClick": handleGradientBarClick,
+					"onKeydown": handleGradientBarKeyDown
+				}, null), colorState.value.gradientColors.map((point) => createVNode(GradientThumb, {
+					"key": point.id,
+					"point": point,
+					"prefixCls": prefixCls,
+					"active": point.id === colorState.value.gradientSelectedId,
+					"disabled": props.disabled,
+					"onSelect": () => {
+						if (colorState.value.gradientSelectedId === point.id) return;
+						emitStateChange(setGradientSelectedPoint(colorState.value, point.id), "input");
+					},
+					"onMove": (clientX) => updateThumbLeft(point.id, clientX),
+					"onRemove": () => handleThumbRemove(point.id)
+				}, null))]),
+				createVNode("div", { "class": `${prefixCls}-gradient-meta` }, [createVNode("span", { "class": `${prefixCls}-gradient-label` }, [createTextVNode("角度")]), createVNode(InputNumber, {
+					"class": `${prefixCls}-gradient-degree`,
+					"size": "mini",
+					"min": 0,
+					"max": 360,
+					"hideButton": true,
+					"disabled": props.disabled,
+					"modelValue": colorState.value.gradientDegree,
+					"onChange": (value = 0) => emitStateChange(setGradientDegree(colorState.value, value), "input")
+				}, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}-gradient-preview`,
+					"style": { backgroundImage: getLinearGradientString(colorState.value) }
+				}, null)
+			]);
+		};
+		const renderFormatInputs = () => {
+			let _slot;
+			return createVNode(input_group_default, { "class": `${prefixCls}-input-group` }, _isSlot(_slot = formatDrafts.value.map((draft, index) => createVNode(Input, {
+				"key": `${selectedFormat.value}-${index}`,
+				"class": `${prefixCls}-format-input`,
+				"size": "mini",
+				"disabled": props.disabled,
+				"modelValue": draft,
+				"onInput": (value) => updateDraft(index, value),
+				"onChange": commitDrafts,
+				"onPressEnter": commitDrafts
+			}, null))) ? _slot : { default: () => [_slot] });
+		};
 		return () => createVNode("div", { "class": {
 			[`${prefixCls}-panel`]: true,
 			[`${prefixCls}-panel-disabled`]: props.disabled
 		} }, [
+			props.colorModes.length > 1 && createVNode("div", { "class": `${prefixCls}-panel-head` }, [createVNode(Radio.Group, {
+				"type": "button",
+				"size": "small",
+				"modelValue": colorState.value.mode,
+				"options": MODE_OPTIONS.map((item) => ({
+					label: item.label,
+					value: item.value
+				})),
+				"disabled": props.disabled,
+				"onChange": handleModeChange
+			}, null)]),
+			renderGradientPanel(),
 			createVNode(palette_default, {
-				"color": props.color,
-				"onChange": (s, v) => {
-					var _props$onHsvChange2;
-					return (_props$onHsvChange2 = props.onHsvChange) === null || _props$onHsvChange2 === void 0 ? void 0 : _props$onHsvChange2.call(props, {
-						h: hsv.value.h,
-						s,
-						v
-					});
-				}
+				"color": colorModel.value,
+				"onChange": (s, v) => handleHsvaChange(_objectSpread2(_objectSpread2({}, activeHsva.value), {}, {
+					s,
+					v
+				}), "palette-saturation-brightness")
 			}, null),
 			createVNode("div", { "class": `${prefixCls}-panel-control` }, [createVNode("div", { "class": `${prefixCls}-control-wrapper` }, [createVNode("div", null, [createVNode(control_bar_default, {
 				"type": "hue",
-				"x": hsv.value.h,
-				"color": props.color,
-				"colorString": props.colorString,
+				"x": activeHsva.value.h,
+				"color": colorModel.value,
+				"colorString": formatColor(activeHsva.value, "CSS", true),
 				"onChange": (h) => {
-					var _props$onHsvChange3;
-					return (_props$onHsvChange3 = props.onHsvChange) === null || _props$onHsvChange3 === void 0 ? void 0 : _props$onHsvChange3.call(props, {
-						h,
-						s: hsv.value.s,
-						v: hsv.value.v
-					});
+					handleHsvaChange(_objectSpread2(_objectSpread2({}, activeHsva.value), {}, { h }), "palette-hue-bar", true);
 				}
-			}, null), !props.disabledAlpha && createVNode(control_bar_default, {
+			}, null), props.enableAlpha && createVNode(control_bar_default, {
 				"type": "alpha",
-				"x": props.alpha,
-				"color": props.color,
-				"colorString": props.colorString,
-				"onChange": props.onAlphaChange
-			}, null)]), createVNode("div", {
+				"x": activeHsva.value.a,
+				"color": colorModel.value,
+				"colorString": formatColor(activeHsva.value, "CSS", true),
+				"onChange": (alpha) => {
+					handleHsvaChange(_objectSpread2(_objectSpread2({}, activeHsva.value), {}, { a: alpha }), "palette-alpha-bar", true);
+				}
+			}, null)]), props.showPrimaryColorPreview && createVNode("div", {
 				"class": `${prefixCls}-preview`,
-				"style": { backgroundColor: props.colorString }
+				"style": colorState.value.mode === "linear-gradient" ? { backgroundImage: previewColor.value } : { backgroundColor: previewColor.value }
 			}, null)]), createVNode("div", { "class": `${prefixCls}-input-wrapper` }, [createVNode(Select, {
 				"class": `${prefixCls}-select`,
 				"size": "mini",
 				"trigger-props": { class: `${prefixCls}-select-popup` },
-				"options": [{
-					value: "hex",
-					label: "Hex"
-				}, {
-					value: "rgb",
-					label: "RGB"
-				}],
-				"modelValue": format.value,
-				"onChange": onChange
-			}, null), createVNode("div", { "class": `${prefixCls}-group-wrapper` }, [renderInput()])])]),
+				"options": formatOptions.value,
+				"modelValue": selectedFormat.value,
+				"disabled": props.disabled,
+				"onChange": (value) => {
+					if (typeof value !== "string") return;
+					selectedFormat.value = value;
+					syncDrafts();
+				}
+			}, null), createVNode("div", { "class": `${prefixCls}-group-wrapper` }, [renderFormatInputs()])])]),
 			renderColorSec()
 		]);
 	}

package/es/color-picker/style/index.css

@@ -101,6 +101,75 @@
   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;
@@ -173,11 +242,25 @@
 .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);
@@ -263,13 +346,21 @@
   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;
 }