@loop8/vue-select 0.1.3 → 0.1.4

package/dist/loop8-select.es.js

@@ -1,28 +1,28 @@
-import { defineComponent as Ce, ref as x, computed as N, nextTick as A, onMounted as Ie, onBeforeUnmount as Ee, watch as J, openBlock as y, createElementBlock as V, normalizeClass as we, withModifiers as R, createElementVNode as T, Fragment as Y, renderSlot as ae, toDisplayString as F, renderList as ie, withKeys as q, createCommentVNode as ee, unref as Ue, isRef as $e, createTextVNode as Be, toRaw as Ke } from "vue";
-const Ne = { class: "loop-select-selection" }, _e = { class: "loop-select-single-selection" }, Fe = { class: "loop-select-selected-text" }, qe = {
+import { defineComponent as Ee, ref as x, computed as F, nextTick as R, onMounted as Ue, onBeforeUnmount as $e, watch as Q, openBlock as y, createElementBlock as V, normalizeClass as Ae, withModifiers as T, createElementVNode as k, Fragment as le, renderSlot as oe, toDisplayString as K, renderList as de, withKeys as N, createCommentVNode as ne, unref as Be, isRef as Fe, createTextVNode as qe, toRaw as Ke } from "vue";
+const Ne = { class: "loop-select-selection" }, _e = { class: "loop-select-single-selection" }, He = { class: "loop-select-selected-text" }, Ge = {
   key: 1,
   class: "loop-select-placeholder"
-}, He = {
+}, De = {
   key: 0,
   class: "loop-select-tags-container"
-}, Ge = ["onClick"], De = {
+}, Me = ["onClick"], Je = {
   key: 1,
   class: "loop-select-placeholder"
-}, Me = { class: "loop-select-search-container" }, Je = ["onKeydown"], Qe = {
+}, Qe = { class: "loop-select-search-container" }, ze = ["onKeydown"], We = {
   key: 0,
   class: "loop-select-search-spinner"
-}, ze = ["tabindex", "onKeydown"], We = {
+}, Xe = ["tabindex", "onKeydown"], Ye = {
   key: 0,
   class: "loop-select-no-results"
-}, Xe = ["onClick", "onMouseover"], Ye = {
+}, Ze = ["onClick", "onMouseover"], el = {
   key: 0,
   class: "loop-select-loading-more"
-}, Ze = ["multiple", "name", "required", "disabled"], el = {
+}, ll = ["multiple", "name", "required", "disabled"], tl = {
   key: 0,
   value: "",
   disabled: "",
   selected: ""
-}, ll = ["value"], tl = ["value"], xe = /* @__PURE__ */ Ce({
+}, al = ["value"], sl = ["value"], Oe = /* @__PURE__ */ Ee({
   name: "Loop8Select",
   __name: "Loop8Select",
   props: {
@@ -72,39 +72,41 @@ const Ne = { class: "loop-select-selection" }, _e = { class: "loop-select-single
     }
   },
   emits: ["update:modelValue", "invalid-option", "update:selectedOptions"],
-  setup(S, { emit: Ae }) {
-    const l = S, I = Ae, K = x(!1), L = x(""), c = x(-1), se = x(null), ce = x(null), d = x(null), j = x(null), H = x(l.loading), p = x([]), E = x(null), oe = x({}), Q = x(1), z = x(!1), U = x(!1), O = x({}), $ = N(() => !!l.ajax), Z = N(() => {
+  setup(S, { emit: ke }) {
+    const l = S, I = ke, _ = x(!1), L = x(""), c = x(-1), ie = x(null), z = x(null), d = x(null), j = x(null), H = x(l.loading), p = x([]), E = x(null), ue = x({}), W = x(1), X = x(!1), U = x(!1), A = x({});
+    let Y = !1, G = null;
+    const $ = F(() => !!l.ajax), te = F(() => {
       var e;
       return $.value && !!((e = l.ajax) != null && e.pagination);
-    }), ne = N(() => {
+    }), re = F(() => {
       var a;
       if (!$.value)
         return !0;
       const e = ((a = l.ajax) == null ? void 0 : a.minimumInputLength) || 0;
       return L.value.length >= e;
-    }), W = N(() => {
-      const e = $.value ? [...l.options, ...p.value] : l.options, a = Object.values(O.value);
+    }), Z = F(() => {
+      const e = $.value ? [...l.options, ...p.value] : l.options, a = Object.values(A.value);
       if (a.length > 0) {
         const t = a.filter(
-          (o) => !e.some((s) => u(s) === u(o))
+          (o) => !e.some((s) => i(s) === i(o))
         );
         return [...e, ...t];
       }
       return e;
-    }), B = N(() => {
+    }), B = F(() => {
       if (l.multiple) {
         if (!l.modelValue || !Array.isArray(l.modelValue))
           return [];
         const e = Array.isArray(l.modelValue) ? l.modelValue : [l.modelValue], a = [], t = e.map((o) => {
-          if (o != null && O.value[String(o)])
-            return O.value[String(o)];
-          const s = W.value.find((i) => u(i) === o);
+          if (o != null && A.value[String(o)])
+            return A.value[String(o)];
+          const s = Z.value.find((u) => i(u) === o);
           if (s)
-            return O.value[String(o)] = s, s;
-          const n = p.value.find((i) => u(i) === o);
-          return n ? (O.value[String(o)] = n, n) : (a.push(o), null);
+            return A.value[String(o)] = s, s;
+          const n = p.value.find((u) => i(u) === o);
+          return n ? (A.value[String(o)] = n, n) : (a.push(o), null);
         }).filter((o) => o !== null);
-        return a.length > 0 && (I("invalid-option", a), A(() => {
+        return a.length > 0 && (I("invalid-option", a), R(() => {
           const o = e.filter((s) => !a.includes(s));
           I("update:modelValue", o);
         })), t;
@@ -112,269 +114,273 @@ const Ne = { class: "loop-select-selection" }, _e = { class: "loop-select-single
         if (l.modelValue === null || l.modelValue === void 0)
           return [];
         const e = l.modelValue;
-        if (e != null && O.value[String(e)])
-          return [O.value[String(e)]];
-        const a = W.value.find(
-          (o) => u(o) === e
+        if (e != null && A.value[String(e)])
+          return [A.value[String(e)]];
+        const a = Z.value.find(
+          (o) => i(o) === e
         );
         if (a)
-          return O.value[String(e)] = a, [a];
-        const t = p.value.find((o) => u(o) === e);
-        return t ? (O.value[String(e)] = t, [t]) : (I("invalid-option", e), A(() => {
+          return A.value[String(e)] = a, [a];
+        const t = p.value.find((o) => i(o) === e);
+        return t ? (A.value[String(e)] = t, [t]) : (I("invalid-option", e), R(() => {
           I("update:modelValue", null);
         }), []);
       }
-    }), G = N(() => B.value.length > 0 ? B.value[0] : null), de = N(() => G.value ? u(G.value) : null);
-    N(() => {
+    }), D = F(() => B.value.length > 0 ? B.value[0] : null), ve = F(() => D.value ? i(D.value) : null);
+    F(() => {
       const e = B.value[0];
-      return e ? D(e) : "";
+      return e ? M(e) : "";
     });
-    const P = N(() => {
+    const P = F(() => {
       if ($.value)
-        return ne.value ? p.value : [];
+        return re.value ? p.value : [];
       if (!L.value)
         return l.options;
       const e = L.value.toLowerCase();
-      return l.options.filter((a) => D(a).toLowerCase().includes(e));
-    }), u = (e) => typeof e == "object" && e !== null ? e[l.valueKey] : e, D = (e) => typeof e == "object" && e !== null ? e[l.labelKey] || e[l.valueKey] || "" : String(e), ve = (e) => {
-      const a = u(e);
+      return l.options.filter((a) => M(a).toLowerCase().includes(e));
+    }), i = (e) => typeof e == "object" && e !== null ? e[l.valueKey] : e, M = (e) => typeof e == "object" && e !== null ? e[l.labelKey] || e[l.valueKey] || "" : String(e), pe = (e) => {
+      const a = i(e);
       return l.multiple && Array.isArray(l.modelValue) ? l.modelValue.includes(a) : l.modelValue === a;
-    }, fe = (e) => {
-      const a = u(e);
-      if (O.value[String(a)] = e, l.multiple) {
+    }, me = (e) => {
+      const a = i(e);
+      if (A.value[String(a)] = e, l.multiple) {
         let t = [];
         Array.isArray(l.modelValue) ? l.modelValue.includes(a) ? t = l.modelValue.filter((s) => s !== a) : t = [...l.modelValue, a] : t = [a], I("update:modelValue", t);
-        const o = t.map((s) => s === a ? e : Ke(O.value[String(s)]) || W.value.find((n) => u(n) === s)).filter(Boolean);
+        const o = t.map((s) => s === a ? e : Ke(A.value[String(s)]) || Z.value.find((n) => i(n) === s)).filter(Boolean);
         I("update:selectedOptions", o);
       } else
-        I("update:modelValue", a), I("update:selectedOptions", [e]), le();
-      L.value = "", d.value && (d.value.value = ""), $.value && (p.value.some((t) => u(t) === a) || (p.value = [...p.value, e])), l.multiple && A(() => {
+        I("update:modelValue", a), I("update:selectedOptions", [e]), ae();
+      L.value = "", d.value && (d.value.value = ""), $.value && (p.value.some((t) => i(t) === a) || (p.value = [...p.value, e])), l.multiple && R(() => {
         d.value && d.value.focus();
       });
-    }, pe = (e) => {
-      const a = u(e);
+    }, he = (e) => {
+      const a = i(e);
       if (l.multiple && Array.isArray(l.modelValue)) {
         const t = l.modelValue.filter((o) => o !== a);
-        I("update:modelValue", t), I("update:selectedOptions", B.value), t.includes(a) || delete O.value[String(a)];
+        I("update:modelValue", t), I("update:selectedOptions", B.value), t.includes(a) || delete A.value[String(a)];
       }
-    }, Oe = () => {
-      l.disabled || (K.value = !K.value, K.value && (L.value = "", ue(), A(() => {
-        d.value && !C && (d.value.value = "", d.value.focus()), A(() => {
-          P.value.length > 0 ? (c.value = 0, _()) : c.value = -1;
+    }, be = () => {
+      l.disabled || (!_.value && !G ? (z.value && (z.value.style.display = "flex"), G = requestAnimationFrame(() => {
+        G = requestAnimationFrame(() => {
+          G = null, Y = !0, _.value = !0, L.value = "", ce(), R(() => {
+            Y = !1, d.value && !C && (d.value.value = "", d.value.focus()), P.value.length > 0 ? (c.value = 0, q()) : c.value = -1;
+          });
         });
-      })));
-    }, le = () => {
-      K.value = !1, L.value = "", d.value && (d.value.value = ""), ue();
-    }, ue = () => {
-      Q.value = 1, z.value = !1, (!Z.value || !l.modelValue) && (p.value = []), U.value = !1;
+      })) : (G && (cancelAnimationFrame(G), G = null, Y = !1), ae()));
+    }, ae = () => {
+      z.value && (z.value.style.display = ""), _.value = !1, L.value = "", d.value && (d.value.value = ""), ce();
+    }, ce = () => {
+      W.value = 1, X.value = !1, (!te.value || !l.modelValue) && (p.value = []), U.value = !1;
     };
-    let X = -1, g = !1, C = !1;
-    const me = () => {
-      U.value || (X = c.value, g = X >= 0, g && (C = !0), console.log(`Loading more results, page ${Q.value + 1}`), Q.value++, U.value = !0, he(L.value, !0));
-    }, he = async (e, a = !1) => {
-      if (!$.value || !ne.value)
+    let ee = -1, g = !1, C = !1;
+    const ge = () => {
+      U.value || (ee = c.value, g = ee >= 0, g && (C = !0), console.log(`Loading more results, page ${W.value + 1}`), W.value++, U.value = !0, ye(L.value, !0));
+    }, ye = async (e, a = !1) => {
+      if (!$.value || !re.value)
         return Promise.resolve();
-      const t = l.ajax, o = Z.value ? `${e}_${Q.value}` : e;
+      const t = l.ajax, o = te.value ? `${e}_${W.value}` : e;
       let s = [];
-      if (l.modelValue && (s = [...B.value]), t.cache && oe.value[o]) {
-        const w = oe.value[o];
+      if (l.modelValue && (s = [...B.value]), t.cache && ue.value[o]) {
+        const w = ue.value[o];
         if (a)
           p.value = [...p.value, ...w.results];
         else {
-          const h = w.results, r = l.multiple && Array.isArray(l.modelValue) ? l.modelValue : l.modelValue ? [l.modelValue] : [], f = s.filter(
-            (k) => {
-              const b = u(k);
-              return r.includes(b) && !h.some((M) => u(M) === b);
+          const h = w.results, r = l.multiple && Array.isArray(l.modelValue) ? l.modelValue : l.modelValue ? [l.modelValue] : [], v = s.filter(
+            (O) => {
+              const b = i(O);
+              return r.includes(b) && !h.some((J) => i(J) === b);
             }
           );
-          p.value = [...f, ...h];
+          p.value = [...v, ...h];
         }
-        return z.value = w.more, U.value = !1, Promise.resolve();
+        return X.value = w.more, U.value = !1, Promise.resolve();
       }
       !a && E.value !== null && (window.clearTimeout(E.value), E.value = null);
       const n = t.method || "GET";
-      let i = t.url;
-      t.urlBuilder && typeof t.urlBuilder == "function" && (i = t.urlBuilder(e, i), console.log("Using dynamically built URL:", i));
+      let u = t.url;
+      t.urlBuilder && typeof t.urlBuilder == "function" && (u = t.urlBuilder(e, u), console.log("Using dynamically built URL:", u));
       const m = t.headers || {
         "Content-Type": "application/json",
         Accept: "application/json"
       };
-      let v = {};
+      let f = {};
       if (t.params)
         if (typeof t.params == "function") {
-          const w = Z.value ? {
-            page: Q.value,
+          const w = te.value ? {
+            page: W.value,
             limit: t.limit || 10
           } : void 0;
-          v = t.params(e, w);
+          f = t.params(e, w);
         } else
-          v = { ...t.params, query: e };
+          f = { ...t.params, query: e };
       else
-        v = t.urlBuilder ? {} : { query: e };
-      if (Z.value) {
+        f = t.urlBuilder ? {} : { query: e };
+      if (te.value) {
         const w = t.limit || 10;
-        if (!("page" in v) && !("per_page" in v)) {
+        if (!("page" in f) && !("per_page" in f)) {
           const h = t.pageParam || "page", r = t.limitParam || "per_page";
-          v[h] = Q.value, v[r] = w;
+          f[h] = W.value, f[r] = w;
         }
       }
       return a || (H.value = !0), new Promise((w) => {
         let h;
         if (n === "GET") {
-          const r = new URLSearchParams(v).toString(), f = r ? `${i}?${r}` : i;
-          console.log("Making request to:", f), h = fetch(f, {
+          const r = new URLSearchParams(f).toString(), v = r ? `${u}?${r}` : u;
+          console.log("Making request to:", v), h = fetch(v, {
             method: n,
             headers: m
           });
         } else
-          h = fetch(i, {
+          h = fetch(u, {
             method: n,
             headers: m,
-            body: JSON.stringify(v)
+            body: JSON.stringify(f)
           });
         h.then((r) => r.json()).then((r) => {
-          let f = [], k = !1;
+          let v = [], O = !1;
           if (t.processResults) {
             const b = t.processResults(r);
-            f = b.results, k = b.more;
+            v = b.results, O = b.more;
           } else
-            Array.isArray(r) ? (f = r, k = !1) : r.results && Array.isArray(r.results) ? (f = r.results, k = !!r.more) : (f = [], k = !1);
-          if (console.log(`Fetched ${f.length} results, more: ${k}`), a)
-            p.value = [...p.value, ...f], A(() => {
+            Array.isArray(r) ? (v = r, O = !1) : r.results && Array.isArray(r.results) ? (v = r.results, O = !!r.more) : (v = [], O = !1);
+          if (console.log(`Fetched ${v.length} results, more: ${O}`), a)
+            p.value = [...p.value, ...v], R(() => {
               if (g) {
-                const b = Math.min(X, P.value.length - 1);
-                c.value = b, _(), j.value && j.value.focus(), setTimeout(() => {
+                const b = Math.min(ee, P.value.length - 1);
+                c.value = b, q(), j.value && j.value.focus(), setTimeout(() => {
                   C = !1;
                 }, 100);
               }
             });
           else {
-            const b = l.multiple && Array.isArray(l.modelValue) ? l.modelValue : l.modelValue ? [l.modelValue] : [], M = s.filter(
-              (te) => {
-                const je = u(te);
-                return b.includes(je) && !f.some((Le) => u(Le) === je);
+            const b = l.multiple && Array.isArray(l.modelValue) ? l.modelValue : l.modelValue ? [l.modelValue] : [], J = s.filter(
+              (se) => {
+                const xe = i(se);
+                return b.includes(xe) && !v.some((Ie) => i(Ie) === xe);
               }
             );
-            p.value = [...M, ...f];
+            p.value = [...J, ...v];
           }
-          z.value = k, t.cache && (oe.value[o] = { results: f, more: k }), w();
+          X.value = O, t.cache && (ue.value[o] = { results: v, more: O }), w();
         }).catch((r) => {
-          console.error("Error fetching options:", r), a || (p.value = s), z.value = !1, w();
+          console.error("Error fetching options:", r), a || (p.value = s), X.value = !1, w();
         }).finally(() => {
-          H.value = !1, U.value = !1, a && g && A(() => {
+          H.value = !1, U.value = !1, a && g && R(() => {
             setTimeout(() => {
               C = !1;
             }, 100);
           });
         });
       });
-    }, ke = (e) => {
+    }, Re = (e) => {
       g = !1, C = !1, e.stopPropagation();
-    }, be = () => {
+    }, Te = () => {
       g = !1, C = !1;
-    }, Re = (e) => {
+    }, Pe = (e) => {
       var t;
       L.value;
       const a = e.target.value;
       if (L.value = a, g = !1, $.value) {
-        if (ue(), E.value !== null && (window.clearTimeout(E.value), E.value = null), !ne.value) {
+        if (ce(), E.value !== null && (window.clearTimeout(E.value), E.value = null), !re.value) {
           p.value = [];
           return;
         }
         const o = ((t = l.ajax) == null ? void 0 : t.delay) || 300;
         E.value = window.setTimeout(() => {
           const s = document.activeElement === d.value;
-          s && (g = !1, C = !1), he(L.value).then(() => {
-            A(() => {
-              P.value.length > 0 && (c.value = 0, _());
+          s && (g = !1, C = !1), ye(L.value).then(() => {
+            R(() => {
+              P.value.length > 0 && (c.value = 0, q());
               const n = document.activeElement === d.value;
               (s || n) && d.value ? d.value.focus() : g && P.value.length > 0 && j.value && j.value.focus();
             });
           });
         }, o);
       }
-    }, _ = () => {
-      A(() => {
-        if (c.value < 0 || !ce.value || !j.value)
+    }, q = () => {
+      R(() => {
+        if (c.value < 0 || !z.value || !j.value)
           return;
         const e = j.value.querySelector(".loop-select-option-highlighted");
         if (e) {
-          const a = j.value, t = a.clientHeight, o = e, s = o.offsetTop, n = o.clientHeight, i = a.scrollTop, m = s < i, v = s + n > i + t;
-          m ? a.scrollTop = s : v && (a.scrollTop = s + n - t);
+          const a = j.value, t = a.clientHeight, o = e, s = o.offsetTop, n = o.clientHeight, u = a.scrollTop, m = s < u, f = s + n > u + t;
+          m ? a.scrollTop = s : f && (a.scrollTop = s + n - t);
         }
       });
     };
-    Ie(() => {
-      document.addEventListener("click", ge), $.value && l.modelValue && W.value.length === 0 && (l.multiple ? Array.isArray(l.modelValue) && l.modelValue.length > 0 : l.modelValue !== null && l.modelValue !== void 0) && (console.log("Initial value present, fetching option data"), Pe());
-    }), Ee(() => {
-      document.removeEventListener("click", ge), E.value !== null && (window.clearTimeout(E.value), E.value = null);
-    }), J(() => l.loading, (e) => {
+    Ue(() => {
+      document.addEventListener("click", Ve), $.value && l.modelValue && Z.value.length === 0 && (l.multiple ? Array.isArray(l.modelValue) && l.modelValue.length > 0 : l.modelValue !== null && l.modelValue !== void 0) && (console.log("Initial value present, fetching option data"), Ce());
+    }), $e(() => {
+      document.removeEventListener("click", Ve), E.value !== null && (window.clearTimeout(E.value), E.value = null);
+    }), Q(() => l.loading, (e) => {
       H.value = e;
-    }), J(P, (e, a) => {
-      if (!U.value) {
-        e.length > 0 ? (c.value = 0, g && A(() => {
-          j.value && j.value.focus();
-        })) : c.value = -1;
-        return;
-      }
-      A(() => {
-        if (g && X >= 0 && e.length > a.length) {
-          const t = Math.min(X, e.length - 1);
-          c.value = t, _();
+    }), Q(P, (e, a) => {
+      if (!Y) {
+        if (!U.value) {
+          e.length > 0 ? (c.value = 0, g && R(() => {
+            j.value && j.value.focus();
+          })) : c.value = -1;
+          return;
         }
-      });
-    }), J(L, (e) => {
+        R(() => {
+          if (g && ee >= 0 && e.length > a.length) {
+            const t = Math.min(ee, e.length - 1);
+            c.value = t, q();
+          }
+        });
+      }
+    }), Q(L, (e) => {
       d.value && d.value.value !== e && (d.value.value = e);
-    }), J(c, () => {
-      c.value >= 0 && _();
-    }), J(() => l.modelValue, (e) => {
+    }), Q(c, () => {
+      Y || c.value >= 0 && q();
+    }), Q(() => l.modelValue, (e) => {
       $.value && e && (l.multiple && Array.isArray(e) ? e : [e]).forEach((t) => {
-        if (!W.value.find((s) => u(s) === t) && B.value) {
-          const s = B.value.find((n) => u(n) === t);
-          s && (p.value.find((n) => u(n) === t) || p.value.push(s));
+        if (!Z.value.find((s) => i(s) === t) && B.value) {
+          const s = B.value.find((n) => i(n) === t);
+          s && (p.value.find((n) => i(n) === t) || p.value.push(s));
         }
       });
     }, { immediate: !0 });
-    const ge = (e) => {
-      se.value && !se.value.contains(e.target) && K.value && le();
-    }, Te = () => {
-      if (!Z.value || !z.value || U.value)
+    const Ve = (e) => {
+      ie.value && !ie.value.contains(e.target) && _.value && ae();
+    }, Le = () => {
+      if (!te.value || !X.value || U.value)
         return;
       const e = j.value;
       if (!e)
         return;
       const a = e.scrollTop + e.clientHeight, t = 20;
-      a >= e.scrollHeight - t && (console.log("Reached bottom of options list, loading more results..."), me());
-    }, ye = () => {
-      P.value.length !== 0 && (g = !0, c.value < P.value.length - 1 ? (c.value++, _(), A(() => {
+      a >= e.scrollHeight - t && (console.log("Reached bottom of options list, loading more results..."), ge());
+    }, Se = () => {
+      P.value.length !== 0 && (g = !0, c.value < P.value.length - 1 ? (c.value++, q(), R(() => {
         j.value && j.value.focus();
-      })) : z.value && !U.value && (g = !0, C = !0, X = c.value, me()));
-    }, Ve = () => {
-      P.value.length !== 0 && (g = !0, c.value > 0 && (c.value--, _(), A(() => {
+      })) : X.value && !U.value && (g = !0, C = !0, ee = c.value, ge()));
+    }, je = () => {
+      P.value.length !== 0 && (g = !0, c.value > 0 && (c.value--, q(), R(() => {
         j.value && j.value.focus();
       })));
-    }, Se = () => {
-      c.value >= 0 && P.value[c.value] && (fe(P.value[c.value]), l.multiple && A(() => {
-        K.value && d.value && d.value.focus();
+    }, we = () => {
+      c.value >= 0 && P.value[c.value] && (me(P.value[c.value]), l.multiple && R(() => {
+        _.value && d.value && d.value.focus();
       }));
     };
-    J(K, (e) => {
-      e && A(() => {
+    Q(_, (e) => {
+      Y || e && requestAnimationFrame(() => {
         d.value && !C && d.value.focus();
       });
-    }), J(() => U.value, (e, a) => {
+    }), Q(() => U.value, (e, a) => {
       a === !0 && e === !1 && setTimeout(() => {
         C && !g && (C = !1);
       }, 200);
     });
-    const Pe = async () => {
+    const Ce = async () => {
       var t, o;
       if (!$.value)
         return;
       const e = l.multiple && Array.isArray(l.modelValue) ? l.modelValue : [l.modelValue];
       if (e.length === 0)
         return;
-      const a = e.filter((s) => !(s == null || O.value[String(s)] || W.value.some((n) => u(n) === s)));
+      const a = e.filter((s) => !(s == null || A.value[String(s)] || Z.value.some((n) => i(n) === s)));
       if (a.length !== 0) {
         H.value = !0;
         try {
@@ -382,27 +388,27 @@ const Ne = { class: "loop-select-selection" }, _e = { class: "loop-select-single
           if ((t = l.ajax) != null && t.initialValueResolver) {
             console.log("Using custom initialValueResolver to fetch option details");
             const n = a.map(async (m) => {
-              const v = await l.ajax.initialValueResolver(m);
-              return v || null;
+              const f = await l.ajax.initialValueResolver(m);
+              return f || null;
             });
             s = (await Promise.all(n)).filter((m) => m !== null);
           } else if ((o = l.ajax) != null && o.initialValueUrl) {
             console.log("Using initialValueUrl to fetch option details");
-            const n = l.ajax.initialValueUrl, i = l.ajax.method || "GET";
+            const n = l.ajax.initialValueUrl, u = l.ajax.method || "GET";
             let m = {};
             l.ajax.initialValueParams ? typeof l.ajax.initialValueParams == "function" ? m = l.ajax.initialValueParams(a) : m = l.ajax.initialValueParams : m = { ids: a.join(",") };
-            const v = l.ajax.headers || {
+            const f = l.ajax.headers || {
               "Content-Type": "application/json",
               Accept: "application/json"
             };
             let w;
-            if (i === "GET") {
-              const r = new URLSearchParams(m).toString(), f = r ? `${n}?${r}` : n;
-              console.log("Fetching initial values from:", f), w = await fetch(f, { method: i, headers: v });
+            if (u === "GET") {
+              const r = new URLSearchParams(m).toString(), v = r ? `${n}?${r}` : n;
+              console.log("Fetching initial values from:", v), w = await fetch(v, { method: u, headers: f });
             } else
               w = await fetch(n, {
-                method: i,
-                headers: v,
+                method: u,
+                headers: f,
                 body: JSON.stringify(m)
               });
             const h = await w.json();
@@ -410,32 +416,32 @@ const Ne = { class: "loop-select-selection" }, _e = { class: "loop-select-single
           } else {
             console.log("Using regular ajax URL with id parameter to fetch option details");
             const n = l.multiple ? a : [a[0]];
-            for (const i of n) {
-              const m = l.ajax.url, v = l.ajax.method || "GET";
-              let h = { [l.ajax.idParam || "id"]: i };
+            for (const u of n) {
+              const m = l.ajax.url, f = l.ajax.method || "GET";
+              let h = { [l.ajax.idParam || "id"]: u };
               l.ajax.params && (typeof l.ajax.params == "function" ? h = { ...h, ...l.ajax.params("") } : h = { ...h, ...l.ajax.params });
               const r = l.ajax.headers || {
                 "Content-Type": "application/json",
                 Accept: "application/json"
               };
-              let f;
-              if (v === "GET") {
-                const M = new URLSearchParams(h).toString(), te = M ? `${m}?${M}` : m;
-                console.log("Fetching initial value from:", te), f = await fetch(te, { method: v, headers: r });
+              let v;
+              if (f === "GET") {
+                const J = new URLSearchParams(h).toString(), se = J ? `${m}?${J}` : m;
+                console.log("Fetching initial value from:", se), v = await fetch(se, { method: f, headers: r });
               } else
-                f = await fetch(m, {
-                  method: v,
+                v = await fetch(m, {
+                  method: f,
                   headers: r,
                   body: JSON.stringify(h)
                 });
-              const k = await f.json();
+              const O = await v.json();
               let b = [];
-              l.ajax.processResults ? b = l.ajax.processResults(k).results : b = Array.isArray(k) ? k : k.results || [], s = [...s, ...b];
+              l.ajax.processResults ? b = l.ajax.processResults(O).results : b = Array.isArray(O) ? O : O.results || [], s = [...s, ...b];
             }
           }
           console.log("Resolved initial options:", s), s.forEach((n) => {
-            const i = u(n);
-            i != null && (O.value[String(i)] = n, p.value.some((m) => u(m) === i) || p.value.push(n));
+            const u = i(n);
+            u != null && (A.value[String(u)] = n, p.value.some((m) => i(m) === u) || p.value.push(n));
           });
         } catch (s) {
           console.error("Error fetching initial value details:", s);
@@ -445,125 +451,124 @@ const Ne = { class: "loop-select-selection" }, _e = { class: "loop-select-single
       }
     };
     return (e, a) => (y(), V("div", {
-      class: we([
+      class: Ae([
         "loop-select-container",
-        { "loop-select-open": K.value, "loop-select-disabled": S.disabled }
+        { "loop-select-open": _.value, "loop-select-disabled": S.disabled }
       ]),
-      onClick: R(Oe, ["stop"]),
+      onClick: T(be, ["stop"]),
       ref_key: "containerRef",
-      ref: se
+      ref: ie
     }, [
-      T("div", Ne, [
-        T("div", _e, [
-          S.multiple ? (y(), V(Y, { key: 1 }, [
-            B.value.length ? (y(), V("div", He, [
-              (y(!0), V(Y, null, ie(B.value, (t) => (y(), V("div", {
-                key: u(t),
+      k("div", Ne, [
+        k("div", _e, [
+          S.multiple ? (y(), V(le, { key: 1 }, [
+            B.value.length ? (y(), V("div", De, [
+              (y(!0), V(le, null, de(B.value, (t) => (y(), V("div", {
+                key: i(t),
                 class: "loop-select-selected-item"
               }, [
-                ae(e.$slots, "selected-option", {
+                oe(e.$slots, "selected-option", {
                   option: t,
-                  remove: () => pe(t)
+                  remove: () => he(t)
                 }, () => [
-                  T("span", null, F(D(t)), 1),
-                  T("button", {
+                  k("span", null, K(M(t)), 1),
+                  k("button", {
                     class: "loop-select-remove-item",
-                    onClick: R((o) => pe(t), ["stop"]),
+                    onClick: T((o) => he(t), ["stop"]),
                     type: "button"
-                  }, " × ", 8, Ge)
+                  }, " × ", 8, Me)
                 ])
               ]))), 128))
-            ])) : (y(), V("span", De, F(S.placeholder), 1))
-          ], 64)) : (y(), V(Y, { key: 0 }, [
-            G.value ? ae(e.$slots, "selected-option", {
+            ])) : (y(), V("span", Je, K(S.placeholder), 1))
+          ], 64)) : (y(), V(le, { key: 0 }, [
+            D.value ? oe(e.$slots, "selected-option", {
               key: 0,
-              option: G.value,
+              option: D.value,
               remove: () => {
               }
             }, () => [
-              T("span", Fe, F(D(G.value)), 1)
-            ]) : (y(), V("span", qe, F(S.placeholder), 1))
+              k("span", He, K(M(D.value)), 1)
+            ]) : (y(), V("span", Ge, K(S.placeholder), 1))
           ], 64))
         ]),
-        a[1] || (a[1] = T("div", { class: "loop-select-arrow" }, [
-          T("span", null, "▼")
+        a[1] || (a[1] = k("div", { class: "loop-select-arrow" }, [
+          k("span", null, "▼")
         ], -1))
       ]),
-      K.value ? (y(), V("div", {
-        key: 0,
+      k("div", {
         class: "loop-select-dropdown",
         ref_key: "dropdownRef",
-        ref: ce
+        ref: z
       }, [
-        T("div", Me, [
-          T("input", {
+        k("div", Qe, [
+          k("input", {
             ref_key: "searchInputRef",
             ref: d,
             class: "loop-select-search",
             type: "text",
-            onInput: Re,
+            onInput: Pe,
             onKeydown: [
-              a[0] || (a[0] = R(() => {
+              a[0] || (a[0] = T(() => {
               }, ["stop"])),
-              q(R(ye, ["prevent"]), ["down"]),
-              q(R(Ve, ["prevent"]), ["up"]),
-              q(R(Se, ["prevent"]), ["enter"]),
-              q(R(le, ["prevent"]), ["esc"])
+              N(T(Se, ["prevent"]), ["down"]),
+              N(T(je, ["prevent"]), ["up"]),
+              N(T(we, ["prevent"]), ["enter"]),
+              N(T(ae, ["prevent"]), ["esc"])
             ],
-            onClick: R(ke, ["stop"]),
-            onFocus: be,
+            onClick: T(Re, ["stop"]),
+            onFocus: Te,
             placeholder: "Search..."
-          }, null, 40, Je),
-          S.loading || H.value ? (y(), V("div", Qe, a[2] || (a[2] = [
-            T("div", { class: "lds-dual-ring" }, null, -1)
-          ]))) : ee("", !0)
+          }, null, 40, ze),
+          S.loading || H.value ? (y(), V("div", We, a[2] || (a[2] = [
+            k("div", { class: "lds-dual-ring" }, null, -1)
+          ]))) : ne("", !0)
         ]),
-        T("ul", {
+        k("ul", {
           class: "loop-select-options",
-          onScroll: Te,
+          onScroll: Le,
           ref_key: "optionsListRef",
           ref: j,
-          tabindex: Ue(g) ? 0 : -1,
+          tabindex: Be(g) ? 0 : -1,
           onKeydown: [
-            q(R(ye, ["prevent"]), ["down"]),
-            q(R(Ve, ["prevent"]), ["up"]),
-            q(R(Se, ["prevent"]), ["enter"]),
-            q(R(le, ["prevent"]), ["esc"])
+            N(T(Se, ["prevent"]), ["down"]),
+            N(T(je, ["prevent"]), ["up"]),
+            N(T(we, ["prevent"]), ["enter"]),
+            N(T(ae, ["prevent"]), ["esc"])
           ]
         }, [
-          P.value.length === 0 && !S.loading && !H.value ? (y(), V("li", We, "No results found")) : (y(), V(Y, { key: 1 }, [
-            (y(!0), V(Y, null, ie(P.value, (t, o) => (y(), V("li", {
-              key: u(t),
-              class: we([
+          P.value.length === 0 && !S.loading && !H.value ? (y(), V("li", Ye, "No results found")) : (y(), V(le, { key: 1 }, [
+            (y(!0), V(le, null, de(P.value, (t, o) => (y(), V("li", {
+              key: i(t),
+              class: Ae([
                 "loop-select-option",
                 {
-                  "loop-select-option-selected": ve(t),
+                  "loop-select-option-selected": pe(t),
                   "loop-select-option-highlighted": o === c.value
                 }
               ]),
-              onClick: R((s) => fe(t), ["stop"]),
+              onClick: T((s) => me(t), ["stop"]),
               onMouseover: () => {
-                c.value = o, _(), $e(g) ? g.value = !1 : g = !1;
+                c.value = o, q(), Fe(g) ? g.value = !1 : g = !1;
               }
             }, [
-              ae(e.$slots, "option", {
+              oe(e.$slots, "option", {
                 option: t,
-                selected: ve(t),
+                selected: pe(t),
                 highlighted: o === c.value,
                 index: o
               }, () => [
-                Be(F(D(t)), 1)
+                qe(K(M(t)), 1)
               ])
-            ], 42, Xe))), 128)),
-            U.value ? (y(), V("li", Ye, [
-              ae(e.$slots, "loading-more", {}, () => [
-                a[3] || (a[3] = T("div", { class: "lds-dual-ring" }, null, -1))
+            ], 42, Ze))), 128)),
+            U.value ? (y(), V("li", el, [
+              oe(e.$slots, "loading-more", {}, () => [
+                a[3] || (a[3] = k("div", { class: "lds-dual-ring" }, null, -1))
               ])
-            ])) : ee("", !0)
+            ])) : ne("", !0)
           ], 64))
-        ], 40, ze)
-      ], 512)) : ee("", !0),
-      T("select", {
+        ], 40, Xe)
+      ], 512),
+      k("select", {
         multiple: S.multiple,
         name: S.name,
         required: S.required,
@@ -572,29 +577,29 @@ const Ne = { class: "loop-select-selection" }, _e = { class: "loop-select-single
         class: "loop-select-hidden",
         "aria-hidden": "true"
       }, [
-        !S.multiple && !de.value ? (y(), V("option", el, F(S.placeholder), 1)) : ee("", !0),
-        S.multiple ? (y(!0), V(Y, { key: 1 }, ie(B.value, (t) => (y(), V("option", {
-          key: u(t),
-          value: u(t),
+        !S.multiple && !ve.value ? (y(), V("option", tl, K(S.placeholder), 1)) : ne("", !0),
+        S.multiple ? (y(!0), V(le, { key: 1 }, de(B.value, (t) => (y(), V("option", {
+          key: i(t),
+          value: i(t),
           selected: ""
-        }, F(D(t)), 9, ll))), 128)) : G.value ? (y(), V("option", {
+        }, K(M(t)), 9, al))), 128)) : D.value ? (y(), V("option", {
           key: 2,
-          value: de.value,
+          value: ve.value,
           selected: ""
-        }, F(D(G.value)), 9, tl)) : ee("", !0)
-      ], 8, Ze)
+        }, K(M(D.value)), 9, sl)) : ne("", !0)
+      ], 8, ll)
     ], 2));
   }
 });
-let re = null;
-typeof window < "u" && (re = window.Vue);
-re && re.component("Loop8Select", xe);
-const sl = {
+let fe = null;
+typeof window < "u" && (fe = window.Vue);
+fe && fe.component("Loop8Select", Oe);
+const nl = {
   install: (S) => {
-    S.component("Loop8Select", xe);
+    S.component("Loop8Select", Oe);
   }
 };
 export {
-  xe as Loop8Select,
-  sl as default
+  Oe as Loop8Select,
+  nl as default
 };

package/dist/loop8-select.umd.js

@@ -1 +1 @@
-(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.Loop8Select={},C.Vue))})(this,function(C,e){"use strict";const Me="",Ue="",de={class:"loop-select-selection"},fe={class:"loop-select-single-selection"},pe={class:"loop-select-selected-text"},me={key:1,class:"loop-select-placeholder"},he={key:0,class:"loop-select-tags-container"},ge=["onClick"],ve={key:1,class:"loop-select-placeholder"},ye={class:"loop-select-search-container"},ke=["onKeydown"],Ve={key:0,class:"loop-select-search-spinner"},we=["tabindex","onKeydown"],Se={key:0,class:"loop-select-no-results"},xe=["onClick","onMouseover"],Be={key:0,class:"loop-select-loading-more"},je=["multiple","name","required","disabled"],Ee={key:0,value:"",disabled:"",selected:""},Te=["value"],Ae=["value"],J=e.defineComponent({name:"Loop8Select",__name:"Loop8Select",props:{modelValue:{type:[Array,String,Number,Object,Boolean],default:null},options:{type:Array,default:()=>[]},placeholder:{type:String,default:"Select an option"},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{type:String,default:""},loading:{type:Boolean,default:!1},valueKey:{type:String,default:"value"},labelKey:{type:String,default:"text"},ajax:{type:Object,default:null}},emits:["update:modelValue","invalid-option","update:selectedOptions"],setup(k,{emit:be}){const t=k,A=be,P=e.ref(!1),E=e.ref(""),d=e.ref(-1),Q=e.ref(null),Z=e.ref(null),f=e.ref(null),V=e.ref(null),I=e.ref(t.loading),h=e.ref([]),O=e.ref(null),W=e.ref({}),$=e.ref(1),F=e.ref(!1),b=e.ref(!1),S=e.ref({}),R=e.computed(()=>!!t.ajax),q=e.computed(()=>{var l;return R.value&&!!((l=t.ajax)!=null&&l.pagination)}),X=e.computed(()=>{var o;if(!R.value)return!0;const l=((o=t.ajax)==null?void 0:o.minimumInputLength)||0;return E.value.length>=l}),_=e.computed(()=>{const l=R.value?[...t.options,...h.value]:t.options,o=Object.values(S.value);if(o.length>0){const a=o.filter(s=>!l.some(n=>r(n)===r(s)));return[...l,...a]}return l}),N=e.computed(()=>{if(t.multiple){if(!t.modelValue||!Array.isArray(t.modelValue))return[];const l=Array.isArray(t.modelValue)?t.modelValue:[t.modelValue],o=[],a=l.map(s=>{if(s!=null&&S.value[String(s)])return S.value[String(s)];const n=_.value.find(c=>r(c)===s);if(n)return S.value[String(s)]=n,n;const i=h.value.find(c=>r(c)===s);return i?(S.value[String(s)]=i,i):(o.push(s),null)}).filter(s=>s!==null);return o.length>0&&(A("invalid-option",o),e.nextTick(()=>{const s=l.filter(n=>!o.includes(n));A("update:modelValue",s)})),a}else{if(t.modelValue===null||t.modelValue===void 0)return[];const l=t.modelValue;if(l!=null&&S.value[String(l)])return[S.value[String(l)]];const o=_.value.find(s=>r(s)===l);if(o)return S.value[String(l)]=o,[o];const a=h.value.find(s=>r(s)===l);return a?(S.value[String(l)]=a,[a]):(A("invalid-option",l),e.nextTick(()=>{A("update:modelValue",null)}),[])}}),K=e.computed(()=>N.value.length>0?N.value[0]:null),ee=e.computed(()=>K.value?r(K.value):null);e.computed(()=>{const l=N.value[0];return l?M(l):""});const j=e.computed(()=>{if(R.value)return X.value?h.value:[];if(!E.value)return t.options;const l=E.value.toLowerCase();return t.options.filter(o=>M(o).toLowerCase().includes(l))}),r=l=>typeof l=="object"&&l!==null?l[t.valueKey]:l,M=l=>typeof l=="object"&&l!==null?l[t.labelKey]||l[t.valueKey]||"":String(l),le=l=>{const o=r(l);return t.multiple&&Array.isArray(t.modelValue)?t.modelValue.includes(o):t.modelValue===o},te=l=>{const o=r(l);if(S.value[String(o)]=l,t.multiple){let a=[];Array.isArray(t.modelValue)?t.modelValue.includes(o)?a=t.modelValue.filter(n=>n!==o):a=[...t.modelValue,o]:a=[o],A("update:modelValue",a);const s=a.map(n=>n===o?l:e.toRaw(S.value[String(n)])||_.value.find(i=>r(i)===n)).filter(Boolean);A("update:selectedOptions",s)}else A("update:modelValue",o),A("update:selectedOptions",[l]),H();E.value="",f.value&&(f.value.value=""),R.value&&(h.value.some(a=>r(a)===o)||(h.value=[...h.value,l])),t.multiple&&e.nextTick(()=>{f.value&&f.value.focus()})},ae=l=>{const o=r(l);if(t.multiple&&Array.isArray(t.modelValue)){const a=t.modelValue.filter(s=>s!==o);A("update:modelValue",a),A("update:selectedOptions",N.value),a.includes(o)||delete S.value[String(o)]}},Re=()=>{t.disabled||(P.value=!P.value,P.value&&(E.value="",Y(),e.nextTick(()=>{f.value&&!T&&(f.value.value="",f.value.focus()),e.nextTick(()=>{j.value.length>0?(d.value=0,L()):d.value=-1})})))},H=()=>{P.value=!1,E.value="",f.value&&(f.value.value=""),Y()},Y=()=>{$.value=1,F.value=!1,(!q.value||!t.modelValue)&&(h.value=[]),b.value=!1};let D=-1,y=!1,T=!1;const oe=()=>{b.value||(D=d.value,y=D>=0,y&&(T=!0),console.log(`Loading more results, page ${$.value+1}`),$.value++,b.value=!0,ne(E.value,!0))},ne=async(l,o=!1)=>{if(!R.value||!X.value)return Promise.resolve();const a=t.ajax,s=q.value?`${l}_${$.value}`:l;let n=[];if(t.modelValue&&(n=[...N.value]),a.cache&&W.value[s]){const w=W.value[s];if(o)h.value=[...h.value,...w.results];else{const v=w.results,u=t.multiple&&Array.isArray(t.modelValue)?t.modelValue:t.modelValue?[t.modelValue]:[],m=n.filter(x=>{const B=r(x);return u.includes(B)&&!v.some(U=>r(U)===B)});h.value=[...m,...v]}return F.value=w.more,b.value=!1,Promise.resolve()}!o&&O.value!==null&&(window.clearTimeout(O.value),O.value=null);const i=a.method||"GET";let c=a.url;a.urlBuilder&&typeof a.urlBuilder=="function"&&(c=a.urlBuilder(l,c),console.log("Using dynamically built URL:",c));const g=a.headers||{"Content-Type":"application/json",Accept:"application/json"};let p={};if(a.params)if(typeof a.params=="function"){const w=q.value?{page:$.value,limit:a.limit||10}:void 0;p=a.params(l,w)}else p={...a.params,query:l};else p=a.urlBuilder?{}:{query:l};if(q.value){const w=a.limit||10;if(!("page"in p)&&!("per_page"in p)){const v=a.pageParam||"page",u=a.limitParam||"per_page";p[v]=$.value,p[u]=w}}return o||(I.value=!0),new Promise(w=>{let v;if(i==="GET"){const u=new URLSearchParams(p).toString(),m=u?`${c}?${u}`:c;console.log("Making request to:",m),v=fetch(m,{method:i,headers:g})}else v=fetch(c,{method:i,headers:g,body:JSON.stringify(p)});v.then(u=>u.json()).then(u=>{let m=[],x=!1;if(a.processResults){const B=a.processResults(u);m=B.results,x=B.more}else Array.isArray(u)?(m=u,x=!1):u.results&&Array.isArray(u.results)?(m=u.results,x=!!u.more):(m=[],x=!1);if(console.log(`Fetched ${m.length} results, more: ${x}`),o)h.value=[...h.value,...m],e.nextTick(()=>{if(y){const B=Math.min(D,j.value.length-1);d.value=B,L(),V.value&&V.value.focus(),setTimeout(()=>{T=!1},100)}});else{const B=t.multiple&&Array.isArray(t.modelValue)?t.modelValue:t.modelValue?[t.modelValue]:[],U=n.filter(G=>{const ue=r(G);return B.includes(ue)&&!m.some(Ke=>r(Ke)===ue)});h.value=[...U,...m]}F.value=x,a.cache&&(W.value[s]={results:m,more:x}),w()}).catch(u=>{console.error("Error fetching options:",u),o||(h.value=n),F.value=!1,w()}).finally(()=>{I.value=!1,b.value=!1,o&&y&&e.nextTick(()=>{setTimeout(()=>{T=!1},100)})})})},Ne=l=>{y=!1,T=!1,l.stopPropagation()},Pe=()=>{y=!1,T=!1},Ce=l=>{var a;E.value;const o=l.target.value;if(E.value=o,y=!1,R.value){if(Y(),O.value!==null&&(window.clearTimeout(O.value),O.value=null),!X.value){h.value=[];return}const s=((a=t.ajax)==null?void 0:a.delay)||300;O.value=window.setTimeout(()=>{const n=document.activeElement===f.value;n&&(y=!1,T=!1),ne(E.value).then(()=>{e.nextTick(()=>{j.value.length>0&&(d.value=0,L());const i=document.activeElement===f.value;(n||i)&&f.value?f.value.focus():y&&j.value.length>0&&V.value&&V.value.focus()})})},s)}},L=()=>{e.nextTick(()=>{if(d.value<0||!Z.value||!V.value)return;const l=V.value.querySelector(".loop-select-option-highlighted");if(l){const o=V.value,a=o.clientHeight,s=l,n=s.offsetTop,i=s.clientHeight,c=o.scrollTop,g=n<c,p=n+i>c+a;g?o.scrollTop=n:p&&(o.scrollTop=n+i-a)}})};e.onMounted(()=>{document.addEventListener("click",se),R.value&&t.modelValue&&_.value.length===0&&(t.multiple?Array.isArray(t.modelValue)&&t.modelValue.length>0:t.modelValue!==null&&t.modelValue!==void 0)&&(console.log("Initial value present, fetching option data"),Ie())}),e.onBeforeUnmount(()=>{document.removeEventListener("click",se),O.value!==null&&(window.clearTimeout(O.value),O.value=null)}),e.watch(()=>t.loading,l=>{I.value=l}),e.watch(j,(l,o)=>{if(!b.value){l.length>0?(d.value=0,y&&e.nextTick(()=>{V.value&&V.value.focus()})):d.value=-1;return}e.nextTick(()=>{if(y&&D>=0&&l.length>o.length){const a=Math.min(D,l.length-1);d.value=a,L()}})}),e.watch(E,l=>{f.value&&f.value.value!==l&&(f.value.value=l)}),e.watch(d,()=>{d.value>=0&&L()}),e.watch(()=>t.modelValue,l=>{R.value&&l&&(t.multiple&&Array.isArray(l)?l:[l]).forEach(a=>{if(!_.value.find(n=>r(n)===a)&&N.value){const n=N.value.find(i=>r(i)===a);n&&(h.value.find(i=>r(i)===a)||h.value.push(n))}})},{immediate:!0});const se=l=>{Q.value&&!Q.value.contains(l.target)&&P.value&&H()},Le=()=>{if(!q.value||!F.value||b.value)return;const l=V.value;if(!l)return;const o=l.scrollTop+l.clientHeight,a=20;o>=l.scrollHeight-a&&(console.log("Reached bottom of options list, loading more results..."),oe())},ie=()=>{j.value.length!==0&&(y=!0,d.value<j.value.length-1?(d.value++,L(),e.nextTick(()=>{V.value&&V.value.focus()})):F.value&&!b.value&&(y=!0,T=!0,D=d.value,oe()))},re=()=>{j.value.length!==0&&(y=!0,d.value>0&&(d.value--,L(),e.nextTick(()=>{V.value&&V.value.focus()})))},ce=()=>{d.value>=0&&j.value[d.value]&&(te(j.value[d.value]),t.multiple&&e.nextTick(()=>{P.value&&f.value&&f.value.focus()}))};e.watch(P,l=>{l&&e.nextTick(()=>{f.value&&!T&&f.value.focus()})}),e.watch(()=>b.value,(l,o)=>{o===!0&&l===!1&&setTimeout(()=>{T&&!y&&(T=!1)},200)});const Ie=async()=>{var a,s;if(!R.value)return;const l=t.multiple&&Array.isArray(t.modelValue)?t.modelValue:[t.modelValue];if(l.length===0)return;const o=l.filter(n=>!(n==null||S.value[String(n)]||_.value.some(i=>r(i)===n)));if(o.length!==0){I.value=!0;try{let n=[];if((a=t.ajax)!=null&&a.initialValueResolver){console.log("Using custom initialValueResolver to fetch option details");const i=o.map(async g=>{const p=await t.ajax.initialValueResolver(g);return p||null});n=(await Promise.all(i)).filter(g=>g!==null)}else if((s=t.ajax)!=null&&s.initialValueUrl){console.log("Using initialValueUrl to fetch option details");const i=t.ajax.initialValueUrl,c=t.ajax.method||"GET";let g={};t.ajax.initialValueParams?typeof t.ajax.initialValueParams=="function"?g=t.ajax.initialValueParams(o):g=t.ajax.initialValueParams:g={ids:o.join(",")};const p=t.ajax.headers||{"Content-Type":"application/json",Accept:"application/json"};let w;if(c==="GET"){const u=new URLSearchParams(g).toString(),m=u?`${i}?${u}`:i;console.log("Fetching initial values from:",m),w=await fetch(m,{method:c,headers:p})}else w=await fetch(i,{method:c,headers:p,body:JSON.stringify(g)});const v=await w.json();t.ajax.processResults?n=t.ajax.processResults(v).results:n=Array.isArray(v)?v:v.results||[]}else{console.log("Using regular ajax URL with id parameter to fetch option details");const i=t.multiple?o:[o[0]];for(const c of i){const g=t.ajax.url,p=t.ajax.method||"GET";let v={[t.ajax.idParam||"id"]:c};t.ajax.params&&(typeof t.ajax.params=="function"?v={...v,...t.ajax.params("")}:v={...v,...t.ajax.params});const u=t.ajax.headers||{"Content-Type":"application/json",Accept:"application/json"};let m;if(p==="GET"){const U=new URLSearchParams(v).toString(),G=U?`${g}?${U}`:g;console.log("Fetching initial value from:",G),m=await fetch(G,{method:p,headers:u})}else m=await fetch(g,{method:p,headers:u,body:JSON.stringify(v)});const x=await m.json();let B=[];t.ajax.processResults?B=t.ajax.processResults(x).results:B=Array.isArray(x)?x:x.results||[],n=[...n,...B]}}console.log("Resolved initial options:",n),n.forEach(i=>{const c=r(i);c!=null&&(S.value[String(c)]=i,h.value.some(g=>r(g)===c)||h.value.push(i))})}catch(n){console.error("Error fetching initial value details:",n)}finally{I.value=!1}}};return(l,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["loop-select-container",{"loop-select-open":P.value,"loop-select-disabled":k.disabled}]),onClick:e.withModifiers(Re,["stop"]),ref_key:"containerRef",ref:Q},[e.createElementVNode("div",de,[e.createElementVNode("div",fe,[k.multiple?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[N.value.length?(e.openBlock(),e.createElementBlock("div",he,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,a=>(e.openBlock(),e.createElementBlock("div",{key:r(a),class:"loop-select-selected-item"},[e.renderSlot(l.$slots,"selected-option",{option:a,remove:()=>ae(a)},()=>[e.createElementVNode("span",null,e.toDisplayString(M(a)),1),e.createElementVNode("button",{class:"loop-select-remove-item",onClick:e.withModifiers(s=>ae(a),["stop"]),type:"button"}," × ",8,ge)])]))),128))])):(e.openBlock(),e.createElementBlock("span",ve,e.toDisplayString(k.placeholder),1))],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[K.value?e.renderSlot(l.$slots,"selected-option",{key:0,option:K.value,remove:()=>{}},()=>[e.createElementVNode("span",pe,e.toDisplayString(M(K.value)),1)]):(e.openBlock(),e.createElementBlock("span",me,e.toDisplayString(k.placeholder),1))],64))]),o[1]||(o[1]=e.createElementVNode("div",{class:"loop-select-arrow"},[e.createElementVNode("span",null,"▼")],-1))]),P.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"loop-select-dropdown",ref_key:"dropdownRef",ref:Z},[e.createElementVNode("div",ye,[e.createElementVNode("input",{ref_key:"searchInputRef",ref:f,class:"loop-select-search",type:"text",onInput:Ce,onKeydown:[o[0]||(o[0]=e.withModifiers(()=>{},["stop"])),e.withKeys(e.withModifiers(ie,["prevent"]),["down"]),e.withKeys(e.withModifiers(re,["prevent"]),["up"]),e.withKeys(e.withModifiers(ce,["prevent"]),["enter"]),e.withKeys(e.withModifiers(H,["prevent"]),["esc"])],onClick:e.withModifiers(Ne,["stop"]),onFocus:Pe,placeholder:"Search..."},null,40,ke),k.loading||I.value?(e.openBlock(),e.createElementBlock("div",Ve,o[2]||(o[2]=[e.createElementVNode("div",{class:"lds-dual-ring"},null,-1)]))):e.createCommentVNode("",!0)]),e.createElementVNode("ul",{class:"loop-select-options",onScroll:Le,ref_key:"optionsListRef",ref:V,tabindex:e.unref(y)?0:-1,onKeydown:[e.withKeys(e.withModifiers(ie,["prevent"]),["down"]),e.withKeys(e.withModifiers(re,["prevent"]),["up"]),e.withKeys(e.withModifiers(ce,["prevent"]),["enter"]),e.withKeys(e.withModifiers(H,["prevent"]),["esc"])]},[j.value.length===0&&!k.loading&&!I.value?(e.openBlock(),e.createElementBlock("li",Se,"No results found")):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(j.value,(a,s)=>(e.openBlock(),e.createElementBlock("li",{key:r(a),class:e.normalizeClass(["loop-select-option",{"loop-select-option-selected":le(a),"loop-select-option-highlighted":s===d.value}]),onClick:e.withModifiers(n=>te(a),["stop"]),onMouseover:()=>{d.value=s,L(),e.isRef(y)?y.value=!1:y=!1}},[e.renderSlot(l.$slots,"option",{option:a,selected:le(a),highlighted:s===d.value,index:s},()=>[e.createTextVNode(e.toDisplayString(M(a)),1)])],42,xe))),128)),b.value?(e.openBlock(),e.createElementBlock("li",Be,[e.renderSlot(l.$slots,"loading-more",{},()=>[o[3]||(o[3]=e.createElementVNode("div",{class:"lds-dual-ring"},null,-1))])])):e.createCommentVNode("",!0)],64))],40,we)],512)):e.createCommentVNode("",!0),e.createElementVNode("select",{multiple:k.multiple,name:k.name,required:k.required,disabled:k.disabled,tabindex:"-1",class:"loop-select-hidden","aria-hidden":"true"},[!k.multiple&&!ee.value?(e.openBlock(),e.createElementBlock("option",Ee,e.toDisplayString(k.placeholder),1)):e.createCommentVNode("",!0),k.multiple?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(N.value,a=>(e.openBlock(),e.createElementBlock("option",{key:r(a),value:r(a),selected:""},e.toDisplayString(M(a)),9,Te))),128)):K.value?(e.openBlock(),e.createElementBlock("option",{key:2,value:ee.value,selected:""},e.toDisplayString(M(K.value)),9,Ae)):e.createCommentVNode("",!0)],8,je)],2))}});let z=null;typeof window<"u"&&(z=window.Vue),z&&z.component("Loop8Select",J);const Oe={install:k=>{k.component("Loop8Select",J)}};C.Loop8Select=J,C.default=Oe,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(P,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(P=typeof globalThis<"u"?globalThis:P||self,e(P.Loop8Select={},P.Vue))})(this,function(P,e){"use strict";const Ue="",$e="",pe={class:"loop-select-selection"},me={class:"loop-select-single-selection"},he={class:"loop-select-selected-text"},ge={key:1,class:"loop-select-placeholder"},ve={key:0,class:"loop-select-tags-container"},ye=["onClick"],Ve={key:1,class:"loop-select-placeholder"},ke={class:"loop-select-search-container"},we=["onKeydown"],Se={key:0,class:"loop-select-search-spinner"},xe=["tabindex","onKeydown"],je={key:0,class:"loop-select-no-results"},Be=["onClick","onMouseover"],Ee={key:0,class:"loop-select-loading-more"},Te=["multiple","name","required","disabled"],Ae={key:0,value:"",disabled:"",selected:""},Oe=["value"],be=["value"],W=e.defineComponent({name:"Loop8Select",__name:"Loop8Select",props:{modelValue:{type:[Array,String,Number,Object,Boolean],default:null},options:{type:Array,default:()=>[]},placeholder:{type:String,default:"Select an option"},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{type:String,default:""},loading:{type:Boolean,default:!1},valueKey:{type:String,default:"value"},labelKey:{type:String,default:"text"},ajax:{type:Object,default:null}},emits:["update:modelValue","invalid-option","update:selectedOptions"],setup(V,{emit:Ne}){const t=V,A=Ne,L=e.ref(!1),E=e.ref(""),d=e.ref(-1),Y=e.ref(null),$=e.ref(null),f=e.ref(null),k=e.ref(null),F=e.ref(t.loading),h=e.ref([]),O=e.ref(null),Z=e.ref({}),q=e.ref(1),_=e.ref(!1),b=e.ref(!1),S=e.ref({});let D=!1,I=null;const R=e.computed(()=>!!t.ajax),J=e.computed(()=>{var l;return R.value&&!!((l=t.ajax)!=null&&l.pagination)}),ee=e.computed(()=>{var o;if(!R.value)return!0;const l=((o=t.ajax)==null?void 0:o.minimumInputLength)||0;return E.value.length>=l}),H=e.computed(()=>{const l=R.value?[...t.options,...h.value]:t.options,o=Object.values(S.value);if(o.length>0){const a=o.filter(s=>!l.some(n=>r(n)===r(s)));return[...l,...a]}return l}),N=e.computed(()=>{if(t.multiple){if(!t.modelValue||!Array.isArray(t.modelValue))return[];const l=Array.isArray(t.modelValue)?t.modelValue:[t.modelValue],o=[],a=l.map(s=>{if(s!=null&&S.value[String(s)])return S.value[String(s)];const n=H.value.find(c=>r(c)===s);if(n)return S.value[String(s)]=n,n;const i=h.value.find(c=>r(c)===s);return i?(S.value[String(s)]=i,i):(o.push(s),null)}).filter(s=>s!==null);return o.length>0&&(A("invalid-option",o),e.nextTick(()=>{const s=l.filter(n=>!o.includes(n));A("update:modelValue",s)})),a}else{if(t.modelValue===null||t.modelValue===void 0)return[];const l=t.modelValue;if(l!=null&&S.value[String(l)])return[S.value[String(l)]];const o=H.value.find(s=>r(s)===l);if(o)return S.value[String(l)]=o,[o];const a=h.value.find(s=>r(s)===l);return a?(S.value[String(l)]=a,[a]):(A("invalid-option",l),e.nextTick(()=>{A("update:modelValue",null)}),[])}}),K=e.computed(()=>N.value.length>0?N.value[0]:null),te=e.computed(()=>K.value?r(K.value):null);e.computed(()=>{const l=N.value[0];return l?M(l):""});const B=e.computed(()=>{if(R.value)return ee.value?h.value:[];if(!E.value)return t.options;const l=E.value.toLowerCase();return t.options.filter(o=>M(o).toLowerCase().includes(l))}),r=l=>typeof l=="object"&&l!==null?l[t.valueKey]:l,M=l=>typeof l=="object"&&l!==null?l[t.labelKey]||l[t.valueKey]||"":String(l),ae=l=>{const o=r(l);return t.multiple&&Array.isArray(t.modelValue)?t.modelValue.includes(o):t.modelValue===o},oe=l=>{const o=r(l);if(S.value[String(o)]=l,t.multiple){let a=[];Array.isArray(t.modelValue)?t.modelValue.includes(o)?a=t.modelValue.filter(n=>n!==o):a=[...t.modelValue,o]:a=[o],A("update:modelValue",a);const s=a.map(n=>n===o?l:e.toRaw(S.value[String(n)])||H.value.find(i=>r(i)===n)).filter(Boolean);A("update:selectedOptions",s)}else A("update:modelValue",o),A("update:selectedOptions",[l]),z();E.value="",f.value&&(f.value.value=""),R.value&&(h.value.some(a=>r(a)===o)||(h.value=[...h.value,l])),t.multiple&&e.nextTick(()=>{f.value&&f.value.focus()})},ne=l=>{const o=r(l);if(t.multiple&&Array.isArray(t.modelValue)){const a=t.modelValue.filter(s=>s!==o);A("update:modelValue",a),A("update:selectedOptions",N.value),a.includes(o)||delete S.value[String(o)]}},Pe=()=>{t.disabled||(!L.value&&!I?($.value&&($.value.style.display="flex"),I=requestAnimationFrame(()=>{I=requestAnimationFrame(()=>{I=null,D=!0,L.value=!0,E.value="",le(),e.nextTick(()=>{D=!1,f.value&&!T&&(f.value.value="",f.value.focus()),B.value.length>0?(d.value=0,C()):d.value=-1})})})):(I&&(cancelAnimationFrame(I),I=null,D=!1),z()))},z=()=>{$.value&&($.value.style.display=""),L.value=!1,E.value="",f.value&&(f.value.value=""),le()},le=()=>{q.value=1,_.value=!1,(!J.value||!t.modelValue)&&(h.value=[]),b.value=!1};let G=-1,y=!1,T=!1;const se=()=>{b.value||(G=d.value,y=G>=0,y&&(T=!0),console.log(`Loading more results, page ${q.value+1}`),q.value++,b.value=!0,ie(E.value,!0))},ie=async(l,o=!1)=>{if(!R.value||!ee.value)return Promise.resolve();const a=t.ajax,s=J.value?`${l}_${q.value}`:l;let n=[];if(t.modelValue&&(n=[...N.value]),a.cache&&Z.value[s]){const w=Z.value[s];if(o)h.value=[...h.value,...w.results];else{const v=w.results,u=t.multiple&&Array.isArray(t.modelValue)?t.modelValue:t.modelValue?[t.modelValue]:[],m=n.filter(x=>{const j=r(x);return u.includes(j)&&!v.some(U=>r(U)===j)});h.value=[...m,...v]}return _.value=w.more,b.value=!1,Promise.resolve()}!o&&O.value!==null&&(window.clearTimeout(O.value),O.value=null);const i=a.method||"GET";let c=a.url;a.urlBuilder&&typeof a.urlBuilder=="function"&&(c=a.urlBuilder(l,c),console.log("Using dynamically built URL:",c));const g=a.headers||{"Content-Type":"application/json",Accept:"application/json"};let p={};if(a.params)if(typeof a.params=="function"){const w=J.value?{page:q.value,limit:a.limit||10}:void 0;p=a.params(l,w)}else p={...a.params,query:l};else p=a.urlBuilder?{}:{query:l};if(J.value){const w=a.limit||10;if(!("page"in p)&&!("per_page"in p)){const v=a.pageParam||"page",u=a.limitParam||"per_page";p[v]=q.value,p[u]=w}}return o||(F.value=!0),new Promise(w=>{let v;if(i==="GET"){const u=new URLSearchParams(p).toString(),m=u?`${c}?${u}`:c;console.log("Making request to:",m),v=fetch(m,{method:i,headers:g})}else v=fetch(c,{method:i,headers:g,body:JSON.stringify(p)});v.then(u=>u.json()).then(u=>{let m=[],x=!1;if(a.processResults){const j=a.processResults(u);m=j.results,x=j.more}else Array.isArray(u)?(m=u,x=!1):u.results&&Array.isArray(u.results)?(m=u.results,x=!!u.more):(m=[],x=!1);if(console.log(`Fetched ${m.length} results, more: ${x}`),o)h.value=[...h.value,...m],e.nextTick(()=>{if(y){const j=Math.min(G,B.value.length-1);d.value=j,C(),k.value&&k.value.focus(),setTimeout(()=>{T=!1},100)}});else{const j=t.multiple&&Array.isArray(t.modelValue)?t.modelValue:t.modelValue?[t.modelValue]:[],U=n.filter(Q=>{const fe=r(Q);return j.includes(fe)&&!m.some(Me=>r(Me)===fe)});h.value=[...U,...m]}_.value=x,a.cache&&(Z.value[s]={results:m,more:x}),w()}).catch(u=>{console.error("Error fetching options:",u),o||(h.value=n),_.value=!1,w()}).finally(()=>{F.value=!1,b.value=!1,o&&y&&e.nextTick(()=>{setTimeout(()=>{T=!1},100)})})})},Ce=l=>{y=!1,T=!1,l.stopPropagation()},Le=()=>{y=!1,T=!1},Fe=l=>{var a;E.value;const o=l.target.value;if(E.value=o,y=!1,R.value){if(le(),O.value!==null&&(window.clearTimeout(O.value),O.value=null),!ee.value){h.value=[];return}const s=((a=t.ajax)==null?void 0:a.delay)||300;O.value=window.setTimeout(()=>{const n=document.activeElement===f.value;n&&(y=!1,T=!1),ie(E.value).then(()=>{e.nextTick(()=>{B.value.length>0&&(d.value=0,C());const i=document.activeElement===f.value;(n||i)&&f.value?f.value.focus():y&&B.value.length>0&&k.value&&k.value.focus()})})},s)}},C=()=>{e.nextTick(()=>{if(d.value<0||!$.value||!k.value)return;const l=k.value.querySelector(".loop-select-option-highlighted");if(l){const o=k.value,a=o.clientHeight,s=l,n=s.offsetTop,i=s.clientHeight,c=o.scrollTop,g=n<c,p=n+i>c+a;g?o.scrollTop=n:p&&(o.scrollTop=n+i-a)}})};e.onMounted(()=>{document.addEventListener("click",re),R.value&&t.modelValue&&H.value.length===0&&(t.multiple?Array.isArray(t.modelValue)&&t.modelValue.length>0:t.modelValue!==null&&t.modelValue!==void 0)&&(console.log("Initial value present, fetching option data"),Ke())}),e.onBeforeUnmount(()=>{document.removeEventListener("click",re),O.value!==null&&(window.clearTimeout(O.value),O.value=null)}),e.watch(()=>t.loading,l=>{F.value=l}),e.watch(B,(l,o)=>{if(!D){if(!b.value){l.length>0?(d.value=0,y&&e.nextTick(()=>{k.value&&k.value.focus()})):d.value=-1;return}e.nextTick(()=>{if(y&&G>=0&&l.length>o.length){const a=Math.min(G,l.length-1);d.value=a,C()}})}}),e.watch(E,l=>{f.value&&f.value.value!==l&&(f.value.value=l)}),e.watch(d,()=>{D||d.value>=0&&C()}),e.watch(()=>t.modelValue,l=>{R.value&&l&&(t.multiple&&Array.isArray(l)?l:[l]).forEach(a=>{if(!H.value.find(n=>r(n)===a)&&N.value){const n=N.value.find(i=>r(i)===a);n&&(h.value.find(i=>r(i)===a)||h.value.push(n))}})},{immediate:!0});const re=l=>{Y.value&&!Y.value.contains(l.target)&&L.value&&z()},Ie=()=>{if(!J.value||!_.value||b.value)return;const l=k.value;if(!l)return;const o=l.scrollTop+l.clientHeight,a=20;o>=l.scrollHeight-a&&(console.log("Reached bottom of options list, loading more results..."),se())},ce=()=>{B.value.length!==0&&(y=!0,d.value<B.value.length-1?(d.value++,C(),e.nextTick(()=>{k.value&&k.value.focus()})):_.value&&!b.value&&(y=!0,T=!0,G=d.value,se()))},ue=()=>{B.value.length!==0&&(y=!0,d.value>0&&(d.value--,C(),e.nextTick(()=>{k.value&&k.value.focus()})))},de=()=>{d.value>=0&&B.value[d.value]&&(oe(B.value[d.value]),t.multiple&&e.nextTick(()=>{L.value&&f.value&&f.value.focus()}))};e.watch(L,l=>{D||l&&requestAnimationFrame(()=>{f.value&&!T&&f.value.focus()})}),e.watch(()=>b.value,(l,o)=>{o===!0&&l===!1&&setTimeout(()=>{T&&!y&&(T=!1)},200)});const Ke=async()=>{var a,s;if(!R.value)return;const l=t.multiple&&Array.isArray(t.modelValue)?t.modelValue:[t.modelValue];if(l.length===0)return;const o=l.filter(n=>!(n==null||S.value[String(n)]||H.value.some(i=>r(i)===n)));if(o.length!==0){F.value=!0;try{let n=[];if((a=t.ajax)!=null&&a.initialValueResolver){console.log("Using custom initialValueResolver to fetch option details");const i=o.map(async g=>{const p=await t.ajax.initialValueResolver(g);return p||null});n=(await Promise.all(i)).filter(g=>g!==null)}else if((s=t.ajax)!=null&&s.initialValueUrl){console.log("Using initialValueUrl to fetch option details");const i=t.ajax.initialValueUrl,c=t.ajax.method||"GET";let g={};t.ajax.initialValueParams?typeof t.ajax.initialValueParams=="function"?g=t.ajax.initialValueParams(o):g=t.ajax.initialValueParams:g={ids:o.join(",")};const p=t.ajax.headers||{"Content-Type":"application/json",Accept:"application/json"};let w;if(c==="GET"){const u=new URLSearchParams(g).toString(),m=u?`${i}?${u}`:i;console.log("Fetching initial values from:",m),w=await fetch(m,{method:c,headers:p})}else w=await fetch(i,{method:c,headers:p,body:JSON.stringify(g)});const v=await w.json();t.ajax.processResults?n=t.ajax.processResults(v).results:n=Array.isArray(v)?v:v.results||[]}else{console.log("Using regular ajax URL with id parameter to fetch option details");const i=t.multiple?o:[o[0]];for(const c of i){const g=t.ajax.url,p=t.ajax.method||"GET";let v={[t.ajax.idParam||"id"]:c};t.ajax.params&&(typeof t.ajax.params=="function"?v={...v,...t.ajax.params("")}:v={...v,...t.ajax.params});const u=t.ajax.headers||{"Content-Type":"application/json",Accept:"application/json"};let m;if(p==="GET"){const U=new URLSearchParams(v).toString(),Q=U?`${g}?${U}`:g;console.log("Fetching initial value from:",Q),m=await fetch(Q,{method:p,headers:u})}else m=await fetch(g,{method:p,headers:u,body:JSON.stringify(v)});const x=await m.json();let j=[];t.ajax.processResults?j=t.ajax.processResults(x).results:j=Array.isArray(x)?x:x.results||[],n=[...n,...j]}}console.log("Resolved initial options:",n),n.forEach(i=>{const c=r(i);c!=null&&(S.value[String(c)]=i,h.value.some(g=>r(g)===c)||h.value.push(i))})}catch(n){console.error("Error fetching initial value details:",n)}finally{F.value=!1}}};return(l,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["loop-select-container",{"loop-select-open":L.value,"loop-select-disabled":V.disabled}]),onClick:e.withModifiers(Pe,["stop"]),ref_key:"containerRef",ref:Y},[e.createElementVNode("div",pe,[e.createElementVNode("div",me,[V.multiple?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[N.value.length?(e.openBlock(),e.createElementBlock("div",ve,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,a=>(e.openBlock(),e.createElementBlock("div",{key:r(a),class:"loop-select-selected-item"},[e.renderSlot(l.$slots,"selected-option",{option:a,remove:()=>ne(a)},()=>[e.createElementVNode("span",null,e.toDisplayString(M(a)),1),e.createElementVNode("button",{class:"loop-select-remove-item",onClick:e.withModifiers(s=>ne(a),["stop"]),type:"button"}," × ",8,ye)])]))),128))])):(e.openBlock(),e.createElementBlock("span",Ve,e.toDisplayString(V.placeholder),1))],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[K.value?e.renderSlot(l.$slots,"selected-option",{key:0,option:K.value,remove:()=>{}},()=>[e.createElementVNode("span",he,e.toDisplayString(M(K.value)),1)]):(e.openBlock(),e.createElementBlock("span",ge,e.toDisplayString(V.placeholder),1))],64))]),o[1]||(o[1]=e.createElementVNode("div",{class:"loop-select-arrow"},[e.createElementVNode("span",null,"▼")],-1))]),e.createElementVNode("div",{class:"loop-select-dropdown",ref_key:"dropdownRef",ref:$},[e.createElementVNode("div",ke,[e.createElementVNode("input",{ref_key:"searchInputRef",ref:f,class:"loop-select-search",type:"text",onInput:Fe,onKeydown:[o[0]||(o[0]=e.withModifiers(()=>{},["stop"])),e.withKeys(e.withModifiers(ce,["prevent"]),["down"]),e.withKeys(e.withModifiers(ue,["prevent"]),["up"]),e.withKeys(e.withModifiers(de,["prevent"]),["enter"]),e.withKeys(e.withModifiers(z,["prevent"]),["esc"])],onClick:e.withModifiers(Ce,["stop"]),onFocus:Le,placeholder:"Search..."},null,40,we),V.loading||F.value?(e.openBlock(),e.createElementBlock("div",Se,o[2]||(o[2]=[e.createElementVNode("div",{class:"lds-dual-ring"},null,-1)]))):e.createCommentVNode("",!0)]),e.createElementVNode("ul",{class:"loop-select-options",onScroll:Ie,ref_key:"optionsListRef",ref:k,tabindex:e.unref(y)?0:-1,onKeydown:[e.withKeys(e.withModifiers(ce,["prevent"]),["down"]),e.withKeys(e.withModifiers(ue,["prevent"]),["up"]),e.withKeys(e.withModifiers(de,["prevent"]),["enter"]),e.withKeys(e.withModifiers(z,["prevent"]),["esc"])]},[B.value.length===0&&!V.loading&&!F.value?(e.openBlock(),e.createElementBlock("li",je,"No results found")):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B.value,(a,s)=>(e.openBlock(),e.createElementBlock("li",{key:r(a),class:e.normalizeClass(["loop-select-option",{"loop-select-option-selected":ae(a),"loop-select-option-highlighted":s===d.value}]),onClick:e.withModifiers(n=>oe(a),["stop"]),onMouseover:()=>{d.value=s,C(),e.isRef(y)?y.value=!1:y=!1}},[e.renderSlot(l.$slots,"option",{option:a,selected:ae(a),highlighted:s===d.value,index:s},()=>[e.createTextVNode(e.toDisplayString(M(a)),1)])],42,Be))),128)),b.value?(e.openBlock(),e.createElementBlock("li",Ee,[e.renderSlot(l.$slots,"loading-more",{},()=>[o[3]||(o[3]=e.createElementVNode("div",{class:"lds-dual-ring"},null,-1))])])):e.createCommentVNode("",!0)],64))],40,xe)],512),e.createElementVNode("select",{multiple:V.multiple,name:V.name,required:V.required,disabled:V.disabled,tabindex:"-1",class:"loop-select-hidden","aria-hidden":"true"},[!V.multiple&&!te.value?(e.openBlock(),e.createElementBlock("option",Ae,e.toDisplayString(V.placeholder),1)):e.createCommentVNode("",!0),V.multiple?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(N.value,a=>(e.openBlock(),e.createElementBlock("option",{key:r(a),value:r(a),selected:""},e.toDisplayString(M(a)),9,Oe))),128)):K.value?(e.openBlock(),e.createElementBlock("option",{key:2,value:te.value,selected:""},e.toDisplayString(M(K.value)),9,be)):e.createCommentVNode("",!0)],8,Te)],2))}});let X=null;typeof window<"u"&&(X=window.Vue),X&&X.component("Loop8Select",W);const Re={install:V=>{V.component("Loop8Select",W)}};P.Loop8Select=W,P.default=Re,Object.defineProperties(P,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +1 @@
-.loop-select-container{position:relative;width:100%;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;cursor:pointer}.loop-select-disabled{opacity:.6;cursor:not-allowed}.loop-select-selection{min-height:36px;padding:4px 8px;display:flex;align-items:center;flex-wrap:nowrap}.loop-select-single-selection{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}.loop-select-tags-container{display:flex;flex-wrap:wrap;gap:4px;max-width:100%;overflow:hidden;align-items:center}.loop-select-selected-item{display:inline-flex;align-items:center;background-color:#e4e4e4;border-radius:3px;padding:2px 6px;margin-right:4px;margin-bottom:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loop-select-remove-item{background:none;border:none;color:#666;cursor:pointer;margin-left:4px;padding:0;line-height:1;font-size:16px;flex-shrink:0}.loop-select-remove-item:hover{color:#333}.loop-select-search-container{padding:6px 8px;border-bottom:1px solid #eee;position:relative;display:flex;align-items:center}.loop-select-search{border:1px solid #ccc;border-radius:3px;outline:none;background:transparent;width:100%;padding:6px 8px;margin:0;font-size:14px;box-sizing:border-box}.loop-select-search-spinner{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center;justify-content:center;height:20px;line-height:0}.loop-select-search-spinner .lds-dual-ring{width:18px;height:18px;line-height:0;vertical-align:middle}.loop-select-search-spinner .lds-dual-ring:after{width:14px;height:14px;margin:2px;border-width:1.5px;vertical-align:middle}.loop-select-placeholder{color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loop-select-selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loop-select-arrow{display:flex;align-items:center;margin-left:8px;flex-shrink:0}.loop-select-dropdown{position:absolute;width:100%;max-height:250px;background:white;border:1px solid #ccc;border-top:none;border-radius:0 0 4px 4px;z-index:1000;box-shadow:0 2px 4px #0000001a;box-sizing:border-box;display:flex;flex-direction:column}.loop-select-options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px;flex:1;outline:none}.loop-select-options:focus{box-shadow:inset 0 0 2px #0003}.loop-select-option{padding:8px 12px;cursor:pointer}.loop-select-option:hover{background-color:#f5f5f5}.loop-select-option-selected{background-color:#e6f7ff}.loop-select-option-highlighted{background-color:#f0f0f0}.loop-select-loading,.loop-select-no-results{padding:8px 12px;text-align:center;color:#999}.loop-select-loading-more{padding:8px 12px;text-align:center;color:#999;font-style:italic;font-size:.9em;background-color:#f9f9f9;display:flex;justify-content:center;align-items:center;line-height:0}.loop-select-loading-more .lds-dual-ring{width:24px;height:24px;vertical-align:middle;line-height:0}.loop-select-loading-more .lds-dual-ring:after{width:18px;height:18px;margin:3px;border-width:2px;vertical-align:middle}.loop-select-hidden{position:absolute;width:0;height:0;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;padding:0;border:0}.lds-dual-ring{display:inline-block;width:24px;height:24px}.lds-dual-ring:after{content:" ";display:block;width:18px;height:18px;margin:3px;border-radius:50%;border:2px solid #666;border-color:#666 transparent #666 transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+.loop-select-container{position:relative;width:100%;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;cursor:pointer}.loop-select-disabled{opacity:.6;cursor:not-allowed}.loop-select-selection{min-height:36px;padding:4px 8px;display:flex;align-items:center;flex-wrap:nowrap}.loop-select-single-selection{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}.loop-select-tags-container{display:flex;flex-wrap:wrap;gap:4px;max-width:100%;overflow:hidden;align-items:center}.loop-select-selected-item{display:inline-flex;align-items:center;background-color:#e4e4e4;border-radius:3px;padding:2px 6px;margin-right:4px;margin-bottom:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loop-select-remove-item{background:none;border:none;color:#666;cursor:pointer;margin-left:4px;padding:0;line-height:1;font-size:16px;flex-shrink:0}.loop-select-remove-item:hover{color:#333}.loop-select-search-container{padding:6px 8px;border-bottom:1px solid #eee;position:relative;display:flex;align-items:center}.loop-select-search{border:1px solid #ccc;border-radius:3px;outline:none;background:transparent;width:100%;padding:6px 8px;margin:0;font-size:14px;box-sizing:border-box}.loop-select-search-spinner{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center;justify-content:center;height:20px;line-height:0}.loop-select-search-spinner .lds-dual-ring{width:18px;height:18px;line-height:0;vertical-align:middle}.loop-select-search-spinner .lds-dual-ring:after{width:14px;height:14px;margin:2px;border-width:1.5px;vertical-align:middle}.loop-select-placeholder{color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loop-select-selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loop-select-arrow{display:flex;align-items:center;margin-left:8px;flex-shrink:0}.loop-select-dropdown{position:absolute;width:100%;max-height:250px;background:white;border:1px solid #ccc;border-top:none;border-radius:0 0 4px 4px;z-index:1000;box-shadow:0 2px 4px #0000001a;box-sizing:border-box;display:none;flex-direction:column}.loop-select-open .loop-select-dropdown{display:flex}.loop-select-options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:200px;flex:1;outline:none}.loop-select-options:focus{box-shadow:inset 0 0 2px #0003}.loop-select-option{padding:8px 12px;cursor:pointer}.loop-select-option:hover{background-color:#f5f5f5}.loop-select-option-selected{background-color:#e6f7ff}.loop-select-option-highlighted{background-color:#f0f0f0}.loop-select-loading,.loop-select-no-results{padding:8px 12px;text-align:center;color:#999}.loop-select-loading-more{padding:8px 12px;text-align:center;color:#999;font-style:italic;font-size:.9em;background-color:#f9f9f9;display:flex;justify-content:center;align-items:center;line-height:0}.loop-select-loading-more .lds-dual-ring{width:24px;height:24px;vertical-align:middle;line-height:0}.loop-select-loading-more .lds-dual-ring:after{width:18px;height:18px;margin:3px;border-width:2px;vertical-align:middle}.loop-select-hidden{position:absolute;width:0;height:0;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;padding:0;border:0}.lds-dual-ring{display:inline-block;width:24px;height:24px}.lds-dual-ring:after{content:" ";display:block;width:18px;height:18px;margin:3px;border-radius:50%;border:2px solid #666;border-color:#666 transparent #666 transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loop8/vue-select",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A Vue 3 select component inspired by Select2",
   "main": "dist/loop8-select.umd.js",
   "module": "dist/loop8-select.es.js",

package/src/styles/loop-select.css

@@ -147,10 +147,14 @@
   z-index: 1000;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
-  display: flex;
+  display: none;
   flex-direction: column;
 }
 
+.loop-select-open .loop-select-dropdown {
+  display: flex;
+}
+
 .loop-select-options {
   list-style: none;
   margin: 0;