@templatical/editor 0.0.1

package/dist/ModulePreviewCanvas-Cdp484Ae.js

@@ -0,0 +1,169 @@
+import { defineComponent as x, inject as y, computed as b, resolveComponent as D, openBlock as n, createElementBlock as c, createElementVNode as F, Fragment as g, renderList as f, normalizeStyle as k, createBlock as v, resolveDynamicComponent as h } from "vue";
+import { r as w, k as C, j as B, T as S, i as P, h as R, f as W, e as j, g as E, d as T, b as z } from "./index-D-iD-7lO.js";
+const L = { class: "tpl:w-full" }, M = { class: "tpl:flex tpl:gap-0" }, N = /* @__PURE__ */ x({
+  name: "PreviewSectionBlock",
+  __name: "PreviewSectionBlock",
+  props: {
+    block: {},
+    viewport: {}
+  },
+  setup(m) {
+    const u = m, i = y("blockRegistry"), p = b(() => {
+      switch (u.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%"];
+      }
+    }), s = b(() => {
+      const o = p.value.length, e = [...u.block.children];
+      for (; e.length < o; )
+        e.push([]);
+      return e.slice(0, o);
+    });
+    function r(o) {
+      return s.value[o] || [];
+    }
+    function t(o) {
+      if (i) {
+        const e = i.getComponent(o);
+        if (e)
+          return e;
+      }
+      switch (o.type) {
+        case "text":
+          return z;
+        case "image":
+          return T;
+        case "video":
+          return E;
+        case "button":
+          return j;
+        case "divider":
+          return W;
+        case "social":
+          return R;
+        case "menu":
+          return P;
+        case "table":
+          return S;
+        case "spacer":
+          return B;
+        case "html":
+          return C;
+        case "custom":
+          return w;
+        default:
+          return null;
+      }
+    }
+    function d(o) {
+      const { padding: e, margin: a, backgroundColor: $ } = o.styles;
+      return {
+        padding: `${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`,
+        margin: `${a.top}px ${a.right}px ${a.bottom}px ${a.left}px`,
+        backgroundColor: $ || "transparent"
+      };
+    }
+    return (o, e) => {
+      const a = D("PreviewSectionBlock", !0);
+      return n(), c("div", L, [
+        F("div", M, [
+          (n(!0), c(g, null, f(s.value, ($, _) => (n(), c("div", {
+            key: _,
+            style: k({ width: p.value[_] })
+          }, [
+            (n(!0), c(g, null, f(r(_), (l) => (n(), c("div", {
+              key: l.id,
+              style: k(d(l))
+            }, [
+              l.type === "section" ? (n(), v(a, {
+                key: 0,
+                block: l,
+                viewport: "desktop"
+              }, null, 8, ["block"])) : (n(), v(h(t(l)), {
+                key: 1,
+                block: l,
+                viewport: "desktop"
+              }, null, 8, ["block"]))
+            ], 4))), 128))
+          ], 4))), 128))
+        ])
+      ]);
+    };
+  }
+}), V = {
+  class: "tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg tpl:bg-white",
+  style: { "box-shadow": "var(--tpl-shadow-sm)" }
+}, G = /* @__PURE__ */ x({
+  __name: "ModulePreviewCanvas",
+  props: {
+    blocks: {}
+  },
+  setup(m) {
+    const u = y("blockRegistry");
+    function i(s) {
+      if (u) {
+        const r = u.getComponent(s);
+        if (r)
+          return r;
+      }
+      switch (s.type) {
+        case "section":
+          return N;
+        case "text":
+          return z;
+        case "image":
+          return T;
+        case "video":
+          return E;
+        case "button":
+          return j;
+        case "divider":
+          return W;
+        case "social":
+          return R;
+        case "menu":
+          return P;
+        case "table":
+          return S;
+        case "spacer":
+          return B;
+        case "html":
+          return C;
+        case "custom":
+          return w;
+        default:
+          return null;
+      }
+    }
+    function p(s) {
+      const { padding: r, margin: t, backgroundColor: d } = s.styles;
+      return {
+        padding: `${r.top}px ${r.right}px ${r.bottom}px ${r.left}px`,
+        margin: `${t.top}px ${t.right}px ${t.bottom}px ${t.left}px`,
+        backgroundColor: d || "transparent"
+      };
+    }
+    return (s, r) => (n(), c("div", V, [
+      (n(!0), c(g, null, f(m.blocks, (t) => (n(), c("div", {
+        key: t.id,
+        style: k(p(t))
+      }, [
+        (n(), v(h(i(t)), {
+          block: t,
+          viewport: "desktop"
+        }, null, 8, ["block"]))
+      ], 4))), 128))
+    ]));
+  }
+});
+export {
+  G as default
+};

package/dist/SaveModuleDialog-eNyr3XKn.js

@@ -0,0 +1,168 @@
+import { defineComponent as E, inject as g, ref as v, computed as w, watch as K, openBlock as d, createBlock as T, Teleport as j, createVNode as S, Transition as I, withCtx as $, createElementBlock as c, withModifiers as A, createElementVNode as e, toDisplayString as r, unref as p, withDirectives as F, vModelText as H, Fragment as P, renderList as U, normalizeStyle as q, createTextVNode as B, createCommentVNode as C, normalizeClass as G } from "vue";
+import { u as J } from "./index-D-iD-7lO.js";
+import "@templatical/types";
+import { L as O } from "./loader-circle-tM9j2mRh.js";
+const Q = {
+  class: "tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5",
+  style: { "background-color": "var(--tpl-bg-elevated)", "box-shadow": "var(--tpl-shadow-xl)" }
+}, R = {
+  class: "tpl:mb-4 tpl:text-sm tpl:font-semibold",
+  style: { color: "var(--tpl-text)" }
+}, W = { class: "tpl:mb-3" }, X = {
+  class: "tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium",
+  style: { color: "var(--tpl-text-muted)" }
+}, Y = ["placeholder", "disabled"], Z = { class: "tpl:mb-3" }, tt = {
+  class: "tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium",
+  style: { color: "var(--tpl-text-muted)" }
+}, et = {
+  class: "tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2",
+  style: { "border-color": "var(--tpl-border)" }
+}, lt = ["checked", "disabled", "onChange"], ot = {
+  key: 0,
+  class: "tpl:mb-3 tpl:text-xs",
+  style: { color: "var(--tpl-danger)" }
+}, st = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, at = ["disabled"], rt = ["disabled"], pt = {
+  key: 0,
+  class: "tpl:flex tpl:items-center tpl:gap-1.5"
+}, nt = { key: 1 }, mt = /* @__PURE__ */ E({
+  __name: "SaveModuleDialog",
+  props: {
+    visible: { type: Boolean },
+    preSelectedBlockId: {}
+  },
+  emits: ["close", "saved"],
+  setup(f, { emit: M }) {
+    const m = f, b = M, { t: a } = J(), N = g("editor"), z = g("savedModulesHeadless"), i = v(""), n = v(/* @__PURE__ */ new Set()), o = v(!1), u = v(null), h = w(() => N.content.value.blocks);
+    function L(t, l) {
+      const s = t.type;
+      return `${a.blocks[s] ?? t.type} ${l + 1}`;
+    }
+    K(
+      () => m.visible,
+      (t) => {
+        t && (i.value = "", u.value = null, n.value = new Set(
+          m.preSelectedBlockId ? [m.preSelectedBlockId] : []
+        ));
+      }
+    );
+    function V(t) {
+      const l = new Set(n.value);
+      l.has(t) ? l.delete(t) : l.add(t), n.value = l;
+    }
+    const x = w(
+      () => i.value.trim().length > 0 && n.value.size > 0 && !o.value
+    );
+    async function _() {
+      if (x.value) {
+        o.value = !0, u.value = null;
+        try {
+          const t = h.value.filter(
+            (l) => n.value.has(l.id)
+          );
+          await z.createModule(i.value.trim(), t), b("saved"), b("close");
+        } catch (t) {
+          u.value = t.message;
+        } finally {
+          o.value = !1;
+        }
+      }
+    }
+    function y() {
+      o.value || b("close");
+    }
+    function D(t) {
+      t.key === "Enter" && !t.shiftKey && (t.preventDefault(), _()), t.key === "Escape" && y();
+    }
+    return (t, l) => (d(), T(j, { to: "body" }, [
+      S(I, {
+        "enter-active-class": "tpl:transition tpl:duration-150",
+        "enter-from-class": "tpl:opacity-0",
+        "enter-to-class": "tpl:opacity-100",
+        "leave-active-class": "tpl:transition tpl:duration-100",
+        "leave-from-class": "tpl:opacity-100",
+        "leave-to-class": "tpl:opacity-0"
+      }, {
+        default: $(() => [
+          f.visible ? (d(), c("div", {
+            key: 0,
+            class: "tpl tpl:fixed tpl:inset-0 tpl:z-[10000] tpl:flex tpl:items-center tpl:justify-center",
+            style: { "background-color": "var(--tpl-overlay)", "backdrop-filter": "blur(8px)", "-webkit-backdrop-filter": "blur(8px)" },
+            onClick: A(y, ["self"]),
+            onKeydown: D
+          }, [
+            e("div", Q, [
+              e("h3", R, r(p(a).modules.saveAsModule), 1),
+              e("div", W, [
+                e("label", X, r(p(a).modules.moduleName), 1),
+                F(e("input", {
+                  "onUpdate:modelValue": l[0] || (l[0] = (s) => i.value = s),
+                  type: "text",
+                  placeholder: p(a).modules.moduleNamePlaceholder,
+                  class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none",
+                  style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                  disabled: o.value
+                }, null, 8, Y), [
+                  [H, i.value]
+                ])
+              ]),
+              e("div", Z, [
+                e("label", tt, r(p(a).modules.selectBlocks), 1),
+                e("div", et, [
+                  (d(!0), c(P, null, U(h.value, (s, k) => (d(), c("label", {
+                    key: s.id,
+                    class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100",
+                    style: q({
+                      color: "var(--tpl-text)",
+                      backgroundColor: n.value.has(s.id) ? "var(--tpl-primary-light)" : "transparent"
+                    })
+                  }, [
+                    e("input", {
+                      type: "checkbox",
+                      checked: n.value.has(s.id),
+                      class: "tpl:accent-[var(--tpl-primary)]",
+                      disabled: o.value,
+                      onChange: (dt) => V(s.id)
+                    }, null, 40, lt),
+                    B(" " + r(L(s, k)), 1)
+                  ], 4))), 128))
+                ])
+              ]),
+              u.value ? (d(), c("p", ot, r(u.value), 1)) : C("", !0),
+              e("div", st, [
+                e("button", {
+                  type: "button",
+                  class: G(["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:cursor-not-allowed tpl:opacity-50": o.value
+                  }]),
+                  style: { "border-color": "var(--tpl-border)", color: "var(--tpl-text)", "background-color": "var(--tpl-bg)" },
+                  disabled: o.value,
+                  onClick: y
+                }, r(p(a).modules.cancel), 11, at),
+                e("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",
+                  style: { "background-color": "var(--tpl-primary)", color: "var(--tpl-bg)" },
+                  disabled: !x.value,
+                  onClick: _
+                }, [
+                  o.value ? (d(), c("span", pt, [
+                    S(p(O), {
+                      class: "tpl:animate-spin",
+                      size: 12,
+                      "stroke-width": 2
+                    }),
+                    B(" " + r(p(a).modules.saving), 1)
+                  ])) : (d(), c("span", nt, r(p(a).modules.save), 1))
+                ], 8, rt)
+              ])
+            ])
+          ], 32)) : C("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  mt as default
+};

package/dist/SnapshotHistory-D-ZiIj1v.js

@@ -0,0 +1,169 @@
+import { defineComponent as B, ref as g, watch as M, computed as H, openBlock as s, createElementBlock as r, createElementVNode as i, withModifiers as y, unref as e, createVNode as d, normalizeClass as O, Transition as T, withCtx as A, toDisplayString as f, Fragment as V, renderList as E, createCommentVNode as z } from "vue";
+import { c as L, u as F, o as G, F as q } from "./index-D-iD-7lO.js";
+import "@templatical/types";
+import { C as $ } from "./CloudEditor-Wdfv_9xn.js";
+import { L as J } from "./loader-circle-tM9j2mRh.js";
+/**
+ * @license lucide-vue-next v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const K = L("ChevronLeftIcon", [
+  ["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]
+]);
+/**
+ * @license lucide-vue-next v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const P = L("ChevronRightIcon", [
+  ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
+]), Q = ["disabled", "title"], U = ["title"], W = {
+  key: 0,
+  class: "tpl-scale-in tpl:absolute tpl:top-full tpl:left-1/2 tpl:z-50 tpl:mt-2 tpl:w-72 tpl:-translate-x-1/2 tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)]",
+  style: { "background-color": "var(--tpl-bg-elevated)", border: "1px solid var(--tpl-border)", "box-shadow": "var(--tpl-shadow-lg)", "backdrop-filter": "blur(8px)", "-webkit-backdrop-filter": "blur(8px)" }
+}, X = {
+  class: "tpl:border-b tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-semibold",
+  style: { color: "var(--tpl-text)", "border-color": "var(--tpl-border)" }
+}, Y = {
+  key: 0,
+  class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-8"
+}, Z = {
+  key: 1,
+  class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, tt = {
+  key: 2,
+  class: "tpl:max-h-64 tpl:overflow-y-auto"
+}, et = ["disabled", "onClick"], ot = { class: "tpl:flex tpl:flex-col tpl:gap-0.5" }, lt = {
+  class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, st = {
+  key: 0,
+  class: "tpl:rounded tpl:px-1 tpl:py-0.5 tpl:text-[10px] tpl:font-normal",
+  style: { "background-color": "var(--tpl-bg-active)", color: "var(--tpl-text-muted)" }
+}, rt = ["disabled", "title"], ct = /* @__PURE__ */ B({
+  __name: "SnapshotHistory",
+  props: {
+    snapshots: {},
+    isLoading: { type: Boolean },
+    isRestoring: { type: Boolean }
+  },
+  emits: ["load", "navigate"],
+  setup(c, { emit: R }) {
+    const t = c, u = R, { t: o, format: b } = F(), n = g(!1), x = g(null), l = g(-1);
+    M(
+      () => t.snapshots.length,
+      () => {
+        l.value = -1;
+      }
+    );
+    const w = H(() => l.value > 0 && t.snapshots.length > 0 && !t.isRestoring), k = H(() => l.value < t.snapshots.length - 1 && t.snapshots.length > 0 && !t.isRestoring);
+    function D() {
+      w.value && (l.value--, u("navigate", t.snapshots[l.value]));
+    }
+    function I() {
+      k.value && (l.value++, u("navigate", t.snapshots[l.value]));
+    }
+    function N() {
+      n.value = !n.value, n.value && t.snapshots.length === 0 && u("load");
+    }
+    function S(h) {
+      const a = t.snapshots.findIndex((p) => p.id === h);
+      a !== -1 && (l.value = a, u("navigate", t.snapshots[a])), n.value = !1;
+    }
+    function j(h) {
+      const a = new Date(h), v = (/* @__PURE__ */ new Date()).getTime() - a.getTime(), m = Math.floor(v / 6e4), _ = Math.floor(v / 36e5), C = Math.floor(v / 864e5);
+      return m < 1 ? o.snapshotHistory.justNow : m < 60 ? b(o.snapshotHistory.minutesAgo, { minutes: m }) : _ < 24 ? b(o.snapshotHistory.hoursAgo, { hours: _ }) : C < 7 ? b(o.snapshotHistory.daysAgo, { days: C }) : a.toLocaleDateString(void 0, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    }
+    return G(x, () => {
+      n.value = !1;
+    }), (h, a) => (s(), r("div", {
+      ref_key: "dropdownRef",
+      ref: x,
+      class: "tpl:relative tpl:flex tpl:items-center tpl:gap-0.5"
+    }, [
+      i("button", {
+        class: "tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] disabled:tpl:cursor-not-allowed disabled:tpl:opacity-30 disabled:hover:tpl:bg-transparent",
+        style: { color: "var(--tpl-text-muted)" },
+        disabled: !k.value,
+        title: e(o).snapshotHistory.olderSnapshot,
+        onClick: y(I, ["stop"])
+      }, [
+        d(e(K), {
+          size: 14,
+          "stroke-width": 2
+        })
+      ], 8, Q),
+      i("button", {
+        class: "tpl:flex tpl:h-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-1.5 tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)]",
+        style: { color: "var(--tpl-text-muted)" },
+        title: e(o).snapshotHistory.tooltip,
+        onClick: y(N, ["stop"])
+      }, [
+        d(e($), {
+          size: 16,
+          "stroke-width": 1.5
+        }),
+        d(e(q), {
+          class: O(["tpl:transition-transform tpl:duration-150", { "tpl:rotate-180": n.value }]),
+          size: 10,
+          "stroke-width": 2
+        }, null, 8, ["class"])
+      ], 8, U),
+      d(T, { name: "tpl-dropdown" }, {
+        default: A(() => [
+          n.value ? (s(), r("div", W, [
+            i("div", X, f(e(o).snapshotHistory.dropdownTitle), 1),
+            c.isLoading ? (s(), r("div", Y, [
+              d(e(J), {
+                class: "tpl:animate-spin",
+                size: 20,
+                "stroke-width": 2,
+                style: { color: "var(--tpl-primary)" }
+              })
+            ])) : c.snapshots.length === 0 ? (s(), r("div", Z, f(e(o).snapshotHistory.noSnapshots), 1)) : (s(), r("div", tt, [
+              (s(!0), r(V, null, E(c.snapshots, (p) => (s(), r("button", {
+                key: p.id,
+                class: "tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:border-b tpl:border-l-2 tpl:border-l-transparent tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-all tpl:duration-150 last:tpl:border-b-0 hover:tpl:border-l-[var(--tpl-primary)] hover:tpl:bg-[var(--tpl-bg-hover)]",
+                style: { "background-color": "transparent", "border-bottom-color": "var(--tpl-border-light)" },
+                disabled: c.isRestoring,
+                onClick: (v) => S(p.id)
+              }, [
+                i("div", ot, [
+                  i("div", lt, [
+                    i("span", null, f(j(p.created_at)), 1),
+                    p.is_autosave ? (s(), r("span", st, f(e(o).snapshotHistory.auto), 1)) : z("", !0)
+                  ])
+                ])
+              ], 8, et))), 128))
+            ]))
+          ])) : z("", !0)
+        ]),
+        _: 1
+      }),
+      i("button", {
+        class: "tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] disabled:tpl:cursor-not-allowed disabled:tpl:opacity-30 disabled:hover:tpl:bg-transparent",
+        style: { color: "var(--tpl-text-muted)" },
+        disabled: !w.value,
+        title: e(o).snapshotHistory.newerSnapshot,
+        onClick: y(D, ["stop"])
+      }, [
+        d(e(P), {
+          size: 14,
+          "stroke-width": 2
+        })
+      ], 8, rt)
+    ], 512));
+  }
+});
+export {
+  ct as default
+};