@sdata/web-vue 3.30.0 → 4.1.0

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

@@ -0,0 +1,453 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.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 InputNumber from "../input-number/index.js";
+import Select from "../select/index.js";
+import control_bar_default from "./control-bar.js";
+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 gradient_thumb_default from "./gradient-thumb.js";
+import palette_default from "./palette.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+//#region components/color-picker/panel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "onClick"];
+var _hoisted_2 = ["disabled"];
+var panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Panel" }), {}, {
+	__name: "panel",
+	props: {
+		value: {
+			type: String,
+			default: ""
+		},
+		colorModes: {
+			type: Array,
+			default: () => ["monochrome"]
+		},
+		enableMultipleGradient: {
+			type: Boolean,
+			default: true
+		},
+		disabled: Boolean,
+		enableAlpha: Boolean,
+		showPrimaryColorPreview: {
+			type: Boolean,
+			default: true
+		},
+		format: {
+			type: String,
+			default: "RGB"
+		},
+		recentColors: {
+			type: [Array, Boolean],
+			default: () => []
+		},
+		swatchColors: {
+			type: Array,
+			default: () => []
+		},
+		onChange: Function,
+		onRecentColorsChange: Function,
+		onPaletteBarChange: Function
+	},
+	setup(__props) {
+		const modeOptions = [{
+			value: "monochrome",
+			label: "单色"
+		}, {
+			value: "linear-gradient",
+			label: "渐变"
+		}];
+		const RadioGroup = Radio.Group;
+		const clampPercent = (value) => Math.min(100, Math.max(0, value));
+		const getGradientPointComparableColor = (point) => formatColor(point.hsva, "CSS", true);
+		const matchGradientPoint = (previousPoints, nextPoint, usedIds) => {
+			const availablePoints = previousPoints.filter((point) => !usedIds.has(point.id));
+			if (!availablePoints.length) return void 0;
+			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);
+		};
+		const 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
+			});
+		};
+		const props = __props;
+		const [DefineColorSection, ReuseColorSection] = createReusableTemplate();
+		const { t } = useI18n();
+		const prefixCls = getPrefixCls("color-picker");
+		const selectTriggerProps = { class: `${prefixCls}-select-popup` };
+		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"
+				}
+			];
+			return props.enableAlpha ? [
+				{
+					value: "HEX8",
+					label: "HEX8"
+				},
+				{
+					value: "RGBA",
+					label: "RGBA"
+				},
+				{
+					value: "HSLA",
+					label: "HSLA"
+				},
+				{
+					value: "HSVA",
+					label: "HSVA"
+				},
+				...base
+			] : base;
+		});
+		const previewColor = computed(() => getColorBackground(colorState.value));
+		const previewStyle = computed(() => colorState.value.mode === "linear-gradient" ? { backgroundImage: previewColor.value } : { backgroundColor: previewColor.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("#", "")
+			};
+		});
+		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, _props$onPaletteBarCh;
+			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) (_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 = () => {
+			var _ref;
+			return (_ref = sliderRef.value || gradientShellRef.value) === null || _ref === void 0 ? void 0 : _ref.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 handleGradientBarKeyDown = (event) => {
+			if ((event.key === "Enter" || event.key === " ") && !props.disabled && props.enableMultipleGradient) {
+				event.preventDefault();
+				emitStateChange(addGradientColor(colorState.value, 50), "input");
+			}
+		};
+		const handleThumbSelect = (pointId) => {
+			if (colorState.value.gradientSelectedId !== pointId) emitStateChange(setGradientSelectedPoint(colorState.value, pointId), "input");
+		};
+		const handleThumbRemove = (pointId) => {
+			if (colorState.value.gradientColors.length > 2) emitStateChange(removeGradientColor(colorState.value, pointId), "input");
+		};
+		const handleDegreeChange = (value) => {
+			if (typeof value === "number") emitStateChange(setGradientDegree(colorState.value, value), "input");
+		};
+		const handlePaletteChange = (s, v) => handleHsvaChange(_objectSpread2(_objectSpread2({}, activeHsva.value), {}, {
+			s,
+			v
+		}), "palette-saturation-brightness");
+		const handleHueChange = (h) => handleHsvaChange(_objectSpread2(_objectSpread2({}, activeHsva.value), {}, { h }), "palette-hue-bar", true);
+		const handleAlphaChange = (a) => handleHsvaChange(_objectSpread2(_objectSpread2({}, activeHsva.value), {}, { a }), "palette-alpha-bar", true);
+		const handleFormatChange = (value) => {
+			if (typeof value !== "string") return;
+			selectedFormat.value = value;
+			syncDrafts();
+		};
+		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 getColorBlockStyle = (value) => value.startsWith("linear-gradient(") ? { backgroundImage: value } : { backgroundColor: value };
+		const selectColorBlock = (value, trigger) => emitStateChange(parseColorState(value, props.colorModes), trigger);
+		return (_ctx, _cache) => {
+			var _swatchColorList$valu, _swatchColorList$valu2;
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineColorSection), null, {
+				default: withCtx(({ text, values, trigger }) => [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-colors-section`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-colors-header`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-colors-text`) }, toDisplayString(text), 3), trigger === "recent" && values ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: normalizeClass(`${unref(prefixCls)}-colors-action`),
+					onClick: addRecentColor
+				}, " 添加当前颜色 ", 2)) : createCommentVNode("", true)], 2), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-colors-wrapper`) }, [(values === null || values === void 0 ? void 0 : values.length) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-colors-list`)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(values, (value) => {
+					return openBlock(), createElementBlock("button", {
+						key: value,
+						type: "button",
+						class: normalizeClass(`${unref(prefixCls)}-color-block`),
+						"aria-label": unref(t)("a11y.selectColor", value),
+						onClick: ($event) => selectColorBlock(value, trigger)
+					}, [createElementVNode("div", {
+						class: normalizeClass(`${unref(prefixCls)}-block`),
+						style: normalizeStyle(getColorBlockStyle(value))
+					}, null, 6)], 10, _hoisted_1);
+				}), 128))], 2)) : (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-colors-empty`)
+				}, "暂无颜色", 2))], 2)], 2)]),
+				_: 1
+			}), createElementVNode("div", { class: normalizeClass([`${unref(prefixCls)}-panel`, { [`${unref(prefixCls)}-panel-disabled`]: props.disabled }]) }, [
+				props.colorModes.length > 1 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-panel-head`)
+				}, [createVNode(unref(RadioGroup), {
+					type: "button",
+					size: "small",
+					"model-value": colorState.value.mode,
+					options: modeOptions,
+					disabled: props.disabled,
+					onChange: handleModeChange
+				}, null, 8, ["model-value", "disabled"])], 2)) : createCommentVNode("", true),
+				colorState.value.mode === "linear-gradient" ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-gradient-panel`)
+				}, [
+					createElementVNode("div", {
+						ref_key: "gradientShellRef",
+						ref: gradientShellRef,
+						class: normalizeClass(`${unref(prefixCls)}-gradient-bar-shell`)
+					}, [createElementVNode("button", {
+						ref_key: "sliderRef",
+						ref: sliderRef,
+						type: "button",
+						class: normalizeClass(`${unref(prefixCls)}-gradient-bar`),
+						disabled: props.disabled,
+						style: normalizeStyle({ backgroundImage: unref(getGradientThumbBackground)(colorState.value.gradientColors) }),
+						onClick: handleGradientBarClick,
+						onKeydown: handleGradientBarKeyDown
+					}, null, 46, _hoisted_2), (openBlock(true), createElementBlock(Fragment, null, renderList(colorState.value.gradientColors, (point) => {
+						return openBlock(), createBlock(gradient_thumb_default, {
+							key: point.id,
+							point,
+							"prefix-cls": unref(prefixCls),
+							active: point.id === colorState.value.gradientSelectedId,
+							disabled: props.disabled,
+							"on-select": () => handleThumbSelect(point.id),
+							"on-move": (clientX) => updateThumbLeft(point.id, clientX),
+							"on-remove": () => handleThumbRemove(point.id)
+						}, null, 8, [
+							"point",
+							"prefix-cls",
+							"active",
+							"disabled",
+							"on-select",
+							"on-move",
+							"on-remove"
+						]);
+					}), 128))], 2),
+					createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-gradient-meta`) }, [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-gradient-label`) }, "角度", 2), createVNode(unref(InputNumber), {
+						class: normalizeClass(`${unref(prefixCls)}-gradient-degree`),
+						size: "mini",
+						min: 0,
+						max: 360,
+						"hide-button": "",
+						disabled: props.disabled,
+						"model-value": colorState.value.gradientDegree,
+						onChange: handleDegreeChange
+					}, null, 8, [
+						"class",
+						"disabled",
+						"model-value"
+					])], 2),
+					createElementVNode("div", {
+						class: normalizeClass(`${unref(prefixCls)}-gradient-preview`),
+						style: normalizeStyle({ backgroundImage: unref(getLinearGradientString)(colorState.value) })
+					}, null, 6)
+				], 2)) : createCommentVNode("", true),
+				createVNode(palette_default, {
+					color: colorModel.value,
+					onChange: handlePaletteChange
+				}, null, 8, ["color"]),
+				createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-panel-control`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-control-wrapper`) }, [createElementVNode("div", null, [createVNode(control_bar_default, {
+					type: "hue",
+					x: activeHsva.value.h,
+					color: colorModel.value,
+					"color-string": unref(formatColor)(activeHsva.value, "CSS", true),
+					onChange: handleHueChange
+				}, null, 8, [
+					"x",
+					"color",
+					"color-string"
+				]), props.enableAlpha ? (openBlock(), createBlock(control_bar_default, {
+					key: 0,
+					type: "alpha",
+					x: activeHsva.value.a,
+					color: colorModel.value,
+					"color-string": unref(formatColor)(activeHsva.value, "CSS", true),
+					onChange: handleAlphaChange
+				}, null, 8, [
+					"x",
+					"color",
+					"color-string"
+				])) : createCommentVNode("", true)]), props.showPrimaryColorPreview ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-preview`),
+					style: normalizeStyle(previewStyle.value)
+				}, null, 6)) : createCommentVNode("", true)], 2), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-input-wrapper`) }, [createVNode(unref(Select), {
+					class: normalizeClass(`${unref(prefixCls)}-select`),
+					size: "mini",
+					"trigger-props": selectTriggerProps,
+					options: formatOptions.value,
+					"model-value": selectedFormat.value,
+					disabled: props.disabled,
+					onChange: handleFormatChange
+				}, null, 8, [
+					"class",
+					"options",
+					"model-value",
+					"disabled"
+				]), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-group-wrapper`) }, [createVNode(unref(input_group_default), { class: normalizeClass(`${unref(prefixCls)}-input-group`) }, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(formatDrafts.value, (draft, index) => {
+						return openBlock(), createBlock(unref(Input), {
+							key: `${selectedFormat.value}-${index}`,
+							class: normalizeClass(`${unref(prefixCls)}-format-input`),
+							size: "mini",
+							disabled: props.disabled,
+							"model-value": draft,
+							onInput: ($event) => updateDraft(index, $event),
+							onChange: commitDrafts,
+							onPressEnter: commitDrafts
+						}, null, 8, [
+							"class",
+							"disabled",
+							"model-value",
+							"onInput"
+						]);
+					}), 128))]),
+					_: 1
+				}, 8, ["class"])], 2)], 2)], 2),
+				recentColorList.value || ((_swatchColorList$valu = swatchColorList.value) === null || _swatchColorList$valu === void 0 ? void 0 : _swatchColorList$valu.length) ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(`${unref(prefixCls)}-panel-colors`)
+				}, [recentColorList.value ? (openBlock(), createBlock(unref(ReuseColorSection), {
+					key: 0,
+					text: "最近使用",
+					values: recentColorList.value,
+					trigger: "recent"
+				}, null, 8, ["values"])) : createCommentVNode("", true), ((_swatchColorList$valu2 = swatchColorList.value) === null || _swatchColorList$valu2 === void 0 ? void 0 : _swatchColorList$valu2.length) ? (openBlock(), createBlock(unref(ReuseColorSection), {
+					key: 1,
+					text: "系统色板",
+					values: swatchColorList.value,
+					trigger: "preset"
+				}, null, 8, ["values"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
+			], 2)], 64);
+		};
+	}
+}));
+//#endregion
+export { panel_vue_vue_type_script_setup_true_lang_default as default };

package/es/color-picker/utils.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { formatInputToHSVA, hsvToRgb, rgbToHex, rgbToHsv, rgbaToHex } from "../_utils/color.js";
 //#region components/color-picker/utils.ts
 var DEFAULT_HSVA = {
@@ -48,10 +48,7 @@ var rgbToHsl = (r, g, b) => {
 			case green:
 				hue = (blue - red) / delta + 2;
 				break;
-			case blue:
-				hue = (red - green) / delta + 4;
-				break;
-			default: break;
+			case blue: hue = (red - green) / delta + 4;
 		}
 		hue /= 6;
 	}
@@ -114,7 +111,8 @@ var parseHslString = (input) => {
 	const parts = parseColorTuple(match[1]);
 	if (parts.length < 3) return null;
 	const rgb = hslToRgb(parseFloat(parts[0]), parseUnitValue(parts[1], 100), parseUnitValue(parts[2], 100));
-	return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: parts[3] ? clamp(parseUnitValue(parts[3], 1), 0, 1) : 1 });
+	const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+	return _objectSpread2(_objectSpread2({}, hsv), {}, { a: parts[3] ? clamp(parseUnitValue(parts[3], 1), 0, 1) : 1 });
 };
 var parseHsvString = (input) => {
 	const match = HSV_REGEXP.exec(input);
@@ -139,7 +137,8 @@ var parseCmykString = (input) => {
 		g: Math.round(255 * (1 - m) * (1 - k)),
 		b: Math.round(255 * (1 - y) * (1 - k))
 	};
-	return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: 1 });
+	const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+	return _objectSpread2(_objectSpread2({}, hsv), {}, { a: 1 });
 };
 var normalizeFormat = (format, enableAlpha) => {
 	if (!format) return enableAlpha ? "RGBA" : "RGB";
@@ -424,12 +423,14 @@ var parseFormatInputValues = (values, format, enableAlpha) => {
 				g: clamp(parseFloat(values[1] || "0"), 0, 255),
 				b: clamp(parseFloat(values[2] || "0"), 0, 255)
 			};
-			return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: normalized === "RGBA" ? clamp(parseUnitValue(values[3] || "100%", 100) / 100, 0, 1) : 1 });
+			const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+			return _objectSpread2(_objectSpread2({}, hsv), {}, { a: normalized === "RGBA" ? clamp(parseUnitValue(values[3] || "100%", 100) / 100, 0, 1) : 1 });
 		}
 		case "HSL":
 		case "HSLA": {
 			const rgb = hslToRgb(parseFloat(values[0] || "0"), parseUnitValue(values[1] || "0%", 100), parseUnitValue(values[2] || "0%", 100));
-			return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: normalized === "HSLA" ? clamp(parseUnitValue(values[3] || "100%", 100) / 100, 0, 1) : 1 });
+			const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+			return _objectSpread2(_objectSpread2({}, hsv), {}, { a: normalized === "HSLA" ? clamp(parseUnitValue(values[3] || "100%", 100) / 100, 0, 1) : 1 });
 		}
 		case "HSV":
 		case "HSVA": return {
@@ -448,7 +449,8 @@ var parseFormatInputValues = (values, format, enableAlpha) => {
 				g: Math.round(255 * (1 - m) * (1 - k)),
 				b: Math.round(255 * (1 - y) * (1 - k))
 			};
-			return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: 1 });
+			const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+			return _objectSpread2(_objectSpread2({}, hsv), {}, { a: 1 });
 		}
 		default: return parseColor(values[0]);
 	}

package/es/comment/comment.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isString } from "../_utils/is.js";
 import { hasPropOrSlot } from "../_utils/use-prop-or-slot.js";

package/es/components.d.ts

@@ -104,6 +104,8 @@ declare module 'vue' {
         SdModelSelectorSeparator: SDVue['ModelSelectorSeparator'];
         SdModelSelectorShortcut: SDVue['ModelSelectorShortcut'];
         SdModelSelectorTrigger: SDVue['ModelSelectorTrigger'];
+        SdNumberFlow: SDVue['NumberFlow'];
+        SdNumberFlowGroup: SDVue['NumberFlowGroup'];
         SdPageHeader: SDVue['PageHeader'];
         SdPagination: SDVue['Pagination'];
         SdPopconfirm: SDVue['Popconfirm'];

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

@@ -1,5 +1,5 @@
 import { configProviderInjectionKey } from "./context.js";
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { normalizeTheme } from "./theme.js";
 import theme_provider_default from "./theme-provider.js";
 import { createBlock, defineComponent, getCurrentInstance, openBlock, provide, reactive, renderSlot, toRefs, useSlots, watch, withCtx } from "vue";

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

@@ -1,5 +1,5 @@
 import { themePopupContainerInjectionKey } from "./context.js";
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
 import { applyThemeCSSVariables, clearThemeCSSVariables, normalizeTheme } from "./theme.js";

package/es/config-provider/theme.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 //#region components/config-provider/theme.ts
 var DEFAULT_THEME_META = {
 	schemaVersion: 1,

package/es/copy/copy.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/asyncToGenerator.js";
+import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
 import Tooltip from "../tooltip/index.js";
 import Button from "../button/index.js";
 import Link from "../link/index.js";

package/es/cropper/cropper.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/asyncToGenerator.js";
+import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, unref, useAttrs, watch } from "vue";
 import { isNumber, isString } from "es-toolkit";
 //#region components/cropper/cropper.vue?vue&type=script&setup=true&lang.ts

package/es/date-picker/hooks/use-range-header-value.js

@@ -29,7 +29,7 @@ function useRangeHeaderValue(props) {
 		return (_defaultValue$value2 = defaultValue.value) === null || _defaultValue$value2 === void 0 ? void 0 : _defaultValue$value2[1];
 	});
 	const emitChange = (newVal) => {
-		!(onChange === null || onChange === void 0) && onChange.value && onChange.value(newVal);
+		onChange !== null && onChange !== void 0 && onChange.value && onChange.value(newVal);
 	};
 	const { headerValue: startHeaderValue, setHeaderValue: setStartHeaderValue, headerOperations: startHeaderOperations, getDefaultLocalValue: getDefaultStartHeaderValue } = useHeaderValue(reactive({
 		mode: startMode,
@@ -60,7 +60,7 @@ function useRangeHeaderValue(props) {
 		const isSameEndValue = isSame(endHeaderValue.value, newVal[1]);
 		setStartHeaderValue(newVal[0], false);
 		setEndHeaderValue(newVal[1], false);
-		if (!isSameStartValue || !isSameEndValue) !(onChange === null || onChange === void 0) && onChange.value && (onChange === null || onChange === void 0 || onChange.value(newVal));
+		if (!isSameStartValue || !isSameEndValue) onChange !== null && onChange !== void 0 && onChange.value && (onChange === null || onChange === void 0 || onChange.value(newVal));
 	};
 	function getFixedValue(values) {
 		let [header0, header1] = getSortedDayjsArray(values);

package/es/date-picker/hooks/use-range-time-picker-value.js

@@ -1,4 +1,4 @@
-import _objectSpread2 from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { isArray } from "../../_utils/is.js";
 import useTimePickerValue from "./use-time-picker-value.js";
 import { computed, reactive, toRefs } from "vue";

package/es/date-picker/hooks/use-time-picker-value.js

@@ -4,15 +4,17 @@ import { computed, reactive, ref, toRefs, watch } from "vue";
 //#region components/date-picker/hooks/use-time-picker-value.ts
 function useTimePickerValue(props) {
 	const { timePickerProps, selectedValue } = toRefs(props);
+	const timePickerPropsFormat = computed(() => {
+		var _timePickerProps$valu;
+		return timePickerProps === null || timePickerProps === void 0 || (_timePickerProps$valu = timePickerProps.value) === null || _timePickerProps$valu === void 0 ? void 0 : _timePickerProps$valu.format;
+	});
+	const timePickerPropsUse12Hours = computed(() => {
+		var _timePickerProps$valu2;
+		return !!(timePickerProps === null || timePickerProps === void 0 || (_timePickerProps$valu2 = timePickerProps.value) === null || _timePickerProps$valu2 === void 0 ? void 0 : _timePickerProps$valu2.use12Hours);
+	});
 	const { format } = useTimeFormat(reactive({
-		format: computed(() => {
-			var _timePickerProps$valu;
-			return timePickerProps === null || timePickerProps === void 0 || (_timePickerProps$valu = timePickerProps.value) === null || _timePickerProps$valu === void 0 ? void 0 : _timePickerProps$valu.format;
-		}),
-		use12Hours: computed(() => {
-			var _timePickerProps$valu2;
-			return !!(timePickerProps === null || timePickerProps === void 0 || (_timePickerProps$valu2 = timePickerProps.value) === null || _timePickerProps$valu2 === void 0 ? void 0 : _timePickerProps$valu2.use12Hours);
-		})
+		format: timePickerPropsFormat,
+		use12Hours: timePickerPropsUse12Hours
 	}));
 	const defaultTimePickerValue = computed(() => {
 		var _timePickerProps$valu3;