@feedmepos/mf-inventory-portal 0.0.22-dev.9 → 0.0.23-dev.1

package/dist/FmMultiselectDialog-7hok9sJP.js

@@ -0,0 +1,411 @@
+import { defineComponent as oe, computed as _, ref as C, watch as ne, openBlock as u, 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 p } from "./app-GUbzqEtW.js";
+import { f as xe } from "./fuzzy-CVOV9zJc.js";
+import { d as Fe } from "./index-m9e9nYfl.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 m = U, I = E, r = _(() => {
+      const d = m.itemHeight * m.length;
+      return I("changed:minHeight", d), `${d}px`;
+    }), $ = C(0), n = _(
+      () => Array.from({ length: m.prerender }).map((d, s) => s + $.value)
+    );
+    function P() {
+      $.value = Math.floor(m.scrollTop / m.itemHeight) - Math.floor(m.prerender / 2);
+    }
+    const h = C(Fe(P, 10));
+    ne([() => m.scrollTop], () => {
+      h.value();
+    });
+    function g(d) {
+      const s = d.el;
+      s && (s.style.opacity = "0", setTimeout(() => {
+        s.style.opacity = "1";
+      }, 0));
+    }
+    return (d, s) => (u(), v("div", {
+      class: "relative",
+      style: A({ minHeight: r.value })
+    }, [
+      (u(!0), v(S, null, D(n.value, (f) => (u(), v(S, { key: f }, [
+        f >= 0 && f < d.length ? (u(), v("div", {
+          key: 0,
+          class: "absolute w-full left-0 bg-white",
+          style: A({
+            top: `${d.itemHeight * f}px`,
+            height: `${d.itemHeight}px`,
+            transition: "opacity 0.5s ease"
+          }),
+          onVnodeMounted: g
+        }, [
+          fe(d.$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" }, Ie = {
+  key: 0,
+  class: "flex items-center gap-8 justify-center py-32"
+}, $e = { class: "text-fm-color-typo-secondary fm-typo-en-body-md-400" }, He = {
+  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: m } = we(), I = ke(), r = U, $ = E, n = C(r.modelValue ?? []), P = _e();
+    be(() => {
+      var l, t, o, b;
+      I.emitData(n.value);
+      const e = (l = r.modelValue) != null && l.length ? r.items.findIndex((F) => {
+        var k;
+        return p(F.value, (k = r.modelValue) == null ? void 0 : k[0]);
+      }) : 0;
+      (t = z.value) == null || t.scrollTo({ top: e * 64 - 64, behavior: "smooth" }), (b = (o = O.value) == null ? void 0 : o.inputEl) == null || b.focus();
+    }), ne([() => n.value], ([e]) => {
+      I.emitData(e), $("update:modelValue", e);
+    });
+    function h(e) {
+      return !!n.value.find((l) => p(l, e));
+    }
+    function g(e, l) {
+      r.singleSelect && (n.value = l ? [] : [e]);
+      const t = h(e);
+      if (!(l && t || !l && !t))
+        if (l) {
+          const o = [...n.value, e];
+          n.value = o;
+        } else {
+          const o = n.value.filter((b) => !p(b, e));
+          n.value = o;
+        }
+    }
+    const d = C(""), s = _(() => {
+      const e = d.value.toLocaleLowerCase(), l = r.items;
+      return d.value ? xe.filter(e, l, {
+        pre: "|",
+        post: "|",
+        extract(o) {
+          return o.sublabel ? `${o.label}${o.sublabel}` : o.label;
+        }
+      }).map((o) => o.original) : l;
+    }), f = _(
+      () => n.value.filter((e) => s.value.find((l) => p(l.value, e)))
+    ), x = _(() => f.value.length === s.value.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) => !s.value.find((l) => p(l.value, e))
+      ) : n.value = r.items.filter(
+        (e) => n.value.find((l) => p(l, e.value)) || s.value.find((l) => p(l.value, e.value))
+      ).map((e) => e.value);
+    }
+    const ie = q(
+      ((Q = r.items) == null ? void 0 : Q.map((e) => ({ value: e.value, disabled: e.disabled ?? !1 }))) ?? []
+    );
+    function ue(e, l) {
+      return e.reduce(
+        (t, o) => {
+          const b = l(o);
+          return t[b] || (t[b] = []), t[b].push(o), t;
+        },
+        {}
+      );
+    }
+    const de = _(() => ue(ie, (e) => {
+      var l;
+      return (l = e.value) == null ? void 0 : l._id;
+    })), re = q(
+      ((R = r.items) == null ? void 0 : R.map((e) => ({ value: e.value, collapsed: e.collapsed ?? !1 }))) ?? []
+    ), G = q(
+      ((Y = r.groups) == null ? void 0 : Y.reduce(
+        (e, l) => (e[l.id] = l.collapse ?? !1, e),
+        {}
+      )) ?? {}
+    );
+    function N({ groupId: e, value: l }) {
+      var t;
+      return e && G[e] || ((t = re.find((o) => p(o.value, l))) == null ? void 0 : t.collapsed);
+    }
+    function ce(e) {
+      G[e] = !G[e];
+    }
+    function j(e) {
+      return r.items.filter((l) => l.groupId === e).map((l) => l.value).every((l) => n.value.find((t) => p(t, l)));
+    }
+    function X(e) {
+      return !j(e) && r.items.filter((t) => t.groupId === e).map((t) => t.value).some((t) => n.value.find((o) => p(o, t)));
+    }
+    function ve(e) {
+      const l = r.items.filter((t) => t.groupId === e).map((t) => t.value);
+      if (j(e))
+        n.value = n.value.filter((t) => !l.find((o) => p(t, o)));
+      else if (X(e))
+        for (const t of l)
+          n.value.find((o) => p(o, t)) || (n.value = [...n.value, t]);
+      else
+        n.value = [...n.value, ...l];
+    }
+    const H = C(0);
+    function J(e) {
+      var l;
+      H.value = ((l = e.target) == null ? void 0 : l.scrollTop) ?? H;
+    }
+    const me = _(() => H.value > 100), z = C(), O = C();
+    return (e, l) => {
+      var ee, le;
+      const t = w("FmIcon"), o = w("FmTextField"), b = w("FmCircularProgress"), F = w("FmCheckbox"), k = w("FmListItem"), Z = w("FmButton"), pe = w("FmList");
+      return u(), 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) : (u(), v("div", Te)),
+          V("div", Be, [
+            c(t, { name: "autorenew" }),
+            V("span", Ae, K(B(m)("inventory.formField.itemsSelected", { count: ((ee = n.value) == null ? void 0 : ee.length) ?? 0 })), 1)
+          ]),
+          c(o, {
+            class: "basis-1/2",
+            modelValue: d.value,
+            "onUpdate:modelValue": l[1] || (l[1] = (a) => d.value = a),
+            "prepend-icon": "search",
+            placeholder: e.placeholder,
+            ref_key: "searchTextField",
+            ref: O
+          }, ye({ _: 2 }, [
+            d.value.length ? {
+              name: "append",
+              fn: y(() => [
+                c(t, {
+                  class: "cursor-pointer",
+                  name: "close",
+                  onClick: l[0] || (l[0] = (a) => d.value = "")
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "placeholder"])
+        ]),
+        V("div", null, [
+          e.loading ? (u(), v("div", Ie, [
+            c(b, {
+              size: "md",
+              color: "neutral-gray-400"
+            }),
+            V("div", $e, K(B(m)("inventory.formField.loading")), 1)
+          ])) : s.value.length ? (u(), L(pe, { key: 1 }, {
+            default: y(() => [
+              e.singleSelect ? M("", !0) : (u(), L(k, {
+                key: 0,
+                "model-value": x.value,
+                indeterminate: W.value,
+                value: "",
+                onClick: l[2] || (l[2] = (a) => se())
+              }, {
+                prepend: y(() => [
+                  c(F, {
+                    "model-value": x.value,
+                    indeterminate: W.value,
+                    label: x.value ? B(m)("inventory.formField.select.removeAll") : B(m)("inventory.formField.select.selectAll"),
+                    value: ""
+                  }, null, 8, ["model-value", "indeterminate", "label"])
+                ]),
+                _: 1
+              }, 8, ["model-value", "indeterminate"])),
+              e.groups ? (u(!0), v(S, { key: 2 }, D(e.groups, (a) => (u(), v(S, {
+                key: a.id
+              }, [
+                c(k, {
+                  label: a.label,
+                  sublabel: a.sublabel,
+                  style: { "padding-top": "4px", "padding-bottom": "4px", "padding-left": "32px" },
+                  disabled: a.disabled
+                }, {
+                  prepend: y(() => [
+                    c(F, {
+                      "model-value": j(a.id),
+                      indeterminate: X(a.id),
+                      onClick: () => ve(a.id),
+                      value: a.id,
+                      disabled: a.disabled
+                    }, null, 8, ["model-value", "indeterminate", "onClick", "value", "disabled"])
+                  ]),
+                  append: y(() => [
+                    c(Z, {
+                      "prepend-icon": N({ groupId: a.id }) ? "expand_less" : "expand_more",
+                      size: "md",
+                      variant: "tertiary",
+                      onClick: he(() => ce(a.id), ["stop"])
+                    }, null, 8, ["prepend-icon", "onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["label", "sublabel", "disabled"]),
+                (u(!0), v(S, null, D(s.value.filter((i) => i.groupId === a.id), (i) => (u(), v("div", {
+                  key: i.value,
+                  class: te([
+                    "transition-all overflow-y-clip",
+                    N({ groupId: a.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)) : (u(), v(S, { key: 1 }, [
+                e.virtualScroll ? (u(), L(Se, {
+                  key: 0,
+                  length: s.value.length,
+                  "item-height": 64,
+                  scrollTop: H.value,
+                  prerender: 100
+                }, {
+                  default: y(({ getItem: a }) => {
+                    var i, T;
+                    return [
+                      c(k, {
+                        label: a(s.value).label,
+                        sublabel: a(s.value).sublabel,
+                        onClick: (ae) => g(
+                          a(s.value).value,
+                          !h(a(s.value).value)
+                        ),
+                        disabled: (T = de.value[(i = a(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(a(s.value).value),
+                            "onUpdate:modelValue": (ae) => g(a(s.value).value, ae),
+                            value: a(s.value).value,
+                            disabled: a(s.value).disabled
+                          }, null, 8, ["model-value", "onUpdate:modelValue", "value", "disabled"])
+                        ]),
+                        _: 2
+                      }, 1032, ["label", "sublabel", "onClick", "disabled", "style"])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["length", "scrollTop"])) : (u(!0), v(S, { key: 1 }, D(s.value, (a) => (u(), v("div", {
+                  key: a.value,
+                  class: te([
+                    "transition-all overflow-y-clip",
+                    N({ value: a.value }) ? "max-h-0 opacity-0" : "max-h-[64px] opacity-100"
+                  ])
+                }, [
+                  c(k, {
+                    label: a.label,
+                    sublabel: a.sublabel,
+                    onClick: (i) => g(a.value, !h(a.value)),
+                    disabled: a.disabled,
+                    style: A({
+                      paddingTop: 4,
+                      paddingBottom: 4,
+                      paddingLeft: e.singleSelect === !0 ? 12 : 32
+                    })
+                  }, {
+                    prepend: y(() => [
+                      c(F, {
+                        "model-value": h(a.value),
+                        "onUpdate:modelValue": (i) => g(a.value, i),
+                        value: a.value,
+                        disabled: a.disabled
+                      }, null, 8, ["model-value", "onUpdate:modelValue", "value", "disabled"])
+                    ]),
+                    _: 2
+                  }, 1032, ["label", "sublabel", "onClick", "disabled", "style"])
+                ], 2))), 128))
+              ], 64))
+            ]),
+            _: 1
+          })) : (u(), v("div", He, K(B(m)("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 ? (u(), 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 a;
+                  return (a = z.value) == null ? void 0 : a.scrollTo({ top: 0, behavior: "smooth" });
+                })
+              })) : M("", !0)
+            ]),
+            _: 1
+          })
+        ], 4)
+      ], 544);
+    };
+  }
+}), je = /* @__PURE__ */ Ce(ze, [["__scopeId", "data-v-1605e495"]]);
+export {
+  je as F
+};