slim-select 2.0.1 → 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

@@ -0,0 +1,147 @@
+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 },
+              ]
+            },
+          },
+        })
+      `),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 N,d as $,_ as O,o as V,c as I,a as n,f as B,t as R,b as M}from"./index.js";var U={exports:{}};(function(d,y){(function(w,g){d.exports=g()})(N,function(){return function w(g,j,_){var o=window,p="application/octet-stream",c=_||p,e=g,a=!j&&!_&&e,s=document.createElement("a"),k=function(t){return String(t)},i=o.Blob||o.MozBlob||o.WebKitBlob||k,m=j||"download",l,S;if(i=i.call?i.bind(o):Blob,String(this)==="true"&&(e=[e,c],c=e[0],e=e[1]),a&&a.length<2048&&(m=a.split("/").pop().split("?")[0],s.href=a,s.href.indexOf(a)!==-1)){var u=new XMLHttpRequest;return u.open("GET",a,!0),u.responseType="blob",u.onload=function(t){w(t.target.response,m,p)},setTimeout(function(){u.send()},0),u}if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(e))if(e.length>1024*1024*1.999&&i!==k)e=C(e),c=e.type||p;else return navigator.msSaveBlob?navigator.msSaveBlob(C(e),m):f(e);else if(/([\x80-\xff])/.test(e)){var b=0,x=new Uint8Array(e.length),A=x.length;for(b;b<A;++b)x[b]=e.charCodeAt(b);e=new i([x],{type:c})}l=e instanceof i?e:new i([e],{type:c});function C(t){var r=t.split(/[:;,]/),h=r[1],E=r[2]=="base64"?atob:decodeURIComponent,T=E(r.pop()),D=T.length,v=0,L=new Uint8Array(D);for(v;v<D;++v)L[v]=T.charCodeAt(v);return new i([L],{type:h})}function f(t,r){if("download"in s)return s.href=t,s.setAttribute("download",m),s.className="download-js-link",s.innerHTML="downloading...",s.style.display="none",document.body.appendChild(s),setTimeout(function(){s.click(),document.body.removeChild(s),r===!0&&setTimeout(function(){o.URL.revokeObjectURL(s.href)},250)},66),!0;if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent))return/^data:/.test(t)&&(t="data:"+t.replace(/^data:([\w\/\-\+]+)/,p)),window.open(t)||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=t),!0;var h=document.createElement("iframe");document.body.appendChild(h),!r&&/^data:/.test(t)&&(t="data:"+t.replace(/^data:([\w\/\-\+]+)/,p)),h.src=t,setTimeout(function(){document.body.removeChild(h)},333)}if(navigator.msSaveBlob)return navigator.msSaveBlob(l,m);if(o.URL)f(o.URL.createObjectURL(l),!0);else{if(typeof l=="string"||l.constructor===k)try{return f("data:"+c+";base64,"+o.btoa(l))}catch{return f("data:"+c+","+encodeURIComponent(l))}S=new FileReader,S.onload=function(t){f(this.result)},S.readAsDataURL(l)}return!0}})})(U);const H=U.exports,G="slim-select",q="Slim advanced select dropdown",z="2.0.0",J="Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",K="https://slimselectjs.com",W="MIT",X={url:"https://github.com/brianvoe/slim-select/issues"},F="dist/slimselect.js",P="dist/slimselect.es.js",Q="dist/slimselect.js",Y="dist/index.d.ts",Z="dist/index.d.ts",ee="dist/slimselect.css",te="src/slim-select/slimselect.scss",se={type:"git",url:"git+https://github.com/brianvoe/slim-select.git"},ne=["select","vanilla","dropdown","search","multiselect"],oe={jestinit:"ts-jest config:init",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"},ie={"@jest/globals":"^29.3.1","@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","rollup-plugin-terser":"^7.0.2",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"},le={name:G,description:q,version:z,author:J,homepage:K,license:W,bugs:X,main:F,module:P,unpkg:Q,types:Y,typings:Z,style:ee,sass:te,repository:se,keywords:ne,scripts:oe,devDependencies:ie},ce=$({name:"Install",data:()=>({version:le.version}),methods:{downloadLink(){H(`https://cdnjs.cloudflare.com/ajax/libs/slim-select/${this.version}/slimselect.min.js`)}}}),ae={id:"install",class:"contents"},re=M(`<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,11 +10,11 @@ Use Save As... to download, then click back to return to this page.`)&&(location
             select: &#39;#selectElement&#39;
           })
         </code>
-      </pre></div>`,1),de={id:"cdn",class:"content"},pe=n("h2",null,"Cdn",-1),me=n("p",null,"Cdn has a url link you can grab.",-1),ue=n("p",null,[B(" See full list of available options. "),n("a",{target:"_blank",href:"https://cdnjs.com/libraries/slim-select"},"cdnjs.com/libraries/slim-select")],-1),be=n("div",{class:"alert info"},"New releases may be delayed until the next time its indexed",-1),fe={class:"install-code"},he={class:"language-html"},ve={id:"download",class:"content"},ge=n("h2",null,"Download",-1),ye=n("p",null,"Download the latest minified version of slim select",-1);function we(d,y,w,g,j,_){return V(),I("div",ae,[re,n("div",de,[pe,me,ue,be,n("pre",fe,[B("        "),n("code",he,`
+      </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="https://cdnjs.cloudflare.com/ajax/libs/slim-select/`+R(d.version)+`/slimselect.js"><\/script>
-              <link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/`+R(d.version)+`/slimselect.css" rel="stylesheet"></link>
+              <script src="unpkg.com/slim-select@`+E(d.version)+`/dist/slimselect.min.js"><\/script>
+              <link href="unpkg.com/slim-select@`+E(d.version)+`/dist/slimselect.css" rel="stylesheet"></link>
               
               <script>
                 new SlimSelect({
@@ -31,4 +31,4 @@ Use Save As... to download, then click back to return to this page.`)&&(location
             </body>
           </html>
         `,1),B(`
-      `)])]),n("div",ve,[ge,ye,n("div",{class:"btn",onClick:y[0]||(y[0]=o=>d.downloadLink())},"Click Here To Download")])])}const _e=O(ce,[["render",we]]);export{_e 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/docs/index.html

@@ -5,14 +5,32 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Slim Select</title>
+    <meta name="description" content="Advanced select dropdown" />
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="Slim Select" />
+    <meta property="og:description" content="Advanced select dropdown" />
     <script type="module" crossorigin src="/assets/index.js"></script>
     <link rel="stylesheet" href="/assets/index.css">
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-14PMXQVXTC"></script>
+    <script>
+      window.dataLayer = window.dataLayer || []
+      function gtag() {
+        dataLayer.push(arguments)
+      }
+      gtag('js', new Date())
+
+      gtag('config', 'G-14PMXQVXTC')
+    </script>
   </body>
-</html>
+</html>

package/index.html

@@ -5,12 +5,30 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Slim Select</title>
+    <meta name="description" content="Advanced select dropdown" />
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="Slim Select" />
+    <meta property="og:description" content="Advanced select dropdown" />
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/docs/main.ts"></script>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-14PMXQVXTC"></script>
+    <script>
+      window.dataLayer = window.dataLayer || []
+      function gtag() {
+        dataLayer.push(arguments)
+      }
+      gtag('js', new Date())
+
+      gtag('config', 'G-14PMXQVXTC')
+    </script>
   </body>
-</html>
+</html>

package/package.json

@@ -1,20 +1,24 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "2.0.1",
+  "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.js",
+  "main": "dist/slimselect.ssr.js",
+  "browser": "dist/slimselect.umd.js",
   "module": "dist/slimselect.es.js",
-  "unpkg": "dist/slimselect.js",
+  "unpkg": "dist/slimselect.umd.min.js",
   "types": "dist/index.d.ts",
   "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"
@@ -27,20 +31,26 @@
     "multiselect"
   ],
   "scripts": {
-    "jestinit": "ts-jest config:init",
     "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": {
     "@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",
@@ -51,7 +61,8 @@
     "prismjs": "^1.29.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.1",
-    "rollup-plugin-terser": "^7.0.2",
+    "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/public/404.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>Single Page Apps for GitHub Pages</title>
+    <meta charset="utf-8" />
+    <title>Slim Select</title>
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
       // https://github.com/rafrex/spa-github-pages
@@ -20,17 +20,23 @@
       // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
       // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
       // Otherwise, leave pathPrefix as false.
-      var pathPrefix = false;
-      var l = window.location;
+      var pathPrefix = false
+      var l = window.location
       l.replace(
-        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
-        l.pathname.split('/').slice(0, 2 * pathPrefix).join('/') + '/?p=/' +
-        l.pathname.slice(1).split('/').slice(pathPrefix).join('/').replace(/&/g, '~and~') +
-        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-        l.hash
-      );
+        l.protocol +
+          '//' +
+          l.hostname +
+          (l.port ? ':' + l.port : '') +
+          l.pathname
+            .split('/')
+            .slice(0, 2 * pathPrefix)
+            .join('/') +
+          '/?p=/' +
+          l.pathname.slice(1).split('/').slice(pathPrefix).join('/').replace(/&/g, '~and~') +
+          (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+          l.hash,
+      )
     </script>
   </head>
-  <body>
-  </body>
+  <body></body>
 </html>

package/src/docs/app.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import SlimSelect, { debounce, Settings } from '../slim-select'
+import SlimSelect from '../slim-select'
+import Settings from '../slim-select/settings'
+import { debounce } from '../slim-select/helpers'
 
 export default defineComponent({
   name: 'App',
@@ -75,6 +77,10 @@ export default defineComponent({
         { text: 'enableDisable', value: 'methods#enableDisable', class: 'mar-l-l' },
         { text: 'search', value: 'methods#search', class: 'mar-l-l' },
         { 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' },
       ],
     }
   },
@@ -186,14 +192,14 @@ export default defineComponent({
   <header>
     <div class="top">
       <div class="text">
-        <h1 class="logo">Slim Select</h1>
+        <h1 class="logo">Slim Select <small>2.0</small></h1>
       </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>