@jblehm/super-list 1.0.44 → 1.0.46

package/README.md

@@ -1,4 +1,4 @@
-# superlist V1.0.44
+# superlist V1.0.46
 A minimally-styled, mobile supported searchable combobox for Vue.
 
 ![list_img_1.png](https://drive.google.com/thumbnail?id=1vccx8i3aOcXCjT1cflzeHJs0BNhj6I-u&sz=w1000)

package/dist/index.css

@@ -1 +1 @@
-.list-filter-text-input[data-v-edeb41fa]{color:var(--superlist-text-colour, rgb(17, 24, 39));text-align:center;padding:.125rem 2rem .125rem .5rem;width:100%;height:100%;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border:0 none;pointer-events:auto;cursor:text}.list-filter-text-input[data-v-edeb41fa]:focus,.list-filter-text-input[data-v-edeb41fa]:focus-visible,.list-filter-text-input[data-v-edeb41fa]:active{text-align:left}.click-through[data-v-edeb41fa]{pointer-events:none}.dark-placeholder-text[data-v-edeb41fa]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-edeb41fa]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-edeb41fa]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-edeb41fa]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-e4eeb2f7]{text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-text-colour, rgb(55, 60, 65));transition-property:font-weight,background-color,color,text-shadow;transition-duration:.5s;transition-timing-function:ease;font-weight:400;text-shadow:1px 1px 3px var(--superlist-background-colour, white)}.list-option[data-v-e4eeb2f7]:focus-visible,.list-option>span[data-v-e4eeb2f7]:focus-visible{outline:none}.list-option-selected[data-v-e4eeb2f7]{font-weight:600}.list-option-message[data-v-e4eeb2f7]{text-shadow:1px 1px 3px var(--superlist-background-colour, white);text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.list-option-active[data-v-e4eeb2f7]:hover,.list-option-active[data-v-e4eeb2f7],.list-option-selected[data-v-e4eeb2f7]:hover,.list-option[data-v-e4eeb2f7]:hover{font-weight:600;background-color:var(--superlist-theme-colour, rgb(77, 168, 11, .8));color:var(--superlist-background-colour, white);text-shadow:1px 1px 3px var(--superlist-theme-colour, rgb(77, 168, 11, .8));transition-duration:0s!important}.list-item-icon[data-v-e4eeb2f7]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-e4eeb2f7]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-bb412ce9]{top:var(--parent-y)}.list-reverse[data-v-bb412ce9]{bottom:var(--parent-y)}.select-list[data-v-bb412ce9]{--parent-width: var(--v15890c8c);--parent-x: var(--v4338b9be);--parent-y: var(--v4338bd7f);--duration: var(--v6e74f140);--border-radius: var(--superlist-list-border-radius, 0);border-radius:var(--border-radius);width:var(--parent-width);min-width:var(--parent-width);left:var(--parent-x);display:block;transition-property:max-height,opacity,visibility,box-shadow;transition-duration:var(--duration, .3s);transition-timing-function:cubic-bezier(.1,.9,.35,.98);position:absolute;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background-color:#ffffffb3;align-items:baseline;opacity:.25;z-index:999;visibility:collapse;overflow:auto;max-height:0;border:none!important}.select-list[data-v-bb412ce9]:focus-visible,.select-list>ul[data-v-bb412ce9]:focus-visible,.super-list-button-container[data-v-bb412ce9]:focus-visible{outline:none}.super-list-button-container[data-v-bb412ce9]{height:100%;width:100%}.select-list.select-list-open[data-v-bb412ce9]{z-index:999999;--max-height: var(--v4db56ff9);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-bb412ce9]{overflow:hidden}.select-list-fixed[data-v-bb412ce9]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-bb412ce9]{--duration: var(--v6e74f140);overflow:visible;margin:0;padding:0;border-style:none;color:var(--superlist-text-colour, rgb(55, 60, 65));list-style:none;max-width:100%}.select-list.select-list-scrollable[data-v-bb412ce9]{border-radius:var(--border-radius)}.select-list[data-v-bb412ce9]:not(.select-list-fixed){transition:none;box-shadow:none!important}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-bb412ce9]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-bb412ce9]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-01ef8e37]{display:flex;transition-timing-function:ease-in-out;transition-duration:.2s;transition-property:transform;width:.6rem;transform:rotate(0);color:var(--superlist-text-colour, rgb(17, 24, 39));justify-content:center;max-height:18%}.list-button-icon.custom-icon[data-v-01ef8e37]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-01ef8e37]{transform:rotate(180deg)}.list-button[data-v-01ef8e37]{position:relative;padding:0;margin:0;width:100%;max-height:100%;height:100%;background-color:var(--superlist-background-colour, white);align-items:center;pointer-events:auto;cursor:pointer}.list-button[data-v-01ef8e37]:focus,.list-button[data-v-01ef8e37]:focus-visible,.list-button[data-v-01ef8e37]:active{text-align:left}.list-button-icon-div[data-v-01ef8e37]{pointer-events:none;position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:.75rem;max-height:100%;height:100%;gap:max(.15rem,calc(6.25% + .075rem));transition:gap .2s}.list-button-icon-div.bigger-gap[data-v-01ef8e37]{gap:calc(40% - .25rem)}.click-through[data-v-01ef8e37]{pointer-events:none}[data-v-55c6d2bd]{box-sizing:border-box}
+.list-filter-text-input[data-v-edeb41fa]{color:var(--superlist-text-colour, rgb(17, 24, 39));text-align:center;padding:.125rem 2rem .125rem .5rem;width:100%;height:100%;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border:0 none;pointer-events:auto;cursor:text}.list-filter-text-input[data-v-edeb41fa]:focus,.list-filter-text-input[data-v-edeb41fa]:focus-visible,.list-filter-text-input[data-v-edeb41fa]:active{text-align:left}.click-through[data-v-edeb41fa]{pointer-events:none}.dark-placeholder-text[data-v-edeb41fa]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-edeb41fa]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-edeb41fa]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-edeb41fa]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-e4eeb2f7]{text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-text-colour, rgb(55, 60, 65));transition-property:font-weight,background-color,color,text-shadow;transition-duration:.5s;transition-timing-function:ease;font-weight:400;text-shadow:1px 1px 3px var(--superlist-background-colour, white)}.list-option[data-v-e4eeb2f7]:focus-visible,.list-option>span[data-v-e4eeb2f7]:focus-visible{outline:none}.list-option-selected[data-v-e4eeb2f7]{font-weight:600}.list-option-message[data-v-e4eeb2f7]{text-shadow:1px 1px 3px var(--superlist-background-colour, white);text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.list-option-active[data-v-e4eeb2f7]:hover,.list-option-active[data-v-e4eeb2f7],.list-option-selected[data-v-e4eeb2f7]:hover,.list-option[data-v-e4eeb2f7]:hover{font-weight:600;background-color:var(--superlist-theme-colour, rgb(77, 168, 11, .8));color:var(--superlist-background-colour, white);text-shadow:1px 1px 3px var(--superlist-theme-colour, rgb(77, 168, 11, .8));transition-duration:0s!important}.list-item-icon[data-v-e4eeb2f7]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-e4eeb2f7]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-bb412ce9]{top:var(--parent-y)}.list-reverse[data-v-bb412ce9]{bottom:var(--parent-y)}.select-list[data-v-bb412ce9]{--parent-width: var(--v15890c8c);--parent-x: var(--v4338b9be);--parent-y: var(--v4338bd7f);--duration: var(--v6e74f140);--border-radius: var(--superlist-list-border-radius, 0);border-radius:var(--border-radius);width:var(--parent-width);min-width:var(--parent-width);left:var(--parent-x);display:block;transition-property:max-height,opacity,visibility,box-shadow;transition-duration:var(--duration, .3s);transition-timing-function:cubic-bezier(.1,.9,.35,.98);position:absolute;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background-color:#ffffffb3;align-items:baseline;opacity:.25;z-index:999;visibility:collapse;overflow:auto;max-height:0;border:none!important}.select-list[data-v-bb412ce9]:focus-visible,.select-list>ul[data-v-bb412ce9]:focus-visible,.super-list-button-container[data-v-bb412ce9]:focus-visible{outline:none}.super-list-button-container[data-v-bb412ce9]{height:100%;width:100%}.select-list.select-list-open[data-v-bb412ce9]{z-index:999999;--max-height: var(--v4db56ff9);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-bb412ce9]{overflow:hidden}.select-list-fixed[data-v-bb412ce9]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-bb412ce9]{--duration: var(--v6e74f140);overflow:visible;margin:0;padding:0;border-style:none;color:var(--superlist-text-colour, rgb(55, 60, 65));list-style:none;max-width:100%}.select-list.select-list-scrollable[data-v-bb412ce9]{border-radius:var(--border-radius)}.select-list[data-v-bb412ce9]:not(.select-list-fixed){transition:none;box-shadow:none!important}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-bb412ce9]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-bb412ce9]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-01ef8e37]{display:flex;transition-timing-function:ease-in-out;transition-duration:.2s;transition-property:transform;width:.6rem;transform:rotate(0);color:var(--superlist-text-colour, rgb(17, 24, 39));justify-content:center;max-height:18%}.list-button-icon.custom-icon[data-v-01ef8e37]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-01ef8e37]{transform:rotate(180deg)}.list-button[data-v-01ef8e37]{position:relative;padding:0;margin:0;width:100%;max-height:100%;height:100%;background-color:var(--superlist-background-colour, white);align-items:center;pointer-events:auto;cursor:pointer}.list-button[data-v-01ef8e37]:focus,.list-button[data-v-01ef8e37]:focus-visible,.list-button[data-v-01ef8e37]:active{text-align:left}.list-button-icon-div[data-v-01ef8e37]{pointer-events:none;position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:.75rem;max-height:100%;height:100%;gap:max(.15rem,calc(6.25% + .075rem));transition:gap .2s}.list-button-icon-div.bigger-gap[data-v-01ef8e37]{gap:calc(40% - .25rem)}.click-through[data-v-01ef8e37]{pointer-events:none}[data-v-e02552d0]{box-sizing:border-box}

package/dist/super-list.js

@@ -1,5 +1,5 @@
-import { defineComponent as Y, ref as v, computed as M, openBlock as T, createElementBlock as C, withModifiers as Q, createElementVNode as B, normalizeClass as R, withKeys as h, useTemplateRef as Ne, watch as F, Fragment as fe, renderList as Se, toDisplayString as me, createBlock as pe, createCommentVNode as K, useCssVars as Fe, onMounted as Le, onUnmounted as Be, renderSlot as xe, createVNode as Z, nextTick as He, resolveDynamicComponent as Re, withCtx as be } from "vue";
-class Pe {
+import { defineComponent as Y, ref as v, computed as M, openBlock as T, createElementBlock as C, withModifiers as Q, createElementVNode as B, normalizeClass as R, withKeys as h, useTemplateRef as Fe, watch as F, Fragment as fe, renderList as Be, toDisplayString as be, createBlock as pe, createCommentVNode as K, useCssVars as He, onMounted as xe, onUnmounted as Re, renderSlot as Ie, createVNode as Z, nextTick as Pe, resolveDynamicComponent as qe, withCtx as he } from "vue";
+class je {
   eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
   config = {
     attributes: !0,
@@ -46,13 +46,13 @@ class Pe {
     window.removeEventListener("resize", this.callbackFunction);
   }
 }
-function qe(e, i, d, b) {
-  return i != null ? i(e) : e == null ? "" : typeof e == "object" ? e[d] : b ? je(e, b) : "" + e;
+function $e(e, i, d, b) {
+  return i != null ? i(e) : e == null ? "" : typeof e == "object" ? e[d] : b ? Ke(e, b) : "" + e;
 }
-function je(e, i) {
+function Ke(e, i) {
   return i.find((d) => d.type === e)?.label ?? "";
 }
-class $e {
+class Ve {
   constructor() {
     this.abortController = new AbortController(), this.func = () => {
     }, this.then = () => {
@@ -79,7 +79,7 @@ class $e {
     return this.abort("New Request From Controller."), this.setFunc(i), this.setThen(d), this.execute();
   }
 }
-const Ke = ["tabindex", "placeholder", "size"], Ve = /* @__PURE__ */ Y({
+const ze = ["tabindex", "placeholder", "size"], Xe = /* @__PURE__ */ Y({
   __name: "ListTextInput",
   props: {
     enableTextFilter: {
@@ -165,7 +165,7 @@ const Ke = ["tabindex", "placeholder", "size"], Ve = /* @__PURE__ */ Y({
           A.value,
           { "text-filter-disabled": !e.enableTextFilter }
         ], "list-filter-text-input"])
-      }, null, 42, Ke)
+      }, null, 42, ze)
     ], 32));
   }
 }), V = (e, i) => {
@@ -173,22 +173,22 @@ const Ke = ["tabindex", "placeholder", "size"], Ve = /* @__PURE__ */ Y({
   for (const [b, o] of i)
     d[b] = o;
   return d;
-}, he = /* @__PURE__ */ V(Ve, [["__scopeId", "data-v-edeb41fa"]]), ze = {}, Xe = {
+}, ge = /* @__PURE__ */ V(Xe, [["__scopeId", "data-v-edeb41fa"]]), Ue = {}, Je = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "currentColor",
   "aria-hidden": "true",
   "data-slot": "icon",
   viewBox: "0 -16 16 17"
 };
-function Ue(e, i) {
-  return T(), C("svg", Xe, [...i[0] || (i[0] = [
+function We(e, i) {
+  return T(), C("svg", Je, [...i[0] || (i[0] = [
     B("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 Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = { class: "list-item-span" }, Ze = { class: "list-item-span" }, Ye = /* @__PURE__ */ Y({
+const Qe = /* @__PURE__ */ V(Ue, [["render", We]]), Ze = ["onMousedown"], Ye = { class: "list-item-span" }, Ge = { class: "list-item-span" }, _e = /* @__PURE__ */ Y({
   __name: "ListItem",
   props: {
     mouseHoveringOnList: {
@@ -225,7 +225,7 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
     }
   },
   setup(e) {
-    const i = e, d = Ne("items"), b = M(() => {
+    const i = e, d = Fe("items"), b = M(() => {
       if (!d?.value) return null;
       const t = (Array.isArray(d.value) ? d.value : [d.value])[i.focusedIndex];
       return t && typeof t == "object" && "scrollIntoView" in t && typeof t.scrollIntoView == "function" ? t : null;
@@ -250,7 +250,7 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
       s && (t.scrollTop = L.offsetTop), c && (t.scrollTop = L.offsetTop + L.clientHeight - t.clientHeight);
     }
     return (L, t) => (T(), C(fe, null, [
-      (T(!0), C(fe, null, Se(e.filteredListItems, (s, c) => (T(), C("li", {
+      (T(!0), C(fe, null, Be(e.filteredListItems, (s, c) => (T(), C("li", {
         key: c,
         ref_for: !0,
         ref: "items",
@@ -274,13 +274,13 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
           "list-option"
         ])
       }, [
-        B("span", Qe, me(e.parentMethods.getLabel(s)), 1),
-        e.selectedIndex === c ? (T(), pe(Je, {
+        B("span", Ye, be(e.parentMethods.getLabel(s)), 1),
+        e.selectedIndex === c ? (T(), pe(Qe, {
           key: 0,
           class: "list-item-icon",
           "aria-hidden": "true"
         })) : K("", !0)
-      ], 42, We))), 128)),
+      ], 42, Ze))), 128)),
       e.filteredListItems.length === 0 ? (T(), C("li", {
         key: 0,
         onKeyup: [
@@ -315,11 +315,11 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
         tabindex: "-1",
         class: "list-option-message"
       }, [
-        B("span", Ze, " +" + me(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
+        B("span", Ge, " +" + be(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
       ], 32)) : K("", !0)
     ], 64));
   }
-}), Ge = /* @__PURE__ */ V(Ye, [["__scopeId", "data-v-e4eeb2f7"]]), _e = /* @__PURE__ */ Y({
+}), et = /* @__PURE__ */ V(_e, [["__scopeId", "data-v-e4eeb2f7"]]), tt = /* @__PURE__ */ Y({
   __name: "ItemList",
   props: {
     mouseHoveringOnList: {
@@ -369,7 +369,7 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
   },
   emits: ["reverseDropDownList"],
   setup(e, { expose: i, emit: d }) {
-    Fe((r) => ({
+    He((l) => ({
       v15890c8c: A.value,
       v4338b9be: S.value,
       v4338bd7f: se.value,
@@ -379,17 +379,17 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
     const b = d, o = e, p = v(null), L = v(null), t = v(null), s = v(0), c = v(0), u = v(0), w = v(0), A = v("0px"), I = v(!1), N = v([]), g = v(0), a = M(() => !I.value || window?.innerHeight == null ? !1 : le() && G()), m = M(() => o.maxListHeightPX >= g.value);
     F(
       () => a.value,
-      (r) => b("reverseDropDownList", r),
+      (l) => b("reverseDropDownList", l),
       { immediate: !0 }
     );
     const S = M(() => s.value + "px"), se = M(() => w.value + "px");
     i({ listContainerRef: t });
-    const P = (r) => {
-      r?.key && r.key === " " && r.preventDefault();
-    }, ie = (r) => {
-      o.parentMethods.unfocus(r);
-    }, U = (r) => {
-      const y = t?.value, x = r.target;
+    const P = (l) => {
+      l?.key && l.key === " " && l.preventDefault();
+    }, ie = (l) => {
+      o.parentMethods.unfocus(l);
+    }, J = (l) => {
+      const y = t?.value, x = l.target;
       (!(y && x && y.contains(x)) || y.isEqualNode(x)) && o.parentMethods.focusInput();
     };
     function k() {
@@ -397,8 +397,8 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
     }
     function z() {
       if (!I.value || k() === 0) return o.maxListHeightPX;
-      const r = k() === 0 ? o.maxListHeightPX : +k();
-      return o.maxListHeightPX && o.maxListHeightPX > r ? r : o.maxListHeightPX;
+      const l = k() === 0 ? o.maxListHeightPX : +k();
+      return o.maxListHeightPX && o.maxListHeightPX > l ? l : o.maxListHeightPX;
     }
     function le() {
       return c.value > z();
@@ -409,8 +409,8 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
     const q = M(() => (o.maxListHeightPX || 0) + "px"), _ = M(() => (o.listAnimationDurationMs || 0) + "ms"), E = M(() => o.blockListChange ? N.value : o.filteredListItems);
     F(
       () => E,
-      (r) => {
-        r && (N.value = r.value);
+      (l) => {
+        l && (N.value = l.value);
       },
       { immediate: !1, deep: !0 }
     );
@@ -426,35 +426,35 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
     }
     F(
       () => o.showDropDown,
-      (r, y) => {
-        r !== y && ($(), r ? re() : ee());
+      (l, y) => {
+        l !== y && ($(), l ? re() : ee());
       },
       { immediate: !0 }
     );
-    function X(r) {
-      $(), He(() => $()), te(r);
+    function X(l) {
+      $(), Pe(() => $()), te(l);
     }
-    function te(r) {
-      if (!o.enableScrollClose || !o.showDropDown || typeof t?.value?.contains != "function" || r?.target?.nodeType == null || ue(r)) return;
-      const x = ["scroll", "wheel", "touchmove"].includes(r?.type);
+    function te(l) {
+      if (!o.enableScrollClose || !o.showDropDown || typeof t?.value?.contains != "function" || l?.target?.nodeType == null || ue(l)) return;
+      const x = ["scroll", "wheel", "touchmove"].includes(l?.type);
       o.showDropDown && x && o.parentMethods.closeList();
     }
-    function ue(r) {
-      const y = !!p.value?.contains(r?.target), x = !!t.value?.contains(r.target), W = [r?.srcElement?.id, r?.target?.id].includes("super-list-select-list");
-      return y || x || W;
+    function ue(l) {
+      const y = !!p.value?.contains(l?.target), x = !!t.value?.contains(l.target), U = [l?.srcElement?.id, l?.target?.id].includes("super-list-select-list");
+      return y || x || U;
     }
     function $() {
-      J(), ae();
+      W(), ae();
     }
-    function J() {
+    function W() {
       if (p?.value == null) return;
-      const r = p.value.getBoundingClientRect();
-      c.value = r.top, u.value = window.innerHeight - r.bottom, A.value = r.width + "px";
+      const l = p.value.getBoundingClientRect();
+      c.value = l.top, u.value = window.innerHeight - l.bottom, A.value = l.width + "px";
     }
     function ae() {
       if (p?.value == null || t?.value == null) return;
-      const r = oe().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x = w.value, W = s.value;
-      a.value ? w.value = x - (r.top - y.bottom) : w.value = x - (y.top - r.bottom), s.value = W - (y.left - r.left);
+      const l = oe().getBoundingClientRect(), y = t.value.getBoundingClientRect(), x = w.value, U = s.value;
+      a.value ? w.value = x - (l.top - y.bottom) : w.value = x - (y.top - l.bottom), s.value = U - (y.left - l.left);
     }
     function ne() {
       return (p?.value).getElementsByTagName("button")[0];
@@ -462,17 +462,17 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
     function oe() {
       return p?.value;
     }
-    return Le(() => {
-      O = new Pe(X, ne()), setTimeout(() => X(void 0), 250);
-    }), Be(() => {
+    return xe(() => {
+      O = new je(X, ne()), setTimeout(() => X(void 0), 250);
+    }), Re(() => {
       O?.unobserve();
-    }), (r, y) => (T(), C(fe, null, [
+    }), (l, y) => (T(), C(fe, null, [
       B("div", {
         ref_key: "dropDownButtonContainer",
         ref: p,
         class: "super-list-button-container"
       }, [
-        xe(r.$slots, "default", {}, void 0, !0)
+        Ie(l.$slots, "default", {}, void 0, !0)
       ], 512),
       B("div", {
         id: "super-list-select-list",
@@ -489,7 +489,7 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
           { "select-list-scrollable": !m.value }
         ]),
         onKeydown: y[1] || (y[1] = h((x) => P(x), ["space"])),
-        onMouseup: y[2] || (y[2] = Q((x) => U(x), ["left"])),
+        onMouseup: y[2] || (y[2] = Q((x) => J(x), ["left"])),
         onFocusout: y[3] || (y[3] = (x) => ie(x))
       }, [
         B("ul", {
@@ -498,7 +498,7 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
           ref: L,
           class: "list-content"
         }, [
-          Z(Ge, {
+          Z(et, {
             filteredListItems: N.value,
             mouseHoveringOnList: e.mouseHoveringOnList,
             focusedIndex: e.focusedIndex,
@@ -512,25 +512,25 @@ const Je = /* @__PURE__ */ V(ze, [["render", Ue]]), We = ["onMousedown"], Qe = {
       ], 34)
     ], 64));
   }
-}), ge = /* @__PURE__ */ V(_e, [["__scopeId", "data-v-bb412ce9"]]), et = {}, tt = {
+}), ye = /* @__PURE__ */ V(tt, [["__scopeId", "data-v-bb412ce9"]]), nt = {}, ot = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "currentColor",
   "aria-hidden": "true",
   "data-slot": "icon",
   viewBox: "0 0 12 6"
 };
-function nt(e, i) {
-  return T(), C("svg", tt, [...i[0] || (i[0] = [
+function st(e, i) {
+  return T(), C("svg", ot, [...i[0] || (i[0] = [
     B("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 ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
+const we = /* @__PURE__ */ V(nt, [["render", st]]), it = ["tabindex"], lt = {
   key: 2,
   class: "list-button-icon custom-icon"
-}, it = /* @__PURE__ */ Y({
+}, rt = /* @__PURE__ */ Y({
   __name: "ListButton",
   props: {
     // eslint-disable-line
@@ -588,7 +588,7 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
       type: "button",
       class: R([[{ "click-through": d.enableTextFilter || d.showDropDown }], "list-button"])
     }, [
-      xe(c.$slots, "default", {}, void 0, !0),
+      Ie(c.$slots, "default", {}, void 0, !0),
       B("span", {
         class: R(["list-button-icon-div", { "bigger-gap": d.showDropDown }])
       }, [
@@ -596,24 +596,24 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
           key: 0,
           class: R(["list-button-icon", [{ "rotate-180": !d.showDropDown }]])
         }, [
-          Z(ye, { "aria-hidden": "true" })
+          Z(we, { "aria-hidden": "true" })
         ], 2)),
         e.customIcon ? K("", !0) : (T(), C("span", {
           key: 1,
           class: R(["list-button-icon", [{ "rotate-180": d.showDropDown }]])
         }, [
-          e.customIcon == null ? (T(), pe(ye, {
+          e.customIcon == null ? (T(), pe(we, {
             key: 0,
             "aria-hidden": "true"
           })) : K("", !0)
         ], 2)),
-        e.customIcon ? (T(), C("span", st, [
-          (T(), pe(Re(e.customIcon), { "aria-hidden": "true" }))
+        e.customIcon ? (T(), C("span", lt, [
+          (T(), pe(qe(e.customIcon), { "aria-hidden": "true" }))
         ])) : K("", !0)
       ], 2)
-    ], 42, ot));
+    ], 42, it));
   }
-}), we = /* @__PURE__ */ V(it, [["__scopeId", "data-v-01ef8e37"]]), lt = /* @__PURE__ */ Y({
+}), Le = /* @__PURE__ */ V(rt, [["__scopeId", "data-v-01ef8e37"]]), ut = /* @__PURE__ */ Y({
   __name: "super-list",
   props: {
     selected: {
@@ -662,20 +662,20 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
   },
   emits: { "update:selected": null },
   setup(e, { expose: i, emit: d }) {
-    const b = d, o = e, p = v([]), L = new $e(), t = v(0), s = M(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = v(!1), u = v(!1), w = v(!1), A = v(!0), I = v(!1), N = v(!1), g = v(ge), a = v(he), m = v(we), S = v("");
+    const b = d, o = e, p = v([]), L = new Ve(), t = v(0), s = M(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = v(!1), u = v(!1), w = v(!1), A = v(!0), I = v(!1), N = v(!1), g = v(ye), a = v(ge), m = v(Le), S = v("");
     F(
       () => S.value,
-      (n, l) => {
-        n !== l && typeof o.options == "function" && y(n);
+      (n, r) => {
+        n !== r && typeof o.options == "function" && U(n);
       }
     );
     const se = () => {
       s.value && a?.value?.blurInput();
     }, P = () => {
-      clearTimeout(J), se(), S.value = "", c.value = !1, A.value = !0;
-    }, ie = M(() => N?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : k(o.selected)), U = (n) => {
+      clearTimeout(W), se(), S.value = "", c.value = !1, A.value = !0;
+    }, ie = M(() => N?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : k(o.selected)), J = (n) => {
       n && b("update:selected", n), P();
-    }, k = (n) => qe(
+    }, k = (n) => $e(
       n,
       o.customPlaceHolderFunction,
       o.objectLabelKeyName,
@@ -690,14 +690,14 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
     function G() {
       throw I.value = !0, N.value = !0, new Error("Invalid objectLabelKeyName for provided Dropdown list value.");
     }
-    Le(() => {
+    xe(() => {
       typeof o.options != "function" && !Array.isArray(o.options) ? z() : oe();
     });
     const q = v(!1), _ = v(0), E = v(0), j = v(0);
     F(
       () => E.value,
-      (n, l) => {
-        n != l && !u.value && (j.value = n);
+      (n, r) => {
+        n != r && !u.value && (j.value = n);
       },
       { immediate: !0 }
     ), F(
@@ -709,13 +709,13 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
     );
     const O = M(() => {
       if (typeof o.options == "function" && !Array.isArray(o.options)) return p.value;
-      const n = S.value, l = p.value;
-      return n === "" ? l : l.filter((f) => k(f).toLowerCase().includes(n.toLowerCase()));
+      const n = S.value, r = p.value;
+      return n === "" ? r : r.filter((f) => k(f).toLowerCase().includes(n.toLowerCase()));
     });
     F(
       () => O.value,
-      (n, l) => {
-        JSON.stringify(n) !== JSON.stringify(l) && ee();
+      (n, r) => {
+        JSON.stringify(n) !== JSON.stringify(r) && ee();
       },
       { immediate: !1, deep: !0 }
     );
@@ -727,9 +727,9 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
     };
     function X() {
       if (o.selected == null) return -1;
-      const n = O.value.map((f) => k(f)), l = n.filter((f) => f === k(o.selected));
-      if (l.length > 1) {
-        const f = l.map((D) => n.indexOf(D));
+      const n = O.value.map((f) => k(f)), r = n.filter((f) => f === k(o.selected));
+      if (r.length > 1) {
+        const f = r.map((D) => n.indexOf(D));
         for (let D = 0; D < f.length; D++) {
           const H = JSON.stringify(
             O.value[f[D]]
@@ -743,22 +743,22 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
     const te = () => {
       I.value || (c.value || (u.value = !1, ee(), ue(), c.value = !0), q.value = !1, A.value = !1);
     }, ue = () => {
-      const n = window?.innerWidth != null && window.innerWidth < 640, l = screen?.width != null && screen.width < 640, f = a.value.textInputRef;
-      (n || l) && s.value && (ae(), o.scrollTextInputToTopOnMobile && f?.scrollIntoView({ block: "start", inline: "center" }));
+      const n = window?.innerWidth != null && window.innerWidth < 640, r = screen?.width != null && screen.width < 640, f = a.value.textInputRef;
+      (n || r) && s.value && (ae(), o.scrollTextInputToTopOnMobile && f?.scrollIntoView({ block: "start", inline: "center" }));
     }, $ = v(!0);
-    let J = setTimeout(() => {
+    let W = setTimeout(() => {
     }, 0);
     function ae() {
       const n = a.value.textInputRef;
       if (!n) return;
       $.value = !1;
-      let l = null;
+      let r = null;
       const f = () => {
-        l && clearInterval(l), clearTimeout(J), setTimeout(() => {
+        r && clearInterval(r), clearTimeout(W), setTimeout(() => {
           $.value = !0;
         }, 100);
       };
-      J = setTimeout(f, 5e3), l = setInterval(() => {
+      W = setTimeout(f, 5e3), r = setInterval(() => {
         (c.value === !1 || n?.scrollTop === 0 && document.readyState === "complete") && f();
       }, 100);
     }
@@ -766,67 +766,73 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
       s?.value == !0 ? a.value.focusInput() : m?.value?.focusInput && m?.value?.focusInput();
     };
     async function oe() {
-      typeof o.options == "function" ? await y(S.value ? S.value : void 0, !0) : (x(o.options), t.value = p.value.length), r();
+      await l(), x();
     }
-    i({ initializeOptions: oe, getLabel: k });
-    function r() {
-      X() == -1 && p.value && !!p.value[0] && U(p.value[0]);
+    async function l() {
+      typeof o.options == "function" ? await U(S.value ? S.value : void 0, !0) : (ve(o.options), t.value = p.value.length);
     }
-    async function y(n, l = !0) {
-      I.value = l;
+    function y() {
+      l().then();
+    }
+    i({ refreshListData: y, initializeOptions: oe, getLabel: k });
+    function x() {
+      X() == -1 && p.value && !!p.value[0] && J(p.value[0]);
+    }
+    async function U(n, r = !0) {
+      I.value = r;
       const f = async () => o.options(o.maxListOptions, n || ""), D = (H) => {
-        (!H || !("data" in H)) && z(), x(H.data), Ie(H?.data?.length ?? 0).then(() => {
+        (!H || !("data" in H)) && z(), ve(H.data), De(H?.data?.length ?? 0).then(() => {
           I.value = !1;
         });
       };
       await L.resetAndExecute(f, D);
     }
-    function x(n) {
-      Array.isArray(n) || z(), n.length > 0 && typeof n[0] == "object" && W(n), p.value = n;
+    function ve(n) {
+      Array.isArray(n) || z(), n.length > 0 && typeof n[0] == "object" && Te(n), p.value = n;
     }
-    function W(n) {
+    function Te(n) {
       (!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && G();
-      const l = o.objectLabelKeyName;
+      const r = o.objectLabelKeyName;
       for (let f = 0; f < n.length; f++)
-        (typeof n[f] != "object" || !(l in n[f])) && G();
+        (typeof n[f] != "object" || !(r in n[f])) && G();
     }
-    async function Ie(n) {
-      const l = async () => o.options(1, ""), f = (D) => {
+    async function De(n) {
+      const r = async () => o.options(1, ""), f = (D) => {
         (!D || !("totalNum" in D)) && le(), t.value = D.totalNum ?? n;
       };
-      await L.resetAndExecute(l, f);
-    }
-    const ve = () => a?.value?.textInputRef?.getElementsByTagName("li")[E.value] ?? null, Te = (n) => {
-      c.value == !1 ? te() : n && De(n);
-    }, De = (n) => {
-      const l = n.key || n.code;
-      (l === "Tab" || l === "Escape") && P(), l === "ArrowDown" && Me(n), l === "ArrowUp" && Ce(n), (l === "Enter" || l === " ") && Oe(), n.preventDefault(), n.stopPropagation();
-    }, Oe = () => {
-      O.value.length > 0 ? (u.value = !0, U(O.value[E.value])) : P();
+      await L.resetAndExecute(r, f);
+    }
+    const me = () => a?.value?.textInputRef?.getElementsByTagName("li")[E.value] ?? null, Oe = (n) => {
+      c.value == !1 ? te() : n && Me(n);
     }, Me = (n) => {
-      A.value = !0, E.value < O.value.length - 1 && (n.preventDefault(), q.value = !1, E.value++, ve()?.focus());
-    }, Ce = (n) => {
-      A.value = !0, E.value > 0 && (n.preventDefault(), q.value = !1, E.value--, ve()?.focus());
+      const r = n.key || n.code;
+      (r === "Tab" || r === "Escape") && P(), r === "ArrowDown" && ke(n), r === "ArrowUp" && Ee(n), (r === "Enter" || r === " ") && Ce(), n.preventDefault(), n.stopPropagation();
+    }, Ce = () => {
+      O.value.length > 0 ? (u.value = !0, J(O.value[E.value])) : P();
+    }, ke = (n) => {
+      A.value = !0, E.value < O.value.length - 1 && (n.preventDefault(), q.value = !1, E.value++, me()?.focus());
+    }, Ee = (n) => {
+      A.value = !0, E.value > 0 && (n.preventDefault(), q.value = !1, E.value--, me()?.focus());
     }, de = {
       openList: te,
       unfocus: (n) => {
         if (c?.value === !1) return;
         S.value.length > 0 && (u.value = !0);
-        const l = g?.value?.listContainerRef, f = a?.value?.textInputRef, D = m?.value?.buttonRef, H = n?.relatedTarget && f?.isEqualNode(n?.relatedTarget), ce = n?.relatedTarget && l && l.contains(n?.relatedTarget), ke = n?.relatedTarget && D && D.isEqualNode(n.relatedTarget), Ee = ce || ke, Ae = n?.relatedTarget && l && l.isEqualNode(n?.relatedTarget);
-        Ee || H || (Ae ? ne() : P());
+        const r = g?.value?.listContainerRef, f = a?.value?.textInputRef, D = m?.value?.buttonRef, H = n?.relatedTarget && f?.isEqualNode(n?.relatedTarget), ce = n?.relatedTarget && r && r.contains(n?.relatedTarget), Ae = n?.relatedTarget && D && D.isEqualNode(n.relatedTarget), Ne = ce || Ae, Se = n?.relatedTarget && r && r.isEqualNode(n?.relatedTarget);
+        Ne || H || (Se ? ne() : P());
       },
-      press: Te,
+      press: Oe,
       mouseOverList: re,
       getLabel: k,
-      updatedSelected: U,
+      updatedSelected: J,
       focusInput: ne,
       closeList: P
     };
-    return (n, l) => (T(), C("div", {
+    return (n, r) => (T(), C("div", {
       style: { position: "relative" },
       class: R(n.$attrs.class)
     }, [
-      Z(ge, {
+      Z(ye, {
         ref_key: "itemListRef",
         ref: g,
         "show-drop-down": c.value,
@@ -838,13 +844,13 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
         "list-animation-duration-ms": e.listAnimationDurationMs,
         "parent-methods": de,
         blockListChange: u.value,
-        "onUpdate:blockListChange": l[1] || (l[1] = (f) => u.value = f),
+        "onUpdate:blockListChange": r[1] || (r[1] = (f) => u.value = f),
         "total-options-count": t.value,
-        onReverseDropDownList: l[2] || (l[2] = (f) => w.value = f),
+        onReverseDropDownList: r[2] || (r[2] = (f) => w.value = f),
         enableScrollClose: $.value
       }, {
-        default: be(() => [
-          Z(we, {
+        default: he(() => [
+          Z(Le, {
             ref_key: "dropDownButtonInput",
             ref: m,
             "parent-methods": de,
@@ -853,8 +859,8 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
             "custom-icon": e.customIcon,
             "reverse-drop-down-list": w.value
           }, {
-            default: be(() => [
-              Z(he, {
+            default: he(() => [
+              Z(ge, {
                 ref_key: "dropDownTextInput",
                 ref: a,
                 "enable-text-filter": s.value,
@@ -862,7 +868,7 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
                 placeholder: ie.value,
                 "enable-button-click": A.value,
                 "parent-methods": de,
-                "onUpdate:query": l[0] || (l[0] = (f) => S.value = f)
+                "onUpdate:query": r[0] || (r[0] = (f) => S.value = f)
               }, null, 8, ["enable-text-filter", "show-drop-down", "placeholder", "enable-button-click"])
             ]),
             _: 1
@@ -872,8 +878,8 @@ const ye = /* @__PURE__ */ V(et, [["render", nt]]), ot = ["tabindex"], st = {
       }, 8, ["show-drop-down", "filteredListItems", "mouseHoveringOnList", "focusedIndex", "selectedIndex", "max-list-height-p-x", "list-animation-duration-ms", "blockListChange", "total-options-count", "enableScrollClose"])
     ], 2));
   }
-}), at = /* @__PURE__ */ V(lt, [["__scopeId", "data-v-55c6d2bd"]]);
+}), ct = /* @__PURE__ */ V(ut, [["__scopeId", "data-v-e02552d0"]]);
 export {
-  at as default
+  ct as default
 };
 //# sourceMappingURL=super-list.js.map