@feedmepos/mf-menu-portal 0.0.0-stage → 1.0.1-dev.1

package/dist/Variant-DmeGEEkw.js

@@ -0,0 +1,538 @@
+import { defineComponent as fe, computed as h, ref as Pe, shallowRef as B, h as x, withModifiers as ue, onUnmounted as Te, resolveComponent as b, openBlock as i, createBlock as f, unref as t, withCtx as p, createElementBlock as C, toDisplayString as S, Fragment as ce, createElementVNode as d, normalizeClass as me, createVNode as r, renderList as Ve, createCommentVNode as L, mergeProps as de, createSlots as $e, nextTick as Ee } from "vue";
+import { _ as Oe, d as ze } from "./FormSection.vue_vue_type_script_setup_true_lang-pY-_msnM.js";
+import { useI18n as Me } from "@feedmepos/mf-common";
+import { useDialog as je, useBreakpoints as Be, components as pe, FmButtonVariant as H } from "@feedmepos/ui-library";
+import { _ as Ue } from "./ApplyProduct.vue_vue_type_script_setup_true_lang-C9OSr8ft.js";
+import { _ as Ae } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { _ as Ne } from "./ProductVariantTranslationSheet.vue_vue_type_script_setup_true_lang-ClG3Prfm.js";
+import { _ as qe } from "./FormItem.vue_vue_type_script_setup_true_lang-C2S6QCyR.js";
+import { _ as De } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
+import { _ as ve } from "./TranslationViewChip.vue_vue_type_script_setup_true_lang-CAkLEmSA.js";
+import { u as Re } from "./useActionFeedback-DoFeBFpl.js";
+import { u as Qe } from "./useEditorValidation-Ctef5Bxt.js";
+import { b as Ge, u as He, a as Ke } from "./provide-Tmjfji09.js";
+const Je = {
+  key: 0,
+  class: "text-fm-color-typo-secondary",
+  role: "alert"
+}, We = {
+  key: 1,
+  class: "text-fm-color-typo-secondary",
+  "data-menu-state": "unavailable"
+}, Xe = { class: "flex justify-end items-center" }, Ye = { class: "min-w-0 flex flex-1 items-center gap-8 px-16 py-12" }, Ze = { class: "min-w-0 flex-1 flex flex-col gap-4" }, ea = { class: "fm-typo-en-body-lg-600 break-words" }, aa = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, ta = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary break-words" }, na = { key: 1 }, oa = {
+  key: 2,
+  class: "fixed right-16 bottom-[72px] z-[100] w-[154px]"
+}, la = { class: "fm-typo-en-title-md-600" }, sa = { class: "py-16 space-y-32" }, ia = ["data-not-allow-sort"], ra = {
+  key: 1,
+  class: "w-24"
+}, ua = { class: "flex-1" }, ca = { class: "flex items-center gap-8" }, ma = { class: "flex gap-8 items-center justify-start" }, da = /* @__PURE__ */ fe({
+  __name: "VariantList",
+  props: {
+    sdk: {}
+  },
+  setup(K) {
+    const g = K, { t: a } = Me(), I = Ge(), J = je(), { breakpoints: _e } = Be(), { run: U } = Re(), y = He(g.sdk.variant.list), c = h(
+      () => y.value.status === "ready" ? y.value.value : null
+    ), W = h(() => {
+      var e;
+      return ((e = c.value) == null ? void 0 : e.query) ?? "";
+    }), P = h(() => _e.value.xs), T = Pe(!1), u = B(
+      g.sdk.variant.editor()
+    ), V = B(
+      u.value.get()
+    );
+    let A = u.value.subscribe(
+      (e) => V.value = e
+    );
+    const l = h(
+      () => V.value.status === "ready" ? V.value.value : null
+    ), $ = Qe(() => u.value), X = h(
+      () => l.value ? $.issue(l.value.fieldIssues, "name") ?? l.value.nameIssue : null
+    ), Y = h(
+      () => l.value ? $.issue(l.value.fieldIssues, "options") ?? l.value.optionsIssue : null
+    );
+    function be(e) {
+      const { ref: n, ...o } = $.field(
+        "options",
+        (m) => u.value.setOptionName(e, m)
+      );
+      return o;
+    }
+    const w = B(null), Z = B("variant"), ge = h(() => {
+      var e;
+      return ((e = l.value) == null ? void 0 : e.linkedGroups) ?? [];
+    }), N = /* @__PURE__ */ new Map();
+    function ee(e) {
+      O(), A(), u.value.dispose(), u.value = g.sdk.variant.editor(e), V.value = u.value.get(), A = u.value.subscribe(
+        (n) => V.value = n
+      );
+    }
+    function q() {
+      c.value && c.value.create.state !== "allowed" || (ee(), T.value = !0);
+    }
+    function ae(e) {
+      ee(e.id), T.value = !0;
+    }
+    function E() {
+      T.value = !1;
+    }
+    function te() {
+      var e;
+      if (!((e = l.value) != null && e.dirty)) return E();
+      J.open({
+        title: a("menu.common.dialog.dismiss.title"),
+        message: a("menu.common.dialog.dismiss.message"),
+        primaryActions: {
+          text: a("menu.common.dialog.dismiss.discard"),
+          close: !0,
+          variant: H.Primary
+        },
+        secondaryActions: {
+          text: a("menu.common.actions.cancel"),
+          close: !0,
+          variant: H.Tertiary
+        }
+      }).onPrimary(E);
+    }
+    function ye(e) {
+      e ? T.value = !0 : te();
+    }
+    function ne(e) {
+      var n;
+      (n = w.value) == null || n.dispose(), Z.value = e, w.value = u.value.translationEditor();
+    }
+    function O() {
+      var e;
+      (e = w.value) == null || e.dispose(), w.value = null;
+    }
+    async function ke() {
+      const e = w.value;
+      if (!e) return;
+      (await U(async () => e.apply(), {
+        showLoading: !1
+      })).kind === "success" && O();
+    }
+    function he(e) {
+      u.value.reorderOptions(e.map((n) => n.id));
+    }
+    function we(e) {
+      return e.draggedContext.futureIndex !== e.relatedContext.list.length - 1;
+    }
+    function D(e, n) {
+      var m;
+      const o = l.value;
+      return ((m = Y.value) == null ? void 0 : m.code) === "menu.variant.form.options.name_required" && !!o && e !== o.options.length - 1 && !n.name.trim();
+    }
+    function xe(e, n) {
+      const o = Y.value;
+      return D(e, n) && o ? I(o) : "";
+    }
+    function Ce(e, n) {
+      if (!n || typeof n.focus != "function") {
+        N.delete(e);
+        return;
+      }
+      const o = n;
+      N.set(e, o), o.inputEl instanceof HTMLInputElement && o.inputEl.setAttribute(
+        "aria-label",
+        a("menu.variant.form.options.input", { number: e + 1 })
+      );
+    }
+    function Fe(e) {
+      return e.reduce((n, o) => {
+        for (const [m, F] of Object.entries(o.nameLocale ?? {}))
+          n[m] ?? (n[m] = F);
+        return n;
+      }, {});
+    }
+    async function Se() {
+      var F, z, M;
+      const e = ((F = l.value) == null ? void 0 : F.name) ?? "", n = await U(
+        () => $.submit(() => u.value.submit()),
+        {
+          successMessage: a("menu.variant.form.saved", { name: e }),
+          // `submit()` publishes `submitting` synchronously only when it will
+          // perform a write. Local validation rejection must not flash loading.
+          showLoading: () => {
+            var k;
+            return ((k = l.value) == null ? void 0 : k.status) === "submitting";
+          }
+        }
+      );
+      n.kind === "success" && E();
+      const o = n.kind === "rejected" && n.issues.some((k) => k.field === "options"), m = (z = l.value) == null ? void 0 : z.options.findIndex(
+        (k, R) => D(R, k)
+      );
+      o && m !== void 0 && m >= 0 && (await Ee(), (M = N.get(m)) == null || M.focus());
+    }
+    function oe(e) {
+      e.remove.state === "allowed" && J.open({
+        title: a("menu.common.dialog.remove.variant.title"),
+        message: a("menu.common.dialog.remove.variant.message", {
+          name: e.name
+        }),
+        primaryActions: {
+          text: a("menu.common.actions.remove"),
+          close: !0,
+          variant: H.Destructive
+        },
+        secondaryActions: {
+          text: a("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await U(() => g.sdk.variant.remove(e.id), {
+          successMessage: a("menu.variant.form.removed", { name: e.name })
+        });
+      });
+    }
+    const Le = h(() => [
+      // Widths are the legacy ones (`Variant.vue:57,76,107`). They are not
+      // cosmetic: they decide where the option-values column wraps, and a wrap
+      // shifts every row below it out of visual parity.
+      {
+        accessorKey: "name",
+        header: () => a("menu.variant.columns.name"),
+        size: 360,
+        enableSorting: !1,
+        cell: (e) => x("div", { class: "flex items-center gap-8" }, [
+          x("span", { class: "break-all" }, e.row.original.name),
+          ...e.row.original.nameLocale && Object.keys(e.row.original.nameLocale).length ? [
+            x(ve, {
+              nameLocale: e.row.original.nameLocale
+            })
+          ] : []
+        ])
+      },
+      {
+        id: "options",
+        header: () => a("menu.variant.columns.options"),
+        size: 560,
+        enableSorting: !1,
+        cell: (e) => {
+          const n = Fe(e.row.original.options);
+          return x("div", { class: "flex items-center gap-8" }, [
+            x(
+              "span",
+              { class: "break-all" },
+              e.row.original.options.map((o) => o.name).join(", ")
+            ),
+            ...Object.keys(n).length ? [x(ve, { nameLocale: n })] : []
+          ]);
+        }
+      },
+      {
+        id: "linkedProducts",
+        header: () => a("menu.variant.columns.applied_products"),
+        size: 180,
+        enableSorting: !1,
+        cell: (e) => a("menu.common.labels.items_linked", {
+          count: e.row.original.linkedProductCount
+        })
+      },
+      {
+        id: "actions",
+        size: 52,
+        meta: { cellClass: "pl-16", headerContentClass: "-mx-16" },
+        header: "",
+        cell: (e) => x(pe.FmButton, {
+          icon: "delete",
+          variant: "tertiary",
+          textColor: "neutral-gray-400",
+          disabled: e.row.original.remove.state !== "allowed",
+          "aria-label": a("menu.variant.actions.remove", {
+            name: e.row.original.name
+          }),
+          onClick: ue(
+            () => oe(e.row.original),
+            ["stop", "prevent"]
+          )
+        })
+      }
+    ]);
+    return Te(() => {
+      g.sdk.variant.search(""), O(), A(), u.value.dispose();
+    }), (e, n) => {
+      const o = b("FmButton"), m = b("FmCircularProgress"), F = b("FmSearch"), z = b("FmListItem"), M = b("FmList"), k = b("FmTable"), R = b("FmTooltip"), le = b("FmTextField"), Ie = b("FmSideSheet");
+      return i(), f(De, {
+        heading: t(a)("menu.variant.title")
+      }, {
+        "append-heading": p(() => [
+          t(y).status === "ready" && c.value && c.value.totalCount > 0 && !P.value ? (i(), f(o, {
+            key: 0,
+            class: "ml-auto",
+            disabled: c.value.create.state !== "allowed",
+            label: t(a)("menu.variant.add"),
+            "prepend-icon": "add",
+            onClick: q
+          }, null, 8, ["disabled", "label"])) : L("", !0)
+        ]),
+        default: p(() => [
+          t(y).status === "error" ? (i(), C("p", Je, S(t(I)(t(y).error.message)), 1)) : t(y).status === "unavailable" ? (i(), C("p", We, S(t(I)(t(y).reason)), 1)) : t(y).status === "loading" ? (i(), f(m, { key: 2 })) : c.value && c.value.rows.length === 0 && !W.value ? (i(), f(t(Ae), {
+            key: 3,
+            action: { text: t(a)("menu.variant.add"), callback: q },
+            title: t(a)("menu.variant.empty.title"),
+            subtitle: t(a)("menu.variant.empty.subtitle")
+          }, null, 8, ["action", "title", "subtitle"])) : c.value ? (i(), C(ce, { key: 4 }, [
+            d("div", Xe, [
+              d("div", {
+                class: me(P.value ? "w-[calc(100%-32px)] mx-16 mt-8" : "w-[320px]")
+              }, [
+                r(F, {
+                  autofocus: "",
+                  class: me(P.value ? "mb-0" : "mb-8"),
+                  "model-value": W.value,
+                  placeholder: t(a)("menu.common.labels.search_variants"),
+                  "onUpdate:modelValue": g.sdk.variant.search
+                }, null, 8, ["class", "model-value", "placeholder", "onUpdate:modelValue"])
+              ], 2)
+            ]),
+            P.value ? (i(), f(M, {
+              key: 0,
+              class: "mt-8 pb-64"
+            }, {
+              default: p(() => [
+                (i(!0), C(ce, null, Ve(c.value.rows, (s) => (i(), f(z, {
+                  key: s.id,
+                  class: "border-b border-fm-color-neutral-gray-100 !p-0",
+                  onClick: (_) => ae(s)
+                }, {
+                  default: p(() => [
+                    d("div", Ye, [
+                      d("div", Ze, [
+                        d("p", ea, S(s.name), 1),
+                        d("div", null, [
+                          d("p", aa, S(t(a)("menu.common.labels.items_linked", {
+                            count: s.linkedProductCount
+                          })), 1),
+                          d("p", ta, S(t(a)("menu.variant.mobile.value", {
+                            values: s.options.map((_) => _.name).join(", ")
+                          })), 1)
+                        ])
+                      ]),
+                      r(o, {
+                        class: "shrink-0",
+                        disabled: s.remove.state !== "allowed",
+                        "aria-label": t(a)("menu.variant.actions.remove", { name: s.name }),
+                        "prepend-icon": "delete",
+                        "text-color": "neutral-gray-400",
+                        variant: "tertiary",
+                        onClick: ue((_) => oe(s), ["stop"])
+                      }, null, 8, ["disabled", "aria-label", "onClick"])
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"]))), 128))
+              ]),
+              _: 1
+            })) : (i(), C("div", na, [
+              r(k, {
+                "column-defs": Le.value,
+                "hide-footer": "",
+                "page-size": c.value.rows.length,
+                "pin-header-row": "",
+                "row-data": [...c.value.rows],
+                "shrink-at": !1,
+                onRowClick: n[0] || (n[0] = (s) => ae(s.original))
+              }, null, 8, ["column-defs", "page-size", "row-data"])
+            ])),
+            c.value.totalCount > 0 && P.value ? (i(), C("div", oa, [
+              r(o, {
+                class: "w-full",
+                disabled: c.value.create.state !== "allowed",
+                label: t(a)("menu.variant.add"),
+                "prepend-icon": "add",
+                variant: "fab",
+                onClick: q
+              }, null, 8, ["disabled", "label"])
+            ])) : L("", !0)
+          ], 64)) : L("", !0),
+          r(Ie, {
+            "model-value": T.value,
+            "is-container": t(pe).FmForm,
+            "is-container-props": { onValidationSuccess: Se },
+            "max-width": 560,
+            "onOn:clickedAway": te,
+            "onUpdate:modelValue": ye
+          }, {
+            "side-sheet-header": p(() => {
+              var s;
+              return [
+                d("p", la, S(((s = l.value) == null ? void 0 : s.mode) === "update" ? t(a)("menu.variant.form.title.edit") : t(a)("menu.variant.form.title.add")), 1)
+              ];
+            }),
+            "side-sheet-footer": p(() => {
+              var s, _;
+              return [
+                d("div", ma, [
+                  r(o, {
+                    disabled: ((s = l.value) == null ? void 0 : s.submit.state) !== "allowed",
+                    label: ((_ = l.value) == null ? void 0 : _.mode) === "update" ? t(a)("menu.common.actions.update") : t(a)("menu.common.actions.add"),
+                    size: "lg",
+                    type: "submit",
+                    variant: "primary"
+                  }, null, 8, ["disabled", "label"]),
+                  r(o, {
+                    label: t(a)("menu.common.actions.cancel"),
+                    size: "lg",
+                    variant: "tertiary",
+                    onClick: E
+                  }, null, 8, ["label"])
+                ])
+              ];
+            }),
+            default: p(() => {
+              var s;
+              return [
+                d("div", sa, [
+                  r(Oe, {
+                    title: t(a)("menu.variant.form.detail")
+                  }, {
+                    default: p(() => {
+                      var _;
+                      return [
+                        r(le, de({
+                          "error-messages": X.value ? [t(I)(X.value)] : [],
+                          "helper-text": t(a)("menu.variant.form.name.helper"),
+                          label: t(a)("menu.variant.form.name.label"),
+                          "model-value": ((_ = l.value) == null ? void 0 : _.name) ?? "",
+                          placeholder: t(a)("menu.variant.form.name.placeholder")
+                        }, t($).field("name", u.value.setName)), {
+                          append: p(() => [
+                            r(R, {
+                              placement: "top",
+                              variant: "plain",
+                              "z-index": 999
+                            }, {
+                              default: p(() => [
+                                r(o, {
+                                  "aria-label": t(a)("menu.variant.form.translation.button"),
+                                  class: "!p-0",
+                                  icon: "g_translate",
+                                  variant: "tertiary",
+                                  onClick: n[1] || (n[1] = (Q) => ne("variant"))
+                                }, null, 8, ["aria-label"])
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 16, ["error-messages", "helper-text", "label", "model-value", "placeholder"]),
+                        r(qe, {
+                          label: t(a)("menu.variant.form.options.title")
+                        }, {
+                          default: p(() => {
+                            var Q;
+                            return [
+                              r(t(ze), {
+                                "model-value": [...((Q = l.value) == null ? void 0 : Q.options) ?? []],
+                                move: we,
+                                class: "space-y-16",
+                                "data-testid": "variant-options",
+                                group: "variants",
+                                handle: ".handle",
+                                "item-key": "id",
+                                "onUpdate:modelValue": he
+                              }, {
+                                item: p(({ element: j, index: v }) => {
+                                  var se, ie, re;
+                                  return [
+                                    d("div", {
+                                      class: "flex items-center gap-8",
+                                      "data-not-allow-sort": v === (((se = l.value) == null ? void 0 : se.options.length) ?? 0) - 1
+                                    }, [
+                                      v !== (((ie = l.value) == null ? void 0 : ie.options.length) ?? 0) - 1 ? (i(), f(o, {
+                                        key: 0,
+                                        "aria-label": t(a)("menu.variant.form.options.move", {
+                                          number: v + 1
+                                        }),
+                                        class: "handle cursor-move !p-0",
+                                        icon: "drag_handle",
+                                        variant: "tertiary"
+                                      }, null, 8, ["aria-label"])) : v > 0 ? (i(), C("div", ra)) : L("", !0),
+                                      d("div", ua, [
+                                        r(le, de({
+                                          ref: (G) => Ce(v, G),
+                                          class: "flex-1",
+                                          "error-messages": D(v, j) ? [xe(v, j)] : [],
+                                          "model-value": j.name,
+                                          placeholder: t(a)("menu.variant.form.options.placeholder")
+                                        }, be(v)), $e({ _: 2 }, [
+                                          v !== (((re = l.value) == null ? void 0 : re.options.length) ?? 0) - 1 ? {
+                                            name: "append",
+                                            fn: p(() => [
+                                              d("div", ca, [
+                                                r(o, {
+                                                  "aria-label": t(a)("menu.variant.form.options.translation", {
+                                                    number: v + 1
+                                                  }),
+                                                  class: "!p-0",
+                                                  icon: "g_translate",
+                                                  variant: "tertiary",
+                                                  onClick: n[2] || (n[2] = (G) => ne("options"))
+                                                }, null, 8, ["aria-label"]),
+                                                r(o, {
+                                                  "aria-label": t(a)("menu.variant.form.options.remove", {
+                                                    number: j.name
+                                                  }),
+                                                  class: "!p-0",
+                                                  icon: "close",
+                                                  variant: "tertiary",
+                                                  onClick: (G) => u.value.removeOption(v)
+                                                }, null, 8, ["aria-label", "onClick"])
+                                              ])
+                                            ]),
+                                            key: "0"
+                                          } : void 0
+                                        ]), 1040, ["error-messages", "model-value", "placeholder"])
+                                      ])
+                                    ], 8, ia)
+                                  ];
+                                }),
+                                _: 1
+                              }, 8, ["model-value"])
+                            ];
+                          }),
+                          _: 1
+                        }, 8, ["label"])
+                      ];
+                    }),
+                    _: 1
+                  }, 8, ["title"]),
+                  ((s = l.value) == null ? void 0 : s.mode) === "update" && l.value.linkedProductCount > 0 ? (i(), f(Ue, {
+                    key: 0,
+                    "applied-count": l.value.linkedProductCount,
+                    groups: ge.value,
+                    query: l.value.linkedProductQuery,
+                    "show-count": !1,
+                    title: t(a)("menu.variant.form.applied_product"),
+                    "read-only": "",
+                    "onUpdate:query": u.value.setLinkedProductQuery
+                  }, null, 8, ["applied-count", "groups", "query", "title", "onUpdate:query"])) : L("", !0)
+                ])
+              ];
+            }),
+            _: 1
+          }, 8, ["model-value", "is-container", "is-container-props"]),
+          w.value ? (i(), f(Ne, {
+            key: 5,
+            "expanded-section": Z.value,
+            session: w.value,
+            onClose: O,
+            onSave: ke
+          }, null, 8, ["expanded-section", "session"])) : L("", !0)
+        ]),
+        _: 1
+      }, 8, ["heading"]);
+    };
+  }
+}), Sa = /* @__PURE__ */ fe({
+  __name: "Variant",
+  setup(K) {
+    const g = Ke();
+    return (a, I) => (i(), f(da, { sdk: t(g) }, null, 8, ["sdk"]));
+  }
+});
+export {
+  Sa as default
+};

package/dist/_id_-DC1dJIaj.js

@@ -0,0 +1,28 @@
+import { defineComponent as i, watch as l, onUnmounted as m, openBlock as d, createBlock as p, unref as f } from "vue";
+import { useRoute as _, useRouter as g, RouterView as k } from "vue-router";
+import { a as R, u as w } from "./provide-Tmjfji09.js";
+import { u as h } from "./useActionFeedback-DoFeBFpl.js";
+import { R as y } from "./app-Bd7W2PYm.js";
+const M = /* @__PURE__ */ i({
+  __name: "[id]",
+  setup(x) {
+    const e = R(), s = _(), r = g(), { run: n } = h(), u = w(e.catalog.list);
+    let o = !1;
+    return l(
+      [() => s.params.id, () => u.value.status],
+      async ([t, a]) => {
+        if (a !== "ready" || typeof t != "string") return;
+        const c = await n(async () => e.catalog.open(t), {
+          showLoading: !1
+        });
+        !o && c.kind === "rejected" && await r.replace({ name: y.CATALOG });
+      },
+      { immediate: !0 }
+    ), m(() => {
+      o = !0, e.context.select({ catalogId: null, schedulerId: null });
+    }), (t, a) => (d(), p(f(k)));
+  }
+});
+export {
+  M as default
+};

package/dist/_plugin-vue_export-helper-CHgC5LLL.js

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};