@aifuxi/semi-ui-vue 0.1.0-alpha.0

package/dist/color-picker-ChC7qsx0.js

@@ -0,0 +1,885 @@
+import "./src-DNBBthjO.js";
+import { t as e } from "./foundation-Cawx37mp.js";
+import { n as t } from "./popover-hD77YpUM.js";
+import { n, t as r } from "./input-wf0nZCRS.js";
+import { t as i } from "./Button-RCaDTqHh.js";
+import { InputNumber as a } from "./input-number/index.js";
+import { t as o } from "./select-BeM6gxAU.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, getCurrentInstance as h, h as g, markRaw as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, onMounted as S, openBlock as C, reactive as w, renderSlot as T, shallowRef as E, unref as D, useAttrs as O, useSlots as k, useTemplateRef as A, watch as j, withCtx as M } from "vue";
+import { IconEyedropper as N } from "@aifuxi/semi-icons-vue";
+//#region bundled-foundation
+var P = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n, F = {
+	grad: 360 / 400,
+	turn: 360,
+	rad: 360 / (Math.PI * 2)
+}, I = (e) => X(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), {
+	r: parseInt(e.substring(0, 2), 16),
+	g: parseInt(e.substring(2, 4), 16),
+	b: parseInt(e.substring(4, 6), 16),
+	a: ((e) => {
+		let t = parseInt(e, 16);
+		return isNaN(t) ? 1 : t / 255;
+	})(e.substring(6, 8))
+}), R = (e, t = "deg") => Number(e) * (F[t] || 1), z = (e) => Y(U(e)), B = ({ h: e, s: t, v: n, a: r }) => {
+	let i = (200 - t) * n / 100;
+	return {
+		h: P(e),
+		s: P(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
+		l: P(i / 2),
+		a: P(r, 2)
+	};
+}, V = (e) => {
+	let { h: t, s: n, l: r } = B(e);
+	return `hsl(${t}, ${n}%, ${r}%)`;
+}, H = (e) => {
+	let { h: t, s: n, l: r, a: i } = B(e);
+	return `hsla(${t}, ${n}%, ${r}%, ${i})`;
+}, U = ({ h: e, s: t, v: n, a: r }) => {
+	e = e / 360 * 6, t /= 100, n /= 100;
+	let i = Math.floor(e), a = n * (1 - t), o = n * (1 - (e - i) * t), s = n * (1 - (1 - e + i) * t), c = i % 6;
+	return {
+		r: P([
+			n,
+			o,
+			a,
+			a,
+			s,
+			n
+		][c] * 255),
+		g: P([
+			s,
+			n,
+			n,
+			o,
+			a,
+			a
+		][c] * 255),
+		b: P([
+			a,
+			a,
+			s,
+			n,
+			n,
+			o
+		][c] * 255),
+		a: P(r, 2)
+	};
+}, W = (e) => {
+	let { r: t, g: n, b: r, a: i } = U(e);
+	return `rgba(${t}, ${n}, ${r}, ${i})`;
+}, G = (e) => {
+	let t = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
+	return t ? ne({
+		h: R(t[1], t[2]),
+		s: Number(t[3]),
+		v: Number(t[4]),
+		a: t[5] === void 0 ? 1 : Number(t[5]) / (t[6] ? 100 : 1)
+	}) : {
+		h: 0,
+		s: 0,
+		v: 0,
+		a: 1
+	};
+}, K = (e) => X(q(e)), q = (e) => {
+	let t = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
+	return t ? {
+		r: Number(t[1]) / (t[2] ? 100 / 255 : 1),
+		g: Number(t[3]) / (t[4] ? 100 / 255 : 1),
+		b: Number(t[5]) / (t[6] ? 100 / 255 : 1),
+		a: t[7] === void 0 ? 1 : Number(t[7]) / (t[8] ? 100 : 1)
+	} : {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	};
+}, ee = q, te = K, J = (e) => {
+	let t = e.toString(16);
+	return t.length < 2 ? "0" + t : t;
+}, Y = ({ r: e, g: t, b: n, a: r }) => r === void 0 || r === 1 ? "#" + J(e) + J(t) + J(n) : "#" + J(e) + J(t) + J(n) + ((e) => Math.round(e / 100 * 255).toString(16).padStart(2, "0").toLowerCase())(r * 100), X = ({ r: e, g: t, b: n, a: r }) => {
+	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = a ? i === e ? (t - n) / a : i === t ? 2 + (n - e) / a : 4 + (e - t) / a : 0;
+	return {
+		h: P(60 * (o < 0 ? o + 6 : o)),
+		s: P(i ? a / i * 100 : 0),
+		v: P(i / 255 * 100),
+		a: r
+	};
+}, ne = (e) => ({
+	h: P(e.h),
+	s: P(e.s),
+	v: P(e.v),
+	a: P(e.a, 2)
+}), re = class t extends e {
+	constructor(e) {
+		super({ ...e }), this.handleChangeH = (e, t) => {
+			let n = {
+				...e.hsva,
+				h: t
+			}, r = {
+				rgba: U(n),
+				hsva: n,
+				hex: z(n)
+			};
+			this._adapter.notifyChange(r), this.getProp("value") || this._adapter.setState({ currentColor: r });
+		}, this.handleChangeA = (e, t) => {
+			let n = this._adapter.getProp("alpha");
+			n || (t = 1);
+			let r = {
+				...e.rgba,
+				a: t
+			}, i = Y(r);
+			e = {
+				rgba: r,
+				hex: n ? i : i.slice(0, 7),
+				hsva: {
+					...e.hsva,
+					a: t
+				}
+			}, this._adapter.notifyChange(e), this.getProp("value") || this._adapter.setState({ currentColor: e });
+		}, this.getCurrentColor = () => {
+			let e = this.getProp("value"), t = this.getState("currentColor");
+			return e || t;
+		}, this.handleChange = (e, n) => {
+			let r;
+			if (n === "hsva") r = {
+				hsva: e,
+				rgba: t.hsvaToRgba(e),
+				hex: t.hsvaToHex(e)
+			};
+			else if (n === "rgba") r = {
+				rgba: e,
+				hsva: t.rgbaToHsva(e),
+				hex: t.rgbaToHex(e)
+			};
+			else if (n === "hex") r = {
+				hex: e,
+				hsva: t.hexToHsva(e),
+				rgba: t.hexToRgba(e)
+			};
+			else throw Error("format error");
+			this._adapter.notifyChange(r), this.getProp("value") || this._adapter.setState({ currentColor: r });
+		}, this.handleAlphaChangeByHandle = (e) => {
+			this.handleChangeA(this.getCurrentColor(), e.a);
+		}, this.handleColorChangeByHandle = (e) => {
+			this.handleChangeH(this.getCurrentColor(), e.h);
+		}, this.getHandlePositionByHSVA = (e, { width: t, height: n }, r) => {
+			let i = {
+				x: e.s / 100 * t,
+				y: (1 - e.v / 100) * n
+			};
+			return {
+				x: i.x - r / 2,
+				y: i.y - r / 2
+			};
+		}, this.getHandlePositionByMousePosition = (e, { width: t, height: n }, r) => e.x > t || e.x < 0 || e.y > n || e.y < 0 ? null : {
+			x: e.x - r / 2,
+			y: e.y - r / 2
+		}, this.getAlphaHandlePositionByMousePosition = (e, t, n) => e < 0 || e > t ? null : e - n / 2, this.getColorHandlePositionByMousePosition = (e, t, n) => e < 0 || e > t ? null : e - n / 2;
+	}
+	static {
+		this.hsvaToRgba = U;
+	}
+	static {
+		this.rgbaToHsva = X;
+	}
+	static {
+		this.rgbaToHex = Y;
+	}
+	static {
+		this.hsvaToHex = z;
+	}
+	static {
+		this.hexToRgba = L;
+	}
+	static {
+		this.hexToHsva = I;
+	}
+	static {
+		this.hsvaToHslaString = H;
+	}
+	static {
+		this.hsvaToHslString = V;
+	}
+	static {
+		this.rgbaStringToHsva = K;
+	}
+	static {
+		this.rgbaStringToRgba = q;
+	}
+}, ie = (e, t) => {
+	let n = e.match(/^\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,?\s*([\d.]*)\s*$/), r = [];
+	r[0] = Number(n?.[1]), r[1] = Number(n?.[2]), r[2] = Number(n?.[3]), r[3] = Number(n?.[4] === void 0 || n?.[4] === "" ? 1 : n?.[4]);
+	let i = (e, t) => !(isNaN(e) || e < 0 || e > t);
+	return i(r[0], t === "rgba" ? 255 : 360) && i(r[1], t === "rgba" ? 255 : 100) && i(r[2], t === "rgba" ? 255 : 100) && i(r[3], 1) ? t === "rgba" ? {
+		r: r[0],
+		g: r[1],
+		b: r[2],
+		a: r[3]
+	} : {
+		h: r[0],
+		s: r[1],
+		v: r[2],
+		a: r[3]
+	} : !1;
+}, ae = ["aria-valuetext"], oe = /* @__PURE__ */ m({
+	__name: "AlphaSlider",
+	props: {
+		handleSize: {},
+		height: {},
+		hsva: {},
+		width: {}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = A("root"), a = w({
+			handlePosition: n.hsva.a * n.width - n.handleSize / 2,
+			isHandleGrabbing: !1
+		}), o = c(() => `linear-gradient(90deg, ${H({
+			...n.hsva,
+			a: 0
+		})}, ${H({
+			...n.hsva,
+			a: 1
+		})})`);
+		function s(e) {
+			let t = i.value?.getBoundingClientRect();
+			if (!t) return;
+			let o = e.clientX - t.x;
+			r("change", Number(Math.min(Math.max(o / n.width, 0), 1).toFixed(2))), a.handlePosition = o < 0 || o > n.width ? null : o - n.handleSize / 2;
+		}
+		function l(e) {
+			s(e), a.isHandleGrabbing = !0, window.addEventListener("mousemove", s), window.addEventListener("mouseup", u);
+		}
+		function u() {
+			a.isHandleGrabbing = !1, window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", u);
+		}
+		return j(() => [
+			n.hsva.a,
+			n.width,
+			n.handleSize
+		], () => a.handlePosition = n.hsva.a * n.width - n.handleSize / 2), x(u), (e, t) => (C(), d("div", {
+			ref_key: "root",
+			ref: i,
+			"aria-label": "Alpha",
+			"aria-valuetext": `${D(P)(n.hsva.a * 100)}%`,
+			class: "semi-colorPicker-alphaSlider alphaSliderWrapper",
+			style: b({
+				width: `${n.width}px`,
+				height: `${n.height}px`
+			}),
+			onMousedown: l
+		}, [f("div", {
+			class: "semi-colorPicker-alphaSliderInner",
+			style: b({ background: o.value })
+		}, [f("div", {
+			class: "semi-colorPicker-alphaHandle",
+			style: b({
+				width: `${n.handleSize}px`,
+				height: `${n.handleSize}px`,
+				left: a.handlePosition === null ? void 0 : `${a.handlePosition}px`,
+				top: "50%",
+				transform: "translateY(-50%)",
+				backgroundColor: D(W)(n.hsva)
+			})
+		}, null, 4)], 4)], 44, ae));
+	}
+}), se = ["aria-valuetext"], ce = /* @__PURE__ */ m({
+	__name: "ColorChooseArea",
+	props: {
+		handleSize: {},
+		height: {},
+		hsva: {},
+		width: {}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = A("root"), a = w({
+			handlePosition: u(),
+			isHandleGrabbing: !1
+		}), o = c(() => V({
+			h: n.hsva.h,
+			s: 100,
+			v: 100,
+			a: 1
+		})), s = c(() => U(n.hsva)), l = c(() => `Saturation ${P(n.hsva.s)}%, Brightness ${P(n.hsva.v)}%`);
+		function u() {
+			return {
+				x: n.hsva.s / 100 * n.width - n.handleSize / 2,
+				y: (1 - n.hsva.v / 100) * n.height - n.handleSize / 2
+			};
+		}
+		function p(e) {
+			let t = i.value?.getBoundingClientRect();
+			if (!t) return;
+			let o = {
+				x: e.clientX - t.x,
+				y: e.clientY - t.y
+			};
+			o.x > n.width || o.x < 0 || o.y > n.height || o.y < 0 || (a.handlePosition = {
+				x: o.x - n.handleSize / 2,
+				y: o.y - n.handleSize / 2
+			}, r("change", {
+				s: Math.round(o.x / n.width * 100),
+				v: Math.round(100 - Math.min(Math.max(o.y / n.height, 0), 1) * 100)
+			}));
+		}
+		function m(e) {
+			p(e), a.isHandleGrabbing = !0, i.value?.addEventListener("mousemove", p), window.addEventListener("mouseup", h);
+		}
+		function h() {
+			a.isHandleGrabbing = !1, i.value?.removeEventListener("mousemove", p), window.removeEventListener("mouseup", h);
+		}
+		return j(() => n.hsva, () => a.handlePosition = u(), { deep: !0 }), x(h), (e, t) => (C(), d("div", {
+			ref_key: "root",
+			ref: i,
+			"aria-label": "Color",
+			"aria-valuetext": l.value,
+			class: "semi-colorPicker-colorChooseArea",
+			style: b({
+				backgroundColor: o.value,
+				width: `${n.width}px`,
+				height: `${n.height}px`,
+				cursor: a.isHandleGrabbing ? "grabbing" : "pointer"
+			}),
+			onMousedown: m
+		}, [f("div", {
+			class: "semi-colorPicker-handle",
+			style: b({
+				width: `${n.handleSize}px`,
+				height: `${n.handleSize}px`,
+				left: `${a.handlePosition.x}px`,
+				top: `${a.handlePosition.y}px`,
+				backgroundColor: `rgba(${s.value.r},${s.value.g},${s.value.b},${s.value.a})`
+			})
+		}, null, 4)], 44, se));
+	}
+}), le = /* @__PURE__ */ m({
+	__name: "ColorDataPart",
+	props: {
+		alpha: { type: Boolean },
+		currentColor: {},
+		defaultFormat: {},
+		eyeDropper: { type: Boolean },
+		width: {}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let s = e, m = t, h = E(s.defaultFormat), g = E(""), _ = [
+			"hex",
+			"rgba",
+			"hsva"
+		].map((e) => ({
+			label: e,
+			value: e
+		})), v = c(() => {
+			let { r: e, g: t, b: n, a: r } = s.currentColor.rgba;
+			return `rgba(${e},${t},${n},${r})`;
+		});
+		function y() {
+			if (h.value === "rgba") {
+				let { r: e, g: t, b: n } = s.currentColor.rgba;
+				return `${e},${t},${n}`;
+			}
+			if (h.value === "hsva") {
+				let { h: e, s: t, v: n } = s.currentColor.hsva;
+				return `${e},${t},${n}`;
+			}
+			return s.currentColor.hex.slice(0, 7);
+		}
+		function x(e) {
+			let t = !1;
+			if (h.value === "rgba" || h.value === "hsva") t = ie(e, h.value);
+			else {
+				let n = e.startsWith("#") ? e : `#${e}`;
+				/#[\d\w]{6,8}/.test(n) && (t = n);
+			}
+			t && m("change", t, h.value), g.value = e;
+		}
+		function w(e) {
+			let t = Number((e / 100).toFixed(2));
+			h.value === "rgba" ? m("change", {
+				...s.currentColor.rgba,
+				a: t
+			}, "rgba") : h.value === "hsva" ? m("change", {
+				...s.currentColor.hsva,
+				a: t
+			}, "hsva") : m("change", Y({
+				...s.currentColor.rgba,
+				a: t
+			}), "hex");
+		}
+		function T(e) {
+			(e === "hex" || e === "rgba" || e === "hsva") && (h.value = e, g.value = y());
+		}
+		async function O() {
+			if (typeof window > "u") return;
+			let e = window.EyeDropper;
+			if (e) try {
+				let t = (await new e().open()).sRGBHex;
+				t.startsWith("#") && m("change", t, "hex");
+			} catch {}
+		}
+		return j(() => s.currentColor, () => g.value = y(), { deep: !0 }), j(() => s.defaultFormat, (e) => {
+			h.value = e, g.value = y();
+		}), S(() => g.value = y()), (e, t) => (C(), d("div", {
+			class: "semi-colorPicker-dataPart",
+			style: b({ width: `${s.width}px` })
+		}, [
+			f("div", {
+				class: "semi-colorPicker-colorDemoBlock",
+				style: b({
+					minWidth: "20px",
+					minHeight: "20px",
+					backgroundColor: v.value
+				})
+			}, null, 4),
+			p(D(n), {
+				size: "small",
+				"class-name": "semi-colorPicker-inputGroup"
+			}, {
+				default: M(() => [
+					p(D(r), {
+						"class-name": "semi-colorPicker-colorPickerInput",
+						value: g.value,
+						onChange: x
+					}, null, 8, ["value"]),
+					s.alpha ? (C(), l(D(a), {
+						key: 0,
+						min: 0,
+						max: 100,
+						"class-name": "semi-colorPicker-colorPickerInputNumber",
+						value: Number(D(P)(s.currentColor.rgba.a * 100)),
+						"hide-buttons": !0,
+						onNumberChange: w
+					}, {
+						suffix: M(() => [...t[0] ||= [f("span", { class: "semi-colorPicker-inputNumberSuffix" }, "%", -1)]]),
+						_: 1
+					}, 8, ["value"])) : u("", !0),
+					p(D(o), {
+						class: "semi-colorPicker-formatSelect",
+						size: "small",
+						value: h.value,
+						"option-list": D(_),
+						onSelect: T
+					}, null, 8, ["value", "option-list"])
+				]),
+				_: 1
+			}),
+			s.eyeDropper ? (C(), l(D(i), {
+				key: 0,
+				type: "tertiary",
+				theme: "light",
+				size: "small",
+				onClick: O
+			}, {
+				icon: M(() => [p(D(N))]),
+				_: 1
+			})) : u("", !0)
+		], 4));
+	}
+}), Z = m({
+	name: "ColorPickerNodeRenderer",
+	props: { content: {
+		type: null,
+		default: void 0
+	} },
+	setup: (e) => () => g(s, null, [e.content])
+}), ue = /* @__PURE__ */ m({
+	__name: "ColorSlider",
+	props: {
+		handleSize: {},
+		height: {},
+		hue: {},
+		width: {}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = A("root"), a = w({
+			handlePosition: n.hue / 360 * n.width - n.handleSize / 2,
+			isHandleGrabbing: !1
+		}), o = c(() => V({
+			h: n.hue,
+			s: 100,
+			v: 100,
+			a: 1
+		}));
+		function s(e) {
+			let t = i.value?.getBoundingClientRect();
+			if (!t) return;
+			let o = e.clientX - t.x;
+			r("change", Math.round(Math.min(Math.max(o / n.width, 0), 1) * 360)), a.handlePosition = o < 0 || o > n.width ? null : o - n.handleSize / 2;
+		}
+		function l(e) {
+			s(e), a.isHandleGrabbing = !0, window.addEventListener("mousemove", s), window.addEventListener("mouseup", u);
+		}
+		function u() {
+			a.isHandleGrabbing = !1, window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", u);
+		}
+		return j(() => [
+			n.hue,
+			n.width,
+			n.handleSize
+		], () => a.handlePosition = n.hue / 360 * n.width - n.handleSize / 2), x(u), (e, t) => (C(), d("div", {
+			ref_key: "root",
+			ref: i,
+			class: "semi-colorPicker-colorSlider colorSliderWrapper",
+			style: b({
+				width: `${n.width}px`,
+				height: `${n.height}px`
+			}),
+			onMousedown: l
+		}, [f("div", {
+			class: "semi-colorPicker-handle",
+			style: b({
+				width: `${n.handleSize}px`,
+				height: `${n.handleSize}px`,
+				left: a.handlePosition === null ? void 0 : `${a.handlePosition}px`,
+				top: "50%",
+				transform: "translateY(-50%)",
+				backgroundColor: o.value
+			})
+		}, null, 4)], 36));
+	}
+}), Q = /* @__PURE__ */ m({
+	__name: "ColorPickerPanel",
+	props: {
+		alpha: { type: Boolean },
+		bottomSlot: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		classList: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		currentColor: {},
+		defaultFormat: {},
+		eyeDropper: { type: Boolean },
+		height: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		topSlot: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		width: {}
+	},
+	emits: [
+		"alphaChange",
+		"colorChange",
+		"hueChange"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t;
+		function i(e, t) {
+			r("colorChange", e, t);
+		}
+		return (e, t) => (C(), d("div", {
+			class: y(["semi-colorPicker", n.classList]),
+			style: b(n.style)
+		}, [
+			T(e.$slots, "top", {}, () => [p(D(Z), { content: n.topSlot }, null, 8, ["content"])]),
+			p(ce, {
+				hsva: n.currentColor.hsva,
+				"handle-size": 20,
+				width: n.width,
+				height: n.height,
+				onChange: t[0] ||= (e) => r("colorChange", {
+					s: e.s,
+					v: e.v,
+					a: n.currentColor.hsva.a,
+					h: n.currentColor.hsva.h
+				}, "hsva")
+			}, null, 8, [
+				"hsva",
+				"width",
+				"height"
+			]),
+			p(ue, {
+				width: n.width,
+				height: 10,
+				"handle-size": 18,
+				hue: n.currentColor.hsva.h,
+				onChange: t[1] ||= (e) => r("hueChange", e)
+			}, null, 8, ["width", "hue"]),
+			n.alpha ? (C(), l(oe, {
+				key: 0,
+				width: n.width,
+				height: 10,
+				"handle-size": 18,
+				hsva: n.currentColor.hsva,
+				onChange: t[2] ||= (e) => r("alphaChange", e)
+			}, null, 8, ["width", "hsva"])) : u("", !0),
+			p(le, {
+				"current-color": n.currentColor,
+				"eye-dropper": n.eyeDropper,
+				alpha: n.alpha,
+				width: n.width,
+				"default-format": n.defaultFormat,
+				onChange: i
+			}, null, 8, [
+				"current-color",
+				"eye-dropper",
+				"alpha",
+				"width",
+				"default-format"
+			]),
+			T(e.$slots, "bottom", {}, () => [p(D(Z), { content: n.bottomSlot }, null, 8, ["content"])])
+		], 6));
+	}
+});
+//#endregion
+//#region src/color-picker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+function $(e) {
+	if (e.startsWith("#")) return {
+		hsva: I(e),
+		rgba: L(e),
+		hex: e
+	};
+	if (e.startsWith("rgba")) {
+		let t = q(e);
+		return {
+			hsva: K(e),
+			rgba: t,
+			hex: Y(t)
+		};
+	}
+	if (e.startsWith("rgb")) {
+		let t = ee(e);
+		return {
+			hsva: te(e),
+			rgba: t,
+			hex: Y(t)
+		};
+	}
+	if (e.startsWith("hsv")) {
+		let t = G(e);
+		return {
+			hsva: t,
+			rgba: U(t),
+			hex: z(t)
+		};
+	}
+	throw Error(`Semi ColorPicker: error on static colorStringToValue method, input value is invalid: ${e}`);
+}
+//#endregion
+//#region src/color-picker/index.ts
+var de = Object.assign(/* @__PURE__ */ m({
+	name: "ColorPicker",
+	inheritAttrs: !1,
+	__name: "ColorPicker",
+	props: {
+		alpha: {
+			type: Boolean,
+			default: !0
+		},
+		bottomSlot: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		defaultFormat: { default: "hex" },
+		defaultValue: { default: () => ({
+			hsva: {
+				h: 176,
+				s: 71,
+				v: 77,
+				a: 1
+			},
+			rgba: {
+				r: 57,
+				g: 197,
+				b: 187,
+				a: 1
+			},
+			hex: "#39c5bb"
+		}) },
+		eyeDropper: {
+			type: Boolean,
+			default: !0
+		},
+		height: { default: 280 },
+		modelValue: {},
+		popoverProps: { default: () => ({}) },
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		topSlot: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		usePopover: {
+			type: Boolean,
+			default: !1
+		},
+		value: {},
+		width: { default: 280 }
+	},
+	emits: [
+		"change",
+		"update:modelValue",
+		"update:value"
+	],
+	setup(e, { emit: n }) {
+		let r = {
+			hsva: {
+				h: 176,
+				s: 71,
+				v: 77,
+				a: 1
+			},
+			rgba: {
+				r: 57,
+				g: 197,
+				b: 187,
+				a: 1
+			},
+			hex: "#39c5bb"
+		}, i = e, a = n, o = O(), s = k(), u = h();
+		function d(e) {
+			let t = u?.vnode.props, n = e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+			return !!(t && (Object.prototype.hasOwnProperty.call(t, e) || Object.prototype.hasOwnProperty.call(t, n)));
+		}
+		let m = c(() => d("modelValue")), g = c(() => d("value")), y = c(() => m.value || g.value), E = c(() => m.value ? i.modelValue : g.value ? i.value : void 0), A = w({ currentColor: E.value ?? i.defaultValue ?? r }), j = /* @__PURE__ */ new Map();
+		function N() {
+			let e = { ...i };
+			return y.value && E.value !== void 0 ? e.value = E.value : delete e.value, e;
+		}
+		let P = _(new re({
+			getContext: () => void 0,
+			getContexts: () => void 0,
+			getProp: (e) => N()[e],
+			getProps: N,
+			getState: (e) => A[e],
+			getStates: () => A,
+			setState: (e, t) => {
+				Object.assign(A, e), t?.();
+			},
+			getCache: (e) => j.get(e),
+			getCaches: () => j,
+			setCache: (e, t) => j.set(e, t),
+			stopPropagation: (e) => e?.stopPropagation?.(),
+			persistEvent: () => void 0,
+			notifyChange: (e) => {
+				let t = e;
+				a("change", t), a("update:modelValue", t), a("update:value", t);
+			}
+		})), F = c(() => P.getCurrentColor()), I = c(() => [
+			o.class,
+			i.class,
+			i.className
+		]), L = c(() => [o.style, i.style]), R = c(() => {
+			let { class: e, className: t, content: n, ...r } = i.popoverProps;
+			return r;
+		}), z = c(() => [
+			"semi-colorPicker-popover",
+			i.popoverProps.class,
+			i.popoverProps.className
+		]), B = c(() => s.top?.() ?? i.topSlot), V = c(() => s.bottom?.() ?? i.bottomSlot);
+		function H(e, t) {
+			P.handleChange(e, t);
+		}
+		return S(() => P.init()), x(() => P.destroy()), (e, n) => i.usePopover ? (C(), l(D(t), v({ key: 0 }, R.value, { class: z.value }), {
+			content: M(() => [p(Q, {
+				alpha: i.alpha,
+				"bottom-slot": V.value,
+				"class-list": I.value,
+				"current-color": F.value,
+				"default-format": i.defaultFormat,
+				"eye-dropper": i.eyeDropper,
+				height: i.height,
+				style: b(L.value),
+				"top-slot": B.value,
+				width: i.width,
+				onAlphaChange: n[0] ||= (e) => D(P).handleAlphaChangeByHandle({ a: e }),
+				onColorChange: H,
+				onHueChange: n[1] ||= (e) => D(P).handleColorChangeByHandle({ h: e })
+			}, null, 8, [
+				"alpha",
+				"bottom-slot",
+				"class-list",
+				"current-color",
+				"default-format",
+				"eye-dropper",
+				"height",
+				"style",
+				"top-slot",
+				"width"
+			])]),
+			default: M(() => [T(e.$slots, "default", {}, () => [f("div", {
+				class: "semi-colorPicker-popover-defaultChildren",
+				style: b({ backgroundColor: F.value.hex })
+			}, null, 4)])]),
+			_: 3
+		}, 16, ["class"])) : (C(), l(Q, {
+			key: 1,
+			alpha: i.alpha,
+			"bottom-slot": V.value,
+			"class-list": I.value,
+			"current-color": F.value,
+			"default-format": i.defaultFormat,
+			"eye-dropper": i.eyeDropper,
+			height: i.height,
+			style: b(L.value),
+			"top-slot": B.value,
+			width: i.width,
+			onAlphaChange: n[2] ||= (e) => D(P).handleAlphaChangeByHandle({ a: e }),
+			onColorChange: H,
+			onHueChange: n[3] ||= (e) => D(P).handleColorChangeByHandle({ h: e })
+		}, null, 8, [
+			"alpha",
+			"bottom-slot",
+			"class-list",
+			"current-color",
+			"default-format",
+			"eye-dropper",
+			"height",
+			"style",
+			"top-slot",
+			"width"
+		]));
+	}
+}), { colorStringToValue: $ });
+//#endregion
+export { $ as n, de as t };