@templatical/editor 0.6.3 → 0.6.5

package/dist/{NumberWithSuffix-DkXUez9t.js → NumberWithSuffix-Dw8dN1Pt.js}

@@ -1,11 +1,11 @@
-import { Dt as e, F as t, L as n, M as r, Mt as i, Ot as a, P as o, Q as s, S as c, V as l, _ as u, b as d, d as f, g as p, h as m, it as h, l as ee, m as g, p as _, t as v } from "./vue.runtime.esm-bundler-DpvJL-nX.js";
-import { t as y } from "./dist-B1IR0bpH.js";
-import { t as te } from "./useI18n-lb2DHDiu.js";
-import { h as b, i as x, m as S, p as C, u as ne } from "./styleConstants-fWzlIIwN.js";
+import { A as e, F as t, M as n, N as r, X as i, at as a, b as o, d as s, f as c, h as l, l as u, m as d, ot as f, p, rt as m, s as h, st as g, t as ee, v as _, z as te } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
+import { t as v } from "./dist-BzRLLpfq.js";
+import { t as ne } from "./useI18n-CgmQftNf.js";
+import { h as y, i as b, m as x, p as S, u as C } from "./styleConstants-fWzlIIwN.js";
 //#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
 var w = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, T = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
 360 / (Math.PI * 2);
-var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+var re = (e) => j(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
 	r: parseInt(e[0] + e[0], 16),
 	g: parseInt(e[1] + e[1], 16),
 	b: parseInt(e[2] + e[2], 16),
@@ -15,7 +15,7 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 	g: parseInt(e.substring(2, 4), 16),
 	b: parseInt(e.substring(4, 6), 16),
 	a: e.length === 8 ? T(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
-}), D = (e) => ae(k(e)), ie = ({ h: e, s: t, v: n, a: r }) => {
+}), ie = (e) => A(O(e)), ae = ({ h: e, s: t, v: n, a: r }) => {
 	let i = (200 - t) * n / 100;
 	return {
 		h: T(e),
@@ -23,10 +23,10 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 		l: T(i / 2),
 		a: T(r, 2)
 	};
-}, O = (e) => {
-	let { h: t, s: n, l: r } = ie(e);
+}, D = (e) => {
+	let { h: t, s: n, l: r } = ae(e);
 	return `hsl(${t}, ${n}%, ${r}%)`;
-}, k = ({ h: e, s: t, v: n, a: r }) => {
+}, O = ({ 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 {
@@ -56,13 +56,13 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 		][c] * 255),
 		a: T(r, 2)
 	};
-}, A = (e) => {
+}, k = (e) => {
 	let t = e.toString(16);
 	return t.length < 2 ? "0" + t : t;
-}, ae = ({ r: e, g: t, b: n, a: r }) => {
-	let i = r < 1 ? A(T(r * 255)) : "";
-	return "#" + A(e) + A(t) + A(n) + i;
-}, oe = ({ r: e, g: t, b: n, a: r }) => {
+}, A = ({ r: e, g: t, b: n, a: r }) => {
+	let i = r < 1 ? k(T(r * 255)) : "";
+	return "#" + k(e) + k(t) + k(n) + i;
+}, j = ({ 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: T(60 * (o < 0 ? o + 6 : o)),
@@ -70,11 +70,11 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 		v: T(i / 255 * 100),
 		a: r
 	};
-}, j = (e, t) => {
+}, M = (e, t) => {
 	if (e === t) return !0;
 	for (let n in e) if (e[n] !== t[n]) return !1;
 	return !0;
-}, M = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : j(E(e), E(t)), N = {}, P = (e) => {
+}, oe = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : M(E(e), E(t)), N = {}, P = (e) => {
 	let t = N[e];
 	return t || (t = document.createElement("template"), t.innerHTML = e, N[e] = t), t;
 }, F = (e, t, n) => {
@@ -137,7 +137,7 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 	update({ h: e }) {
 		this.h = e, this.style([{
 			left: `${e / 360 * 100}%`,
-			color: O({
+			color: D({
 				h: e,
 				s: 100,
 				v: 100,
@@ -156,8 +156,8 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 		this.hsva = e, this.style([{
 			top: `${100 - e.v}%`,
 			left: `${e.s}%`,
-			color: O(e)
-		}, { "background-color": O({
+			color: D(e)
+		}, { "background-color": D({
 			h: e.h,
 			s: 100,
 			v: 100,
@@ -215,7 +215,7 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 		};
 		this[X](n);
 		let r;
-		!j(n, t) && !this[q](r = this.colorModel.fromHsva(n)) && (this[J] = r, F(this, "color-changed", { value: r }));
+		!M(n, t) && !this[q](r = this.colorModel.fromHsva(n)) && (this[J] = r, F(this, "color-changed", { value: r }));
 	}
 	[q](e) {
 		return this.color && this.colorModel.equal(e, this.color);
@@ -226,13 +226,13 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 }, ce = {
 	defaultColor: "#000",
 	toHsva: re,
-	fromHsva: ({ h: e, s: t, v: n }) => D({
+	fromHsva: ({ h: e, s: t, v: n }) => ie({
 		h: e,
 		s: t,
 		v: n,
 		a: 1
 	}),
-	equal: M,
+	equal: oe,
 	fromAttr: (e) => e
 }, le = class extends se {
 	get colorModel() {
@@ -251,11 +251,11 @@ var de = [
 	"placeholder",
 	"disabled",
 	"aria-label"
-], pe = ["color", "aria-label"], me = /* @__PURE__ */ c({
+], pe = ["color", "aria-label"], me = /* @__PURE__ */ o({
 	__name: "ColorPicker",
 	props: {
 		modelValue: {},
-		placeholder: { default: x },
+		placeholder: { default: b },
 		size: { default: "default" },
 		swatchOnly: {
 			type: Boolean,
@@ -268,50 +268,50 @@ var de = [
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let i = t, o = n, { t: c } = te(), f = s(!1), m = s(), b = s();
-		y(m, () => {
-			f.value = !1;
-		}, { ignore: [b] });
-		let x = _({
-			get: () => i.modelValue || "#000000",
+		let r = t, o = n, { t: u } = ne(), p = i(!1), g = i(), y = i();
+		v(g, () => {
+			p.value = !1;
+		}, { ignore: [y] });
+		let b = s({
+			get: () => r.modelValue || "#000000",
 			set: (e) => o("update:modelValue", e)
 		});
-		function S(e) {
-			x.value = e.detail.value;
+		function x(e) {
+			b.value = e.detail.value;
 		}
-		function C(e) {
-			x.value = e.target.value;
+		function S(e) {
+			b.value = e.target.value;
 		}
-		return (n, i) => (r(), u("div", { class: e(["tpl:flex tpl:gap-2 tpl:relative", t.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
-			g("button", {
+		return (n, r) => (e(), l("div", { class: a(["tpl:flex tpl:gap-2 tpl:relative", t.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
+			c("button", {
 				ref_key: "swatchRef",
-				ref: b,
+				ref: y,
 				type: "button",
 				disabled: t.disabled,
-				"aria-label": h(c).colorPicker.pickColor,
-				"aria-expanded": f.value,
-				class: e([
+				"aria-label": m(u).colorPicker.pickColor,
+				"aria-expanded": p.value,
+				class: a([
 					"tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
 					t.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
-					f.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !t.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
+					p.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !t.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
 					t.size === "large" ? "tpl:size-12" : "tpl:size-10"
 				]),
-				onClick: i[0] ||= (e) => !t.disabled && (f.value = !f.value)
-			}, [g("span", {
+				onClick: r[0] ||= (e) => !t.disabled && (p.value = !p.value)
+			}, [c("span", {
 				class: "tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]",
-				style: a({ backgroundColor: x.value })
+				style: f({ backgroundColor: b.value })
 			}, null, 4)], 10, de),
-			t.swatchOnly ? p("", !0) : (r(), u("input", {
+			t.swatchOnly ? d("", !0) : (e(), l("input", {
 				key: 0,
 				type: "text",
-				class: e(h(ne)),
+				class: a(m(C)),
 				value: t.modelValue,
 				placeholder: t.placeholder,
 				disabled: t.disabled,
-				"aria-label": h(c).colorPicker.hexValue,
-				onInput: C
+				"aria-label": m(u).colorPicker.hexValue,
+				onInput: S
 			}, null, 42, fe)),
-			d(v, {
+			_(ee, {
 				"enter-active-class": "tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
 				"enter-from-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1",
 				"enter-to-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
@@ -319,17 +319,17 @@ var de = [
 				"leave-from-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
 				"leave-to-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1"
 			}, {
-				default: l(() => [f.value ? (r(), u("div", {
+				default: te(() => [p.value ? (e(), l("div", {
 					key: 0,
 					ref_key: "popoverRef",
-					ref: m,
+					ref: g,
 					class: "tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg"
-				}, [g("hex-color-picker", {
-					color: x.value,
-					"aria-label": h(c).colorPicker.pickColor,
-					onColorChanged: S,
-					onKeydown: i[1] ||= ee((e) => f.value = !1, ["escape"])
-				}, null, 40, pe)], 512)) : p("", !0)]),
+				}, [c("hex-color-picker", {
+					color: b.value,
+					"aria-label": m(u).colorPicker.pickColor,
+					onColorChanged: x,
+					onKeydown: r[1] ||= h((e) => p.value = !1, ["escape"])
+				}, null, 40, pe)], 512)) : d("", !0)]),
 				_: 1
 			})
 		], 2));
@@ -339,65 +339,65 @@ var de = [
 	"aria-label",
 	"title",
 	"onClick"
-], ge = { key: 1 }, _e = /* @__PURE__ */ c({
+], ge = { key: 1 }, _e = /* @__PURE__ */ o({
 	__name: "SlidingPillSelect",
 	props: {
 		options: {},
 		modelValue: {}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: t }) {
-		let s = e, c = t, l = _(() => s.options.findIndex((e) => e.value === s.modelValue)), d = _(() => `translateX(${Math.max(l.value, 0) * 100}%)`);
-		return (t, s) => (r(), u("div", {
+	setup(r, { emit: i }) {
+		let a = r, o = i, c = s(() => a.options.findIndex((e) => e.value === a.modelValue)), m = s(() => `translateX(${Math.max(c.value, 0) * 100}%)`);
+		return (i, a) => (e(), l("div", {
 			role: "radiogroup",
 			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
-			style: a({
-				gridTemplateColumns: `repeat(${e.options.length}, 1fr)`,
+			style: f({
+				gridTemplateColumns: `repeat(${r.options.length}, 1fr)`,
 				backgroundColor: "var(--tpl-bg-hover)"
 			})
-		}, [l.value >= 0 ? (r(), u("div", {
+		}, [c.value >= 0 ? (e(), l("div", {
 			key: 0,
 			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
-			style: a({
+			style: f({
 				left: "4px",
-				width: `calc((100% - 8px) / ${e.options.length})`,
-				transform: d.value,
+				width: `calc((100% - 8px) / ${r.options.length})`,
+				transform: m.value,
 				backgroundColor: "var(--tpl-bg)",
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			})
-		}, null, 4)) : p("", !0), (r(!0), u(f, null, o(e.options, (t) => (r(), u("button", {
-			key: t.value,
+		}, null, 4)) : d("", !0), (e(!0), l(u, null, n(r.options, (n) => (e(), l("button", {
+			key: n.value,
 			role: "radio",
-			"aria-checked": e.modelValue === t.value,
-			"aria-label": t.label,
+			"aria-checked": r.modelValue === n.value,
+			"aria-label": n.label,
 			class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium",
-			style: a({
-				color: e.modelValue === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+			style: f({
+				color: r.modelValue === n.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
 				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			}),
-			title: t.label,
-			onClick: (e) => c("update:modelValue", t.value)
-		}, [t.icon ? (r(), m(n(t.icon), {
+			title: n.label,
+			onClick: (e) => o("update:modelValue", n.value)
+		}, [n.icon ? (e(), p(t(n.icon), {
 			key: 0,
 			size: 14,
 			"stroke-width": 2
-		})) : (r(), u("span", ge, i(t.label), 1))], 12, he))), 128))], 4));
+		})) : (e(), l("span", ge, g(n.label), 1))], 12, he))), 128))], 4));
 	}
-}), ve = { class: "tpl:mb-3.5" }, ye = /* @__PURE__ */ c({
+}), ve = { class: "tpl:mb-3.5" }, ye = /* @__PURE__ */ o({
 	__name: "FieldRow",
 	props: { label: {} },
-	setup(n) {
-		return (a, o) => (r(), u("div", ve, [n.label ? (r(), u("label", {
+	setup(t) {
+		return (n, i) => (e(), l("div", ve, [t.label ? (e(), l("label", {
 			key: 0,
-			class: e(h(b))
-		}, i(n.label), 3)) : p("", !0), t(a.$slots, "default")]));
+			class: a(m(y))
+		}, g(t.label), 3)) : d("", !0), r(n.$slots, "default")]));
 	}
 }), be = { class: "tpl:flex tpl:items-stretch" }, xe = [
 	"value",
 	"min",
 	"max"
-], Se = /* @__PURE__ */ c({
+], Se = /* @__PURE__ */ o({
 	__name: "NumberWithSuffix",
 	props: {
 		modelValue: {},
@@ -407,15 +407,15 @@ var de = [
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let a = n;
-		return (n, o) => (r(), u("div", be, [g("input", {
+		let r = n;
+		return (n, i) => (e(), l("div", be, [c("input", {
 			type: "number",
-			class: e(h(C)),
+			class: a(m(S)),
 			value: t.modelValue,
 			min: t.min,
 			max: t.max,
-			onInput: o[0] ||= (e) => a("update:modelValue", Number(e.target.value))
-		}, null, 42, xe), g("span", { class: e(h(S)) }, i(t.suffix), 3)]));
+			onInput: i[0] ||= (e) => r("update:modelValue", Number(e.target.value))
+		}, null, 42, xe), c("span", { class: a(m(x)) }, g(t.suffix), 3)]));
 	}
 });
 //#endregion