morya-ui 0.4.5 → 0.5.1

package/dist/color-picker/index.js

@@ -0,0 +1,676 @@
+import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { n as t } from "../overlay-oR-5MDuE.js";
+import { t as n } from "../overlayPlacement-qwEJPVS4.js";
+import { t as r } from "../useMId-BXFYayPP.js";
+import { t as i } from "../useMotionTransition-DohkfWRB.js";
+import { t as a } from "../Icon-CmHjx7W8.js";
+import { t as o } from "../Segmented-CMP3nBAP.js";
+import { t as s } from "../Select-BaFKBeIh.js";
+import { t as c } from "../Input-BErawS7K.js";
+import { t as l } from "../InputNumber-DjbXtTzR.js";
+import { l as u, o as ee } from "../config-Cd20zAyW.js";
+import { n as te } from "../locale-BcxMPufl.js";
+import "./style.js";
+import { Fragment as d, Teleport as ne, Transition as re, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, mergeProps as ie, nextTick as ae, normalizeClass as oe, normalizeStyle as y, onBeforeUnmount as se, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useAttrs as ce, watch as le, withCtx as ue, withModifiers as T } from "vue";
+//#region src/components/ColorPicker/colorUtils.ts
+function E(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function D(e, t = 0) {
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
+}
+function O(e) {
+	let t = e.replace("#", "").trim();
+	return /^[0-9a-f]{6}$/i.test(t) ? {
+		r: parseInt(t.slice(0, 2), 16),
+		g: parseInt(t.slice(2, 4), 16),
+		b: parseInt(t.slice(4, 6), 16)
+	} : null;
+}
+function k(e) {
+	let t = (e) => E(Math.round(e), 0, 255).toString(16).padStart(2, "0");
+	return `#${t(e.r)}${t(e.g)}${t(e.b)}`;
+}
+function A(e) {
+	let t = e.r / 255, n = e.g / 255, r = e.b / 255, i = Math.max(t, n, r), a = i - Math.min(t, n, r), o = 0;
+	a !== 0 && (o = i === t ? ((n - r) / a + (n < r ? 6 : 0)) * 60 : i === n ? ((r - t) / a + 2) * 60 : ((t - n) / a + 4) * 60);
+	let s = i === 0 ? 0 : a / i;
+	return {
+		h: D(o),
+		s: D(s, 4),
+		b: D(i, 4)
+	};
+}
+function j(e) {
+	let t = (e.h % 360 + 360) % 360, n = E(e.s, 0, 1), r = E(e.b, 0, 1), i = r * n, a = i * (1 - Math.abs(t / 60 % 2 - 1)), o = r - i, s = 0, c = 0, l = 0;
+	return t < 60 ? (s = i, c = a, l = 0) : t < 120 ? (s = a, c = i, l = 0) : t < 180 ? (s = 0, c = i, l = a) : t < 240 ? (s = 0, c = a, l = i) : t < 300 ? (s = a, c = 0, l = i) : (s = i, c = 0, l = a), {
+		r: D((s + o) * 255),
+		g: D((c + o) * 255),
+		b: D((l + o) * 255)
+	};
+}
+function de(e) {
+	return /^#[0-9a-f]{6}$/i.test(e.trim());
+}
+function M(e) {
+	let t = e.trim();
+	if (de(t)) return t.toLowerCase();
+	let n = O(t);
+	return n ? k(n) : "#000000";
+}
+//#endregion
+//#region src/components/ColorPicker/gradientUtils.ts
+var fe = 0;
+function N() {
+	return `stop-${++fe}-${Date.now()}`;
+}
+function pe(e) {
+	return /^(linear|radial|conic)-gradient\(/.test(e.trim());
+}
+function me(e) {
+	let t = e.trim();
+	if (!pe(t)) return null;
+	let n = t.match(/^(linear|radial)-gradient\((.+)\)$/i);
+	if (!n) return null;
+	let r = n[1].toLowerCase(), i = n[2], a = [], o = 0, s = "";
+	for (let e of i) e === "(" && o++, e === ")" && o--, e === "," && o === 0 ? (a.push(s.trim()), s = "") : s += e;
+	s && a.push(s.trim());
+	let c = 90, l = 0;
+	if (r === "linear" && a.length > 0) {
+		let e = a[0], t = e.match(/^(\d+(?:\.\d+)?)(deg|turn|grad|rad)$/i);
+		if (t) {
+			c = parseFloat(t[1]);
+			let e = t[2].toLowerCase();
+			e === "turn" ? c *= 360 : e === "grad" ? c *= .9 : e === "rad" && (c *= 180 / Math.PI), l = 1;
+		} else e === "to right" ? (c = 90, l = 1) : e === "to left" ? (c = 270, l = 1) : e === "to bottom" ? (c = 180, l = 1) : e === "to top" ? (c = 0, l = 1) : e === "to bottom right" ? (c = 135, l = 1) : e === "to bottom left" ? (c = 225, l = 1) : e === "to top right" ? (c = 45, l = 1) : e === "to top left" && (c = 315, l = 1);
+	}
+	let u = [];
+	for (let e = l; e < a.length; e++) {
+		let t = a[e].match(/^(#[0-9a-f]{3,8}|rgba?\([^)]+\)|[a-z]+)\s*(\d+(?:\.\d+)?%?)?$/i);
+		if (t) {
+			let e = t[1], n = t[2], r = 0;
+			n ? (r = parseFloat(n), n.endsWith("%") || (r = u.length > 0 ? u[u.length - 1].position + 100 / (a.length - l - 1) : 0)) : r = u.length > 0 ? u[u.length - 1].position + 100 / (a.length - l - 1) : 0, u.push({
+				id: N(),
+				color: P(e),
+				position: Math.min(100, Math.max(0, r))
+			});
+		}
+	}
+	for (; u.length < 2;) u.push({
+		id: N(),
+		color: u.length === 0 ? "#000000" : "#ffffff",
+		position: u.length * 100
+	});
+	return u.sort((e, t) => e.position - t.position), {
+		type: r,
+		angle: c,
+		stops: u
+	};
+}
+function he(e) {
+	let t = e.stops.map((e) => `${e.color} ${Math.round(e.position * 100) / 100}%`).join(", ");
+	return e.type === "linear" ? `linear-gradient(${Math.round(e.angle)}deg, ${t})` : `radial-gradient(${t})`;
+}
+function P(e) {
+	let t = {
+		red: "#ff0000",
+		green: "#008000",
+		blue: "#0000ff",
+		white: "#ffffff",
+		black: "#000000",
+		yellow: "#ffff00",
+		cyan: "#00ffff",
+		magenta: "#ff00ff"
+	}, n = e.toLowerCase();
+	return t[n] ? t[n] : /^#[0-9a-f]{3}$/i.test(e) ? `#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}` : /^#[0-9a-f]{6}$/i.test(e) ? e : /^#[0-9a-f]{8}$/i.test(e) ? e.slice(0, 7) : "#000000";
+}
+function ge() {
+	return {
+		type: "linear",
+		angle: 90,
+		stops: [{
+			id: N(),
+			color: "#1677ff",
+			position: 0
+		}, {
+			id: N(),
+			color: "#ff4d4f",
+			position: 100
+		}]
+	};
+}
+function _e(e) {
+	return `linear-gradient(to right, ${[...e].sort((e, t) => e.position - t.position).map((e) => `${e.color} ${Math.round(e.position * 100) / 100}%`).join(", ")})`;
+}
+//#endregion
+//#region src/components/ColorPicker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var ve = [
+	"disabled",
+	"aria-expanded",
+	"aria-label"
+], ye = {
+	key: 0,
+	class: "m-colorpicker__trigger-text"
+}, be = ["aria-label"], xe = { class: "m-colorpicker__panel-inner" }, Se = {
+	key: 0,
+	class: "m-colorpicker__mode-switch"
+}, Ce = { class: "m-colorpicker__gradient-section" }, we = ["onClick", "onPointerdown"], Te = { class: "m-colorpicker__gradient-stops-list" }, Ee = ["onClick"], De = { class: "m-colorpicker__gradient-stop-pos" }, Oe = ["disabled", "onClick"], ke = { class: "m-colorpicker__gradient-options" }, Ae = {
+	key: 1,
+	class: "m-colorpicker__gradient-angle-unit"
+}, je = { class: "m-colorpicker__sliders" }, Me = { class: "m-colorpicker__input-row" }, Ne = {
+	key: 2,
+	class: "m-colorpicker__presets"
+}, Pe = {
+	key: 0,
+	class: "m-colorpicker__preset-label"
+}, Fe = { class: "m-colorpicker__preset-colors" }, Ie = [
+	"disabled",
+	"aria-label",
+	"onClick"
+], F = /* @__PURE__ */ v({
+	inheritAttrs: !1,
+	__name: "ColorPicker",
+	props: {
+		modelValue: { default: "#1677ff" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		disabledAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		format: { default: "hex" },
+		presets: { default: void 0 },
+		showText: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: void 0 },
+		placement: { default: "bottom-start" },
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		pt: { default: void 0 },
+		gradient: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear",
+		"show",
+		"hide"
+	],
+	setup(v, { expose: D, emit: fe }) {
+		let P = v, F = fe, Le = ce(), { rootAttrs: Re } = e(Le, () => P.pt), ze = te(), Be = u(), Ve = ee("ColorPicker", () => P.size), He = r("m-colorpicker"), Ue = f(() => He), { transitionName: We, transitionCss: Ge } = i({
+			role: "popup",
+			local: () => P.transition,
+			componentName: "ColorPicker",
+			fallback: "scale-fade"
+		}), I = x(!1), L = x(null), R = x(null), Ke = x({}), z = x(null), B = x(null), qe = x(null), Je = x(null), V = x("single"), H = x({
+			h: 0,
+			s: 0,
+			b: 0
+		}), Ye = x(1), U = x(""), W = x(ge()), G = x(""), Xe = f(() => t(P, Be.value.appendTo)), K;
+		le(() => P.modelValue, (e) => {
+			let t = e ?? "#000000";
+			if (t !== K) {
+				if (K = void 0, P.gradient && pe(t)) {
+					V.value = "gradient";
+					let e = me(t);
+					if (e) {
+						let t = G.value, n = t ? W.value.stops.find((e) => e.id === t) : void 0;
+						if (W.value = e, e.stops.length > 0) {
+							let t = !1;
+							if (n) {
+								let r = e.stops.find((e) => Math.abs(e.position - n.position) < .5 && e.color.toLowerCase() === n.color.toLowerCase());
+								r && (G.value = r.id, t = !0);
+							}
+							if (!t) {
+								G.value = e.stops[0].id;
+								let t = O(M(e.stops[0].color));
+								t && (H.value = A(t));
+							}
+						}
+					}
+				} else {
+					V.value = "single";
+					let e = O(M(t));
+					e && (H.value = A(e));
+				}
+				U.value = Y(t);
+			}
+		}, { immediate: !0 });
+		let q = f(() => P.gradient && V.value === "gradient"), J = f(() => k(j(H.value))), Ze = f(() => j(H.value)), Qe = f(() => W.value.stops.find((e) => e.id === G.value)), $e = f(() => _e(W.value.stops)), et = f(() => q.value ? he(W.value) : Y(J.value)), tt = f(() => q.value ? $e.value : J.value), nt = f(() => {
+			let e = j({
+				h: H.value.h,
+				s: 1,
+				b: 1
+			});
+			return `rgb(${e.r}, ${e.g}, ${e.b})`;
+		}), rt = f(() => ({
+			left: `${H.value.h / 360 * 100}%`,
+			background: `hsl(${H.value.h}, 100%, 50%)`
+		})), it = f(() => ({
+			left: `${H.value.s * 100}%`,
+			top: `${(1 - H.value.b) * 100}%`,
+			background: J.value
+		})), at = f(() => ({
+			left: `${Ye.value * 100}%`,
+			background: J.value
+		})), ot = f(() => {
+			let e = Ze.value;
+			return `linear-gradient(to right, rgba(${e.r}, ${e.g}, ${e.b}, 0) 0%, rgba(${e.r}, ${e.g}, ${e.b}, 1) 100%)`;
+		}), st = f(() => [
+			"m-colorpicker",
+			`m-colorpicker--${Ve.value}`,
+			{
+				"m-colorpicker--disabled": P.disabled,
+				"m-colorpicker--open": I.value,
+				"m-colorpicker--gradient": q.value
+			}
+		]);
+		function Y(e) {
+			let t = O(e) ?? {
+				r: 0,
+				g: 0,
+				b: 0
+			}, n = A(t);
+			switch (P.format) {
+				case "rgb": return `rgb(${t.r}, ${t.g}, ${t.b})`;
+				case "hsb": return `hsb(${Math.round(n.h)}, ${Math.round(n.s * 100)}%, ${Math.round(n.b * 100)}%)`;
+				default: return e;
+			}
+		}
+		function X(e, t) {
+			H.value = { ...e }, t !== void 0 && (Ye.value = E(t, 0, 1));
+			let n = k(j(H.value));
+			q.value && Qe.value ? (Qe.value.color = n, Z()) : (U.value = Y(n), K = n, F("update:modelValue", n), F("change", n));
+		}
+		function Z() {
+			let e = he(W.value);
+			K = e, U.value = e, F("update:modelValue", e), F("change", e);
+		}
+		function ct(e) {
+			if (P.disabled || e == null) return;
+			let t = e;
+			if (V.value = t, t === "gradient" && !pe(P.modelValue ?? "")) {
+				W.value = ge();
+				let e = W.value.stops[0];
+				e && (e.color = J.value, G.value = e.id), Z();
+			} else if (t === "single") {
+				let e = W.value.stops[0];
+				if (e) {
+					let t = O(M(e.color));
+					if (t) {
+						H.value = A(t);
+						let e = k(t);
+						U.value = Y(e), F("update:modelValue", e), F("change", e);
+					}
+				}
+			}
+		}
+		function lt(e) {
+			if (P.disabled) return;
+			let t = Je.value;
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = E((e.clientX - n.left) / n.width, 0, 1) * 100, i = null, a = Infinity;
+			for (let e of W.value.stops) {
+				let t = Math.abs(e.position - r);
+				t < a && (a = t, i = e);
+			}
+			if (i && a < 5) {
+				G.value = i.id;
+				let e = O(M(i.color));
+				e && (H.value = A(e));
+				return;
+			}
+			let o = {
+				id: N(),
+				color: J.value,
+				position: Math.round(r)
+			};
+			W.value.stops.push(o), W.value.stops.sort((e, t) => e.position - t.position), G.value = o.id, Z(), dt(t, t, e.pointerId, o);
+		}
+		function ut(e, t) {
+			if (P.disabled) return;
+			e.stopPropagation(), G.value = t.id;
+			let n = O(M(t.color));
+			n && (H.value = A(n));
+			let r = e.currentTarget, i = Je.value;
+			!r || !i || dt(r, i, e.pointerId, t);
+		}
+		function dt(e, t, n, r) {
+			e.setPointerCapture(n);
+			let i = r.id, a = (e) => {
+				let n = t.getBoundingClientRect(), r = E((e.clientX - n.left) / n.width, 0, 1) * 100, a = W.value.stops.find((e) => e.id === i);
+				a && (a.position = r, W.value.stops.sort((e, t) => e.position - t.position), Z());
+			}, o = () => {
+				let t = W.value.stops.find((e) => e.id === i);
+				t && (t.position = Math.round(t.position), W.value.stops.sort((e, t) => e.position - t.position), Z()), e.removeEventListener("pointermove", a), e.removeEventListener("pointerup", o);
+			};
+			e.addEventListener("pointermove", a), e.addEventListener("pointerup", o);
+		}
+		function ft(e) {
+			e != null && (W.value.angle = e, Z());
+		}
+		function pt(e) {
+			e != null && typeof e != "object" && (W.value.type = e, Z());
+		}
+		function mt(e) {
+			if (W.value.stops.length <= 2) return;
+			let t = W.value.stops.findIndex((t) => t.id === e);
+			t > -1 && (W.value.stops.splice(t, 1), G.value === e && (G.value = W.value.stops[0]?.id ?? ""), Z());
+		}
+		function ht(e) {
+			G.value = e.id;
+			let t = O(M(e.color));
+			t && (H.value = A(t));
+		}
+		function gt(e) {
+			if (P.disabled) return;
+			let t = z.value;
+			if (!t) return;
+			t.setPointerCapture(e.pointerId), _t(e);
+			let n = (e) => _t(e), r = () => {
+				t.removeEventListener("pointermove", n), t.removeEventListener("pointerup", r);
+			};
+			t.addEventListener("pointermove", n), t.addEventListener("pointerup", r);
+		}
+		function _t(e) {
+			let t = z.value;
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = E((e.clientX - n.left) / n.width, 0, 1), i = E((e.clientY - n.top) / n.height, 0, 1);
+			X({
+				...H.value,
+				s: r,
+				b: 1 - i
+			});
+		}
+		function vt(e) {
+			if (P.disabled) return;
+			let t = B.value;
+			if (!t) return;
+			t.setPointerCapture(e.pointerId), yt(e);
+			let n = (e) => yt(e), r = () => {
+				t.removeEventListener("pointermove", n), t.removeEventListener("pointerup", r);
+			};
+			t.addEventListener("pointermove", n), t.addEventListener("pointerup", r);
+		}
+		function yt(e) {
+			let t = B.value;
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = E((e.clientX - n.left) / n.width, 0, 1);
+			X({
+				...H.value,
+				h: r * 360
+			});
+		}
+		function bt(e) {
+			if (P.disabled || P.disabledAlpha) return;
+			let t = qe.value;
+			if (!t) return;
+			t.setPointerCapture(e.pointerId), xt(e);
+			let n = (e) => xt(e), r = () => {
+				t.removeEventListener("pointermove", n), t.removeEventListener("pointerup", r);
+			};
+			t.addEventListener("pointermove", n), t.addEventListener("pointerup", r);
+		}
+		function xt(e) {
+			let t = qe.value;
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = E((e.clientX - n.left) / n.width, 0, 1);
+			X(H.value, r);
+		}
+		function St(e) {
+			let t = e.trim();
+			if (q.value) {
+				let e = me(t);
+				if (e) {
+					if (W.value = e, e.stops.length > 0) {
+						G.value = e.stops[0].id;
+						let t = O(M(e.stops[0].color));
+						t && (H.value = A(t));
+					}
+					Z();
+				}
+			} else if (de(t)) {
+				let e = O(t);
+				e && X(A(e));
+			}
+		}
+		function Ct() {
+			U.value = et.value;
+		}
+		function wt() {
+			K = "", F("update:modelValue", ""), F("clear"), $();
+		}
+		function Tt(e) {
+			if (P.disabled) return;
+			let t = O(M(e));
+			t && X(A(t));
+		}
+		async function Q() {
+			if (!I.value || !L.value || (await ae(), !R.value || !L.value)) return;
+			let e = n(L.value.getBoundingClientRect(), P.placement, { gap: 4 });
+			Ke.value = e;
+		}
+		function Et() {
+			P.disabled || I.value || (I.value = !0, F("show"), Q(), document.addEventListener("click", Ot, !0), window.addEventListener("resize", Q), window.addEventListener("scroll", Q, !0));
+		}
+		function $() {
+			I.value && (I.value = !1, F("hide"), document.removeEventListener("click", Ot, !0), window.removeEventListener("resize", Q), window.removeEventListener("scroll", Q, !0));
+		}
+		function Dt() {
+			I.value ? $() : Et();
+		}
+		function Ot(e) {
+			let t = e.target;
+			L.value?.contains(t) || R.value?.contains(t) || $();
+		}
+		return se(() => {
+			$();
+		}), D({
+			open: Et,
+			close: $,
+			toggle: Dt
+		}), (e, t) => (b(), h("div", ie(w(Re), { class: st.value }), [g("button", {
+			ref_key: "triggerRef",
+			ref: L,
+			type: "button",
+			class: "m-colorpicker__trigger",
+			disabled: v.disabled,
+			"aria-expanded": I.value,
+			"aria-haspopup": !0,
+			"aria-label": w(ze).selectColor,
+			onClick: Dt
+		}, [
+			g("span", {
+				class: "m-colorpicker__trigger-swatch",
+				style: y({ background: tt.value })
+			}, null, 4),
+			v.showText ? (b(), h("span", ye, C(et.value), 1)) : m("", !0),
+			v.clearable && v.modelValue ? (b(), p(a, {
+				key: 1,
+				name: "close",
+				size: "sm",
+				class: "m-colorpicker__clear",
+				onClick: T(wt, ["stop"])
+			})) : (b(), p(a, {
+				key: 2,
+				name: "chevron-down",
+				size: "sm",
+				class: "m-colorpicker__arrow"
+			}))
+		], 8, ve), (b(), p(ne, {
+			to: Xe.value.to,
+			disabled: Xe.value.disabled
+		}, [_(re, {
+			name: w(We),
+			css: w(Ge)
+		}, {
+			default: ue(() => [I.value ? (b(), h("div", {
+				key: 0,
+				ref_key: "panelRef",
+				ref: R,
+				class: "m-colorpicker__panel",
+				style: y(Ke.value),
+				role: "dialog",
+				"aria-label": w(ze).selectColor
+			}, [g("div", xe, [
+				v.gradient ? (b(), h("div", Se, [_(o, {
+					"model-value": V.value,
+					block: "",
+					options: [{
+						label: "Single",
+						value: "single"
+					}, {
+						label: "Gradient",
+						value: "gradient"
+					}],
+					size: "small",
+					disabled: v.disabled,
+					"onUpdate:modelValue": ct
+				}, null, 8, ["model-value", "disabled"])])) : m("", !0),
+				q.value ? (b(), h(d, { key: 1 }, [g("div", Ce, [g("div", {
+					ref_key: "gradientBarRef",
+					ref: Je,
+					class: "m-colorpicker__gradient-bar",
+					style: y({ background: $e.value }),
+					onPointerdown: lt
+				}, [(b(!0), h(d, null, S(W.value.stops, (e) => (b(), h("div", {
+					key: e.id,
+					class: oe(["m-colorpicker__gradient-stop", { "m-colorpicker__gradient-stop--active": e.id === G.value }]),
+					style: y({
+						left: `${e.position}%`,
+						background: e.color
+					}),
+					onClick: T((t) => ht(e), ["stop"]),
+					onPointerdown: T((t) => ut(t, e), ["stop"])
+				}, null, 46, we))), 128))], 36), g("div", Te, [(b(!0), h(d, null, S(W.value.stops, (e) => (b(), h("div", {
+					key: e.id,
+					class: oe(["m-colorpicker__gradient-stop-item", { "m-colorpicker__gradient-stop-item--active": e.id === G.value }]),
+					onClick: (t) => ht(e)
+				}, [
+					g("span", {
+						class: "m-colorpicker__gradient-stop-color",
+						style: y({ background: e.color })
+					}, null, 4),
+					g("span", De, C(Math.round(e.position)) + "%", 1),
+					W.value.stops.length > 2 ? (b(), h("button", {
+						key: 0,
+						type: "button",
+						class: "m-colorpicker__gradient-stop-delete",
+						disabled: v.disabled,
+						onClick: T((t) => mt(e.id), ["stop"])
+					}, [_(a, {
+						name: "close",
+						size: "sm"
+					})], 8, Oe)) : m("", !0)
+				], 10, Ee))), 128))])]), g("div", ke, [
+					_(s, {
+						"model-value": W.value.type,
+						options: [{
+							label: "Linear",
+							value: "linear"
+						}, {
+							label: "Radial",
+							value: "radial"
+						}],
+						size: "small",
+						disabled: v.disabled,
+						"onUpdate:modelValue": pt
+					}, null, 8, ["model-value", "disabled"]),
+					W.value.type === "linear" ? (b(), p(l, {
+						key: 0,
+						"model-value": Math.round(W.value.angle),
+						size: "small",
+						min: 0,
+						max: 360,
+						disabled: v.disabled,
+						"onUpdate:modelValue": ft
+					}, null, 8, ["model-value", "disabled"])) : m("", !0),
+					W.value.type === "linear" ? (b(), h("span", Ae, "deg")) : m("", !0)
+				])], 64)) : m("", !0),
+				g("div", {
+					ref_key: "saturationRef",
+					ref: z,
+					class: "m-colorpicker__saturation",
+					style: y({ background: nt.value }),
+					onPointerdown: gt
+				}, [
+					t[1] ||= g("div", { class: "m-colorpicker__saturation-white" }, null, -1),
+					t[2] ||= g("div", { class: "m-colorpicker__saturation-black" }, null, -1),
+					g("div", {
+						class: "m-colorpicker__saturation-handle",
+						style: y(it.value)
+					}, null, 4)
+				], 36),
+				g("div", je, [g("div", {
+					ref_key: "hueRef",
+					ref: B,
+					class: "m-colorpicker__hue",
+					onPointerdown: vt
+				}, [t[3] ||= g("div", { class: "m-colorpicker__hue-track" }, null, -1), g("div", {
+					class: "m-colorpicker__hue-handle",
+					style: y(rt.value)
+				}, null, 4)], 544), v.disabledAlpha ? m("", !0) : (b(), h("div", {
+					key: 0,
+					ref_key: "alphaRef",
+					ref: qe,
+					class: "m-colorpicker__alpha",
+					onPointerdown: bt
+				}, [g("div", {
+					class: "m-colorpicker__alpha-track",
+					style: y({ background: ot.value })
+				}, null, 4), g("div", {
+					class: "m-colorpicker__alpha-handle",
+					style: y(at.value)
+				}, null, 4)], 544))]),
+				g("div", Me, [_(c, {
+					id: Ue.value,
+					modelValue: U.value,
+					"onUpdate:modelValue": t[0] ||= (e) => U.value = e,
+					size: "small",
+					disabled: v.disabled,
+					spellcheck: "false",
+					onChange: St,
+					onBlur: Ct
+				}, null, 8, [
+					"id",
+					"modelValue",
+					"disabled"
+				])]),
+				v.presets?.length ? (b(), h("div", Ne, [(b(!0), h(d, null, S(v.presets, (e, t) => (b(), h("div", {
+					key: t,
+					class: "m-colorpicker__preset-group"
+				}, [e.label ? (b(), h("div", Pe, C(e.label), 1)) : m("", !0), g("div", Fe, [(b(!0), h(d, null, S(e.colors, (e) => (b(), h("button", {
+					key: e,
+					type: "button",
+					class: oe(["m-colorpicker__preset-swatch", { "m-colorpicker__preset-swatch--active": w(M)(e) === J.value }]),
+					style: y({ background: e }),
+					disabled: v.disabled,
+					"aria-label": e,
+					onClick: (t) => Tt(e)
+				}, null, 14, Ie))), 128))])]))), 128))])) : m("", !0)
+			])], 12, be)) : m("", !0)]),
+			_: 1
+		}, 8, ["name", "css"])], 8, ["to", "disabled"]))], 16));
+	}
+});
+//#endregion
+export { F as MColorPicker };