@feedmepos/mf-inventory-portal 0.0.23-dev.30 → 0.0.23-dev.4

package/dist/FmInventoryTableToolbar.vue_vue_type_script_setup_true_lang-BhdcqRh-.js

@@ -0,0 +1,436 @@
+import { reactive as W, onUnmounted as q, defineComponent as T, ref as H, computed as _, resolveComponent as k, openBlock as o, createElementBlock as w, Fragment as V, createElementVNode as f, normalizeClass as D, unref as g, toDisplayString as R, createCommentVNode as b, createBlock as d, withCtx as I, createVNode as M, renderList as S, renderSlot as G, Teleport as z, watch as J, mergeModels as K, useModel as P } from "vue";
+import { useBreakpoints as Y } from "@feedmepos/ui-library";
+import { u as j } from "./app-KnSMkJBV.js";
+import { useCoreStore as X, useI18n as Q } from "@feedmepos/mf-common";
+import { c as O } from "./date2-CIeUqUIc.js";
+const N = W({});
+function E() {
+  const v = `${Math.random()}`, l = new ResizeObserver((s) => {
+    const t = s.map((e) => e.target.scrollHeight).reduce((e, c) => e + c);
+    N[v] = t;
+  }), m = (s) => {
+    const t = s.el;
+    t && l.observe(t);
+  }, a = (s) => {
+    const t = s.el;
+    t && l.unobserve(t);
+  };
+  return q(() => {
+    l.disconnect(), delete N[v];
+  }), {
+    get tableHeight() {
+      return {
+        height: `calc(100dvh - ${Object.values(N).reduce((e, c) => e + c, 0) + 80}px)`
+      };
+    },
+    onMounted: m,
+    onUnmounted: a
+  };
+}
+const Z = {
+  key: 0,
+  class: /* @__PURE__ */ D(["text-fm-color-typo-secondary fm-typo-en-body-sm-400"])
+}, ee = { class: "bg-white flex-1" }, ne = { class: "fixed bottom-96 right-16" }, ke = /* @__PURE__ */ T({
+  __name: "SingleColumnLayout",
+  props: {
+    actions: { default: () => [] },
+    title: { default: "Title" },
+    description: {},
+    showBackButton: { type: Boolean },
+    defaultPadding: { type: Boolean },
+    breadcrumbs: { default: () => [] },
+    usingBusinessHelperText: {}
+  },
+  emits: ["click:action"],
+  setup(v, { emit: l }) {
+    const m = v, a = l, s = H(!1), t = _(() => m.actions.find((y) => y.isPrimary)), e = _(() => m.actions.filter((y) => !y.isPrimary)), c = _(
+      () => e.value.map(
+        (y) => ({
+          label: y.label,
+          value: y.value
+        })
+      )
+    ), { breakpoints: p } = Y(), h = _(() => p.value.xs || p.value.sm), L = j(), n = _(() => L.businessLevel), B = E();
+    return (y, u) => {
+      const x = k("FmButton"), U = k("FmMenuItem"), i = k("FmMenu"), F = k("FmCollapsibleTabs"), C = k("FmBottomSheet");
+      return o(), w(V, null, [
+        f("div", {
+          class: D([
+            "flex flex-col w-full bg-white h-full",
+            {
+              "gap-12": h.value
+            }
+          ])
+        }, [
+          f("div", {
+            onVnodeMounted: u[5] || (u[5] = //@ts-ignore
+            (...r) => g(B).onMounted && g(B).onMounted(...r)),
+            class: D([
+              "flex gap-8 items-center",
+              {
+                "p-12 border-b-[1px] border-b-fm-color-neutral-gray-100": h.value,
+                "px-24 py-16": !h.value
+              }
+            ])
+          }, [
+            f("div", {
+              class: D([
+                "flex-1 flex flex-col gap-4 fm-typo-en-title-md-600 bg-white",
+                {
+                  "py-12": h.value
+                }
+              ])
+            }, [
+              f("div", null, R(y.title), 1),
+              y.usingBusinessHelperText && n.value ? (o(), w("div", Z, R(y.usingBusinessHelperText), 1)) : b("", !0)
+            ], 2),
+            h.value ? (o(), w(V, { key: 0 }, [
+              e.value.length ? (o(), d(x, {
+                key: 0,
+                variant: "tertiary",
+                "prepend-icon": "more_vert",
+                onClick: u[0] || (u[0] = (r) => s.value = !0)
+              })) : b("", !0)
+            ], 64)) : (o(), w(V, { key: 1 }, [
+              e.value[0] ? (o(), d(x, {
+                key: e.value[0].value,
+                label: e.value[0].label,
+                "prepend-icon": e.value[0].prependIcon,
+                variant: e.value[0].variant,
+                "bg-color": e.value[0].variant ? void 0 : "neutral-gray-100",
+                "text-color": e.value[0].variant ? void 0 : "neutral-gray-400",
+                onClick: u[1] || (u[1] = (r) => a("click:action", e.value[0].value))
+              }, null, 8, ["label", "prepend-icon", "variant", "bg-color", "text-color"])) : b("", !0),
+              e.value[1] ? (o(), d(x, {
+                key: e.value[1].value,
+                label: e.value[1].label,
+                "prepend-icon": e.value[1].prependIcon,
+                variant: e.value[1].variant,
+                "bg-color": e.value[1].variant ? void 0 : "neutral-gray-100",
+                "text-color": e.value[1].variant ? void 0 : "neutral-gray-400",
+                onClick: u[2] || (u[2] = (r) => a("click:action", e.value[1].value))
+              }, null, 8, ["label", "prepend-icon", "variant", "bg-color", "text-color"])) : b("", !0),
+              e.value.length === 3 ? (o(), d(x, {
+                key: e.value[2].value,
+                label: e.value[2].label,
+                "prepend-icon": e.value[2].prependIcon,
+                variant: e.value[2].variant,
+                "bg-color": e.value[2].variant ? void 0 : "neutral-gray-100",
+                "text-color": e.value[2].variant ? void 0 : "neutral-gray-400",
+                onClick: u[3] || (u[3] = (r) => a("click:action", e.value[2].value))
+              }, null, 8, ["label", "prepend-icon", "variant", "bg-color", "text-color"])) : b("", !0),
+              e.value.length > 3 ? (o(), d(i, { key: 3 }, {
+                "menu-button": I(() => [
+                  M(x, {
+                    label: "More",
+                    "append-icon": "expand_more",
+                    "bg-color": "neutral-gray-100",
+                    "text-color": "neutral-gray-400"
+                  })
+                ]),
+                default: I(() => [
+                  (o(!0), w(V, null, S(e.value.slice(2), (r, $) => (o(), d(U, {
+                    key: $,
+                    label: r.label,
+                    onClick: (pe) => a("click:action", r.value)
+                  }, null, 8, ["label", "onClick"]))), 128))
+                ]),
+                _: 1
+              })) : b("", !0),
+              t.value ? (o(), d(x, {
+                key: 4,
+                label: t.value.label,
+                "prepend-icon": t.value.prependIcon,
+                onClick: u[4] || (u[4] = (r) => a("click:action", t.value.value))
+              }, null, 8, ["label", "prepend-icon"])) : b("", !0)
+            ], 64))
+          ], 2),
+          f("div", ee, [
+            G(y.$slots, "default")
+          ])
+        ], 2),
+        t.value && h.value ? (o(), d(z, {
+          key: 0,
+          to: "body"
+        }, [
+          f("div", ne, [
+            M(x, {
+              label: t.value.label,
+              "prepend-icon": t.value.prependIcon,
+              onClick: u[6] || (u[6] = (r) => a("click:action", t.value.value)),
+              variant: "fab"
+            }, null, 8, ["label", "prepend-icon"])
+          ])
+        ])) : b("", !0),
+        e.value.length ? (o(), d(z, {
+          key: 1,
+          to: "body"
+        }, [
+          M(C, {
+            "dismiss-away": "",
+            "no-header": "",
+            modelValue: s.value,
+            "onUpdate:modelValue": u[8] || (u[8] = (r) => s.value = r)
+          }, {
+            default: I(() => [
+              M(F, {
+                class: "pb-8",
+                items: c.value,
+                "onUpdate:modelValue": u[7] || (u[7] = (r) => (a("click:action", r), s.value = !1))
+              }, null, 8, ["items"])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])) : b("", !0)
+      ], 64);
+    };
+  }
+}), te = { class: "inline-flex" }, oe = { class: "inline-flex rounded-md items-center gap-4 justify-center h-[30px] px-8 py-4 bg-fm-color-neutral-gray-100 cursor-pointer text-fm-color-neutral-gray-400" }, le = { class: "fm-typo-en-body-md-600 select-none text-ellipsis overflow-hidden whitespace-nowrap" }, ae = { class: "relative" }, se = { class: "sticky top-0 py-8 bg-white translate-y-[-12px]" }, ue = /* @__PURE__ */ T({
+  __name: "ChangeLocationComponent",
+  props: {
+    showBusiness: { type: Boolean }
+  },
+  setup(v) {
+    const l = j(), m = X(), a = _(() => {
+      var n;
+      return (n = m.currentBusiness.value) == null ? void 0 : n.name;
+    }), { t: s } = Q(), t = H(""), e = _({
+      get() {
+        return l.businessLevel;
+      },
+      set(n) {
+        l.businessLevel = n;
+      }
+    }), c = _(
+      () => l.locations.map((n) => ({ label: n.name, value: n.dbName, type: n.type })).filter(
+        (n) => t.value ? n.label.toLocaleLowerCase().includes(t.value.toLocaleLowerCase()) : !0
+      )
+    ), p = _(
+      () => c.value.filter((n) => n.type === "restaurant")
+    ), h = _(
+      () => c.value.filter((n) => n.type === "warehouse")
+    );
+    function L({ value: n }) {
+      e.value = !1, l.selectLocation(l.locations.find((B) => B.dbName === n));
+    }
+    return (n, B) => {
+      const y = k("FmIcon"), u = k("FmSearch"), x = k("FmMenuItem"), U = k("FmMenu");
+      return o(), w("div", te, [
+        M(U, { "close-on-click": !0 }, {
+          "menu-button": I(() => {
+            var i;
+            return [
+              f("div", oe, [
+                M(y, {
+                  name: n.showBusiness && e.value ? "store" : "storefront",
+                  size: "sm"
+                }, null, 8, ["name"]),
+                f("div", le, R(n.showBusiness && e.value ? a.value : ((i = g(l)._currentLocation) == null ? void 0 : i.name) ?? g(s)("inventory.common.noLocationSelected")), 1),
+                M(y, {
+                  name: "expand_more",
+                  size: "sm"
+                })
+              ])
+            ];
+          }),
+          default: I(() => [
+            f("div", ae, [
+              f("div", se, [
+                M(u, {
+                  "model-value": t.value,
+                  "onUpdate:modelValue": B[0] || (B[0] = (i) => t.value = i),
+                  placeholder: g(s)("inventory.common.table.toolbar.filterItems")
+                }, null, 8, ["model-value", "placeholder"])
+              ]),
+              f("div", null, [
+                n.showBusiness ? (o(), d(x, {
+                  key: 0,
+                  "model-value": e.value,
+                  label: a.value,
+                  sublabel: "Business",
+                  onClick: B[1] || (B[1] = (i) => e.value = !0)
+                }, null, 8, ["model-value", "label"])) : b("", !0),
+                (o(!0), w(V, null, S(p.value, (i) => {
+                  var F;
+                  return o(), d(x, {
+                    key: i.value,
+                    "model-value": !e.value && ((F = g(l)._currentLocation) == null ? void 0 : F.dbName) === i.value,
+                    label: i.label,
+                    sublabel: "Restaurant",
+                    onClick: (C) => L(i),
+                    onVnodeMounted: (C) => {
+                      var r, $;
+                      return !e.value && ((r = g(l)._currentLocation) == null ? void 0 : r.dbName) === i.value && (($ = C.el) == null || $.scrollIntoView({ behavior: "smooth", block: "center" })), void 0;
+                    }
+                  }, null, 8, ["model-value", "label", "onClick", "onVnodeMounted"]);
+                }), 128)),
+                (o(!0), w(V, null, S(h.value, (i) => {
+                  var F;
+                  return o(), d(x, {
+                    key: i.value,
+                    "model-value": !e.value && ((F = g(l)._currentLocation) == null ? void 0 : F.dbName) === i.value,
+                    label: i.label,
+                    sublabel: "Warehouse",
+                    onClick: (C) => L(i),
+                    onVnodeMounted: (C) => {
+                      var r, $;
+                      return !e.value && ((r = g(l)._currentLocation) == null ? void 0 : r.dbName) === i.value && (($ = C.el) == null || $.scrollIntoView({ behavior: "smooth", block: "center" })), void 0;
+                    }
+                  }, null, 8, ["model-value", "label", "onClick", "onVnodeMounted"]);
+                }), 128)),
+                !n.showBusiness && !p.value.length && !h.value.length ? (o(), d(x, {
+                  key: 1,
+                  disabled: "",
+                  label: g(s)("inventory.common.noResultFound")
+                }, null, 8, ["label"])) : b("", !0)
+              ])
+            ])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+function xe() {
+  const v = /* @__PURE__ */ new Date();
+  return v.setDate(v.getDate() - 15), {
+    start: v,
+    end: /* @__PURE__ */ new Date()
+  };
+}
+function A(v = 15) {
+  const l = /* @__PURE__ */ new Date();
+  l.setDate(l.getDate() - v);
+  const m = l, a = /* @__PURE__ */ new Date();
+  return {
+    startDate: `${O(m)}`,
+    endDate: `${O(a)}`
+  };
+}
+const re = { class: "inline-flex rounded-md items-center gap-4 justify-center h-[30px] px-8 py-4 bg-fm-color-neutral-gray-100 cursor-pointer text-fm-color-neutral-gray-400" }, ie = { class: "fm-typo-en-body-md-600 select-none text-ellipsis overflow-hidden whitespace-nowrap" }, ce = /* @__PURE__ */ T({
+  __name: "FmDateRangePickerChip",
+  props: {
+    modelValue: { default: (v) => v.modelValue ?? A() }
+  },
+  emits: ["update:modelValue"],
+  setup(v, { emit: l }) {
+    const m = l, a = H(A());
+    J(a, (t) => {
+      m("update:modelValue", t);
+    });
+    const s = _(() => {
+      const { startDate: t, endDate: e } = a.value;
+      return !t && !e ? "" : `${t} - ${e}`;
+    });
+    return (t, e) => {
+      const c = k("FmIcon"), p = k("FmDateRangePicker");
+      return o(), d(p, {
+        "show-predefined-range": "",
+        modelValue: a.value,
+        "onUpdate:modelValue": e[0] || (e[0] = (h) => a.value = h),
+        "start-label": "",
+        "end-label": ""
+      }, {
+        "trigger-button": I(() => [
+          f("div", re, [
+            M(c, {
+              name: "calendar_month",
+              size: "sm"
+            }),
+            f("div", ie, R(s.value), 1)
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), de = { class: "flex-1 w-full flex items-center gap-4" }, ve = {
+  key: 0,
+  class: "flex-1"
+}, me = { class: "w-full max-w-[343px] xs:max-w-[unset] sm:max-w-[unset]" }, _e = /* @__PURE__ */ T({
+  __name: "FmInventoryTableToolbar",
+  props: /* @__PURE__ */ K({
+    dateRangeQuery: { type: Boolean },
+    changeLocation: { type: Boolean },
+    searchable: { type: Boolean },
+    actions: {},
+    usingBusinessHelperText: {},
+    showBusiness: { type: Boolean }
+  }, {
+    search: {},
+    searchModifiers: {},
+    dateRange: {},
+    dateRangeModifiers: {}
+  }),
+  emits: ["update:search", "update:dateRange"],
+  setup(v) {
+    const { breakpoints: l } = Y(), m = _(() => l.value.xs || l.value.sm), a = P(v, "search"), s = P(v, "dateRange"), { t } = Q(), e = E();
+    return (c, p) => {
+      const h = k("FmTextField"), L = k("FmButton");
+      return o(), w("div", {
+        class: "flex flex-col gap-8",
+        onVnodeMounted: p[2] || (p[2] = //@ts-ignore
+        (...n) => g(e).onMounted && g(e).onMounted(...n)),
+        onVnodeUnmounted: p[3] || (p[3] = //@ts-ignore
+        (...n) => g(e).onUnmounted && g(e).onUnmounted(...n))
+      }, [
+        f("div", {
+          class: D([
+            "flex gap-8 items-center",
+            {
+              "px-8 flex-col-reverse h-[unset]": m.value,
+              "h-48": !m.value
+            }
+          ])
+        }, [
+          c.changeLocation || c.dateRangeQuery ? (o(), w("div", {
+            key: 0,
+            class: D([
+              "flex gap-8 items-center",
+              {
+                "w-full overflow-x-auto": m.value
+              }
+            ])
+          }, [
+            c.changeLocation ? (o(), d(ue, {
+              key: 0,
+              "show-business": c.showBusiness
+            }, null, 8, ["show-business"])) : b("", !0),
+            c.dateRangeQuery ? (o(), d(ce, {
+              key: 1,
+              "model-value": s.value,
+              "onUpdate:modelValue": p[0] || (p[0] = (n) => s.value = n)
+            }, null, 8, ["model-value"])) : b("", !0)
+          ], 2)) : b("", !0),
+          f("div", de, [
+            m.value ? b("", !0) : (o(), w("div", ve)),
+            f("div", me, [
+              c.searchable ? (o(), d(h, {
+                key: 0,
+                "model-value": a.value,
+                "onUpdate:modelValue": p[1] || (p[1] = (n) => a.value = n),
+                "prepend-icon": "search",
+                placeholder: g(t)("inventory.common.table.toolbar.filterItems"),
+                class: "w-full"
+              }, null, 8, ["model-value", "placeholder"])) : b("", !0)
+            ]),
+            (o(!0), w(V, null, S(c.actions, (n, B) => (o(), d(L, {
+              key: B,
+              variant: "tertiary",
+              "prepend-icon": n.icon,
+              onClick: n.onClick
+            }, null, 8, ["prepend-icon", "onClick"]))), 128))
+          ])
+        ], 2)
+      ], 512);
+    };
+  }
+});
+export {
+  ke as _,
+  _e as a,
+  xe as b,
+  A as i,
+  E as u
+};