@jblehm/super-list 1.0.5

package/dist/super-list.js

@@ -0,0 +1,852 @@
+import { defineComponent as Q, ref as f, computed as D, openBlock as w, createElementBlock as T, withKeys as m, normalizeClass as S, createElementVNode as H, useTemplateRef as ke, watch as F, Fragment as de, renderList as Ee, withModifiers as te, toDisplayString as ve, createBlock as ce, createCommentVNode as j, useCssVars as Ae, onMounted as ye, onUnmounted as Fe, renderSlot as Le, createVNode as W, nextTick as Ne, resolveDynamicComponent as Se, withCtx as me } from "vue";
+import './index.css';class He {
+  eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
+  config = {
+    attributes: !0,
+    childList: !0,
+    subtree: !0
+  };
+  mutationObserver;
+  callbackFunction;
+  constructor(s, b = document.body) {
+    this.targetNode = b, this.callbackFunction = (h) => s(h), this.mutationObserver = new MutationObserver(() => s());
+  }
+  observe() {
+    this.mutationObserver.observe(this.targetNode, this.config);
+    for (const s of this.eventsTypes) this.addListener(s);
+    this.addResizeListener(), this.addTransitionEndListener();
+  }
+  pauseMutationObserver() {
+    this.mutationObserver.disconnect();
+  }
+  unpauseMutationObserver() {
+    this.mutationObserver.observe(this.targetNode, this.config);
+  }
+  unobserve() {
+    this.mutationObserver.disconnect();
+    for (const s of this.eventsTypes) this.removeListener(s);
+    this.removeResizeListener(), this.removeTransitionEndListener();
+  }
+  addListener(s) {
+    document.addEventListener(s, this.callbackFunction, !0);
+  }
+  removeListener(s) {
+    document.removeEventListener(s, this.callbackFunction, !0);
+  }
+  addTransitionEndListener() {
+    this.targetNode.addEventListener("transitionend", this.callbackFunction);
+  }
+  removeTransitionEndListener() {
+    this.targetNode.removeEventListener("transitionend", this.callbackFunction);
+  }
+  addResizeListener() {
+    window.addEventListener("resize", this.callbackFunction);
+  }
+  removeResizeListener() {
+    window.removeEventListener("resize", this.callbackFunction);
+  }
+}
+function Be(e, s, b, h) {
+  return e == null ? "" : typeof e == "object" ? e[b] : h ? Pe(e, h) : s ? s(e) : "" + e;
+}
+function Pe(e, s) {
+  return s.find((b) => b.type === e)?.label ?? "";
+}
+class Re {
+  constructor() {
+    this.abortController = new AbortController(), this.func = () => {
+    }, this.then = () => {
+    };
+  }
+  async abortablePromise(s, b, h) {
+    const o = await b();
+    if (!s.aborted)
+      return h(o);
+  }
+  setFunc(s) {
+    this.func = s;
+  }
+  setThen(s) {
+    this.then = s;
+  }
+  execute() {
+    return this.abortablePromise(this.abortController.signal, this.func, this.then);
+  }
+  abort(s) {
+    this.abortController.abort(s || "Aborted By Controller."), this.abortController = new AbortController();
+  }
+  resetAndExecute(s, b) {
+    return this.abort("New Request From Controller."), this.setFunc(s), this.setThen(b), this.execute();
+  }
+}
+const qe = ["tabindex", "placeholder", "size"], je = /* @__PURE__ */ Q({
+  __name: "ListTextInput",
+  props: {
+    enableTextFilter: {
+      type: Boolean,
+      required: !0
+    },
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    enableButtonClick: {
+      type: Boolean,
+      default: !0
+    },
+    parentMethods: {
+      type: Object,
+      required: !0
+    },
+    showDropDown: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: {
+    "update:selected": null,
+    "update:query": null,
+    "update:press": null
+  },
+  setup(e, { expose: s, emit: b }) {
+    const h = b, o = e, i = f(null);
+    function a(d) {
+      d?.target && d.target === i.value || o.parentMethods.unfocus(d);
+    }
+    function t(d) {
+      d.target && d.target.value != null && h("update:query", d.target.value);
+    }
+    const l = D(() => {
+      const d = i?.value ? i.value.length : 0, c = o.placeholder?.length || 0;
+      return d > 0 ? d : c > 0 ? c : 5;
+    }), g = D(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"), p = D(() => o.showDropDown && !o.enableTextFilter || !o.showDropDown ? "dark-placeholder-text" : "light-placeholder-text");
+    function N() {
+      if (i?.value) {
+        const d = i.value;
+        d.blur(), d.value = "";
+      }
+    }
+    function k() {
+      i?.value && i.value.focus();
+    }
+    return s({ blurInput: N, focusInput: k, textInputRef: i }), (d, c) => (w(), T("input", {
+      ref_key: "textInputRef",
+      ref: i,
+      tabindex: e.enableTextFilter ? 0 : -1,
+      onKeydown: [
+        c[0] || (c[0] = m((L) => e.parentMethods.press(L), ["enter"])),
+        c[1] || (c[1] = m((L) => e.parentMethods.press(), ["space"])),
+        c[2] || (c[2] = m((L) => e.parentMethods.press(L), ["esc"])),
+        c[3] || (c[3] = m((L) => e.parentMethods.press(L), ["up"])),
+        c[4] || (c[4] = m((L) => e.parentMethods.press(L), ["down"]))
+      ],
+      onFocusin: c[5] || (c[5] = (L) => e.parentMethods.openList()),
+      onFocusout: c[6] || (c[6] = (L) => a(L)),
+      onClick: c[7] || (c[7] = (L) => e.parentMethods.openList()),
+      onInput: c[8] || (c[8] = (L) => t(L)),
+      type: "text",
+      "aria-autocomplete": "none",
+      autocomplete: "off",
+      placeholder: e.placeholder,
+      size: l.value,
+      class: S([[
+        g.value,
+        p.value,
+        { "text-filter-disabled": !e.enableTextFilter }
+      ], "list-filter-text-input"])
+    }, null, 42, qe));
+  }
+}), $ = (e, s) => {
+  const b = e.__vccOpts || e;
+  for (const [h, o] of s)
+    b[h] = o;
+  return b;
+}, be = /* @__PURE__ */ $(je, [["__scopeId", "data-v-18c89a96"]]), $e = {}, Ke = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  "data-slot": "icon",
+  viewBox: "0 -16 16 17"
+};
+function Ve(e, s) {
+  return w(), T("svg", Ke, s[0] || (s[0] = [
+    H("path", {
+      "shape-rendering": "geometricPrecision",
+      d: "M 6 -2.25 L 13.75 -14 A 0.5 0.5 90 0 1 15 -13 L 6.5 -0.5 A 2 1 90 0 1 5.5 -0.5 L 1 -6 A 0.5 0.5 90 0 1 2.25 -7 Z"
+    }, null, -1)
+  ]));
+}
+const ze = /* @__PURE__ */ $($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = { class: "list-item-span" }, Je = /* @__PURE__ */ Q({
+  __name: "ListItem",
+  props: {
+    mouseHoveringOnList: {
+      type: Boolean,
+      default: !1
+    },
+    filteredListItems: {
+      type: Array,
+      default: () => []
+    },
+    focusedIndex: {
+      type: Number,
+      default: null
+    },
+    selectedIndex: {
+      type: Number,
+      default: null
+    },
+    listElementOpenAndVisible: {
+      type: Boolean,
+      default: !1
+    },
+    parentMethods: {
+      type: Object,
+      required: !0
+    },
+    showDropDown: {
+      type: Boolean,
+      default: !1
+    },
+    totalOptionsCount: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(e) {
+    const s = e, b = ke("items"), h = D(() => {
+      if (!b?.value) return null;
+      const t = (Array.isArray(b.value) ? b.value : [b.value])[s.focusedIndex];
+      return t && typeof t == "object" && "scrollIntoView" in t && typeof t.scrollIntoView == "function" ? t : null;
+    });
+    F(
+      () => s.showDropDown,
+      () => o()
+    ), F(
+      () => s.listElementOpenAndVisible,
+      () => i()
+    ), F(
+      () => h.value,
+      () => i()
+    );
+    function o() {
+      !s.showDropDown || !h?.value?.parentElement?.parentElement || (h.value.parentElement.parentElement.scrollTop = h.value.offsetTop);
+    }
+    function i() {
+      const a = h.value, t = a?.parentElement?.parentElement;
+      if (!s.showDropDown || !a || !t) return;
+      const l = a.offsetTop - t.scrollTop < 0, g = a.offsetTop + a.offsetHeight - t.scrollTop > t.clientHeight;
+      l && (t.scrollTop = a.offsetTop), g && (t.scrollTop = a.offsetTop + a.clientHeight - t.clientHeight);
+    }
+    return (a, t) => (w(), T(de, null, [
+      (w(!0), T(de, null, Ee(e.filteredListItems, (l, g) => (w(), T("li", {
+        key: g,
+        ref_for: !0,
+        ref: "items",
+        onKeyup: [
+          t[0] || (t[0] = m((p) => e.parentMethods.press(p), ["enter"])),
+          t[1] || (t[1] = m((p) => e.parentMethods.press(p), ["space"])),
+          t[2] || (t[2] = m((p) => e.parentMethods.press(p), ["esc"]))
+        ],
+        onKeydown: [
+          t[3] || (t[3] = m((p) => e.parentMethods.press(p), ["up"])),
+          t[4] || (t[4] = m((p) => e.parentMethods.press(p), ["down"]))
+        ],
+        onFocusout: t[5] || (t[5] = (p) => e.parentMethods.unfocus(p)),
+        tabindex: "-1",
+        onMousedown: te((p) => e.parentMethods.updatedSelected(l), ["left"]),
+        class: S([
+          { "list-option-selected": e.selectedIndex === g },
+          {
+            "list-option-active": e.filteredListItems.length === 1 || e.focusedIndex === g && !e.mouseHoveringOnList
+          },
+          "list-option"
+        ])
+      }, [
+        H("span", {
+          class: S(["list-item-span", { "list-item-extra-padding": e.selectedIndex === g }])
+        }, ve(e.parentMethods.getLabel(l)), 3),
+        e.selectedIndex === g ? (w(), ce(ze, {
+          key: 0,
+          class: "list-item-icon",
+          "aria-hidden": "true"
+        })) : j("", !0)
+      ], 42, Xe))), 128)),
+      e.filteredListItems.length === 0 ? (w(), T("li", {
+        key: 0,
+        onKeyup: [
+          t[6] || (t[6] = m((l) => e.parentMethods.press(l), ["enter"])),
+          t[7] || (t[7] = m((l) => e.parentMethods.press(l), ["space"])),
+          t[8] || (t[8] = m((l) => e.parentMethods.press(l), ["esc"]))
+        ],
+        onKeydown: [
+          t[9] || (t[9] = m((l) => e.parentMethods.press(l), ["up"])),
+          t[10] || (t[10] = m((l) => e.parentMethods.press(l), ["down"]))
+        ],
+        onFocusout: t[11] || (t[11] = (l) => e.parentMethods.unfocus(l)),
+        onMousedown: t[12] || (t[12] = te((l) => e.parentMethods.closeList(l), ["left"])),
+        tabindex: "-1",
+        class: "list-option-message"
+      }, t[20] || (t[20] = [
+        H("span", { class: "list-item-span" }, "No Items To Display.", -1)
+      ]), 32)) : j("", !0),
+      e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (w(), T("li", {
+        key: 1,
+        onKeyup: [
+          t[13] || (t[13] = m((l) => e.parentMethods.press(l), ["enter"])),
+          t[14] || (t[14] = m((l) => e.parentMethods.press(l), ["space"])),
+          t[15] || (t[15] = m((l) => e.parentMethods.press(l), ["esc"]))
+        ],
+        onKeydown: [
+          t[16] || (t[16] = m((l) => e.parentMethods.press(l), ["up"])),
+          t[17] || (t[17] = m((l) => e.parentMethods.press(l), ["down"]))
+        ],
+        onFocusout: t[18] || (t[18] = (l) => e.parentMethods.unfocus(l)),
+        onMousedown: t[19] || (t[19] = te((l) => e.parentMethods.closeList(l), ["left"])),
+        tabindex: "-1",
+        class: "list-option-message"
+      }, [
+        H("span", Ue, " +" + ve(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
+      ], 32)) : j("", !0)
+    ], 64));
+  }
+}), We = /* @__PURE__ */ $(Je, [["__scopeId", "data-v-9b370840"]]), Qe = /* @__PURE__ */ Q({
+  __name: "ItemList",
+  props: {
+    mouseHoveringOnList: {
+      type: Boolean,
+      default: !1
+    },
+    filteredListItems: {
+      type: Array,
+      default: () => []
+    },
+    focusedIndex: {
+      type: Number,
+      default: null
+    },
+    selectedIndex: {
+      type: Number,
+      default: null
+    },
+    parentMethods: {
+      type: Object,
+      required: !0
+    },
+    showDropDown: {
+      type: Boolean,
+      required: !0
+    },
+    maxListHeightPX: {
+      type: Number,
+      required: !0
+    },
+    listAnimationDurationMs: {
+      type: Number,
+      required: !0
+    },
+    blockListChange: {
+      type: Boolean,
+      required: !0
+    },
+    totalOptionsCount: {
+      type: Number,
+      default: 0
+    },
+    enableScrollClose: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["reverseDropDownList"],
+  setup(e, { expose: s, emit: b }) {
+    Ae((u) => ({
+      "1c26e35a": k.value,
+      "3a8b91f6": ne.value,
+      "3a8b8a74": P.value,
+      "3f1664b2": R.value,
+      c180c800: Y.value
+    }));
+    const h = b, o = e, i = f(null), a = f(null), t = f(null), l = f(0), g = f(0), p = f(0), N = f(0), k = f("0px"), d = f(!1), c = f([]), L = f(0), C = D(() => !d.value || window?.innerHeight == null ? !1 : z() && se()), E = D(() => o.maxListHeightPX >= L.value);
+    F(
+      () => C.value,
+      (u) => h("reverseDropDownList", u),
+      { immediate: !0 }
+    );
+    const ne = D(() => l.value + "px"), P = D(() => N.value + "px");
+    s({ listContainerRef: t });
+    const oe = (u) => {
+      u?.key && u.key === " " && u.preventDefault();
+    }, V = (u) => {
+      const y = t?.value, x = u.target;
+      (!(y && x && y.contains(x)) || y.isEqualNode(x)) && o.parentMethods.focusInput();
+    };
+    function M() {
+      return a?.value ? (a?.value).clientHeight : 0;
+    }
+    function Z() {
+      if (!o.showDropDown || M() === 0) return o.maxListHeightPX;
+      const u = M() === 0 ? o.maxListHeightPX : +M();
+      return o.maxListHeightPX && o.maxListHeightPX > u ? u : o.maxListHeightPX;
+    }
+    function z() {
+      return g.value > Z();
+    }
+    function se() {
+      return p.value < Z();
+    }
+    const Y = D(() => (o.maxListHeightPX || 0) + "px"), R = D(() => (o.listAnimationDurationMs || 0) + "ms"), G = D(() => o.blockListChange ? c.value : o.filteredListItems);
+    F(
+      () => G,
+      (u) => {
+        u && (c.value = u.value);
+      },
+      { immediate: !1, deep: !0 }
+    );
+    let O = setTimeout(() => {
+    }, 0), A = null;
+    function q() {
+      L.value = M(), clearTimeout(O), A && A.observe(), d.value = !0, K(void 0);
+    }
+    function ie() {
+      clearTimeout(O), O = setTimeout(() => {
+        o.showDropDown || (d.value = !1, A && A.unobserve());
+      }, o.listAnimationDurationMs + 50);
+    }
+    F(
+      () => o.showDropDown,
+      (u, y) => {
+        u !== y && (u ? q() : ie());
+      },
+      { immediate: !0 }
+    );
+    function K(u) {
+      X(), Ne(() => X()), _(u);
+    }
+    function _(u) {
+      if (!o.enableScrollClose || !u?.target || typeof t?.value?.contains != "function" || u?.target?.nodeType == null) return;
+      const y = ["scroll", "wheel", "touchmove"].includes(u?.type), x = !t.value.contains(u.target);
+      o.showDropDown && y && x && o.parentMethods.closeList();
+    }
+    function X() {
+      le(), U();
+    }
+    function le() {
+      if (i?.value == null) return;
+      const u = i.value.getBoundingClientRect();
+      g.value = u.top, p.value = window.innerHeight - u.bottom, k.value = u.width + "px";
+    }
+    function U() {
+      if (i?.value == null || t?.value == null) return;
+      const u = re().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x = N.value, ee = l.value;
+      C.value ? N.value = x - (u.top - y.bottom) : N.value = x - (y.top - u.bottom), l.value = ee - (y.left - u.left);
+    }
+    function J() {
+      return (i?.value).getElementsByTagName("button")[0];
+    }
+    function re() {
+      return i?.value;
+    }
+    return ye(() => {
+      A = new He(K, J()), setTimeout(() => K(void 0), 250);
+    }), Fe(() => {
+      A?.unobserve();
+    }), (u, y) => (w(), T(de, null, [
+      H("div", {
+        ref_key: "dropDownButtonContainer",
+        ref: i,
+        class: "super-list-button-container"
+      }, [
+        Le(u.$slots, "default", {}, void 0, !0)
+      ], 512),
+      H("div", {
+        ref_key: "listContainerRef",
+        ref: t,
+        onMouseenter: y[0] || (y[0] = (x) => e.parentMethods.mouseOverList()),
+        tabindex: "-1",
+        class: S([
+          "select-list",
+          C.value ? "list-reverse" : "list-normal",
+          { "select-list-open": e.showDropDown },
+          { "no-scroll": E.value && d.value },
+          { "select-list-fixed": d.value },
+          { "select-list-scrollable": !E.value }
+        ]),
+        onKeydown: y[1] || (y[1] = m((x) => oe(x), ["space"])),
+        onMouseup: y[2] || (y[2] = te((x) => V(x), ["left"]))
+      }, [
+        H("ul", {
+          tabindex: "-1",
+          ref_key: "dropDownListUL",
+          ref: a,
+          class: "list-content"
+        }, [
+          W(We, {
+            filteredListItems: c.value,
+            mouseHoveringOnList: e.mouseHoveringOnList,
+            focusedIndex: e.focusedIndex,
+            selectedIndex: e.selectedIndex,
+            listElementOpenAndVisible: d.value,
+            "parent-methods": e.parentMethods,
+            "show-drop-down": e.showDropDown,
+            "total-options-count": e.totalOptionsCount
+          }, null, 8, ["filteredListItems", "mouseHoveringOnList", "focusedIndex", "selectedIndex", "listElementOpenAndVisible", "parent-methods", "show-drop-down", "total-options-count"])
+        ], 512)
+      ], 34)
+    ], 64));
+  }
+}), he = /* @__PURE__ */ $(Qe, [["__scopeId", "data-v-02d0c000"]]), Ze = {}, Ye = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  "data-slot": "icon",
+  viewBox: "0 0 12 6"
+};
+function Ge(e, s) {
+  return w(), T("svg", Ye, s[0] || (s[0] = [
+    H("path", {
+      "shape-rendering": "geometricPrecision",
+      d: "M 6 4 L 10 0.25 A 0.5 0.5 90 0 1 11 1.25 L 6.5 5.75 A 15 3 90 0 1 5.5 5.75 L 1 1.25 A 0.5 0.5 90 0 1 2 0.25 Z"
+    }, null, -1)
+  ]));
+}
+const ge = /* @__PURE__ */ $(Ze, [["render", Ge]]), _e = ["tabindex"], et = {
+  key: 2,
+  class: "list-button-icon custom-icon"
+}, tt = /* @__PURE__ */ Q({
+  __name: "ListButton",
+  props: {
+    // eslint-disable-line
+    parentMethods: {
+      type: Object,
+      required: !0
+    },
+    showDropDown: {
+      type: Boolean,
+      required: !0
+    },
+    enableTextFilter: {
+      type: Boolean,
+      required: !0
+    },
+    customIcon: {
+      default: null,
+      type: [Object, Function]
+    },
+    reverseDropDownList: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  setup(e) {
+    const s = e;
+    function b() {
+      s.enableTextFilter || s.parentMethods.openList();
+    }
+    function h(o) {
+      s.enableTextFilter ? (s.parentMethods.focusInput(), o.stopPropagation(), o.preventDefault()) : s.parentMethods.press(o);
+    }
+    return (o, i) => (w(), T("button", {
+      tabindex: e.enableTextFilter ? -1 : 0,
+      onKeyup: [
+        i[0] || (i[0] = m((a) => h(a), ["enter"])),
+        i[1] || (i[1] = m((a) => e.parentMethods.press(a), ["space"])),
+        i[2] || (i[2] = m((a) => e.parentMethods.press(a), ["esc"]))
+      ],
+      onKeydown: [
+        i[3] || (i[3] = m((a) => e.parentMethods.press(a), ["up"])),
+        i[4] || (i[4] = m((a) => e.parentMethods.press(a), ["down"]))
+      ],
+      onFocusin: i[5] || (i[5] = (a) => e.parentMethods.openList()),
+      onFocusout: i[6] || (i[6] = (a) => e.parentMethods.unfocus(a)),
+      onClick: i[7] || (i[7] = (a) => b()),
+      type: "button",
+      class: S([[{ "click-through": s.enableTextFilter || s.showDropDown }], "list-button"])
+    }, [
+      Le(o.$slots, "default", {}, void 0, !0),
+      H("span", {
+        class: S(["list-button-icon-div", { "bigger-gap": s.showDropDown }])
+      }, [
+        e.customIcon ? j("", !0) : (w(), T("span", {
+          key: 0,
+          class: S(["list-button-icon", [{ "rotate-180": !s.showDropDown }]])
+        }, [
+          W(ge, { "aria-hidden": "true" })
+        ], 2)),
+        e.customIcon ? j("", !0) : (w(), T("span", {
+          key: 1,
+          class: S(["list-button-icon", [{ "rotate-180": s.showDropDown }]])
+        }, [
+          e.customIcon == null ? (w(), ce(ge, {
+            key: 0,
+            "aria-hidden": "true"
+          })) : j("", !0)
+        ], 2)),
+        e.customIcon ? (w(), T("span", et, [
+          (w(), ce(Se(e.customIcon), { "aria-hidden": "true" }))
+        ])) : j("", !0)
+      ], 2)
+    ], 42, _e));
+  }
+}), nt = /* @__PURE__ */ $(tt, [["__scopeId", "data-v-f5167d40"]]), ot = /* @__PURE__ */ Q({
+  __name: "super-list",
+  props: {
+    selected: {
+      type: [String, Number, Object, null, void 0]
+    },
+    options: {
+      type: [Function, Array],
+      required: !0
+    },
+    maxListOptions: {
+      type: Number,
+      default: 50
+    },
+    maxListHeightPX: {
+      type: Number,
+      default: 200
+    },
+    tooltip: {
+      type: String,
+      required: !1
+    },
+    objectLabelKeyName: {
+      type: String,
+      default: ""
+    },
+    enumKeyToLabelObjectArray: {
+      type: Object,
+      default: void 0
+    },
+    listAnimationDurationMs: {
+      type: Number,
+      default: 300
+    },
+    customIcon: {
+      default: null,
+      type: [Object, Function]
+    },
+    forceTextFilterVisibilityTo: {
+      type: Boolean,
+      default: void 0
+    },
+    customPlaceHolderFunction: {
+      type: Function,
+      default: null
+    },
+    colour: {
+      type: String,
+      default: "black"
+    }
+  },
+  emits: { "update:selected": null },
+  setup(e, { expose: s, emit: b }) {
+    const h = b, o = e, i = f([]), a = new Re(), t = f(0), l = D(() => o.forceTextFilterVisibilityTo !== void 0 ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), g = f(!1), p = f(!1), N = f(!1), k = f(!0), d = f(!1), c = f(!1), L = f(he), C = f(be), E = f("");
+    F(
+      () => E.value,
+      (n, r) => {
+        n !== r && typeof o.options == "function" && ee(n);
+      }
+    );
+    const ne = () => {
+      l.value && C?.value?.blurInput();
+    }, P = () => {
+      clearTimeout(J), ne(), E.value = "", g.value = !1, k.value = !0;
+    }, oe = D(() => c?.value === !0 ? "Error loading data" : d?.value === !0 ? "Loading..." : Z(o.selected)), V = (n) => {
+      n && h("update:selected", n), P();
+    }, M = (n, r = !1) => Be(
+      n,
+      r ? o.customPlaceHolderFunction : void 0,
+      o.objectLabelKeyName,
+      o.enumKeyToLabelObjectArray
+    );
+    function Z(n) {
+      return M(n, !0);
+    }
+    function z() {
+      throw d.value = !0, c.value = !0, new Error("Invalid options argument provided to ListInputComponent");
+    }
+    function se() {
+      throw d.value = !0, c.value = !0, new Error("Invalid response provided to ListInputComponent, no total count key found");
+    }
+    function Y() {
+      throw d.value = !0, c.value = !0, new Error("Invalid objectLabelKeyName for provided Dropdown list value.");
+    }
+    ye(() => {
+      typeof o.options != "function" && !Array.isArray(o.options) ? z() : y();
+    });
+    const R = f(!1), G = f(0), O = f(0), A = f(0);
+    F(
+      () => O.value,
+      (n, r) => {
+        n != r && !p.value && (A.value = n);
+      },
+      { immediate: !0 }
+    ), F(
+      () => p.value,
+      (n) => {
+        n || (A.value = O.value);
+      },
+      { immediate: !0 }
+    );
+    const q = D(() => {
+      if (typeof o.options == "function" && !Array.isArray(o.options)) return i.value;
+      const n = E.value, r = i.value;
+      return n === "" ? r : r.filter((v) => M(v).toLowerCase().includes(n.toLowerCase()));
+    });
+    F(
+      () => q.value,
+      (n, r) => {
+        JSON.stringify(n) !== JSON.stringify(r) && K();
+      },
+      { immediate: !1, deep: !0 }
+    );
+    const ie = () => {
+      R.value = !0;
+    }, K = () => {
+      const n = _();
+      G.value = n, O.value = n > -1 ? n : 0;
+    };
+    function _() {
+      if (o.selected == null) return -1;
+      const n = i.value.map((v) => M(v)), r = n.filter((v) => v === M(o.selected));
+      if (r.length > 1) {
+        const v = r.map((I) => n.indexOf(I));
+        for (let I = 0; I < v.length; I++) {
+          const B = JSON.stringify(i.value[v[I]]), ae = JSON.stringify(o.selected);
+          if (B === ae) return v[I];
+        }
+        return -1;
+      }
+      return n.indexOf(M(o.selected));
+    }
+    const X = () => {
+      d.value || (g.value || (p.value = !1, K(), le(), g.value = !0), R.value = !1, k.value = !1);
+    }, le = () => {
+      const n = window.innerWidth != null && window.innerWidth < 640, r = C.value.textInputRef;
+      n && l.value && (re(), r?.scrollIntoView({ block: "start" }));
+    }, U = f(!0);
+    let J = setTimeout(() => {
+    }, 0);
+    function re() {
+      C.value.textInputRef && (clearTimeout(J), U.value = !1, J = setTimeout(() => {
+        U.value = !0;
+      }, 300));
+    }
+    const u = () => C.value.focusInput();
+    async function y() {
+      typeof o.options == "function" ? await ee(E.value ? E.value : void 0, !0) : (pe(o.options), t.value = i.value.length), x();
+    }
+    s({ initializeOptions: y, getLabel: M });
+    function x() {
+      _() == -1 && i.value && !!i.value[0] && V(i.value[0]);
+    }
+    async function ee(n, r = !0) {
+      d.value = r;
+      const v = async () => o.options(o.maxListOptions, n || ""), I = (B) => {
+        (!B || !("data" in B)) && z(), pe(B.data), we(B?.data?.length ?? 0).then(() => {
+          d.value = !1;
+        });
+      };
+      await a.resetAndExecute(v, I);
+    }
+    async function we(n) {
+      const r = async () => o.options(1, ""), v = (I) => {
+        (!I || !("totalNum" in I)) && se(), t.value = I.totalNum ?? n;
+      };
+      await a.resetAndExecute(r, v);
+    }
+    const fe = () => C?.value?.textInputRef?.getElementsByTagName("li")[O.value] ?? null, xe = (n) => {
+      g.value == !1 ? X() : n && Ie(n);
+    }, Ie = (n) => {
+      const r = n.key || n.code;
+      (r === "Tab" || r === "Escape") && P(), r === "ArrowDown" && Te(n), r === "ArrowUp" && Oe(n), (r === "Enter" || r === " ") && De(), n.preventDefault(), n.stopPropagation();
+    }, De = () => {
+      q.value.length > 0 ? (p.value = !0, V(q.value[O.value])) : P();
+    }, Te = (n) => {
+      k.value = !0, O.value < q.value.length - 1 && (n.preventDefault(), R.value = !1, O.value++, fe()?.focus());
+    }, Oe = (n) => {
+      k.value = !0, O.value > 0 && (n.preventDefault(), R.value = !1, O.value--, fe()?.focus());
+    }, Me = (n) => {
+      if (g?.value === !1) return;
+      E.value.length > 0 && (p.value = !0);
+      const r = L?.value?.listContainerRef, v = C?.value?.textInputRef, I = n?.relatedTarget && v?.isEqualNode(n?.relatedTarget), B = n?.relatedTarget && r && r.contains(n?.relatedTarget), ae = n?.relatedTarget && r && r.isEqualNode(n?.relatedTarget);
+      if (!(B || I)) {
+        if (ae) {
+          u();
+          return;
+        }
+        P();
+      }
+    };
+    function pe(n) {
+      Array.isArray(n) || z(), n.length > 0 && typeof n[0] == "object" && Ce(n), i.value = n;
+    }
+    function Ce(n) {
+      (!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && Y();
+      const r = o.objectLabelKeyName;
+      for (let v = 0; v < n.length; v++)
+        (typeof n[v] != "object" || !(r in n[v])) && Y();
+    }
+    const ue = {
+      openList: X,
+      unfocus: Me,
+      press: xe,
+      mouseOverList: ie,
+      getLabel: M,
+      updatedSelected: V,
+      focusInput: u,
+      closeList: P
+    };
+    return (n, r) => (w(), T("div", {
+      style: { position: "relative" },
+      class: S(n.$attrs.class)
+    }, [
+      W(he, {
+        ref_key: "itemListRef",
+        ref: L,
+        "show-drop-down": g.value,
+        filteredListItems: q.value,
+        mouseHoveringOnList: R.value,
+        focusedIndex: A.value,
+        selectedIndex: G.value,
+        "max-list-height-p-x": e.maxListHeightPX,
+        "list-animation-duration-ms": e.listAnimationDurationMs,
+        "parent-methods": ue,
+        blockListChange: p.value,
+        "onUpdate:blockListChange": r[1] || (r[1] = (v) => p.value = v),
+        "total-options-count": t.value,
+        onReverseDropDownList: r[2] || (r[2] = (v) => N.value = v),
+        enableScrollClose: U.value
+      }, {
+        default: me(() => [
+          W(nt, {
+            "parent-methods": ue,
+            "show-drop-down": g.value,
+            "enable-text-filter": l.value,
+            "custom-icon": e.customIcon,
+            "reverse-drop-down-list": N.value
+          }, {
+            default: me(() => [
+              W(be, {
+                ref_key: "dropDownTextInput",
+                ref: C,
+                "enable-text-filter": l.value,
+                "show-drop-down": g.value,
+                placeholder: oe.value,
+                "enable-button-click": k.value,
+                "parent-methods": ue,
+                "onUpdate:query": r[0] || (r[0] = (v) => E.value = v)
+              }, null, 8, ["enable-text-filter", "show-drop-down", "placeholder", "enable-button-click"])
+            ]),
+            _: 1
+          }, 8, ["show-drop-down", "enable-text-filter", "custom-icon", "reverse-drop-down-list"])
+        ]),
+        _: 1
+      }, 8, ["show-drop-down", "filteredListItems", "mouseHoveringOnList", "focusedIndex", "selectedIndex", "max-list-height-p-x", "list-animation-duration-ms", "blockListChange", "total-options-count", "enableScrollClose"])
+    ], 2));
+  }
+}), it = /* @__PURE__ */ $(ot, [["__scopeId", "data-v-f0f16320"]]);
+export {
+  it as default
+};
+//# sourceMappingURL=super-list.js.map