slim-select 2.0.2 → 2.1.0

package/docs/assets/index3.js

@@ -1,4 +1,4 @@
-import{d as _,S as r,_ as g,o as a,c as l,f as n,t as d,i as v,a as e,F as O,j as w,k as V,g as p,h as f}from"./index.js";const y=_({name:"Error",data(){return{errorSingle:null,errMsg:""}},mounted(){this.errorSingle=new r({select:this.$refs.errorSingle,events:{error:t=>{this.errMsg=t.message}}})}}),M={id:"error",class:"content"},A=e("h2",{class:"header"},"error",-1),k=e("p",null,"The error event is fired when an error occurs. The error message is passed as the first argument.",-1),j=e("div",{class:"alert info"}," If you are are having issues with slim select finding the select element. Try delaying new SlimSelect() call as the select dom element might not be available yet. ",-1),F={key:0},T=e("b",null,"Error:",-1),E={class:"row"},B={ref:"notError"},x=e("option",{value:"1"},"Option 1",-1),L=e("option",{value:"2"},"Option 2",-1),N=e("option",{value:"3"},"Option 3",-1),D=[x,L,N],P=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+import{d as _,S as r,_ as g,o as a,c as l,f as s,t as d,i as v,a as e,F as O,j as w,k as V,g as p,h as f}from"./index.js";const y=_({name:"Error",data(){return{errorSingle:null,errMsg:""}},mounted(){this.errorSingle=new r({select:this.$refs.errorSingle,events:{error:t=>{this.errMsg=t.message}}})}}),M={id:"error",class:"content"},A=e("h2",{class:"header"},"error",-1),k=e("p",null,"The error event is fired when an error occurs. The error message is passed as the first argument.",-1),j=e("div",{class:"alert info"}," If you are are having issues with slim select finding the select element. Try delaying new SlimSelect() call as the select dom element might not be available yet. ",-1),F={key:0},T=e("b",null,"Error:",-1),E={class:"row"},B={ref:"notError"},x=e("option",{value:"1"},"Option 1",-1),L=e("option",{value:"2"},"Option 2",-1),N=e("option",{value:"3"},"Option 3",-1),D=[x,L,N],P=e("pre",null,[s("      "),e("code",{class:"language-javascript"},`
         var select = new SlimSelect({
           select: '#selectElement',
           events: {
@@ -7,8 +7,8 @@ import{d as _,S as r,_ as g,o as a,c as l,f as n,t as d,i as v,a as e,F as O,j a
             }
           }
         })
-      `),n(`
-    `)],-1);function R(t,s,c,h,u,o){return a(),l("div",M,[A,k,j,t.errMsg!==""?(a(),l("div",F,[T,n(" "+d(t.errMsg),1)])):v("",!0),e("div",E,[e("select",B,D,512)]),P])}const H=g(y,[["render",R]]),I=_({name:"BeforeAfterChange",data(){return{beforeChangeSingle:[],beforeChangeMultiple:[],afterChangeSingle:[],afterChangeMultiple:[]}},mounted(){new r({select:this.$refs.beforeChangeSingle,events:{beforeChange:(t,s)=>{this.beforeChangeSingle=s}}}),new r({select:this.$refs.beforeChangeMultiple,events:{beforeChange:(t,s)=>(this.beforeChangeMultiple=s,!0)}}),new r({select:this.$refs.afterChangeSingle,events:{afterChange:t=>{this.afterChangeSingle=t}}}),new r({select:this.$refs.afterChangeMultiple,events:{afterChange:t=>{this.afterChangeMultiple=t}}})}}),J={id:"beforeChange",class:"content"},U=e("h2",{class:"header"},"beforeChange",-1),z=e("p",null," beforeOnChange will trigger a callback on an option click and will allow you the ability to halt if the value it produces isnt to your liking. In order to stop the change from happening just return false on the callback. Returning nothing or true will allow it to continue as normal. ",-1),q={key:0},G={ref:"beforeChangeSingle"},K=e("option",{value:"value1"},"Value 1",-1),Q=e("option",{value:"value2"},"Value 2",-1),W=e("option",{value:"value3"},"Value 3",-1),X=[K,Q,W],Y=e("br",null,null,-1),Z={key:1},ee={ref:"beforeChangeMultiple",multiple:""},te=e("option",{value:"value1",selected:""},"Value 1",-1),ne=e("option",{value:"value2"},"Value 2",-1),se=e("option",{value:"value3"},"Value 3",-1),oe=[te,ne,se],ae=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+      `),s(`
+    `)],-1);function R(t,n,c,h,u,o){return a(),l("div",M,[A,k,j,t.errMsg!==""?(a(),l("div",F,[T,s(" "+d(t.errMsg),1)])):v("",!0),e("div",E,[e("select",B,D,512)]),P])}const H=g(y,[["render",R]]),I=_({name:"BeforeAfterChange",data(){return{beforeChangeSingle:[],beforeChangeMultiple:[],afterChangeSingle:[],afterChangeMultiple:[]}},mounted(){new r({select:this.$refs.beforeChangeSingle,settings:{allowDeselect:!0},events:{beforeChange:(t,n)=>(this.beforeChangeSingle=n,!0)}}),new r({select:this.$refs.beforeChangeMultiple,events:{beforeChange:(t,n)=>(this.beforeChangeMultiple=n,!0)}}),new r({select:this.$refs.afterChangeSingle,settings:{allowDeselect:!0},events:{afterChange:t=>{this.afterChangeSingle=t}}}),new r({select:this.$refs.afterChangeMultiple,events:{afterChange:t=>{this.afterChangeMultiple=t}}})}}),J={id:"beforeChange",class:"content"},U=e("h2",{class:"header"},"beforeChange",-1),z=e("p",null," beforeOnChange will trigger a callback on an option click and will allow you the ability to halt if the value it produces isnt to your liking. In order to stop the change from happening just return false on the callback. Returning nothing or true will allow it to continue as normal. ",-1),q=e("div",{class:"alert info"}," Be sure to return true to allow for the change to happen. False or nothing to cancel change. ",-1),G={key:0},K={ref:"beforeChangeSingle"},Q=e("option",{"data-placeholder":"true"},"Select Option",-1),W=e("option",{value:"value1"},"Value 1",-1),X=e("option",{value:"value2"},"Value 2",-1),Y=e("option",{value:"value3"},"Value 3",-1),Z=[Q,W,X,Y],ee=e("br",null,null,-1),te={key:1},ne={ref:"beforeChangeMultiple",multiple:""},se=e("option",{value:"value1",selected:""},"Value 1",-1),oe=e("option",{value:"value2"},"Value 2",-1),ae=e("option",{value:"value3"},"Value 3",-1),le=[se,oe,ae],re=e("pre",null,[s("      "),e("code",{class:"language-javascript"},`
         new SlimSelect({
           select: '#selectElement',
           events: {
@@ -18,8 +18,8 @@ import{d as _,S as r,_ as g,o as a,c as l,f as n,t as d,i as v,a as e,F as O,j a
             }
           }
         })
-      `),n(`
-    `)],-1),le={id:"afterChange",class:"content"},re=e("h2",{class:"header"},"afterChange",-1),ie=e("p",null,"afterChange will trigger a callback after the value of the select dropdown has changed.",-1),ce={key:0},he={ref:"afterChangeSingle"},ue=e("option",{value:"value1"},"Value 1",-1),de=e("option",{value:"value2"},"Value 2",-1),_e=e("option",{value:"value3"},"Value 3",-1),pe=[ue,de,_e],fe=e("br",null,null,-1),ge={key:1},ve={ref:"afterChangeMultiple",multiple:""},me=e("option",{value:"value1",selected:""},"Value 1",-1),$e=e("option",{value:"value2"},"Value 2",-1),be=e("option",{value:"value3"},"Value 3",-1),Se=[me,$e,be],Ce=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+      `),s(`
+    `)],-1),ie={id:"afterChange",class:"content"},ce=e("h2",{class:"header"},"afterChange",-1),he=e("p",null,"afterChange will trigger a callback after the value of the select dropdown has changed.",-1),ue={key:0},de={ref:"afterChangeSingle"},_e=e("option",{"data-placeholder":"true"},"Select Option",-1),pe=e("option",{value:"value1"},"Value 1",-1),fe=e("option",{value:"value2"},"Value 2",-1),ge=e("option",{value:"value3"},"Value 3",-1),ve=[_e,pe,fe,ge],me=e("br",null,null,-1),$e={key:1},Se={ref:"afterChangeMultiple",multiple:""},be=e("option",{value:"value1",selected:""},"Value 1",-1),Ce=e("option",{value:"value2"},"Value 2",-1),we=e("option",{value:"value3"},"Value 3",-1),Oe=[be,Ce,we],Ve=e("pre",null,[s("      "),e("code",{class:"language-javascript"},`
         new SlimSelect({
           select: '#selectElement',
           events: {
@@ -28,8 +28,8 @@ import{d as _,S as r,_ as g,o as a,c as l,f as n,t as d,i as v,a as e,F as O,j a
             }
           }
         })
-      `),n(`
-    `)],-1);function we(t,s,c,h,u,o){return a(),l(O,null,[e("div",J,[U,z,t.beforeChangeSingle?(a(),l("div",q,[e("strong",null,"Before change: "+d(t.beforeChangeSingle),1)])):v("",!0),e("select",G,X,512),Y,t.beforeChangeMultiple?(a(),l("div",Z,[e("strong",null,"Before change: "+d(t.beforeChangeMultiple),1)])):v("",!0),e("select",ee,oe,512),ae]),e("div",le,[re,ie,t.afterChangeSingle?(a(),l("div",ce,[e("strong",null,"After change: "+d(t.afterChangeSingle),1)])):v("",!0),e("select",he,pe,512),fe,t.afterChangeMultiple?(a(),l("div",ge,[e("strong",null,"After change: "+d(t.afterChangeMultiple),1)])):v("",!0),e("select",ve,Se,512),Ce])],64)}const Oe=g(I,[["render",we]]),Ve=_({name:"BeForeAfterOpenClose",data(){return{beforeAfterOpenCloseSingle:null,singleState:"",beforeAfterOpenCloseMultiple:null,multipleState:""}},mounted(){this.beforeAfterOpenCloseSingle=new r({select:this.$refs.beforeAfterOpenCloseSingle,events:{beforeOpen:()=>{this.setState("single","beforeOpen")},afterOpen:()=>{this.setState("single","afterOpen")},beforeClose:()=>{this.setState("single","beforeClose")},afterClose:()=>{this.setState("single","afterClose")}}}),this.beforeAfterOpenCloseMultiple=new r({select:this.$refs.beforeAfterOpenCloseMultiple,events:{beforeOpen:()=>{this.setState("multiple","beforeOpen")},afterOpen:()=>{this.setState("multiple","afterOpen")},beforeClose:()=>{this.setState("multiple","beforeClose")},afterClose:()=>{this.setState("multiple","afterClose")}}})},methods:{setState(t,s){t==="single"?this.singleState=s:this.multipleState=s,setTimeout(()=>{t==="single"?this.singleState="":this.multipleState=""},1e3)}}}),ye={id:"open",class:"content"},Me=e("h2",{class:"header"},"beforeOpen / afterOpen / beforeClose / afterClose",-1),Ae=e("p",null," The beforeOpen, afterOpen, beforeClose, and afterClose events will fire before and after the select is opened and closed. ",-1),ke={class:"row"},je={ref:"beforeAfterOpenCloseSingle"},Fe=e("option",{value:"value1"},"Value 1",-1),Te=e("option",{value:"value2"},"Value 2",-1),Ee=e("option",{value:"value3"},"Value 3",-1),Be=[Fe,Te,Ee],xe={ref:"beforeAfterOpenCloseMultiple",multiple:""},Le=e("option",{value:"value1"},"Value 1",-1),Ne=e("option",{value:"value2"},"Value 2",-1),De=e("option",{value:"value3"},"Value 3",-1),Pe=[Le,Ne,De],Re=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+      `),s(`
+    `)],-1);function ye(t,n,c,h,u,o){return a(),l(O,null,[e("div",J,[U,z,q,t.beforeChangeSingle?(a(),l("div",G,[e("strong",null,"Before change: "+d(t.beforeChangeSingle),1)])):v("",!0),e("select",K,Z,512),ee,t.beforeChangeMultiple?(a(),l("div",te,[e("strong",null,"Before change: "+d(t.beforeChangeMultiple),1)])):v("",!0),e("select",ne,le,512),re]),e("div",ie,[ce,he,t.afterChangeSingle?(a(),l("div",ue,[e("strong",null,"After change: "+d(t.afterChangeSingle),1)])):v("",!0),e("select",de,ve,512),me,t.afterChangeMultiple?(a(),l("div",$e,[e("strong",null,"After change: "+d(t.afterChangeMultiple),1)])):v("",!0),e("select",Se,Oe,512),Ve])],64)}const Me=g(I,[["render",ye]]),Ae=_({name:"BeForeAfterOpenClose",data(){return{beforeAfterOpenCloseSingle:null,singleState:"",beforeAfterOpenCloseMultiple:null,multipleState:""}},mounted(){this.beforeAfterOpenCloseSingle=new r({select:this.$refs.beforeAfterOpenCloseSingle,events:{beforeOpen:()=>{this.setState("single","beforeOpen")},afterOpen:()=>{this.setState("single","afterOpen")},beforeClose:()=>{this.setState("single","beforeClose")},afterClose:()=>{this.setState("single","afterClose")}}}),this.beforeAfterOpenCloseMultiple=new r({select:this.$refs.beforeAfterOpenCloseMultiple,events:{beforeOpen:()=>{this.setState("multiple","beforeOpen")},afterOpen:()=>{this.setState("multiple","afterOpen")},beforeClose:()=>{this.setState("multiple","beforeClose")},afterClose:()=>{this.setState("multiple","afterClose")}}})},methods:{setState(t,n){t==="single"?this.singleState=n:this.multipleState=n,setTimeout(()=>{t==="single"?this.singleState="":this.multipleState=""},1e3)}}}),ke={id:"open",class:"content"},je=e("h2",{class:"header"},"beforeOpen / afterOpen / beforeClose / afterClose",-1),Fe=e("p",null," The beforeOpen, afterOpen, beforeClose, and afterClose events will fire before and after the select is opened and closed. ",-1),Te={class:"row"},Ee={ref:"beforeAfterOpenCloseSingle"},Be=e("option",{value:"value1"},"Value 1",-1),xe=e("option",{value:"value2"},"Value 2",-1),Le=e("option",{value:"value3"},"Value 3",-1),Ne=[Be,xe,Le],De={ref:"beforeAfterOpenCloseMultiple",multiple:""},Pe=e("option",{value:"value1"},"Value 1",-1),Re=e("option",{value:"value2"},"Value 2",-1),He=e("option",{value:"value3"},"Value 3",-1),Ie=[Pe,Re,He],Je=e("pre",null,[s("      "),e("code",{class:"language-javascript"},`
         var select = new SlimSelect({
           select: '#selectElement',
           events: {
@@ -47,8 +47,8 @@ import{d as _,S as r,_ as g,o as a,c as l,f as n,t as d,i as v,a as e,F as O,j a
             },
           },
         })
-      `),n(`
-    `)],-1);function He(t,s,c,h,u,o){return a(),l("div",ye,[Me,Ae,e("div",ke,[e("div",null,[e("div",null,"State: "+d(t.singleState),1),e("select",je,Be,512)]),e("div",null,[e("div",null,"State: "+d(t.multipleState),1),e("select",xe,Pe,512)])]),Re])}const Ie=g(Ve,[["render",He]]),Je={id:"search",class:"content"},Ue=e("h2",{class:"header"},"search",-1),ze=e("p",null,[n(" Slim select allows you to syncronize result values from your promise response."),e("br"),n(" Call callback() method with slimselect data, false or string with specific string. ")],-1),qe={class:"row"},Ge=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+      `),s(`
+    `)],-1);function Ue(t,n,c,h,u,o){return a(),l("div",ke,[je,Fe,e("div",Te,[e("div",null,[e("div",null,"State: "+d(t.singleState),1),e("select",Ee,Ne,512)]),e("div",null,[e("div",null,"State: "+d(t.multipleState),1),e("select",De,Ie,512)])]),Je])}const ze=g(Ae,[["render",Ue]]),qe={id:"search",class:"content"},Ge=e("h2",{class:"header"},"search",-1),Ke=e("p",null,[s(" Slim select allows you to syncronize result values from your promise response."),e("br"),s(" Call callback() method with slimselect data, false or string with specific string. ")],-1),Qe={class:"row"},We=e("pre",null,[s("      "),e("code",{class:"language-javascript"},`
         new SlimSelect({
           select: '#selectElement',
           events: {
@@ -90,8 +90,8 @@ import{d as _,S as r,_ as g,o as a,c as l,f as n,t as d,i as v,a as e,F as O,j a
             }
           }
         })
-      `),n(`
-    `)],-1),Ke=_({__name:"search",setup(t){let s=[],c=w(null),h=w(null);fetch("https://api.gofakeit.com/json",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({type:"array",rowcount:1e3,indent:!1,fields:[{name:"first_name",function:"firstname",params:{}},{name:"last_name",function:"lastname",params:{}}]})}).then(o=>o.json()).then(o=>{s=o}),V(()=>{new r({select:c.value,settings:{placeholderText:"Search First or Last Name",searchingText:"Searching Users...",searchHighlight:!0},events:{search:u}}),new r({select:h.value,settings:{placeholderText:"Search First or Last Name",searchingText:"Searching Users...",searchHighlight:!0},events:{search:u}})});function u(o,b){return new Promise((S,m)=>{if(o.length<2)return m("Search must be at least 2 characters");const $=s.filter(i=>i.first_name.toLowerCase().includes(o.toLowerCase())||i.last_name.toLowerCase().includes(o.toLowerCase()));if($.length===0)return m("No results found");let C=$.map(i=>({text:`${i.first_name} ${i.last_name}`,value:`${i.first_name} ${i.last_name}`}));setTimeout(()=>{S(C)},300)})}return(o,b)=>(a(),l("div",Je,[Ue,ze,e("div",qe,[e("select",{ref_key:"searchSingle",ref:c},null,512),e("select",{ref_key:"searchMultiple",ref:h,multiple:""},null,512)]),Ge]))}}),Qe=_({name:"SearchFilter",mounted(){new r({select:this.$refs.searchFilter,events:{searchFilter:(t,s)=>t.text.substr(0,s.length)===s}})}}),We={id:"searchFilter",class:"content"},Xe=e("h2",{class:"header"},"searchFilter",-1),Ye=e("p",null,"searchFilter event is used to replace the default matching algorithm.",-1),Ze=e("p",null,[n("See Data for the proper object interface of "),e("em",null,"option"),n(".")],-1),et={ref:"searchFilter"},tt=e("option",{value:"apple"},"Apple",-1),nt=e("option",{value:"orange"},"Orange",-1),st=e("option",{value:"pineapple"},"Pineapple",-1),ot=[tt,nt,st],at=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+      `),s(`
+    `)],-1),Xe=_({__name:"search",setup(t){let n=[],c=w(null),h=w(null);fetch("https://api.gofakeit.com/json",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({type:"array",rowcount:1e3,indent:!1,fields:[{name:"first_name",function:"firstname",params:{}},{name:"last_name",function:"lastname",params:{}}]})}).then(o=>o.json()).then(o=>{n=o}),V(()=>{new r({select:c.value,settings:{placeholderText:"Search First or Last Name",searchingText:"Searching Users...",searchHighlight:!0},events:{search:u}}),new r({select:h.value,settings:{placeholderText:"Search First or Last Name",searchingText:"Searching Users...",searchHighlight:!0},events:{search:u}})});function u(o,S){return new Promise((b,m)=>{if(o.length<2)return m("Search must be at least 2 characters");const $=n.filter(i=>i.first_name.toLowerCase().includes(o.toLowerCase())||i.last_name.toLowerCase().includes(o.toLowerCase()));if($.length===0)return m("No results found");let C=$.map(i=>({text:`${i.first_name} ${i.last_name}`,value:`${i.first_name} ${i.last_name}`}));setTimeout(()=>{b(C)},300)})}return(o,S)=>(a(),l("div",qe,[Ge,Ke,e("div",Qe,[e("select",{ref_key:"searchSingle",ref:c},null,512),e("select",{ref_key:"searchMultiple",ref:h,multiple:""},null,512)]),We]))}}),Ye=_({name:"SearchFilter",mounted(){new r({select:this.$refs.searchFilter,events:{searchFilter:(t,n)=>t.text.substr(0,n.length)===n}})}}),Ze={id:"searchFilter",class:"content"},et=e("h2",{class:"header"},"searchFilter",-1),tt=e("p",null,"searchFilter event is used to replace the default matching algorithm.",-1),nt=e("p",null,[s("See Data for the proper object interface of "),e("em",null,"option"),s(".")],-1),st={ref:"searchFilter"},ot=e("option",{value:"apple"},"Apple",-1),at=e("option",{value:"orange"},"Orange",-1),lt=e("option",{value:"pineapple"},"Pineapple",-1),rt=[ot,at,lt],it=e("pre",null,[s("      "),e("code",{class:"language-javascript"},`
         new SlimSelect({
           select: '#selectElement',
           events: {
@@ -101,8 +101,8 @@ import{d as _,S as r,_ as g,o as a,c as l,f as n,t as d,i as v,a as e,F as O,j a
             }
           }
         })
-      `),n(`
-    `)],-1);function lt(t,s,c,h,u,o){return a(),l("div",We,[Xe,Ye,Ze,e("select",et,ot,512),at])}const rt=g(Qe,[["render",lt]]),it=_({name:"Addable",mounted(){new r({select:this.$refs.addableSingle,events:{addable:t=>t}}),new r({select:this.$refs.addableMultiple,events:{addable:t=>({text:t,value:t.toLowerCase()})}})}}),ct={id:"addable",class:"content"},ht=e("h2",{class:"header"},"addable",-1),ut=e("p",null,"Slim select has the ability to dynamically add options via the search input field",-1),dt=e("p",null," addable is a callback which takes a function parameter. The return value can either be a string or an option object. ",-1),_t={class:"row"},pt={ref:"addableSingle"},ft=e("option",{value:"value1"},"Value 1",-1),gt=e("option",{value:"value2"},"Value 2",-1),vt=e("option",{value:"value3"},"Value 3",-1),mt=[ft,gt,vt],$t={ref:"addableMultiple",multiple:""},bt=e("option",{value:"value1"},"Value 1",-1),St=e("option",{value:"value2"},"Value 2",-1),Ct=e("option",{value:"value3"},"Value 3",-1),wt=[bt,St,Ct],Ot=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+      `),s(`
+    `)],-1);function ct(t,n,c,h,u,o){return a(),l("div",Ze,[et,tt,nt,e("select",st,rt,512),it])}const ht=g(Ye,[["render",ct]]),ut=_({name:"Addable",mounted(){new r({select:this.$refs.addableSingle,events:{addable:t=>({text:t,value:t.toLowerCase()})}}),new r({select:this.$refs.addableMultiple,events:{addable:t=>new Promise(n=>{setTimeout(()=>{n({text:t,value:t})},100)})}})}}),dt={id:"addable",class:"content"},_t=e("h2",{class:"header"},"addable",-1),pt=e("p",null,"Slim select has the ability to dynamically add options via the search input field",-1),ft=e("p",null," addable is a callback which takes a function parameter. The return value can either be a string or an option object. ",-1),gt={class:"row"},vt={ref:"addableSingle"},mt=e("option",{value:"value1"},"Value 1",-1),$t=e("option",{value:"value2"},"Value 2",-1),St=e("option",{value:"value3"},"Value 3",-1),bt=[mt,$t,St],Ct={ref:"addableMultiple",multiple:""},wt=e("option",{value:"value1"},"Value 1",-1),Ot=e("option",{value:"value2"},"Value 2",-1),Vt=e("option",{value:"value3"},"Value 3",-1),yt=[wt,Ot,Vt],Mt=e("pre",null,[s("      "),e("code",{class:"language-javascript"},`
         new SlimSelect({
           select: '#selectElement',
 
@@ -114,13 +114,22 @@ import{d as _,S as r,_ as g,o as a,c as l,f as n,t as d,i as v,a as e,F as O,j a
               // Return the value string
               return value // Optional - value alteration // ex: value.toLowerCase()
 
-              // Optional - Return a valid data object. See methods/setData for list of valid options
+              // Optional - Return a valid data object. 
+              // See methods/setData for list of valid options
               return {
                 text: value,
                 value: value.toLowerCase()
               }
+
+              // Optional - Return a promise with either a string or data object
+              return new Promise((resolve) => {
+                resolve({
+                  text: value,
+                  value: value,
+                })
+              })
             }
           }
         })
-      `),n(`
-    `)],-1);function Vt(t,s,c,h,u,o){return a(),l("div",ct,[ht,ut,dt,e("div",_t,[e("select",pt,mt,512),e("select",$t,wt,512)]),Ot])}const yt=g(it,[["render",Vt]]),Mt=_({name:"Events",components:{Error:H,BeforeAfterChange:Oe,BeforeAfterOpenClose:Ie,Search:Ke,SearchFilter:rt,Addable:yt}}),At={id:"events",class:"contents"};function kt(t,s,c,h,u,o){const b=p("Error"),S=p("BeforeAfterChange"),m=p("BeforeAfterOpenClose"),$=p("Search"),C=p("SearchFilter"),i=p("Addable");return a(),l("div",At,[f(b),f(S),f(m),f($),f(C),f(i)])}const Ft=g(Mt,[["render",kt]]);export{Ft as default};
+      `),s(`
+    `)],-1);function At(t,n,c,h,u,o){return a(),l("div",dt,[_t,pt,ft,e("div",gt,[e("select",vt,bt,512),e("select",Ct,yt,512)]),Mt])}const kt=g(ut,[["render",At]]),jt=_({name:"Events",components:{Error:H,BeforeAfterChange:Me,BeforeAfterOpenClose:ze,Search:Xe,SearchFilter:ht,Addable:kt}}),Ft={id:"events",class:"contents"};function Tt(t,n,c,h,u,o){const S=p("Error"),b=p("BeforeAfterChange"),m=p("BeforeAfterOpenClose"),$=p("Search"),C=p("SearchFilter"),i=p("Addable");return a(),l("div",Ft,[f(S),f(b),f(m),f($),f(C),f(i)])}const Bt=g(jt,[["render",Tt]]);export{Bt as default};

package/docs/assets/index5.js

@@ -1,11 +1,147 @@
-import{d as n,S as f,_ as o,o as c,c as i,l as h,g as m,a as e,h as u,w as $,f as p}from"./index.js";const S=n({name:"SlimSelect",props:{settings:{type:Object}},data(){return{slim:null}},mounted(){let t={select:this.$refs.slim};this.settings&&(t.settings=this.settings),this.slim=new f(t)},beforeUnmount(){this.slim&&this.slim.destroy()}}),v={ref:"slim"};function g(t,r,a,l,_,d){return c(),i("select",v,[h(t.$slots,"default")],512)}const V=o(S,[["render",g]]),x=n({name:"Vue",components:{SlimSelect:V}}),w={id:"error",class:"content"},O=e("h2",{class:"header"},"Vue",-1),k={class:"row"},B=e("option",{value:"1"},"Option 1",-1),C=e("option",{value:"2"},"Option 2",-1),E=e("option",{value:"3"},"Option 3",-1),N=e("pre",null,[p("      "),e("code",{class:"language-javascript"},`
-        var select = new SlimSelect({
-          select: '#selectElement',
-          events: {
-            error: function(err) {
-              console.error(err)
+import{d as m,S as O,_,o as c,c as d,l as y,g,a as e,h as s,w as i,f as n,t as r,i as C,F as S,r as f}from"./index.js";const b=m({name:"SlimSelect",props:{data:{type:Array},settings:{type:Object},events:{type:Object}},data(){return{slim:null}},mounted(){let t={select:this.$refs.slim};this.data&&(t.data=this.data),this.settings&&(t.settings=this.settings),this.events&&(t.events=this.events),this.slim=new O(t)},beforeUnmount(){this.slim&&this.slim.destroy()},watch:{data:{handler:function(t){this.slim&&this.slim.setData(t)},deep:!0}},methods:{getSlimSelect(){return this.slim}}}),w={ref:"slim"};function D(t,o,p,u,h,v){return c(),d("select",w,[y(t.$slots,"default")],512)}const $=_(b,[["render",D]]),V=m({name:"Vue",components:{SlimSelect:$},data(){return{settings:{showSearch:!1},data:[{value:"value1",text:"Value 1"},{value:"value2",text:"Value 2"},{value:"value3",text:"Value 3"}],dynamicData:[],afterChangeData:[],events:{afterChange:this.afterChange}}},mounted(){},methods:{changeData(){this.$refs.dataSingle.getSlimSelect().open(),this.$refs.dataMultiple.getSlimSelect().open(),setTimeout(()=>{this.data=[{value:"value4",text:"Value 4"},{value:"value5",text:"Value 5"},{value:"value6",text:"Value 6"}]},500)},afterChange(t){this.afterChangeData=t},randomDynamicData(){fetch("https://api.gofakeit.com/json",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({type:"array",rowcount:20,indent:!1,fields:[{name:"key",function:"password",params:{lower:!0,upper:!0,numeric:!0,special:!1,space:!1,length:10}},{name:"first_name",function:"firstname",params:{}},{name:"last_name",function:"lastname",params:{}},{name:"selected",function:"number",params:{min:1,max:10}}]})}).then(t=>t.json()).then(t=>{this.dynamicData=t.map(o=>({id:o.id,text:`${o.first_name} ${o.last_name}`,value:`${o.first_name} ${o.last_name}`,selected:o.selected>=8}))})}}}),j={id:"vue",class:"content"},x=e("h2",{class:"header"},"Vue",-1),k=e("h3",null,"Install",-1),M=e("p",null,"The vue component is in a sub package under SlimSelect",-1),T=e("pre",null,[n("      "),e("code",{class:"language-bash"},`
+        npm install @slim-select/vue
+      `),n(`
+    `)],-1),N=e("br",null,null,-1),B=e("h3",null,"Simple example",-1),E={class:"row"},F=e("option",{value:"1"},"Option 1",-1),R=e("option",{value:"2"},"Option 2",-1),A=e("option",{value:"3"},"Option 3",-1),I=e("option",{value:"1"},"Option 1",-1),J=e("option",{value:"2"},"Option 2",-1),L=e("option",{value:"3"},"Option 3",-1),P=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+        import { defineComponent } from 'vue'
+        import SlimSelect from '@slim-select/vue'
+
+        export default defineComponent({
+          components: {
+            SlimSelect,
+          },
+        })
+      `),n(`
+    `)],-1),U=e("pre",null,[n("      "),e("code",{class:"language-html"},`
+        <SlimSelect>
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+          <option value="3">Option 3</option>
+        </SlimSelect>
+
+        <SlimSelect multiple>
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+          <option value="3">Option 3</option>
+        </SlimSelect>
+      `),n(`
+    `)],-1),Y=e("br",null,null,-1),q=e("div",{class:"separator"},null,-1),z=e("br",null,null,-1),G=e("h3",null,"Settings",-1),H=e("p",null," Settings just like its passed as an object in normal SlimSelct will also be passed as an object to the component prop ",-1),K={class:"row"},Q=e("option",{value:"1"},"Option 1",-1),W=e("option",{value:"2"},"Option 2",-1),X=e("option",{value:"3"},"Option 3",-1),Z=e("option",{value:"1"},"Option 1",-1),ee=e("option",{value:"2"},"Option 2",-1),te=e("option",{value:"3"},"Option 3",-1),ne=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+        import { defineComponent } from 'vue'
+        import SlimSelect from '@slim-select/vue'
+
+        export default defineComponent({
+          components: {
+            SlimSelect,
+          },
+          data() {
+            return {
+              settings: {
+                showSearch: false,
+              }
+            }
+          },
+        })
+      `),n(`
+    `)],-1),oe=e("pre",null,[n("      "),e("code",{class:"language-html"},`
+        <SlimSelect :settings="settings">
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+          <option value="3">Option 3</option>
+        </SlimSelect>
+
+        <SlimSelect :settings="settings" multiple>
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+          <option value="3">Option 3</option>
+        </SlimSelect>
+      `),n(`
+    `)],-1),le=e("br",null,null,-1),ae=e("div",{class:"separator"},null,-1),se=e("br",null,null,-1),ie=e("h3",null,"Data",-1),ce=e("p",null," Data just like its passed as an array in normal SlimSelct will also be passed as an array to the component prop. ",-1),de=e("div",{class:"alert info"}," You may pass data as a prop if you would like. But you can also have reactive options that when options change the select will update as well. See Reactivity below for more info. ",-1),pe={class:"row"},ue=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+        import { defineComponent } from 'vue'
+        import SlimSelect from '@slim-select/vue'
+
+        export default defineComponent({
+          components: {
+            SlimSelect,
+          },
+          data() {
+            return {
+              data: [
+                { value: 'value1', text: 'Value 1' },
+                { value: 'value2', text: 'Value 2' },
+                { value: 'value3', text: 'Value 3' },
+              ],
+            }
+          },
+        })
+      `),n(`
+    `)],-1),re=e("pre",null,[n("      "),e("code",{class:"language-html"},`
+        <SlimSelect :data="data" />
+
+        <SlimSelect :data="data" multiple />
+      `),n(`
+    `)],-1),me=e("br",null,null,-1),_e=e("div",{class:"separator"},null,-1),he=e("br",null,null,-1),ve=e("h3",null,"Events",-1),Se=e("p",null," Events just like its passed as an object in normal SlimSelct will also be passed as an object to the component prop. ",-1),fe={key:0},ge=e("strong",null,"afterChange:",-1),Oe={class:"row"},ye=e("option",{value:"1"},"Option 1",-1),Ce=e("option",{value:"2"},"Option 2",-1),be=e("option",{value:"3"},"Option 3",-1),we=e("option",{value:"1"},"Option 1",-1),De=e("option",{value:"2"},"Option 2",-1),$e=e("option",{value:"3"},"Option 3",-1),Ve=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+        import { defineComponent } from 'vue'
+        import SlimSelect from '@slim-select/vue'
+
+        export default defineComponent({
+          components: {
+            SlimSelect,
+          },
+          data() {
+            return {
+              data: [],
+            }
+          },
+          methods: {
+            afterChange(newVal) {
+              console.log(newVal)
+            },
+          },
+        })
+      `),n(`
+    `)],-1),je=e("pre",null,[n("      "),e("code",{class:"language-html"},`
+        <SlimSelect :events="events">
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+          <option value="3">Option 3</option>
+        </SlimSelect>
+
+        <SlimSelect :events="events" multiple>
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+          <option value="3">Option 3</option>
+        </SlimSelect>
+      `),n(`
+    `)],-1),xe=e("br",null,null,-1),ke=e("div",{class:"separator"},null,-1),Me=e("br",null,null,-1),Te=e("h3",null,"Reactivity",-1),Ne=e("p",null," Slim select will look out for any options changes that happen to the select options and SlimSelect will update accordingly. This is done via mutation observers. ",-1),Be={class:"row"},Ee=["value","selected"],Fe=["value","selected"],Re=e("pre",null,[n("      "),e("code",{class:"language-javascript"},`
+        import { defineComponent } from 'vue'
+        import SlimSelect from '@slim-select/vue'
+
+        export default defineComponent({
+          components: {
+            SlimSelect,
+          },
+          data() {
+            return {
+              dynamicData: []
             }
-          }
+          },
+          methods: {
+            changeData() {
+              this.dynamicData = [
+                { id: 1, value: 1, text: 'Option 1', selected: true },
+                { id: 2, value: 2, text: 'Option 2', selected: false },
+                { id: 3, value: 3, text: 'Option 3', selected: false },
+              ]
+            },
+          },
         })
-      `),p(`
-    `)],-1);function b(t,r,a,l,_,d){const s=m("SlimSelect");return c(),i("div",w,[O,e("div",k,[u(s,null,{default:$(()=>[B,C,E]),_:1})]),N])}const j=o(x,[["render",b]]),y=n({name:"Events",components:{Vue:j}}),T={id:"frameworks",class:"contents"};function U(t,r,a,l,_,d){const s=m("Vue");return c(),i("div",T,[u(s)])}const z=o(y,[["render",U]]);export{z as default};
+      `),n(`
+    `)],-1),Ae=e("pre",null,[n("      "),e("code",{class:"language-html"},`
+        <SlimSelect :events="events">
+          <option v-for="d in dynamicData" :key="d.id" :value="d.value" :selected="d.selected">{{ d.text }}</option>
+        </SlimSelect>
+
+        <SlimSelect :events="events" multiple>
+          <option v-for="d in dynamicData" :value="d.value" :selected="d.selected">{{ d.text }}</option>
+        </SlimSelect>
+      `),n(`
+    `)],-1);function Ie(t,o,p,u,h,v){const l=g("SlimSelect");return c(),d("div",j,[x,k,M,T,N,B,e("div",E,[s(l,null,{default:i(()=>[F,R,A]),_:1}),s(l,{multiple:""},{default:i(()=>[I,J,L]),_:1})]),P,U,Y,q,z,G,H,e("div",K,[s(l,{settings:t.settings},{default:i(()=>[Q,W,X]),_:1},8,["settings"]),s(l,{settings:t.settings,multiple:""},{default:i(()=>[Z,ee,te]),_:1},8,["settings"])]),ne,oe,le,ae,se,ie,ce,de,e("div",pe,[e("div",{class:"btn info",onClick:o[0]||(o[0]=(...a)=>t.changeData&&t.changeData(...a))},"Change data"),s(l,{ref:"dataSingle",data:t.data},null,8,["data"]),s(l,{ref:"dataMultiple",data:t.data,multiple:""},null,8,["data"])]),ue,re,me,_e,he,ve,Se,t.afterChangeData.length?(c(),d("div",fe,[ge,n(" "+r(t.afterChangeData),1)])):C("",!0),e("div",Oe,[s(l,{events:t.events},{default:i(()=>[ye,Ce,be]),_:1},8,["events"]),s(l,{events:t.events,multiple:""},{default:i(()=>[we,De,$e]),_:1},8,["events"])]),Ve,je,xe,ke,Me,Te,Ne,e("div",Be,[e("div",{class:"btn info",onClick:o[1]||(o[1]=(...a)=>t.randomDynamicData&&t.randomDynamicData(...a))},"Change data"),s(l,{ref:"randomDynamic"},{default:i(()=>[(c(!0),d(S,null,f(t.dynamicData,a=>(c(),d("option",{key:a.id,value:a.value,selected:a.selected},r(a.text),9,Ee))),128))]),_:1},512),s(l,{multiple:""},{default:i(()=>[(c(!0),d(S,null,f(t.dynamicData,a=>(c(),d("option",{value:a.value,selected:a.selected},r(a.text),9,Fe))),256))]),_:1})]),Re,Ae])}const Je=_(V,[["render",Ie]]),Le=m({name:"Events",components:{Vue:Je}}),Pe={id:"frameworks",class:"contents"};function Ue(t,o,p,u,h,v){const l=g("Vue");return c(),d("div",Pe,[s(l)])}const qe=_(Le,[["render",Ue]]);export{qe as default};

package/docs/assets/install.js

@@ -1,6 +1,6 @@
-import{e as M,d as $,_ as I,o as O,c as V,a as o,f as B,t as E,b as L}from"./index.js";var R={exports:{}};(function(d,w){(function(y,v){d.exports=v()})(M,function(){return function y(v,j,k){var n=window,m="application/octet-stream",r=k||m,e=v,c=!j&&!k&&e,t=document.createElement("a"),_=function(s){return String(s)},i=n.Blob||n.MozBlob||n.WebKitBlob||_,p=j||"download",l,S;if(i=i.call?i.bind(n):Blob,String(this)==="true"&&(e=[e,r],r=e[0],e=e[1]),c&&c.length<2048&&(p=c.split("/").pop().split("?")[0],t.href=c,t.href.indexOf(c)!==-1)){var u=new XMLHttpRequest;return u.open("GET",c,!0),u.responseType="blob",u.onload=function(s){y(s.target.response,p,m)},setTimeout(function(){u.send()},0),u}if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(e))if(e.length>1024*1024*1.999&&i!==_)e=x(e),r=e.type||m;else return navigator.msSaveBlob?navigator.msSaveBlob(x(e),p):f(e);else if(/([\x80-\xff])/.test(e)){var b=0,C=new Uint8Array(e.length),N=C.length;for(b;b<N;++b)C[b]=e.charCodeAt(b);e=new i([C],{type:r})}l=e instanceof i?e:new i([e],{type:r});function x(s){var a=s.split(/[:;,]/),h=a[1],A=a[2]=="base64"?atob:decodeURIComponent,D=A(a.pop()),U=D.length,g=0,T=new Uint8Array(U);for(g;g<U;++g)T[g]=D.charCodeAt(g);return new i([T],{type:h})}function f(s,a){if("download"in t)return t.href=s,t.setAttribute("download",p),t.className="download-js-link",t.innerHTML="downloading...",t.style.display="none",document.body.appendChild(t),setTimeout(function(){t.click(),document.body.removeChild(t),a===!0&&setTimeout(function(){n.URL.revokeObjectURL(t.href)},250)},66),!0;if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent))return/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,m)),window.open(s)||confirm(`Displaying New Document
+import{e as M,d as $,_ as I,o as O,c as V,a as o,f as B,t as E,b as L}from"./index.js";var R={exports:{}};(function(d,w){(function(y,v){d.exports=v()})(M,function(){return function y(v,j,k){var n=window,p="application/octet-stream",r=k||p,e=v,c=!j&&!k&&e,t=document.createElement("a"),_=function(s){return String(s)},i=n.Blob||n.MozBlob||n.WebKitBlob||_,m=j||"download",l,S;if(i=i.call?i.bind(n):Blob,String(this)==="true"&&(e=[e,r],r=e[0],e=e[1]),c&&c.length<2048&&(m=c.split("/").pop().split("?")[0],t.href=c,t.href.indexOf(c)!==-1)){var u=new XMLHttpRequest;return u.open("GET",c,!0),u.responseType="blob",u.onload=function(s){y(s.target.response,m,p)},setTimeout(function(){u.send()},0),u}if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(e))if(e.length>1024*1024*1.999&&i!==_)e=x(e),r=e.type||p;else return navigator.msSaveBlob?navigator.msSaveBlob(x(e),m):f(e);else if(/([\x80-\xff])/.test(e)){var b=0,C=new Uint8Array(e.length),N=C.length;for(b;b<N;++b)C[b]=e.charCodeAt(b);e=new i([C],{type:r})}l=e instanceof i?e:new i([e],{type:r});function x(s){var a=s.split(/[:;,]/),h=a[1],A=a[2]=="base64"?atob:decodeURIComponent,D=A(a.pop()),U=D.length,g=0,T=new Uint8Array(U);for(g;g<U;++g)T[g]=D.charCodeAt(g);return new i([T],{type:h})}function f(s,a){if("download"in t)return t.href=s,t.setAttribute("download",m),t.className="download-js-link",t.innerHTML="downloading...",t.style.display="none",document.body.appendChild(t),setTimeout(function(){t.click(),document.body.removeChild(t),a===!0&&setTimeout(function(){n.URL.revokeObjectURL(t.href)},250)},66),!0;if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent))return/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,p)),window.open(s)||confirm(`Displaying New Document
 
-Use Save As... to download, then click back to return to this page.`)&&(location.href=s),!0;var h=document.createElement("iframe");document.body.appendChild(h),!a&&/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,m)),h.src=s,setTimeout(function(){document.body.removeChild(h)},333)}if(navigator.msSaveBlob)return navigator.msSaveBlob(l,p);if(n.URL)f(n.URL.createObjectURL(l),!0);else{if(typeof l=="string"||l.constructor===_)try{return f("data:"+r+";base64,"+n.btoa(l))}catch{return f("data:"+r+","+encodeURIComponent(l))}S=new FileReader,S.onload=function(s){f(this.result)},S.readAsDataURL(l)}return!0}})})(R);const H=R.exports,G="slim-select",J="Slim advanced select dropdown",q="2.0.1",z="Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",F="https://slimselectjs.com",K="MIT",W={url:"https://github.com/brianvoe/slim-select/issues"},X="dist/slimselect.cjs.js",P="dist/slimselect.umd.js",Q="dist/slimselect.es.js",Y="dist/slimselect.umd.min.js",Z="dist/index.d.ts",ee="dist/index.d.ts",se="dist/slimselect.css",te="src/slim-select/slimselect.scss",ne={type:"git",url:"git+https://github.com/brianvoe/slim-select.git"},oe=["select","vanilla","dropdown","search","multiselect"],ie={dev:"vite --port=1111",format:'prettier --write --cache --parser typescript "src/**/*.ts"',build:"npm run build:clean && npm run build:docs && npm run build:library","build:clean":"rimraf ./dist/*","build:docs":"vite build","build:library":"npm run build:library:js && npm run build:library:css","build:library:js":"cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../","build:library:css":"cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../",test:"jest"},le={"@jest/globals":"^29.3.1","@rollup/plugin-babel":"^6.0.2","@rollup/plugin-commonjs":"^23.0.2","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.1.0","@rollup/plugin-typescript":"^9.0.2","@types/downloadjs":"^1.4.3","@vitejs/plugin-vue":"^3.2.0",clipboard:"^2.0.11",downloadjs:"^1.4.7",jest:"^29.3.1","jest-environment-jsdom":"^29.3.1",prettier:"^2.7.1",prismjs:"^1.29.0",rimraf:"^3.0.2",rollup:"^2.79.1",sass:"^1.56.1","ts-jest":"^29.0.3",tslib:"^2.4.1",typescript:"^4.9.3",vite:"^3.2.4",vue:"^3.2.45","vue-router":"^4.1.6","vue-tsc":"^1.0.9",vuex:"^4.0.2"},re={name:G,description:J,version:q,author:z,homepage:F,license:K,bugs:W,main:X,browser:P,module:Q,unpkg:Y,types:Z,typings:ee,style:se,sass:te,repository:ne,keywords:oe,scripts:ie,devDependencies:le},ce=$({name:"Install",data:()=>({version:re.version}),methods:{downloadLink(){H(`https://cdnjs.cloudflare.com/ajax/libs/slim-select/${this.version}/slimselect.min.js`)}}}),ae={id:"install",class:"contents"},de=L(`<div id="npm" class="content"><h2>Npm</h2><p>Most common usage is npm</p><pre class="install-code">        <code class="language-bash">
+Use Save As... to download, then click back to return to this page.`)&&(location.href=s),!0;var h=document.createElement("iframe");document.body.appendChild(h),!a&&/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,p)),h.src=s,setTimeout(function(){document.body.removeChild(h)},333)}if(navigator.msSaveBlob)return navigator.msSaveBlob(l,m);if(n.URL)f(n.URL.createObjectURL(l),!0);else{if(typeof l=="string"||l.constructor===_)try{return f("data:"+r+";base64,"+n.btoa(l))}catch{return f("data:"+r+","+encodeURIComponent(l))}S=new FileReader,S.onload=function(s){f(this.result)},S.readAsDataURL(l)}return!0}})})(R);const H=R.exports,G="slim-select",J="Slim advanced select dropdown",q="2.1.0",z="Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",F="https://slimselectjs.com",K="MIT",W={url:"https://github.com/brianvoe/slim-select/issues"},X="dist/slimselect.ssr.js",P="dist/slimselect.umd.js",Q="dist/slimselect.es.js",Y="dist/slimselect.umd.min.js",Z="dist/index.d.ts",ee="dist/index.d.ts",se="dist/slimselect.css",te="src/slim-select/slimselect.scss",ne=["src/vue"],oe={type:"git",url:"git+https://github.com/brianvoe/slim-select.git"},ie=["select","vanilla","dropdown","search","multiselect"],le={dev:"vite --port=1111",format:'prettier --write --cache --parser typescript "src/**/*.ts"',build:"npm run build:clean && npm run build:docs && npm run build:library && npm run build:frameworks","build:clean":"rimraf ./dist/*","build:docs":"vite build","build:library":"npm run build:library:js && npm run build:library:css","build:library:js":"cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../","build:library:css":"cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../","build:frameworks":"npm run build --workspaces",test:"jest"},re={"@jest/globals":"^29.3.1","@rollup/plugin-babel":"^6.0.2","@rollup/plugin-commonjs":"^23.0.2","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.1.0","@rollup/plugin-typescript":"^9.0.2","@slim-select/vue":"workspace:src/vue","@types/downloadjs":"^1.4.3","@vitejs/plugin-vue":"^3.2.0",clipboard:"^2.0.11",downloadjs:"^1.4.7",jest:"^29.3.1","jest-environment-jsdom":"^29.3.1",prettier:"^2.7.1",prismjs:"^1.29.0",rimraf:"^3.0.2",rollup:"^2.79.1","rollup-plugin-typescript2":"^0.34.1","rollup-plugin-vue":"^6.0.0",sass:"^1.56.1","ts-jest":"^29.0.3",tslib:"^2.4.1",typescript:"^4.9.3",vite:"^3.2.4",vue:"^3.2.45","vue-router":"^4.1.6","vue-tsc":"^1.0.9",vuex:"^4.0.2"},ce={name:G,description:J,version:q,author:z,homepage:F,license:K,bugs:W,main:X,browser:P,module:Q,unpkg:Y,types:Z,typings:ee,style:se,sass:te,workspaces:ne,repository:oe,keywords:ie,scripts:le,devDependencies:re},ae=$({name:"Install",data:()=>({version:ce.version}),methods:{downloadLink(){H(`https://cdnjs.cloudflare.com/ajax/libs/slim-select/${this.version}/slimselect.min.js`)}}}),de={id:"install",class:"contents"},pe=L(`<div id="npm" class="content"><h2>Npm</h2><p>Most common usage is npm</p><pre class="install-code">        <code class="language-bash">
           npm install slim-select
         </code>
       </pre><pre class="example-code">        <code class="language-javascript">
@@ -10,7 +10,7 @@ Use Save As... to download, then click back to return to this page.`)&&(location
             select: &#39;#selectElement&#39;
           })
         </code>
-      </pre></div>`,1),me={id:"cdn",class:"content"},pe=L('<h2>Cdn</h2><p> Cdn has a url link you can grab. Cdn exists on both <a target="_blank" href="https://cdnjs.com">cdnjs.com</a> and <a target="_blank" href="https://unpkg.com">unpkg.com</a></p><p> See full list of available options.<br><strong>cdnjs</strong> - <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a><br><strong>unpkg</strong> - <a target="_blank" href="https://unpkg.com/browse/slim-select/dist/">https://unpkg.com/browse/slim-select/dist/</a></p><ul><li>slimselct.js - UMD unminified</li><li>slimselct.min.js - UMD minified</li><li>slimselect.cjs.js - CommonJS (for Node) and ES module (for bundlers) build</li><li>slimselect.umd.js - UMD build for browsers</li><li>slimselect.es.js - ES module build for modern browsers</li><li>slimselect.global.js - IIFE build for modern browsers</li></ul><div class="alert info">New releases may be delayed until the next time its indexed</div>',5),ue={class:"install-code"},be={class:"language-html"},fe={id:"download",class:"content"},he=o("h2",null,"Download",-1),ge=o("p",null,"Download the latest minified umd version of slim select",-1),ve=o("p",null,[B(" See full list of available downloadable options. "),o("a",{target:"_blank",href:"https://cdnjs.com/libraries/slim-select"},"cdnjs.com/libraries/slim-select")],-1);function we(d,w,y,v,j,k){return O(),V("div",ae,[de,o("div",me,[pe,o("pre",ue,[B("        "),o("code",be,`
+      </pre></div>`,1),me={id:"cdn",class:"content"},ue=L('<h2>Cdn</h2><p> Cdn has a url link you can grab. Cdn exists on both <a target="_blank" href="https://cdnjs.com">cdnjs.com</a> and <a target="_blank" href="https://unpkg.com">unpkg.com</a></p><p> See full list of available options.<br><strong>cdnjs</strong> - <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a><br><strong>unpkg</strong> - <a target="_blank" href="https://unpkg.com/browse/slim-select/dist/">https://unpkg.com/browse/slim-select/dist/</a></p><ul><li>slimselct.js - UMD unminified</li><li>slimselct.min.js - UMD minified</li><li>slimselect.cjs.js - CommonJS (for Node) and ES module (for bundlers) build</li><li>slimselect.umd.js - UMD build for browsers</li><li>slimselect.es.js - ES module build for modern browsers</li><li>slimselect.global.js - IIFE build for modern browsers</li></ul><div class="alert info">New releases may be delayed until the next time its indexed</div>',5),be={class:"install-code"},fe={class:"language-html"},he={id:"download",class:"content"},ge=o("h2",null,"Download",-1),ve=o("p",null,"Download the latest minified umd version of slim select",-1),we=o("p",null,[B(" See full list of available downloadable options. "),o("a",{target:"_blank",href:"https://cdnjs.com/libraries/slim-select"},"cdnjs.com/libraries/slim-select")],-1);function ye(d,w,y,v,j,k){return O(),V("div",de,[pe,o("div",me,[ue,o("pre",be,[B("        "),o("code",fe,`
           <html>
             <head>
               <script src="unpkg.com/slim-select@`+E(d.version)+`/dist/slimselect.min.js"><\/script>
@@ -31,4 +31,4 @@ Use Save As... to download, then click back to return to this page.`)&&(location
             </body>
           </html>
         `,1),B(`
-      `)])]),o("div",fe,[he,ge,ve,o("div",{class:"btn",onClick:w[0]||(w[0]=n=>d.downloadLink())},"Click Here To Download")])])}const je=I(ce,[["render",we]]);export{je as default};
+      `)])]),o("div",he,[ge,ve,we,o("div",{class:"btn",onClick:w[0]||(w[0]=n=>d.downloadLink())},"Click Here To Download")])])}const ke=I(ae,[["render",ye]]);export{ke as default};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/brianvoe/slim-select/issues"
   },
-  "main": "dist/slimselect.cjs.js",
+  "main": "dist/slimselect.ssr.js",
   "browser": "dist/slimselect.umd.js",
   "module": "dist/slimselect.es.js",
   "unpkg": "dist/slimselect.umd.min.js",
@@ -16,6 +16,9 @@
   "typings": "dist/index.d.ts",
   "style": "dist/slimselect.css",
   "sass": "src/slim-select/slimselect.scss",
+  "workspaces": [
+    "src/vue"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/brianvoe/slim-select.git"
@@ -30,12 +33,14 @@
   "scripts": {
     "dev": "vite --port=1111",
     "format": "prettier --write --cache --parser typescript \"src/**/*.ts\"",
-    "build": "npm run build:clean && npm run build:docs && npm run build:library",
+    "build": "npm run build:clean && npm run build:docs && npm run build:library && npm run build:frameworks",
     "build:clean": "rimraf ./dist/*",
     "build:docs": "vite build",
     "build:library": "npm run build:library:js && npm run build:library:css",
     "build:library:js": "cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../",
     "build:library:css": "cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../",
+    "build:frameworks": "npm run build --workspaces",
+    "publish": "npm publish && npm publish --workspaces",
     "test": "jest"
   },
   "devDependencies": {
@@ -45,6 +50,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.1.0",
     "@rollup/plugin-typescript": "^9.0.2",
+    "@slim-select/vue": "workspace:src/vue",
     "@types/downloadjs": "^1.4.3",
     "@vitejs/plugin-vue": "^3.2.0",
     "clipboard": "^2.0.11",
@@ -55,6 +61,8 @@
     "prismjs": "^1.29.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.1",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.56.1",
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.1",

package/src/docs/app.vue

@@ -79,8 +79,8 @@ export default defineComponent({
         { text: 'destroy', value: 'methods#destroy', class: 'mar-l-l' },
 
         // Frameworks
-        // { text: 'Frameworks', value: 'frameworks', class: 'label' },
-        // { text: 'vue', value: 'frameworks#vue', class: 'mar-l-l' },
+        { text: 'Frameworks', value: 'frameworks', class: 'label' },
+        { text: 'vue', value: 'frameworks#vue', class: 'mar-l-l' },
       ],
     }
   },
@@ -196,10 +196,10 @@ export default defineComponent({
       </div>
       <div class="socials">
         <a href="https://github.com/brianvoe/slim-select" target="_blank">
-          <img src="./images/github.png" />
+          <img src="./assets/images/github.png" />
         </a>
         <a href="https://www.npmjs.com/package/slim-select" target="_blank">
-          <img src="./images/npm.png" />
+          <img src="./assets/images/npm.png" />
         </a>
       </div>
     </div>

package/src/docs/assets/scss/misc.scss

@@ -40,6 +40,13 @@ p {
   margin: 0 0 var(--spacing-half) 0;
 }
 
+.separator {
+  height: 1px;
+  width: 100%;
+  margin: var(--spacing-half) 0 var(--spacing-half) 0;
+  background-color: var(--color-border);
+}
+
 .bold {
   font-weight: bold;
 }

package/src/docs/env.d.ts

@@ -7,6 +7,7 @@ declare module '*.vue' {
   export default component
 }
 
+declare module '@slim-select/vue'
 declare module 'chance'
 declare module 'prismjs'
 declare module 'prismjs/*'

package/src/docs/pages/events/addable.vue

@@ -10,7 +10,10 @@ export default defineComponent({
       select: this.$refs.addableSingle as HTMLSelectElement,
       events: {
         addable: (value: string) => {
-          return value
+          return {
+            text: value,
+            value: value.toLowerCase(),
+          }
         },
       },
     })
@@ -19,10 +22,14 @@ export default defineComponent({
       select: this.$refs.addableMultiple as HTMLSelectElement,
       events: {
         addable: (value: string) => {
-          return {
-            text: value,
-            value: value.toLowerCase(),
-          }
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                text: value,
+                value: value,
+              })
+            }, 100)
+          })
         },
       },
     })
@@ -65,11 +72,20 @@ export default defineComponent({
               // Return the value string
               return value // Optional - value alteration // ex: value.toLowerCase()
 
-              // Optional - Return a valid data object. See methods/setData for list of valid options
+              // Optional - Return a valid data object. 
+              // See methods/setData for list of valid options
               return {
                 text: value,
                 value: value.toLowerCase()
               }
+
+              // Optional - Return a promise with either a string or data object
+              return new Promise((resolve) => {
+                resolve({
+                  text: value,
+                  value: value,
+                })
+              })
             }
           }
         })

package/src/docs/pages/events/before_after_change.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import SlimSelect, { DataArray } from '../../../slim-select'
+import SlimSelect from '../../../slim-select'
+import { DataArray } from '../../../slim-select/store'
 
 export default defineComponent({
   name: 'BeforeAfterChange',
@@ -16,9 +17,13 @@ export default defineComponent({
   mounted() {
     new SlimSelect({
       select: this.$refs.beforeChangeSingle as HTMLSelectElement,
+      settings: {
+        allowDeselect: true,
+      },
       events: {
         beforeChange: (newValue: DataArray, oldValue: DataArray) => {
           this.beforeChangeSingle = oldValue
+          return true
         },
       },
     })
@@ -35,6 +40,9 @@ export default defineComponent({
 
     new SlimSelect({
       select: this.$refs.afterChangeSingle as HTMLSelectElement,
+      settings: {
+        allowDeselect: true,
+      },
       events: {
         afterChange: (value: DataArray) => {
           this.afterChangeSingle = value
@@ -63,11 +71,16 @@ export default defineComponent({
       Returning nothing or true will allow it to continue as normal.
     </p>
 
+    <div class="alert info">
+      Be sure to return true to allow for the change to happen. False or nothing to cancel change.
+    </div>
+
     <div v-if="beforeChangeSingle">
       <strong>Before change: {{ beforeChangeSingle }}</strong>
     </div>
 
     <select ref="beforeChangeSingle">
+      <option data-placeholder="true">Select Option</option>
       <option value="value1">Value 1</option>
       <option value="value2">Value 2</option>
       <option value="value3">Value 3</option>
@@ -108,6 +121,7 @@ export default defineComponent({
     </div>
 
     <select ref="afterChangeSingle">
+      <option data-placeholder="true">Select Option</option>
       <option value="value1">Value 1</option>
       <option value="value2">Value 2</option>
       <option value="value3">Value 3</option>