@feedmepos/mf-menu-portal 1.0.4-dev.3 → 1.0.4

package/dist/CategoryList.vue_vue_type_script_setup_true_lang-DlNUOgyu.js

@@ -0,0 +1,847 @@
+import { defineComponent as Ve, computed as U, ref as Y, watch as ae, onMounted as Qe, onUnmounted as Ie, openBlock as g, createElementBlock as z, createElementVNode as v, createTextVNode as Pe, toDisplayString as D, unref as o, isRef as be, createVNode as b, createBlock as T, createCommentVNode as N, withCtx as E, shallowRef as J, h as ge, withModifiers as he, resolveComponent as ie, renderSlot as pe, Fragment as Re, renderList as Xe, normalizeClass as Ye, withDirectives as Ze, mergeProps as ea } from "vue";
+import { useI18n as De } from "@feedmepos/mf-common";
+import { components as te, useDialog as aa, useBreakpoints as ta, FmButtonVariant as we } from "@feedmepos/ui-library";
+import { _ as oa } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { f as la } from "./ProductImageEditorDialog.vue_vue_type_script_setup_true_lang-CjQRRqBx.js";
+import { useAppStore as na } from "@feedmepos/mf-remy-panel";
+import { _ as sa } from "./ListCountTag.vue_vue_type_script_setup_true_lang-0bjk8Aly.js";
+import { _ as ia } from "./TranslationLanguageSelector.vue_vue_type_script_setup_true_lang-BJZ6VcrT.js";
+import { _ as Ee } from "./vuedraggable-CBtQLb_S.js";
+import { _ as ra } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
+import { _ as ua } from "./ProductEditorHost.vue_vue_type_script_setup_true_lang-BBXGnZtc.js";
+import { _ as ca } from "./TranslationSideSheet.vue_vue_type_script_setup_true_lang-B0j2PNih.js";
+import { u as da } from "./useActionFeedback-CXx7dOVc.js";
+import { u as $e } from "./useEditorValidation-Ctef5Bxt.js";
+import { b as ma, u as va } from "./provide-Bwf3KcOV.js";
+import { v as ga } from "./tableSemantics-C9WFO_I_.js";
+const pa = {
+  key: 0,
+  class: "space-y-4"
+}, fa = { class: "fm-typo-en-body-lg-600" }, ya = { class: "fm-typo-en-body-md-400 text-fm-color-typo-tertiary" }, ba = { class: "fm-typo-en-body-lg-600 pb-4" }, ha = { class: "fm-typo-en-body-md-400 text-fm-color-typo-tertiary" }, wa = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, _a = /* @__PURE__ */ Ve({
+  __name: "CategoryImageField",
+  props: {
+    thumbnailUrl: {},
+    change: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["select", "clear", "encoding"],
+  setup(fe, { emit: h }) {
+    const a = fe, M = h, { t: F } = De(), j = na(), O = U(() => !!j.showRemy), r = Y(a.thumbnailUrl);
+    let $ = null, P = 0, K = !1, m = !1, Q = !1, X = !1;
+    function w(i) {
+      X !== i && (X = i, M("encoding", i));
+    }
+    function p() {
+      $ && URL.revokeObjectURL($), $ = null;
+    }
+    ae(
+      () => [a.thumbnailUrl, a.change],
+      () => {
+        a.change !== "selected" && (P++, w(!1), K = !1, m = !1, p(), r.value = a.change === "cleared" ? null : a.thumbnailUrl);
+      }
+    );
+    function G(i) {
+      return new Promise((u, c) => {
+        const y = URL.createObjectURL(i), d = new Image();
+        d.onload = () => {
+          URL.revokeObjectURL(y);
+          const _ = d.naturalWidth, V = d.naturalHeight;
+          if (!_ || !V) {
+            c(new Error("Empty category image"));
+            return;
+          }
+          const W = Math.max(_, V * 16 / 9), R = Math.max(V, _ * 9 / 16), k = 2e3 / W, I = document.createElement("canvas");
+          I.width = 2e3, I.height = Math.round(R * k);
+          const q = I.getContext("2d");
+          if (!q) {
+            c(new Error("Category image canvas unavailable"));
+            return;
+          }
+          const ue = getComputedStyle(document.documentElement).getPropertyValue("--fm-color-neutral-white").trim();
+          if (!ue) {
+            c(new Error("Category image theme unavailable"));
+            return;
+          }
+          q.fillStyle = ue, q.fillRect(0, 0, I.width, I.height), q.drawImage(
+            d,
+            (W - _) / 2 * k,
+            (R - V) / 2 * k,
+            _ * k,
+            V * k
+          ), I.toBlob(
+            (ne) => ne ? u(ne) : c(new Error("Category image encoding failed")),
+            "image/png"
+          );
+        }, d.onerror = () => {
+          URL.revokeObjectURL(y), c(new Error("Category image could not be read"));
+        }, d.src = y;
+      });
+    }
+    async function oe(i) {
+      const u = Array.isArray(i) ? i[0] : i;
+      if (!u || a.disabled) return;
+      const c = ++P;
+      w(!0);
+      try {
+        const y = await G(u);
+        if (c !== P) return;
+        p(), $ = URL.createObjectURL(y), K = !0, m = !1, r.value = $;
+      } catch {
+        c === P && w(!1);
+      }
+    }
+    function l(i) {
+      if (!K && !m || a.disabled || !i.canvas) return;
+      const u = ++P, { width: c, height: y } = i.canvas;
+      w(!0), i.canvas.toBlob(
+        (d) => {
+          u === P && (d && M("select", {
+            bytes: d,
+            contentType: d.type || "image/jpeg",
+            width: c,
+            height: y
+          }), w(!1));
+        },
+        "image/jpeg",
+        0.75
+      );
+    }
+    function le() {
+      P++, w(!1);
+    }
+    function re() {
+      a.disabled || (P++, w(!1), K = !1, m = !1, Q = !1, p(), r.value = null, M("clear"));
+    }
+    async function Z() {
+      if (a.disabled || !r.value) return;
+      let i;
+      try {
+        const u = await fetch(r.value);
+        if (u.ok) {
+          const c = await u.blob();
+          i = await new Promise((y, d) => {
+            const _ = new FileReader();
+            _.onload = () => y(String(_.result)), _.onerror = () => d(_.error), _.readAsDataURL(c);
+          });
+        }
+      } catch {
+      }
+      Q = !0, j.activate({ imageData: i, command: "modifyImage" });
+    }
+    function B(i) {
+      var c;
+      if (!Q || a.disabled) return;
+      const u = (c = i.detail) == null ? void 0 : c.imageData;
+      typeof u != "string" || !u || (Q = !1, P++, w(!0), K = !0, m = !1, p(), r.value = u);
+    }
+    return Qe(() => window.addEventListener("apply-image", B)), Ie(() => {
+      window.removeEventListener("apply-image", B), P++, w(!1), p();
+    }), (i, u) => r.value ? (g(), z("div", pa, [
+      v("p", fa, [
+        Pe(D(o(F)("menu.common.labels.category_image")) + " ", 1),
+        v("span", ya, D(o(F)("menu.common.labels.optional")), 1)
+      ]),
+      v("div", {
+        class: "relative h-[150px] w-[200px] overflow-hidden rounded-md border-2 border-dashed border-fm-color-neutral-gray-300",
+        onPointerdown: u[0] || (u[0] = (c) => be(m) ? m.value = !0 : m = !0),
+        onWheel: u[1] || (u[1] = (c) => be(m) ? m.value = !0 : m = !0),
+        onKeydown: u[2] || (u[2] = (c) => be(m) ? m.value = !0 : m = !0)
+      }, [
+        b(o(la), {
+          class: "h-[150px] w-[200px]",
+          src: r.value,
+          "stencil-props": { handlers: {}, movable: !1, scalable: !1 },
+          "stencil-size": { width: 200, height: 150 },
+          "image-restriction": "stencil",
+          onChange: l,
+          onError: le
+        }, null, 8, ["src"]),
+        b(o(te).FmButton, {
+          "aria-label": o(F)("menu.category.image.remove"),
+          disabled: i.disabled,
+          label: o(F)("menu.category.image.remove"),
+          class: "!absolute right-12 top-12 z-10 !h-24 !w-24 !rounded-full !p-0",
+          "bg-color": "neutral-white",
+          icon: "close",
+          variant: "tertiary",
+          onClick: re
+        }, null, 8, ["aria-label", "disabled", "label"]),
+        O.value ? (g(), T(o(te).FmButton, {
+          key: 0,
+          "aria-label": o(F)("menu.remy.title"),
+          disabled: i.disabled,
+          label: o(F)("menu.remy.title"),
+          class: "!absolute right-12 top-[44px] z-10 !h-24 !w-24 !rounded-full !p-0",
+          "bg-color": "neutral-white",
+          icon: "auto_awesome",
+          variant: "tertiary",
+          onClick: Z
+        }, null, 8, ["aria-label", "disabled", "label"])) : N("", !0)
+      ], 32)
+    ])) : (g(), T(o(te).FmDropField, {
+      key: 1,
+      accept: ".jpg, .jpeg, .png, .gif, .JPG, .JPEG, .PNG, .GIF",
+      "content-class": "h-[150px] w-[200px]",
+      disabled: i.disabled,
+      onFileUpload: oe
+    }, {
+      label: E(() => [
+        v("p", ba, [
+          Pe(D(o(F)("menu.common.labels.category_image")) + " ", 1),
+          v("span", ha, D(o(F)("menu.common.labels.optional")), 1)
+        ])
+      ]),
+      "accept-text": E(() => [
+        v("p", wa, D(o(F)("menu.common.file.accepts")), 1)
+      ]),
+      _: 1
+    }, 8, ["disabled"]));
+  }
+}), ka = {
+  key: 0,
+  class: "flex-1 flex justify-between gap-8 pl-8"
+}, Ca = { class: "flex items-center" }, xa = {
+  key: 1,
+  class: "flex items-center gap-8 ml-auto"
+}, Sa = {
+  key: 0,
+  class: "text-fm-color-typo-secondary",
+  role: "alert"
+}, La = {
+  key: 1,
+  class: "text-fm-color-typo-secondary"
+}, Ua = {
+  key: 4,
+  class: "flex-1 flex flex-col min-h-0"
+}, Fa = { class: "p-8" }, Pa = { class: "flex flex-1 flex-col min-h-0 overflow-scroll divide-y divide-fm-color-neutral-gray-100 pb-64" }, Ra = ["onClick"], Ea = { class: "min-w-0 flex-1 space-y-4" }, $a = { class: "fm-typo-en-body-lg-600 break-words" }, Va = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Ia = {
+  key: 0,
+  class: "fixed right-16 bottom-[72px] z-[100]"
+}, Da = { class: "w-[320px]" }, Ma = { class: "fm-typo-en-title-md-600" }, Ba = { class: "flex flex-col gap-32 h-full min-h-0 py-16" }, za = { class: "flex gap-24 items-center" }, Ta = { class: "text-fm-color-typo-secondary" }, ja = { class: "flex-1" }, Oa = { class: "flex-1 overflow-hidden min-h-[300px]" }, Aa = { class: "flex gap-8 items-center justify-start" }, nt = /* @__PURE__ */ Ve({
+  __name: "CategoryList",
+  props: {
+    sdk: {},
+    catalogPage: { type: Boolean, default: !1 },
+    heading: { default: "" }
+  },
+  setup(fe) {
+    const h = fe, { t: a } = De(), M = ma(), F = aa(), { run: j } = da(), O = va(h.sdk.category.list), r = U(
+      () => O.value.status === "ready" ? O.value.value : null
+    ), $ = U(() => {
+      var e;
+      return ((e = r.value) == null ? void 0 : e.query) ?? "";
+    }), { breakpoints: P } = ta(), K = U(() => P.value.xs && !h.catalogPage), m = Y(!1), Q = Y(0), X = Y(!1), w = Y(""), p = J(
+      h.sdk.category.editor()
+    ), G = J(
+      p.value.get()
+    );
+    let oe = p.value.subscribe((e) => {
+      G.value = e;
+    });
+    const l = U(
+      () => G.value.status === "ready" ? G.value.value : null
+    ), le = $e(() => p.value), re = U(
+      () => l.value ? le.issue(l.value.fieldIssues, "name") ?? l.value.nameIssue : null
+    ), Z = Y(!1), B = J(null), i = J({ status: "loading" });
+    let u = null;
+    const c = U(
+      () => i.value.status === "ready" ? i.value.value : null
+    ), y = Y(!1), d = J(null), _ = $e(() => d.value), V = J({
+      status: "loading"
+    }), W = U(
+      () => V.value.status === "ready" ? V.value.value : null
+    );
+    let R = null, k = null;
+    function I() {
+      var e;
+      k == null || k(), k = null, (e = d.value) == null || e.dispose(), d.value = null, R == null || R.dispose(), R = null, V.value = { status: "loading" };
+    }
+    function q(e, t) {
+      var n;
+      k == null || k(), (n = d.value) == null || n.dispose(), d.value = h.sdk.item.editor(e, {
+        initialCategoryId: t
+      }), V.value = d.value.get(), k = d.value.subscribe((C) => {
+        V.value = C;
+      });
+    }
+    function ue() {
+      var t, n;
+      const e = (t = l.value) == null ? void 0 : t.categoryId;
+      !e || ((n = l.value) == null ? void 0 : n.products.state) !== "allowed" || (I(), R = h.sdk.item.editorScope(), q(void 0, e), y.value = !0);
+    }
+    function ne(e) {
+      var t;
+      ((t = l.value) == null ? void 0 : t.products.state) === "allowed" && (I(), R = h.sdk.item.editorScope(), q(e.id), y.value = !0);
+    }
+    function Me(e) {
+      var n;
+      const t = ((n = W.value) == null ? void 0 : n.itemId) ?? void 0;
+      R == null || R.select(e), q(t);
+    }
+    async function Be() {
+      const e = d.value;
+      if (!e) return;
+      (await j(
+        () => _.submit(() => e.submit()),
+        {
+          showLoading: () => {
+            var n;
+            return ((n = W.value) == null ? void 0 : n.status) === "submitting";
+          },
+          successMessage: W.value ? M(W.value.saveMessage) : ""
+        }
+      )).kind === "success" && d.value === e && (y.value = !1);
+    }
+    function H(e) {
+      var t;
+      u == null || u(), u = null, e && ((t = B.value) == null || t.dispose()), B.value = null, i.value = { status: "loading" }, Z.value = !1;
+    }
+    function ze() {
+      var t;
+      if (((t = l.value) == null ? void 0 : t.translation.state) !== "allowed") return;
+      H(!0);
+      const e = p.value.translationEditor();
+      B.value = e, i.value = e.get(), u = e.subscribe((n) => {
+        i.value = n;
+      }), Z.value = !0;
+    }
+    function Te(e) {
+      var C;
+      const t = B.value, n = (C = c.value) == null ? void 0 : C.nameLocale;
+      if (!(!t || !n)) {
+        for (const f of Object.keys(n))
+          f in e || t.removeLocale(f);
+        for (const [f, x] of Object.entries(e))
+          f in n || t.addLocale(f), t.setNameLocale(f, x);
+      }
+    }
+    async function je() {
+      const e = B.value;
+      if (!e) return;
+      (await j(async () => e.apply(), {
+        showLoading: !1
+      })).kind === "success" && H(!1);
+    }
+    function _e() {
+      H(!0);
+    }
+    function Oe(e) {
+      e ? Z.value = !0 : _e();
+    }
+    function ke(e) {
+      H(!0), oe(), p.value.dispose(), p.value = h.sdk.category.editor(e), Q.value++, X.value = !1, G.value = p.value.get(), oe = p.value.subscribe((t) => {
+        G.value = t;
+      });
+    }
+    function ye() {
+      ke(), m.value = !0;
+    }
+    function Ce(e) {
+      !e.id && !e.isSynthetic || (ke(e.isSynthetic ? null : e.id), m.value = !0);
+    }
+    function ce() {
+      H(!0), m.value = !1;
+    }
+    function xe() {
+      var e;
+      if (!((e = l.value) != null && e.dirty)) {
+        ce();
+        return;
+      }
+      F.open({
+        zIndex: 101,
+        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: we.Destructive
+        },
+        secondaryActions: {
+          text: a("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(ce);
+    }
+    function Ae(e) {
+      e ? m.value = !0 : xe();
+    }
+    ae(m, (e) => {
+      e || H(!0);
+    }), ae(y, (e) => {
+      e || I();
+    }), ae(G, (e) => {
+      B.value && (e.status !== "ready" || e.value.translation.state !== "allowed") && H(!0);
+    });
+    async function Ne() {
+      var C, f, x;
+      if (X.value) return;
+      const e = (C = l.value) == null ? void 0 : C.mode, t = ((x = (f = l.value) == null ? void 0 : f.name) == null ? void 0 : x.trim()) ?? "";
+      (await j(
+        () => le.submit(() => p.value.submit()),
+        {
+          successMessage: e === "update" ? a("menu.category.manager.dialog.update.success", { name: t }) : a("menu.category.manager.dialog.add.success", { name: t }),
+          showLoading: () => {
+            var A;
+            return ((A = l.value) == null ? void 0 : A.status) === "submitting";
+          },
+          // The approved Storage 403 baseline closes Loading but leaves the image
+          // preview and sheet open without a settled snackbar.
+          silentFailureCodes: ["menu.category.image.upload_failed"]
+        }
+      )).kind === "success" && ce();
+    }
+    function Se(e) {
+      e.remove.state !== "allowed" || !e.id || F.open({
+        title: a("menu.category.dialog.remove.title"),
+        message: a("menu.common.dialog.remove_confirmation", {
+          name: e.name
+        }),
+        primaryActions: {
+          text: a("menu.common.actions.remove"),
+          close: !0,
+          variant: we.Destructive
+        },
+        secondaryActions: {
+          text: a("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await j(() => h.sdk.category.remove(e.id), {
+          successMessage: a("menu.category.dialog.remove.success", {
+            name: e.name
+          })
+        });
+      });
+    }
+    const Ke = U(() => {
+      var e;
+      return $.value || ((e = r.value) == null ? void 0 : e.reorder.state) !== "allowed" ? () => !1 : (t) => !t.isSynthetic;
+    }), de = J([]);
+    ae(
+      () => {
+        var e;
+        return (e = r.value) == null ? void 0 : e.rows;
+      },
+      (e) => {
+        e && (de.value = [...e]);
+      },
+      { immediate: !0 }
+    );
+    async function Ge(e) {
+      var f, x, A;
+      if ($.value || ((f = r.value) == null ? void 0 : f.reorder.state) !== "allowed") return;
+      const t = e.map((s) => s.id).filter((s) => !!s);
+      if (t.length === 0) return;
+      const n = de.value;
+      (await j(() => h.sdk.category.reorder(t), {
+        successMessage: ((x = r.value) == null ? void 0 : x.reorderScope) === "catalog" ? a("menu.catalog.saved", { name: a("menu.category.entity") }) : a("menu.category.reorder.success")
+      })).kind !== "success" && (de.value = [...((A = r.value) == null ? void 0 : A.rows) ?? n]);
+    }
+    function Le(e) {
+      h.sdk.category.search(e);
+    }
+    const We = U(() => [
+      {
+        accessorKey: "name",
+        header: () => a("menu.category.columns.title"),
+        enableSorting: !1,
+        meta: { width: "auto" },
+        cell: (e) => e.row.original.nameMessage ? M(e.row.original.nameMessage) : e.row.original.name
+      },
+      {
+        accessorKey: "linkedProductCount",
+        header: () => a("menu.category.columns.products"),
+        enableSorting: !1,
+        size: 200,
+        // Plural selection is an i18n concern, never a template expression
+        // (ADR-0003 §3). The legacy table treats zero and one alike
+        // (`CategoryTable.vue:73-78`), so the message has its own zero form.
+        cell: (e) => a("menu.common.labels.product_linked", {
+          count: e.row.original.linkedProductCount
+        })
+      },
+      // Catalog scope only changes membership/order. Categories remain master
+      // entities, so the scoped table deliberately has no destructive action
+      // column — the legacy editor renders just its two data columns there.
+      ...h.catalogPage ? [] : [
+        {
+          id: "actions",
+          size: 52,
+          meta: { cellClass: "pl-16", headerContentClass: "-mx-16" },
+          header: "",
+          cell: (e) => {
+            const t = e.row.original;
+            return ge("div", { class: "flex justify-end" }, [
+              ge(te.FmButton, {
+                icon: "delete",
+                disabled: t.remove.state !== "allowed",
+                variant: "tertiary",
+                textColor: "neutral-gray-400",
+                "aria-label": a("menu.category.dialog.remove.title"),
+                onClick: he(
+                  () => Se(t),
+                  ["stop", "prevent"]
+                )
+              })
+            ]);
+          }
+        }
+      ]
+    ]), me = U(() => {
+      var n;
+      const e = ((n = l.value) == null ? void 0 : n.productRows) ?? [], t = w.value.trim().toLocaleLowerCase();
+      return t ? e.filter(
+        (C) => C.name.toLocaleLowerCase().includes(t) || (C.code ?? "").toLocaleLowerCase().includes(t)
+      ) : e;
+    }), ve = J([]);
+    ae(
+      me,
+      (e) => {
+        ve.value = [...e];
+      },
+      { immediate: !0 }
+    );
+    const qe = U(() => {
+      var e, t;
+      return me.value.length === 0 ? !1 : w.value || ((e = l.value) == null ? void 0 : e.products.state) !== "allowed" || me.value.length < 2 ? () => !1 : (t = l.value) != null && t.synthetic ? () => !1 : () => !0;
+    });
+    async function He(e) {
+      var f, x;
+      const t = (f = l.value) == null ? void 0 : f.categoryId;
+      if (!t || w.value || ((x = l.value) == null ? void 0 : x.products.state) !== "allowed")
+        return;
+      const n = ve.value;
+      (await j(
+        () => h.sdk.item.reorderForCategory(
+          t,
+          e.map((A) => A.id)
+        ),
+        {
+          successMessage: a("menu.product.table.bulk_edit.saved", {
+            count: e.length
+          })
+        }
+      )).kind !== "success" && (ve.value = [...me.value ?? n]);
+    }
+    const Je = U(() => [
+      {
+        accessorKey: "name",
+        header: () => a("menu.category.products.columns.name"),
+        enableSorting: !1
+      },
+      {
+        accessorKey: "code",
+        header: () => a("menu.category.products.columns.code"),
+        enableSorting: !1
+      },
+      {
+        id: "actions",
+        size: 52,
+        meta: { cellClass: "pl-16", headerContentClass: "-mx-16" },
+        header: "",
+        cell: (e) => ge("div", { class: "flex justify-end" }, [
+          ge(te.FmButton, {
+            icon: "edit",
+            variant: we.Tertiary,
+            textColor: "neutral-gray-400",
+            "aria-label": a("menu.common.labels.a11y_labelled_name", {
+              label: a("menu.common.actions.edit"),
+              name: e.row.original.name
+            }),
+            onClick: he(
+              () => ne(e.row.original),
+              ["stop", "prevent"]
+            )
+          })
+        ])
+      }
+    ]);
+    return Ie(() => {
+      h.sdk.category.search(""), H(!0), I(), oe(), p.value.dispose();
+    }), (e, t) => {
+      const n = ie("FmButton"), C = ie("FmCircularProgress"), f = ie("FmSearch"), x = ie("FmTable"), A = ie("FmSideSheet");
+      return g(), T(ra, {
+        heading: e.catalogPage ? e.heading : o(a)("menu.category.title")
+      }, {
+        "prepend-heading": E(() => [
+          pe(e.$slots, "prepend-heading")
+        ]),
+        "append-heading": E(() => {
+          var s;
+          return [
+            e.catalogPage ? N("", !0) : (g(), z("div", ka, [
+              v("div", Ca, [
+                b(sa, {
+                  value: ((s = r.value) == null ? void 0 : s.totalCount) ?? 0
+                }, null, 8, ["value"])
+              ]),
+              r.value && r.value.totalCount > 0 && !K.value ? (g(), T(n, {
+                key: 0,
+                disabled: r.value.create.state !== "allowed",
+                label: o(a)("menu.category.add"),
+                "prepend-icon": "add",
+                onClick: ye
+              }, null, 8, ["disabled", "label"])) : N("", !0)
+            ])),
+            e.catalogPage ? (g(), z("div", xa, [
+              pe(e.$slots, "append-heading")
+            ])) : pe(e.$slots, "append-heading", { key: 2 })
+          ];
+        }),
+        default: E(() => [
+          pe(e.$slots, "navigation"),
+          o(O).status === "error" ? (g(), z("p", Sa, D(o(M)(o(O).error.message)), 1)) : o(O).status === "unavailable" ? (g(), z("p", La, D(o(M)(o(O).reason)), 1)) : o(O).status === "loading" ? (g(), T(C, { key: 2 })) : r.value && r.value.rows.length === 0 && !$.value ? (g(), T(o(oa), {
+            key: 3,
+            action: e.catalogPage ? void 0 : { text: o(a)("menu.category.add"), callback: ye },
+            subtitle: o(a)("menu.category.empty.subtitle"),
+            title: o(a)("menu.category.empty.title")
+          }, null, 8, ["action", "subtitle", "title"])) : r.value && K.value ? (g(), z("div", Ua, [
+            v("div", Fa, [
+              b(f, {
+                class: "w-full",
+                "model-value": $.value,
+                placeholder: o(a)("menu.common.labels.search_placeholder", {
+                  type: o(a)("menu.category.title")
+                }),
+                "onUpdate:modelValue": Le
+              }, null, 8, ["model-value", "placeholder"])
+            ]),
+            v("div", Pa, [
+              (g(!0), z(Re, null, Xe(r.value.rows, (s) => (g(), z("div", {
+                key: s.id ?? "",
+                class: "flex flex-row py-12 px-16",
+                onClick: (S) => Ce(s)
+              }, [
+                v("div", Ea, [
+                  v("p", $a, D(s.nameMessage ? o(M)(s.nameMessage) : s.name), 1),
+                  v("p", Va, D(o(a)("menu.common.labels.product_linked", {
+                    count: s.linkedProductCount
+                  })), 1)
+                ]),
+                b(n, {
+                  class: "shrink-0",
+                  "aria-label": o(a)("menu.category.dialog.remove.title"),
+                  disabled: s.remove.state !== "allowed",
+                  "prepend-icon": "delete",
+                  "text-color": "neutral-gray-400",
+                  variant: "tertiary",
+                  onClick: he((S) => Se(s), ["stop"])
+                }, null, 8, ["aria-label", "disabled", "onClick"])
+              ], 8, Ra))), 128))
+            ]),
+            r.value.totalCount > 0 ? (g(), z("div", Ia, [
+              b(n, {
+                disabled: r.value.create.state !== "allowed",
+                label: o(a)("menu.category.add"),
+                "prepend-icon": "add",
+                variant: "fab",
+                onClick: ye
+              }, null, 8, ["disabled", "label"])
+            ])) : N("", !0)
+          ])) : r.value ? (g(), z(Re, { key: 5 }, [
+            v("div", {
+              class: Ye(["flex justify-end items-center", { "pt-16": e.catalogPage }])
+            }, [
+              v("div", Da, [
+                b(f, {
+                  class: "mb-8",
+                  "model-value": $.value,
+                  placeholder: o(a)("menu.common.labels.search_placeholder", {
+                    type: o(a)("menu.category.title")
+                  }),
+                  "onUpdate:modelValue": Le
+                }, null, 8, ["model-value", "placeholder"])
+              ])
+            ], 2),
+            Ze(b(x, {
+              "column-defs": We.value,
+              draggable: Ke.value,
+              "page-size": r.value.rows.length,
+              "row-data": de.value,
+              "shrink-at": !1,
+              "hide-footer": "",
+              "pin-header-row": "",
+              onDndChanged: Ge,
+              onRowClick: t[0] || (t[0] = (s) => Ce(s.original))
+            }, null, 8, ["column-defs", "draggable", "page-size", "row-data"]), [
+              [o(ga), o(a)("menu.category.columns.title")]
+            ])
+          ], 64)) : N("", !0),
+          b(A, {
+            "model-value": m.value && !y.value,
+            "is-container": o(te).FmForm,
+            "is-container-props": { onValidationSuccess: Ne },
+            "max-width": 560,
+            "z-index": 100,
+            "onOn:clickedAway": xe,
+            "onUpdate:modelValue": Ae
+          }, {
+            "side-sheet-header": E(() => {
+              var s, S;
+              return [
+                v("p", Ma, D((s = l.value) != null && s.synthetic ? o(a)("menu.category.entity") : ((S = l.value) == null ? void 0 : S.mode) === "update" ? o(a)("menu.category.manager.dialog.update.title") : o(a)("menu.category.manager.dialog.add.title")), 1)
+              ];
+            }),
+            "side-sheet-footer": E(() => {
+              var s, S, se;
+              return [
+                v("div", Aa, [
+                  ((s = l.value) == null ? void 0 : s.submit.state) !== "hidden" ? (g(), T(n, {
+                    key: 0,
+                    disabled: ((S = l.value) == null ? void 0 : S.submit.state) !== "allowed" || X.value,
+                    label: ((se = l.value) == null ? void 0 : se.mode) === "update" ? o(a)("menu.common.actions.update") : o(a)("menu.category.manager.dialog.add.action"),
+                    size: "lg",
+                    type: "submit",
+                    variant: "primary"
+                  }, null, 8, ["disabled", "label"])) : N("", !0),
+                  b(n, {
+                    label: o(a)("menu.common.actions.cancel"),
+                    size: "lg",
+                    variant: "tertiary",
+                    onClick: ce
+                  }, null, 8, ["label"])
+                ])
+              ];
+            }),
+            default: E(() => {
+              var s, S, se;
+              return [
+                v("div", Ba, [
+                  b(Ee, {
+                    title: o(a)("menu.category.detail")
+                  }, {
+                    default: E(() => {
+                      var L, ee;
+                      return [
+                        b(ia, ea({
+                          "error-messages": re.value ? [o(M)(re.value)] : [],
+                          label: o(a)("menu.category.name"),
+                          readonly: (L = l.value) == null ? void 0 : L.synthetic,
+                          "model-value": ((ee = l.value) == null ? void 0 : ee.name) ?? ""
+                        }, o(le).field("name", p.value.setName)), {
+                          append: E(() => {
+                            var Ue, Fe;
+                            return [
+                              ((Ue = l.value) == null ? void 0 : Ue.translation.state) !== "hidden" ? (g(), T(n, {
+                                key: 0,
+                                "aria-label": o(a)("menu.common.translation.translation_label"),
+                                disabled: ((Fe = l.value) == null ? void 0 : Fe.translation.state) !== "allowed",
+                                class: "!p-0",
+                                icon: "g_translate",
+                                variant: "tertiary",
+                                onClick: ze
+                              }, null, 8, ["aria-label", "disabled"])) : N("", !0)
+                            ];
+                          }),
+                          _: 1
+                        }, 16, ["error-messages", "label", "readonly", "model-value"])
+                      ];
+                    }),
+                    _: 1
+                  }, 8, ["title"]),
+                  l.value && l.value.image.capability.state !== "hidden" ? (g(), T(_a, {
+                    key: Q.value,
+                    "thumbnail-url": ((s = l.value) == null ? void 0 : s.image.thumbnailUrl) ?? null,
+                    change: ((S = l.value) == null ? void 0 : S.image.change) ?? "unchanged",
+                    disabled: ((se = l.value) == null ? void 0 : se.image.capability.state) !== "allowed",
+                    onSelect: t[1] || (t[1] = (L) => p.value.setImage(L)),
+                    onClear: t[2] || (t[2] = (L) => p.value.clearImage()),
+                    onEncoding: t[3] || (t[3] = (L) => X.value = L)
+                  }, null, 8, ["thumbnail-url", "change", "disabled"])) : N("", !0),
+                  b(Ee, {
+                    class: "flex-1 min-h-0",
+                    shrinkable: !0,
+                    title: o(a)("menu.category.products.title")
+                  }, {
+                    "append-title": E(() => {
+                      var L;
+                      return [
+                        b(n, {
+                          "border-color": "primary",
+                          disabled: ((L = l.value) == null ? void 0 : L.products.state) !== "allowed",
+                          label: o(a)("menu.category.products.add"),
+                          "prepend-icon": "add",
+                          "text-color": "primary",
+                          variant: "secondary",
+                          onClick: ue
+                        }, null, 8, ["disabled", "label"])
+                      ];
+                    }),
+                    default: E(() => {
+                      var L;
+                      return [
+                        v("div", za, [
+                          v("div", Ta, D(o(a)("menu.category.products.linked_count", {
+                            count: ((L = l.value) == null ? void 0 : L.productRows.length) ?? 0
+                          })), 1),
+                          v("div", ja, [
+                            b(f, {
+                              modelValue: w.value,
+                              "onUpdate:modelValue": t[4] || (t[4] = (ee) => w.value = ee),
+                              placeholder: o(a)("menu.common.actions.search")
+                            }, null, 8, ["modelValue", "placeholder"])
+                          ])
+                        ]),
+                        v("div", Oa, [
+                          b(x, {
+                            "column-defs": Je.value,
+                            draggable: qe.value,
+                            "hide-footer": "",
+                            "pin-header-row": "",
+                            "row-data": ve.value,
+                            "shrink-at": !1,
+                            onDndChanged: He,
+                            onRowClick: t[5] || (t[5] = (ee) => ne(ee.original))
+                          }, null, 8, ["column-defs", "draggable", "row-data"])
+                        ])
+                      ];
+                    }),
+                    _: 1
+                  }, 8, ["title"])
+                ])
+              ];
+            }),
+            _: 1
+          }, 8, ["model-value", "is-container", "is-container-props"]),
+          b(ua, {
+            open: y.value,
+            "onUpdate:open": t[6] || (t[6] = (s) => y.value = s),
+            sdk: e.sdk,
+            session: d.value,
+            validation: o(_),
+            view: W.value,
+            onSelectScope: Me,
+            onSubmit: Be
+          }, null, 8, ["open", "sdk", "session", "validation", "view"]),
+          c.value ? (g(), T(ca, {
+            key: 6,
+            "model-value": Z.value,
+            dirty: c.value.dirty,
+            name: c.value.name,
+            "name-locale": c.value.nameLocale,
+            "supported-locales": c.value.supportedLocales,
+            title: o(a)("menu.common.translation.sheet_title", {
+              entity: o(a)("menu.category.entity")
+            }),
+            "name-section-label": o(a)("menu.common.translation.name_section", {
+              entity: o(a)("menu.category.entity")
+            }),
+            "z-index": 200,
+            onDiscard: _e,
+            onSave: je,
+            "onUpdate:modelValue": Oe,
+            "onUpdate:name": t[7] || (t[7] = (s) => {
+              var S;
+              return (S = B.value) == null ? void 0 : S.setName(s);
+            }),
+            "onUpdate:nameLocale": Te
+          }, null, 8, ["model-value", "dirty", "name", "name-locale", "supported-locales", "title", "name-section-label"])) : N("", !0)
+        ]),
+        _: 3
+      }, 8, ["heading"]);
+    };
+  }
+});
+export {
+  nt as _
+};