@sdata/web-vue 3.29.0 → 4.0.0

package/es/color-picker/panel.js

@@ -1,477 +1,5 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.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 InputNumber from "../input-number/index.js";
-import Select from "../select/index.js";
-import Radio from "../radio/index.js";
-import control_bar_default from "./control-bar.js";
-import palette_default from "./palette.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 { computed, createTextVNode, createVNode, defineComponent, isVNode, ref, watch } from "vue";
-import { useDraggable } from "@vueuse/core";
-//#region components/color-picker/panel.tsx
-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: {
-		point: {
-			type: Object,
-			required: true
-		},
-		prefixCls: {
-			type: String,
-			required: true
-		},
-		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,
-		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 { t } = useI18n();
-		const prefixCls = getPrefixCls("color-picker");
-		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("#", "")
-			};
-		});
-		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 = () => {
-			const nextHsva = parseFormatInputValues(formatDrafts.value, selectedFormat.value, props.enableAlpha);
-			handleHsvaChange(nextHsva, "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 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`,
-				"aria-label": t("a11y.selectColor", value),
-				"onClick": () => emitStateChange(parseColorState(value, props.colorModes), trigger)
-			}, [createVNode("div", {
-				"class": `${prefixCls}-block`,
-				"style": style
-			}, null)]);
-		};
-		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 = () => {
-			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) => {
-						if (typeof value !== "number") return;
-						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": 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": activeHsva.value.h,
-				"color": colorModel.value,
-				"colorString": formatColor(activeHsva.value, "CSS", true),
-				"onChange": (h) => {
-					const next = _objectSpread2(_objectSpread2({}, activeHsva.value), {}, { h });
-					handleHsvaChange(next, "palette-hue-bar", true);
-				}
-			}, null), props.enableAlpha && createVNode(control_bar_default, {
-				"type": "alpha",
-				"x": activeHsva.value.a,
-				"color": colorModel.value,
-				"colorString": formatColor(activeHsva.value, "CSS", true),
-				"onChange": (alpha) => {
-					const next = _objectSpread2(_objectSpread2({}, activeHsva.value), {}, { a: alpha });
-					handleHsvaChange(next, "palette-alpha-bar", true);
-				}
-			}, null)]), props.showPrimaryColorPreview && createVNode("div", {
-				"class": `${prefixCls}-preview`,
-				"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": 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()
-		]);
-	}
-});
+import panel_vue_vue_type_script_setup_true_lang_default from "./panel.vue_vue_type_script_setup_true_lang.js";
+//#region components/color-picker/panel.vue
+var panel_default = panel_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { panel_default as default };

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

@@ -1,6 +1,6 @@
-import { PropType } from 'vue';
-import { ColorFormat, ColorModes, ColorObject, ColorPickerChangeTrigger, RecentColorsValue } from './interface';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+import { type PropType } from 'vue';
+import type { ColorFormat, ColorModes, ColorObject, ColorPickerChangeTrigger, RecentColorsValue } from './interface';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
         type: StringConstructor;
         default: string;
@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onPaletteBarChange: PropType<(context: {
         color: ColorObject;
     }) => void>;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: StringConstructor;
         default: string;
@@ -83,4 +83,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     recentColors: RecentColorsValue;
     swatchColors: string[] | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;