@feedmepos/mf-brand-app-builder 0.5.6 → 0.5.7-beta.1

package/dist/ButtonGroup-B3ba45VA.js

@@ -0,0 +1,25 @@
+import { defineComponent as r, computed as c, resolveComponent as l, openBlock as s, createBlock as m } from "vue";
+const i = /* @__PURE__ */ r({
+  __name: "ButtonGroup",
+  props: {
+    context: {}
+  },
+  setup(o) {
+    const t = o, n = (e) => {
+      t.context.node.input(e.value);
+    }, u = c(() => t.context.groupItems.find(
+      (e) => JSON.stringify(e.value) === JSON.stringify(t.context._value)
+    ));
+    return (e, a) => {
+      const p = l("FmButtonGroup");
+      return s(), m(p, {
+        "model-value": u.value,
+        "onUpdate:modelValue": n,
+        items: e.context.groupItems
+      }, null, 8, ["model-value", "items"]);
+    };
+  }
+});
+export {
+  i as default
+};

package/dist/CircularProgress-h90pbjU3.js

@@ -0,0 +1,43 @@
+import { openBlock as s, createElementBlock as o, defineComponent as l, createElementVNode as r } from "vue";
+import { _ as n } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const a = {}, _ = { class: "border-b border-fm-color-neutral-gray-100" };
+function d(e, t) {
+  return s(), o("div", _);
+}
+const g = /* @__PURE__ */ n(a, [["render", d]]), f = { class: "relative" }, i = { class: "h-[18px] w-[18px] flex items-center justify-center" }, p = {
+  class: "absolute h-full left-0 top-0 w-full text-fm-color-primary",
+  viewBox: "0 0 18 18"
+}, m = ["stroke-width"];
+var c = /* @__PURE__ */ ((e) => (e[e.md = 2.5] = "md", e[e.lg = 2] = "lg", e[e.xl = 1.75] = "xl", e[e.xxl = 1.5] = "xxl", e))(c || {});
+const x = /* @__PURE__ */ l({
+  __name: "CircularProgress",
+  props: {
+    indeterminate: { type: Boolean, default: void 0 },
+    size: { default: "xxl" },
+    color: { default: "primary" }
+  },
+  setup(e) {
+    return (t, u) => (s(), o("div", f, [
+      r("div", i, [
+        (s(), o("svg", p, [
+          r("circle", {
+            class: "spinner",
+            "stroke-width": c[t.size],
+            fill: "none",
+            stroke: "currentColor",
+            cx: "50%",
+            cy: "50%",
+            r: 7.75,
+            "stroke-linecap": "round",
+            "stroke-dasharray": "10 200",
+            "stroke-dashoffset": "0"
+          }, null, 8, m)
+        ]))
+      ])
+    ]));
+  }
+}), h = /* @__PURE__ */ n(x, [["__scopeId", "data-v-3c8691e9"]]);
+export {
+  h as C,
+  g as D
+};

package/dist/ColorPicker-DAysa9fA.js

@@ -0,0 +1,22 @@
+import { defineComponent as c, openBlock as l, createElementBlock as a, createElementVNode as r } from "vue";
+const s = { class: "flex justify-between items-center gap-8" }, p = ["value"], _ = /* @__PURE__ */ c({
+  __name: "ColorPicker",
+  props: {
+    context: {}
+  },
+  setup(t) {
+    const n = t, o = (e) => {
+      n.context.node.input(e.target.value);
+    };
+    return (e, u) => (l(), a("label", s, [
+      r("input", {
+        type: "color",
+        value: e.context._value,
+        onInput: o
+      }, null, 40, p)
+    ]));
+  }
+});
+export {
+  _ as default
+};

package/dist/Icon.vue_vue_type_style_index_0_lang-CVCHCcWR.js

@@ -0,0 +1,16 @@
+import { defineComponent as n, openBlock as o, createElementBlock as l, normalizeClass as a, toDisplayString as r } from "vue";
+const i = /* @__PURE__ */ n({
+  __name: "Icon",
+  props: {
+    name: {},
+    filled: { type: Boolean, default: !1 }
+  },
+  setup(s) {
+    return (e, t) => (o(), l("span", {
+      class: a(["material-symbols-rounded", `icon-${e.filled ? "filled" : "rounded"}`])
+    }, r(e.name), 3));
+  }
+});
+export {
+  i as _
+};

package/dist/ImageUpload-oPECradZ.js

@@ -0,0 +1,72 @@
+import { defineComponent as x, ref as y, resolveComponent as b, openBlock as r, createElementBlock as s, createVNode as c, Fragment as w, createElementVNode as i, unref as u, createCommentVNode as d } from "vue";
+import { r as f, I as h } from "./image-DZ7CZVU8.js";
+import { useCoreStore as C } from "@feedmepos/mf-common";
+import "./main-BUI2Mmvv.js";
+import { _ as I } from "./Icon.vue_vue_type_style_index_0_lang-CVCHCcWR.js";
+import { C as $ } from "./CircularProgress-h90pbjU3.js";
+import { v as k } from "./v4-ANoOI1Qw.js";
+const F = { class: "w-full h-[210px] relative" }, B = { class: "absolute z-[1] top-0 left-0 h-full w-full bg-fm-color-neutral-white border border-dashed border-fm-color-neutral-gray-200" }, P = ["src"], j = {
+  key: 1,
+  class: "absolute z-[3] top-0 left-0 rounded-md bg-fm-color-neutral-gray-100 bg-opacity-80 w-full h-full flex justify-center items-center"
+}, A = /* @__PURE__ */ x({
+  __name: "ImageUpload",
+  props: {
+    context: {}
+  },
+  setup(_) {
+    const e = _, a = C(), t = y(!1);
+    async function g(o) {
+      t.value = !0, await h.uploadImage(
+        a.currentBusiness.value._id,
+        `${k()}.${o.name.split(".").pop()}`,
+        o
+      ).then((m) => {
+        const l = `https://image.feedmedev.cc/business/${a.currentBusiness.value._id}/${m.imagePath}`;
+        e.context.node.input(l);
+        const n = new Image();
+        n.onload = () => {
+          var p;
+          ((p = e.context.node.at("$root")) == null ? void 0 : p._value).containerStyles.height = `${Math.min(n.height, 400)}px`;
+        }, n.src = f(l);
+      }).finally(() => t.value = !1);
+    }
+    async function v() {
+      t.value = !0;
+      const o = e.context._value.split("/").pop();
+      await h.deleteImage(a.currentBusiness.value._id, o).then(() => e.context.node.input("")).finally(() => t.value = !1);
+    }
+    return (o, m) => {
+      const l = b("FmDropField");
+      return r(), s("div", F, [
+        c(l, {
+          class: "w-full h-full",
+          onFileUpload: g
+        }),
+        e.context._value && !t.value ? (r(), s(w, { key: 0 }, [
+          i("div", B, [
+            i("img", {
+              class: "w-full h-full object-contain",
+              src: u(f)(e.context._value)
+            }, null, 8, P)
+          ]),
+          i("button", {
+            type: "button",
+            class: "absolute z-[2] -right-8 -top-8 w-24 h-24 bg-fm-color-system-error-300 rounded-full flex items-center justify-center",
+            onClick: v
+          }, [
+            c(u(I), {
+              name: "close",
+              class: "!text-[16px] text-fm-color-typo-white"
+            })
+          ])
+        ], 64)) : d("", !0),
+        t.value ? (r(), s("div", j, [
+          c(u($))
+        ])) : d("", !0)
+      ]);
+    };
+  }
+});
+export {
+  A as default
+};

package/dist/LinkButton-UPu99O28.js

@@ -0,0 +1,169 @@
+import { defineComponent as L, ref as f, computed as k, onBeforeMount as P, resolveComponent as c, openBlock as p, createBlock as v, withCtx as m, createElementBlock as x, createElementVNode as o, toDisplayString as I, createVNode as r, withModifiers as R, Fragment as C, renderList as F } from "vue";
+import { u as $, B as y } from "./index-0MncaVY7.js";
+import { _ as j } from "./Icon.vue_vue_type_style_index_0_lang-CVCHCcWR.js";
+import { useCoreStore as z } from "@feedmepos/mf-common";
+const A = {
+  key: 1,
+  type: "button",
+  class: "min-w-[162px] py-[6px] px-8 flex justify-between items-center bg-fm-color-system-warning-100 rounded-lg"
+}, G = { class: "w-[113px] h-full fm-typo-en-body-md-600 text-fm-color-primary line-clamp-1" }, H = { class: "w-full flex flex-col gap-16" }, N = { class: "w-full flex gap-8 flex-wrap" }, O = { class: "w-full flex gap-8 flex-wrap" }, W = { class: "w-full flex items-center" }, q = { class: "w-full flex justify-end items-center gap-12" }, Y = /* @__PURE__ */ L({
+  __name: "LinkButton",
+  props: {
+    context: {}
+  },
+  setup(E) {
+    const l = E, s = f(""), i = f(""), d = f(!1);
+    z();
+    const b = $(), h = k(
+      () => b.state.allTemplates.filter(
+        (t) => {
+          var e;
+          return t.templateId !== ((e = b.state.selectedTemplate) == null ? void 0 : e.templateId);
+        }
+      )
+    ), _ = [
+      { title: "Homepage", path: "Member::Homepage" },
+      { title: "Credit", path: "Member::Credit" },
+      { title: "Points", path: "Member::Points" },
+      { title: "Voucher", path: "Member::Voucher" },
+      { title: "Game", path: "Member::Game" },
+      { title: "Store", path: "Member::Store" }
+    ];
+    function M() {
+      i.value ? l.context.node.input({
+        path: i.value ? `https://${i.value}` : "",
+        isExternal: !0
+      }) : l.context.node.input({
+        path: s.value ? s.value : "",
+        isExternal: !1
+      }), d.value = !1;
+    }
+    function V() {
+      l.context.node.input({
+        path: "",
+        isExternal: !1
+      });
+    }
+    function B(t) {
+      s.value = "", i.value = t;
+    }
+    function g(t) {
+      i.value = "", s.value = t;
+    }
+    function w() {
+      var t, e, n;
+      (t = l.context._value) != null && t.isExternal ? (i.value = ((e = l.context._value) == null ? void 0 : e.path.replace("https://", "")) || "", s.value = "") : (s.value = ((n = l.context._value) == null ? void 0 : n.path) || "", i.value = "");
+    }
+    function S() {
+      d.value = !1, w();
+    }
+    const T = k(() => {
+      var t, e, n;
+      if ((t = l.context._value) != null && t.isExternal)
+        return l.context._value.path;
+      if (l.context._value.path.startsWith("Template::"))
+        return (e = h.value.find(
+          (u) => u.templateId === l.context._value.path.split("::").pop()
+        )) == null ? void 0 : e.templateAlias;
+      if (l.context._value.path.startsWith("Member::"))
+        return (n = _.find((u) => u.path === l.context._value.path)) == null ? void 0 : n.title;
+    });
+    return P(() => {
+      w();
+    }), (t, e) => {
+      const n = c("FmButton"), u = c("FmRadio"), U = c("FmTextField"), D = c("FmDialog");
+      return p(), v(D, {
+        modelValue: d.value,
+        "onUpdate:modelValue": e[0] || (e[0] = (a) => d.value = a),
+        "min-width": 500
+      }, {
+        "dialog-button": m(() => {
+          var a;
+          return [
+            (a = t.context._value) != null && a.path ? (p(), x("button", A, [
+              o("p", G, I(T.value), 1),
+              r(j, {
+                name: "close",
+                class: "text-[24px] text-fm-color-primary",
+                onClick: R(V, ["stop"])
+              })
+            ])) : (p(), v(n, {
+              key: 0,
+              variant: "secondary",
+              "prepend-icon": "link",
+              class: "min-w-[162px]",
+              label: "Select",
+              type: "button"
+            }))
+          ];
+        }),
+        "dialog-header": m(() => e[1] || (e[1] = [
+          o("div", null, "Link Destination", -1)
+        ])),
+        "dialog-footer": m(() => [
+          o("div", q, [
+            r(n, {
+              type: "button",
+              variant: "secondary",
+              label: "Cancel",
+              size: "md",
+              onClick: S
+            }),
+            r(n, {
+              type: "button",
+              variant: "primary",
+              label: "Save",
+              size: "md",
+              onClick: M
+            })
+          ])
+        ]),
+        default: m(() => [
+          o("div", H, [
+            e[4] || (e[4] = o("div", { class: "fm-typo-en-body-md-600 text-fm-color-typo-secondary" }, " Member ", -1)),
+            r(y),
+            o("div", N, [
+              (p(), x(C, null, F(_, (a) => r(u, {
+                "model-value": s.value,
+                "onUpdate:modelValue": g,
+                rules: () => [],
+                label: a.title,
+                value: a.path
+              }, null, 8, ["model-value", "label", "value"])), 64))
+            ]),
+            e[5] || (e[5] = o("div", { class: "fm-typo-en-body-md-600 text-fm-color-typo-secondary" }, " Other template ", -1)),
+            r(y),
+            o("div", O, [
+              (p(!0), x(C, null, F(h.value, (a) => (p(), v(u, {
+                "model-value": s.value,
+                "onUpdate:modelValue": g,
+                rules: () => [],
+                label: a.templateAlias,
+                value: `Template::${a.templateId}`
+              }, null, 8, ["model-value", "label", "value"]))), 256))
+            ]),
+            e[6] || (e[6] = o("div", { class: "fm-typo-en-body-md-600 text-fm-color-typo-secondary" }, " External URL ", -1)),
+            r(y),
+            o("div", W, [
+              e[3] || (e[3] = o("div", { class: "w-120 shrink-0" }, "Enter URL", -1)),
+              r(U, {
+                class: "w-full",
+                "model-value": i.value,
+                "onUpdate:modelValue": B
+              }, {
+                prepend: m(() => e[2] || (e[2] = [
+                  o("div", { class: "text-fm-color-typo-tertiary" }, "https://", -1)
+                ])),
+                _: 1
+              }, 8, ["model-value"])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+export {
+  Y as default
+};

package/dist/ListRepeater-CvaT0Cul.js

@@ -0,0 +1,86 @@
+import { defineComponent as b, resolveComponent as y, openBlock as c, createBlock as s, unref as u, withCtx as i, createElementBlock as m, Fragment as x, renderList as g, createElementVNode as p, createVNode as n, resolveDynamicComponent as F } from "vue";
+import { F as f } from "./app-C_qReIun.js";
+const h = { class: "flex justify-end gap-4 items-center w-full py-16 px-12 border-b" }, z = { class: "flex flex-col gap-4 w-full p-12" }, I = /* @__PURE__ */ b({
+  __name: "ListRepeater",
+  props: {
+    context: {}
+  },
+  setup($) {
+    function d(l, t) {
+      const e = l.value;
+      e.splice(t - 1, 0, e.splice(t, 1)[0]), l.input(e, !1);
+    }
+    function v(l, t) {
+      const e = l.value;
+      e.splice(t + 1, 0, e.splice(t, 1)[0]), l.input(e, !1);
+    }
+    function k(l, t) {
+      const e = l.value;
+      e.splice(t + 1, 0, {}), l.input(e, !1);
+    }
+    function _(l, t) {
+      const e = l.value;
+      e.splice(t, 1), l.input(e, !1);
+    }
+    return (l, t) => {
+      const e = y("FmIcon");
+      return c(), s(u(f), {
+        class: "w-full",
+        type: "list",
+        value: l.context.value,
+        sync: !0,
+        name: l.context.node.name,
+        dynamic: !0
+      }, {
+        default: i(({ items: C, node: r }) => [
+          (c(!0), m(x, null, g(C, (w, o) => (c(), m("div", {
+            key: w,
+            class: "mb-8 border border-fm-color-neutral-gray-100 rounded-lg"
+          }, [
+            p("div", h, [
+              n(e, {
+                size: "md",
+                name: "add",
+                onClick: (a) => k(r, o),
+                class: "cursor-pointer text-fm-color-neutral-black"
+              }, null, 8, ["onClick"]),
+              n(e, {
+                size: "md",
+                name: "remove",
+                onClick: (a) => _(r, o),
+                class: "cursor-pointer text-fm-color-neutral-black"
+              }, null, 8, ["onClick"]),
+              n(e, {
+                size: "md",
+                name: "arrow_upward",
+                onClick: (a) => d(r, o),
+                class: "cursor-pointer text-fm-color-neutral-black"
+              }, null, 8, ["onClick"]),
+              n(e, {
+                size: "md",
+                name: "arrow_downward",
+                onClick: (a) => v(r, o),
+                class: "cursor-pointer text-fm-color-neutral-black"
+              }, null, 8, ["onClick"])
+            ]),
+            n(u(f), {
+              index: o,
+              type: "group"
+            }, {
+              default: i(() => [
+                p("div", z, [
+                  (c(), s(F(l.context.slots.default)))
+                ])
+              ]),
+              _: 2
+            }, 1032, ["index"])
+          ]))), 128))
+        ]),
+        _: 1
+      }, 8, ["value", "name"]);
+    };
+  }
+});
+export {
+  I as default
+};