@feedmepos/mf-menu-portal 1.0.4-dev.2 → 1.0.4-dev.4

package/dist/Recipe-Ddx31csF.js

@@ -0,0 +1,388 @@
+import { defineComponent as ae, computed as c, ref as D, shallowRef as X, h as ke, withModifiers as Y, onUnmounted as _e, resolveComponent as y, openBlock as r, createBlock as h, unref as n, withCtx as _, createElementBlock as b, toDisplayString as F, Fragment as Z, createElementVNode as m, withDirectives as he, createVNode as d, renderList as xe, createCommentVNode as V, mergeProps as we } from "vue";
+import { useI18n as Ce } from "@feedmepos/mf-common";
+import { useDialog as Fe, useBreakpoints as Be, components as ee, FmButtonVariant as Se } from "@feedmepos/ui-library";
+import { _ as Ve } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { _ as $e } from "./BindingLinkDialog.vue_vue_type_script_setup_true_lang-BZVQRyRI.js";
+import { _ as te } from "./BindingTable.vue_vue_type_script_setup_true_lang-D3CmOOPY.js";
+import { _ as Ae } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
+import { _ as Ue } from "./ListCountTag.vue_vue_type_script_setup_true_lang-0bjk8Aly.js";
+import { u as Ie } from "./useActionFeedback-Dm2HDa_2.js";
+import { u as Me } from "./useEditorValidation-Ctef5Bxt.js";
+import { b as De, u as Ee, a as Te } from "./provide-CDmXzkhz.js";
+const qe = {
+  key: 0,
+  class: "flex-1 flex justify-between gap-8 pl-8"
+}, ze = {
+  key: 0,
+  role: "alert",
+  class: "text-fm-color-typo-secondary"
+}, Le = {
+  key: 1,
+  class: "text-fm-color-typo-secondary"
+}, Ne = { class: "flex justify-end items-center" }, Re = { class: "w-[320px] xs:w-full xs:px-16 xs:mt-8" }, je = {
+  key: 1,
+  class: "flex-1 min-h-0 overflow-scroll divide-y divide-fm-color-neutral-gray-100 pb-64"
+}, Pe = ["onClick"], Qe = { class: "min-w-0 flex-1" }, Ke = { class: "fm-typo-en-body-lg-600 mb-4 break-words" }, Oe = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary break-words" }, Ge = {
+  key: 2,
+  class: "fixed right-16 bottom-[72px] z-[100]"
+}, He = { class: "fm-typo-en-title-md-600" }, Je = { class: "pt-8 space-y-40" }, We = { class: "flex flex-row gap-16" }, Xe = { class: "flex gap-8 items-center justify-start" }, Ye = /* @__PURE__ */ ae({
+  __name: "RecipeList",
+  props: {
+    sdk: {}
+  },
+  setup(E) {
+    const f = E, T = {
+      mounted: (e, t) => {
+        var o;
+        return (o = e.querySelector("input")) == null ? void 0 : o.setAttribute("aria-label", t.value);
+      },
+      updated: (e, t) => {
+        var o;
+        return (o = e.querySelector("input")) == null ? void 0 : o.setAttribute("aria-label", t.value);
+      }
+    }, { t: a } = Ce(), B = De(), ne = Fe(), { run: q } = Ie(), p = Ee(f.sdk.recipe.list), u = c(
+      () => p.value.status === "ready" ? p.value.value : null
+    ), ie = c(() => {
+      var e;
+      return ((e = u.value) == null ? void 0 : e.query) ?? "";
+    }), { breakpoints: le } = Be(), $ = c(() => le.value.xs), se = c(() => {
+      var e;
+      return [...((e = u.value) == null ? void 0 : e.rows) ?? []];
+    }), k = D(!1), A = D(!1), S = D("recipe"), s = X(
+      f.sdk.recipe.editor()
+    ), x = X(
+      s.value.get()
+    );
+    let U = s.value.subscribe(
+      (e) => {
+        x.value = e;
+      }
+    );
+    const l = c(
+      () => x.value.status === "ready" ? x.value.value : null
+    ), v = Me(() => s.value), z = c(
+      () => l.value ? v.issue(l.value.fieldIssues, "name") ?? l.value.nameIssue : null
+    ), L = c(
+      () => l.value ? v.issue(l.value.fieldIssues, "contains") ?? l.value.containsIssue : null
+    );
+    function N(e) {
+      var o;
+      const t = ((o = l.value) == null ? void 0 : o.fieldIssues) ?? {};
+      return (e ?? []).map((w) => ({
+        ...w,
+        amountIssue: v.issue(t, `amount:${w.id}`) ?? w.amountIssue
+      }));
+    }
+    function R(e, t) {
+      v.field(
+        `amount:${e}`,
+        (o) => s.value.setBindingAmount(e, o)
+      )["onUpdate:modelValue"](t);
+    }
+    function j(e) {
+      U(), s.value.dispose(), s.value = f.sdk.recipe.editor(e), x.value = s.value.get(), U = s.value.subscribe(
+        (t) => {
+          x.value = t;
+        }
+      );
+    }
+    function I() {
+      var e;
+      ((e = u.value) == null ? void 0 : e.create.state) === "allowed" && (j(), k.value = !0);
+    }
+    function P(e) {
+      j(e.id), k.value = !0;
+    }
+    async function oe() {
+      (await q(
+        () => v.submit(() => s.value.submit()),
+        {
+          showLoading: () => {
+            var t;
+            return ((t = l.value) == null ? void 0 : t.status) === "submitting";
+          },
+          successMessage: (t) => a("menu.recipe.form.saved", { name: t.name })
+        }
+      )).kind === "success" && (k.value = !1);
+    }
+    function ue() {
+    }
+    function Q(e) {
+      e.remove.state === "allowed" && ne.open({
+        title: a("menu.common.dialog.remove.recipe.title"),
+        message: a("menu.common.dialog.remove.recipe.message", {
+          name: e.name
+        }),
+        primaryActions: {
+          text: a("menu.common.actions.remove"),
+          close: !0,
+          variant: Se.Destructive
+        },
+        secondaryActions: {
+          text: a("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await q(() => f.sdk.recipe.remove(e.id), {
+          successMessage: a("menu.recipe.form.removed", { name: e.name })
+        });
+      });
+    }
+    function re(e) {
+      const t = e.targetName ?? a("menu.recipe.table.ingredient.missing");
+      return e.kind === "recipe" ? a("menu.recipe.table.ingredient.recipe", {
+        name: t,
+        amount: e.amount
+      }) : a("menu.recipe.table.ingredient.sku", {
+        name: t,
+        amount: e.amount,
+        unit: e.unitSymbol ?? a("menu.recipe.table.ingredient.missing")
+      });
+    }
+    function K(e) {
+      return e.map(re).join(a("menu.recipe.table.ingredient.separator"));
+    }
+    const de = c(() => [
+      {
+        accessorKey: "name",
+        header: () => a("menu.recipe.table.columns.name"),
+        enableSorting: !1
+      },
+      {
+        accessorKey: "ingredients",
+        header: () => a("menu.recipe.table.columns.ingredients"),
+        enableSorting: !1,
+        cell: (e) => K(e.row.original.ingredients)
+      },
+      {
+        id: "actions",
+        size: 52,
+        meta: { cellClass: "pl-16", headerContentClass: "-mx-16" },
+        header: "",
+        cell: (e) => ke(ee.FmButton, {
+          icon: "delete",
+          variant: "tertiary",
+          textColor: "neutral-gray-400",
+          disabled: e.row.original.remove.state !== "allowed",
+          "aria-label": a("menu.recipe.table.delete.accessibility_label", {
+            name: e.row.original.name
+          }),
+          onClick: Y(
+            () => Q(e.row.original),
+            ["stop", "prevent"]
+          )
+        })
+      }
+    ]), O = c(
+      () => {
+        var e;
+        return ((e = l.value) == null ? void 0 : e.submit.state) !== "allowed";
+      }
+    ), ce = c(
+      () => {
+        var e, t;
+        return S.value === "recipe" ? ((e = l.value) == null ? void 0 : e.recipeCandidates) ?? [] : ((t = l.value) == null ? void 0 : t.ingredientCandidates) ?? [];
+      }
+    ), me = c(
+      () => a("menu.inventory.binding.link.title", {
+        type: S.value === "recipe" ? a("menu.inventory.binding.link.recipe") : a("menu.inventory.binding.link.ingredient")
+      })
+    );
+    function G(e) {
+      S.value = e, s.value.setBindingCandidateQuery(""), A.value = !0;
+    }
+    return _e(() => {
+      U(), s.value.dispose();
+    }), (e, t) => {
+      const o = y("FmButton"), w = y("FmCircularProgress"), pe = y("FmSearch"), ve = y("FmTable"), be = y("FmTextField"), fe = y("FmFormGroup"), ge = y("FmSideSheet");
+      return r(), h(Ae, {
+        "data-visual-root": "recipe",
+        heading: n(a)("menu.recipe.title")
+      }, {
+        "append-heading": _(() => [
+          n(p).status === "ready" && u.value ? (r(), b("div", qe, [
+            d(Ue, {
+              value: u.value.totalCount
+            }, null, 8, ["value"]),
+            u.value.totalCount > 0 && !$.value ? (r(), h(o, {
+              key: 0,
+              disabled: u.value.create.state !== "allowed",
+              label: n(a)("menu.recipe.actions.add"),
+              "prepend-icon": "add",
+              onClick: I
+            }, null, 8, ["disabled", "label"])) : V("", !0)
+          ])) : V("", !0)
+        ]),
+        default: _(() => {
+          var H;
+          return [
+            n(p).status === "error" ? (r(), b("p", ze, F(n(B)(n(p).error.message)), 1)) : n(p).status === "unavailable" ? (r(), b("p", Le, F(n(B)(n(p).reason)), 1)) : n(p).status === "loading" ? (r(), h(w, { key: 2 })) : u.value && u.value.totalCount === 0 ? (r(), h(n(Ve), {
+              key: 3,
+              action: { text: n(a)("menu.recipe.empty.action"), callback: I },
+              title: n(a)("menu.recipe.empty.title"),
+              subtitle: n(a)("menu.recipe.empty.subtitle")
+            }, null, 8, ["action", "title", "subtitle"])) : u.value ? (r(), b(Z, { key: 4 }, [
+              m("div", Ne, [
+                m("div", Re, [
+                  he(d(pe, {
+                    autofocus: "",
+                    "aria-label": n(a)("menu.recipe.table.search.accessibility_label"),
+                    class: "mb-8",
+                    "model-value": ie.value,
+                    placeholder: n(a)("menu.recipe.table.search.placeholder"),
+                    "onUpdate:modelValue": f.sdk.recipe.search
+                  }, null, 8, ["aria-label", "model-value", "placeholder", "onUpdate:modelValue"]), [
+                    [T, n(a)("menu.recipe.table.search.accessibility_label")]
+                  ])
+                ])
+              ]),
+              $.value ? (r(), b("div", je, [
+                (r(!0), b(Z, null, xe(u.value.rows, (i) => (r(), b("div", {
+                  key: i.id,
+                  class: "py-12 px-16 flex space-x-8 items-center cursor-pointer",
+                  onClick: (g) => P(i)
+                }, [
+                  m("div", Qe, [
+                    m("p", Ke, F(i.name), 1),
+                    m("p", Oe, F(K(i.ingredients)), 1)
+                  ]),
+                  d(o, {
+                    class: "shrink-0",
+                    "aria-label": n(a)("menu.recipe.table.delete.accessibility_label", {
+                      name: i.name
+                    }),
+                    disabled: i.remove.state !== "allowed",
+                    "prepend-icon": "delete",
+                    "text-color": "neutral-gray-400",
+                    variant: "tertiary",
+                    onClick: Y((g) => Q(i), ["stop"])
+                  }, null, 8, ["aria-label", "disabled", "onClick"])
+                ], 8, Pe))), 128))
+              ])) : (r(), h(ve, {
+                key: 0,
+                "column-defs": de.value,
+                "hide-footer": "",
+                "page-size": Math.max(u.value.rows.length, 1),
+                "pin-header-row": "",
+                "row-data": se.value,
+                "shrink-at": !1,
+                onRowClick: t[0] || (t[0] = (i) => P(i.original))
+              }, null, 8, ["column-defs", "page-size", "row-data"])),
+              u.value.totalCount > 0 && $.value ? (r(), b("div", Ge, [
+                d(o, {
+                  disabled: u.value.create.state !== "allowed",
+                  label: n(a)("menu.recipe.actions.add"),
+                  "prepend-icon": "add",
+                  variant: "fab",
+                  onClick: I
+                }, null, 8, ["disabled", "label"])
+              ])) : V("", !0)
+            ], 64)) : V("", !0),
+            d(ge, {
+              modelValue: k.value,
+              "onUpdate:modelValue": t[6] || (t[6] = (i) => k.value = i),
+              "is-container": n(ee).FmForm,
+              "is-container-props": { onValidationSuccess: oe },
+              "max-width": 560,
+              "onOn:clickedAway": ue
+            }, {
+              "side-sheet-header": _(() => {
+                var i;
+                return [
+                  m("p", He, F(((i = l.value) == null ? void 0 : i.mode) === "update" ? n(a)("menu.recipe.update") : n(a)("menu.recipe.add")), 1)
+                ];
+              }),
+              "side-sheet-footer": _(() => {
+                var i, g;
+                return [
+                  m("div", Xe, [
+                    d(o, {
+                      disabled: ((i = l.value) == null ? void 0 : i.submit.state) !== "allowed",
+                      label: ((g = l.value) == null ? void 0 : g.mode) === "update" ? n(a)("menu.common.actions.update") : n(a)("menu.common.actions.add"),
+                      size: "lg",
+                      type: "submit",
+                      variant: "primary"
+                    }, null, 8, ["disabled", "label"]),
+                    d(o, {
+                      label: n(a)("menu.common.actions.cancel"),
+                      size: "lg",
+                      variant: "tertiary",
+                      onClick: t[5] || (t[5] = (M) => k.value = !1)
+                    }, null, 8, ["label"])
+                  ])
+                ];
+              }),
+              default: _(() => {
+                var i, g, M;
+                return [
+                  m("div", Je, [
+                    m("div", We, [
+                      d(be, we({
+                        autofocus: "",
+                        class: "flex-2",
+                        "error-messages": z.value ? [n(B)(z.value)] : [],
+                        label: n(a)("menu.recipe.columns.name"),
+                        "model-value": ((i = l.value) == null ? void 0 : i.name) ?? ""
+                      }, n(v).field("name", s.value.setName)), null, 16, ["error-messages", "label", "model-value"])
+                    ]),
+                    d(fe, {
+                      "model-value": [
+                        ...((g = l.value) == null ? void 0 : g.recipeBindings) ?? [],
+                        ...((M = l.value) == null ? void 0 : M.ingredientBindings) ?? []
+                      ],
+                      "error-messages": L.value ? [n(B)(L.value)] : []
+                    }, {
+                      default: _(() => {
+                        var J, W;
+                        return [
+                          d(te, {
+                            kind: "recipe",
+                            disabled: O.value,
+                            rows: N((J = l.value) == null ? void 0 : J.recipeBindings),
+                            onLink: t[1] || (t[1] = (C) => G("recipe")),
+                            onUpdateAmount: R
+                          }, null, 8, ["disabled", "rows"]),
+                          d(te, {
+                            kind: "ingredient",
+                            disabled: O.value,
+                            rows: N((W = l.value) == null ? void 0 : W.ingredientBindings),
+                            "show-inert-deduct": "",
+                            onLink: t[2] || (t[2] = (C) => G("ingredient")),
+                            onRemove: t[3] || (t[3] = (C) => (n(v).touch("contains"), s.value.removeIngredientBinding(C))),
+                            onUpdateAmount: R,
+                            onUpdateMeasurement: t[4] || (t[4] = (C, ye) => s.value.setBindingMeasurement(C, ye))
+                          }, null, 8, ["disabled", "rows"])
+                        ];
+                      }),
+                      _: 1
+                    }, 8, ["model-value", "error-messages"])
+                  ])
+                ];
+              }),
+              _: 1
+            }, 8, ["modelValue", "is-container", "is-container-props"]),
+            d($e, {
+              modelValue: A.value,
+              "onUpdate:modelValue": t[7] || (t[7] = (i) => A.value = i),
+              candidates: ce.value,
+              query: ((H = l.value) == null ? void 0 : H.bindingCandidateQuery) ?? "",
+              title: me.value,
+              "onUpdate:query": t[8] || (t[8] = (i) => s.value.setBindingCandidateQuery(i)),
+              onSubmit: t[9] || (t[9] = (i) => (n(v).touch("contains"), s.value.linkBindings(S.value, i)))
+            }, null, 8, ["modelValue", "candidates", "query", "title"])
+          ];
+        }),
+        _: 1
+      }, 8, ["heading"]);
+    };
+  }
+}), dt = /* @__PURE__ */ ae({
+  __name: "Recipe",
+  setup(E) {
+    const f = Te();
+    return (T, a) => (r(), h(Ye, { sdk: n(f) }, null, 8, ["sdk"]));
+  }
+});
+export {
+  dt as default
+};