@templatical/editor 0.16.0 → 0.16.1

package/dist/NumberWithSuffix-CrA6quxx.js

@@ -1,445 +0,0 @@
-import { A as e, Dt as t, Et as n, N as r, O as i, Ot as a, R as o, Y as s, _ as c, c as l, d as u, h as d, j as f, l as p, nt as m, r as h, s as g, u as _ } from "./vue.runtime.esm-bundler-l0XAqiyv.js";
-import { s as v, t as y } from "./runtime-dom.esm-bundler-BzuoCyNp.js";
-import { t as b } from "./dist-BEWiuOMi.js";
-import { t as ee } from "./useI18n-C-TDeJBt.js";
-import { t as te } from "./x-CQSvXnGR.js";
-import { h as x, m as S, p as C, u as ne } from "./styleConstants-lGobwiLH.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 E = (e) => ae(D(e)), D = (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),
-	a: e.length === 4 ? T(parseInt(e[3] + e[3], 16) / 255, 2) : 1
-} : {
-	r: parseInt(e.substring(0, 2), 16),
-	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
-}), O = (e) => ie(re(e)), k = ({ h: e, s: t, v: n, a: r }) => {
-	let i = (200 - t) * n / 100;
-	return {
-		h: T(e),
-		s: T(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
-		l: T(i / 2),
-		a: T(r, 2)
-	};
-}, A = (e) => {
-	let { h: t, s: n, l: r } = k(e);
-	return `hsl(${t}, ${n}%, ${r}%)`;
-}, re = ({ 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: T([
-			n,
-			o,
-			a,
-			a,
-			s,
-			n
-		][c] * 255),
-		g: T([
-			s,
-			n,
-			n,
-			o,
-			a,
-			a
-		][c] * 255),
-		b: T([
-			a,
-			a,
-			s,
-			n,
-			n,
-			o
-		][c] * 255),
-		a: T(r, 2)
-	};
-}, j = (e) => {
-	let t = e.toString(16);
-	return t.length < 2 ? "0" + t : t;
-}, ie = ({ r: e, g: t, b: n, a: r }) => {
-	let i = r < 1 ? j(T(r * 255)) : "";
-	return "#" + j(e) + j(t) + j(n) + i;
-}, ae = ({ 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)),
-		s: T(i ? a / i * 100 : 0),
-		v: T(i / 255 * 100),
-		a: r
-	};
-}, M = (e, t) => {
-	if (e === t) return !0;
-	for (let n in e) if (e[n] !== t[n]) return !1;
-	return !0;
-}, N = (e, t) => e.toLowerCase() === t.toLowerCase() || M(D(e), D(t)), P = {}, F = (e) => {
-	let t = P[e];
-	return t || (t = document.createElement("template"), t.innerHTML = e, P[e] = t), t;
-}, I = (e, t, n) => {
-	e.dispatchEvent(new CustomEvent(t, {
-		bubbles: !0,
-		detail: n
-	}));
-}, L = !1, R = (e) => "touches" in e, oe = (e) => L && !R(e) ? !1 : (L ||= R(e), !0), z = (e, t) => {
-	let n = R(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
-	I(e.el, "move", e.getMove({
-		x: w((n.pageX - (r.left + window.pageXOffset)) / r.width),
-		y: w((n.pageY - (r.top + window.pageYOffset)) / r.height)
-	}));
-}, B = (e, t) => {
-	let n = t.keyCode;
-	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), I(e.el, "move", e.getMove({
-		x: n === 39 ? .01 : n === 37 ? -.01 : n === 34 ? .05 : n === 33 ? -.05 : n === 35 ? 1 : n === 36 ? -1 : 0,
-		y: n === 40 ? .01 : n === 38 ? -.01 : 0
-	}, !0)));
-}, V = class {
-	constructor(e, t, n, r) {
-		let i = F(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
-		e.appendChild(i.content.cloneNode(!0));
-		let a = e.querySelector(`[part=${t}]`);
-		a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
-	}
-	set dragging(e) {
-		let t = e ? document.addEventListener : document.removeEventListener;
-		t(L ? "touchmove" : "mousemove", this), t(L ? "touchend" : "mouseup", this);
-	}
-	handleEvent(e) {
-		switch (e.type) {
-			case "mousedown":
-			case "touchstart":
-				if (e.preventDefault(), !oe(e) || !L && e.button != 0) return;
-				this.el.focus(), z(this, e), this.dragging = !0;
-				break;
-			case "mousemove":
-			case "touchmove":
-				e.preventDefault(), z(this, e);
-				break;
-			case "mouseup":
-			case "touchend":
-				this.dragging = !1;
-				break;
-			case "keydown":
-				B(this, e);
-				break;
-		}
-	}
-	style(e) {
-		e.forEach((e, t) => {
-			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
-		});
-	}
-}, H = class extends V {
-	constructor(e) {
-		super(e, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", !1);
-	}
-	update({ h: e }) {
-		this.h = e, this.style([{
-			left: `${e / 360 * 100}%`,
-			color: A({
-				h: e,
-				s: 100,
-				v: 100,
-				a: 1
-			})
-		}]), this.el.setAttribute("aria-valuenow", `${T(e)}`);
-	}
-	getMove(e, t) {
-		return { h: t ? w(this.h + e.x * 360, 0, 360) : 360 * e.x };
-	}
-}, U = class extends V {
-	constructor(e) {
-		super(e, "saturation", "aria-label=\"Color\"", !0);
-	}
-	update(e) {
-		this.hsva = e, this.style([{
-			top: `${100 - e.v}%`,
-			left: `${e.s}%`,
-			color: A(e)
-		}, { "background-color": A({
-			h: e.h,
-			s: 100,
-			v: 100,
-			a: 1
-		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${T(e.s)}%, Brightness ${T(e.v)}%`);
-	}
-	getMove(e, t) {
-		return {
-			s: t ? w(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
-			v: t ? w(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
-		};
-	}
-}, W = ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}", G = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", K = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", q = Symbol("same"), J = Symbol("color"), Y = Symbol("hsva"), X = Symbol("update"), Z = Symbol("parts"), Q = Symbol("css"), $ = Symbol("sliders"), se = class extends HTMLElement {
-	static get observedAttributes() {
-		return ["color"];
-	}
-	get [Q]() {
-		return [
-			W,
-			G,
-			K
-		];
-	}
-	get [$]() {
-		return [U, H];
-	}
-	get color() {
-		return this[J];
-	}
-	set color(e) {
-		if (!this[q](e)) {
-			let t = this.colorModel.toHsva(e);
-			this[X](t), this[J] = e;
-		}
-	}
-	constructor() {
-		super();
-		let e = F(`<style>${this[Q].join("")}</style>`), t = this.attachShadow({ mode: "open" });
-		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[Z] = this[$].map((e) => new e(t));
-	}
-	connectedCallback() {
-		if (this.hasOwnProperty("color")) {
-			let e = this.color;
-			delete this.color, this.color = e;
-		} else this.color ||= this.colorModel.defaultColor;
-	}
-	attributeChangedCallback(e, t, n) {
-		let r = this.colorModel.fromAttr(n);
-		this[q](r) || (this.color = r);
-	}
-	handleEvent(e) {
-		let t = this[Y], n = {
-			...t,
-			...e.detail
-		};
-		this[X](n);
-		let r;
-		!M(n, t) && !this[q](r = this.colorModel.fromHsva(n)) && (this[J] = r, I(this, "color-changed", { value: r }));
-	}
-	[q](e) {
-		return this.color && this.colorModel.equal(e, this.color);
-	}
-	[X](e) {
-		this[Y] = e, this[Z].forEach((t) => t.update(e));
-	}
-}, ce = {
-	defaultColor: "#000",
-	toHsva: E,
-	fromHsva: ({ h: e, s: t, v: n }) => O({
-		h: e,
-		s: t,
-		v: n,
-		a: 1
-	}),
-	equal: N,
-	fromAttr: (e) => e
-}, le = class extends se {
-	get colorModel() {
-		return ce;
-	}
-}, ue = class extends le {};
-customElements.define("hex-color-picker", ue);
-//#endregion
-//#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
-var de = [
-	"disabled",
-	"aria-label",
-	"aria-expanded"
-], fe = {
-	key: 0,
-	class: "tpl:relative tpl:flex-1"
-}, pe = [
-	"value",
-	"placeholder",
-	"disabled",
-	"aria-label"
-], me = ["aria-label", "title"], he = ["color", "aria-label"], ge = /* @__PURE__ */ c({
-	__name: "ColorPicker",
-	props: {
-		modelValue: {},
-		placeholder: { default: "" },
-		seedColor: { default: "#ffffff" },
-		swatchOnly: {
-			type: Boolean,
-			default: !1
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: ["update:modelValue"],
-	setup(e, { emit: r }) {
-		let a = e, c = r, { t: f } = ee(), p = s(!1), h = s(), x = s(), S = s(!1);
-		b(h, () => {
-			p.value = !1;
-		}, { ignore: [x] });
-		let C = g(() => !a.modelValue), w = g(() => a.modelValue || a.seedColor), T = g(() => !a.swatchOnly && !a.disabled && !C.value);
-		function E(e) {
-			S.value = !0, c("update:modelValue", e.detail.value);
-		}
-		function D() {
-			S.value = !1;
-		}
-		function O() {
-			!S.value && C.value && c("update:modelValue", w.value);
-		}
-		function k(e) {
-			c("update:modelValue", e.target.value);
-		}
-		function A() {
-			c("update:modelValue", "");
-		}
-		return (r, a) => (i(), u("div", { class: n(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", e.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
-			l("button", {
-				ref_key: "swatchRef",
-				ref: x,
-				type: "button",
-				disabled: e.disabled,
-				"aria-label": m(f).colorPicker.pickColor,
-				"aria-expanded": p.value,
-				class: n([
-					"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)]",
-					e.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
-					p.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !e.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
-					"tpl:size-10"
-				]),
-				onClick: a[0] ||= (t) => !e.disabled && (p.value = !p.value)
-			}, [l("span", {
-				class: n(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": C.value }]),
-				style: t(C.value ? void 0 : { backgroundColor: e.modelValue })
-			}, null, 6)], 10, de),
-			e.swatchOnly ? _("", !0) : (i(), u("div", fe, [l("input", {
-				type: "text",
-				class: n([m(ne), "tpl:w-full"]),
-				style: t(T.value ? { paddingRight: "2.25rem" } : void 0),
-				value: e.modelValue,
-				placeholder: e.placeholder || m(f).colorPicker.notSet,
-				disabled: e.disabled,
-				"aria-label": m(f).colorPicker.hexValue,
-				onInput: k
-			}, null, 46, pe), T.value ? (i(), u("button", {
-				key: 0,
-				type: "button",
-				"aria-label": m(f).colorPicker.clear,
-				title: m(f).colorPicker.clear,
-				class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]",
-				onClick: A
-			}, [d(m(te), {
-				size: 14,
-				"stroke-width": 1.5
-			})], 8, me)) : _("", !0)])),
-			d(y, {
-				"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",
-				"leave-active-class": "tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
-				"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: o(() => [p.value ? (i(), u("div", {
-					key: 0,
-					ref_key: "popoverRef",
-					ref: h,
-					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"
-				}, [l("hex-color-picker", {
-					color: w.value,
-					"aria-label": m(f).colorPicker.pickColor,
-					onColorChanged: E,
-					onPointerdown: D,
-					onPointerup: O,
-					onKeydown: a[1] ||= v((e) => p.value = !1, ["escape"])
-				}, null, 40, he)], 512)) : _("", !0)]),
-				_: 1
-			})
-		], 2));
-	}
-}), _e = [
-	"aria-checked",
-	"aria-label",
-	"title",
-	"onClick"
-], ve = { key: 1 }, ye = /* @__PURE__ */ c({
-	__name: "SlidingPillSelect",
-	props: {
-		options: {},
-		modelValue: {}
-	},
-	emits: ["update:modelValue"],
-	setup(n, { emit: o }) {
-		let s = n, c = o, l = g(() => s.options.findIndex((e) => e.value === s.modelValue)), d = g(() => `translateX(${Math.max(l.value, 0) * 100}%)`);
-		return (o, s) => (i(), u("div", {
-			role: "radiogroup",
-			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
-			style: t({
-				gridTemplateColumns: `repeat(${n.options.length}, 1fr)`,
-				backgroundColor: "var(--tpl-bg-hover)"
-			})
-		}, [l.value >= 0 ? (i(), u("div", {
-			key: 0,
-			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
-			style: t({
-				left: "4px",
-				width: `calc((100% - 8px) / ${n.options.length})`,
-				transform: d.value,
-				backgroundColor: "var(--tpl-bg)",
-				boxShadow: "var(--tpl-shadow)",
-				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
-			})
-		}, null, 4)) : _("", !0), (i(!0), u(h, null, e(n.options, (e) => (i(), u("button", {
-			key: e.value,
-			role: "radio",
-			"aria-checked": n.modelValue === e.value,
-			"aria-label": e.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: t({
-				color: n.modelValue === e.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
-			}),
-			title: e.label,
-			onClick: (t) => c("update:modelValue", e.value)
-		}, [e.icon ? (i(), p(r(e.icon), {
-			key: 0,
-			size: 14,
-			"stroke-width": 2
-		})) : (i(), u("span", ve, a(e.label), 1))], 12, _e))), 128))], 4));
-	}
-}), be = { class: "tpl:mb-3.5" }, xe = /* @__PURE__ */ c({
-	__name: "FieldRow",
-	props: { label: {} },
-	setup(e) {
-		return (t, r) => (i(), u("div", be, [e.label ? (i(), u("label", {
-			key: 0,
-			class: n(m(x))
-		}, a(e.label), 3)) : _("", !0), f(t.$slots, "default")]));
-	}
-}), Se = { class: "tpl:flex tpl:items-stretch" }, Ce = [
-	"value",
-	"min",
-	"max"
-], we = /* @__PURE__ */ c({
-	__name: "NumberWithSuffix",
-	props: {
-		modelValue: {},
-		min: {},
-		max: {},
-		suffix: {}
-	},
-	emits: ["update:modelValue"],
-	setup(e, { emit: t }) {
-		let r = t;
-		return (t, o) => (i(), u("div", Se, [l("input", {
-			type: "number",
-			class: n(m(C)),
-			value: e.modelValue,
-			min: e.min,
-			max: e.max,
-			onInput: o[0] ||= (e) => r("update:modelValue", Number(e.target.value))
-		}, null, 42, Ce), l("span", { class: n(m(S)) }, a(e.suffix), 3)]));
-	}
-});
-//#endregion
-export { ge as i, xe as n, ye as r, we as t };