@night-owl-elite/vue-select 0.0.0

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/vue-select.css

@@ -0,0 +1 @@
+.list-group-item[data-v-303c37e7]{cursor:pointer;border:0;border-radius:0;padding-top:.5rem;padding-bottom:.5rem}.expander-icon[data-v-303c37e7]{width:1em;transition:transform .2s ease-in-out;color:#6c757d}.expander-placeholder[data-v-303c37e7]{display:inline-block;width:1em}.rotate-90[data-v-303c37e7]{transform:rotate(90deg)}.item-content[data-v-303c37e7]{flex-grow:1}.tree-select-main[data-v-9f38e289]{--bs-form-select-bg-img: none;display:block;width:100%;padding:.25rem .5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm);font-weight:400;line-height:1.5;color:var(--bs-body-color);appearance:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tree-select-display-text[data-v-9f38e289]{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.clear-icon[data-v-9f38e289]{cursor:pointer;opacity:.6;transition:opacity .2s ease}.clear-icon[data-v-9f38e289]:hover{opacity:1}.transition-transform[data-v-9f38e289]{transition:transform .2s ease-in-out}.rotate-180[data-v-9f38e289]{transform:rotate(180deg)}.tree-select-dropdown[data-v-9f38e289]{position:absolute;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.375rem}.tree-select-body[data-v-9f38e289]::-webkit-scrollbar{width:6px}.tree-select-body[data-v-9f38e289]::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.tree-select-body[data-v-9f38e289]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.tree-select-body[data-v-9f38e289]::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.is-loading[data-v-9f38e289]{cursor:wait}.loading-icon[data-v-9f38e289]{opacity:.7}@media (max-width: 576px){.tree-select-dropdown[data-v-9f38e289]{max-width:90vw;left:0!important;right:0!important;margin:0 auto}}

package/dist/vue-select.es.js

@@ -0,0 +1,406 @@
+import { computed as C, resolveComponent as ne, createElementBlock as u, openBlock as d, createElementVNode as S, createCommentVNode as w, normalizeStyle as ie, normalizeClass as T, createBlock as L, unref as I, withModifiers as D, renderSlot as N, Fragment as J, renderList as Q, withCtx as W, ref as A, onMounted as se, onUnmounted as ae, watch as oe, toDisplayString as z, withDirectives as de, vModelText as re, createVNode as U, createTextVNode as G, nextTick as H } from "vue";
+import { createPopper as ce } from "@popperjs/core";
+import { FontAwesomeIcon as V } from "@fortawesome/vue-fontawesome";
+const X = (t, B) => {
+  const l = t.__vccOpts || t;
+  for (const [m, f] of B)
+    l[m] = f;
+  return l;
+}, ue = { class: "tree-select-item-wrapper" }, me = {
+  key: 1,
+  class: "expander-placeholder"
+}, fe = ["checked", ".indeterminate", "disabled"], he = { class: "item-content text-truncate" }, pe = {
+  key: 0,
+  class: "children-wrapper"
+}, ve = {
+  __name: "TreeSelectItem",
+  props: {
+    item: { type: Object, required: !0 },
+    level: { type: Number, required: !0 },
+    selectedItems: { type: Array, required: !0 },
+    expandedItems: { type: Set, required: !0 },
+    multiple: { type: Boolean, required: !0 },
+    selectAll: { type: Boolean, required: !0 },
+    selectMode: { type: String, required: !0 },
+    optionLabel: { type: String, required: !0 },
+    optionValue: { type: String, required: !0 },
+    disabledKey: { type: String, default: null }
+  },
+  emits: ["select", "toggle-expand"],
+  setup(t, { emit: B }) {
+    const l = t, m = (o) => o[l.optionValue] || o.id || o.value, f = (o) => !l.disabledKey || !o ? !1 : o.hasOwnProperty(l.disabledKey) && o[l.disabledKey] !== null, y = C(() => l.item.children && l.item.children.length > 0), p = C(() => l.expandedItems.has(m(l.item))), v = C(() => l.selectedItems.includes(m(l.item))), b = (o) => {
+      let a = [];
+      return o.children && o.children.forEach((x) => {
+        a.push(m(x)), a.push(...b(x));
+      }), a;
+    }, $ = C(() => !l.multiple || !l.selectAll || !y.value || v.value ? !1 : b(l.item).some((a) => l.selectedItems.includes(a)));
+    return (o, a) => {
+      const x = ne("TreeSelectItem", !0);
+      return d(), u("div", ue, [
+        S("div", {
+          class: T(["list-group-item list-group-item-action d-flex align-items-center gap-2", {
+            "bg-primary": v.value,
+            disabled: f(t.item)
+          }]),
+          style: ie({ "padding-left": `${t.level * 1.5 + 1}rem` }),
+          onClick: a[2] || (a[2] = (c) => o.$emit("select", t.item))
+        }, [
+          y.value ? (d(), L(I(V), {
+            key: 0,
+            icon: "chevron-right",
+            class: T(["expander-icon", { "rotate-90": p.value }]),
+            onClick: a[0] || (a[0] = D((c) => o.$emit("toggle-expand", m(t.item)), ["stop"]))
+          }, null, 8, ["class"])) : (d(), u("span", me)),
+          t.multiple && t.selectMode === "checkbox" ? (d(), u("input", {
+            key: 2,
+            type: "checkbox",
+            class: "form-check-input",
+            checked: v.value,
+            ".indeterminate": $.value,
+            disabled: f(t.item),
+            onClick: a[1] || (a[1] = D((c) => o.$emit("select", t.item), ["stop"]))
+          }, null, 40, fe)) : w("", !0),
+          S("div", he, [
+            N(o.$slots, "default", {
+              item: t.item,
+              level: t.level
+            }, void 0, !0)
+          ])
+        ], 6),
+        y.value && p.value ? (d(), u("div", pe, [
+          (d(!0), u(J, null, Q(t.item.children, (c) => (d(), L(x, {
+            key: m(c),
+            item: c,
+            level: t.level + 1,
+            "selected-items": t.selectedItems,
+            "expanded-items": t.expandedItems,
+            multiple: t.multiple,
+            "select-all": t.selectAll,
+            "select-mode": t.selectMode,
+            "option-label": t.optionLabel,
+            "option-value": t.optionValue,
+            "disabled-key": t.disabledKey,
+            onSelect: a[3] || (a[3] = (k) => o.$emit("select", k)),
+            onToggleExpand: a[4] || (a[4] = (k) => o.$emit("toggle-expand", k))
+          }, {
+            default: W(({ item: k, level: E }) => [
+              N(o.$slots, "default", {
+                item: k,
+                level: E
+              }, void 0, !0)
+            ]),
+            _: 2
+          }, 1032, ["item", "level", "selected-items", "expanded-items", "multiple", "select-all", "select-mode", "option-label", "option-value", "disabled-key"]))), 128))
+        ])) : w("", !0)
+      ]);
+    };
+  }
+}, ge = /* @__PURE__ */ X(ve, [["__scopeId", "data-v-303c37e7"]]), ye = { class: "tree-select-wrapper" }, be = ["disabled"], xe = { class: "tree-select-display-text text-truncate me-2 text-start" }, ke = { class: "d-flex align-items-center gap-2" }, Se = {
+  key: 0,
+  class: "p-2 border-bottom"
+}, we = {
+  key: 1,
+  class: "p-4 text-muted text-center"
+}, Ie = {
+  key: 2,
+  class: "tree-select-body",
+  style: { "max-height": "300px", "overflow-y": "auto" }
+}, Ve = {
+  key: 0,
+  class: "list-group list-group-flush"
+}, Le = { class: "d-flex align-items-center gap-2" }, Ce = {
+  key: 1,
+  class: "p-3 text-muted text-center"
+}, $e = {
+  __name: "TreeSelectMain",
+  props: {
+    modelValue: {
+      type: [String, Number, Array],
+      default: null
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    selectMode: {
+      type: String,
+      default: "checkbox",
+      // 'checkbox' or 'highlight'
+      validator: (t) => ["checkbox", "highlight"].includes(t)
+    },
+    placeholder: {
+      type: String,
+      default: "Select item..."
+    },
+    isInvalid: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    searchable: {
+      type: Boolean,
+      default: !0
+    },
+    isLoading: {
+      type: Boolean,
+      default: !1
+    },
+    showClearButton: {
+      type: Boolean,
+      default: !0
+    },
+    selectAll: {
+      type: Boolean,
+      default: !1
+    },
+    optionLabel: {
+      type: String,
+      default: "value"
+    },
+    optionValue: {
+      type: String,
+      default: "code"
+    },
+    disabledKey: {
+      type: String,
+      default: null
+    },
+    excludeFromSelectedListKey: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(t, { emit: B }) {
+    const l = t, m = B, f = A(null), y = A(null), p = A(""), v = A(!1), b = A(/* @__PURE__ */ new Set()), $ = A(null), o = (e) => e[l.optionLabel] || e.label || e.name || "", a = (e) => e[l.optionValue] || e.id || e.value, x = (e) => !l.disabledKey || !e ? !1 : e.hasOwnProperty(l.disabledKey) && e[l.disabledKey] !== null, c = (e) => e.children && e.children.length > 0, k = (e, i = l.items) => {
+      for (const n of i) {
+        if (a(n) === e) return n;
+        if (c(n)) {
+          const s = k(e, n.children);
+          if (s) return s;
+        }
+      }
+      return null;
+    }, E = (e) => {
+      const i = [];
+      return c(e) && e.children.forEach((n) => {
+        x(n) || (i.push(a(n)), i.push(...E(n)));
+      }), i;
+    }, O = (e, i = l.items, n = []) => {
+      for (const s of i) {
+        if (a(s) === e) return n;
+        if (c(s)) {
+          const r = O(e, s.children, [...n, a(s)]);
+          if (r) return r;
+        }
+      }
+      return null;
+    }, K = C(() => {
+      const e = new Set(Array.isArray(l.modelValue) ? l.modelValue : [l.modelValue].filter(Boolean));
+      if (l.multiple && l.selectAll) {
+        const i = (n) => {
+          n.forEach((s) => {
+            if (c(s)) {
+              const r = s.children.filter((g) => !x(g));
+              r.length > 0 && r.every((g) => e.has(a(g))) && e.add(a(s)), i(s.children);
+            }
+          });
+        };
+        i(l.items);
+      }
+      return Array.from(e);
+    }), M = (e, i = l.items, n = []) => {
+      for (const s of i) {
+        const r = [...n, o(s)];
+        if (a(s) === e) return r;
+        if (c(s)) {
+          const h = M(e, s.children, r);
+          if (h) return h;
+        }
+      }
+      return null;
+    }, F = (e) => {
+      if (!e || e.length === 0) return "";
+      const i = e.join(" → ");
+      return i.length <= 40 ? i : e.length > 2 ? `${e[0]} → ... → ${e[e.length - 1]}` : i;
+    }, Y = C(() => {
+      const e = Array.isArray(l.modelValue) ? l.modelValue : [l.modelValue].filter(Boolean);
+      if (e.length === 0) return l.placeholder;
+      if (l.multiple) {
+        if (e.length === 1) {
+          const n = M(e[0]);
+          return n ? F(n) : e[0];
+        }
+        return `${e.length} items selected`;
+      }
+      const i = M(e[0]);
+      return i ? F(i) : e[0];
+    }), R = (e, i) => e.map((n) => {
+      const s = o(n).toLowerCase().includes(i);
+      let r = [];
+      return c(n) && (r = R(n.children, i)), s || r.length > 0 ? { ...n, children: r } : null;
+    }).filter(Boolean), q = C(() => p.value.trim() ? R(l.items, p.value.toLowerCase()) : l.items), Z = (e) => {
+      if (x(e)) return;
+      const i = a(e);
+      let n = new Set(K.value);
+      if (l.multiple) {
+        const r = n.has(i);
+        if (l.selectAll && c(e)) {
+          const h = E(e);
+          r ? (n.delete(i), h.forEach((g) => n.delete(g))) : (n.add(i), h.forEach((g) => n.add(g)));
+        } else
+          r ? (n.delete(i), l.selectAll && O(i)?.forEach((g) => n.delete(g))) : n.add(i);
+      } else
+        n = /* @__PURE__ */ new Set([i]), P();
+      let s = Array.from(n);
+      l.multiple && l.excludeFromSelectedListKey && (s = s.filter((r) => {
+        const h = k(r);
+        return !h || !h[l.excludeFromSelectedListKey];
+      })), m("update:modelValue", l.multiple ? s : s[0] || null), m("change", l.multiple ? s : s[0] || null);
+    }, _ = (e) => {
+      b.value.has(e) ? b.value.delete(e) : b.value.add(e);
+    }, ee = () => {
+      const e = l.multiple ? [] : null;
+      m("update:modelValue", e), m("change", e);
+    }, te = async () => {
+      l.disabled || (v.value = !0, await H(), f.value && y.value && ($.value = ce(y.value, f.value, {
+        placement: "bottom-start",
+        strategy: "fixed",
+        modifiers: [
+          { name: "offset", options: { offset: [0, 4] } },
+          { name: "preventOverflow", options: { padding: 8 } },
+          { name: "flip", options: { fallbackPlacements: ["top-start"] } }
+        ]
+      })), l.searchable && (await H(), f.value?.querySelector(".tree-search-input")?.focus()));
+    }, P = () => {
+      v.value = !1, p.value = "", $.value?.destroy(), $.value = null;
+    }, le = () => v.value ? P() : te(), j = (e) => {
+      !y.value?.contains(e.target) && !f.value?.contains(e.target) && P();
+    };
+    return se(() => document.addEventListener("click", j)), ae(() => {
+      document.removeEventListener("click", j), $.value?.destroy();
+    }), oe(p, (e) => {
+      if (e.trim()) {
+        const i = (n) => {
+          n.forEach((s) => {
+            c(s) && (b.value.add(a(s)), i(s.children));
+          });
+        };
+        i(q.value);
+      }
+    }), (e, i) => (d(), u("div", ye, [
+      S("button", {
+        ref_key: "triggerRef",
+        ref: y,
+        type: "button",
+        class: T(["btn tree-select-trigger w-100 d-flex justify-content-between align-items-center tree-select-main sm", {
+          "btn-outline-secondary": !t.isInvalid,
+          "border-danger": t.isInvalid,
+          disabled: t.disabled || t.isLoading,
+          "is-loading": t.isLoading
+        }]),
+        disabled: t.disabled || t.isLoading,
+        onClick: le
+      }, [
+        S("span", xe, z(Y.value), 1),
+        S("div", ke, [
+          t.isLoading ? (d(), L(I(V), {
+            key: 0,
+            icon: "spinner",
+            spin: "",
+            class: "loading-icon"
+          })) : w("", !0),
+          t.showClearButton && K.value.length > 0 && !t.disabled && !t.isLoading ? (d(), L(I(V), {
+            key: 1,
+            icon: "times",
+            onClick: D(ee, ["stop"]),
+            class: "clear-icon"
+          })) : w("", !0),
+          t.isLoading ? w("", !0) : (d(), L(I(V), {
+            key: 2,
+            icon: "chevron-down",
+            class: T(["transition-transform", { "rotate-180": v.value }])
+          }, null, 8, ["class"]))
+        ])
+      ], 10, be),
+      v.value ? (d(), u("div", {
+        key: 0,
+        ref_key: "dropdownRef",
+        ref: f,
+        class: "tree-select-dropdown card shadow-lg border-0",
+        style: { "z-index": "1050", "min-width": "200px", "max-width": "400px" }
+      }, [
+        t.searchable ? (d(), u("div", Se, [
+          de(S("input", {
+            "onUpdate:modelValue": i[0] || (i[0] = (n) => p.value = n),
+            type: "text",
+            class: "form-control form-control-sm tree-search-input",
+            placeholder: "Search..."
+          }, null, 512), [
+            [re, p.value]
+          ])
+        ])) : w("", !0),
+        t.isLoading ? (d(), u("div", we, [
+          U(I(V), {
+            icon: "spinner",
+            spin: "",
+            class: "me-2"
+          }),
+          i[1] || (i[1] = S("span", null, "Loading...", -1))
+        ])) : (d(), u("div", Ie, [
+          q.value.length > 0 ? (d(), u("div", Ve, [
+            (d(!0), u(J, null, Q(q.value, (n) => (d(), L(ge, {
+              key: a(n),
+              item: n,
+              level: 0,
+              "selected-items": K.value,
+              "expanded-items": b.value,
+              multiple: t.multiple,
+              "select-all": t.selectAll,
+              "select-mode": t.selectMode,
+              "option-label": t.optionLabel,
+              "option-value": t.optionValue,
+              "disabled-key": t.disabledKey,
+              onSelect: Z,
+              onToggleExpand: _
+            }, {
+              default: W(({ item: s, level: r }) => [
+                N(e.$slots, "default", {
+                  item: s,
+                  level: r
+                }, () => [
+                  S("div", Le, [
+                    G(z(o(s)) + " ", 1),
+                    s.icon ? (d(), L(I(V), {
+                      key: 0,
+                      icon: s.icon
+                    }, null, 8, ["icon"])) : w("", !0)
+                  ])
+                ], !0)
+              ]),
+              _: 2
+            }, 1032, ["item", "selected-items", "expanded-items", "multiple", "select-all", "select-mode", "option-label", "option-value", "disabled-key"]))), 128))
+          ])) : (d(), u("div", Ce, [
+            U(I(V), { icon: "search" }),
+            i[2] || (i[2] = G(" No items found ", -1))
+          ]))
+        ]))
+      ], 512)) : w("", !0)
+    ]));
+  }
+}, Ae = /* @__PURE__ */ X($e, [["__scopeId", "data-v-9f38e289"]]), Ke = {
+  install(t) {
+    t.component("TreeSelectMain", Ae);
+  }
+};
+export {
+  Ae as TreeSelectMain,
+  Ke as default
+};

package/dist/vue-select.umd.js

@@ -0,0 +1 @@
+(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@popperjs/core"),require("@fortawesome/vue-fontawesome")):typeof define=="function"&&define.amd?define(["exports","vue","@popperjs/core","@fortawesome/vue-fontawesome"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VueSelect={},u.Vue,u.Popper,u.VueFontAwesome))})(this,function(u,e,P,S){"use strict";const N=(l,w)=>{const n=l.__vccOpts||l;for(const[m,f]of w)n[m]=f;return n},D={class:"tree-select-item-wrapper"},O={key:1,class:"expander-placeholder"},j=["checked",".indeterminate","disabled"],F={class:"item-content text-truncate"},z={key:0,class:"children-wrapper"},R=N({__name:"TreeSelectItem",props:{item:{type:Object,required:!0},level:{type:Number,required:!0},selectedItems:{type:Array,required:!0},expandedItems:{type:Set,required:!0},multiple:{type:Boolean,required:!0},selectAll:{type:Boolean,required:!0},selectMode:{type:String,required:!0},optionLabel:{type:String,required:!0},optionValue:{type:String,required:!0},disabledKey:{type:String,default:null}},emits:["select","toggle-expand"],setup(l,{emit:w}){const n=l,m=r=>r[n.optionValue]||r.id||r.value,f=r=>!n.disabledKey||!r?!1:r.hasOwnProperty(n.disabledKey)&&r[n.disabledKey]!==null,k=e.computed(()=>n.item.children&&n.item.children.length>0),h=e.computed(()=>n.expandedItems.has(m(n.item))),g=e.computed(()=>n.selectedItems.includes(m(n.item))),b=r=>{let s=[];return r.children&&r.children.forEach(B=>{s.push(m(B)),s.push(...b(B))}),s},V=e.computed(()=>!n.multiple||!n.selectAll||!k.value||g.value?!1:b(n.item).some(s=>n.selectedItems.includes(s)));return(r,s)=>{const B=e.resolveComponent("TreeSelectItem",!0);return e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",{class:e.normalizeClass(["list-group-item list-group-item-action d-flex align-items-center gap-2",{"bg-primary":g.value,disabled:f(l.item)}]),style:e.normalizeStyle({"padding-left":`${l.level*1.5+1}rem`}),onClick:s[2]||(s[2]=d=>r.$emit("select",l.item))},[k.value?(e.openBlock(),e.createBlock(e.unref(S.FontAwesomeIcon),{key:0,icon:"chevron-right",class:e.normalizeClass(["expander-icon",{"rotate-90":h.value}]),onClick:s[0]||(s[0]=e.withModifiers(d=>r.$emit("toggle-expand",m(l.item)),["stop"]))},null,8,["class"])):(e.openBlock(),e.createElementBlock("span",O)),l.multiple&&l.selectMode==="checkbox"?(e.openBlock(),e.createElementBlock("input",{key:2,type:"checkbox",class:"form-check-input",checked:g.value,".indeterminate":V.value,disabled:f(l.item),onClick:s[1]||(s[1]=e.withModifiers(d=>r.$emit("select",l.item),["stop"]))},null,40,j)):e.createCommentVNode("",!0),e.createElementVNode("div",F,[e.renderSlot(r.$slots,"default",{item:l.item,level:l.level},void 0,!0)])],6),k.value&&h.value?(e.openBlock(),e.createElementBlock("div",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.item.children,d=>(e.openBlock(),e.createBlock(B,{key:m(d),item:d,level:l.level+1,"selected-items":l.selectedItems,"expanded-items":l.expandedItems,multiple:l.multiple,"select-all":l.selectAll,"select-mode":l.selectMode,"option-label":l.optionLabel,"option-value":l.optionValue,"disabled-key":l.disabledKey,onSelect:s[3]||(s[3]=x=>r.$emit("select",x)),onToggleExpand:s[4]||(s[4]=x=>r.$emit("toggle-expand",x))},{default:e.withCtx(({item:x,level:E})=>[e.renderSlot(r.$slots,"default",{item:x,level:E},void 0,!0)]),_:2},1032,["item","level","selected-items","expanded-items","multiple","select-all","select-mode","option-label","option-value","disabled-key"]))),128))])):e.createCommentVNode("",!0)])}}},[["__scopeId","data-v-303c37e7"]]),U={class:"tree-select-wrapper"},G=["disabled"],H={class:"tree-select-display-text text-truncate me-2 text-start"},J={class:"d-flex align-items-center gap-2"},Q={key:0,class:"p-2 border-bottom"},W={key:1,class:"p-4 text-muted text-center"},X={key:2,class:"tree-select-body",style:{"max-height":"300px","overflow-y":"auto"}},Y={key:0,class:"list-group list-group-flush"},Z={class:"d-flex align-items-center gap-2"},v={key:1,class:"p-3 text-muted text-center"},$=N({__name:"TreeSelectMain",props:{modelValue:{type:[String,Number,Array],default:null},items:{type:Array,default:()=>[]},multiple:{type:Boolean,default:!1},selectMode:{type:String,default:"checkbox",validator:l=>["checkbox","highlight"].includes(l)},placeholder:{type:String,default:"Select item..."},isInvalid:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},searchable:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!1},showClearButton:{type:Boolean,default:!0},selectAll:{type:Boolean,default:!1},optionLabel:{type:String,default:"value"},optionValue:{type:String,default:"code"},disabledKey:{type:String,default:null},excludeFromSelectedListKey:{type:String,default:null}},emits:["update:modelValue","change"],setup(l,{emit:w}){const n=l,m=w,f=e.ref(null),k=e.ref(null),h=e.ref(""),g=e.ref(!1),b=e.ref(new Set),V=e.ref(null),r=t=>t[n.optionLabel]||t.label||t.name||"",s=t=>t[n.optionValue]||t.id||t.value,B=t=>!n.disabledKey||!t?!1:t.hasOwnProperty(n.disabledKey)&&t[n.disabledKey]!==null,d=t=>t.children&&t.children.length>0,x=(t,i=n.items)=>{for(const o of i){if(s(o)===t)return o;if(d(o)){const a=x(t,o.children);if(a)return a}}return null},E=t=>{const i=[];return d(t)&&t.children.forEach(o=>{B(o)||(i.push(s(o)),i.push(...E(o)))}),i},T=(t,i=n.items,o=[])=>{for(const a of i){if(s(a)===t)return o;if(d(a)){const c=T(t,a.children,[...o,s(a)]);if(c)return c}}return null},I=e.computed(()=>{const t=new Set(Array.isArray(n.modelValue)?n.modelValue:[n.modelValue].filter(Boolean));if(n.multiple&&n.selectAll){const i=o=>{o.forEach(a=>{if(d(a)){const c=a.children.filter(y=>!B(y));c.length>0&&c.every(y=>t.has(s(y)))&&t.add(s(a)),i(a.children)}})};i(n.items)}return Array.from(t)}),C=(t,i=n.items,o=[])=>{for(const a of i){const c=[...o,r(a)];if(s(a)===t)return c;if(d(a)){const p=C(t,a.children,c);if(p)return p}}return null},M=t=>{if(!t||t.length===0)return"";const i=t.join(" → ");return i.length<=40?i:t.length>2?`${t[0]} → ... → ${t[t.length-1]}`:i},ee=e.computed(()=>{const t=Array.isArray(n.modelValue)?n.modelValue:[n.modelValue].filter(Boolean);if(t.length===0)return n.placeholder;if(n.multiple){if(t.length===1){const o=C(t[0]);return o?M(o):t[0]}return`${t.length} items selected`}const i=C(t[0]);return i?M(i):t[0]}),q=(t,i)=>t.map(o=>{const a=r(o).toLowerCase().includes(i);let c=[];return d(o)&&(c=q(o.children,i)),a||c.length>0?{...o,children:c}:null}).filter(Boolean),A=e.computed(()=>h.value.trim()?q(n.items,h.value.toLowerCase()):n.items),te=t=>{if(B(t))return;const i=s(t);let o=new Set(I.value);if(n.multiple){const c=o.has(i);if(n.selectAll&&d(t)){const p=E(t);c?(o.delete(i),p.forEach(y=>o.delete(y))):(o.add(i),p.forEach(y=>o.add(y)))}else c?(o.delete(i),n.selectAll&&T(i)?.forEach(y=>o.delete(y))):o.add(i)}else o=new Set([i]),L();let a=Array.from(o);n.multiple&&n.excludeFromSelectedListKey&&(a=a.filter(c=>{const p=x(c);return!p||!p[n.excludeFromSelectedListKey]})),m("update:modelValue",n.multiple?a:a[0]||null),m("change",n.multiple?a:a[0]||null)},le=t=>{b.value.has(t)?b.value.delete(t):b.value.add(t)},ne=()=>{const t=n.multiple?[]:null;m("update:modelValue",t),m("change",t)},oe=async()=>{n.disabled||(g.value=!0,await e.nextTick(),f.value&&k.value&&(V.value=P.createPopper(k.value,f.value,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{fallbackPlacements:["top-start"]}}]})),n.searchable&&(await e.nextTick(),f.value?.querySelector(".tree-search-input")?.focus()))},L=()=>{g.value=!1,h.value="",V.value?.destroy(),V.value=null},ie=()=>g.value?L():oe(),K=t=>{!k.value?.contains(t.target)&&!f.value?.contains(t.target)&&L()};return e.onMounted(()=>document.addEventListener("click",K)),e.onUnmounted(()=>{document.removeEventListener("click",K),V.value?.destroy()}),e.watch(h,t=>{if(t.trim()){const i=o=>{o.forEach(a=>{d(a)&&(b.value.add(s(a)),i(a.children))})};i(A.value)}}),(t,i)=>(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("button",{ref_key:"triggerRef",ref:k,type:"button",class:e.normalizeClass(["btn tree-select-trigger w-100 d-flex justify-content-between align-items-center tree-select-main sm",{"btn-outline-secondary":!l.isInvalid,"border-danger":l.isInvalid,disabled:l.disabled||l.isLoading,"is-loading":l.isLoading}]),disabled:l.disabled||l.isLoading,onClick:ie},[e.createElementVNode("span",H,e.toDisplayString(ee.value),1),e.createElementVNode("div",J,[l.isLoading?(e.openBlock(),e.createBlock(e.unref(S.FontAwesomeIcon),{key:0,icon:"spinner",spin:"",class:"loading-icon"})):e.createCommentVNode("",!0),l.showClearButton&&I.value.length>0&&!l.disabled&&!l.isLoading?(e.openBlock(),e.createBlock(e.unref(S.FontAwesomeIcon),{key:1,icon:"times",onClick:e.withModifiers(ne,["stop"]),class:"clear-icon"})):e.createCommentVNode("",!0),l.isLoading?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(S.FontAwesomeIcon),{key:2,icon:"chevron-down",class:e.normalizeClass(["transition-transform",{"rotate-180":g.value}])},null,8,["class"]))])],10,G),g.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"dropdownRef",ref:f,class:"tree-select-dropdown card shadow-lg border-0",style:{"z-index":"1050","min-width":"200px","max-width":"400px"}},[l.searchable?(e.openBlock(),e.createElementBlock("div",Q,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":i[0]||(i[0]=o=>h.value=o),type:"text",class:"form-control form-control-sm tree-search-input",placeholder:"Search..."},null,512),[[e.vModelText,h.value]])])):e.createCommentVNode("",!0),l.isLoading?(e.openBlock(),e.createElementBlock("div",W,[e.createVNode(e.unref(S.FontAwesomeIcon),{icon:"spinner",spin:"",class:"me-2"}),i[1]||(i[1]=e.createElementVNode("span",null,"Loading...",-1))])):(e.openBlock(),e.createElementBlock("div",X,[A.value.length>0?(e.openBlock(),e.createElementBlock("div",Y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(A.value,o=>(e.openBlock(),e.createBlock(R,{key:s(o),item:o,level:0,"selected-items":I.value,"expanded-items":b.value,multiple:l.multiple,"select-all":l.selectAll,"select-mode":l.selectMode,"option-label":l.optionLabel,"option-value":l.optionValue,"disabled-key":l.disabledKey,onSelect:te,onToggleExpand:le},{default:e.withCtx(({item:a,level:c})=>[e.renderSlot(t.$slots,"default",{item:a,level:c},()=>[e.createElementVNode("div",Z,[e.createTextVNode(e.toDisplayString(r(a))+" ",1),a.icon?(e.openBlock(),e.createBlock(e.unref(S.FontAwesomeIcon),{key:0,icon:a.icon},null,8,["icon"])):e.createCommentVNode("",!0)])],!0)]),_:2},1032,["item","selected-items","expanded-items","multiple","select-all","select-mode","option-label","option-value","disabled-key"]))),128))])):(e.openBlock(),e.createElementBlock("div",v,[e.createVNode(e.unref(S.FontAwesomeIcon),{icon:"search"}),i[2]||(i[2]=e.createTextVNode(" No items found ",-1))]))]))],512)):e.createCommentVNode("",!0)]))}},[["__scopeId","data-v-9f38e289"]]),_={install(l){l.component("TreeSelectMain",$)}};u.TreeSelectMain=$,u.default=_,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@night-owl-elite/vue-select",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "vue": "^3.5.17",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "vite": "^7.0.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0",
+    "bootstrap": "^5.3.0"
+  }
+}