@loop8/vue-select 0.1.3

package/dist/loop8-select.es.js

@@ -0,0 +1,600 @@
+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 = {
+  key: 1,
+  class: "loop-select-placeholder"
+}, He = {
+  key: 0,
+  class: "loop-select-tags-container"
+}, Ge = ["onClick"], De = {
+  key: 1,
+  class: "loop-select-placeholder"
+}, Me = { class: "loop-select-search-container" }, Je = ["onKeydown"], Qe = {
+  key: 0,
+  class: "loop-select-search-spinner"
+}, ze = ["tabindex", "onKeydown"], We = {
+  key: 0,
+  class: "loop-select-no-results"
+}, Xe = ["onClick", "onMouseover"], Ye = {
+  key: 0,
+  class: "loop-select-loading-more"
+}, Ze = ["multiple", "name", "required", "disabled"], el = {
+  key: 0,
+  value: "",
+  disabled: "",
+  selected: ""
+}, ll = ["value"], tl = ["value"], xe = /* @__PURE__ */ Ce({
+  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(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(() => {
+      var e;
+      return $.value && !!((e = l.ajax) != null && e.pagination);
+    }), ne = N(() => {
+      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);
+      if (a.length > 0) {
+        const t = a.filter(
+          (o) => !e.some((s) => u(s) === u(o))
+        );
+        return [...e, ...t];
+      }
+      return e;
+    }), B = N(() => {
+      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 (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);
+        }).filter((o) => o !== null);
+        return a.length > 0 && (I("invalid-option", a), A(() => {
+          const o = e.filter((s) => !a.includes(s));
+          I("update:modelValue", o);
+        })), t;
+      } else {
+        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 (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(() => {
+          I("update:modelValue", null);
+        }), []);
+      }
+    }), G = N(() => B.value.length > 0 ? B.value[0] : null), de = N(() => G.value ? u(G.value) : null);
+    N(() => {
+      const e = B.value[0];
+      return e ? D(e) : "";
+    });
+    const P = N(() => {
+      if ($.value)
+        return ne.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.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) {
+        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);
+        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(() => {
+        d.value && d.value.focus();
+      });
+    }, pe = (e) => {
+      const a = u(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)];
+      }
+    }, 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;
+        });
+      })));
+    }, 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;
+    };
+    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)
+        return Promise.resolve();
+      const t = l.ajax, o = Z.value ? `${e}_${Q.value}` : e;
+      let s = [];
+      if (l.modelValue && (s = [...B.value]), t.cache && oe.value[o]) {
+        const w = oe.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);
+            }
+          );
+          p.value = [...f, ...h];
+        }
+        return z.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));
+      const m = t.headers || {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      };
+      let v = {};
+      if (t.params)
+        if (typeof t.params == "function") {
+          const w = Z.value ? {
+            page: Q.value,
+            limit: t.limit || 10
+          } : void 0;
+          v = t.params(e, w);
+        } else
+          v = { ...t.params, query: e };
+      else
+        v = t.urlBuilder ? {} : { query: e };
+      if (Z.value) {
+        const w = t.limit || 10;
+        if (!("page" in v) && !("per_page" in v)) {
+          const h = t.pageParam || "page", r = t.limitParam || "per_page";
+          v[h] = Q.value, v[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, {
+            method: n,
+            headers: m
+          });
+        } else
+          h = fetch(i, {
+            method: n,
+            headers: m,
+            body: JSON.stringify(v)
+          });
+        h.then((r) => r.json()).then((r) => {
+          let f = [], k = !1;
+          if (t.processResults) {
+            const b = t.processResults(r);
+            f = b.results, k = 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(() => {
+              if (g) {
+                const b = Math.min(X, P.value.length - 1);
+                c.value = b, _(), 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);
+              }
+            );
+            p.value = [...M, ...f];
+          }
+          z.value = k, t.cache && (oe.value[o] = { results: f, more: k }), w();
+        }).catch((r) => {
+          console.error("Error fetching options:", r), a || (p.value = s), z.value = !1, w();
+        }).finally(() => {
+          H.value = !1, U.value = !1, a && g && A(() => {
+            setTimeout(() => {
+              C = !1;
+            }, 100);
+          });
+        });
+      });
+    }, ke = (e) => {
+      g = !1, C = !1, e.stopPropagation();
+    }, be = () => {
+      g = !1, C = !1;
+    }, Re = (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) {
+          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, _());
+              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)
+          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);
+        }
+      });
+    };
+    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) => {
+      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, _();
+        }
+      });
+    }), J(L, (e) => {
+      d.value && d.value.value !== e && (d.value.value = e);
+    }), J(c, () => {
+      c.value >= 0 && _();
+    }), J(() => 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));
+        }
+      });
+    }, { immediate: !0 });
+    const ge = (e) => {
+      se.value && !se.value.contains(e.target) && K.value && le();
+    }, Te = () => {
+      if (!Z.value || !z.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(() => {
+        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(() => {
+        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();
+      }));
+    };
+    J(K, (e) => {
+      e && A(() => {
+        d.value && !C && d.value.focus();
+      });
+    }), J(() => U.value, (e, a) => {
+      a === !0 && e === !1 && setTimeout(() => {
+        C && !g && (C = !1);
+      }, 200);
+    });
+    const Pe = 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)));
+      if (a.length !== 0) {
+        H.value = !0;
+        try {
+          let s = [];
+          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;
+            });
+            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";
+            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 || {
+              "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 });
+            } else
+              w = await fetch(n, {
+                method: i,
+                headers: v,
+                body: JSON.stringify(m)
+              });
+            const h = await w.json();
+            l.ajax.processResults ? s = l.ajax.processResults(h).results : s = Array.isArray(h) ? h : h.results || [];
+          } 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 };
+              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 });
+              } else
+                f = await fetch(m, {
+                  method: v,
+                  headers: r,
+                  body: JSON.stringify(h)
+                });
+              const k = await f.json();
+              let b = [];
+              l.ajax.processResults ? b = l.ajax.processResults(k).results : b = Array.isArray(k) ? k : k.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));
+          });
+        } catch (s) {
+          console.error("Error fetching initial value details:", s);
+        } finally {
+          H.value = !1;
+        }
+      }
+    };
+    return (e, a) => (y(), V("div", {
+      class: we([
+        "loop-select-container",
+        { "loop-select-open": K.value, "loop-select-disabled": S.disabled }
+      ]),
+      onClick: R(Oe, ["stop"]),
+      ref_key: "containerRef",
+      ref: se
+    }, [
+      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),
+                class: "loop-select-selected-item"
+              }, [
+                ae(e.$slots, "selected-option", {
+                  option: t,
+                  remove: () => pe(t)
+                }, () => [
+                  T("span", null, F(D(t)), 1),
+                  T("button", {
+                    class: "loop-select-remove-item",
+                    onClick: R((o) => pe(t), ["stop"]),
+                    type: "button"
+                  }, " × ", 8, Ge)
+                ])
+              ]))), 128))
+            ])) : (y(), V("span", De, F(S.placeholder), 1))
+          ], 64)) : (y(), V(Y, { key: 0 }, [
+            G.value ? ae(e.$slots, "selected-option", {
+              key: 0,
+              option: G.value,
+              remove: () => {
+              }
+            }, () => [
+              T("span", Fe, F(D(G.value)), 1)
+            ]) : (y(), V("span", qe, F(S.placeholder), 1))
+          ], 64))
+        ]),
+        a[1] || (a[1] = T("div", { class: "loop-select-arrow" }, [
+          T("span", null, "▼")
+        ], -1))
+      ]),
+      K.value ? (y(), V("div", {
+        key: 0,
+        class: "loop-select-dropdown",
+        ref_key: "dropdownRef",
+        ref: ce
+      }, [
+        T("div", Me, [
+          T("input", {
+            ref_key: "searchInputRef",
+            ref: d,
+            class: "loop-select-search",
+            type: "text",
+            onInput: Re,
+            onKeydown: [
+              a[0] || (a[0] = R(() => {
+              }, ["stop"])),
+              q(R(ye, ["prevent"]), ["down"]),
+              q(R(Ve, ["prevent"]), ["up"]),
+              q(R(Se, ["prevent"]), ["enter"]),
+              q(R(le, ["prevent"]), ["esc"])
+            ],
+            onClick: R(ke, ["stop"]),
+            onFocus: be,
+            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)
+        ]),
+        T("ul", {
+          class: "loop-select-options",
+          onScroll: Te,
+          ref_key: "optionsListRef",
+          ref: j,
+          tabindex: Ue(g) ? 0 : -1,
+          onKeydown: [
+            q(R(ye, ["prevent"]), ["down"]),
+            q(R(Ve, ["prevent"]), ["up"]),
+            q(R(Se, ["prevent"]), ["enter"]),
+            q(R(le, ["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([
+                "loop-select-option",
+                {
+                  "loop-select-option-selected": ve(t),
+                  "loop-select-option-highlighted": o === c.value
+                }
+              ]),
+              onClick: R((s) => fe(t), ["stop"]),
+              onMouseover: () => {
+                c.value = o, _(), $e(g) ? g.value = !1 : g = !1;
+              }
+            }, [
+              ae(e.$slots, "option", {
+                option: t,
+                selected: ve(t),
+                highlighted: o === c.value,
+                index: o
+              }, () => [
+                Be(F(D(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))
+              ])
+            ])) : ee("", !0)
+          ], 64))
+        ], 40, ze)
+      ], 512)) : ee("", !0),
+      T("select", {
+        multiple: S.multiple,
+        name: S.name,
+        required: S.required,
+        disabled: S.disabled,
+        tabindex: "-1",
+        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),
+          selected: ""
+        }, F(D(t)), 9, ll))), 128)) : G.value ? (y(), V("option", {
+          key: 2,
+          value: de.value,
+          selected: ""
+        }, F(D(G.value)), 9, tl)) : ee("", !0)
+      ], 8, Ze)
+    ], 2));
+  }
+});
+let re = null;
+typeof window < "u" && (re = window.Vue);
+re && re.component("Loop8Select", xe);
+const sl = {
+  install: (S) => {
+    S.component("Loop8Select", xe);
+  }
+};
+export {
+  xe as Loop8Select,
+  sl as default
+};

package/dist/loop8-select.umd.js

@@ -0,0 +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"}})});

package/dist/style.css

@@ -0,0 +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)}}