@feedmepos/mf-menu 0.32.25-dev → 0.32.26-dev

package/dist/CookingGuide-B5pjN87U.js

@@ -0,0 +1,897 @@
+import { defineComponent as le, ref as V, computed as F, resolveComponent as x, createBlock as T, openBlock as g, unref as n, withCtx as p, createElementVNode as a, createVNode as l, createElementBlock as E, toDisplayString as S, Fragment as z, renderList as Q, withModifiers as ae, createCommentVNode as ce, createTextVNode as fe, h as R } from "vue";
+import { useI18n as se } from "@feedmepos/mf-common";
+import { components as de, useBreakpoints as be, useSnackbar as ye, useDialog as ke } from "@feedmepos/ui-library";
+import { _ as he } from "./ResponsiveFabButton.vue_vue_type_script_setup_true_lang-Cn-3MRBO.js";
+import { _ as xe } from "./app-dr4L7s0e.js";
+import { I as ee, J as me, M as re, A as oe, u as Ce, Q as we, G as Fe, a5 as Ve } from "./index.vue_vue_type_script_setup_true_lang-CN4VSfTe.js";
+import { d as Se } from "./vuedraggable-CK8z7qA8.js";
+import { _ as Z } from "./RuleView.vue_vue_type_script_setup_true_lang-DyVE6RAn.js";
+import { u as pe } from "./discardConfirm-BHni0LNu.js";
+import { L as Ie } from "./LinkProductSideSheet-Cv2q4tn-.js";
+import { _ as $e } from "./PageLayout.vue_vue_type_script_setup_true_lang-2f0QfweQ.js";
+const Oe = { class: "flex items-center gap-8" }, Ee = { class: "grow" }, Ke = { class: "space-y-32" }, Le = { class: "flex bg-fm-color-neutral-gray-100 border-b border-b-fm-color-neutral-gray-200" }, Ne = { class: "px-16 py-8 w-[40%]" }, De = { class: "px-16 py-8 grow" }, Ge = { class: "px-16 py-8 w-[40%]" }, Me = { class: "px-16 py-8 grow" }, Ue = { class: "space-y-16" }, Be = { class: "flex flex-wrap gap-8 overflow-hidden mb-8" }, Te = { class: "flex gap-8 items-center justify-start" }, ze = /* @__PURE__ */ le({
+  __name: "CookingGuideStepDialog",
+  emits: ["onComplete"],
+  setup(G, { expose: _, emit: X }) {
+    const { t: r } = se();
+    _({
+      show: s,
+      hide: O
+    });
+    const P = X;
+    function D() {
+      return {
+        id: "",
+        variables: {},
+        instruction: ""
+      };
+    }
+    const C = V(!1), A = V(!1), $ = V(void 0);
+    function s(v) {
+      A.value = !!v, $.value = v ? ee(v) : D(), c.value = ee($.value), w.value = Object.entries(c.value.variables).map(
+        ([t, f]) => ({ key: t, value: f })
+      ), C.value = !0;
+    }
+    function O() {
+      C.value = !1;
+    }
+    const c = V(D()), w = V([]);
+    function q() {
+      w.value.push({ key: "", value: "" });
+    }
+    function H(v) {
+      w.value.splice(v, 1);
+    }
+    function j(v) {
+      const t = document.activeElement;
+      if (t && t.tagName === "TEXTAREA") {
+        const f = t.selectionStart, L = t.selectionEnd, M = c.value.instruction, I = M.substring(0, f) + `{{${v}}}` + M.substring(L);
+        c.value = {
+          ...c.value,
+          instruction: I
+        }, setTimeout(() => {
+          t.focus();
+          const Y = f + `{{${v}}}`.length;
+          t.setSelectionRange(Y, Y);
+        }, 0);
+      } else
+        c.value = {
+          ...c.value,
+          instruction: `${c.value.instruction}{{${v}}}`
+        };
+    }
+    const k = F(() => w.value.reduce(
+      (v, { key: t }) => (t && v.every((f) => f.label !== t) && v.push({
+        label: t
+      }), v),
+      []
+    )), h = F(() => A.value ? r("menu.cooking_guide.step_dialog.update.title") : r("menu.cooking_guide.step_dialog.add.title")), K = F(() => A.value ? r("menu.cooking_guide.step_dialog.update.action") : r("menu.cooking_guide.step_dialog.add.action"));
+    V();
+    const i = pe(
+      () => !me.isEqual(
+        {
+          ...c.value,
+          variables: w.value.reduce((v, { key: t, value: f }) => ({ ...v, [t]: f }), {})
+        },
+        $.value
+      ),
+      () => {
+        C.value = !1;
+      }
+    );
+    function u() {
+      O(), P("onComplete", {
+        ...c.value,
+        variables: w.value.reduce((v, { key: t, value: f }) => ({ ...v, [t]: f }), {})
+      });
+    }
+    return (v, t) => {
+      const f = x("FmButton"), L = x("FmTextField"), M = x("FmChip"), I = x("FmTextarea"), Y = x("FmSideSheet");
+      return g(), T(Y, {
+        modelValue: C.value,
+        "onUpdate:modelValue": t[1] || (t[1] = (U) => C.value = U),
+        closeButton: !1,
+        header: h.value,
+        "max-width": 560,
+        "is-container": n(de).FmForm,
+        "is-container-props": {
+          onValidationSuccess: u,
+          blameFormChildOnValidationFailed: !0,
+          class: "flex flex-col h-full"
+        },
+        "onOn:clickedAway": n(i)
+      }, {
+        "side-sheet-header": p(() => [
+          a("div", Oe, [
+            l(f, {
+              icon: "arrow_back",
+              variant: "tertiary",
+              label: n(r)("menu.cooking_guide.step_dialog.actions.back"),
+              onClick: O
+            }, null, 8, ["label"]),
+            a("div", Ee, S(h.value), 1)
+          ])
+        ]),
+        "side-sheet-footer": p(() => [
+          a("div", Te, [
+            l(f, {
+              label: K.value,
+              size: "lg",
+              variant: "primary",
+              type: "submit"
+            }, null, 8, ["label"]),
+            l(f, {
+              label: n(r)("menu.cooking_guide.step_dialog.actions.cancel"),
+              size: "lg",
+              variant: "tertiary",
+              onClick: O
+            }, null, 8, ["label"])
+          ])
+        ]),
+        default: p(() => [
+          a("div", Ke, [
+            l(Z, {
+              title: n(r)("menu.cooking_guide.step_dialog.sections.variables.title")
+            }, {
+              "append-title": p(() => [
+                l(f, {
+                  icon: "add",
+                  label: n(r)("menu.cooking_guide.step_dialog.sections.variables.add"),
+                  variant: "secondary",
+                  "text-color": "primary",
+                  "border-color": "primary",
+                  onClick: q
+                }, null, 8, ["label"])
+              ]),
+              default: p(() => [
+                a("div", null, [
+                  a("div", Le, [
+                    a("div", Ne, S(n(r)("menu.cooking_guide.step_dialog.sections.variables.columns.key")), 1),
+                    a("div", De, S(n(r)("menu.cooking_guide.step_dialog.sections.variables.columns.value")), 1)
+                  ]),
+                  (g(!0), E(z, null, Q(w.value, (U, B) => (g(), E("div", {
+                    key: B,
+                    class: "flex items-center border-b border-b-fm-color-neutral-gray-100"
+                  }, [
+                    a("div", Ge, [
+                      l(L, {
+                        modelValue: w.value[B].key,
+                        "onUpdate:modelValue": (N) => w.value[B].key = N,
+                        rules: [
+                          (N) => !!N || n(r)("menu.cooking_guide.step_dialog.sections.variables.validation.required"),
+                          (N) => !N || /^[a-z]+$/.test(N) || n(r)("menu.cooking_guide.step_dialog.sections.variables.validation.lowercase"),
+                          (N) => !N || w.value.findIndex((ue) => ue.key === N) === B || n(r)("menu.cooking_guide.step_dialog.sections.variables.validation.duplicate")
+                        ],
+                        placeholder: n(r)("menu.cooking_guide.step_dialog.sections.variables.placeholders.key")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "rules", "placeholder"])
+                    ]),
+                    a("div", Me, [
+                      l(L, {
+                        modelValue: w.value[B].value,
+                        "onUpdate:modelValue": (N) => w.value[B].value = N,
+                        rules: [
+                          (N) => !!N || n(r)("menu.cooking_guide.step_dialog.sections.variables.validation.required")
+                        ],
+                        placeholder: n(r)("menu.cooking_guide.step_dialog.sections.variables.placeholders.value")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "rules", "placeholder"])
+                    ]),
+                    l(f, {
+                      icon: "delete",
+                      variant: "tertiary",
+                      "text-color": "neutral-gray-400",
+                      onClick: () => H(B)
+                    }, null, 8, ["onClick"])
+                  ]))), 128))
+                ])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            l(Z, {
+              title: n(r)("menu.cooking_guide.step_dialog.sections.instruction.title")
+            }, {
+              default: p(() => [
+                a("div", Ue, [
+                  a("div", Be, [
+                    (g(!0), E(z, null, Q(k.value, (U) => (g(), T(M, {
+                      key: U.label,
+                      label: U.label,
+                      class: "text-fm-color-primary bg-fm-color-system-warning-100",
+                      onMousedown: ae(() => j(U.label), ["prevent"])
+                    }, null, 8, ["label", "onMousedown"]))), 128))
+                  ]),
+                  l(I, {
+                    modelValue: c.value.instruction,
+                    "onUpdate:modelValue": t[0] || (t[0] = (U) => c.value.instruction = U),
+                    ref: "textareaRef"
+                  }, null, 8, ["modelValue"])
+                ])
+              ]),
+              _: 1
+            }, 8, ["title"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "header", "is-container", "is-container-props", "onOn:clickedAway"]);
+    };
+  }
+}), Ae = { class: "w-[700px]" }, Re = { class: "flex bg-fm-color-neutral-gray-100" }, Pe = { class: "px-16 py-8 grow" }, qe = { class: "px-16 py-8 w-[200px]" }, je = { class: "px-16 py-8 w-[200px]" }, Ye = { class: "px-16 py-8 grow" }, Je = { class: "px-16 py-8 w-[200px] flex flex-col gap-8" }, Qe = { class: "px-16 py-8 w-[200px] flex flex-col gap-8" }, Xe = /* @__PURE__ */ le({
+  __name: "CookingGuideStepOverrideDialog",
+  emits: ["onComplete"],
+  setup(G, { expose: _, emit: X }) {
+    const { t: r } = se();
+    _({
+      show: s,
+      hide: O
+    });
+    const P = X;
+    function D() {
+      return {
+        productId: "",
+        overrides: []
+      };
+    }
+    const C = V(!1), A = V(""), $ = V([]);
+    function s(k) {
+      A.value = k.itemName, $.value = k.steps, c.value = k.bindings ? ee(k.bindings) : D(), C.value = !0;
+    }
+    function O() {
+      C.value = !1;
+    }
+    const c = V(D()), w = F(() => c.value.overrides.reduce((k, h) => (k[h.id] = h, k), {}));
+    function q(k, h) {
+      var K;
+      return ((K = w.value[k]) == null ? void 0 : K.variables[h]) ?? "";
+    }
+    function H(k, h, K) {
+      const i = c.value.overrides.findIndex((u) => u.id === k);
+      K ? i < 0 ? c.value.overrides.push({
+        id: k,
+        variables: { [h]: K }
+      }) : c.value.overrides[i].variables[h] = K : i >= 0 && (delete c.value.overrides[i].variables[h], Object.keys(c.value.overrides[i].variables).length || c.value.overrides.splice(i, 1));
+    }
+    function j() {
+      O(), P("onComplete", c.value);
+    }
+    return (k, h) => {
+      const K = x("FmTextField"), i = x("FmSpacer"), u = x("FmButton"), v = x("FmDialog");
+      return g(), T(v, {
+        modelValue: C.value,
+        "onUpdate:modelValue": h[0] || (h[0] = (t) => C.value = t),
+        overlay: !0,
+        contentClass: "test",
+        "min-width": "min(calc(100% - 48px), 748px)"
+      }, {
+        "dialog-header": p(() => [
+          a("div", null, S(n(r)("menu.cooking_guide.step_override_dialog.title")), 1)
+        ]),
+        "dialog-footer": p(() => [
+          l(i),
+          l(u, {
+            class: "sm:w-full xs:w-full",
+            label: n(r)("menu.cooking_guide.step_override_dialog.actions.cancel"),
+            size: "md",
+            variant: "tertiary",
+            onClick: O
+          }, null, 8, ["label"]),
+          l(u, {
+            class: "sm:w-full xs:w-full",
+            label: n(r)("menu.cooking_guide.step_override_dialog.actions.save"),
+            size: "md",
+            variant: "primary",
+            onClick: j
+          }, null, 8, ["label"])
+        ]),
+        default: p(() => [
+          a("div", Ae, [
+            a("div", Re, [
+              a("div", Pe, S(n(r)("menu.cooking_guide.step_override_dialog.columns.instructions")), 1),
+              a("div", qe, S(n(r)("menu.cooking_guide.step_override_dialog.columns.variables")), 1),
+              a("div", je, S(n(r)("menu.cooking_guide.step_override_dialog.columns.value")), 1)
+            ]),
+            (g(!0), E(z, null, Q($.value, (t) => (g(), E("div", {
+              key: t.id,
+              class: "flex border-t-2"
+            }, [
+              a("div", Ye, S(t.instruction), 1),
+              a("div", Je, [
+                (g(!0), E(z, null, Q(t.variables, (f, L) => (g(), E("div", {
+                  key: L,
+                  class: "py-8 w-full text-ellipsis overflow-hidden whitespace-nowrap"
+                }, S(L), 1))), 128))
+              ]),
+              a("div", Qe, [
+                (g(!0), E(z, null, Q(t.variables, (f, L) => (g(), E("div", { key: L }, [
+                  l(K, {
+                    "model-value": q(t.id, L.toString()),
+                    placeholder: f,
+                    "onUpdate:modelValue": (M) => H(t.id, L.toString(), M)
+                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
+                ]))), 128))
+              ])
+            ]))), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), He = { class: "fm-typo-en-title-md-600" }, We = { class: "space-y-24" }, Ze = { class: "flex items-center" }, eo = { class: "flex-1" }, oo = { class: "flex items-center gap-8" }, to = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, no = { class: "flex-1" }, io = { class: "bg-fm-color-neutral-gray-100 px-16 py-8" }, ao = { class: "px-16 py-8 flex-1 flex gap-4 overflow-auto min-w-0" }, lo = { class: "fm-typo-en-body-md-500" }, so = { class: "px-16 py-8 flex gap-8" }, uo = { class: "flex gap-8 items-center justify-start" }, ro = /* @__PURE__ */ le({
+  __name: "CookingGuideDialog",
+  props: {
+    categorizedItems: {
+      type: Array,
+      required: !0
+    },
+    canApplyItems: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["onSave"],
+  setup(G, { expose: _, emit: X }) {
+    const r = G;
+    _({
+      showModal: A,
+      hideModal: $
+    });
+    function P() {
+      return {
+        _id: "",
+        name: "",
+        bindings: [],
+        steps: []
+      };
+    }
+    const D = V(!1), C = V(void 0);
+    function A(e) {
+      C.value = e ? ee(e) : P(), s.value = ee(C.value), D.value = !0;
+    }
+    function $() {
+      D.value = !1;
+    }
+    const s = V(P()), O = V();
+    function c() {
+      var e;
+      (e = O.value) == null || e.show();
+    }
+    function w(e) {
+      var o;
+      (o = O.value) == null || o.show(e);
+    }
+    function q(e) {
+      s.value.steps.splice(e, 1);
+    }
+    function H(e) {
+      if (!e.id)
+        s.value.steps.push({ ...e, id: (/* @__PURE__ */ new Date()).toISOString() });
+      else {
+        const o = s.value.steps.findIndex(({ id: b }) => e.id === b);
+        o >= 0 && s.value.steps.splice(o, 1, e);
+      }
+    }
+    function j(e) {
+      s.value = {
+        ...s.value,
+        bindings: e
+      };
+    }
+    function k(e, o) {
+      return s.value.bindings.find(
+        (d) => d.productId === e && d.combinationKey == o
+      );
+    }
+    function h({ items: e }) {
+      const o = e.reduce((d, m) => (d[m._id] = d[m._id] ?? [], m.combinationKey && (d[m._id] = [...d[m._id], m.combinationKey]), d), {}), b = Object.entries(o).reduce(
+        (d, [m, W]) => {
+          var te;
+          return d = W.length > 0 ? [
+            ...d,
+            ...W.map((ne) => {
+              var ie;
+              return {
+                productId: m,
+                combinationKey: ne,
+                overrides: ((ie = k(m, ne)) == null ? void 0 : ie.overrides) ?? []
+              };
+            })
+          ] : [
+            ...d,
+            {
+              productId: m,
+              overrides: ((te = k(m)) == null ? void 0 : te.overrides) ?? []
+            }
+          ], d;
+        },
+        []
+      );
+      j(b);
+    }
+    const K = V();
+    function i(e) {
+      var o;
+      (o = K.value) == null || o.show({
+        itemName: e.itemName,
+        steps: s.value.steps,
+        bindings: k(e.itemId, e.combinationKey)
+      });
+    }
+    function u({ productId: e, combinationKey: o, overrides: b }) {
+      const d = s.value.bindings.map((m) => ({
+        ...m,
+        overrides: m.productId === e && m.combinationKey == o ? b : m.overrides
+      }));
+      j(d);
+    }
+    function v(e) {
+      const o = s.value.bindings.findIndex(
+        (b) => b.productId === e.itemId && e.combinationKey == b.combinationKey
+      );
+      o >= 0 && s.value.bindings.splice(o, 1);
+    }
+    const { t } = se(), f = F(() => s.value._id ? t("menu.cooking_guide.dialog.update.title") : t("menu.cooking_guide.dialog.add.title")), L = F(() => s.value._id ? t("menu.cooking_guide.dialog.update.action") : t("menu.cooking_guide.dialog.add.action")), M = F(() => s.value.bindings.length), I = F(
+      () => s.value.bindings.reduce((e, o) => {
+        const b = e[o.productId] ?? [];
+        return o.combinationKey ? e[o.productId] = [...b, o.combinationKey] : e[o.productId] = [], e;
+      }, {})
+    ), Y = V(""), U = F(() => r.categorizedItems.reduce((e, o) => {
+      var b, d;
+      for (const m of o.items)
+        (b = m.variant) != null && b.variantGroupIds.length && ((d = m.variant) == null ? void 0 : d.variantGroupIds.length) > 0 ? e = [
+          ...e,
+          ...m.variant.variantCombinations.map((W) => ({
+            categoryId: o.id,
+            categoryName: o.name,
+            itemId: m._id,
+            itemCode: m.code,
+            itemName: `${m.name} - ${W.codeName}`,
+            combinationKey: W.combinationKey
+          }))
+        ] : e.push({
+          categoryId: o.id,
+          categoryName: o.name,
+          itemId: m._id,
+          itemCode: m.code,
+          itemName: m.name
+        });
+      return e;
+    }, [])), B = F(() => U.value.filter((e) => {
+      const o = I.value[e.itemId];
+      return !!o && (!e.combinationKey || o.includes(e.combinationKey));
+    })), N = F(() => {
+      const e = Y.value.toLowerCase();
+      return e ? B.value.filter(
+        (o) => {
+          var b;
+          return ((b = o.itemCode) == null ? void 0 : b.toLowerCase().includes(e)) || o.itemName.toLowerCase().includes(e) || o.categoryName.toLowerCase().includes(e);
+        }
+      ) : B.value;
+    }), ue = F(() => N.value.reduce(
+      (e, o) => {
+        const b = e.findIndex((d) => d.id === o.categoryId);
+        return b < 0 ? e.push({
+          id: o.categoryId,
+          name: o.categoryName,
+          items: [o]
+        }) : e[b] = {
+          ...e[b],
+          items: [...e[b].items, o]
+        }, e;
+      },
+      []
+    )), ge = X;
+    V();
+    const _e = pe(
+      () => !me.isEqual(C.value, s.value),
+      () => {
+        D.value = !1;
+      }
+    );
+    function ve() {
+      $(), ge("onSave", s.value);
+    }
+    return (e, o) => {
+      const b = x("FmTextField"), d = x("FmButton"), m = x("FmCardSection"), W = x("FmCard"), te = x("FmSpacer"), ne = x("FmSearch"), ie = x("FmSideSheet");
+      return g(), E(z, null, [
+        l(ie, {
+          modelValue: D.value,
+          "onUpdate:modelValue": o[4] || (o[4] = (y) => D.value = y),
+          header: f.value,
+          "max-width": 560,
+          "is-container": n(de).FmForm,
+          "is-container-props": {
+            onValidationSuccess: ve,
+            blameFormChildOnValidationFailed: !0,
+            class: "flex flex-col h-full py-16"
+          },
+          "onOn:clickedAway": n(_e)
+        }, {
+          "side-sheet-header": p(() => [
+            a("span", He, S(f.value), 1)
+          ]),
+          "side-sheet-footer": p(() => [
+            a("div", uo, [
+              l(d, {
+                variant: "primary",
+                label: L.value,
+                size: "lg",
+                type: "submit"
+              }, null, 8, ["label"]),
+              l(d, {
+                variant: "tertiary",
+                label: n(t)("menu.cooking_guide.dialog.actions.cancel"),
+                size: "lg",
+                onClick: $
+              }, null, 8, ["label"])
+            ])
+          ]),
+          default: p(() => [
+            a("div", We, [
+              l(Z, {
+                title: n(t)("menu.cooking_guide.dialog.sections.guide_detail.title")
+              }, {
+                default: p(() => [
+                  l(b, {
+                    autofocus: "",
+                    modelValue: s.value.name,
+                    "onUpdate:modelValue": o[0] || (o[0] = (y) => s.value.name = y),
+                    label: n(t)("menu.cooking_guide.dialog.sections.guide_detail.name.label"),
+                    placeholder: n(t)("menu.cooking_guide.dialog.sections.guide_detail.name.placeholder"),
+                    rules: [
+                      (y) => !!y || n(t)("menu.cooking_guide.dialog.sections.guide_detail.name.required")
+                    ]
+                  }, null, 8, ["modelValue", "label", "placeholder", "rules"])
+                ]),
+                _: 1
+              }, 8, ["title"]),
+              l(Z, {
+                title: n(t)("menu.cooking_guide.dialog.sections.steps.title")
+              }, {
+                "append-title": p(() => [
+                  l(d, {
+                    label: n(t)("menu.cooking_guide.dialog.sections.steps.add"),
+                    variant: "secondary",
+                    "text-color": "primary",
+                    "border-color": "primary",
+                    icon: "add",
+                    onClick: c
+                  }, null, 8, ["label"])
+                ]),
+                default: p(() => [
+                  l(n(Se), {
+                    modelValue: s.value.steps,
+                    "onUpdate:modelValue": o[1] || (o[1] = (y) => s.value.steps = y),
+                    handle: ".handle",
+                    "item-key": "id"
+                  }, {
+                    item: p(({ element: y, index: J }) => [
+                      l(W, {
+                        variant: "outlined",
+                        class: "rounded-md mb-16 items-center",
+                        horizontal: "",
+                        onClick: () => w(y)
+                      }, {
+                        default: p(() => [
+                          a("div", Ze, [
+                            l(d, {
+                              class: "handle",
+                              icon: "drag_handle",
+                              variant: "tertiary"
+                            }),
+                            a("p", eo, S(y.name), 1)
+                          ]),
+                          l(m, { class: "grow" }, {
+                            default: p(() => [
+                              fe(S(y.instruction), 1)
+                            ]),
+                            _: 2
+                          }, 1024),
+                          l(d, {
+                            icon: "delete",
+                            variant: "tertiary",
+                            onClick: ae(() => q(J), ["stop"])
+                          }, null, 8, ["onClick"])
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"])
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue"])
+                ]),
+                _: 1
+              }, 8, ["title"]),
+              G.canApplyItems ? (g(), T(Z, {
+                key: 0,
+                title: n(t)("menu.cooking_guide.dialog.sections.apply_product.title")
+              }, {
+                "append-title": p(() => [
+                  l(te),
+                  l(Ie, {
+                    "categorized-items": G.categorizedItems,
+                    "initial-value": s.value.bindings.map((y) => ({
+                      _id: y.productId,
+                      combinationKey: y.combinationKey
+                    })),
+                    "select-variant": !0,
+                    "show-variant": !0,
+                    "show-addon": !1,
+                    onSubmit: o[2] || (o[2] = (y) => h(y))
+                  }, {
+                    default: p(({ trigger: y }) => [
+                      l(d, {
+                        icon: "link",
+                        label: n(t)("menu.scheduler.dialog.sections.products.link"),
+                        variant: "secondary",
+                        "text-color": "primary",
+                        "border-color": "primary",
+                        onClick: y
+                      }, null, 8, ["label", "onClick"])
+                    ]),
+                    _: 1
+                  }, 8, ["categorized-items", "initial-value"])
+                ]),
+                default: p(() => [
+                  a("div", oo, [
+                    a("div", to, S(n(t)("menu.cooking_guide.dialog.sections.apply_product.products_linked", {
+                      count: M.value
+                    })), 1),
+                    a("div", no, [
+                      l(ne, {
+                        modelValue: Y.value,
+                        "onUpdate:modelValue": o[3] || (o[3] = (y) => Y.value = y),
+                        placeholder: n(t)("menu.cooking_guide.dialog.sections.apply_product.search")
+                      }, null, 8, ["modelValue", "placeholder"])
+                    ])
+                  ]),
+                  (g(!0), E(z, null, Q(ue.value, (y) => (g(), E("div", {
+                    key: y.id || ""
+                  }, [
+                    a("div", io, S(y.name), 1),
+                    (g(!0), E(z, null, Q(y.items, (J) => (g(), E("div", {
+                      key: J.itemId,
+                      class: "flex items-center"
+                    }, [
+                      a("div", ao, [
+                        a("span", lo, S((J.itemCode ? `${J.itemCode} ` : "") + J.itemName), 1)
+                      ]),
+                      a("div", so, [
+                        l(d, {
+                          icon: "edit",
+                          variant: "tertiary",
+                          onClick: () => i(J)
+                        }, null, 8, ["onClick"]),
+                        l(d, {
+                          icon: "delete",
+                          variant: "tertiary",
+                          onClick: () => v(J)
+                        }, null, 8, ["onClick"])
+                      ])
+                    ]))), 128))
+                  ]))), 128))
+                ]),
+                _: 1
+              }, 8, ["title"])) : ce("", !0)
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "header", "is-container", "is-container-props", "onOn:clickedAway"]),
+        l(ze, {
+          ref_key: "cookingGuideStepDialogRef",
+          ref: O,
+          onOnComplete: H
+        }, null, 512),
+        l(Xe, {
+          ref_key: "cookingGuideStepOverrideDialogRef",
+          ref: K,
+          onOnComplete: u
+        }, null, 512)
+      ], 64);
+    };
+  }
+});
+function co(G) {
+  return {
+    module: oe.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
+    operation: re.F_OPERATION_TYPE.create,
+    data: oe.FdoMenuCookingGuide.parse(G)
+  };
+}
+function mo(G) {
+  return {
+    module: oe.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
+    operation: re.F_OPERATION_TYPE.update,
+    data: oe.FdoMenuCookingGuide.parse(G)
+  };
+}
+function po(G) {
+  return {
+    module: oe.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
+    operation: re.F_OPERATION_TYPE.delete,
+    data: G._id
+  };
+}
+const go = {
+  class: "flex flex-1 justify-end"
+}, _o = {
+  class: "flex justify-end items-center"
+}, vo = {
+  class: "grow space-y-4"
+}, fo = {
+  class: "fm-typo-en-body-lg-600"
+}, bo = {
+  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, yo = {
+  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, Eo = /* @__PURE__ */ le({
+  __name: "CookingGuide",
+  setup(G) {
+    const {
+      t: _
+    } = se(), X = be(), r = F(() => X.breakpoints.value.xs), P = F(() => [{
+      accessorKey: "name",
+      header: () => _("menu.cooking_guide.table.columns.name"),
+      cell: (i) => i.getValue(),
+      enableSorting: !1
+    }, {
+      accessorKey: "bindings",
+      header: () => _("menu.cooking_guide.table.columns.products"),
+      cell: (i) => {
+        const u = i.getValue();
+        return _("menu.cooking_guide.table.columns.products", {
+          count: u.length
+        });
+      },
+      enableSorting: !1
+    }, {
+      accessorKey: "steps",
+      header: () => _("menu.cooking_guide.table.columns.steps"),
+      cell: (i) => {
+        const u = i.getValue();
+        return _("menu.cooking_guide.table.columns.steps", {
+          count: u.length
+        });
+      },
+      enableSorting: !1
+    }, {
+      accessorKey: "_id",
+      header: "",
+      size: 52,
+      meta: {
+        cellClass: "pl-16",
+        headerContentClass: "-mx-16"
+      },
+      enableSorting: !1,
+      cell: (i) => R("div", {
+        class: "flex justify-end"
+      }, [R(de.FmButton, {
+        icon: "delete",
+        textColor: "neutral-gray-400",
+        variant: "tertiary",
+        onClick: ae(() => {
+          k(i.row.original);
+        }, ["stop", "prevent"])
+      })])
+    }]), D = Ce(), C = F(() => O.checkMenuIsLoading()), A = F(() => D.categorizedItems), $ = F(() => D.state.menu.modules.cookingGuide), s = F(() => $.value.length > 0), O = we(Fe(ye())), c = V();
+    function w() {
+      var i;
+      C.value || (i = c.value) == null || i.showModal();
+    }
+    function q(i) {
+      var u;
+      C.value || (u = c.value) == null || u.showModal(i);
+    }
+    async function H(i) {
+      const u = i._id ? mo(i) : co(i);
+      await O.updateMenu(u, i.name);
+    }
+    const j = ke();
+    async function k(i) {
+      let u = [R("span", _("menu.cooking_guide.dialogs.remove.message.prefix")), R("span", {
+        class: "fm-typo-en-body-lg-600"
+      }, i.name), R("span", "?")];
+      i.bindings.length && (u = [R("span", _("menu.cooking_guide.dialogs.remove.message.products_using")), R("span", {
+        class: "fm-typo-en-body-lg-600"
+      }, i.bindings.length), R("span", _("menu.cooking_guide.dialogs.remove.message.products_count")), ...u]), j.open({
+        title: _("menu.cooking_guide.dialogs.remove.title"),
+        contentComponent: R("div", u),
+        primaryActions: {
+          text: _("menu.cooking_guide.actions.remove"),
+          close: !0,
+          variant: "destructive"
+        },
+        secondaryActions: {
+          text: _("menu.cooking_guide.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await O.updateMenu(po(i), i.name, !0);
+      });
+    }
+    const h = V(""), K = F(() => {
+      const i = h.value.toLowerCase();
+      return i ? $.value.filter((u) => u.name.toLowerCase().includes(i)) : $.value;
+    });
+    return (i, u) => {
+      const v = x("FmSearch"), t = x("FmTable"), f = x("FmButton"), L = x("FmListItem"), M = x("FmList");
+      return g(), T($e, {
+        heading: n(_)("menu.cooking_guide.title")
+      }, {
+        "append-heading": p(() => [a("div", go, [s.value ? (g(), T(he, {
+          key: 0,
+          disabled: C.value,
+          icon: "add",
+          label: n(_)("menu.cooking_guide.actions.add"),
+          variant: "primary",
+          onClick: u[0] || (u[0] = () => w())
+        }, null, 8, ["disabled", "label"])) : ce("", !0)])]),
+        default: p(() => [s.value ? (g(), E(z, {
+          key: 1
+        }, [a("div", _o, [l(v, {
+          modelValue: h.value,
+          "onUpdate:modelValue": u[1] || (u[1] = (I) => h.value = I),
+          autofocus: "",
+          class: "my-8 w-[320px] xs:w-full xs:px-16",
+          placeholder: n(_)("menu.cooking_guide.table.search.placeholder")
+        }, null, 8, ["modelValue", "placeholder"])]), r.value ? (g(), T(M, {
+          key: 1,
+          class: "w-full px-16 flex-1 min-h-0 overflow-scroll pb-64",
+          separator: ""
+        }, {
+          default: p(() => [(g(!0), E(z, null, Q(K.value, (I) => (g(), T(L, {
+            key: I._id,
+            label: I.name,
+            style: {
+              padding: "12px 0 !important"
+            },
+            onClick: () => q(I)
+          }, {
+            default: p(() => [a("div", vo, [a("div", fo, S(I.name), 1), a("div", null, [a("div", bo, S(n(_)("menu.cooking_guide.table.mobile.products_linked", {
+              count: I.bindings.length
+            })), 1), a("div", yo, S(n(_)("menu.cooking_guide.table.columns.steps", {
+              count: I.steps.length
+            })), 1)])]), l(f, {
+              disabled: C.value,
+              icon: "delete",
+              variant: "tertiary",
+              "text-color": "neutral-gray-400",
+              onClick: ae(() => k(I), ["stop"])
+            }, null, 8, ["disabled", "onClick"])]),
+            _: 2
+          }, 1032, ["label", "onClick"]))), 128))]),
+          _: 1
+        })) : (g(), T(xe, {
+          key: 0
+        }, {
+          default: p(() => [l(t, {
+            "column-defs": P.value,
+            loading: C.value,
+            "page-size": $.value.length,
+            "row-data": $.value,
+            "search-value": h.value,
+            shrinkAt: !1,
+            "hide-footer": "",
+            "pin-header-row": "",
+            onRowClick: u[2] || (u[2] = (I) => q(I.original))
+          }, null, 8, ["column-defs", "loading", "page-size", "row-data", "search-value"])]),
+          _: 1
+        }))], 64)) : (g(), T(n(Ve), {
+          key: 0,
+          action: {
+            text: n(_)("menu.cooking_guide.empty.action"),
+            callback: () => w()
+          },
+          subtitle: n(_)("menu.cooking_guide.empty.subtitle"),
+          title: n(_)("menu.cooking_guide.empty.title")
+        }, null, 8, ["action", "subtitle", "title"])), l(ro, {
+          ref_key: "cookingGuideDialogRef",
+          ref: c,
+          "categorized-items": A.value,
+          onOnSave: H
+        }, null, 8, ["categorized-items"])]),
+        _: 1
+      }, 8, ["heading"]);
+    };
+  }
+});
+export {
+  Eo as default
+};