@templatical/editor 0.34.3 → 0.36.0

package/dist/{FieldRow-BWt7ECqo.js → FieldRow-C8nOknr_.js}

@@ -1,4 +1,4 @@
-import { Dt as e, M as t, Ot as n, P as r, c as i, d as a, h as o, j as s, k as c, kt as l, l as u, r as d, rt as f, s as p, u as m, v as h } from "./vue.runtime.esm-bundler-D9JUcKrV.js";
+import { A as e, At as t, F as n, M as r, N as i, at as a, c as o, d as s, h as c, jt as l, kt as u, l as d, r as f, s as p, u as m, v as h } from "./vue.runtime.esm-bundler-DShF3P6k.js";
 import { g, h as _, m as v } from "./styleConstants-C_YAPdQS.js";
 //#region src/components/ToggleSwitch.vue?vue&type=script&setup=true&lang.ts
 var y = { key: 0 }, b = {
@@ -17,21 +17,21 @@ var y = { key: 0 }, b = {
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(n, { emit: r }) {
-		let s = r;
-		return (r, u) => (c(), a("label", { class: e(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", n.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [r.$slots.default || n.label || n.required ? (c(), a("span", y, [t(r.$slots, "default", {}, () => [o(l(n.label), 1)]), n.required ? (c(), a("span", b, " *")) : m("", !0)])) : m("", !0), i("button", {
+	setup(t, { emit: n }) {
+		let r = n;
+		return (n, a) => (e(), s("label", { class: u(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", t.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [n.$slots.default || t.label || t.required ? (e(), s("span", y, [i(n.$slots, "default", {}, () => [c(l(t.label), 1)]), t.required ? (e(), s("span", b, " *")) : m("", !0)])) : m("", !0), o("button", {
 			type: "button",
 			role: "switch",
-			"aria-checked": n.modelValue,
-			"aria-label": n.label,
-			disabled: n.disabled,
-			class: e([
+			"aria-checked": t.modelValue,
+			"aria-label": t.label,
+			disabled: t.disabled,
+			class: u([
 				"tpl:relative tpl:inline-flex tpl:h-5 tpl:w-9 tpl:shrink-0 tpl:rounded-full tpl:border-2 tpl:border-transparent tpl:transition-colors tpl:duration-200",
-				n.modelValue ? "tpl:bg-[var(--tpl-primary)]" : "tpl:bg-[var(--tpl-border)]",
-				n.disabled ? "tpl:cursor-not-allowed tpl:opacity-60" : "tpl:cursor-pointer"
+				t.modelValue ? "tpl:bg-[var(--tpl-primary)]" : "tpl:bg-[var(--tpl-border)]",
+				t.disabled ? "tpl:cursor-not-allowed tpl:opacity-60" : "tpl:cursor-pointer"
 			]),
-			onClick: u[0] ||= (e) => !n.disabled && s("update:modelValue", !n.modelValue)
-		}, [i("span", { class: e(["tpl:pointer-events-none tpl:inline-block tpl:size-4 tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow)] tpl:transition-transform tpl:duration-200", n.modelValue ? "tpl:translate-x-4" : "tpl:translate-x-0"]) }, null, 2)], 10, x)], 2));
+			onClick: a[0] ||= (e) => !t.disabled && r("update:modelValue", !t.modelValue)
+		}, [o("span", { class: u(["tpl:pointer-events-none tpl:inline-block tpl:size-4 tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow)] tpl:transition-transform tpl:duration-200", t.modelValue ? "tpl:translate-x-4" : "tpl:translate-x-0"]) }, null, 2)], 10, x)], 2));
 	}
 }), C = [
 	"aria-checked",
@@ -45,43 +45,43 @@ var y = { key: 0 }, b = {
 		modelValue: {}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: t }) {
-		let i = e, o = t, f = p(() => i.options.findIndex((e) => e.value === i.modelValue)), h = p(() => `translateX(${Math.max(f.value, 0) * 100}%)`);
-		return (t, i) => (c(), a("div", {
+	setup(i, { emit: a }) {
+		let o = i, c = a, u = p(() => o.options.findIndex((e) => e.value === o.modelValue)), h = p(() => `translateX(${Math.max(u.value, 0) * 100}%)`);
+		return (a, o) => (e(), s("div", {
 			role: "radiogroup",
 			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
-			style: n({
-				gridTemplateColumns: `repeat(${e.options.length}, 1fr)`,
+			style: t({
+				gridTemplateColumns: `repeat(${i.options.length}, 1fr)`,
 				backgroundColor: "var(--tpl-bg-hover)"
 			})
-		}, [f.value >= 0 ? (c(), a("div", {
+		}, [u.value >= 0 ? (e(), s("div", {
 			key: 0,
 			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
-			style: n({
+			style: t({
 				left: "4px",
-				width: `calc((100% - 8px) / ${e.options.length})`,
+				width: `calc((100% - 8px) / ${i.options.length})`,
 				transform: h.value,
 				backgroundColor: "var(--tpl-bg)",
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			})
-		}, null, 4)) : m("", !0), (c(!0), a(d, null, s(e.options, (t) => (c(), a("button", {
-			key: t.value,
+		}, null, 4)) : m("", !0), (e(!0), s(f, null, r(i.options, (r) => (e(), s("button", {
+			key: r.value,
 			role: "radio",
-			"aria-checked": e.modelValue === t.value,
-			"aria-label": t.label,
+			"aria-checked": i.modelValue === r.value,
+			"aria-label": r.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: n({
-				color: e.modelValue === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+			style: t({
+				color: i.modelValue === r.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
 				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			}),
-			title: t.label,
-			onClick: (e) => o("update:modelValue", t.value)
-		}, [t.icon ? (c(), u(r(t.icon), {
+			title: r.label,
+			onClick: (e) => c("update:modelValue", r.value)
+		}, [r.icon ? (e(), d(n(r.icon), {
 			key: 0,
 			size: 14,
 			"stroke-width": 2
-		})) : (c(), a("span", w, l(t.label), 1))], 12, C))), 128))], 4));
+		})) : (e(), s("span", w, l(r.label), 1))], 12, C))), 128))], 4));
 	}
 }), E = { class: "tpl:flex tpl:items-stretch" }, D = [
 	"data-testid",
@@ -100,28 +100,28 @@ var y = { key: 0 }, b = {
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
 		let r = n;
-		function o(e) {
+		function i(e) {
 			let t = e.target;
 			t.validity?.badInput || r("update:modelValue", Number(t.value));
 		}
-		return (n, r) => (c(), a("div", E, [i("input", {
+		return (n, r) => (e(), s("div", E, [o("input", {
 			type: "number",
 			"data-testid": t.testid,
-			class: e(f(v)),
+			class: u(a(v)),
 			value: t.modelValue,
 			min: t.min,
 			max: t.max,
-			onInput: o
-		}, null, 42, D), i("span", { class: e(f(_)) }, l(t.suffix), 3)]));
+			onInput: i
+		}, null, 42, D), o("span", { class: u(a(_)) }, l(t.suffix), 3)]));
 	}
 }), k = { class: "tpl:mb-3.5" }, A = /* @__PURE__ */ h({
 	__name: "FieldRow",
 	props: { label: {} },
-	setup(n) {
-		return (r, i) => (c(), a("div", k, [n.label ? (c(), a("label", {
+	setup(t) {
+		return (n, r) => (e(), s("div", k, [t.label ? (e(), s("label", {
 			key: 0,
-			class: e(f(g))
-		}, l(n.label), 3)) : m("", !0), t(r.$slots, "default")]));
+			class: u(a(g))
+		}, l(t.label), 3)) : m("", !0), i(n.$slots, "default")]));
 	}
 });
 //#endregion

package/dist/IssuesPanel-BLbNFMSX.js

@@ -0,0 +1,117 @@
+import { A as e, F as t, M as n, S as r, at as i, c as a, d as o, g as s, h as c, jt as l, kt as u, l as d, r as f, s as p, u as m, v as h } from "./vue.runtime.esm-bundler-DShF3P6k.js";
+import { H as g, g as _ } from "./keys-DQA2i1k1.js";
+import { t as v } from "./useI18n-BbdxxpOE.js";
+import { t as y } from "./createLucideIcon-Cwf_nTzE.js";
+import { t as b } from "./circle-alert-CjzUTwy3.js";
+import { t as x } from "./info-BQ60P82u.js";
+import { n as S, t as C } from "./useScrollToBlock-BTFw0b9O.js";
+import { t as w } from "./triangle-alert-C6tGa6jw.js";
+var T = y({
+	name: "arrow-right",
+	size: 24,
+	node: [["path", {
+		d: "M5 12h14",
+		key: "1ays0h"
+	}], ["path", {
+		d: "m12 5 7 7-7 7",
+		key: "xquz4c"
+	}]]
+}), E = y({
+	name: "wrench",
+	size: 24,
+	node: [["path", {
+		d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
+		key: "1ngwbx"
+	}]]
+}), D = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, O = { class: "tpl:flex tpl:items-center tpl:gap-2" }, k = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, A = ["title"], j = {
+	key: 0,
+	class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
+}, M = {
+	key: 1,
+	class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
+}, N = { class: "tpl:ml-auto tpl:font-normal tpl:opacity-70" }, P = {
+	key: 1,
+	class: "tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0"
+}, F = { class: "tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, I = { class: "tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, L = { class: "tpl:flex tpl:gap-1.5" }, R = ["onClick"], z = ["title", "onClick"], B = /* @__PURE__ */ h({
+	__name: "IssuesPanel",
+	setup(h) {
+		let { t: y, format: B } = v(), V = r(g, null), H = r(_, null), U = C(), W = p(() => (V?.issues.value ?? []).filter((e) => e.severity === "error")), G = p(() => (V?.issues.value ?? []).filter((e) => e.severity === "warning")), K = p(() => (V?.issues.value ?? []).filter((e) => e.severity === "info")), q = p(() => W.value.length + G.value.length + K.value.length);
+		function J(e) {
+			H && e.blockId && (H.selectBlock(e.blockId), U(e.blockId));
+		}
+		function Y(e) {
+			V?.applyFix(e);
+		}
+		return (r, p) => (e(), o("div", D, [a("header", O, [
+			s(i(S), {
+				size: 16,
+				"stroke-width": 1.5
+			}),
+			a("h3", k, l(i(y).issues.panelTitle), 1),
+			q.value > 0 ? (e(), o("span", {
+				key: 0,
+				class: "tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]",
+				title: i(B)(i(y).issues.issueCountTooltip, { count: q.value })
+			}, l(q.value), 9, A)) : m("", !0)
+		]), !i(V) || i(V).unavailable.value ? (e(), o("div", j)) : q.value === 0 ? (e(), o("div", M, l(i(y).issues.emptyState), 1)) : (e(!0), o(f, { key: 2 }, n([
+			{
+				key: "errors",
+				title: i(y).issues.groupErrors,
+				icon: i(b),
+				items: W.value,
+				tone: "tpl:text-[var(--tpl-danger)]"
+			},
+			{
+				key: "warnings",
+				title: i(y).issues.groupWarnings,
+				icon: i(w),
+				items: G.value,
+				tone: "tpl:text-[var(--tpl-warning)]"
+			},
+			{
+				key: "info",
+				title: i(y).issues.groupInfo,
+				icon: i(x),
+				items: K.value,
+				tone: "tpl:text-[var(--tpl-text-muted)]"
+			}
+		], (r) => (e(), o("section", { key: r.key }, [r.items.length > 0 ? (e(), o("header", {
+			key: 0,
+			class: u(["tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide", r.tone])
+		}, [
+			(e(), d(t(r.icon), {
+				size: 12,
+				"stroke-width": 2
+			})),
+			c(" " + l(r.title) + " ", 1),
+			a("span", N, l(r.items.length), 1)
+		], 2)) : m("", !0), r.items.length > 0 ? (e(), o("ul", P, [(e(!0), o(f, null, n(r.items, (t) => (e(), o("li", {
+			key: `${t.ruleId}-${t.blockId ?? "template"}`,
+			class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3"
+		}, [
+			a("p", F, l(t.message), 1),
+			a("p", I, l(t.ruleId), 1),
+			a("div", L, [t.blockId ? (e(), o("button", {
+				key: 0,
+				type: "button",
+				"data-testid": "issue-jump",
+				class: "tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]",
+				onClick: (e) => J(t)
+			}, [s(i(T), {
+				size: 10,
+				"stroke-width": 2
+			}), c(" " + l(i(y).issues.jump), 1)], 8, R)) : m("", !0), t.fix ? (e(), o("button", {
+				key: 1,
+				type: "button",
+				class: "tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-on-primary)]",
+				title: t.fix.description,
+				onClick: (e) => Y(t)
+			}, [s(i(E), {
+				size: 10,
+				"stroke-width": 2
+			}), c(" " + l(i(y).issues.fix), 1)], 8, z)) : m("", !0)])
+		]))), 128))])) : m("", !0)]))), 128))]));
+	}
+});
+//#endregion
+export { B as default };

package/dist/{LoadingTrack-SQXoZVf2.js → LoadingTrack-BlTL4zFv.js}

@@ -1,9 +1,9 @@
-import { d as e, k as t } from "./vue.runtime.esm-bundler-D9JUcKrV.js";
+import { A as e, d as t } from "./vue.runtime.esm-bundler-DShF3P6k.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 //#region src/components/LoadingTrack.vue
 var r = {}, i = { class: "tpl-loading-track" };
 function a(n, r) {
-	return t(), e("div", i);
+	return e(), t("div", i);
 }
 var o = /*#__PURE__*/ n(r, [["render", a], ["__scopeId", "data-v-c3d50014"]]);
 //#endregion

package/dist/MediaPanels-CMTAhDXB.js

@@ -0,0 +1,43 @@
+import { A as e, _ as t, at as n, l as r, u as i, v as a } from "./vue.runtime.esm-bundler-DShF3P6k.js";
+//#endregion
+//#region src/components/MediaPanels.vue
+var o = /* @__PURE__ */ a({
+	__name: "MediaPanels",
+	props: {
+		feature: {},
+		provider: {},
+		locale: {},
+		uiTheme: {},
+		popoverTarget: {}
+	},
+	setup(a) {
+		let o = a, s = t(async () => (await import("./editor-modal-B_LaQf0s.js")).MediaLibraryModal);
+		function c(e) {
+			o.feature.select(e);
+		}
+		return (t, o) => a.feature.isModalOpen.value ? (e(), r(n(s), {
+			key: 0,
+			visible: a.feature.isModalOpen.value,
+			provider: a.provider,
+			accept: a.feature.accept.value,
+			"popover-target": a.popoverTarget,
+			locale: a.locale,
+			"ui-theme": a.uiTheme,
+			"template-id": a.feature.templateId.value,
+			"on-error": a.feature.onError,
+			onSelect: c,
+			onClose: o[0] ||= (e) => a.feature.close()
+		}, null, 8, [
+			"visible",
+			"provider",
+			"accept",
+			"popover-target",
+			"locale",
+			"ui-theme",
+			"template-id",
+			"on-error"
+		])) : i("", !0);
+	}
+});
+//#endregion
+export { o as default };