@feedmepos/mf-menu 0.32.37 → 0.32.38-dev.1

package/dist/index-Cek4Z9eM.js

@@ -0,0 +1,539 @@
+import { defineComponent as oe, ref as x, computed as I, watch as W, unref as n, resolveComponent as C, createBlock as z, openBlock as f, withCtx as V, createElementVNode as l, toDisplayString as g, createElementBlock as y, createCommentVNode as U, Fragment as T, renderList as F, createVNode as c, normalizeClass as X, renderSlot as re, createSlots as ce } from "vue";
+import { J as O, Q as de, G as ue, I as M, D as Z, M as ee, A as ae } from "./index.vue_vue_type_script_setup_true_lang-HZXySVXs.js";
+import { d as me } from "./vuedraggable-CK8z7qA8.js";
+import { useI18n as le, useLocale as pe } from "@feedmepos/mf-common";
+import { useSnackbar as fe, components as ve } from "@feedmepos/ui-library";
+import { _ as _e } from "./FormItem.vue_vue_type_script_setup_true_lang-BmPAVphe.js";
+import { _ as ye } from "./RuleView.vue_vue_type_script_setup_true_lang-3AVOVYpW.js";
+import { u as se } from "./discardConfirm-BHni0LNu.js";
+import { _ as he } from "./ApplyProduct.vue_vue_type_script_setup_true_lang-CBy3XScH.js";
+import { g as q, a as H, _ as te, b as ne } from "./translation-BeqjfyEb.js";
+import { c as be } from "./check-C9mY6LiX.js";
+const ge = { class: "fm-typo-en-title-md-600" }, xe = { class: "pt-8 space-y-24" }, Ve = { class: "flex flex-col gap-8" }, ke = { class: "text-fm-color-typo-primary fm-typo-en-body-lg-600" }, Ce = { class: "flex items-center gap-8 flex-wrap" }, Ee = { class: "w-24 h-24 rounded-full bg-fm-color-primary-oats text-fm-color-primary flex items-center justify-center fm-typo-en-body-sm-600" }, we = { class: "fm-typo-en-body-md-600" }, Oe = ["onClick"], $e = { class: "flex items-center gap-8" }, Ue = { class: "w-24 h-24 rounded-full bg-fm-color-opacity-sm flex items-center justify-center fm-typo-en-body-sm-600" }, je = { class: "fm-typo-en-body-md-400" }, Le = { class: "flex flex-col gap-16 border p-16 rounded-lg" }, Se = { class: "fm-typo-en-body-lg-600" }, Te = {
+  key: 0,
+  class: "flex flex-col gap-32 pl-32"
+}, Fe = {
+  key: 0,
+  class: "space-y-8"
+}, Me = { class: "flex w-[100px] items-center gap-8" }, Ie = { class: "w-24 h-24 rounded-full bg-fm-color-opacity-sm flex items-center justify-center fm-typo-en-body-sm-600" }, Ne = { class: "fm-typo-en-body-md-400" }, De = { class: "flex-1" }, Ae = { class: "flex flex-col gap-16 border p-16 rounded-lg" }, Be = { class: "fm-typo-en-body-lg-600" }, qe = {
+  key: 0,
+  class: "flex flex-col gap-32 pl-32"
+}, ze = { class: "fm-typo-en-body-md-600 text-fm-color-primary border border-fm-color-primary inline-block rounded-md px-8 py-4" }, Pe = { class: "space-y-32" }, Ye = {
+  key: 0,
+  class: "space-y-8"
+}, Ge = { class: "flex w-[100px] items-center gap-8" }, Re = { class: "w-24 h-24 rounded-full bg-fm-color-opacity-sm flex items-center justify-center fm-typo-en-body-sm-600" }, Ke = { class: "fm-typo-en-body-md-400" }, Je = { class: "flex-1" }, Qe = { class: "flex gap-8 items-center justify-start" }, He = /* @__PURE__ */ oe({
+  __name: "ProductVariantTranslation",
+  props: {
+    modelValue: { type: Boolean },
+    variant: {},
+    expandSection: { default: "variant" }
+  },
+  emits: ["update:modelValue", "update:variant"],
+  setup(P, { emit: Y }) {
+    const m = P, $ = Y, { t: i } = le(), { localeList: E } = pe(), w = x(!1), k = x(!1), t = x([]), j = x([]), v = x({}), L = x({}), b = x({}), S = x({}), N = I(() => m.variant.options.map((e, a) => ({
+      ...e,
+      optionIndex: a + 1
+    })).filter((e) => e.name.trim() !== ""));
+    function G() {
+      const e = /* @__PURE__ */ new Set();
+      m.variant.name_locale && Object.keys(m.variant.name_locale).forEach((d) => e.add(d)), m.variant.options.forEach((d) => {
+        d.name_locale && Object.keys(d.name_locale).forEach((u) => e.add(u));
+      });
+      const a = Array.from(e).map((d) => {
+        const u = n(E).find((_) => _.code === d);
+        return {
+          localeCode: d,
+          localeName: (u == null ? void 0 : u.name) || d,
+          value: ""
+          // Not used for language selection
+        };
+      });
+      t.value = a;
+      const r = {};
+      m.variant.name_locale && Object.entries(m.variant.name_locale).forEach(([d, u]) => {
+        r[d] = u;
+      }), v.value = r;
+      const p = {};
+      m.variant.options.forEach((d) => {
+        p[d._id] = {}, d.name_locale && Object.entries(d.name_locale).forEach(([u, _]) => {
+          p[d._id][u] = _;
+        });
+      }), b.value = p;
+    }
+    W(
+      () => [m.modelValue, m.variant, m.expandSection],
+      ([e, , a]) => {
+        e && (G(), j.value = O.clone(t.value), L.value = O.clone(v.value), S.value = O.clone(b.value), a === "variant" ? (w.value = !0, k.value = !1) : (w.value = !1, k.value = !0));
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const D = I(() => {
+      const e = new Set(t.value.map((a) => a.localeCode));
+      return n(E).filter((a) => !e.has(a.code)).map((a) => ({
+        code: a.code,
+        name: a.name,
+        icon: q(a.code)
+      }));
+    });
+    function R(e) {
+      const a = n(E).find((r) => r.code === e);
+      a && (t.value.push({
+        localeCode: a.code,
+        localeName: a.name,
+        value: ""
+      }), v.value[a.code] || (v.value[a.code] = ""), Object.keys(b.value).forEach((r) => {
+        b.value[r][a.code] || (b.value[r][a.code] = "");
+      }));
+    }
+    function A(e) {
+      t.value = t.value.filter((a) => a.localeCode !== e), delete v.value[e], Object.keys(b.value).forEach((a) => {
+        delete b.value[a][e];
+      });
+    }
+    function K() {
+      return !O.isEqual(t.value, j.value) || !O.isEqual(v.value, L.value) || !O.isEqual(b.value, S.value);
+    }
+    function J() {
+      const e = O.clone(m.variant), a = {};
+      Object.entries(v.value).forEach(([r, p]) => {
+        p && p.trim() && (a[r] = p.trim());
+      }), Object.keys(a).length > 0 ? e.name_locale = a : delete e.name_locale, e.options.forEach((r) => {
+        const p = b.value[r._id];
+        if (p && Object.keys(p).length > 0) {
+          const d = {};
+          Object.entries(p).forEach(([u, _]) => {
+            _ && _.trim() && (d[u] = _.trim());
+          }), Object.keys(d).length > 0 ? r.name_locale = d : delete r.name_locale;
+        } else
+          delete r.name_locale;
+      }), $("update:variant", e), $("update:modelValue", !1);
+    }
+    function Q() {
+      $("update:modelValue", !1);
+    }
+    const B = se(K, Q), o = I({
+      get: () => m.modelValue,
+      set: (e) => $("update:modelValue", e)
+    });
+    return (e, a) => {
+      const r = C("FmIcon"), p = C("fm-button"), d = C("FmMenu"), u = C("fm-text-field"), _ = C("fm-side-sheet");
+      return f(), z(_, {
+        modelValue: o.value,
+        "onUpdate:modelValue": a[2] || (a[2] = (s) => o.value = s),
+        "max-width": 720,
+        "onOn:clickedAway": n(B)
+      }, {
+        "side-sheet-header": V(() => [
+          l("p", ge, g(n(i)("menu.variant.form.translation.title")), 1)
+        ]),
+        "side-sheet-footer": V(() => [
+          l("div", Qe, [
+            c(p, {
+              label: n(i)("common.save"),
+              size: "lg",
+              variant: "primary",
+              onClick: J
+            }, null, 8, ["label"]),
+            c(p, {
+              label: n(i)("common.cancel"),
+              size: "lg",
+              variant: "tertiary",
+              onClick: n(B)
+            }, null, 8, ["label", "onClick"])
+          ])
+        ]),
+        default: V(() => [
+          l("div", xe, [
+            l("div", Ve, [
+              l("p", ke, g(n(i)("menu.variant.form.translation.language")), 1),
+              l("div", Ce, [
+                (f(!0), y(T, null, F(t.value, (s) => (f(), y("div", {
+                  key: s.localeCode,
+                  class: "flex items-center gap-8 p-8 border border-fm-color-primary text-fm-color-primary rounded-full"
+                }, [
+                  l("div", Ee, g(n(q)(s.localeCode)), 1),
+                  l("span", we, g(n(H)(s.localeCode, n(E))), 1),
+                  c(r, {
+                    name: "close",
+                    class: "cursor-pointer",
+                    variant: "secondary",
+                    onClick: (h) => A(s.localeCode)
+                  }, null, 8, ["onClick"])
+                ]))), 128)),
+                D.value.length > 0 ? (f(), z(d, { key: 0 }, {
+                  "menu-button": V(() => [
+                    c(p, {
+                      variant: "secondary",
+                      "border-color": "neutral-gray-300",
+                      "text-color": "neutral-gray-400",
+                      icon: "add"
+                    })
+                  ]),
+                  default: V(() => [
+                    (f(!0), y(T, null, F(D.value, (s) => (f(), y("div", {
+                      key: s.code,
+                      class: "p-12 cursor-pointer hover:bg-fm-color-opacity-md rounded-sm",
+                      onClick: (h) => R(s.code)
+                    }, [
+                      l("div", $e, [
+                        l("div", Ue, g(s.icon), 1),
+                        l("span", je, g(s.name), 1)
+                      ])
+                    ], 8, Oe))), 128))
+                  ]),
+                  _: 1
+                })) : U("", !0)
+              ])
+            ]),
+            l("div", Le, [
+              l("div", {
+                class: "flex items-center gap-16 cursor-pointer",
+                onClick: a[0] || (a[0] = (s) => w.value = !w.value)
+              }, [
+                c(r, {
+                  name: "keyboard_arrow_down",
+                  class: X(["transition-transform", w.value ? "transform rotate-180" : ""])
+                }, null, 8, ["class"]),
+                l("p", Se, g(n(i)("menu.variant.form.translation.variant_name")), 1)
+              ]),
+              w.value ? (f(), y("div", Te, [
+                c(te, {
+                  label: n(i)("menu.variant.form.translation.default"),
+                  "model-value": e.variant.name
+                }, null, 8, ["label", "model-value"]),
+                t.value.length > 0 ? (f(), y("div", Fe, [
+                  c(ne, {
+                    label: n(i)("menu.variant.form.translation.translation")
+                  }, null, 8, ["label"]),
+                  (f(!0), y(T, null, F(t.value, (s) => (f(), y("div", {
+                    key: s.localeCode,
+                    class: "flex items-center gap-16"
+                  }, [
+                    l("div", Me, [
+                      l("div", Ie, g(n(q)(s.localeCode)), 1),
+                      l("span", Ne, g(n(H)(s.localeCode, n(E))), 1)
+                    ]),
+                    l("div", De, [
+                      c(u, {
+                        modelValue: v.value[s.localeCode],
+                        "onUpdate:modelValue": (h) => v.value[s.localeCode] = h,
+                        placeholder: e.variant.name
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+                    ])
+                  ]))), 128))
+                ])) : U("", !0)
+              ])) : U("", !0)
+            ]),
+            l("div", Ae, [
+              l("div", {
+                class: "flex items-center gap-16 cursor-pointer",
+                onClick: a[1] || (a[1] = (s) => k.value = !k.value)
+              }, [
+                c(r, {
+                  name: "keyboard_arrow_down",
+                  class: X(["transition-transform", k.value ? "transform rotate-180" : ""])
+                }, null, 8, ["class"]),
+                l("p", Be, g(n(i)("menu.variant.form.translation.option_value")), 1)
+              ]),
+              k.value ? (f(), y("div", qe, [
+                (f(!0), y(T, null, F(N.value, (s) => (f(), y("div", {
+                  key: s._id,
+                  class: "space-y-8"
+                }, [
+                  l("p", ze, g(n(i)("menu.variant.form.translation.option", { number: s.optionIndex })), 1),
+                  l("div", Pe, [
+                    c(te, {
+                      label: n(i)("menu.variant.form.translation.default"),
+                      "model-value": s.name,
+                      spacing: "sm"
+                    }, null, 8, ["label", "model-value"]),
+                    t.value.length > 0 ? (f(), y("div", Ye, [
+                      c(ne, {
+                        label: n(i)("menu.variant.form.translation.translation"),
+                        spacing: "sm"
+                      }, null, 8, ["label"]),
+                      (f(!0), y(T, null, F(t.value, (h) => (f(), y("div", {
+                        key: h.localeCode,
+                        class: "flex items-center gap-16"
+                      }, [
+                        l("div", Ge, [
+                          l("div", Re, g(n(q)(h.localeCode)), 1),
+                          l("span", Ke, g(n(H)(h.localeCode, n(E))), 1)
+                        ]),
+                        l("div", Je, [
+                          c(u, {
+                            modelValue: b.value[s._id][h.localeCode],
+                            "onUpdate:modelValue": (ie) => b.value[s._id][h.localeCode] = ie,
+                            placeholder: s.name
+                          }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+                        ])
+                      ]))), 128))
+                    ])) : U("", !0)
+                  ])
+                ]))), 128))
+              ])) : U("", !0)
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "onOn:clickedAway"]);
+    };
+  }
+}), We = { class: "fm-typo-en-title-md-600" }, Xe = { class: "py-16 space-y-32" }, Ze = ["data-not-allow-sort"], ea = {
+  key: 1,
+  class: "w-24"
+}, aa = { class: "flex-1" }, ta = { class: "flex items-center gap-8" }, na = { class: "flex gap-8 items-center justify-start" }, oa = /* @__PURE__ */ oe({
+  __name: "Form",
+  props: {
+    initialValue: {}
+  },
+  setup(P, { expose: Y }) {
+    const m = P, $ = de(ue(fe())), { t: i } = le(), E = I(
+      () => m.initialValue ? i("menu.variant.form.title.edit") : i("menu.variant.form.title.add")
+    ), w = I(() => m.initialValue ? "Update" : "Add"), k = () => {
+      if (m.initialValue) {
+        const o = M(m.initialValue);
+        return o.options.push({
+          _id: (/* @__PURE__ */ new Date()).toISOString(),
+          name: ""
+        }), o;
+      } else
+        return { ...Z.generator.initMenuV4VariantGroup(), usedBy: [] };
+    }, t = x(k()), j = x(!1), v = x(!1), L = x(!1), b = x("variant"), S = (o) => {
+      be.isBoolean(o) ? v.value = o : v.value = !v.value;
+    };
+    function N(o) {
+      b.value = o, L.value = !0;
+    }
+    function G(o) {
+      t.value = o;
+    }
+    function D(o) {
+      t.value.options = o;
+    }
+    function R(o, e) {
+      const a = M(t.value.options), r = a.findIndex((p) => p._id == o);
+      a[r].name = e, t.value.options = a, r === t.value.options.length - 1 && A();
+    }
+    function A() {
+      const o = M(t.value.options);
+      t.value.options = [
+        ...o,
+        {
+          _id: (/* @__PURE__ */ new Date()).toISOString(),
+          name: ""
+        }
+      ];
+    }
+    function K(o) {
+      const e = M(t.value.options);
+      t.value.options = e.filter((a) => a._id !== o);
+    }
+    W(
+      () => t.value.options,
+      (o) => {
+        o.length <= 0 && A();
+      },
+      {
+        immediate: !0
+      }
+    );
+    function J(o) {
+      const e = o.draggedContext.futureIndex, a = o.relatedContext.list;
+      return e !== a.length - 1;
+    }
+    const Q = se(
+      () => {
+        if (m.initialValue) {
+          const o = t.value.options.filter((e) => !!e.name.trim());
+          return !O.isEqual({ ...t.value, options: o }, m.initialValue);
+        } else
+          return !!(t.value.options.length > 1 || t.value.name.trim());
+      },
+      () => {
+        v.value = !1;
+      }
+    ), B = async () => {
+      try {
+        j.value = !0;
+        const o = M(t.value);
+        o.options = o.options.filter((e) => !!e.name.trim()), m.initialValue ? await $.updateMenu(
+          {
+            module: ae.F_MENU_MODULE_V4_KEY.enum.variant,
+            operation: ee.F_OPERATION_TYPE.update,
+            data: o
+          },
+          o.name
+        ) : await $.updateMenu(
+          {
+            module: ae.F_MENU_MODULE_V4_KEY.enum.variant,
+            operation: ee.F_OPERATION_TYPE.create,
+            data: o
+          },
+          o.name
+        ), S(!1), t.value = { ...Z.generator.initMenuV4VariantGroup(), usedBy: [] };
+      } finally {
+        j.value = !1;
+      }
+    };
+    return W(
+      () => v.value,
+      (o) => {
+        o && (t.value = k());
+      }
+    ), Y({
+      show: v,
+      trigger: S
+    }), (o, e) => {
+      const a = C("fm-icon"), r = C("fm-text-field"), p = C("fm-button"), d = C("fm-side-sheet");
+      return f(), y(T, null, [
+        re(o.$slots, "default", { trigger: S }),
+        c(d, {
+          id: "variant-form",
+          modelValue: v.value,
+          "onUpdate:modelValue": e[4] || (e[4] = (u) => v.value = u),
+          "is-container": n(ve).FmForm,
+          "is-container-props": {
+            onValidationSuccess: B,
+            blameFormChildOnValidationFailed: !0
+          },
+          "max-width": 560,
+          "onOn:clickedAway": n(Q)
+        }, {
+          "side-sheet-header": V(() => [
+            l("p", We, g(E.value), 1)
+          ]),
+          "side-sheet-footer": V(() => [
+            l("div", na, [
+              c(p, {
+                label: w.value,
+                loading: j.value,
+                size: "lg",
+                type: "submit",
+                variant: "primary"
+              }, null, 8, ["label", "loading"]),
+              c(p, {
+                label: n(i)("menu.common.actions.cancel"),
+                size: "lg",
+                variant: "tertiary",
+                onClick: e[3] || (e[3] = () => v.value = !1)
+              }, null, 8, ["label"])
+            ])
+          ]),
+          default: V(() => {
+            var u;
+            return [
+              l("div", Xe, [
+                c(ye, {
+                  title: n(i)("menu.variant.form.detail")
+                }, {
+                  default: V(() => [
+                    c(r, {
+                      autofocus: "",
+                      label: n(i)("menu.variant.form.name.label"),
+                      "helper-text": n(i)("menu.variant.form.name.helper"),
+                      modelValue: t.value.name,
+                      "onUpdate:modelValue": e[1] || (e[1] = (_) => t.value.name = _),
+                      rules: [(_) => !!_ || n(i)("menu.variant.form.name.required")],
+                      placeholder: n(i)("menu.variant.form.name.placeholder")
+                    }, {
+                      append: V(() => [
+                        c(a, {
+                          name: "g_translate",
+                          class: "cursor-pointer",
+                          onClick: e[0] || (e[0] = (_) => N("variant"))
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["label", "helper-text", "modelValue", "rules", "placeholder"]),
+                    c(_e, {
+                      label: n(i)("menu.variant.form.options.title")
+                    }, {
+                      default: V(() => [
+                        l("div", null, [
+                          c(n(me), {
+                            "model-value": t.value.options,
+                            move: J,
+                            class: "space-y-16",
+                            group: "categories",
+                            handle: ".handle",
+                            "item-key": "_id",
+                            "onUpdate:modelValue": D
+                          }, {
+                            item: V(({ element: _, index: s }) => [
+                              l("div", {
+                                class: X(["flex items-center", "space-x-8"]),
+                                "data-not-allow-sort": s === t.value.options.length - 1
+                              }, [
+                                s !== t.value.options.length - 1 ? (f(), z(a, {
+                                  key: 0,
+                                  class: "handle",
+                                  name: "drag_handle"
+                                })) : s > 0 ? (f(), y("div", ea)) : U("", !0),
+                                l("div", aa, [
+                                  c(r, {
+                                    "model-value": _.name,
+                                    rules: [
+                                      () => !!t.value.options.length || n(i)("menu.variant.form.options.min_required"),
+                                      (h) => s === t.value.options.length - 1 || h ? !0 : n(i)("menu.variant.form.options.name_required")
+                                    ],
+                                    class: "flex-1",
+                                    placeholder: n(i)("menu.variant.form.options.placeholder"),
+                                    "onUpdate:modelValue": (h) => R(_._id, h)
+                                  }, ce({ _: 2 }, [
+                                    s !== t.value.options.length - 1 ? {
+                                      name: "append",
+                                      fn: V(() => [
+                                        l("div", ta, [
+                                          c(a, {
+                                            name: "g_translate",
+                                            class: "cursor-pointer",
+                                            onClick: e[2] || (e[2] = (h) => N("options"))
+                                          }),
+                                          c(a, {
+                                            name: "close",
+                                            onClick: (h) => K(_._id)
+                                          }, null, 8, ["onClick"])
+                                        ])
+                                      ]),
+                                      key: "0"
+                                    } : void 0
+                                  ]), 1032, ["model-value", "rules", "placeholder", "onUpdate:modelValue"])
+                                ])
+                              ], 8, Ze)
+                            ]),
+                            _: 1
+                          }, 8, ["model-value"])
+                        ])
+                      ]),
+                      _: 1
+                    }, 8, ["label"])
+                  ]),
+                  _: 1
+                }, 8, ["title"]),
+                (u = t.value.usedBy) != null && u.length ? (f(), z(he, {
+                  key: 0,
+                  editable: !1,
+                  overrides: t.value.usedBy || [],
+                  "select-variant": !1,
+                  title: n(i)("menu.variant.form.applied_product")
+                }, null, 8, ["overrides", "title"])) : U("", !0)
+              ])
+            ];
+          }),
+          _: 1
+        }, 8, ["modelValue", "is-container", "is-container-props", "onOn:clickedAway"]),
+        c(He, {
+          modelValue: L.value,
+          "onUpdate:modelValue": e[5] || (e[5] = (u) => L.value = u),
+          variant: t.value,
+          "expand-section": b.value,
+          "onUpdate:variant": G
+        }, null, 8, ["modelValue", "variant", "expand-section"])
+      ], 64);
+    };
+  }
+}), _a = oa;
+export {
+  _a as V
+};