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

package/dist/CategoryList.vue_vue_type_script_setup_true_lang-UgNVpYgp.js

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