@feedmepos/mf-inventory-portal 0.0.23-dev.28 → 0.0.23-dev.3

package/dist/FmMultiselectDialog-CKBcMDGC.js

@@ -0,0 +1,415 @@
+import { defineComponent as oe, computed as _, ref as C, watch as ne, openBlock as d, createElementBlock as v, normalizeStyle as A, Fragment as S, renderList as D, renderSlot as fe, createCommentVNode as M, onMounted as be, reactive as q, resolveComponent as w, createElementVNode as V, createVNode as c, toDisplayString as K, unref as B, createSlots as ye, withCtx as y, createBlock as L, normalizeClass as te, withModifiers as he, Transition as ge } from "vue";
+import { useDialogChild as ke, useSnackbar as _e } from "@feedmepos/ui-library";
+import { z as m } from "./app-CwUHqg7h.js";
+import { f as xe } from "./fuzzy-DXqhGaFi.js";
+import { d as Fe } from "./index-Be5vGZdr.js";
+/* empty css                                                                             */
+import { useI18n as we } from "@feedmepos/mf-common";
+import { _ as Ce } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Se = /* @__PURE__ */ oe({
+  __name: "VirtualScroll",
+  props: {
+    itemHeight: {},
+    length: {},
+    scrollTop: {},
+    prerender: {}
+  },
+  emits: ["changed:minHeight"],
+  setup(U, { emit: E }) {
+    const p = U, $ = E, u = _(() => {
+      const r = p.itemHeight * p.length;
+      return $("changed:minHeight", r), `${r}px`;
+    }), H = C(0), n = _(
+      () => Array.from({ length: p.prerender }).map((r, s) => s + H.value)
+    );
+    function P() {
+      H.value = Math.floor(p.scrollTop / p.itemHeight) - Math.floor(p.prerender / 2);
+    }
+    const h = C(Fe(P, 10));
+    ne([() => p.scrollTop], () => {
+      h.value();
+    });
+    function g(r) {
+      const s = r.el;
+      s && (s.style.opacity = "0", setTimeout(() => {
+        s.style.opacity = "1";
+      }, 0));
+    }
+    return (r, s) => (d(), v("div", {
+      class: "relative",
+      style: A({ minHeight: u.value })
+    }, [
+      (d(!0), v(S, null, D(n.value, (f) => (d(), v(S, { key: f }, [
+        f >= 0 && f < r.length ? (d(), v("div", {
+          key: 0,
+          class: "absolute w-full left-0 bg-white",
+          style: A({
+            top: `${r.itemHeight * f}px`,
+            height: `${r.itemHeight}px`,
+            transition: "opacity 0.5s ease"
+          }),
+          onVnodeMounted: g
+        }, [
+          fe(r.$slots, "default", {
+            key: f,
+            index: f,
+            getItem: (x) => x[f]
+          })
+        ], 4)) : M("", !0)
+      ], 64))), 128))
+    ], 4));
+  }
+}), Ve = { class: "flex justify-between items-center sticky top-0 bg-white z-50" }, Te = {
+  key: 0,
+  class: "h-12 bg-white absolute top-[-12px] left-[-24px] w-lvw z-50",
+  style: { "max-width": "min(100vw - 48px, 560px)" }
+}, Be = { class: "flex gap-16 basis-1/2" }, Ae = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, $e = {
+  key: 0,
+  class: "flex items-center gap-8 justify-center py-32"
+}, He = { class: "text-fm-color-typo-secondary fm-typo-en-body-md-400" }, Ie = {
+  key: 2,
+  class: "p-16 text-fm-color-typo-disabled fm-typo-en-body-lg-400 text-center"
+}, ze = /* @__PURE__ */ oe({
+  __name: "FmMultiselectDialog",
+  props: {
+    modelValue: {},
+    items: {},
+    groups: {},
+    singleSelect: { type: Boolean },
+    placeholder: {},
+    showValidBorder: { type: Boolean },
+    maxHeight: {},
+    width: {},
+    noShadow: { type: Boolean },
+    loading: { type: Boolean },
+    virtualScroll: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(U, { emit: E }) {
+    var Q, R, Y;
+    const { t: p } = we(), $ = ke(), u = U, H = E, n = C(u.modelValue ?? []), P = _e();
+    be(() => {
+      var l, a, o, b;
+      $.emitData(n.value);
+      const e = (l = u.modelValue) != null && l.length ? u.items.findIndex((F) => {
+        var k;
+        return m(F.value, (k = u.modelValue) == null ? void 0 : k[0]);
+      }) : 0;
+      (a = z.value) == null || a.scrollTo({ top: e * 64 - 64, behavior: "smooth" }), (b = (o = O.value) == null ? void 0 : o.inputEl) == null || b.focus();
+    }), ne([() => n.value], ([e]) => {
+      $.emitData(e), H("update:modelValue", e);
+    });
+    function h(e) {
+      return !!n.value.find((l) => m(l, e));
+    }
+    function g(e, l) {
+      u.singleSelect && (n.value = l ? [] : [e]);
+      const a = h(e);
+      if (!(l && a || !l && !a))
+        if (l) {
+          const o = [...n.value, e];
+          n.value = o;
+        } else {
+          const o = n.value.filter((b) => !m(b, e));
+          n.value = o;
+        }
+    }
+    const r = C(""), s = _(() => {
+      const e = r.value.toLocaleLowerCase(), l = u.items;
+      return r.value ? xe.filter(e, l, {
+        pre: "|",
+        post: "|",
+        extract(o) {
+          return o.sublabel ? `${o.label}${o.sublabel}` : o.label;
+        }
+      }).map((o) => o.original).filter((o) => !o.disabled) : l;
+    }), f = _(
+      () => n.value.filter((e) => {
+        const l = u.items.find((a) => m(a.value, e));
+        return !(l != null && l.disabled) && s.value.find((a) => m(a.value, e));
+      })
+    ), x = _(() => f.value.filter((e) => !e.disabled).length === s.value.filter((e) => !e.disabled).length), W = _(() => f.value.length > 0 && !x.value);
+    function se() {
+      if (s.value.length > 100) {
+        P.open({
+          title: "Too many items to select",
+          message: "Please use the filter to narrow down your search options."
+        });
+        return;
+      }
+      x.value ? n.value = n.value.filter((e) => {
+        const l = u.items.find((a) => m(a.value, e));
+        return (l == null ? void 0 : l.disabled) && !s.value.find((a) => m(a.value, e));
+      }) : n.value = u.items.filter(
+        (e) => !e.disabled && (n.value.find((l) => m(l, e.value)) || s.value.find((l) => m(l.value, e.value)))
+      ).map((e) => e.value);
+    }
+    const ie = q(
+      ((Q = u.items) == null ? void 0 : Q.map((e) => ({ value: e.value, disabled: e.disabled ?? !1 }))) ?? []
+    );
+    function de(e, l) {
+      return e.reduce(
+        (a, o) => {
+          const b = l(o);
+          return a[b] || (a[b] = []), a[b].push(o), a;
+        },
+        {}
+      );
+    }
+    const ue = _(() => de(ie, (e) => {
+      var l;
+      return (l = e.value) == null ? void 0 : l._id;
+    })), re = q(
+      ((R = u.items) == null ? void 0 : R.map((e) => ({ value: e.value, collapsed: e.collapsed ?? !1 }))) ?? []
+    ), G = q(
+      ((Y = u.groups) == null ? void 0 : Y.reduce(
+        (e, l) => (e[l.id] = l.collapse ?? !1, e),
+        {}
+      )) ?? {}
+    );
+    function N({ groupId: e, value: l }) {
+      var a;
+      return e && G[e] || ((a = re.find((o) => m(o.value, l))) == null ? void 0 : a.collapsed);
+    }
+    function ce(e) {
+      G[e] = !G[e];
+    }
+    function j(e) {
+      return u.items.filter((l) => l.groupId === e).map((l) => l.value).every((l) => n.value.find((a) => m(a, l)));
+    }
+    function X(e) {
+      return !j(e) && u.items.filter((a) => a.groupId === e).map((a) => a.value).some((a) => n.value.find((o) => m(o, a)));
+    }
+    function ve(e) {
+      const l = u.items.filter((a) => a.groupId === e).map((a) => a.value);
+      if (j(e))
+        n.value = n.value.filter((a) => !l.find((o) => m(a, o)));
+      else if (X(e))
+        for (const a of l)
+          n.value.find((o) => m(o, a)) || (n.value = [...n.value, a]);
+      else
+        n.value = [...n.value, ...l];
+    }
+    const I = C(0);
+    function J(e) {
+      var l;
+      I.value = ((l = e.target) == null ? void 0 : l.scrollTop) ?? I;
+    }
+    const me = _(() => I.value > 100), z = C(), O = C();
+    return (e, l) => {
+      var ee, le;
+      const a = w("FmIcon"), o = w("FmTextField"), b = w("FmCircularProgress"), F = w("FmCheckbox"), k = w("FmListItem"), Z = w("FmButton"), pe = w("FmList");
+      return d(), v("div", {
+        class: "relative max-h-[380px] overflow-y-auto overflow-x-hidden",
+        onScroll: J,
+        onScrollend: J,
+        ref_key: "scrollable",
+        ref: z
+      }, [
+        V("div", Ve, [
+          e.noShadow ? M("", !0) : (d(), v("div", Te)),
+          V("div", Be, [
+            c(a, { name: "autorenew" }),
+            V("span", Ae, K(B(p)("inventory.formField.itemsSelected", { count: ((ee = n.value) == null ? void 0 : ee.length) ?? 0 })), 1)
+          ]),
+          c(o, {
+            class: "basis-1/2",
+            modelValue: r.value,
+            "onUpdate:modelValue": l[1] || (l[1] = (t) => r.value = t),
+            "prepend-icon": "search",
+            placeholder: e.placeholder,
+            ref_key: "searchTextField",
+            ref: O
+          }, ye({ _: 2 }, [
+            r.value.length ? {
+              name: "append",
+              fn: y(() => [
+                c(a, {
+                  class: "cursor-pointer",
+                  name: "close",
+                  onClick: l[0] || (l[0] = (t) => r.value = "")
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "placeholder"])
+        ]),
+        V("div", null, [
+          e.loading ? (d(), v("div", $e, [
+            c(b, {
+              size: "md",
+              color: "neutral-gray-400"
+            }),
+            V("div", He, K(B(p)("inventory.formField.loading")), 1)
+          ])) : s.value.length ? (d(), L(pe, { key: 1 }, {
+            default: y(() => [
+              e.singleSelect ? M("", !0) : (d(), L(k, {
+                key: 0,
+                "model-value": x.value,
+                indeterminate: W.value,
+                value: "",
+                onClick: l[2] || (l[2] = (t) => se())
+              }, {
+                prepend: y(() => [
+                  c(F, {
+                    "model-value": x.value,
+                    indeterminate: W.value,
+                    label: x.value ? B(p)("inventory.formField.select.removeAll") : B(p)("inventory.formField.select.selectAll"),
+                    value: ""
+                  }, null, 8, ["model-value", "indeterminate", "label"])
+                ]),
+                _: 1
+              }, 8, ["model-value", "indeterminate"])),
+              e.groups ? (d(!0), v(S, { key: 2 }, D(e.groups, (t) => (d(), v(S, {
+                key: t.id
+              }, [
+                c(k, {
+                  label: t.label,
+                  sublabel: t.sublabel,
+                  style: { "padding-top": "4px", "padding-bottom": "4px", "padding-left": "32px" },
+                  disabled: t.disabled
+                }, {
+                  prepend: y(() => [
+                    c(F, {
+                      "model-value": j(t.id),
+                      indeterminate: X(t.id),
+                      onClick: () => ve(t.id),
+                      value: t.id,
+                      disabled: t.disabled
+                    }, null, 8, ["model-value", "indeterminate", "onClick", "value", "disabled"])
+                  ]),
+                  append: y(() => [
+                    c(Z, {
+                      "prepend-icon": N({ groupId: t.id }) ? "expand_less" : "expand_more",
+                      size: "md",
+                      variant: "tertiary",
+                      onClick: he(() => ce(t.id), ["stop"])
+                    }, null, 8, ["prepend-icon", "onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["label", "sublabel", "disabled"]),
+                (d(!0), v(S, null, D(s.value.filter((i) => i.groupId === t.id), (i) => (d(), v("div", {
+                  key: i.value,
+                  class: te([
+                    "transition-all overflow-y-clip",
+                    N({ groupId: t.id, value: i.value }) ? "max-h-0 opacity-0" : "max-h-[64px] opacity-100"
+                  ])
+                }, [
+                  c(k, {
+                    label: i.label,
+                    sublabel: i.sublabel,
+                    disabled: i.disabled,
+                    onClick: (T) => g(i.value, !h(i.value)),
+                    style: { "padding-top": "4px", "padding-bottom": "4px", "padding-left": "64px" }
+                  }, {
+                    prepend: y(() => [
+                      c(F, {
+                        "model-value": h(i.value),
+                        "onUpdate:modelValue": (T) => g(i.value, T),
+                        value: i.value,
+                        disabled: i.disabled
+                      }, null, 8, ["model-value", "onUpdate:modelValue", "value", "disabled"])
+                    ]),
+                    _: 2
+                  }, 1032, ["label", "sublabel", "disabled", "onClick"])
+                ], 2))), 128))
+              ], 64))), 128)) : (d(), v(S, { key: 1 }, [
+                e.virtualScroll ? (d(), L(Se, {
+                  key: 0,
+                  length: s.value.length,
+                  "item-height": 64,
+                  scrollTop: I.value,
+                  prerender: 100
+                }, {
+                  default: y(({ getItem: t }) => {
+                    var i, T;
+                    return [
+                      c(k, {
+                        label: t(s.value).label,
+                        sublabel: t(s.value).sublabel,
+                        onClick: (ae) => g(
+                          t(s.value).value,
+                          !h(t(s.value).value)
+                        ),
+                        disabled: (T = ue.value[(i = t(s.value).value) == null ? void 0 : i._id][0]) == null ? void 0 : T.disabled,
+                        style: A({
+                          paddingTop: 4,
+                          paddingBottom: 4,
+                          paddingLeft: e.singleSelect === !0 ? 12 : 32
+                        })
+                      }, {
+                        prepend: y(() => [
+                          c(F, {
+                            "model-value": h(t(s.value).value),
+                            "onUpdate:modelValue": (ae) => g(t(s.value).value, ae),
+                            value: t(s.value).value,
+                            disabled: t(s.value).disabled
+                          }, null, 8, ["model-value", "onUpdate:modelValue", "value", "disabled"])
+                        ]),
+                        _: 2
+                      }, 1032, ["label", "sublabel", "onClick", "disabled", "style"])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["length", "scrollTop"])) : (d(!0), v(S, { key: 1 }, D(s.value, (t) => (d(), v("div", {
+                  key: t.value,
+                  class: te([
+                    "transition-all overflow-y-clip",
+                    N({ value: t.value }) ? "max-h-0 opacity-0" : "max-h-[64px] opacity-100"
+                  ])
+                }, [
+                  c(k, {
+                    label: t.label,
+                    sublabel: t.sublabel,
+                    onClick: (i) => g(t.value, !h(t.value)),
+                    disabled: t.disabled,
+                    style: A({
+                      paddingTop: 4,
+                      paddingBottom: 4,
+                      paddingLeft: e.singleSelect === !0 ? 12 : 32
+                    })
+                  }, {
+                    prepend: y(() => [
+                      c(F, {
+                        "model-value": h(t.value),
+                        "onUpdate:modelValue": (i) => g(t.value, i),
+                        value: t.value,
+                        disabled: t.disabled
+                      }, null, 8, ["model-value", "onUpdate:modelValue", "value", "disabled"])
+                    ]),
+                    _: 2
+                  }, 1032, ["label", "sublabel", "onClick", "disabled", "style"])
+                ], 2))), 128))
+              ], 64))
+            ]),
+            _: 1
+          })) : (d(), v("div", Ie, K(B(p)("inventory.formField.noItemsFound")), 1))
+        ]),
+        V("div", {
+          class: "sticky bottom-24",
+          style: A({ transform: `translateX(${(((le = z.value) == null ? void 0 : le.clientWidth) ?? 0) - 80}px)` })
+        }, [
+          c(ge, { name: "fade" }, {
+            default: y(() => [
+              me.value ? (d(), L(Z, {
+                key: 0,
+                variant: "fab",
+                class: "bg-white",
+                "text-color": "neutral-gray-400",
+                "prepend-icon": "keyboard_arrow_up",
+                onClick: l[3] || (l[3] = () => {
+                  var t;
+                  return (t = z.value) == null ? void 0 : t.scrollTo({ top: 0, behavior: "smooth" });
+                })
+              })) : M("", !0)
+            ]),
+            _: 1
+          })
+        ], 4)
+      ], 544);
+    };
+  }
+}), je = /* @__PURE__ */ Ce(ze, [["__scopeId", "data-v-fa6c2f94"]]);
+export {
+  je as F
+};