@night-owl-elite/vue-select 1.3.47 → 1.3.49

package/dist/vue-select.es.js

@@ -1,11 +1,11 @@
-import { computed as p, createElementBlock as r, openBlock as i, normalizeClass as w, createCommentVNode as m, createElementVNode as f, resolveComponent as et, normalizeStyle as be, createBlock as O, withModifiers as C, renderSlot as ue, Fragment as j, renderList as Z, withCtx as Re, ref as g, watch as xe, onMounted as tt, nextTick as R, onUnmounted as lt, withDirectives as ke, withKeys as we, toDisplayString as S, createVNode as te, vModelText as nt, vModelSelect as st, createTextVNode as de, vShow as at } from "vue";
-import { createPopper as Se } from "@popperjs/core";
-const Ce = (t, q) => {
+import { computed as p, createElementBlock as r, openBlock as i, normalizeClass as k, createCommentVNode as v, createElementVNode as f, resolveComponent as dt, normalizeStyle as ke, createBlock as O, withModifiers as C, renderSlot as fe, Fragment as U, renderList as G, withCtx as Ze, ref as h, watch as ue, onMounted as ut, nextTick as K, onUnmounted as ct, withDirectives as Se, withKeys as Ce, toDisplayString as S, createVNode as le, vModelText as ft, vModelSelect as vt, createTextVNode as ce, vShow as mt } from "vue";
+import { createPopper as Ve } from "@popperjs/core";
+const Le = (t, W) => {
   const l = t.__vccOpts || t;
-  for (const [h, c] of q)
-    l[h] = c;
+  for (const [g, c] of W)
+    l[g] = c;
   return l;
-}, it = { key: 0 }, ot = { key: 1 }, rt = { key: 2 }, dt = { key: 3 }, ut = { key: 4 }, ct = { key: 5 }, ft = { key: 6 }, mt = { key: 7 }, vt = {
+}, ht = { key: 0 }, gt = { key: 1 }, yt = { key: 2 }, pt = { key: 3 }, bt = { key: 4 }, xt = { key: 5 }, wt = { key: 6 }, kt = { key: 7 }, St = {
   __name: "SvgIcon",
   props: {
     name: {
@@ -14,53 +14,53 @@ const Ce = (t, q) => {
     }
   },
   setup(t) {
-    const q = t, l = p(() => ({
-      "svg-icon-spin": q.name === "spinner"
+    const W = t, l = p(() => ({
+      "svg-icon-spin": W.name === "spinner"
     }));
-    return (h, c) => (i(), r("svg", {
+    return (g, c) => (i(), r("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
       width: "1em",
       height: "1em",
-      class: w(l.value)
+      class: k(l.value)
     }, [
-      t.name === "spinner" ? (i(), r("g", it, c[0] || (c[0] = [
+      t.name === "spinner" ? (i(), r("g", ht, c[0] || (c[0] = [
         f("path", { d: "M12,4V2A10,10,0,0,0,2,12H4A8,8,0,0,1,12,4Z" }, null, -1)
-      ]))) : m("", !0),
-      t.name === "times" ? (i(), r("g", ot, c[1] || (c[1] = [
+      ]))) : v("", !0),
+      t.name === "times" ? (i(), r("g", gt, c[1] || (c[1] = [
         f("path", { d: "M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z" }, null, -1)
-      ]))) : m("", !0),
-      t.name === "chevron-down" ? (i(), r("g", rt, c[2] || (c[2] = [
+      ]))) : v("", !0),
+      t.name === "chevron-down" ? (i(), r("g", yt, c[2] || (c[2] = [
         f("path", { d: "M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z" }, null, -1)
-      ]))) : m("", !0),
-      t.name === "chevron-right" ? (i(), r("g", dt, c[3] || (c[3] = [
+      ]))) : v("", !0),
+      t.name === "chevron-right" ? (i(), r("g", pt, c[3] || (c[3] = [
         f("path", { d: "M10.83,12l-4.24,4.24a1,1,0,0,0,1.41,1.41L13.66,12,8,6.34A1,1,0,0,0,6.59,7.76Z" }, null, -1)
-      ]))) : m("", !0),
-      t.name === "search" ? (i(), r("g", ut, c[4] || (c[4] = [
+      ]))) : v("", !0),
+      t.name === "search" ? (i(), r("g", bt, c[4] || (c[4] = [
         f("path", { d: "M21.71,20.29,18,16.61A9,9,0,1,0,16.61,18l3.68,3.68a1,1,0,0,0,1.42,0A1,1,0,0,0,21.71,20.29ZM11,18a7,7,0,1,1,7-7A7,7,0,0,1,11,18Z" }, null, -1)
-      ]))) : m("", !0),
-      t.name === "asc" ? (i(), r("g", ct, c[5] || (c[5] = [
+      ]))) : v("", !0),
+      t.name === "asc" ? (i(), r("g", xt, c[5] || (c[5] = [
         f("path", {
           fill: "currentColor",
           d: "M4.869 11H2.667L6 3h2l3.333 8H9.131l-.41-1H5.28zm1.23-3h1.803L7 5.8zm12.9 8V3h-2v13h-3l4 5l4-5zm-8-3H3v2h4.855L3 19v2h8v-2H6.146L11 15z"
         }, null, -1)
-      ]))) : m("", !0),
-      t.name === "desc" ? (i(), r("g", ft, c[6] || (c[6] = [
+      ]))) : v("", !0),
+      t.name === "desc" ? (i(), r("g", wt, c[6] || (c[6] = [
         f("path", {
           fill: "currentColor",
           d: "M4.869 11H2.667L6 3h2l3.333 8H9.131l-.41-1H5.28zm1.23-3h1.803L7 5.8zm15.9 0l-4-5l-4 5h3v13h2V8zm-11 5H3v2h4.855L3 19v2h8v-2H6.146L11 15z"
         }, null, -1)
-      ]))) : m("", !0),
-      t.name === "info-circle" ? (i(), r("g", mt, c[7] || (c[7] = [
+      ]))) : v("", !0),
+      t.name === "info-circle" ? (i(), r("g", kt, c[7] || (c[7] = [
         f("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }, null, -1)
-      ]))) : m("", !0)
+      ]))) : v("", !0)
     ], 2));
   }
-}, A = /* @__PURE__ */ Ce(vt, [["__scopeId", "data-v-89f9b7e1"]]), ht = {
+}, $ = /* @__PURE__ */ Le(St, [["__scopeId", "data-v-89f9b7e1"]]), Ct = ["data-index"], Vt = {
   key: 2,
   class: "expander-placeholder flex-shrink-0"
-}, yt = ["checked", ".indeterminate", "disabled"], gt = { class: "item-content text-start text-break lh-1" }, le = 0.91, pt = {
+}, Lt = ["checked", ".indeterminate", "disabled"], It = { class: "item-content text-start text-break lh-1" }, ne = 0.91, Mt = {
   __name: "TreeSelectItem",
   props: {
     item: { type: Object, required: !0 },
@@ -76,67 +76,74 @@ const Ce = (t, q) => {
     disableBranchNode: { type: Boolean, default: !1 },
     displayMode: { type: String, default: "text" },
     index: { type: Number, default: 0 },
-    siblingsCount: { type: Number, default: 1 }
+    siblingsCount: { type: Number, default: 1 },
+    highlightedIndex: {
+      type: Number,
+      default: -1
+    }
   },
   emits: ["select", "toggle-expand"],
-  setup(t, { emit: q }) {
-    const l = t, h = p(() => l.index === l.siblingsCount - 1), c = (v) => v[l.optionValue] || v.id || v.value, $ = (v) => !l.disabledKey || !v ? !1 : v.hasOwnProperty(l.disabledKey) && v[l.disabledKey] !== null, V = p(() => l.item.children && l.item.children.length > 0), k = p(() => l.expandedItems.has(c(l.item))), N = p(() => l.selectedItems.includes(c(l.item))), K = (v) => {
+  setup(t, { emit: W }) {
+    const l = t, g = p(() => l.index === l.siblingsCount - 1), c = (m) => m[l.optionValue] || m.id || m.value, B = (m) => !l.disabledKey || !m ? !1 : m.hasOwnProperty(l.disabledKey) && m[l.disabledKey] !== null, V = p(() => l.item.children && l.item.children.length > 0), w = p(() => l.expandedItems.has(c(l.item))), L = p(() => l.selectedItems.includes(c(l.item))), N = (m) => {
       let y = [];
-      return v.children && v.children.forEach((L) => {
-        y.push(c(L)), y.push(...K(L));
+      return m.children && m.children.forEach((I) => {
+        y.push(c(I)), y.push(...N(I));
       }), y;
-    }, H = p(() => !l.multiple || !l.selectAll || !V.value || N.value ? !1 : K(l.item).some((y) => l.selectedItems.includes(y)));
-    return (v, y) => {
-      const L = et("TreeSelectItem", !0);
+    }, j = p(() => !l.multiple || !l.selectAll || !V.value || L.value ? !1 : N(l.item).some((y) => l.selectedItems.includes(y)));
+    return (m, y) => {
+      const I = dt("TreeSelectItem", !0);
       return i(), r("div", {
-        class: w(["tree-select-item-wrapper", { "is-last-child": h.value }])
+        class: k(["tree-select-item-wrapper", {
+          "is-last-child": g.value
+        }]),
+        "data-index": t.index
       }, [
         f("div", {
-          class: w(["list-group-item list-group-item-action d-flex align-items-center gap-1", {
-            "bg-primary text-white": N.value && (t.selectMode === "highlight" || !t.multiple) && !$(t.item) && !(t.disableBranchNode && V.value),
-            "is-disabled text-muted bg-light": $(t.item)
+          class: k(["list-group-item list-group-item-action d-flex align-items-center gap-1", {
+            "bg-primary text-white": t.highlightedIndex === t.index && t.selectMode === "highlight" || L.value && (t.selectMode === "highlight" || !t.multiple) && !B(t.item) && !(t.disableBranchNode && V.value),
+            "is-disabled text-muted bg-light": B(t.item)
           }]),
-          style: be({ paddingLeft: `${t.level * le + 0.5}rem` }),
-          onClick: y[2] || (y[2] = (B) => $(t.item) ? null : v.$emit("select", t.item))
+          style: ke({ paddingLeft: `${t.level * ne + 0.5}rem` }),
+          onClick: y[2] || (y[2] = (T) => B(t.item) ? null : m.$emit("select", t.item))
         }, [
           t.displayMode === "tree-node" && t.level > 0 ? (i(), r("div", {
             key: 0,
-            class: w(["tree-indent", { "last-child-connector": h.value }]),
-            style: be({
-              left: `${(t.level - 1) * le + le / 2}rem`,
+            class: k(["tree-indent", { "last-child-connector": g.value }]),
+            style: ke({
+              left: `${(t.level - 1) * ne + ne / 2}rem`,
               width: "2.3rem"
             })
-          }, null, 6)) : m("", !0),
-          V.value ? (i(), O(A, {
+          }, null, 6)) : v("", !0),
+          V.value ? (i(), O($, {
             key: 1,
             name: "chevron-right",
-            class: w(["expander-icon flex-shrink-0", { "rotate-90": k.value }]),
-            onClick: y[0] || (y[0] = C((B) => v.$emit("toggle-expand", c(t.item)), ["stop"]))
-          }, null, 8, ["class"])) : (i(), r("span", ht)),
+            class: k(["expander-icon flex-shrink-0", { "rotate-90": w.value }]),
+            onClick: y[0] || (y[0] = C((T) => m.$emit("toggle-expand", c(t.item)), ["stop"]))
+          }, null, 8, ["class"])) : (i(), r("span", Vt)),
           t.multiple && t.selectMode === "checkbox" && !(t.disableBranchNode && V.value) ? (i(), r("input", {
             key: 3,
             type: "checkbox",
             class: "tree-checkbox",
-            checked: N.value,
-            ".indeterminate": H.value,
-            disabled: $(t.item),
-            onClick: y[1] || (y[1] = C((B) => v.$emit("select", t.item), ["stop"]))
-          }, null, 40, yt)) : m("", !0),
-          f("div", gt, [
-            ue(v.$slots, "default", {
+            checked: L.value,
+            ".indeterminate": j.value,
+            disabled: B(t.item),
+            onClick: y[1] || (y[1] = C((T) => m.$emit("select", t.item), ["stop"]))
+          }, null, 40, Lt)) : v("", !0),
+          f("div", It, [
+            fe(m.$slots, "default", {
               item: t.item,
               level: t.level
             }, void 0, !0)
           ])
         ], 6),
-        V.value && k.value ? (i(), r("div", {
+        V.value && w.value ? (i(), r("div", {
           key: 0,
-          class: w(["children-wrapper", { "tree-branch-guide": t.displayMode === "tree-node" && !h.value }]),
-          style: be(t.displayMode === "tree-node" ? { marginLeft: `${t.level * le + le / 2}rem` } : {})
+          class: k(["children-wrapper", { "tree-branch-guide": t.displayMode === "tree-node" && !g.value }]),
+          style: ke(t.displayMode === "tree-node" ? { marginLeft: `${t.level * ne + ne / 2}rem` } : {})
         }, [
-          (i(!0), r(j, null, Z(t.item.children, (B, ne) => (i(), O(L, {
-            key: c(B),
-            item: B,
+          (i(!0), r(U, null, G(t.item.children, (T, ae) => (i(), O(I, {
+            key: c(T),
+            item: T,
             level: t.level + 1,
             "selected-items": t.selectedItems,
             "expanded-items": t.expandedItems,
@@ -148,52 +155,48 @@ const Ce = (t, q) => {
             "disabled-key": t.disabledKey,
             "disable-branch-node": t.disableBranchNode,
             "display-mode": t.displayMode,
-            index: ne,
+            index: ae,
             "siblings-count": t.item.children.length,
-            onSelect: y[3] || (y[3] = (M) => v.$emit("select", M)),
-            onToggleExpand: y[4] || (y[4] = (M) => v.$emit("toggle-expand", M))
+            onSelect: y[3] || (y[3] = (M) => m.$emit("select", M)),
+            onToggleExpand: y[4] || (y[4] = (M) => m.$emit("toggle-expand", M))
           }, {
-            default: Re(({ item: M, level: z }) => [
-              ue(v.$slots, "default", {
+            default: Ze(({ item: M, level: z }) => [
+              fe(m.$slots, "default", {
                 item: M,
                 level: z
               }, void 0, !0)
             ]),
             _: 2
           }, 1032, ["item", "level", "selected-items", "expanded-items", "multiple", "select-all", "select-mode", "option-label", "option-value", "disabled-key", "disable-branch-node", "display-mode", "index", "siblings-count"]))), 128))
-        ], 6)) : m("", !0)
-      ], 2);
+        ], 6)) : v("", !0)
+      ], 10, Ct);
     };
   }
-}, bt = /* @__PURE__ */ Ce(pt, [["__scopeId", "data-v-faaee2eb"]]), xt = ["onKeydown"], kt = { class: "tree-select-display-container" }, wt = {
+}, At = /* @__PURE__ */ Le(Mt, [["__scopeId", "data-v-143cc698"]]), $t = ["onKeydown"], Bt = { class: "tree-select-display-container" }, Nt = {
   key: 0,
   class: "d-flex align-items-center justify-content-start w-100"
-}, St = ["title"], Ct = { key: 1 }, Vt = {
+}, Tt = ["title"], Et = { key: 1 }, zt = {
   key: 0,
   class: "text-muted"
-}, Lt = {
+}, Dt = {
   class: "chip-measure-layer",
   "aria-hidden": "true"
-}, Mt = { class: "chip-label" }, It = { class: "chip-label" }, At = { class: "d-flex align-items-center gap-2" }, $t = { class: "list-group list-group-flush" }, Nt = { class: "text-wrap text-start me-2" }, Bt = { class: "p-2 border-bottom d-flex flex-column gap-2" }, Tt = ["onKeydown"], zt = {
+}, Kt = { class: "chip-label" }, Pt = { class: "chip-label" }, Rt = { class: "d-flex align-items-center gap-2" }, Ot = { class: "list-group list-group-flush" }, qt = { class: "text-wrap text-start me-2" }, Ft = { class: "p-2 border-bottom d-flex flex-column gap-2" }, Ht = ["onKeydown"], Wt = {
   key: 1,
   class: "d-flex align-items-center gap-2"
-}, Et = ["value"], Kt = ["disabled"], Dt = {
+}, jt = ["value"], Zt = ["disabled"], Ut = {
   key: 0,
   class: "p-4 text-muted text-center"
-}, Pt = {
-  key: 1,
-  class: "tree-select-body",
-  style: { "max-height": "300px", "overflow-y": "auto" }
-}, Rt = {
+}, Gt = {
   key: 0,
   class: "list-group list-group-flush"
-}, Ot = {
+}, Jt = {
   class: "d-flex align-items-center gap-2",
   style: { "white-space": "wrap" }
-}, Ft = {
+}, Qt = {
   key: 1,
   class: "p-3 text-muted text-center"
-}, qt = { key: 0 }, Ht = { key: 0 }, Wt = { key: 1 }, jt = { key: 0 }, Zt = { key: 1 }, Ut = {
+}, Xt = { key: 0 }, Yt = { key: 0 }, _t = { key: 1 }, el = { key: 0 }, tl = { key: 1 }, ll = {
   __name: "TreeSelectMain",
   props: {
     modelValue: {
@@ -325,225 +328,227 @@ const Ce = (t, q) => {
     }
   },
   emits: ["update:modelValue", "change", "clear", "deselect", "select", "focus", "blur", "add-new"],
-  setup(t, { emit: q }) {
-    const l = t, h = q, c = g(null), $ = g(null), V = g(null), k = g(""), N = g(!1), K = g(/* @__PURE__ */ new Set()), H = g(null), v = g(null), y = g(null), L = g(!1), B = g(null), ne = g(null), M = g(!1), z = g(l.defaultSortKey), U = g(l.defaultSortDirection), G = g(null), se = g(null), J = g(!1), ae = g(null), Ve = g(null), ce = g(0), Le = p(() => l.size === "sm" ? "btn-sm" : l.size === "lg" ? "btn-lg" : l.size === "xl" ? "btn-xl" : ""), Me = p(() => l.size === "sm" ? "form-control-sm" : l.size === "lg" ? "form-control-lg" : l.size === "xl" ? "form-control-xl" : ""), Oe = p(() => oe.value === 0 ? [] : W.value.slice(ye.value)), Q = p(() => !l.multiple || !l.excludeFromSelectedListKey ? P.value : P.value.filter((e) => {
-      const s = D(e);
-      return !s || !s[l.excludeFromSelectedListKey];
-    })), Ie = p(() => {
-      const e = Q.value;
+  setup(t, { emit: W }) {
+    const l = t, g = W, c = h(null), B = h(null), V = h(null), w = h(""), L = h(!1), N = h(/* @__PURE__ */ new Set()), j = h(null), m = h(null), y = h(null), I = h(!1), T = h(null), ae = h(null), M = h(!1), z = h(l.defaultSortKey), J = h(l.defaultSortDirection), Q = h(null), se = h(null), X = h(!1), ie = h(null), Ie = h(null), ve = h(0), q = h(-1), me = h([]), Me = h(null), Ae = p(() => l.size === "sm" ? "btn-sm" : l.size === "lg" ? "btn-lg" : l.size === "xl" ? "btn-xl" : ""), $e = p(() => l.size === "sm" ? "form-control-sm" : l.size === "lg" ? "form-control-lg" : l.size === "xl" ? "form-control-xl" : ""), Ue = p(() => re.value === 0 ? [] : Z.value.slice(be.value)), Y = p(() => !l.multiple || !l.excludeFromSelectedListKey ? R.value : R.value.filter((e) => {
+      const a = P(e);
+      return !a || !a[l.excludeFromSelectedListKey];
+    })), Be = p(() => {
+      const e = Y.value;
       if (e.length === 0) return l.placeholder;
       if (l.multiple) {
         if (e.length === 1) {
-          const n = Y(e[0]);
+          const n = ee(e[0]);
           return n ? n.join(" → ") : e[0];
         }
         return `${e.length} items selected`;
       }
-      const s = Y(e[0]);
-      return s ? s.join(" → ") : e[0];
-    }), Fe = p(() => l.multiple ? Array.isArray(l.modelValue) ? l.modelValue : [] : l.modelValue !== null && l.modelValue !== void 0 ? [l.modelValue] : []), qe = p(() => Fe.value.filter((e) => e === "" || e === null || e === void 0 || e === 0 ? !1 : !D(e))), Ae = async () => {
-      await R();
-      const e = ne.value;
-      if (l.multiple || l.displayMode === "chips" || Q.value.length === 0 || !e) {
+      const a = ee(e[0]);
+      return a ? a.join(" → ") : e[0];
+    }), Ge = p(() => l.multiple ? Array.isArray(l.modelValue) ? l.modelValue : [] : l.modelValue !== null && l.modelValue !== void 0 ? [l.modelValue] : []), Je = p(() => Ge.value.filter((e) => e === "" || e === null || e === void 0 || e === 0 ? !1 : !P(e))), Ne = (e, a = 0, n = []) => (e.forEach((s) => {
+      n.push({ item: s, level: a }), s.children && s.children.length && N.value.has(b(s)) && Ne(s.children, a + 1, n);
+    }), n), Te = async () => {
+      await K();
+      const e = ae.value;
+      if (l.multiple || l.displayMode === "chips" || Y.value.length === 0 || !e) {
         M.value = !1;
         return;
       }
       M.value = e.scrollWidth > e.clientWidth;
-    }, E = (e) => e && (e[l.optionLabel] || e.label || e.name) || "", b = (e) => e ? e[l.optionValue] || e.id || e.value : null, fe = (e) => !l.disabledKey || !e ? !1 : e.hasOwnProperty(l.disabledKey) && e[l.disabledKey] !== null, I = (e) => e.children && e.children.length > 0, X = (e, s) => {
-      if (s)
-        return s.split(".").reduce((n, a) => n && n[a], e);
-    }, D = (e, s = l.items) => {
-      for (const n of s) {
+    }, D = (e) => e && (e[l.optionLabel] || e.label || e.name) || "", b = (e) => e ? e[l.optionValue] || e.id || e.value : null, he = (e) => !l.disabledKey || !e ? !1 : e.hasOwnProperty(l.disabledKey) && e[l.disabledKey] !== null, A = (e) => e.children && e.children.length > 0, _ = (e, a) => {
+      if (a)
+        return a.split(".").reduce((n, s) => n && n[s], e);
+    }, P = (e, a = l.items) => {
+      for (const n of a) {
         if (b(n) === e) return n;
-        if (I(n)) {
-          const a = D(e, n.children);
-          if (a) return a;
+        if (A(n)) {
+          const s = P(e, n.children);
+          if (s) return s;
         }
       }
       return null;
-    }, me = (e) => {
-      const s = [];
-      return I(e) && e.children.forEach((n) => {
-        fe(n) || (s.push(b(n)), s.push(...me(n)));
-      }), s;
-    }, ie = async () => {
-      await R();
-      const e = Ve.value;
+    }, ge = (e) => {
+      const a = [];
+      return A(e) && e.children.forEach((n) => {
+        he(n) || (a.push(b(n)), a.push(...ge(n)));
+      }), a;
+    }, oe = async () => {
+      await K();
+      const e = Ie.value;
       if (!e) return;
-      const s = e.querySelector(".chip-measure-layer");
-      if (!s) return;
-      const n = Array.from(s.children);
+      const a = e.querySelector(".chip-measure-layer");
+      if (!a) return;
+      const n = Array.from(a.children);
       if (!n.length) {
-        ce.value = 0;
+        ve.value = 0;
         return;
       }
-      const a = e.clientWidth, o = 4, d = 40;
+      const s = e.clientWidth, o = 4, d = 40;
       let u = 0, x = 0;
-      for (let T = 0; T < n.length; T++) {
-        const Pe = n[T].offsetWidth + o, _e = T < n.length - 1 ? d : 0;
-        if (u + Pe + _e > a)
+      for (let E = 0; E < n.length; E++) {
+        const je = n[E].offsetWidth + o, rt = E < n.length - 1 ? d : 0;
+        if (u + je + rt > s)
           break;
-        u += Pe, x++;
+        u += je, x++;
       }
-      ce.value = Math.max(x, 1);
-    }, ve = (e, s = l.items, n = []) => {
-      for (const a of s) {
-        if (b(a) === e) return n;
-        if (I(a)) {
-          const o = ve(e, a.children, [...n, b(a)]);
+      ve.value = Math.max(x, 1);
+    }, ye = (e, a = l.items, n = []) => {
+      for (const s of a) {
+        if (b(s) === e) return n;
+        if (A(s)) {
+          const o = ye(e, s.children, [...n, b(s)]);
           if (o) return o;
         }
       }
       return null;
-    }, P = p(() => {
+    }, R = p(() => {
       const e = new Set(Array.isArray(l.modelValue) ? l.modelValue : [l.modelValue].filter(Boolean));
       if (l.multiple && l.selectAll) {
-        const s = (n) => {
-          n.forEach((a) => {
-            if (I(a)) {
-              const o = a.children.filter((u) => !fe(u));
-              o.length > 0 && o.every((u) => e.has(b(u))) && e.add(b(a)), s(a.children);
+        const a = (n) => {
+          n.forEach((s) => {
+            if (A(s)) {
+              const o = s.children.filter((u) => !he(u));
+              o.length > 0 && o.every((u) => e.has(b(u))) && e.add(b(s)), a(s.children);
             }
           });
         };
-        s(l.items);
+        a(l.items);
       }
       return Array.from(e);
-    }), Y = (e, s = l.items, n = []) => {
-      for (const a of s) {
-        const o = [...n, E(a)];
-        if (b(a) === e) return o;
-        if (I(a)) {
-          const d = Y(e, a.children, o);
+    }), ee = (e, a = l.items, n = []) => {
+      for (const s of a) {
+        const o = [...n, D(s)];
+        if (b(s) === e) return o;
+        if (A(s)) {
+          const d = ee(e, s.children, o);
           if (d) return d;
         }
       }
       return null;
-    }, $e = (e) => {
+    }, Ee = (e) => {
       if (!e || e.length === 0) return "";
-      const s = e.join(" → ");
-      return s.length <= 40 ? s : e.length > 2 ? `${e[0]} → ... → ${e[e.length - 1]}` : s;
-    }, he = p(() => {
-      const e = Q.value;
+      const a = e.join(" → ");
+      return a.length <= 40 ? a : e.length > 2 ? `${e[0]} → ... → ${e[e.length - 1]}` : a;
+    }, pe = p(() => {
+      const e = Y.value;
       if (e.length === 0) return l.placeholder;
       if (l.multiple) {
         if (e.length === 1) {
-          const o = D(e[0]);
+          const o = P(e[0]);
           if (!o)
             return `${e[0]} (No longer available)`;
-          const d = Y(e[0]);
-          return d ? $e(d) : E(o);
+          const d = ee(e[0]);
+          return d ? Ee(d) : D(o);
         }
         return `${e.length} items selected`;
       }
-      const s = e[0], n = D(s);
+      const a = e[0], n = P(a);
       if (!n)
-        return `${s} (No longer available)`;
-      const a = Y(s);
-      return a ? $e(a) : E(n);
-    }), W = p(() => {
-      if (!l.multiple || Q.value.length === 0) return [];
-      const e = Q.value.map((a) => {
-        const o = D(a);
+        return `${a} (No longer available)`;
+      const s = ee(a);
+      return s ? Ee(s) : D(n);
+    }), Z = p(() => {
+      if (!l.multiple || Y.value.length === 0) return [];
+      const e = Y.value.map((s) => {
+        const o = P(s);
         return o || {
-          [l.optionValue]: a,
-          [l.optionLabel]: `${a} (No longer available)`,
+          [l.optionValue]: s,
+          [l.optionLabel]: `${s} (No longer available)`,
           __missing: !0
         };
       });
       if (!l.sortable || !z.value)
         return e;
-      const s = z.value, n = U.value;
-      return [...e].sort((a, o) => {
-        if (a.__missing) return 1;
+      const a = z.value, n = J.value;
+      return [...e].sort((s, o) => {
+        if (s.__missing) return 1;
         if (o.__missing) return -1;
-        const d = X(a, s), u = X(o, s);
+        const d = _(s, a), u = _(o, a);
         if (d == null) return 1;
         if (u == null) return -1;
         let x = 0;
         return typeof d == "string" && typeof u == "string" ? x = d.localeCompare(u) : d > u ? x = 1 : d < u && (x = -1), n === "desc" ? x * -1 : x;
       });
-    }), Ne = p(
-      () => W.value.slice(0, ye.value)
-    ), ye = p(() => l.maxVisibleChipsDisplay !== null ? l.maxVisibleChipsDisplay : Math.max(ce.value, 1)), oe = p(() => {
-      const e = W.value.length - ye.value;
+    }), ze = p(
+      () => Z.value.slice(0, be.value)
+    ), be = p(() => l.maxVisibleChipsDisplay !== null ? l.maxVisibleChipsDisplay : Math.max(ve.value, 1)), re = p(() => {
+      const e = Z.value.length - be.value;
       return e > 0 ? e : 0;
-    }), Be = (e, s) => {
-      const n = s.toLowerCase();
-      return e.map((a) => {
+    }), De = (e, a) => {
+      const n = a.toLowerCase();
+      return e.map((s) => {
         let o = !1;
         if (l.keyFilters && l.keyFilters.length > 0)
           for (const u of l.keyFilters) {
-            const x = X(a, u);
+            const x = _(s, u);
             if (x != null && String(x).toLowerCase().includes(n)) {
               o = !0;
               break;
             }
           }
         else
-          o = E(a).toLowerCase().includes(n);
-        if (!I(a))
-          return o ? a : null;
-        const d = Be(a.children, s);
-        return o ? { ...a, children: a.children } : d.length > 0 ? { ...a, children: d } : null;
+          o = D(s).toLowerCase().includes(n);
+        if (!A(s))
+          return o ? s : null;
+        const d = De(s.children, a);
+        return o ? { ...s, children: s.children } : d.length > 0 ? { ...s, children: d } : null;
       }).filter(Boolean);
-    }, Te = (e, s, n) => !e || !s ? e : [...e].sort((o, d) => {
-      const u = X(o, s), x = X(d, s);
+    }, Ke = (e, a, n) => !e || !a ? e : [...e].sort((o, d) => {
+      const u = _(o, a), x = _(d, a);
       if (u == null) return 1;
       if (x == null) return -1;
-      let T = 0;
-      return typeof u == "string" && typeof x == "string" ? T = u.localeCompare(x) : u > x ? T = 1 : u < x && (T = -1), n === "desc" ? T * -1 : T;
-    }).map((o) => I(o) ? { ...o, children: Te(o.children, s, n) } : o), _ = p(() => {
-      const e = k.value.trim(), s = e ? Be(l.items, e) : l.items;
-      return !l.sortable || !z.value ? s : Te(s, z.value, U.value);
-    }), He = (e) => {
-      if (l.disableBranchNodes && I(e)) {
+      let E = 0;
+      return typeof u == "string" && typeof x == "string" ? E = u.localeCompare(x) : u > x ? E = 1 : u < x && (E = -1), n === "desc" ? E * -1 : E;
+    }).map((o) => A(o) ? { ...o, children: Ke(o.children, a, n) } : o), F = p(() => {
+      const e = w.value.trim(), a = e ? De(l.items, e) : l.items;
+      return !l.sortable || !z.value ? a : Ke(a, z.value, J.value);
+    }), Pe = (e) => {
+      if (l.disableBranchNodes && A(e)) {
         const o = b(e);
-        ze(o);
+        Re(o);
         return;
       }
-      if (fe(e)) return;
-      const s = b(e);
-      let n = new Set(P.value);
+      if (he(e)) return;
+      const a = b(e);
+      let n = new Set(R.value);
       if (l.multiple) {
-        const o = n.has(s);
-        if (l.selectAll && I(e)) {
-          const d = me(e);
-          o ? (n.delete(s), h("deselect", e), l.deselectAll && d.forEach((u) => n.delete(u))) : (n.add(s), d.forEach((u) => n.add(u)), h("select", e));
+        const o = n.has(a);
+        if (l.selectAll && A(e)) {
+          const d = ge(e);
+          o ? (n.delete(a), g("deselect", e), l.deselectAll && d.forEach((u) => n.delete(u))) : (n.add(a), d.forEach((u) => n.add(u)), g("select", e));
         } else
-          o ? (n.delete(s), l.selectAll && ve(s)?.forEach((u) => n.delete(u))) : n.add(s);
+          o ? (n.delete(a), l.selectAll && ye(a)?.forEach((u) => n.delete(u))) : n.add(a);
       } else {
         const o = l.modelValue, d = b(e);
-        o === d ? (n.clear(), h("deselect", e)) : (n.clear(), n.add(d), o != null && D(o), h("select", e)), l.closeOnSelect && F(), R(() => {
+        o === d ? (n.clear(), g("deselect", e)) : (n.clear(), n.add(d), o != null && P(o), g("select", e)), l.closeOnSelect && H(), K(() => {
           V.value?.focus();
         });
       }
-      let a = Array.from(n);
-      l.multiple && l.excludeFromSelectedListKey && (a = a.filter((o) => {
-        const d = D(o);
+      let s = Array.from(n);
+      l.multiple && l.excludeFromSelectedListKey && (s = s.filter((o) => {
+        const d = P(o);
         return !d || !d[l.excludeFromSelectedListKey];
-      })), h("update:modelValue", l.multiple ? a : a[0] || null), h("change", l.multiple ? a : a[0] || null);
-    }, ge = (e) => {
+      })), g("update:modelValue", l.multiple ? s : s[0] || null), g("change", l.multiple ? s : s[0] || null);
+    }, xe = (e) => {
       if (l.disabled || !e) return;
-      const s = b(e), n = new Set(P.value);
-      n.delete(s), l.selectAll && (l.deselectAll && I(e) && me(e).forEach((u) => n.delete(u)), ve(s)?.forEach((d) => n.delete(d)));
-      const a = Array.from(n);
-      h("update:modelValue", a), h("change", a);
-    }, ze = (e) => {
-      K.value.has(e) ? K.value.delete(e) : K.value.add(e);
-    }, We = () => {
-      U.value = U.value === "asc" ? "desc" : "asc";
-    }, je = () => {
+      const a = b(e), n = new Set(R.value);
+      n.delete(a), l.selectAll && (l.deselectAll && A(e) && ge(e).forEach((u) => n.delete(u)), ye(a)?.forEach((d) => n.delete(d)));
+      const s = Array.from(n);
+      g("update:modelValue", s), g("change", s);
+    }, Re = (e) => {
+      N.value.has(e) ? N.value.delete(e) : N.value.add(e);
+    }, Qe = () => {
+      J.value = J.value === "asc" ? "desc" : "asc";
+    }, Xe = () => {
       const e = l.multiple ? [] : null;
-      h("clear"), h("update:modelValue", e), h("change", e), ee();
-    }, Ee = () => {
-      !l.allowAddNew || !k.value.trim() || (h("add-new", k.value.trim()), F());
-    }, Ze = () => {
-      l.allowAddNew && l.addNewMode === "enter" && k.value.trim() && _.value.length === 0 && Ee();
-    }, Ue = (e) => {
-      h("focus", e);
-    }, Ge = async () => {
-      l.disabled || (ee(), N.value = !0, re(), await R(), $.value && V.value && (H.value = Se(V.value, $.value, {
+      g("clear"), g("update:modelValue", e), g("change", e), te();
+    }, Oe = () => {
+      !l.allowAddNew || !w.value.trim() || (g("add-new", w.value.trim()), H());
+    }, Ye = () => {
+      l.allowAddNew && l.addNewMode === "enter" && w.value.trim() && F.value.length === 0 && Oe();
+    }, _e = (e) => {
+      g("focus", e);
+    }, et = async () => {
+      l.disabled || (te(), L.value = !0, de(), await K(), B.value && V.value && (j.value = Ve(V.value, B.value, {
         placement: "bottom-start",
         strategy: "fixed",
         modifiers: [
@@ -563,253 +568,295 @@ const Ce = (t, q) => {
             }
           }
         ]
-      })), l.searchable && (await R(), $.value?.querySelector(".tree-search-input")?.focus()));
-    }, F = () => {
-      N.value = !1, k.value = "", H.value?.destroy(), H.value = null, h("blur", l.modelValue);
-    }, pe = () => N.value ? F() : Ge(), Je = async () => {
-      F(), re(), J.value = !0, await R(), se.value && G.value && (ae.value = Se(G.value, se.value, {
+      })), l.searchable && (await K(), B.value?.querySelector(".tree-search-input")?.focus()));
+    }, H = () => {
+      L.value = !1, w.value = "", j.value?.destroy(), j.value = null, g("blur", l.modelValue);
+    }, we = () => L.value ? H() : et(), tt = async () => {
+      H(), de(), X.value = !0, await K(), se.value && Q.value && (ie.value = Ve(Q.value, se.value, {
         placement: "bottom-end",
         strategy: "fixed",
         modifiers: [{ name: "offset", options: { offset: [0, 4] } }]
       }));
-    }, ee = () => {
-      J.value = !1, ae.value?.destroy(), ae.value = null;
-    }, Ke = () => J.value ? ee() : Je(), De = (e) => {
-      N.value && !V.value?.contains(e.target) && !$.value?.contains(e.target) && F(), J.value && !G.value?.contains(e.target) && !se.value?.contains(e.target) && ee(), L.value && !B.value?.$el?.contains(e.target) && !v.value?.contains(e.target) && re();
-    }, Qe = (e) => {
-      c.value?.contains(e.relatedTarget) || F();
-    }, Xe = async () => {
-      !M.value || L.value || (F(), ee(), L.value = !0, await R(), v.value && B.value && (y.value = Se(B.value.$el, v.value, {
+    }, te = () => {
+      X.value = !1, ie.value?.destroy(), ie.value = null;
+    }, qe = () => X.value ? te() : tt(), Fe = (e) => {
+      L.value && !V.value?.contains(e.target) && !B.value?.contains(e.target) && H(), X.value && !Q.value?.contains(e.target) && !se.value?.contains(e.target) && te(), I.value && !T.value?.$el?.contains(e.target) && !m.value?.contains(e.target) && de();
+    }, lt = (e) => {
+      c.value?.contains(e.relatedTarget) || H();
+    }, nt = async (e) => {
+      if (console.log("keydown", e), !!L.value)
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), at();
+            break;
+          case "ArrowUp":
+            e.preventDefault(), st();
+            break;
+          case "Enter":
+            e.preventDefault(), He();
+            break;
+          case "Tab":
+            He();
+            break;
+        }
+    }, at = async () => {
+      q.value < me.value.length - 1 && (q.value++, await We());
+    }, st = async () => {
+      q.value > 0 && (q.value--, await We());
+    }, He = () => {
+      const e = me.value[q.value];
+      e && Pe(e.item);
+    }, We = async () => {
+      await K(), Me.value?.querySelector(
+        `[data-index="${q.value}"]`
+      )?.scrollIntoView({
+        block: "nearest"
+      });
+    }, it = async () => {
+      !M.value || I.value || (H(), te(), I.value = !0, await K(), m.value && T.value && (y.value = Ve(T.value.$el, m.value, {
         // ⬅️ 5b. USE $el
         placement: "top",
         strategy: "fixed",
         modifiers: [{ name: "offset", options: { offset: [0, 8] } }]
       })));
-    }, Ye = () => {
-      L.value ? re() : Xe();
-    }, re = () => {
-      L.value = !1, y.value?.destroy(), y.value = null;
+    }, ot = () => {
+      I.value ? de() : it();
+    }, de = () => {
+      I.value = !1, y.value?.destroy(), y.value = null;
     };
-    return xe(k, (e) => {
+    return ue(
+      [F, N],
+      () => {
+        me.value = Ne(F.value);
+      },
+      { deep: !0, immediate: !0 }
+    ), ue(w, (e) => {
       if (e.trim()) {
-        const s = (n) => {
-          n.forEach((a) => {
-            I(a) && (K.value.add(b(a)), s(a.children));
+        const a = (n) => {
+          n.forEach((s) => {
+            A(s) && (N.value.add(b(s)), a(s.children));
           });
         };
-        s(_.value);
+        a(F.value);
       }
-    }), xe(he, () => {
-      Ae();
-    }), xe(W, ie), tt(async () => {
-      document.addEventListener("click", De), window.addEventListener("resize", ie), await R(), ie(), Ae();
-    }), lt(() => {
-      document.removeEventListener("click", De), window.removeEventListener("resize", ie), H.value?.destroy(), ae.value?.destroy(), y.value?.destroy();
-    }), (e, s) => (i(), r("div", {
+    }), ue(pe, () => {
+      Te();
+    }), ue(Z, oe), ut(async () => {
+      document.addEventListener("click", Fe), window.addEventListener("resize", oe), await K(), oe(), Te();
+    }), ct(() => {
+      document.removeEventListener("click", Fe), window.removeEventListener("resize", oe), j.value?.destroy(), ie.value?.destroy(), y.value?.destroy();
+    }), (e, a) => (i(), r("div", {
       ref_key: "wrapperRef",
       ref: c,
       class: "tree-select-wrapper",
-      onFocusin: Ue,
-      onFocusout: Qe
+      onFocusin: _e,
+      onFocusout: lt
     }, [
       f("div", {
         ref_key: "triggerRef",
         ref: V,
         role: "button",
         tabindex: "0",
-        class: w(["btn tree-select-trigger w-100 d-flex justify-content-between align-items-center tree-select-main", [
-          Le.value,
+        class: k(["btn tree-select-trigger w-100 d-flex justify-content-between align-items-center tree-select-main", [
+          Ae.value,
           {
             "btn-outline-secondary": !t.isInvalid,
             "border-danger": t.isInvalid,
             disabled: t.disabled || t.isLoading,
             "is-loading": t.isLoading,
-            "has-chips": t.multiple && t.displayMode === "chips" && P.value.length > 0
+            "has-chips": t.multiple && t.displayMode === "chips" && R.value.length > 0
           }
         ]]),
-        onClick: pe,
+        onClick: we,
         onKeydown: [
-          we(C(pe, ["prevent"]), ["enter"]),
-          we(C(pe, ["prevent"]), ["space"])
+          Ce(C(we, ["prevent"]), ["enter"]),
+          Ce(C(we, ["prevent"]), ["space"])
         ]
       }, [
-        f("div", kt, [
-          ue(e.$slots, "display", {
-            selectedItems: W.value,
-            displayText: he.value,
+        f("div", Bt, [
+          fe(e.$slots, "display", {
+            selectedItems: Z.value,
+            displayText: pe.value,
             placeholder: t.placeholder,
             isLoading: t.isLoading,
-            removeItem: ge,
-            getItemLabel: E,
+            removeItem: xe,
+            getItemLabel: D,
             getItemValue: b,
-            visibleChips: Ne.value,
-            hiddenChipsCount: oe.value,
-            toggleMorePopover: Ke,
-            moreTriggerRef: G.value
+            visibleChips: ze.value,
+            hiddenChipsCount: re.value,
+            toggleMorePopover: qe,
+            moreTriggerRef: Q.value
           }, () => [
-            !t.multiple || t.displayMode === "text" ? (i(), r("div", wt, [
+            !t.multiple || t.displayMode === "text" ? (i(), r("div", Nt, [
               f("span", {
                 ref_key: "textDisplaySpanRef",
-                ref: ne,
-                class: w(["text-truncate", { "text-danger": qe.value.length > 0 }]),
-                title: M.value ? Ie.value : ""
-              }, S(t.isLoading ? "Loading data..." : he.value), 11, St),
-              M.value && !t.isLoading ? (i(), O(A, {
+                ref: ae,
+                class: k(["text-truncate", { "text-danger": Je.value.length > 0 }]),
+                title: M.value ? Be.value : ""
+              }, S(t.isLoading ? "Loading data..." : pe.value), 11, Tt),
+              M.value && !t.isLoading ? (i(), O($, {
                 key: 0,
                 ref_key: "tooltipTriggerIconRef",
-                ref: B,
+                ref: T,
                 name: "info-circle",
                 class: "tooltip-trigger-icon ms-2 flex-shrink-0",
-                onClick: C(Ye, ["stop"])
-              }, null, 512)) : m("", !0)
-            ])) : t.multiple && t.displayMode === "chips" ? (i(), r("div", Ct, [
-              P.value.length === 0 ? (i(), r("span", Vt, S(t.placeholder), 1)) : (i(), r("div", {
+                onClick: C(ot, ["stop"])
+              }, null, 512)) : v("", !0)
+            ])) : t.multiple && t.displayMode === "chips" ? (i(), r("div", Et, [
+              R.value.length === 0 ? (i(), r("span", zt, S(t.placeholder), 1)) : (i(), r("div", {
                 key: 1,
                 class: "chips-container",
                 ref_key: "chipsContainerRef",
-                ref: Ve
+                ref: Ie
               }, [
-                f("div", Lt, [
-                  (i(!0), r(j, null, Z(W.value, (n) => (i(), r("span", {
+                f("div", Dt, [
+                  (i(!0), r(U, null, G(Z.value, (n) => (i(), r("span", {
                     key: "measure-" + b(n),
                     class: "badge chip"
                   }, [
-                    f("span", Mt, S(E(n)), 1),
-                    te(A, {
+                    f("span", Kt, S(D(n)), 1),
+                    le($, {
                       name: "times",
                       class: "chip-remove"
                     })
                   ]))), 128))
                 ]),
-                (i(!0), r(j, null, Z(Ne.value, (n) => (i(), r("span", {
+                (i(!0), r(U, null, G(ze.value, (n) => (i(), r("span", {
                   key: b(n),
-                  class: w(["badge chip", n.__missing ? "bg-danger text-white" : "bg-primary text-white"])
+                  class: k(["badge chip", n.__missing ? "bg-danger text-white" : "bg-primary text-white"])
                 }, [
-                  f("span", It, S(E(n)), 1),
-                  te(A, {
+                  f("span", Pt, S(D(n)), 1),
+                  le($, {
                     name: "times",
                     class: "chip-remove",
-                    onClick: C((a) => ge(n), ["stop"])
+                    onClick: C((s) => xe(n), ["stop"])
                   }, null, 8, ["onClick"])
                 ], 2))), 128)),
-                oe.value > 0 ? (i(), r("button", {
+                re.value > 0 ? (i(), r("button", {
                   key: 0,
                   ref_key: "moreTriggerRef",
-                  ref: G,
+                  ref: Q,
                   type: "button",
                   class: "btn btn-sm btn-light more-button",
-                  onClick: C(Ke, ["stop"])
-                }, " +" + S(oe.value), 513)) : m("", !0)
+                  onClick: C(qe, ["stop"])
+                }, " +" + S(re.value), 513)) : v("", !0)
               ], 512))
-            ])) : m("", !0)
+            ])) : v("", !0)
           ], !0)
         ]),
-        f("div", At, [
-          t.isLoading ? (i(), O(A, {
+        f("div", Rt, [
+          t.isLoading ? (i(), O($, {
             key: 0,
             name: "spinner",
             class: "loading-icon"
-          })) : m("", !0),
-          t.showClearButton && P.value.length > 0 && !t.disabled && !t.isLoading ? (i(), O(A, {
+          })) : v("", !0),
+          t.showClearButton && R.value.length > 0 && !t.disabled && !t.isLoading ? (i(), O($, {
             key: 1,
             name: "times",
-            onClick: C(je, ["stop"]),
+            onClick: C(Xe, ["stop"]),
             class: "clear-icon"
-          })) : m("", !0),
-          t.isLoading ? m("", !0) : (i(), O(A, {
+          })) : v("", !0),
+          t.isLoading ? v("", !0) : (i(), O($, {
             key: 2,
             name: "chevron-down",
-            class: w(["transition-transform", { "rotate-180": N.value }])
+            class: k(["transition-transform", { "rotate-180": L.value }])
           }, null, 8, ["class"]))
         ])
-      ], 42, xt),
-      J.value ? (i(), r("div", {
+      ], 42, $t),
+      X.value ? (i(), r("div", {
         key: 0,
         ref_key: "morePopoverRef",
         ref: se,
         class: "card shadow-lg border-0 more-popover",
         style: { "z-index": "1060" }
       }, [
-        f("div", $t, [
-          (i(!0), r(j, null, Z(Oe.value, (n) => (i(), r("div", {
+        f("div", Ot, [
+          (i(!0), r(U, null, G(Ue.value, (n) => (i(), r("div", {
             key: b(n),
             class: "list-group-item d-flex justify-content-between align-items-center py-1 px-2"
           }, [
-            f("small", Nt, S(E(n)), 1),
-            t.disabled ? m("", !0) : (i(), O(A, {
+            f("small", qt, S(D(n)), 1),
+            t.disabled ? v("", !0) : (i(), O($, {
               key: 0,
               name: "times",
               class: "chip-remove flex-shrink-0",
-              onClick: C((a) => ge(n), ["stop"])
+              onClick: C((s) => xe(n), ["stop"])
             }, null, 8, ["onClick"]))
           ]))), 128))
         ])
-      ], 512)) : m("", !0),
-      N.value ? (i(), r("div", {
+      ], 512)) : v("", !0),
+      L.value ? (i(), r("div", {
         key: 1,
         ref_key: "dropdownRef",
-        ref: $,
+        ref: B,
         class: "tree-select-dropdown card shadow-lg border-0",
-        onMousedown: s[2] || (s[2] = C(() => {
+        onMousedown: a[2] || (a[2] = C(() => {
         }, ["prevent"])),
-        onClick: s[3] || (s[3] = C(() => {
+        onKeydown: nt,
+        onClick: a[3] || (a[3] = C(() => {
         }, ["stop"])),
         style: { "z-index": "1050" }
       }, [
-        f("div", Bt, [
-          t.searchable ? ke((i(), r("input", {
+        f("div", Ft, [
+          t.searchable ? Se((i(), r("input", {
             key: 0,
-            "onUpdate:modelValue": s[0] || (s[0] = (n) => k.value = n),
+            "onUpdate:modelValue": a[0] || (a[0] = (n) => w.value = n),
             type: "text",
-            class: w(["form-control tree-search-input", Me.value]),
+            class: k(["form-control tree-search-input", $e.value]),
             placeholder: "Search...",
-            onKeydown: we(C(Ze, ["prevent"]), ["enter"])
-          }, null, 42, Tt)), [
-            [nt, k.value]
-          ]) : m("", !0),
-          t.sortable && t.sortOptions.length > 0 ? (i(), r("div", zt, [
-            ke(f("select", {
-              "onUpdate:modelValue": s[1] || (s[1] = (n) => z.value = n),
-              class: w(["form-select flex-grow-1", Me.value])
+            onKeydown: Ce(C(Ye, ["prevent"]), ["enter"])
+          }, null, 42, Ht)), [
+            [ft, w.value]
+          ]) : v("", !0),
+          t.sortable && t.sortOptions.length > 0 ? (i(), r("div", Wt, [
+            Se(f("select", {
+              "onUpdate:modelValue": a[1] || (a[1] = (n) => z.value = n),
+              class: k(["form-select flex-grow-1", $e.value])
             }, [
-              s[4] || (s[4] = f("option", {
+              a[4] || (a[4] = f("option", {
                 value: null,
                 disabled: ""
               }, "Sort by...", -1)),
-              (i(!0), r(j, null, Z(t.sortOptions, (n) => (i(), r("option", {
+              (i(!0), r(U, null, G(t.sortOptions, (n) => (i(), r("option", {
                 key: n.value,
                 value: n.value
-              }, S(n.label), 9, Et))), 128))
+              }, S(n.label), 9, jt))), 128))
             ], 2), [
-              [st, z.value]
+              [vt, z.value]
             ]),
             f("button", {
               type: "button",
-              class: w(["btn btn-outline-secondary", Le.value]),
+              class: k(["btn btn-outline-secondary", Ae.value]),
               disabled: !z.value,
-              onClick: We
+              onClick: Qe
             }, [
-              te(A, {
-                name: U.value === "asc" ? "asc" : "desc"
+              le($, {
+                name: J.value === "asc" ? "asc" : "desc"
               }, null, 8, ["name"])
-            ], 10, Kt)
-          ])) : m("", !0)
+            ], 10, Zt)
+          ])) : v("", !0)
         ]),
-        t.isLoading ? (i(), r("div", Dt, [
-          te(A, {
+        t.isLoading ? (i(), r("div", Ut, [
+          le($, {
             name: "spinner",
             class: "me-2"
           }),
-          s[5] || (s[5] = f("span", null, "Loading...", -1))
-        ])) : (i(), r("div", Pt, [
-          _.value.length > 0 ? (i(), r("div", Rt, [
-            (i(!0), r(j, null, Z(_.value, (n, a) => (i(), O(bt, {
+          a[5] || (a[5] = f("span", null, "Loading...", -1))
+        ])) : (i(), r("div", {
+          key: 1,
+          ref_key: "dropdownBodyRef",
+          ref: Me,
+          class: "tree-select-body",
+          style: { "max-height": "300px", "overflow-y": "auto" }
+        }, [
+          F.value.length > 0 ? (i(), r("div", Gt, [
+            (i(!0), r(U, null, G(F.value, (n, s) => (i(), O(At, {
               key: b(n),
               item: n,
               level: 0,
               "display-mode": t.displayMode,
-              "selected-items": P.value,
-              "expanded-items": K.value,
+              "selected-items": R.value,
+              "expanded-items": N.value,
               multiple: t.multiple,
               "select-all": t.selectAll,
               "select-mode": t.selectMode,
@@ -817,68 +864,70 @@ const Ce = (t, q) => {
               "option-value": t.optionValue,
               "disabled-key": t.disabledKey,
               "disable-branch-node": t.disableBranchNodes,
-              index: a,
-              "siblings-count": _.value.length,
-              onSelect: He,
-              onToggleExpand: ze
+              index: s,
+              "data-index": s,
+              "highlighted-index": q.value,
+              "siblings-count": F.value.length,
+              onSelect: Pe,
+              onToggleExpand: Re
             }, {
-              default: Re(({ item: o, level: d }) => [
-                ue(e.$slots, "default", {
+              default: Ze(({ item: o, level: d }) => [
+                fe(e.$slots, "default", {
                   item: o,
                   level: d
                 }, () => [
-                  f("div", Ot, [
-                    de(S(E(o)) + " ", 1),
+                  f("div", Jt, [
+                    ce(S(D(o)) + " ", 1),
                     o.icon ? (i(), r("i", {
                       key: 0,
-                      class: w(o.icon)
-                    }, null, 2)) : m("", !0)
+                      class: k(o.icon)
+                    }, null, 2)) : v("", !0)
                   ])
                 ], !0)
               ]),
               _: 2
-            }, 1032, ["item", "display-mode", "selected-items", "expanded-items", "multiple", "select-all", "select-mode", "option-label", "option-value", "disabled-key", "disable-branch-node", "index", "siblings-count"]))), 128))
-          ])) : (i(), r("div", Ft, [
-            t.allowAddNew ? (i(), r("div", qt, [
+            }, 1032, ["item", "display-mode", "selected-items", "expanded-items", "multiple", "select-all", "select-mode", "option-label", "option-value", "disabled-key", "disable-branch-node", "index", "data-index", "highlighted-index", "siblings-count"]))), 128))
+          ])) : (i(), r("div", Qt, [
+            t.allowAddNew ? (i(), r("div", Xt, [
               t.addNewMode === "button" ? (i(), r("button", {
                 key: 0,
                 type: "button",
                 class: "btn btn-success btn-sm w-100",
-                onClick: Ee
+                onClick: Oe
               }, [
-                de(' No items found "Click" to ' + S(t.addNewLabel) + " ", 1),
-                k.value.trim() ? (i(), r("span", Ht, ' : "' + S(k.value) + '" ', 1)) : m("", !0)
-              ])) : t.addNewMode === "enter" ? (i(), r("span", Wt, [
-                de(' No items found "Press Enter" to ' + S(t.addNewLabel) + " ", 1),
-                k.value.trim() ? (i(), r("span", jt, ' : "' + S(k.value) + '" ', 1)) : m("", !0)
-              ])) : m("", !0)
-            ])) : (i(), r("div", Zt, [
-              te(A, {
+                ce(' No items found "Click" to ' + S(t.addNewLabel) + " ", 1),
+                w.value.trim() ? (i(), r("span", Yt, ' : "' + S(w.value) + '" ', 1)) : v("", !0)
+              ])) : t.addNewMode === "enter" ? (i(), r("span", _t, [
+                ce(' No items found "Press Enter" to ' + S(t.addNewLabel) + " ", 1),
+                w.value.trim() ? (i(), r("span", el, ' : "' + S(w.value) + '" ', 1)) : v("", !0)
+              ])) : v("", !0)
+            ])) : (i(), r("div", tl, [
+              le($, {
                 name: "search",
                 class: "me-1"
               }),
-              s[6] || (s[6] = de(" No items found ", -1))
+              a[6] || (a[6] = ce(" No items found ", -1))
             ]))
           ]))
-        ]))
-      ], 544)) : m("", !0),
-      ke(f("div", {
+        ], 512))
+      ], 544)) : v("", !0),
+      Se(f("div", {
         ref_key: "tooltipRef",
-        ref: v,
+        ref: m,
         class: "tree-select-tooltip card shadow-sm py-1 px-2",
         role: "tooltip",
         style: { "z-index": "1070" }
-      }, S(Ie.value), 513), [
-        [at, L.value]
+      }, S(Be.value), 513), [
+        [mt, I.value]
       ])
     ], 544));
   }
-}, Gt = /* @__PURE__ */ Ce(Ut, [["__scopeId", "data-v-880ba6da"]]), Yt = {
+}, nl = /* @__PURE__ */ Le(ll, [["__scopeId", "data-v-f0ac8a94"]]), ol = {
   install(t) {
-    t.component("VSelect", Gt);
+    t.component("VSelect", nl);
   }
 };
 export {
-  Gt as VSelect,
-  Yt as default
+  nl as VSelect,
+  ol as default
 };