@feedmepos/mf-inventory-portal 1.2.64 → 1.2.66-dev.1

package/dist/SingleColumnLayout.vue_vue_type_script_setup_true_lang-mvRR4CrP.js

@@ -0,0 +1,254 @@
+import { defineComponent as H, resolveComponent as h, unref as A, openBlock as n, createElementBlock as c, renderSlot as I, createElementVNode as p, normalizeClass as C, createVNode as v, reactive as D, onUnmounted as R, ref as X, computed as $, Fragment as k, createTextVNode as Y, toDisplayString as T, createCommentVNode as _, createBlock as u, renderList as U, withCtx as x, Teleport as N } from "vue";
+import { useBreakpoints as G } from "@feedmepos/ui-library";
+import { useCoreStore as z, useI18n as J } from "@feedmepos/mf-common";
+import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Q = {
+  key: 0,
+  class: "group gap-8 inline-flex items-center relative select-none border-1 border-dashed rounded-md border-red-500 hover:border-opacity-30 transition-opacity"
+}, W = { class: "fm-typo-en-body-sm-400 justify-center flex items-center w-full" }, Z = /* @__PURE__ */ H({
+  __name: "FmAdminBadge",
+  props: {
+    class: { default: void 0 }
+  },
+  setup(b) {
+    const m = b, f = z();
+    return (r, d) => {
+      var a;
+      const i = h("FmIcon");
+      return (a = A(f).sessionUser.value) != null && a.role.isAdmin ? (n(), c("div", Q, [
+        I(r.$slots, "default", {}, void 0, !0),
+        p("div", {
+          class: C([
+            "fm-admin-badge",
+            "group-hover:opacity-20",
+            m.class,
+            {
+              absolute: !0,
+              "bottom-[-5px] right-[-8px] px-4 h-[25px] w-[25px] border-2 border-red-800": !0
+            }
+          ])
+        }, [
+          p("span", W, [
+            v(i, {
+              name: "support_agent",
+              size: "sm",
+              outline: ""
+            })
+          ])
+        ], 2)
+      ])) : I(r.$slots, "non-admin", { key: 1 }, void 0, !0);
+    };
+  }
+}), F = /* @__PURE__ */ K(Z, [["__scopeId", "data-v-643bdbae"]]), M = D({});
+function ee() {
+  const b = `${Math.random()}`, m = new ResizeObserver((d) => {
+    const i = d.map((a) => a.target.scrollHeight).reduce((a, t) => a + t);
+    M[b] = i;
+  }), f = (d) => {
+    const i = d.el;
+    i && m.observe(i);
+  }, r = (d) => {
+    const i = d.el;
+    i && m.unobserve(i);
+  };
+  return R(() => {
+    m.disconnect(), delete M[b];
+  }), {
+    get tableHeight() {
+      return {
+        height: `calc(100dvh - ${Object.values(M).reduce((a, t) => a + t, 0) + 80}px)`
+      };
+    },
+    onMounted: f,
+    onUnmounted: r
+  };
+}
+const te = {
+  key: 0,
+  class: /* @__PURE__ */ C(["text-fm-color-typo-secondary fm-typo-en-body-sm-400"])
+}, ne = { class: "bg-white flex-1" }, le = { class: "fixed bottom-96 right-16" }, S = 3, ue = /* @__PURE__ */ H({
+  __name: "SingleColumnLayout",
+  props: {
+    actions: { default: () => [] },
+    title: { default: "Title" },
+    description: {},
+    showBackButton: { type: Boolean },
+    defaultPadding: { type: Boolean },
+    breadcrumbs: { default: () => [] },
+    helperText: {}
+  },
+  emits: ["click:action"],
+  setup(b, { emit: m }) {
+    const f = b, r = m, { t: d } = J(), i = z(), a = X(!1), t = $(() => f.actions.find((o) => o.isPrimary)), y = $(() => f.actions.filter((o) => !o.isPrimary)), E = $(
+      () => y.value.filter((o) => {
+        var s;
+        return o.isAdminOnly ?? !1 ? (s = i.sessionUser.value) == null ? void 0 : s.role.isAdmin : !0;
+      }).map(
+        (o) => ({
+          label: `${o.label} ${o.isAdminOnly == !0 ? "(Admin only)" : ""}`,
+          value: o.value
+        })
+      )
+    ), { breakpoints: w } = G(), g = $(() => w.value.xs || w.value.sm), O = ee();
+    return (o, l) => {
+      var V;
+      const s = h("FmButton"), L = h("FmMenuItem"), P = h("FmMenu"), j = h("FmCollapsibleTabs"), q = h("FmBottomSheet");
+      return n(), c(k, null, [
+        p("div", {
+          class: C([
+            "flex flex-col w-full bg-white h-full",
+            {
+              "gap-12": g.value
+            }
+          ])
+        }, [
+          p("div", {
+            onVnodeMounted: l[3] || (l[3] = //@ts-ignore
+            (...e) => A(O).onMounted && A(O).onMounted(...e)),
+            class: C([
+              "flex gap-8 items-center",
+              {
+                "p-12 border-b-[1px] border-b-fm-color-neutral-gray-100": g.value,
+                "px-24 py-16": !g.value
+              }
+            ])
+          }, [
+            p("div", {
+              class: C([
+                "flex-1 flex flex-col gap-4 fm-typo-en-title-md-600 bg-white",
+                {
+                  "py-12": g.value
+                }
+              ])
+            }, [
+              p("div", null, [
+                Y(T(o.title) + " ", 1),
+                I(o.$slots, "headerInfo")
+              ]),
+              o.helperText ? (n(), c("div", te, T(o.helperText), 1)) : _("", !0)
+            ], 2),
+            g.value ? (n(), c(k, { key: 0 }, [
+              y.value.length ? (n(), u(s, {
+                key: 0,
+                variant: "tertiary",
+                "prepend-icon": "more_vert",
+                onClick: l[0] || (l[0] = (e) => a.value = !0)
+              })) : _("", !0)
+            ], 64)) : (n(), c(k, { key: 1 }, [
+              (n(!0), c(k, null, U(y.value.slice(0, S), (e) => (n(), c(k, {
+                key: e.value
+              }, [
+                e.isAdminOnly ? (n(), u(F, { key: 0 }, {
+                  default: x(() => [
+                    v(s, {
+                      label: e.label,
+                      "prepend-icon": e.prependIcon,
+                      variant: e.variant,
+                      "bg-color": e.variant ? void 0 : "neutral-gray-100",
+                      "text-color": e.variant ? void 0 : "neutral-gray-400",
+                      onClick: (B) => r("click:action", e.value)
+                    }, null, 8, ["label", "prepend-icon", "variant", "bg-color", "text-color", "onClick"])
+                  ]),
+                  _: 2
+                }, 1024)) : (n(), u(s, {
+                  key: 1,
+                  label: e.label,
+                  "prepend-icon": e.prependIcon,
+                  variant: e.variant,
+                  "bg-color": e.variant ? void 0 : "neutral-gray-100",
+                  "text-color": e.variant ? void 0 : "neutral-gray-400",
+                  onClick: (B) => r("click:action", e.value)
+                }, null, 8, ["label", "prepend-icon", "variant", "bg-color", "text-color", "onClick"]))
+              ], 64))), 128)),
+              y.value.length > S ? (n(), u(P, { key: 0 }, {
+                "menu-button": x(() => [
+                  v(s, {
+                    label: A(d)("inventory.common.more"),
+                    "append-icon": "expand_more",
+                    "bg-color": "neutral-gray-100",
+                    "text-color": "neutral-gray-400"
+                  }, null, 8, ["label"])
+                ]),
+                default: x(() => [
+                  (n(!0), c(k, null, U(y.value.slice(S), (e, B) => (n(), u(L, {
+                    key: B,
+                    label: e.label,
+                    onClick: (oe) => r("click:action", e.value)
+                  }, null, 8, ["label", "onClick"]))), 128))
+                ]),
+                _: 1
+              })) : _("", !0),
+              (V = t.value) != null && V.isAdminOnly ? (n(), u(F, { key: 1 }, {
+                default: x(() => [
+                  v(s, {
+                    label: t.value.label,
+                    "prepend-icon": t.value.prependIcon,
+                    onClick: l[1] || (l[1] = (e) => r("click:action", t.value.value))
+                  }, null, 8, ["label", "prepend-icon"])
+                ]),
+                _: 1
+              })) : t.value ? (n(), u(s, {
+                key: 2,
+                label: t.value.label,
+                "prepend-icon": t.value.prependIcon,
+                onClick: l[2] || (l[2] = (e) => r("click:action", t.value.value))
+              }, null, 8, ["label", "prepend-icon"])) : _("", !0)
+            ], 64))
+          ], 2),
+          p("div", ne, [
+            I(o.$slots, "default")
+          ])
+        ], 2),
+        t.value && g.value ? (n(), u(N, {
+          key: 0,
+          to: "body"
+        }, [
+          p("div", le, [
+            t.value.isAdminOnly ? (n(), u(F, { key: 0 }, {
+              default: x(() => [
+                v(s, {
+                  label: t.value.label,
+                  "prepend-icon": t.value.prependIcon,
+                  onClick: l[4] || (l[4] = (e) => r("click:action", t.value.value)),
+                  variant: "fab"
+                }, null, 8, ["label", "prepend-icon"])
+              ]),
+              _: 1
+            })) : (n(), u(s, {
+              key: 1,
+              label: t.value.label,
+              "prepend-icon": t.value.prependIcon,
+              onClick: l[5] || (l[5] = (e) => r("click:action", t.value.value)),
+              variant: "fab"
+            }, null, 8, ["label", "prepend-icon"]))
+          ])
+        ])) : _("", !0),
+        y.value.length ? (n(), u(N, {
+          key: 1,
+          to: "body"
+        }, [
+          v(q, {
+            "dismiss-away": "",
+            "no-header": "",
+            modelValue: a.value,
+            "onUpdate:modelValue": l[7] || (l[7] = (e) => a.value = e)
+          }, {
+            default: x(() => [
+              v(j, {
+                class: "pb-8",
+                items: E.value,
+                "onUpdate:modelValue": l[6] || (l[6] = (e) => (r("click:action", e), a.value = !1))
+              }, null, 8, ["items"])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])) : _("", !0)
+      ], 64);
+    };
+  }
+});
+export {
+  F,
+  ue as _,
+  ee as u
+};