@sdata/web-vue 1.7.0 → 1.8.0

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

@@ -1,154 +1,198 @@
+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 Input from "../input/index.js";
 import Trigger from "../trigger/index.js";
-import { formatInputToHSVA, hsvToRgb, rgbToHex, rgbaToHex } from "../_utils/color.js";
 import { colors } from "./colors.js";
+import { formatColorState, getColorBackground, getColorObject, normalizeFormat, parseColorState } from "./utils.js";
 import panel_default from "./panel.js";
-import { computed, createVNode, defineComponent, mergeProps, watch } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, ref } 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
+		},
+		value: String,
 		modelValue: String,
-		defaultValue: { type: String },
-		format: { type: String },
+		defaultValue: {
+			type: String,
+			default: ""
+		},
+		format: {
+			type: String,
+			default: "RGB"
+		},
 		size: {
 			type: String,
 			default: "medium"
 		},
-		showText: {
+		enableAlpha: Boolean,
+		showPrimaryColorPreview: {
 			type: Boolean,
-			default: false
+			default: true
 		},
-		showHistory: {
-			type: Boolean,
-			default: false
+		inputProps: { type: Object },
+		recentColors: {
+			type: [Array, Boolean],
+			default: void 0
 		},
-		showPreset: {
-			type: Boolean,
-			default: false
+		defaultRecentColors: {
+			type: [Array, Boolean],
+			default: () => []
 		},
-		disabled: {
-			type: Boolean,
-			default: false
+		swatchColors: {
+			type: Array,
+			default: void 0
 		},
-		disabledAlpha: {
+		disabled: {
 			type: Boolean,
 			default: false
 		},
-		hideTrigger: { type: Boolean },
+		hideTrigger: Boolean,
 		triggerProps: { type: Object },
 		historyColors: { type: Array },
-		presetColors: {
-			type: Array,
-			default: () => colors
-		}
+		presetColors: { type: Array },
+		showText: Boolean,
+		showHistory: Boolean,
+		showPreset: Boolean,
+		disabledAlpha: Boolean,
+		selectInputProps: { type: Object }
 	},
 	emits: {
 		"update:modelValue": (_value) => true,
-		"change": (_value) => true,
-		"popup-visible-change": (_visible, _value) => true
+		"update:value": (_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, slots }) {
 		const prefixCls = getPrefixCls("color-picker");
-		const mergeValue = computed(() => {
-			var _props$modelValue;
-			return (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : props.defaultValue;
-		});
-		const formatInput = computed(() => {
-			return formatInputToHSVA(mergeValue.value || "");
+		const innerValue = ref(props.defaultValue);
+		const innerRecentColors = ref(Array.isArray(props.defaultRecentColors) ? props.defaultRecentColors : []);
+		const mergedValue = computed(() => {
+			var _ref, _props$modelValue;
+			return (_ref = (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : props.value) !== null && _ref !== void 0 ? _ref : innerValue.value;
 		});
-		const [alpha, setAlpha] = useState(formatInput.value.a);
-		const [hsv, setHsv] = useState({
-			h: formatInput.value.h,
-			s: formatInput.value.s,
-			v: formatInput.value.v
+		const mergedEnableAlpha = computed(() => props.enableAlpha || !props.disabledAlpha);
+		const normalizedFormat = computed(() => normalizeFormat(props.format, mergedEnableAlpha.value));
+		const mergedRecentColors = computed(() => {
+			if (props.showHistory && props.historyColors) return props.historyColors;
+			if (props.recentColors === null || props.recentColors === false) return props.recentColors;
+			if (Array.isArray(props.recentColors)) return props.recentColors;
+			return innerRecentColors.value;
 		});
-		watch(() => formatInput.value, (value) => {
-			if (mergeValue.value !== formatValue.value) {
-				setAlpha(value.a);
-				setHsv({
-					h: value.h,
-					s: value.s,
-					v: value.v
-				});
-			}
-		});
-		const color = computed(() => {
-			const rgb = hsvToRgb(hsv.value.h, hsv.value.s, hsv.value.v);
-			const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
-			return {
-				hsv: hsv.value,
-				rgb,
-				hex
-			};
+		const mergedSwatchColors = computed(() => {
+			var _props$presetColors;
+			if (props.showPreset) return (_props$presetColors = props.presetColors) !== null && _props$presetColors !== void 0 ? _props$presetColors : colors;
+			if (props.swatchColors === null) return null;
+			if (Array.isArray(props.swatchColors)) return props.swatchColors;
+			if (props.swatchColors === void 0 && props.showPreset === false) return null;
+			return colors;
 		});
-		const colorString = computed(() => {
-			const { r, g, b } = color.value.rgb;
-			return `rgba(${r}, ${g}, ${b}, ${alpha.value.toFixed(2)})`;
+		const colorState = computed(() => parseColorState(mergedValue.value, props.colorModes));
+		const triggerInputValue = computed(() => {
+			if (!mergedValue.value) return "";
+			return formatColorState(colorState.value, normalizedFormat.value, mergedEnableAlpha.value);
 		});
-		const formatValue = computed(() => {
-			const { r, g, b } = color.value.rgb;
-			if (props.format === "rgb") return alpha.value < 1 && !props.disabledAlpha ? `rgba(${r}, ${g}, ${b}, ${alpha.value.toFixed(2)})` : `rgb(${r}, ${g}, ${b})`;
-			return alpha.value < 1 && !props.disabledAlpha ? `#${rgbaToHex(r, g, b, alpha.value)}` : `#${rgbToHex(r, g, b)}`;
+		const previewStyle = computed(() => {
+			const background = getColorBackground(colorState.value);
+			return colorState.value.mode === "linear-gradient" ? { backgroundImage: background } : { backgroundColor: background };
 		});
-		watch(formatValue, (value) => {
+		const syncValue = (value) => {
+			if (props.modelValue === void 0 && props.value === void 0) innerValue.value = value;
 			emit("update:modelValue", value);
-			emit("change", value);
-		});
-		const onHsvChange = (_value) => {
-			!props.disabled && setHsv(_value);
+			emit("update:value", value);
+		};
+		const syncRecentColors = (value) => {
+			if (props.recentColors === void 0) innerRecentColors.value = value;
+			emit("recent-colors-change", value);
 		};
-		const onAlphaChange = (_value) => {
-			!props.disabled && setAlpha(_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;
+			}
+			handleColorChange(formatColorState(parseColorState(value, props.colorModes), normalizedFormat.value, mergedEnableAlpha.value), "input");
 		};
 		const onPopupVisibleChange = (visible) => {
-			emit("popup-visible-change", visible, formatValue.value);
+			emit("popup-visible-change", visible, triggerInputValue.value);
 		};
-		const renderInput = () => {
+		const mergedTriggerProps = computed(() => _objectSpread2({
+			trigger: "click",
+			position: "bl",
+			disabled: props.disabled,
+			popupOffset: 4,
+			animationName: "slide-dynamic-origin"
+		}, props.triggerProps));
+		const renderTriggerInput = () => {
 			return createVNode("div", { "class": {
 				[prefixCls]: true,
 				[`${prefixCls}-size-${props.size}`]: props.size,
-				[`${prefixCls}-disabled`]: props.disabled
-			} }, [
-				createVNode("div", {
-					"class": `${prefixCls}-preview`,
-					"style": { backgroundColor: formatValue.value }
-				}, null),
-				props.showText && createVNode("div", { "class": `${prefixCls}-value` }, [formatValue.value]),
-				createVNode("input", {
-					"class": `${prefixCls}-input`,
-					"value": formatValue.value,
-					"disabled": props.disabled
-				}, null)
-			]);
+				[`${prefixCls}-disabled`]: props.disabled,
+				[`${prefixCls}-borderless`]: props.borderless
+			} }, [createVNode(Input, mergeProps({
+				"class": `${prefixCls}-trigger-input`,
+				"size": props.size === "mini" ? "mini" : props.size,
+				"allowClear": props.clearable,
+				"disabled": props.disabled,
+				"modelValue": triggerInputValue.value,
+				"onChange": handleTriggerInputChange,
+				"onClear": handleClear
+			}, props.inputProps), { prefix: () => createVNode("div", {
+				"class": `${prefixCls}-preview`,
+				"style": previewStyle.value
+			}, null) })]);
 		};
 		const renderPanel = () => {
 			return createVNode(panel_default, {
-				"color": color.value,
-				"alpha": alpha.value,
-				"colorString": colorString.value,
-				"historyColors": props.historyColors,
-				"presetColors": props.presetColors,
-				"showHistory": props.showHistory,
-				"showPreset": props.showPreset,
+				"value": mergedValue.value,
+				"colorModes": props.colorModes,
+				"enableMultipleGradient": props.enableMultipleGradient,
+				"recentColors": mergedRecentColors.value,
+				"swatchColors": mergedSwatchColors.value,
 				"disabled": props.disabled,
-				"disabledAlpha": props.disabledAlpha,
-				"format": props.format,
-				"onHsvChange": onHsvChange,
-				"onAlphaChange": onAlphaChange
+				"enableAlpha": mergedEnableAlpha.value,
+				"format": normalizedFormat.value,
+				"showPrimaryColorPreview": props.showPrimaryColorPreview,
+				"onChange": handleColorChange,
+				"onRecentColorsChange": syncRecentColors,
+				"onPaletteBarChange": (context) => {
+					emit("palette-bar-change", context);
+				}
 			}, null);
 		};
 		return () => {
-			return props.hideTrigger ? renderPanel() : createVNode(Trigger, mergeProps({
-				"trigger": "click",
-				"position": "bl",
-				"animationName": "slide-dynamic-origin",
-				"popupOffset": 4,
-				"disabled": props.disabled,
-				"onPopupVisibleChange": onPopupVisibleChange
-			}, props.triggerProps), {
-				default: () => [slots.default ? slots.default() : renderInput()],
+			return props.hideTrigger ? renderPanel() : createVNode(Trigger, mergeProps({ "onPopupVisibleChange": onPopupVisibleChange }, mergedTriggerProps.value), {
+				default: () => [slots.default ? slots.default() : renderTriggerInput()],
 				content: renderPanel
 			});
 		};