@feedmepos/mf-brand-app-builder 0.5.22-dev.0 → 0.5.23-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-brand-app-builder",
-  "version": "0.5.22-dev.0",
+  "version": "0.5.23-dev.0",
   "type": "module",
   "files": [
     "dist"
@@ -14,20 +14,23 @@
     "./style": "./dist/style.css"
   },
   "dependencies": {
-    "@feedmepos/brand-core": "0.0.2-alpha.1",
+    "@feedmepos/brand-core": "0.0.2-beta.2",
+    "@feedmepos/core": "^2.14.46",
     "@feedmepos/mf-common": "^1.26.3",
-    "@feedmepos/ui-library": "1.5.5",
+    "@feedmepos/ui-library": "1.8.4",
     "@formkit/core": "^1.6.7",
     "@formkit/vue": "^1.6.7",
+    "@monaco-editor/loader": "^1.5.0",
     "axios": "^1.7.2",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
     "i18next": "^25.1.1",
+    "monaco-editor": "^0.52.2",
     "opentype.js": "^1.3.4",
     "pinia": "^2.1.7",
     "qrcode": "^1.5.4",
     "uuid": "^9.0.1",
-    "vue": "^3.5.12",
+    "vue": "3.5.13",
     "vue-accessible-color-picker": "^5.2.0",
     "vue-i18n": "^11.1.3",
     "vue-router": "^4.3.2",

package/dist/ColorPicker-CHzKbuCD.js

@@ -1,543 +0,0 @@
-import { defineComponent as fe, ref as A, reactive as pe, computed as q, watch as ve, onMounted as de, onBeforeUnmount as me, openBlock as y, createElementBlock as $, createElementVNode as h, renderSlot as L, createTextVNode as G, createCommentVNode as Z, Fragment as ge, renderList as be, toDisplayString as we } from "vue";
-function E(e, n, o) {
-  return Math.max(n, Math.min(e, o));
-}
-function xe(e, n) {
-  if (typeof e == "string" || typeof n == "string")
-    return e === n;
-  for (const o in e)
-    if (e[o] !== n[o])
-      return !1;
-  return !0;
-}
-function F(e) {
-  const n = [], o = e.length > 5 ? 2 : 1;
-  for (let l = 1; l < e.length; l += o) {
-    const a = e.substring(l, l + o).repeat(o % 2 + 1), f = parseInt(a, 16);
-    n.push(l === 3 * o + 1 ? f / 255 : f);
-  }
-  return n.length === 3 && n.push(1), {
-    r: n[0],
-    g: n[1],
-    b: n[2],
-    a: n[3]
-  };
-}
-function ee(e) {
-  const n = e.l / 100, o = n + e.s / 100 * Math.min(n, 1 - n), l = o === 0 ? 0 : 200 * (1 - n / o);
-  return {
-    h: e.h,
-    s: l,
-    v: o * 100,
-    a: e.a
-  };
-}
-function S(e) {
-  let n = e.h % 360;
-  n < 0 && (n += 360);
-  const o = e.s / 100, l = e.l / 100;
-  return {
-    r: V(0, n, o, l) * 255,
-    g: V(8, n, o, l) * 255,
-    b: V(4, n, o, l) * 255,
-    a: e.a
-  };
-}
-function V(e, n, o, l) {
-  const a = (e + n / 30) % 12, f = o * Math.min(l, 1 - l);
-  return l - f * Math.max(-1, Math.min(a - 3, 9 - a, 1));
-}
-function te(e) {
-  const n = e.s / 100, o = e.v / 100, l = o * (1 - n / 2);
-  return {
-    h: e.h,
-    s: l === 0 || l === 1 ? 0 : (o - l) / Math.min(l, 1 - l) * 100,
-    l: l * 100,
-    a: e.a
-  };
-}
-function ne(e) {
-  return {
-    h: e.h,
-    w: e.v * (100 - e.s) / 100,
-    b: 100 - e.v,
-    a: e.a
-  };
-}
-function N(e) {
-  return S(te(e));
-}
-function k(e) {
-  const n = e.w / 100, o = e.b / 100;
-  let l, a;
-  const f = n + o;
-  return f >= 1 ? (l = 0, a = n / f) : (a = 1 - o, l = (1 - n / a) * 100), {
-    h: e.h,
-    s: l,
-    v: a * 100,
-    a: e.a
-  };
-}
-function j(e) {
-  const { r: n, g: o, b: l, a } = e, f = Math.min(n, o, l), d = Math.max(n, o, l), u = d - f, v = (d + f) / 2;
-  let m = 0;
-  u !== 0 && (d === n ? m = (o - l) / u + (o < l ? 6 : 0) : d === o ? m = (l - n) / u + 2 : d === l && (m = (n - o) / u + 4), m *= 60);
-  let p = 0;
-  return v !== 0 && v !== 255 && (p = (d - v) / Math.min(v, 255 - v)), {
-    h: m,
-    s: p * 100,
-    l: v / 255 * 100,
-    a
-  };
-}
-function T(e) {
-  return "#" + Object.values(e).map((n, o) => Math.round(o === 3 ? n * 255 : n).toString(16).padStart(2, "0")).join("");
-}
-function C(e) {
-  return ne(ee(j(e)));
-}
-const ye = {
-  hex: {
-    hex: (e) => e,
-    hsl: (e) => j(F(e)),
-    hsv: (e) => k(C(F(e))),
-    hwb: (e) => C(F(e)),
-    rgb: F
-  },
-  hsl: {
-    hex: (e) => T(S(e)),
-    hsl: (e) => e,
-    hsv: ee,
-    hwb: (e) => C(S(e)),
-    rgb: S
-  },
-  hsv: {
-    hex: (e) => T(N(e)),
-    hsl: te,
-    hsv: (e) => e,
-    hwb: ne,
-    rgb: N
-  },
-  hwb: {
-    hex: (e) => T(N(k(e))),
-    hsl: (e) => j(N(k(e))),
-    hsv: k,
-    hwb: (e) => e,
-    rgb: (e) => N(k(e))
-  },
-  rgb: {
-    hex: T,
-    hsl: j,
-    hsv: (e) => k(C(e)),
-    hwb: C,
-    rgb: (e) => e
-  }
-};
-function $e(e, n, o) {
-  return ye[e][n](o);
-}
-function ke(e, n) {
-  const o = e.toFixed(n);
-  return o.includes(".") ? o.replace(/\.?0+$/, "") : o;
-}
-const Me = {
-  deg: 1,
-  grad: 0.9,
-  rad: 180 / Math.PI,
-  turn: 360
-}, O = {
-  from(e) {
-    return e.endsWith("%") ? M.from(e, { referenceValue: 1 }) : w.from(e, { min: 0, max: 1 });
-  },
-  to(e) {
-    return w.to(e);
-  }
-}, J = {
-  from(e) {
-    const n = e.match(/deg|g?rad|turn$/);
-    if (n === null)
-      return w.from(e);
-    const o = n[0];
-    return w.from(e.slice(0, -o.length)) * Me[o];
-  },
-  to(e) {
-    return w.to(e);
-  }
-}, w = {
-  from(e, { min: n = Number.NEGATIVE_INFINITY, max: o = Number.POSITIVE_INFINITY } = {}) {
-    return e.endsWith(".") ? NaN : E(Number(e), n, o);
-  },
-  to(e) {
-    return ke(e, 2);
-  }
-}, M = {
-  from(e, { referenceValue: n = 100, min: o = 0, max: l = 100 } = {}) {
-    return e.endsWith("%") ? w.from(e.slice(0, -1), { min: o, max: l }) * n / 100 : NaN;
-  },
-  to(e) {
-    return w.to(e) + "%";
-  }
-}, _ = {
-  from(e) {
-    return e.endsWith("%") ? M.from(e, { referenceValue: 255 }) : w.from(e, { min: 0, max: 255 });
-  },
-  to(e) {
-    return w.to(e);
-  }
-}, Ne = {
-  hsl: {
-    h: J,
-    s: M,
-    l: M
-  },
-  hwb: {
-    h: J,
-    w: M,
-    b: M
-  },
-  rgb: {
-    r: _,
-    g: _,
-    b: _
-  }
-};
-function D(e, n) {
-  return Ne[e][n];
-}
-function z({ format: e, color: n }, o) {
-  if (e === "hex")
-    return o && [5, 9].includes(n.length) ? n.substring(0, n.length - (n.length - 1) / 4) : n;
-  const l = Object.entries(n).slice(0, o ? 3 : 4).map(([a, f]) => {
-    const d = a === "a" ? O : D(e, a);
-    return (a === "a" ? "/ " : "") + d.to(f);
-  });
-  return `${e}(${l.join(" ")})`;
-}
-function re(e) {
-  return /^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e);
-}
-function Ce(e) {
-  return "r" in e ? "rgb" : "w" in e ? "hwb" : "v" in e ? "hsv" : "s" in e ? "hsl" : null;
-}
-const Q = {
-  hsl: ["h", "s", "l", "a"],
-  hwb: ["h", "w", "b", "a"],
-  rgb: ["r", "g", "b", "a"]
-};
-function Ee(e) {
-  if (typeof e != "string") {
-    const u = Ce(e);
-    return u === null ? null : { format: u, color: e };
-  }
-  if (e.startsWith("#"))
-    return re(e) ? { format: "hex", color: e } : null;
-  if (!e.includes("(")) {
-    const u = document.createElement("canvas").getContext("2d");
-    u.fillStyle = e;
-    const v = u.fillStyle;
-    return v === "#000000" && e !== "black" ? null : { format: "hex", color: v };
-  }
-  const [n, o] = e.split("("), l = n.substring(0, 3);
-  if (!(l in Q))
-    return null;
-  const a = o.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
-  a.length === 3 && a.push("1");
-  const f = Q[l], d = Object.fromEntries(f.map((u, v) => {
-    const m = u === "a" ? O : D(l, u);
-    return [
-      u,
-      m.from(a[v])
-    ];
-  }));
-  return { format: l, color: d };
-}
-function Ie(e, n, o) {
-  const l = e.getBoundingClientRect(), a = n - l.left, f = o - l.top;
-  return {
-    x: l.width === 0 ? 0 : E(a / l.width * 100, 0, 100),
-    y: l.height === 0 ? 0 : E((1 - f / l.height) * 100, 0, 100)
-  };
-}
-const Ae = { class: "vacp-range-input-group" }, Le = ["for"], Fe = { class: "vacp-range-input-label-text vacp-range-input-label-text--hue" }, Te = ["id", "value"], Se = ["for"], je = { class: "vacp-range-input-label-text vacp-range-input-label-text--alpha" }, Oe = ["id", "value"], De = { class: "vacp-color-inputs" }, He = { class: "vacp-color-input-group" }, Pe = ["for"], Ve = ["id", "value"], _e = ["id", "for", "onInput"], ze = { class: "vacp-color-input-label-text" }, Ke = ["id", "value", "onInput"], Be = /* @__PURE__ */ fe({
-  __name: "ColorPicker",
-  props: {
-    color: { default: "#ffffffff" },
-    copy: { type: Function, default: void 0 },
-    id: { default: "color-picker" },
-    visibleFormats: { default: () => ["hex", "hsl", "hwb", "rgb"] },
-    defaultFormat: { default: "hsl" },
-    alphaChannel: { default: "show" }
-  },
-  emits: ["color-change", "color-copy"],
-  setup(e, { expose: n, emit: o }) {
-    const l = ["hex", "hsl", "hsv", "hwb", "rgb"], a = e, f = o;
-    n({
-      copyColor: U
-    });
-    const d = A(null), u = A(null), v = A(null);
-    let m = !1;
-    const p = A(a.visibleFormats.includes(a.defaultFormat) ? a.defaultFormat : a.visibleFormats[0]), i = pe({
-      hex: "#ffffffff",
-      hsl: { h: 0, s: 0, l: 100, a: 1 },
-      hsv: { h: 0, s: 0, v: 100, a: 1 },
-      hwb: { h: 0, w: 100, b: 0, a: 1 },
-      rgb: { r: 255, g: 255, b: 255, a: 1 }
-    }), oe = q(function() {
-      const r = p.value, t = i[r];
-      return r.split("").map((s) => {
-        const c = t[s];
-        return {
-          value: D(r, s).to(c),
-          channel: s,
-          label: s.toUpperCase()
-        };
-      }).concat(a.alphaChannel === "show" ? [{
-        value: O.to(t.a),
-        channel: "a",
-        label: "Alpha"
-      }] : []);
-    }), le = q(function() {
-      return a.alphaChannel === "hide" && [5, 9].includes(i.hex.length) ? i.hex.substring(0, i.hex.length - (i.hex.length - 1) / 4) : i.hex;
-    });
-    ve(() => a.color, W), de(function() {
-      document.addEventListener("mousemove", H, { passive: !1 }), document.addEventListener("touchmove", P, { passive: !1 }), document.addEventListener("mouseup", I), document.addEventListener("touchend", I), W(a.color);
-    }), me(function() {
-      document.removeEventListener("mousemove", H), document.removeEventListener("touchmove", P), document.removeEventListener("mouseup", I), document.removeEventListener("touchend", I);
-    });
-    function ae() {
-      const r = (a.visibleFormats.findIndex((t) => t === p.value) + 1) % a.visibleFormats.length;
-      p.value = a.visibleFormats[r];
-    }
-    function se(r) {
-      m = !0, H(r);
-    }
-    function ce(r) {
-      m = !0, P(r);
-    }
-    function I() {
-      m = !1;
-    }
-    function H(r) {
-      r.buttons !== 1 || m === !1 || !(u.value instanceof HTMLElement) || K(u.value, r.clientX, r.clientY);
-    }
-    function P(r) {
-      if (m === !1 || !(u.value instanceof HTMLElement))
-        return;
-      r.preventDefault();
-      const t = r.touches[0];
-      K(u.value, t.clientX, t.clientY);
-    }
-    function K(r, t, s) {
-      const c = Ie(r, t, s), g = Object.assign({}, i.hsv);
-      g.s = c.x, g.v = c.y, x("hsv", g);
-    }
-    function ie(r) {
-      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(r.key))
-        return;
-      r.preventDefault();
-      const t = ["ArrowLeft", "ArrowDown"].includes(r.key) ? -1 : 1, s = ["ArrowLeft", "ArrowRight"].includes(r.key) ? "s" : "v", c = r.shiftKey ? 10 : 1, g = i.hsv[s] + t * c, b = Object.assign({}, i.hsv);
-      b[s] = E(g, 0, 100), x("hsv", b);
-    }
-    function W(r) {
-      const t = Ee(r);
-      t !== null && x(t.format, t.color);
-    }
-    function B(r, t) {
-      const s = r.currentTarget, c = Object.assign({}, i.hsv);
-      c[t] = Number(s.value), x("hsv", c);
-    }
-    function ue(r) {
-      const t = r.target;
-      re(t.value) && x("hex", t.value);
-    }
-    function R(r, t) {
-      const s = r.target, c = p.value, g = Object.assign({}, i[c]), b = (t === "a" ? O : D(c, t)).from(s.value);
-      Number.isNaN(b) || b === void 0 || (g[t] = b, x(c, g));
-    }
-    function x(r, t) {
-      let s = t;
-      if (a.alphaChannel === "hide")
-        if (typeof t != "string")
-          t.a = 1, s = t;
-        else if ([5, 9].includes(t.length)) {
-          const c = (t.length - 1) / 4;
-          s = t.substring(0, t.length - c) + "f".repeat(c);
-        } else [4, 7].includes(t.length) && (s = t + "f".repeat((t.length - 1) / 3));
-      if (!xe(i[r], s)) {
-        i[r] = s;
-        for (const c of l)
-          c !== r && (i[c] = $e(r, c, s));
-        f("color-change", Y());
-      }
-      d.value instanceof HTMLElement && u.value instanceof HTMLElement && v.value instanceof HTMLElement && he(d.value, u.value, v.value);
-    }
-    async function U() {
-      const r = i[p.value], t = a.alphaChannel === "hide", s = z({ color: r, format: p.value }, t);
-      await (a.copy ? a.copy : window.navigator.clipboard.writeText)(s), f("color-copy", Y());
-    }
-    function he(r, t, s) {
-      const c = z({ format: "hsl", color: i.hsl }, !0);
-      r.style.setProperty("--vacp-color", c), t.style.position = "relative", t.style.backgroundColor = `hsl(${i.hsl.h} 100% 50%)`, t.style.backgroundImage = "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)", s.style.boxSizing = "border-box", s.style.position = "absolute", s.style.left = `${i.hsv.s}%`, s.style.bottom = `${i.hsv.v}%`;
-    }
-    function Y() {
-      const r = a.alphaChannel === "hide", t = z({ color: i[p.value], format: p.value }, r);
-      return {
-        colors: i,
-        cssColor: t
-      };
-    }
-    function X(r) {
-      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(r.key) || !r.shiftKey)
-        return;
-      const t = r.currentTarget, s = Number(t.step), c = ["ArrowLeft", "ArrowDown"].includes(r.key) ? -1 : 1, g = Number(t.value) + c * s * 10, b = E(g, Number(t.min), Number(t.max));
-      t.value = String(b - c * s);
-    }
-    return (r, t) => (y(), $("div", {
-      ref_key: "colorPicker",
-      ref: d,
-      class: "vacp-color-picker"
-    }, [
-      h("div", {
-        ref_key: "colorSpace",
-        ref: u,
-        class: "vacp-color-space",
-        onMousedown: se,
-        onTouchstart: ce
-      }, [
-        h("div", {
-          ref_key: "thumb",
-          ref: v,
-          class: "vacp-color-space-thumb",
-          tabindex: "0",
-          "aria-label": "Color space thumb",
-          onKeydown: ie
-        }, null, 544)
-      ], 544),
-      h("div", Ae, [
-        h("label", {
-          class: "vacp-range-input-label vacp-range-input-label--hue",
-          for: `${r.id}-hue-slider`
-        }, [
-          h("span", Fe, [
-            L(r.$slots, "hue-range-input-label", {}, () => [
-              t[2] || (t[2] = G("Hue"))
-            ])
-          ]),
-          h("input", {
-            id: `${r.id}-hue-slider`,
-            class: "vacp-range-input vacp-range-input--hue",
-            value: i.hsv.h,
-            type: "range",
-            min: "0",
-            max: "360",
-            step: "1",
-            onKeydownPassive: X,
-            onInput: t[0] || (t[0] = (s) => B(s, "h"))
-          }, null, 40, Te)
-        ], 8, Le),
-        r.alphaChannel === "show" ? (y(), $("label", {
-          key: 0,
-          class: "vacp-range-input-label vacp-range-input-label--alpha",
-          for: `${r.id}-alpha-slider`
-        }, [
-          h("span", je, [
-            L(r.$slots, "alpha-range-input-label", {}, () => [
-              t[3] || (t[3] = G("Alpha"))
-            ])
-          ]),
-          h("input", {
-            id: `${r.id}-alpha-slider`,
-            class: "vacp-range-input vacp-range-input--alpha",
-            value: i.hsv.a,
-            type: "range",
-            min: "0",
-            max: "1",
-            step: "0.01",
-            onKeydownPassive: X,
-            onInput: t[1] || (t[1] = (s) => B(s, "a"))
-          }, null, 40, Oe)
-        ], 8, Se)) : Z("", !0)
-      ]),
-      h("button", {
-        class: "vacp-copy-button",
-        type: "button",
-        onClick: U
-      }, [
-        L(r.$slots, "copy-button", {}, () => [
-          t[4] || (t[4] = h("span", { class: "vacp-visually-hidden" }, "Copy color", -1)),
-          t[5] || (t[5] = h("svg", {
-            class: "vacp-icon",
-            xmlns: "http://www.w3.org/2000/svg",
-            "aria-hidden": "true",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 32 32"
-          }, [
-            h("path", {
-              d: "M25.313 28v-18.688h-14.625v18.688h14.625zM25.313 6.688c1.438 0 2.688 1.188 2.688 2.625v18.688c0 1.438-1.25 2.688-2.688 2.688h-14.625c-1.438 0-2.688-1.25-2.688-2.688v-18.688c0-1.438 1.25-2.625 2.688-2.625h14.625zM21.313 1.313v2.688h-16v18.688h-2.625v-18.688c0-1.438 1.188-2.688 2.625-2.688h16z",
-              fill: "currentColor"
-            })
-          ], -1))
-        ])
-      ]),
-      h("div", De, [
-        h("div", He, [
-          p.value === "hex" ? (y(), $("label", {
-            key: 0,
-            class: "vacp-color-input-label",
-            for: `${r.id}-color-hex`
-          }, [
-            t[6] || (t[6] = h("span", { class: "vacp-color-input-label-text" }, " Hex ", -1)),
-            h("input", {
-              id: `${r.id}-color-hex`,
-              class: "vacp-color-input",
-              type: "text",
-              value: le.value,
-              onInput: ue
-            }, null, 40, Ve)
-          ], 8, Pe)) : (y(!0), $(ge, { key: 1 }, be(oe.value, ({ value: s, channel: c, label: g }) => (y(), $("label", {
-            id: `${r.id}-color-${p.value}-${c}-label`,
-            key: `${r.id}-color-${p.value}-${c}-label`,
-            class: "vacp-color-input-label",
-            for: `${r.id}-color-${p.value}-${c}`,
-            onInput: (b) => R(b, c)
-          }, [
-            h("span", ze, we(g), 1),
-            h("input", {
-              id: `${r.id}-color-${p.value}-${c}`,
-              class: "vacp-color-input",
-              type: "text",
-              value: s,
-              onInput: (b) => R(b, c)
-            }, null, 40, Ke)
-          ], 40, _e))), 128))
-        ]),
-        r.visibleFormats.length > 1 ? (y(), $("button", {
-          key: 0,
-          class: "vacp-format-switch-button",
-          type: "button",
-          onClick: ae
-        }, [
-          L(r.$slots, "format-switch-button", {}, () => [
-            t[7] || (t[7] = h("span", { class: "vacp-visually-hidden" }, "Switch format", -1)),
-            t[8] || (t[8] = h("svg", {
-              class: "vacp-icon",
-              "aria-hidden": "true",
-              xmlns: "http://www.w3.org/2000/svg",
-              width: "16",
-              height: "15"
-            }, [
-              h("path", {
-                d: "M8 15l5-5-1-1-4 2-4-2-1 1zm4-9l1-1-5-5-5 5 1 1 4-2z",
-                fill: "currentColor"
-              })
-            ], -1))
-          ])
-        ])) : Z("", !0)
-      ])
-    ], 512));
-  }
-});
-export {
-  Be as K
-};