@night-owl-elite/vue-select 1.0.0 → 1.2.0

package/dist/vue-select.es.js

@@ -1,6 +1,6 @@
-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 { computed as C, resolveComponent as ne, createElementBlock as u, openBlock as d, createElementVNode as S, createCommentVNode as w, normalizeStyle as ie, normalizeClass as K, createBlock as L, unref as V, 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";
+import { FontAwesomeIcon as I } from "@fortawesome/vue-fontawesome";
 const X = (t, B) => {
   const l = t.__vccOpts || t;
   for (const [m, f] of B)
@@ -38,17 +38,17 @@ const X = (t, B) => {
       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", {
+          class: K(["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), {
+          y.value ? (d(), L(V(I), {
             key: 0,
             icon: "chevron-right",
-            class: T(["expander-icon", { "rotate-90": p.value }]),
+            class: K(["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", {
@@ -101,11 +101,11 @@ const X = (t, B) => {
 }, we = {
   key: 1,
   class: "p-4 text-muted text-center"
-}, Ie = {
+}, Ve = {
   key: 2,
   class: "tree-select-body",
   style: { "max-height": "300px", "overflow-y": "auto" }
-}, Ve = {
+}, Ie = {
   key: 0,
   class: "list-group list-group-flush"
 }, Le = { class: "d-flex align-items-center gap-2" }, Ce = {
@@ -202,7 +202,7 @@ const X = (t, B) => {
         }
       }
       return null;
-    }, K = C(() => {
+    }, T = C(() => {
       const e = new Set(Array.isArray(l.modelValue) ? l.modelValue : [l.modelValue].filter(Boolean));
       if (l.multiple && l.selectAll) {
         const i = (n) => {
@@ -216,12 +216,12 @@ const X = (t, B) => {
         i(l.items);
       }
       return Array.from(e);
-    }), M = (e, i = l.items, n = []) => {
+    }), q = (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);
+          const h = q(e, s.children, r);
           if (h) return h;
         }
       }
@@ -235,21 +235,21 @@ const X = (t, B) => {
       if (e.length === 0) return l.placeholder;
       if (l.multiple) {
         if (e.length === 1) {
-          const n = M(e[0]);
+          const n = q(e[0]);
           return n ? F(n) : e[0];
         }
         return `${e.length} items selected`;
       }
-      const i = M(e[0]);
+      const i = q(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) => {
+    }).filter(Boolean), M = 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);
+      let n = new Set(T.value);
       if (l.multiple) {
         const r = n.has(i);
         if (l.selectAll && c(e)) {
@@ -293,14 +293,14 @@ const X = (t, B) => {
             c(s) && (b.value.add(a(s)), i(s.children));
           });
         };
-        i(q.value);
+        i(M.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", {
+        class: K(["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,
@@ -311,22 +311,22 @@ const X = (t, B) => {
       }, [
         S("span", xe, z(Y.value), 1),
         S("div", ke, [
-          t.isLoading ? (d(), L(I(V), {
+          t.isLoading ? (d(), L(V(I), {
             key: 0,
             icon: "spinner",
             spin: "",
             class: "loading-icon"
           })) : w("", !0),
-          t.showClearButton && K.value.length > 0 && !t.disabled && !t.isLoading ? (d(), L(I(V), {
+          t.showClearButton && T.value.length > 0 && !t.disabled && !t.isLoading ? (d(), L(V(I), {
             key: 1,
             icon: "times",
             onClick: D(ee, ["stop"]),
             class: "clear-icon"
           })) : w("", !0),
-          t.isLoading ? w("", !0) : (d(), L(I(V), {
+          t.isLoading ? w("", !0) : (d(), L(V(I), {
             key: 2,
             icon: "chevron-down",
-            class: T(["transition-transform", { "rotate-180": v.value }])
+            class: K(["transition-transform", { "rotate-180": v.value }])
           }, null, 8, ["class"]))
         ])
       ], 10, be),
@@ -348,19 +348,19 @@ const X = (t, B) => {
           ])
         ])) : w("", !0),
         t.isLoading ? (d(), u("div", we, [
-          U(I(V), {
+          U(V(I), {
             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, {
+        ])) : (d(), u("div", Ve, [
+          M.value.length > 0 ? (d(), u("div", Ie, [
+            (d(!0), u(J, null, Q(M.value, (n) => (d(), L(ge, {
               key: a(n),
               item: n,
               level: 0,
-              "selected-items": K.value,
+              "selected-items": T.value,
               "expanded-items": b.value,
               multiple: t.multiple,
               "select-all": t.selectAll,
@@ -378,7 +378,7 @@ const X = (t, B) => {
                 }, () => [
                   S("div", Le, [
                     G(z(o(s)) + " ", 1),
-                    s.icon ? (d(), L(I(V), {
+                    s.icon ? (d(), L(V(I), {
                       key: 0,
                       icon: s.icon
                     }, null, 8, ["icon"])) : w("", !0)
@@ -388,19 +388,19 @@ const X = (t, B) => {
               _: 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" }),
+            U(V(I), { icon: "search" }),
             i[2] || (i[2] = G(" No items found ", -1))
           ]))
         ]))
       ], 512)) : w("", !0)
     ]));
   }
-}, Ae = /* @__PURE__ */ X($e, [["__scopeId", "data-v-9f38e289"]]), Ke = {
+}, Ae = /* @__PURE__ */ X($e, [["__scopeId", "data-v-9f38e289"]]), Te = {
   install(t) {
-    t.component("TreeSelectMain", Ae);
+    t.component("VSelect", Ae);
   }
 };
 export {
-  Ae as TreeSelectMain,
-  Ke as default
+  Ae as VSelect,
+  Te as default
 };

package/dist/vue-select.umd.js

@@ -1 +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"}})});
+(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,x){"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},S=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(x.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":S.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]=V=>r.$emit("select",V)),onToggleExpand:s[4]||(s[4]=V=>r.$emit("toggle-expand",V))},{default:e.withCtx(({item:V,level:E})=>[e.renderSlot(r.$slots,"default",{item:V,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),S=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,V=(t,i=n.items)=>{for(const o of i){if(s(o)===t)return o;if(d(o)){const a=V(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=V(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&&(S.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="",S.value?.destroy(),S.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),S.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(x.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(x.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(x.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(x.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(x.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(x.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("VSelect",$)}};u.VSelect=$,u.default=_,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@night-owl-elite/vue-select",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "./dist/vue-select.umd.js",
   "module": "./dist/vue-select.es.js",
@@ -10,6 +10,13 @@
     "build": "vite build",
     "preview": "vite preview"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/vue-select.es.js",
+      "require": "./dist/vue-select.umd.js"
+    },
+    "./style.css": "./dist/vue-select.css"
+  },
   "files": [
     "dist"
   ],