@maildeno/editor 0.4.5 → 0.4.6

package/dist/RowPreviewLegacyComponent-Dv7OCys4.js

@@ -0,0 +1,454 @@
+import { defineComponent as at, computed as lt, openBlock as g, createBlock as ct, resolveDynamicComponent as dt, normalizeStyle as s, createElementBlock as m, createElementVNode as u, createCommentVNode as P, createTextVNode as gt, toDisplayString as S, Fragment as E, renderList as j } from "vue";
+const st = ["innerHTML"], mt = ["src", "alt"], ft = ["src", "alt"], xt = {
+  style: { width: "30%", height: "30%", color: "#9ca3af" },
+  fill: "currentColor",
+  viewBox: "0 0 20 20"
+}, ut = ["src", "alt"], yt = ["src", "alt"], ht = ["innerHTML"], $t = { key: 8 }, bt = { key: 0 }, St = ["src", "alt"], kt = {
+  key: 1,
+  style: { "font-size": "7px", color: "#9ca3af", "font-style": "italic" }
+}, vt = {
+  key: 11,
+  class: "rounded truncate",
+  style: { "font-size": "7px", color: "#9ca3af", background: "#f3f4f6", padding: "1px 3px" }
+}, Ft = /* @__PURE__ */ at({
+  __name: "RowPreviewLegacyComponent",
+  props: {
+    comp: {},
+    scale: {}
+  },
+  setup(r) {
+    const v = r, x = lt(() => v.comp.componentType ?? v.comp.type);
+    function k(t) {
+      return t ? t.replace(
+        /<span[^>]*\bdata-merge="([^"]+)"(?:[^>]*\bdata-merge-default="([^"]*)")?[^>]*>.*?<\/span>/gs,
+        (n, o, e) => {
+          const i = o.trim(), a = e == null ? void 0 : e.trim();
+          return a ? `{{ ${i}|'${a}' }}` : `{{ ${i} }}`;
+        }
+      ) : "";
+    }
+    function y(t) {
+      var e;
+      const n = t == null ? void 0 : t.backgroundGradient;
+      if ((n == null ? void 0 : n.useGradient) === !0 && Array.isArray((e = n == null ? void 0 : n.gradient) == null ? void 0 : e.colors) && n.gradient.colors.length >= 2) {
+        const { type: i, direction: a, colors: l } = n.gradient, c = l.map((d) => `${d.color} ${d.position}%`).join(", ");
+        return i === "radial" ? `radial-gradient(circle at center, ${c})` : `linear-gradient(${a}, ${c})`;
+      }
+      return (t == null ? void 0 : t.backgroundColor) || "transparent";
+    }
+    function h(t) {
+      if (!t) return;
+      const n = [
+        "Roboto",
+        "Open Sans",
+        "Lato",
+        "Montserrat",
+        "Poppins",
+        "Nunito",
+        "Raleway",
+        "Plus Jakarta Sans"
+      ];
+      if ((t.includes(" ") || n.some((e) => t.includes(e))) && typeof document < "u") {
+        const i = `https://fonts.googleapis.com/css2?family=${t.replace(/ /g, "+")}:wght@300;400;500;600;700;800&display=swap`;
+        if (!document.querySelector(`link[href="${i}"]`)) {
+          const a = document.createElement("link");
+          a.href = i, a.rel = "stylesheet", document.head.appendChild(a);
+        }
+      }
+    }
+    function N(t) {
+      var n, o, e, i, a, l, c, d;
+      return t != null && t.fontFamily && h(t.fontFamily), {
+        fontSize: Math.max(7, (t == null ? void 0 : t.fontSize) || 24) + "px",
+        color: (t == null ? void 0 : t.color) || "#111111",
+        fontWeight: (t == null ? void 0 : t.fontWeight) || "bold",
+        fontFamily: (t == null ? void 0 : t.fontFamily) || "Arial, sans-serif",
+        textAlign: (t == null ? void 0 : t.align) || "left",
+        lineHeight: String((t == null ? void 0 : t.lineHeight) ?? 1.2),
+        letterSpacing: `${(t == null ? void 0 : t.letterSpacing) ?? 0}px`,
+        textTransform: (t == null ? void 0 : t.textTransform) || "none",
+        textDecoration: (t == null ? void 0 : t.textDecoration) || "none",
+        background: y(t),
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 4}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 0}px`
+      };
+    }
+    function V(t) {
+      var n, o, e, i, a, l, c, d;
+      return t != null && t.fontFamily && h(t.fontFamily), {
+        fontSize: Math.max(6, (t == null ? void 0 : t.fontSize) || 16) + "px",
+        color: (t == null ? void 0 : t.color) || "#111111",
+        fontFamily: (t == null ? void 0 : t.fontFamily) || "Arial, sans-serif",
+        fontWeight: (t == null ? void 0 : t.fontWeight) || "normal",
+        fontStyle: (t == null ? void 0 : t.fontStyle) || "normal",
+        textAlign: (t == null ? void 0 : t.align) || "left",
+        lineHeight: String((t == null ? void 0 : t.lineHeight) ?? 1.5),
+        letterSpacing: `${(t == null ? void 0 : t.letterSpacing) ?? 0}px`,
+        textTransform: (t == null ? void 0 : t.textTransform) || "none",
+        textDecoration: (t == null ? void 0 : t.textDecoration) || "none",
+        background: y(t),
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 4}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 0}px`
+      };
+    }
+    function q(t) {
+      var n, o, e, i, a, l, c, d;
+      return {
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 0}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 0}px`,
+        textAlign: (t == null ? void 0 : t.align) || "left"
+      };
+    }
+    function J(t) {
+      var o, e, i;
+      const n = (t == null ? void 0 : t.align) || "left";
+      return {
+        width: ((t == null ? void 0 : t.width) || 100) + "%",
+        height: (t == null ? void 0 : t.height) || "auto",
+        borderRadius: ((t == null ? void 0 : t.borderRadius) || 0) + "px",
+        border: `${((o = t == null ? void 0 : t.border) == null ? void 0 : o.width) || 0}px ${((e = t == null ? void 0 : t.border) == null ? void 0 : e.style) || "solid"} ${((i = t == null ? void 0 : t.border) == null ? void 0 : i.color) || "#000000"}`,
+        display: "block",
+        margin: n === "center" ? "0 auto" : n === "right" ? "0 0 0 auto" : "0"
+      };
+    }
+    function O(t) {
+      var n, o, e, i, a, l, c, d;
+      return {
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 0}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 0}px`,
+        textAlign: (t == null ? void 0 : t.align) || "left",
+        maxWidth: "100%"
+      };
+    }
+    function K(t) {
+      var o, e, i;
+      const n = (t == null ? void 0 : t.align) || "left";
+      return {
+        width: "100%",
+        maxWidth: "100%",
+        paddingBottom: "56.25%",
+        height: "0",
+        position: "relative",
+        display: "inline-block",
+        borderRadius: ((t == null ? void 0 : t.borderRadius) || 0) + "px",
+        border: `${((o = t == null ? void 0 : t.border) == null ? void 0 : o.width) || 0}px ${((e = t == null ? void 0 : t.border) == null ? void 0 : e.style) || "solid"} ${((i = t == null ? void 0 : t.border) == null ? void 0 : i.color) || "#000000"}`,
+        overflow: "hidden",
+        marginLeft: n === "center" || n === "right" ? "auto" : "0",
+        marginRight: n === "center" ? "auto" : "0",
+        boxSizing: "border-box"
+      };
+    }
+    function Q() {
+      return {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        display: "block"
+      };
+    }
+    function U() {
+      return {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        background: "#e5e7eb",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      };
+    }
+    function X(t) {
+      var n, o, e, i;
+      return {
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 4}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        textAlign: (t == null ? void 0 : t.align) || "center"
+      };
+    }
+    function Y(t) {
+      var o, e, i, a, l, c, d;
+      t != null && t.fontFamily && h(t.fontFamily);
+      const n = !!(t != null && t.icon);
+      return {
+        background: y(t),
+        color: (t == null ? void 0 : t.color) || "#ffffff",
+        fontSize: Math.max(5, (t == null ? void 0 : t.fontSize) || 16) + "px",
+        fontWeight: (t == null ? void 0 : t.fontWeight) || "500",
+        fontFamily: (t == null ? void 0 : t.fontFamily) || "Arial, sans-serif",
+        letterSpacing: `${(t == null ? void 0 : t.letterSpacing) ?? 0}px`,
+        padding: `${((o = t == null ? void 0 : t.padding) == null ? void 0 : o.top) ?? 8}px ${((e = t == null ? void 0 : t.padding) == null ? void 0 : e.right) ?? 16}px ${((i = t == null ? void 0 : t.padding) == null ? void 0 : i.bottom) ?? 8}px ${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.left) ?? 16}px`,
+        borderRadius: ((t == null ? void 0 : t.borderRadius) || 4) + "px",
+        border: `${((l = t == null ? void 0 : t.border) == null ? void 0 : l.width) || 0}px ${((c = t == null ? void 0 : t.border) == null ? void 0 : c.style) || "solid"} ${((d = t == null ? void 0 : t.border) == null ? void 0 : d.color) || "#000000"}`,
+        // Icon branch uses inline-flex so icon + text align cleanly on one row.
+        // Plain branch stays inline-block (unchanged behaviour).
+        ...n ? {
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "middle"
+        } : { display: "inline-block" },
+        lineHeight: "1.2",
+        textDecoration: "none"
+      };
+    }
+    function w(t) {
+      const n = Math.max(4, (t == null ? void 0 : t.iconSize) ?? 20), o = (t == null ? void 0 : t.iconGap) ?? 8, e = (t == null ? void 0 : t.iconPosition) !== "after";
+      return {
+        display: "block",
+        width: n + "px",
+        height: n + "px",
+        flexShrink: "0",
+        marginRight: e ? o + "px" : "0",
+        marginLeft: e ? "0" : o + "px"
+      };
+    }
+    function F(t) {
+      const n = t.target;
+      n.style.display = "none";
+    }
+    function Z(t) {
+      var n, o, e, i, a, l, c, d;
+      return {
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 4}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 0}px`,
+        textAlign: (t == null ? void 0 : t.align) || "left"
+      };
+    }
+    function _(t) {
+      return t != null && t.fontFamily && h(t.fontFamily), {
+        color: (t == null ? void 0 : t.color) || "#007bff",
+        fontSize: Math.max(6, (t == null ? void 0 : t.fontSize) || 16) + "px",
+        fontWeight: (t == null ? void 0 : t.fontWeight) || "normal",
+        fontFamily: (t == null ? void 0 : t.fontFamily) || "Arial, sans-serif",
+        letterSpacing: `${(t == null ? void 0 : t.letterSpacing) ?? 0}px`,
+        textDecoration: (t == null ? void 0 : t.textDecoration) || "underline"
+      };
+    }
+    function p(t) {
+      var n, o, e, i, a, l, c, d;
+      return t != null && t.fontFamily && h(t.fontFamily), {
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 0}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 16}px`,
+        fontSize: Math.max(6, (t == null ? void 0 : t.fontSize) || 16) + "px",
+        fontFamily: (t == null ? void 0 : t.fontFamily) || "Arial, sans-serif",
+        lineHeight: String((t == null ? void 0 : t.lineHeight) ?? 1.5),
+        letterSpacing: `${(t == null ? void 0 : t.letterSpacing) ?? 0}px`,
+        color: (t == null ? void 0 : t.color) || "#111111",
+        background: y(t)
+      };
+    }
+    function tt(t) {
+      var n, o, e, i, a, l, c, d;
+      return {
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 0}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 0}px`,
+        textAlign: (t == null ? void 0 : t.align) || "left"
+      };
+    }
+    function nt(t) {
+      const n = (t == null ? void 0 : t.align) || "left";
+      return {
+        width: ((t == null ? void 0 : t.width) || 100) + "%",
+        height: ((t == null ? void 0 : t.height) || 1) + "px",
+        background: y(t),
+        border: "none",
+        margin: n === "center" ? "0 auto" : n === "right" ? "0 0 0 auto" : "0"
+      };
+    }
+    function et(t) {
+      return {
+        width: "100%",
+        height: ((t == null ? void 0 : t.height) || 16) + "px",
+        background: y(t)
+      };
+    }
+    function it(t) {
+      var n, o, e, i, a, l, c, d;
+      return t != null && t.fontFamily && h(t.fontFamily), {
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 0}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 0}px`,
+        textAlign: (t == null ? void 0 : t.align) || "left",
+        lineHeight: "0",
+        background: y(t)
+      };
+    }
+    function ot(t, n, o) {
+      t != null && t.fontFamily && h(t.fontFamily);
+      const e = (t == null ? void 0 : t.mobileStack) === !0, i = (t == null ? void 0 : t.spacing) ?? 8, a = n === 0, l = n === o - 1;
+      return {
+        // display is always block, used for showcase
+        display: "inline-block",
+        marginLeft: a ? "0px" : `${i / 2}px`,
+        marginRight: l ? "0px" : `${i / 2}px`,
+        // marginBottom: isStacked && !isLast ? `${spacing}px` : "0",
+        fontSize: Math.max(6, (t == null ? void 0 : t.fontSize) ?? 14) + "px",
+        lineHeight: String((t == null ? void 0 : t.lineHeight) ?? 1.4),
+        letterSpacing: ((t == null ? void 0 : t.letterSpacing) ?? 0) + "px",
+        color: (t == null ? void 0 : t.color) || "#111111",
+        fontWeight: (t == null ? void 0 : t.fontWeight) || "normal",
+        fontFamily: t != null && t.fontFamily ? `'${t.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
+        fontStyle: (t == null ? void 0 : t.fontStyle) || "normal",
+        textTransform: (t == null ? void 0 : t.textTransform) || "none",
+        textDecoration: (t == null ? void 0 : t.textDecoration) || "none",
+        whiteSpace: e ? "normal" : "nowrap",
+        cursor: "default"
+      };
+    }
+    function rt(t) {
+      var n, o, e, i, a, l, c, d;
+      return {
+        margin: `${((n = t == null ? void 0 : t.margin) == null ? void 0 : n.top) ?? 0}px ${((o = t == null ? void 0 : t.margin) == null ? void 0 : o.right) ?? 0}px ${((e = t == null ? void 0 : t.margin) == null ? void 0 : e.bottom) ?? 0}px ${((i = t == null ? void 0 : t.margin) == null ? void 0 : i.left) ?? 0}px`,
+        padding: `${((a = t == null ? void 0 : t.padding) == null ? void 0 : a.top) ?? 0}px ${((l = t == null ? void 0 : t.padding) == null ? void 0 : l.right) ?? 0}px ${((c = t == null ? void 0 : t.padding) == null ? void 0 : c.bottom) ?? 0}px ${((d = t == null ? void 0 : t.padding) == null ? void 0 : d.left) ?? 0}px`,
+        textAlign: (t == null ? void 0 : t.align) || "left",
+        display: "flex",
+        flexWrap: "wrap",
+        gap: ((t == null ? void 0 : t.spacing) ?? 8) + "px",
+        justifyContent: (t == null ? void 0 : t.align) === "center" ? "center" : (t == null ? void 0 : t.align) === "right" ? "flex-end" : "flex-start"
+      };
+    }
+    return (t, n) => {
+      var o, e, i, a, l, c, d, z, A, H, C, M, T, L, W, R, D, I, G, B;
+      return x.value === "heading" ? (g(), ct(dt(((o = r.comp.props) == null ? void 0 : o.level) || "h2"), {
+        key: 0,
+        style: s(N(r.comp.props)),
+        class: "truncate",
+        innerHTML: k((e = r.comp.props) == null ? void 0 : e.content) || "Heading"
+      }, null, 8, ["style", "innerHTML"])) : x.value === "paragraph" ? (g(), m("p", {
+        key: 1,
+        style: s([V(r.comp.props), { display: "-webkit-box", "-webkit-line-clamp": "2", "-webkit-box-orient": "vertical" }]),
+        class: "overflow-hidden",
+        innerHTML: k((i = r.comp.props) == null ? void 0 : i.content) || "Text"
+      }, null, 12, st)) : x.value === "image" ? (g(), m("div", {
+        key: 2,
+        style: s(q(r.comp.props))
+      }, [
+        u("img", {
+          src: (a = r.comp.props) == null ? void 0 : a.src,
+          alt: ((l = r.comp.props) == null ? void 0 : l.alt) || "",
+          style: s(J(r.comp.props))
+        }, null, 12, mt)
+      ], 4)) : x.value === "video" ? (g(), m("div", {
+        key: 3,
+        style: s(O(r.comp.props))
+      }, [
+        u("div", {
+          style: s(K(r.comp.props))
+        }, [
+          (c = r.comp.props) != null && c.coverImage ? (g(), m("img", {
+            key: 0,
+            src: r.comp.props.coverImage,
+            alt: ((d = r.comp.props) == null ? void 0 : d.alt) || "Video",
+            style: s(Q())
+          }, null, 12, ft)) : (g(), m("div", {
+            key: 1,
+            style: s(U())
+          }, [
+            (g(), m("svg", xt, [...n[0] || (n[0] = [
+              u("path", {
+                "fill-rule": "evenodd",
+                d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
+                "clip-rule": "evenodd"
+              }, null, -1)
+            ])]))
+          ], 4))
+        ], 4)
+      ], 4)) : x.value === "button" ? (g(), m("div", {
+        key: 4,
+        style: s(X(r.comp.props))
+      }, [
+        u("span", {
+          style: s(Y(r.comp.props)),
+          class: "inline-block truncate"
+        }, [
+          (z = r.comp.props) != null && z.icon && ((A = r.comp.props) == null ? void 0 : A.iconPosition) !== "after" ? (g(), m("img", {
+            key: 0,
+            src: r.comp.props.icon,
+            alt: ((H = r.comp.props) == null ? void 0 : H.iconAlt) || "",
+            style: s(w(r.comp.props)),
+            onError: F
+          }, null, 44, ut)) : P("", !0),
+          gt(" " + S(((C = r.comp.props) == null ? void 0 : C.text) || "Button") + " ", 1),
+          (M = r.comp.props) != null && M.icon && ((T = r.comp.props) == null ? void 0 : T.iconPosition) === "after" ? (g(), m("img", {
+            key: 1,
+            src: r.comp.props.icon,
+            alt: ((L = r.comp.props) == null ? void 0 : L.iconAlt) || "",
+            style: s(w(r.comp.props)),
+            onError: F
+          }, null, 44, yt)) : P("", !0)
+        ], 4)
+      ], 4)) : x.value === "anchor" ? (g(), m("div", {
+        key: 5,
+        style: s(Z(r.comp.props))
+      }, [
+        u("span", {
+          style: s(_(r.comp.props)),
+          class: "truncate block"
+        }, S(((W = r.comp.props) == null ? void 0 : W.text) || "Link"), 5)
+      ], 4)) : x.value === "list" ? (g(), m("div", {
+        key: 6,
+        style: s(p(r.comp.props)),
+        innerHTML: k((R = r.comp.props) == null ? void 0 : R.content) || "<ul><li>Item</li></ul>"
+      }, null, 12, ht)) : x.value === "divider" ? (g(), m("div", {
+        key: 7,
+        style: s(tt(r.comp.props))
+      }, [
+        u("hr", {
+          style: s(nt(r.comp.props))
+        }, null, 4)
+      ], 4)) : x.value === "spacer" ? (g(), m("div", $t, [
+        u("div", {
+          style: s(et(r.comp.props))
+        }, null, 4)
+      ])) : x.value === "menu" ? (g(), m("div", {
+        key: 9,
+        style: s(it(r.comp.props))
+      }, [
+        (I = (D = r.comp.props) == null ? void 0 : D.items) != null && I.some((f) => f.enabled && f.label) ? (g(!0), m(E, { key: 1 }, j(r.comp.props.items.filter(
+          (f) => f.enabled && f.label
+        ), (f, $) => (g(), m("span", {
+          key: f._id || $,
+          style: s(
+            ot(
+              r.comp.props,
+              Number($),
+              r.comp.props.items.filter((b) => b.enabled && b.label).length
+            )
+          )
+        }, S(f.label), 5))), 128)) : (g(), m("div", bt, " Menu "))
+      ], 4)) : x.value === "socials" ? (g(), m("div", {
+        key: 10,
+        style: s(rt(r.comp.props))
+      }, [
+        (B = (G = r.comp.props) == null ? void 0 : G.platforms) != null && B.some((f) => f.enabled && f.link) ? (g(!0), m(E, { key: 0 }, j(r.comp.props.platforms.filter(
+          (f) => f.enabled && f.link
+        ), (f) => {
+          var $, b;
+          return g(), m("span", {
+            key: f.name,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          }, [
+            u("img", {
+              src: f.icon,
+              alt: f.name,
+              style: s({
+                width: ((($ = r.comp.props) == null ? void 0 : $.iconSize) || 24) + "px",
+                height: (((b = r.comp.props) == null ? void 0 : b.iconSize) || 24) + "px",
+                display: "block"
+              })
+            }, null, 12, St)
+          ]);
+        }), 128)) : (g(), m("span", kt, "Socials"))
+      ], 4)) : (g(), m("div", vt, S(x.value), 1));
+    };
+  }
+});
+export {
+  Ft as default
+};

package/dist/RowPreviewRow-Bizr4PTf.js

@@ -0,0 +1,86 @@
+import { n as z, A, o as g, q as u, F as B, t as G, w as v, B as V, v as j, C as w, x as D } from "./element-CRfWpZos.js";
+const F = {
+  key: 0,
+  class: "w-full border border-dashed border-(--md-border) rounded",
+  style: { "min-height": "10px" }
+}, W = /* @__PURE__ */ z({
+  __name: "RowPreviewRow",
+  props: {
+    row: {},
+    scale: {},
+    depth: {}
+  },
+  setup(s) {
+    const S = D(
+      () => import("./RowPreviewChildren-DQoyExvw.js")
+    ), C = s;
+    function p(e) {
+      var o;
+      const r = e == null ? void 0 : e.backgroundGradient;
+      if ((r == null ? void 0 : r.useGradient) === !0 && Array.isArray((o = r == null ? void 0 : r.gradient) == null ? void 0 : o.colors) && r.gradient.colors.length >= 2) {
+        const { type: a, direction: c, colors: i } = r.gradient, t = i.map((d) => `${d.color} ${d.position}%`).join(", ");
+        return a === "radial" ? `radial-gradient(circle at center, ${t})` : `linear-gradient(${c}, ${t})`;
+      }
+      return (e == null ? void 0 : e.backgroundColor) ?? "transparent";
+    }
+    const P = A(() => {
+      var n, o, a, c, i, t, d, l;
+      const e = C.row, r = {
+        display: "flex",
+        flexDirection: "row",
+        background: p(e),
+        padding: `${((n = e.padding) == null ? void 0 : n.top) ?? 0}px ${((o = e.padding) == null ? void 0 : o.right) ?? 0}px ${((a = e.padding) == null ? void 0 : a.bottom) ?? 0}px ${((c = e.padding) == null ? void 0 : c.left) ?? 0}px`,
+        alignItems: "stretch",
+        border: `${((i = e.border) == null ? void 0 : i.width) ?? 0}px ${((t = e.border) == null ? void 0 : t.style) ?? "solid"} ${((d = e.border) == null ? void 0 : d.color) ?? "transparent"}`,
+        borderRadius: `${((l = e.border) == null ? void 0 : l.radius) ?? 0}px`,
+        gap: `${e.gap ?? 0}px`,
+        overflow: "hidden"
+      };
+      return e.backgroundImage && (r.backgroundImage = `url(${e.backgroundImage})`, r.backgroundSize = e.backgroundSize ?? "cover", r.backgroundPosition = e.backgroundPosition ?? "center center"), r;
+    });
+    function I(e, r) {
+      var l, b, h, x, $, f, m, k, y;
+      const n = {
+        top: "flex-start",
+        middle: "center",
+        bottom: "flex-end"
+      }, o = e.width ?? 50, a = ((l = r == null ? void 0 : r.columns) == null ? void 0 : l.length) || 1, c = (r == null ? void 0 : r.gap) ?? 0, i = a > 1 ? c * (a - 1) / a : 0, t = i > 0 ? `calc(${o}% - ${i}px)` : `${o}%`, d = {
+        flex: `0 0 ${t}`,
+        width: t,
+        maxWidth: t,
+        boxSizing: "border-box",
+        background: p(e),
+        padding: `${((b = e.padding) == null ? void 0 : b.top) ?? 10}px ${((h = e.padding) == null ? void 0 : h.right) ?? 10}px ${((x = e.padding) == null ? void 0 : x.bottom) ?? 10}px ${(($ = e.padding) == null ? void 0 : $.left) ?? 10}px`,
+        border: `${((f = e.border) == null ? void 0 : f.width) ?? 0}px ${((m = e.border) == null ? void 0 : m.style) ?? "solid"} ${((k = e.border) == null ? void 0 : k.color) ?? "transparent"}`,
+        borderRadius: `${((y = e.border) == null ? void 0 : y.radius) ?? 0}px`,
+        overflow: "hidden",
+        minWidth: "0",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: n[e.verticalAlign] ?? "flex-start"
+      };
+      return e.backgroundImage && (d.backgroundImage = `url(${e.backgroundImage})`, d.backgroundSize = e.backgroundSize ?? "cover", d.backgroundPosition = e.backgroundPosition ?? "center center", d.minHeight = "14px"), d;
+    }
+    return (e, r) => (s.depth ?? 0) < 5 ? (g(), u("div", {
+      key: 0,
+      style: v(P.value),
+      class: "w-full"
+    }, [
+      (g(!0), u(B, null, G(s.row.columns ?? [], (n) => (g(), u("div", {
+        key: n.id,
+        style: v(I(n, s.row)),
+        class: "overflow-hidden shrink-0"
+      }, [
+        V(j(S), {
+          children: n.children ?? n.components ?? [],
+          scale: s.scale,
+          depth: (s.depth ?? 0) + 1
+        }, null, 8, ["children", "scale", "depth"]),
+        (n.children ?? n.components ?? []).length === 0 ? (g(), u("div", F)) : w("", !0)
+      ], 4))), 128))
+    ], 4)) : w("", !0);
+  }
+});
+export {
+  W as default
+};

package/dist/RowPreviewRow-CLhz0YQ5.js

@@ -0,0 +1,86 @@
+import { defineComponent as z, defineAsyncComponent as A, computed as G, openBlock as g, createElementBlock as u, normalizeStyle as v, Fragment as B, renderList as V, createVNode as j, unref as D, createCommentVNode as w } from "vue";
+const N = {
+  key: 0,
+  class: "w-full border border-dashed border-(--md-border) rounded",
+  style: { "min-height": "10px" }
+}, E = /* @__PURE__ */ z({
+  __name: "RowPreviewRow",
+  props: {
+    row: {},
+    scale: {},
+    depth: {}
+  },
+  setup(s) {
+    const S = A(
+      () => import("./RowPreviewChildren-yl3aB7hb.js")
+    ), P = s;
+    function p(e) {
+      var o;
+      const r = e == null ? void 0 : e.backgroundGradient;
+      if ((r == null ? void 0 : r.useGradient) === !0 && Array.isArray((o = r == null ? void 0 : r.gradient) == null ? void 0 : o.colors) && r.gradient.colors.length >= 2) {
+        const { type: i, direction: c, colors: a } = r.gradient, t = a.map((d) => `${d.color} ${d.position}%`).join(", ");
+        return i === "radial" ? `radial-gradient(circle at center, ${t})` : `linear-gradient(${c}, ${t})`;
+      }
+      return (e == null ? void 0 : e.backgroundColor) ?? "transparent";
+    }
+    const C = G(() => {
+      var n, o, i, c, a, t, d, l;
+      const e = P.row, r = {
+        display: "flex",
+        flexDirection: "row",
+        background: p(e),
+        padding: `${((n = e.padding) == null ? void 0 : n.top) ?? 0}px ${((o = e.padding) == null ? void 0 : o.right) ?? 0}px ${((i = e.padding) == null ? void 0 : i.bottom) ?? 0}px ${((c = e.padding) == null ? void 0 : c.left) ?? 0}px`,
+        alignItems: "stretch",
+        border: `${((a = e.border) == null ? void 0 : a.width) ?? 0}px ${((t = e.border) == null ? void 0 : t.style) ?? "solid"} ${((d = e.border) == null ? void 0 : d.color) ?? "transparent"}`,
+        borderRadius: `${((l = e.border) == null ? void 0 : l.radius) ?? 0}px`,
+        gap: `${e.gap ?? 0}px`,
+        overflow: "hidden"
+      };
+      return e.backgroundImage && (r.backgroundImage = `url(${e.backgroundImage})`, r.backgroundSize = e.backgroundSize ?? "cover", r.backgroundPosition = e.backgroundPosition ?? "center center"), r;
+    });
+    function I(e, r) {
+      var l, b, h, x, $, f, m, k, y;
+      const n = {
+        top: "flex-start",
+        middle: "center",
+        bottom: "flex-end"
+      }, o = e.width ?? 50, i = ((l = r == null ? void 0 : r.columns) == null ? void 0 : l.length) || 1, c = (r == null ? void 0 : r.gap) ?? 0, a = i > 1 ? c * (i - 1) / i : 0, t = a > 0 ? `calc(${o}% - ${a}px)` : `${o}%`, d = {
+        flex: `0 0 ${t}`,
+        width: t,
+        maxWidth: t,
+        boxSizing: "border-box",
+        background: p(e),
+        padding: `${((b = e.padding) == null ? void 0 : b.top) ?? 10}px ${((h = e.padding) == null ? void 0 : h.right) ?? 10}px ${((x = e.padding) == null ? void 0 : x.bottom) ?? 10}px ${(($ = e.padding) == null ? void 0 : $.left) ?? 10}px`,
+        border: `${((f = e.border) == null ? void 0 : f.width) ?? 0}px ${((m = e.border) == null ? void 0 : m.style) ?? "solid"} ${((k = e.border) == null ? void 0 : k.color) ?? "transparent"}`,
+        borderRadius: `${((y = e.border) == null ? void 0 : y.radius) ?? 0}px`,
+        overflow: "hidden",
+        minWidth: "0",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: n[e.verticalAlign] ?? "flex-start"
+      };
+      return e.backgroundImage && (d.backgroundImage = `url(${e.backgroundImage})`, d.backgroundSize = e.backgroundSize ?? "cover", d.backgroundPosition = e.backgroundPosition ?? "center center", d.minHeight = "14px"), d;
+    }
+    return (e, r) => (s.depth ?? 0) < 5 ? (g(), u("div", {
+      key: 0,
+      style: v(C.value),
+      class: "w-full"
+    }, [
+      (g(!0), u(B, null, V(s.row.columns ?? [], (n) => (g(), u("div", {
+        key: n.id,
+        style: v(I(n, s.row)),
+        class: "overflow-hidden shrink-0"
+      }, [
+        j(D(S), {
+          children: n.children ?? n.components ?? [],
+          scale: s.scale,
+          depth: (s.depth ?? 0) + 1
+        }, null, 8, ["children", "scale", "depth"]),
+        (n.children ?? n.components ?? []).length === 0 ? (g(), u("div", N)) : w("", !0)
+      ], 4))), 128))
+    ], 4)) : w("", !0);
+  }
+});
+export {
+  E as default
+};