@templatical/editor 0.0.6 → 0.1.1

package/dist/ModuleBrowserModal-BLYuCZht.js

@@ -0,0 +1,205 @@
+import { H as e, L as t, M as n, Ot as r, P as i, S as a, V as ee, Y as o, _ as s, b as c, d as l, g as te, h as u, m as d, o as ne, p as f, s as re, tt as p, u as m, wt as ie, x as ae, z as oe } from "./vue.runtime.esm-bundler-DryoQb-v.js";
+import { T as h, b as se, f as ce } from "./keys-CIw9mUI2.js";
+import { t as le } from "./useI18n-B8CN2iWs.js";
+import "./useEditorCore-DMH2QpUL.js";
+import { n as g } from "./_plugin-vue_export-helper-OO6pH1Dh.js";
+import { n as _, t as v } from "./blockTypeIcons-4AS3CvXn.js";
+import { t as ue } from "./trash-2-BY-xp5hg.js";
+import { t as de } from "./x-D-7GkO6Z.js";
+import { t as fe } from "./TplModal-BkoIz0oz.js";
+var pe = g("search", [["path", {
+	d: "m21 21-4.34-4.34",
+	key: "14j7rj"
+}], ["circle", {
+	cx: "11",
+	cy: "11",
+	r: "8",
+	key: "4ej97u"
+}]]), me = {
+	role: "dialog",
+	"aria-modal": "true",
+	"aria-labelledby": "tpl-module-browser-title",
+	class: "tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-[1000px] tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]",
+	style: {
+		"background-color": "var(--tpl-bg-elevated)",
+		"box-shadow": "var(--tpl-shadow-xl)",
+		"max-height": "90vh"
+	}
+}, he = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]" }, y = {
+	id: "tpl-module-browser-title",
+	class: "tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+}, b = ["aria-label"], x = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, S = { class: "tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden" }, C = { class: "tpl:px-4 tpl:pt-4 tpl:pb-3" }, w = { class: "tpl:relative" }, T = ["placeholder"], E = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4" }, D = {
+	key: 0,
+	class: "tpl:flex tpl:flex-col tpl:gap-1"
+}, O = ["aria-pressed", "onClick"], k = { class: "tpl:flex tpl:items-center tpl:gap-2" }, A = { class: "tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, j = { class: "tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]" }, M = { class: "tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1" }, N = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]"
+}, P = ["aria-label", "onClick"], F = [
+	"aria-label",
+	"title",
+	"onClick"
+], I = {
+	key: 1,
+	class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12"
+}, L = { class: "tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, R = { class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]" }, ge = {
+	key: 0,
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden"
+}, _e = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, ve = {
+	key: 1,
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4"
+}, ye = { class: "tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, be = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]" }, xe = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Se = { class: "tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, Ce = ["value"], we = { class: "tpl:flex tpl:gap-2" }, Te = ["disabled"], z = /* @__PURE__ */ a({
+	__name: "ModuleBrowserModal",
+	props: { visible: { type: Boolean } },
+	emits: ["close", "insert"],
+	setup(a, { emit: g }) {
+		let z = a, B = g, Ee = ae(() => import("./ModulePreviewCanvas-CHYqP6K3.js")), { t: V } = le(), H = h(se, "ModuleBrowserModal"), U = h(ce, "ModuleBrowserModal"), W = o(""), G = o(null), K = o(null), q = o("end"), J = f(() => {
+			let e = H.modules.value;
+			if (!W.value) return e;
+			let t = W.value.toLowerCase();
+			return e.filter((e) => e.name.toLowerCase().includes(t));
+		}), Y = f(() => G.value ? H.modules.value.find((e) => e.id === G.value) ?? null : null), De = f(() => {
+			let e = [{
+				value: "beginning",
+				label: V.modules.insertAtBeginning
+			}], t = U.content.value.blocks;
+			for (let n = 0; n < t.length; n++) {
+				let r = t[n], i = r.type, a = V.blocks[i] ?? r.type;
+				e.push({
+					value: r.id,
+					label: V.modules.insertAfterBlock.replace("{block}", `${a} ${n + 1}`)
+				});
+			}
+			return e.push({
+				value: "end",
+				label: V.modules.insertAtEnd
+			}), e;
+		}), X = f(() => {
+			if (q.value === "end") return;
+			if (q.value === "beginning") return 0;
+			let e = U.content.value.blocks.findIndex((e) => e.id === q.value);
+			if (e !== -1) return e + 1;
+		});
+		oe(() => z.visible, (e) => {
+			if (e) {
+				W.value = "", G.value = null, K.value = null;
+				let e = U.state.selectedBlockId;
+				e ? q.value = U.content.value.blocks.findIndex((t) => t.id === e) === -1 ? "end" : e : q.value = "end";
+			}
+		});
+		function Oe(e) {
+			let t = [], n = /* @__PURE__ */ new Set();
+			for (let r of e.content) if (!n.has(r.type) && v[r.type] && (n.add(r.type), t.push({
+				type: r.type,
+				icon: v[r.type]
+			})), t.length >= 5) break;
+			return t;
+		}
+		function Z(e) {
+			let t = new Set(e.content.map((e) => e.type));
+			return Math.max(0, t.size - 5);
+		}
+		async function ke(e) {
+			try {
+				await H.deleteModule(e), G.value === e && (G.value = null);
+			} finally {
+				K.value = null;
+			}
+		}
+		function Q() {
+			Y.value && B("insert", Y.value, X.value);
+		}
+		function $() {
+			B("close");
+		}
+		function Ae(e) {
+			e.key === "Escape" && $(), e.key === "Enter" && Y.value && (e.preventDefault(), Q());
+		}
+		return (o, f) => (n(), u(fe, {
+			visible: a.visible,
+			onClose: $,
+			onKeydown: Ae
+		}, {
+			default: ee(() => [d("div", me, [
+				d("div", he, [d("h3", y, r(p(V).modules.browse), 1), d("button", {
+					"aria-label": p(V).modules.close,
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]",
+					onClick: $
+				}, [c(p(de), {
+					size: 16,
+					"stroke-width": 2
+				})], 8, b)]),
+				d("div", x, [d("div", S, [d("div", C, [d("div", w, [c(p(pe), {
+					size: 14,
+					"stroke-width": 2,
+					class: "tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]"
+				}), e(d("input", {
+					"onUpdate:modelValue": f[0] ||= (e) => W.value = e,
+					type: "text",
+					placeholder: p(V).modules.search,
+					class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
+				}, null, 8, T), [[re, W.value]])])]), d("div", E, [J.value.length > 0 ? (n(), s("div", D, [(n(!0), s(l, null, i(J.value, (e) => (n(), s("button", {
+					key: e.id,
+					type: "button",
+					"aria-pressed": G.value === e.id,
+					class: "tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]",
+					style: ie({
+						borderColor: G.value === e.id ? "var(--tpl-primary)" : "var(--tpl-border)",
+						backgroundColor: G.value === e.id ? "var(--tpl-primary-light)" : "transparent"
+					}),
+					onClick: (t) => G.value = e.id
+				}, [d("div", k, [d("span", A, r(e.name), 1), d("span", j, r(p(V).modules.blockCount.replace("{count}", String(e.content.length))), 1)]), d("div", M, [
+					(n(!0), s(l, null, i(Oe(e), (e) => (n(), u(t(e.icon), {
+						key: e.type,
+						size: 14,
+						"stroke-width": 1.5,
+						class: "tpl:text-[var(--tpl-text-dim)]"
+					}))), 128)),
+					Z(e) > 0 ? (n(), s("span", N, " +" + r(Z(e)), 1)) : te("", !0),
+					K.value === e.id ? (n(), s("button", {
+						key: 1,
+						"aria-label": p(V).modules.deleteConfirm,
+						class: "tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-100 tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]",
+						style: { "background-color": "transparent" },
+						onClick: m((t) => ke(e.id), ["stop"])
+					}, r(p(V).modules.deleteConfirm), 9, P)) : (n(), s("button", {
+						key: 2,
+						class: "tpl-module-delete-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]",
+						"aria-label": p(V).modules.delete,
+						title: p(V).modules.delete,
+						onClick: m((t) => K.value = e.id, ["stop"])
+					}, [c(p(ue), {
+						size: 12,
+						"stroke-width": 1.5
+					})], 8, F))
+				])], 12, O))), 128))])) : (n(), s("div", I, [c(p(_), {
+					size: 32,
+					"stroke-width": 1,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), d("p", L, r(W.value ? p(V).modules.noModules : p(V).modules.noModulesHint), 1)]))])]), d("div", R, [Y.value ? (n(), s("div", ge, [d("div", _e, [c(p(Ee), { blocks: Y.value.content }, null, 8, ["blocks"])])])) : (n(), s("div", ve, [c(p(_), {
+					size: 32,
+					"stroke-width": 1,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), d("p", ye, r(p(V).modules.selectToPreview), 1)]))])]),
+				d("div", be, [d("div", xe, [d("label", Se, r(p(V).modules.insertPosition), 1), e(d("select", {
+					"onUpdate:modelValue": f[1] ||= (e) => q.value = e,
+					class: "tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
+				}, [(n(!0), s(l, null, i(De.value, (e) => (n(), s("option", {
+					key: e.value,
+					value: e.value
+				}, r(e.label), 9, Ce))), 128))], 512), [[ne, q.value]])]), d("div", we, [d("button", {
+					type: "button",
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]",
+					onClick: $
+				}, r(p(V).modules.close), 1), d("button", {
+					type: "button",
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
+					disabled: !Y.value,
+					onClick: Q
+				}, r(p(V).modules.insert), 9, Te)])])
+			])]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { z as default };

package/dist/ModulePreviewCanvas-CHYqP6K3.js

@@ -0,0 +1,106 @@
+import { E as e, I as t, L as n, M as r, P as i, S as a, _ as o, d as s, h as c, m as l, p as u, tt as d, wt as f } from "./vue.runtime.esm-bundler-DryoQb-v.js";
+import { o as p } from "./keys-CIw9mUI2.js";
+import { N as m, _ as h, a as g, f as _, g as v, h as y, i as b, m as x, n as S, p as C, r as w, u as T, v as E, y as D } from "./useEditorCore-DMH2QpUL.js";
+//#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "tpl:w-full" }, k = { class: "tpl:flex tpl:gap-0" }, A = /* @__PURE__ */ a({
+	name: "PreviewSectionBlock",
+	__name: "PreviewSectionBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(a) {
+		let A = {
+			title: T,
+			paragraph: x,
+			image: v,
+			video: S,
+			button: m,
+			divider: E,
+			social: g,
+			menu: y,
+			table: w,
+			spacer: b,
+			html: h,
+			custom: D
+		}, j = a, M = e(p, null), N = u(() => {
+			switch (j.block.columns) {
+				case "2": return ["50%", "50%"];
+				case "3": return [
+					"33.33%",
+					"33.33%",
+					"33.33%"
+				];
+				case "1-2": return ["33.33%", "66.67%"];
+				case "2-1": return ["66.67%", "33.33%"];
+				default: return ["100%"];
+			}
+		}), P = u(() => {
+			let e = N.value.length, t = [...j.block.children];
+			for (; t.length < e;) t.push([]);
+			return t.slice(0, e);
+		});
+		function F(e) {
+			return P.value[e] || [];
+		}
+		function I(e) {
+			return C(e, M, A);
+		}
+		return (e, a) => {
+			let u = t("PreviewSectionBlock", !0);
+			return r(), o("div", O, [l("div", k, [(r(!0), o(s, null, i(P.value, (e, t) => (r(), o("div", {
+				key: t,
+				style: f({ width: N.value[t] })
+			}, [(r(!0), o(s, null, i(F(t), (e) => (r(), o("div", {
+				key: e.id,
+				style: f(d(_)(e))
+			}, [e.type === "section" ? (r(), c(u, {
+				key: 0,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"])) : (r(), c(n(I(e)), {
+				key: 1,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"]))], 4))), 128))], 4))), 128))])]);
+		};
+	}
+}), j = {
+	class: "tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg",
+	style: {
+		"background-color": "var(--tpl-canvas-bg)",
+		"box-shadow": "var(--tpl-shadow-sm)"
+	}
+}, M = /* @__PURE__ */ a({
+	__name: "ModulePreviewCanvas",
+	props: { blocks: {} },
+	setup(t) {
+		let a = e(p), l = {
+			section: A,
+			title: T,
+			paragraph: x,
+			image: v,
+			video: S,
+			button: m,
+			divider: E,
+			social: g,
+			menu: y,
+			table: w,
+			spacer: b,
+			html: h,
+			custom: D
+		};
+		function u(e) {
+			return C(e, a, l);
+		}
+		return (e, a) => (r(), o("div", j, [(r(!0), o(s, null, i(t.blocks, (e) => (r(), o("div", {
+			key: e.id,
+			style: f(d(_)(e))
+		}, [(r(), c(n(u(e)), {
+			block: e,
+			viewport: "desktop"
+		}, null, 8, ["block"]))], 4))), 128))]));
+	}
+});
+//#endregion
+export { M as default };