slim-select 1.27.0 → 2.0.0

package/docs/assets/index2.js

@@ -0,0 +1,274 @@
+import{d as l,S as o,_ as i,o as a,c,a as e,f as t,b as v,g as r,h as p}from"./index.js";const j=l({name:"AlwaysOpen",mounted(){new o({select:this.$refs.alwaysOpenSingle,settings:{alwaysOpen:!0,contentLocation:this.$refs.alwaysOpenSingleContent,contentPosition:"relative"}}),new o({select:this.$refs.alwaysOpenMultiple,settings:{alwaysOpen:!0,contentLocation:this.$refs.alwaysOpenMultipleContent,contentPosition:"relative"}})}}),L={id:"alwaysOpen",class:"content"},G=e("h2",{class:"header"},"alwaysOpen",-1),A=e("p",null," alwaysOpen option is used to keep the select open at all times. This is useful for when you want to display the options at all times. ",-1),I={class:"row"},R={style:{height:"auto"}},k={ref:"alwaysOpenSingle"},q=e("option",{value:"value1"},"Value 1",-1),N=e("option",{value:"value2"},"Value 2",-1),U=e("option",{value:"value3"},"Value 3",-1),W=[q,N,U],Y={ref:"alwaysOpenSingleContent"},F={style:{height:"auto"}},z={ref:"alwaysOpenMultiple",multiple:""},J=e("option",{value:"value1"},"Value 1",-1),K=e("option",{value:"value2"},"Value 2",-1),Q=e("option",{value:"value3"},"Value 3",-1),X=e("option",{value:"value4"},"Value 4",-1),Z=[J,K,Q,X],ee={ref:"alwaysOpenMultipleContent"},te=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            alwaysOpen: true,
+
+            // In various situations it may be useful to set the contentLocation
+            // to an element that will display best
+            contentLocation: document.getElementById('local'), ,
+            contentPosition: 'relative',
+          }
+        })
+      `),t(`
+    `)],-1),oe=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="selectElement">
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+
+        <!-- The content will go in this div -->
+        <div id="local"></div>
+      `),t(`
+    `)],-1);function se(s,n,u,d,_,h){return a(),c("div",L,[G,A,e("div",I,[e("div",R,[e("select",k,W,512),e("div",Y,null,512)]),e("div",F,[e("select",z,Z,512),e("div",ee,null,512)])]),te,oe])}const ne=i(j,[["render",se]]),le=l({name:"CloseOnSelect",mounted(){new o({select:this.$refs.closeOnSelectSingle,settings:{closeOnSelect:!1}}),new o({select:this.$refs.closeOnSelectMultiple,settings:{closeOnSelect:!1,selectByGroup:!0}})}}),ie={id:"closeOnSelect",class:"content"},ae=e("h2",{class:"header"},"closeOnSelect",-1),ce=e("p",null," closeOnSelect is a boolean value in which determines whether or not to close the content area upon selecting a value. ",-1),ue={class:"row"},de={ref:"closeOnSelectSingle"},_e=v('<option value="value1">Value 1</option><option value="value2">Value 2</option><option value="value3">Value 3</option><optgroup label="Super Values"><option value="value11">Value 1</option><option value="value22">Value 2</option><option value="value33">Value 3</option></optgroup>',4),he=[_e],re={ref:"closeOnSelectMultiple",multiple:""},pe=v('<option value="value1">Value 1</option><option value="value2">Value 2</option><option value="value3">Value 3</option><optgroup label="Super Values"><option value="value11">Value 1</option><option value="value22">Value 2</option><option value="value33">Value 3</option></optgroup>',4),ve=[pe],$e=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#search',
+          settings: {
+            closeOnSelect: false,
+          },
+        })
+      `),t(`
+    `)],-1);function me(s,n,u,d,_,h){return a(),c("div",ie,[ae,ce,e("div",ue,[e("select",de,he,512),e("select",re,ve,512)]),$e])}const ge=i(le,[["render",me]]),fe=l({name:"ContentLocation",mounted(){new o({select:this.$refs.contentLocation,settings:{contentLocation:this.$refs.local}})}}),we={id:"contentLocation",class:"content"},Se=e("h2",{class:"header"},"contentLocation",-1),ye=e("p",null," contentLocation will allow you to set the location of where the content section of slim select. By default every content div is appended to the body. ",-1),Ve=e("p",null," The content container is the bottom half of slim select. This includes the search input field and available options ",-1),be={class:"row"},xe={ref:"contentLocation",style:{width:"50%"}},Me=e("option",{value:"value1"},"Value 1",-1),De=e("option",{value:"value2"},"Value 2",-1),Oe=e("option",{value:"value3"},"Value 3",-1),Pe=[Me,De,Oe],Be={ref:"local"},Te=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            contentLocation: document.getElementById('local')
+          }
+        })
+      `),t(`
+    `)],-1),Ce=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="contentLocation">
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+
+        <!-- The content will go in this div -->
+        <div id="local"></div>
+      `),t(`
+    `)],-1);function He(s,n,u,d,_,h){return a(),c("div",we,[Se,ye,Ve,e("div",be,[e("select",xe,Pe,512),e("div",Be,null,512)]),Te,Ce])}const Ee=i(fe,[["render",He]]),je=l({name:"ContentPosition",mounted(){new o({select:this.$refs.contentPositionRelative,settings:{contentPosition:"relative",contentLocation:this.$refs.contentPositionRelativeContent}}),new o({select:this.$refs.contentPositionAbsolute,settings:{contentPosition:"absolute"}})}});const Le={id:"contentPosition",class:"content"},Ge=e("h2",{class:"header"},"contentPosition",-1),Ae=e("p",null,[t("contentPosition will set the css position to either relative. Default is "),e("b",null,"'absolute'")],-1),Ie=e("div",{class:"alert info"}," If you do use relative position be sure to set the contentLocation to an element that will work best for your use case. Otherwise SlimSelect will add you content to the body of the html. See example usage below. ",-1),Re={class:"row"},ke={ref:"contentPositionRelative",class:"relative"},qe=e("option",{"data-placeholder":"true"},"Relative",-1),Ne=e("option",{value:"value1"},"Value 1",-1),Ue=e("option",{value:"value2"},"Value 2",-1),We=e("option",{value:"value3"},"Value 3",-1),Ye=[qe,Ne,Ue,We],Fe={ref:"contentPositionRelativeContent"},ze={ref:"contentPositionAbsolute",class:"absolute"},Je=e("option",{"data-placeholder":"true"},"Absolute",-1),Ke=e("option",{value:"value1"},"Value 1",-1),Qe=e("option",{value:"value2"},"Value 2",-1),Xe=e("option",{value:"value3"},"Value 3",-1),Ze=[Je,Ke,Qe,Xe],et=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            contentPosition: 'relative' // 'absolute' or 'relative'
+
+            // To help with relative positioning 
+            // you can set the contentLocation
+            contentLocation: document.getElementById('local')
+          }
+        })
+      `),t(`
+    `)],-1);function tt(s,n,u,d,_,h){return a(),c("div",Le,[Ge,Ae,Ie,e("div",Re,[e("select",ke,Ye,512),e("div",Fe,null,512),e("select",ze,Ze,512)]),et])}const ot=i(je,[["render",tt]]),st=l({name:"Css",mounted(){new o({select:this.$refs.selectClass}),new o({select:this.$refs.optionClass})}});const nt={id:"cssClass",class:"content"},lt=e("h2",{class:"header"},"css class",-1),it=e("p",null," Slim select will inherit any classes that were added to the original select element. This includes options as well. ",-1),at={class:"row"},ct={ref:"selectClass",class:"select-class"},ut=e("option",{value:"value1"},"Value 1",-1),dt=e("option",{value:"value2"},"Value 2",-1),_t=e("option",{value:"value3"},"Value 3",-1),ht=[ut,dt,_t],rt={ref:"optionClass",class:"option-class"},pt=e("option",{class:"red",value:"value1"},"Red",-1),vt=e("option",{class:"green",value:"value2"},"Green",-1),$t=e("option",{class:"blue",value:"value3"},"Blue",-1),mt=[pt,vt,$t],gt=e("pre",null,[t("        "),e("code",{class:"language-html"},`
+          <select id="select-class" class="classItems">
+            <option class="red" value="value1">Value 1</option>
+            <option class="green" value="value2">Value 2</option>
+            <option class="blue" value="value3">Value 3</option>
+          </select>
+        `),t(`
+      `)],-1);function ft(s,n,u,d,_,h){return a(),c("div",nt,[lt,it,e("div",at,[e("select",ct,ht,512),e("select",rt,mt,512)]),gt])}const wt=i(st,[["render",ft]]),St=l({name:"DataAttributes",mounted(){new o({select:this.$refs.optionsSingle}),new o({select:this.$refs.optionsMultiple})}}),yt={id:"dataAttributes",class:"content"},Vt=e("h2",{class:"header"},"Data Attributes",-1),bt=e("p",null," Slim select will take on attributes of the original as best as possible. Below are example usages of attributes added to the underlining select options that slim select picked up and used ",-1),xt={class:"row"},Mt={ref:"optionsSingle"},Dt=v('<option data-placeholder="true"></option><option value="value1" data-info="Here is info">Data Attributes</option><option value="value2" disabled>Disabled Option</option><option value="value3" class="green">Class Green</option><option value="value4" style="color:purple;">Inline Style</option>',5),Ot=[Dt],Pt={ref:"optionsMultiple",multiple:""},Bt=e("option",{value:"value1","data-info":"Here is info"},"Data Attributes",-1),Tt=e("option",{value:"value2",disabled:""},"Disabled Option",-1),Ct=e("option",{value:"value3",class:"green"},"Class Green",-1),Ht=e("option",{value:"value4",style:{color:"purple"}},"Inline Style",-1),Et=[Bt,Tt,Ct,Ht];function jt(s,n,u,d,_,h){return a(),c("div",yt,[Vt,bt,e("div",xt,[e("select",Mt,Ot,512),e("select",Pt,Et,512)])])}const Lt=i(St,[["render",jt]]),Gt=l({name:"Deselect",mounted(){new o({select:this.$refs.allowDeselectSingle,settings:{allowDeselect:!0}}),new o({select:this.$refs.allowDeselectMultiple,settings:{allowDeselect:!0}})}}),At={id:"allowDeselect",class:"content"},It=e("h2",{class:"header"},"allowDeselect",-1),Rt=e("p",null,"This will allow you to deselect a value on a single/multiple select dropdown.",-1),kt=e("p",null,"Be sure to have an empty option data placeholder so slim select has an empty string value to select.",-1),qt={class:"row"},Nt={ref:"allowDeselectSingle"},Ut=e("option",{"data-placeholder":"true"},null,-1),Wt=e("option",{value:"value1"},"Value 1",-1),Yt=e("option",{value:"value2"},"Value 2",-1),Ft=e("option",{value:"value3"},"Value 3",-1),zt=[Ut,Wt,Yt,Ft],Jt={ref:"allowDeselectMultiple",multiple:""},Kt=e("option",{"data-placeholder":"true"},null,-1),Qt=e("option",{value:"value1"},"Value 1",-1),Xt=e("option",{value:"value2"},"Value 2",-1),Zt=e("option",{value:"value3"},"Value 3",-1),eo=[Kt,Qt,Xt,Zt],to=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            allowDeselect: true
+          }
+        })
+      `),t(`
+    `)],-1),oo=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <!-- Requires emtpy data-placeholder option -->
+        <select id="allowDeselect">
+          <option data-placeholder="true"></option>
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+      `),t(`
+    `)],-1);function so(s,n,u,d,_,h){return a(),c("div",At,[It,Rt,kt,e("div",qt,[e("select",Nt,zt,512),e("select",Jt,eo,512)]),to,oo])}const no=i(Gt,[["render",so]]),lo=l({name:"Display",mounted(){const s=new o({select:this.$refs.selectdisplay}),n=[{value:"value1",text:"Value 1",display:!1},{value:"value2",text:"Value 2"},{value:"value3",text:"Value 3"}];s.setData(n),s.setSelected(["value1","value3"]),new o({select:this.$refs.selectdisplay2})}}),io={id:"display",class:"content"},ao=e("h2",{class:"header"},"display",-1),co=e("p",null,"Allows to hide elements of selected values.",-1),uo={class:"row"},_o={ref:"selectdisplay",multiple:""},ho=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        const displaySelect = new SlimSelect({
+          select: '#selectElement'
+        })
+
+        const displayData = [
+          { value: 'value1', text: 'Value 1', display: false },
+          { value: 'value2', text: 'Value 2' },
+          { value: 'value3', text: 'Value 3' },
+        ]
+
+        displaySelect.setData(displayData)
+        displaySelect.set(['value1', 'value3'])
+      `),t(`
+    `)],-1),ro=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="selectMultiMandatory" multiple></select>
+      `),t(`
+    `)],-1),po=e("p",null,"Or",-1),vo={class:"row"},$o={ref:"selectdisplay2",multiple:""},mo=e("option",{value:"value1",style:{display:"none"},selected:""},"Value 1",-1),go=e("option",{value:"value2",selected:""},"Value 2",-1),fo=e("option",{value:"value3"},"Value 3",-1),wo=[mo,go,fo],So=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        const slim = new SlimSelect({
+          select: '#selectElement'
+        });
+      `),t(`
+    `)],-1),yo=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="selectdisplay2" multiple>
+          <option value="value1" style="display: none;" selected>Value 1</option>
+          <option value="value2" selected>Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+      `),t(`
+    `)],-1);function Vo(s,n,u,d,_,h){return a(),c("div",io,[ao,co,e("div",uo,[e("select",_o,null,512)]),ho,ro,po,e("div",vo,[e("select",$o,wo,512)]),So,yo])}const bo=i(lo,[["render",Vo]]),xo=l({name:"HideSelected",mounted(){new o({select:this.$refs.hideSelectedSingle,settings:{hideSelected:!0}}),new o({select:this.$refs.hideSelectedMultiple,settings:{hideSelected:!0}})}}),Mo={id:"hideSelected",class:"content"},Do=e("h2",{class:"header"},"hideSelected",-1),Oo=e("p",null,"hideSelected setting is used to hide the current selected option in the options dropdown.",-1),Po={class:"row"},Bo={ref:"hideSelectedSingle"},To=e("option",{"data-placeholder":"true"},null,-1),Co=e("option",{value:"value1"},"Value 1",-1),Ho=e("option",{value:"value2"},"Value 2",-1),Eo=e("option",{value:"value3"},"Value 3",-1),jo=[To,Co,Ho,Eo],Lo={ref:"hideSelectedMultiple",multiple:""},Go=e("option",{value:"value1"},"Value 1",-1),Ao=e("option",{value:"value2"},"Value 2",-1),Io=e("option",{value:"value3"},"Value 3",-1),Ro=[Go,Ao,Io],ko=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            hideSelected: true,
+          }
+        })
+      `),t(`
+    `)],-1),qo=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="hideSelectedSingle">
+          <option data-placeholder="true"></option>
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+
+        <select id="hideSelectedMultiple">
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+      `),t(`
+    `)],-1);function No(s,n,u,d,_,h){return a(),c("div",Mo,[Do,Oo,e("div",Po,[e("select",Bo,jo,512),e("select",Lo,Ro,512)]),ko,qo])}const Uo=i(xo,[["render",No]]),Wo=l({name:"Html",mounted(){new o({select:this.$refs.selectHtmlSingle,settings:{searchHighlight:!0},data:[{html:"<b>Bold Text</b>",text:"Bold Text",value:"bold text"},{html:"<i>Slim Select you are awesome</i>",text:"Slim Select awesome"},{html:'<div style="border: solid 1px #666666;">Border</div>',text:"Border",value:"border"}]}),new o({select:this.$refs.selectHtmlMulti,settings:{searchHighlight:!0},data:[{html:"<b>Bold Text</b>",text:"Bold Text",value:"bold text"},{html:"<i>Slim Select you are awesome</i>",text:"Slim Select awesome"},{html:'<div style="border: solid 1px #666666;">Border</div>',text:"Border",value:"border"}]})}}),Yo={id:"html",class:"content"},Fo=e("h2",{class:"header"},"html",-1),zo=e("p",null," Slim select has the ability to set custom html for the selected values and options dropdown. By default if the html field is set it will use that for the selected values and the options dropdown. For a multiple select selected values it will always use the text field. ",-1),Jo={class:"row"},Ko={ref:"selectHtmlSingle"},Qo={ref:"selectHtmlMulti",multiple:""},Xo=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement',
+          data: [
+            {html: '<img height="30" width="30" src="http://lorempixel.com/30/30" />\xA0Image', text: 'Image', value: 'image'},
+            {html: '<b>Bold Text</b>', text: 'Bold Text', value: 'bold text'},
+            {html: '<div style="border: solid 1px #666666;">Border</div>', text: 'Border', value: 'border'},
+            {html: '<i>Slim Select you are awesome</i>', text: 'Slim Select awesome'}
+          ]
+        })
+      `),t(`
+    `)],-1);function Zo(s,n,u,d,_,h){return a(),c("div",Yo,[Fo,zo,e("div",Jo,[e("select",Ko,null,512),e("select",Qo,null,512)]),Xo])}const es=i(Wo,[["render",Zo]]),ts=l({name:"Mandatory",mounted(){const s=new o({select:this.$refs.selectMultiMandatory}),n=[{value:"value1",text:"Value 1",mandatory:!0},{value:"value2",text:"Value 2"},{value:"value3",text:"Value 3"}];s.setData(n),s.setSelected(["value1","value3"]),new o({select:this.$refs.selectMultiMandatory2})}}),os={id:"mandatory",class:"content"},ss=e("h2",{class:"header"},"mandatory",-1),ns=e("p",null," When using multi select you can set a mandatory on the option to prevent capability to deselect particular option. Note options with mandatory flag is not selected by default, you need select them yourselfs. ",-1),ls={class:"row"},is={ref:"selectMultiMandatory",multiple:""},as=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        const slim = new SlimSelect({
+          select: '#selectElement'
+        });
+
+        const data = [
+          { value: 'value1', text: 'Value 1', mandatory: true },
+          { value: 'value2', text: 'Value 2' },
+          { value: 'value3', text: 'Value 3' },
+        ]
+
+        slim.setData(data)
+        slim.set(["value1", "value3"])
+      `),t(`
+    `)],-1),cs=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="selectMultiMandatory" multiple></select>
+      `),t(`
+    `)],-1),us=e("p",null,"Or",-1),ds={class:"row"},_s={ref:"selectMultiMandatory2",multiple:""},hs=e("option",{value:"value1","data-mandatory":"true",selected:""},"Value 1",-1),rs=e("option",{value:"value2",selected:""},"Value 2",-1),ps=e("option",{value:"value3"},"Value 3",-1),vs=[hs,rs,ps],$s=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        const slim = new SlimSelect({
+          select: '#selectElement'
+        });
+      `),t(`
+    `)],-1),ms=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="selectMultiMandatory" multiple>
+          <option value="value1" data-mandatory="true" selected>Value 1</option>
+          <option value="value2" selected>Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+      `),t(`
+    `)],-1);function gs(s,n,u,d,_,h){return a(),c("div",os,[ss,ns,e("div",ls,[e("select",is,null,512)]),as,cs,us,e("div",ds,[e("select",_s,vs,512)]),$s,ms])}const fs=i(ts,[["render",gs]]),ws=l({name:"MinMax",mounted(){new o({select:this.$refs.selectMultiMax,settings:{minSelected:2,maxSelected:5}})}}),Ss={id:"minmax",class:"content"},ys=e("h2",{class:"header"},"Min/Max Selected",-1),Vs=e("p",null,"When using multi select you can set a min and/or max on the amount of selections you can have.",-1),bs={class:"row"},xs={ref:"selectMultiMax",multiple:""},Ms=v('<option value="value1">Value 1</option><option value="value2">Value 2</option><option value="value3">Value 3</option><option value="value4">Value 4</option><option value="value5">Value 5</option><option value="value6">Value 6</option>',6),Ds=[Ms],Os=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        let slim = new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            minSelected: 2,
+            maxSelected: 5,
+          },
+        })
+      `),t(`
+    `)],-1),Ps=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="selectMultiMax" multiple>
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+          <option value="value4">Value 4</option>
+          <option value="value5">Value 5</option>
+          <option value="value6">Value 6</option>
+        </select>
+      `),t(`
+    `)],-1);function Bs(s,n,u,d,_,h){return a(),c("div",Ss,[ys,Vs,e("div",bs,[e("select",xs,Ds,512)]),Os,Ps])}const Ts=i(ws,[["render",Bs]]),Cs=l({name:"OpenPosition",mounted(){new o({select:this.$refs.openPositionUp,settings:{openPosition:"up"}}),new o({select:this.$refs.openPositionDown,settings:{openPosition:"down"}})}}),Hs={id:"openPosition",class:"content"},Es=e("h2",{class:"header"},"openPosition",-1),js=e("p",null," openPosition is a string value that will decide where to show your content when it comes out. By default slim select will try to put the content where it can without going off screen. But you may want to always show it in one direction. ",-1),Ls=e("p",null,[t("Possible Options: "),e("b",null,"'auto', 'up' or 'down'"),t(". Default is "),e("b",null,"'auto'")],-1),Gs={class:"row"},As={ref:"openPositionUp"},Is=e("option",{value:"up1"},"Up 1",-1),Rs=e("option",{value:"up2"},"Up 2",-1),ks=e("option",{value:"up3"},"Up 3",-1),qs=[Is,Rs,ks],Ns={ref:"openPositionDown"},Us=e("option",{value:"down1"},"Down 1",-1),Ws=e("option",{value:"down2"},"Down 2",-1),Ys=e("option",{value:"down3"},"Down 3",-1),Fs=[Us,Ws,Ys],zs=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            openPosition: 'auto' // 'auto', 'up' or 'down'
+          }
+        })
+      `),t(`
+    `)],-1);function Js(s,n,u,d,_,h){return a(),c("div",Hs,[Es,js,Ls,e("div",Gs,[e("select",As,qs,512),e("select",Ns,Fs,512)]),zs])}const Ks=i(Cs,[["render",Js]]),Qs=l({name:"Placeholder",mounted(){new o({select:this.$refs.placeholderSingle,settings:{placeholderText:"Custom Placeholder Text"}}),new o({select:this.$refs.placeholderMultiple,settings:{placeholderText:"Custom Placeholder Text"}})}}),Xs={id:"placeholder",class:"content"},Zs=e("h2",{class:"header"},"placeholderText",-1),en=e("p",null,' Placeholders consists of setting the placeholder option value. The only difference is single selects require an empty option with data-placeholder set to true. Default value is "Select Value". ',-1),tn={class:"row"},on={ref:"placeholderSingle"},sn=e("option",{"data-placeholder":"true"},null,-1),nn=e("option",{value:"value1"},"Value 1",-1),ln=e("option",{value:"value2"},"Value 2",-1),an=e("option",{value:"value3"},"Value 3",-1),cn=[sn,nn,ln,an],un={ref:"placeholderMultiple",multiple:""},dn=e("option",{value:"value1"},"Value 1",-1),_n=e("option",{value:"value2"},"Value 2",-1),hn=e("option",{value:"value3"},"Value 3",-1),rn=[dn,_n,hn],pn=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#placeholder',
+          settings: {
+            placeholderText: 'Custom Placeholder Text',
+          }
+        })
+      `),t(`
+    `)],-1),vn=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <!-- Set empty option with data-placeholder if you to have placeholder -->
+        <!-- text for single select, otherwise first option will be selected -->
+        <select id="placeholderSingle">
+          <option data-placeholder="true"></option>
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+      `),t(`
+    `)],-1);function $n(s,n,u,d,_,h){return a(),c("div",Xs,[Zs,en,e("div",tn,[e("select",on,cn,512),e("select",un,rn,512)]),pn,vn])}const mn=i(Qs,[["render",$n]]),gn=l({name:"Search",mounted(){new o({select:this.$refs.showSearchSingle,settings:{showSearch:!1}}),new o({select:this.$refs.searchTextSingle,settings:{searchText:"Sorry, nothing to see here"}}),new o({select:this.$refs.searchPlaceholderSingle,settings:{searchPlaceholder:"Search for the good stuff!"}}),new o({select:this.$refs.searchHighlightSingle,settings:{searchHighlight:!0}}),new o({select:this.$refs.showSearchMulti,settings:{showSearch:!1}}),new o({select:this.$refs.searchTextMulti,settings:{searchText:"Sorry nothing to see here"}}),new o({select:this.$refs.searchPlaceholderMulti,settings:{searchPlaceholder:"Search for the good stuff!"}}),new o({select:this.$refs.searchHighlightMulti,settings:{searchHighlight:!0}})}}),fn={id:"search",class:"content"},wn=v('<h2 class="header">showSearch / searchText / searchingText / searchHighlight</h2><p><b>showSearch</b> - is a boolean value that will decide whether or not to show the search. Default is true.</p><p><b>searchText</b> - is a string value that will show in the event there are no results. Default is &#39;No Results&#39;. </p><p><b>searchingText</b> - is a string value that will show during an fetch search request. Default is &#39;Searching...&#39;. </p><p><b>searchPlaceholder</b> - is a string value that will set the value of the input search placeholder text. Default is &#39;Search&#39;. </p><p><b>searchHighlight</b> - is a boolean value that will highlight search results. Default is false.</p>',6),Sn={class:"row",style:{padding:"0 0 var(--spacing-half) 0"}},yn={ref:"showSearchSingle"},Vn=e("option",{value:"dog"},"Dog",-1),bn=e("option",{value:"cat"},"Cat",-1),xn=e("option",{value:"bird"},"Bird",-1),Mn=[Vn,bn,xn],Dn={ref:"searchTextSingle"},On=e("option",{value:"dog"},"Dog",-1),Pn=e("option",{value:"cat"},"Cat",-1),Bn=e("option",{value:"bird"},"Bird",-1),Tn=[On,Pn,Bn],Cn={ref:"searchPlaceholderSingle"},Hn=e("option",{value:"dog"},"Dog",-1),En=e("option",{value:"cat"},"Cat",-1),jn=e("option",{value:"bird"},"Bird",-1),Ln=[Hn,En,jn],Gn={ref:"searchHighlightSingle"},An=e("option",{value:"dog"},"Dog",-1),In=e("option",{value:"cat"},"Cat",-1),Rn=e("option",{value:"bird"},"Bird",-1),kn=[An,In,Rn],qn={class:"row"},Nn={ref:"showSearchMulti",multiple:""},Un=e("option",{value:"dog"},"Dog",-1),Wn=e("option",{value:"cat"},"Cat",-1),Yn=e("option",{value:"bird"},"Bird",-1),Fn=[Un,Wn,Yn],zn={ref:"searchTextMulti",multiple:""},Jn=e("option",{value:"dog"},"Dog",-1),Kn=e("option",{value:"cat"},"Cat",-1),Qn=e("option",{value:"bird"},"Bird",-1),Xn=[Jn,Kn,Qn],Zn={ref:"searchPlaceholderMulti",multiple:""},el=e("option",{value:"dog"},"Dog",-1),tl=e("option",{value:"cat"},"Cat",-1),ol=e("option",{value:"bird"},"Bird",-1),sl=[el,tl,ol],nl={ref:"searchHighlightMulti",multiple:""},ll=e("option",{value:"dog"},"Dog",-1),il=e("option",{value:"cat"},"Cat",-1),al=e("option",{value:"bird"},"Bird",-1),cl=[ll,il,al],ul=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        let slim = new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            showSearch: false,
+            searchText: 'Sorry nothing to see here',
+            searchPlaceholder: 'Search for the good stuff!',
+            searchHighlight: true
+          }
+        })
+      `),t(`
+    `)],-1);function dl(s,n,u,d,_,h){return a(),c("div",fn,[wn,e("div",Sn,[e("select",yn,Mn,512),e("select",Dn,Tn,512),e("select",Cn,Ln,512),e("select",Gn,kn,512)]),e("div",qn,[e("select",Nn,Fn,512),e("select",zn,Xn,512),e("select",Zn,sl,512),e("select",nl,cl,512)]),ul])}const _l=i(gn,[["render",dl]]),hl=l({name:"Select"}),rl={id:"select",class:"content"},pl=e("h2",{class:"header"},"select",-1),vl=e("p",null," The select field is used to identify the select element that will be used to create slim select. You can use any value you normally would in a querySelector or pass the element directly. ",-1),$l=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectElement',
+          // or
+          select: document.querySelector('#selectElement')
+        })
+
+        // If you already have a currenlty running SlimSelect but lost the reference to it.
+        // You can access from the original select element.
+        let el = document.querySelector('#selectElement')
+        el.slim.open() // Or any other options/methods
+      `),t(`
+    `)],-1),ml=[pl,vl,$l];function gl(s,n,u,d,_,h){return a(),c("div",rl,ml)}const fl=i(hl,[["render",gl]]),wl=l({name:"SelectByGroup",mounted(){new o({select:this.$refs.selectByGroup,settings:{selectByGroup:!0}})}}),Sl={id:"selectByGroup",class:"content"},yl=e("h2",{class:"header"},"selectByGroup",-1),Vl=e("p",null," selectByGroup option is used to enable the selection of all options under a specific group by clicking that option group's label. ",-1),bl={ref:"selectByGroup",multiple:""},xl=e("optgroup",{label:"Label 1"},[e("option",{value:"value1"},"Value 1"),e("option",{value:"value2"},"Value 2"),e("option",{value:"value3"},"Value 3")],-1),Ml=[xl],Dl=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectByGroup',
+          settings: {
+            selectByGroup: true
+          }
+        })
+      `),t(`
+    `)],-1);function Ol(s,n,u,d,_,h){return a(),c("div",Sl,[yl,Vl,e("select",bl,Ml,512),Dl])}const Pl=i(wl,[["render",Ol]]),Bl=l({name:"ShowTooltip",mounted(){new o({select:this.$refs.showOptionTooltips,settings:{showOptionTooltips:!0}})}}),Tl={id:"showOptionTooltips",class:"content"},Cl=e("h2",{class:"header"},"showOptionTooltips",-1),Hl=e("p",null," showOptionTooltips option is used to active displaying the on-hover tooltips for select options. The tooltip text is equal to the option text content. ",-1),El={ref:"showOptionTooltips"},jl=e("option",{value:"value1"},"Value 1",-1),Ll=e("option",{value:"value2"},"Value 2",-1),Gl=e("option",{value:"value3"},"Value 3",-1),Al=[jl,Ll,Gl],Il=e("pre",null,[t("      "),e("code",{class:"language-javascript"},`
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            showOptionTooltips: true,
+          }
+        })
+      `),t(`
+    `)],-1);function Rl(s,n,u,d,_,h){return a(),c("div",Tl,[Cl,Hl,e("select",El,Al,512),Il])}const kl=i(Bl,[["render",Rl]]),ql=l({name:"Styles",mounted(){new o({select:this.$refs.selectStyle}),new o({select:this.$refs.optionStyle})}}),Nl={id:"inlineStyles",class:"content"},Ul=e("h2",{class:"header"},"inline styles",-1),Wl=e("p",null," Slim select will inherit any styles that were added to the original select element. This includes options as well. ",-1),Yl={class:"row"},Fl={ref:"selectStyle",style:{color:"red"}},zl=e("option",{value:"value1"},"Value 1",-1),Jl=e("option",{value:"value2"},"Value 2",-1),Kl=e("option",{value:"value3"},"Value 3",-1),Ql=[zl,Jl,Kl],Xl={ref:"optionStyle"},Zl=e("option",{style:{color:"red"},value:"value1"},"Red",-1),ei=e("option",{style:{color:"green"}},"Green",-1),ti=e("option",{style:{color:"blue"}},"Blue",-1),oi=[Zl,ei,ti],si=e("pre",null,[t("      "),e("code",{class:"language-html"},`
+        <select id="select-style" style="color: red;">
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+
+        <select id="option-style">
+          <option style="color: red;" value="value1">Red</option>
+          <option style="color: green;">Green</option>
+          <option style="color: blue;">Blue</option>
+        </select>
+      `),t(`
+    `)],-1);function ni(s,n,u,d,_,h){return a(),c("div",Nl,[Ul,Wl,e("div",Yl,[e("select",Fl,Ql,512),e("select",Xl,oi,512)]),si])}const li=i(ql,[["render",ni]]),ii=l({name:"Settings",components:{Select:fl,AlwaysOpen:ne,ContentLocation:Ee,ContentPosition:ot,OpenPosition:Ks,Placeholder:mn,Deselect:no,Display:bo,Mandatory:fs,MinMax:Ts,DataAttributes:Lt,Css:wt,Styles:li,Html:es,Search:_l,CloseOnSelect:ge,ShowTooltip:kl,SelectByGroup:Pl,HideSelected:Uo}}),ai={id:"settings",class:"contents"};function ci(s,n,u,d,_,h){const $=r("Select"),m=r("AlwaysOpen"),g=r("ContentLocation"),f=r("ContentPosition"),w=r("OpenPosition"),S=r("Placeholder"),y=r("Deselect"),V=r("Display"),b=r("Mandatory"),x=r("MinMax"),M=r("DataAttributes"),D=r("Css"),O=r("Styles"),P=r("Html"),B=r("Search"),T=r("CloseOnSelect"),C=r("ShowTooltip"),H=r("SelectByGroup"),E=r("HideSelected");return a(),c("div",ai,[p($),p(m),p(g),p(f),p(w),p(S),p(y),p(V),p(b),p(x),p(M),p(D),p(O),p(P),p(B),p(T),p(C),p(H),p(E)])}const di=i(ii,[["render",ci]]);export{di as default};

package/docs/assets/index3.js

@@ -0,0 +1,126 @@
+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"},`
+        var select = new SlimSelect({
+          select: '#selectElement',
+          events: {
+            error: function(err) {
+              console.error(err)
+            }
+          }
+        })
+      `),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"},`
+        new SlimSelect({
+          select: '#selectElement',
+          events: {
+            beforeChange: (newVal, oldVal) => {
+              console.log(newVal)
+              return false // this will stop the change from happening
+            }
+          }
+        })
+      `),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"},`
+        new SlimSelect({
+          select: '#selectElement',
+          events: {
+            afterChange: (newVal) => {
+              console.log(newVal)
+            }
+          }
+        })
+      `),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"},`
+        var select = new SlimSelect({
+          select: '#selectElement',
+          events: {
+            beforeOpen: () => {
+              console.log('before open')
+            },
+            afterOpen: () => {
+              console.log('after open')
+            },
+            beforeClose: () => {
+              console.log('before close')
+            },
+            afterClose: () => {
+              console.log('after close')
+            },
+          },
+        })
+      `),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"},`
+        new SlimSelect({
+          select: '#selectElement',
+          events: {
+            search: (search, currentData) => {
+              return new Promise((resolve, reject) => {
+                if (search.length < 2) {
+                  return reject('Search must be at least 2 characters')
+                }
+
+                // Fetch random first and last name data
+                fetch('https://api.gofakeit.com/json', {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    type: 'array',
+                    rowcount: 10,
+                    indent: false,
+                    fields: [
+                      { name: 'first_name', function: 'firstname', params: {} },
+                      { name: 'last_name', function: 'lastname', params: {} },
+                    ],
+                  }),
+                })
+                  .then((response) => response.json())
+                  .then((data) => {
+                    // Take data and generate array of options
+                    const options = data.map((person) => {
+                      return {
+                        text: \`\${person.first_name} \${person.last_name}\`,
+                        value: \`\${person.first_name} \${person.last_name}\`,
+                      }
+                    })
+
+                    resolve(options)
+                  })
+              })
+            }
+          }
+        })
+      `),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"},`
+        new SlimSelect({
+          select: '#selectElement',
+          events: {
+            // Exact case sensitive start of string match
+            searchFilter: (option, search) => {
+              return option.text.substr(0, search.length) === search
+            }
+          }
+        })
+      `),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"},`
+        new SlimSelect({
+          select: '#selectElement',
+
+          events: {
+            addable: function (value) {
+              // return false or null if you do not want to allow value to be submitted
+              if (value === 'bad') {return false}
+
+              // 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
+              return {
+                text: value,
+                value: value.toLowerCase()
+              }
+            }
+          }
+        })
+      `),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};

package/docs/assets/index4.js

@@ -0,0 +1,60 @@
+import{d as u,S as i,_ as r,o,c as a,a as e,f as l,t as $,i as g,b as y,g as c,h as d,w}from"./index.js";const M=u({name:"GetSelected",data(){return{selectedSingle:null,selectedSingleValue:[],selectedMultiple:null,selectedMultipleValue:[]}},mounted(){this.selectedSingle=new i({select:this.$refs.selectedSingle}),this.selectedMultiple=new i({select:this.$refs.selectedMultiple})},methods:{getSelected(){this.selectedSingleValue=this.selectedSingle.getSelected(),this.selectedMultipleValue=this.selectedMultiple.getSelected()}}}),E={id:"getSelected",class:"content"},k=e("h2",{class:"header"},"getSelected",-1),O=e("p",null,"The getSelected method will return an array of the currently selected value strings.",-1),C=e("div",{class:"alert info"}," Whether or not its a single or multiple select, getSelected will always return an array. ",-1),G={class:"row"},T={ref:"selectedSingle"},j=e("option",{value:"value1"},"Value 1",-1),N=e("option",{value:"value2"},"Value 2",-1),B=e("option",{value:"value3"},"Value 3",-1),W=[j,N,B],I={key:0,class:"pad-t-m pad-b-m"},A=e("b",null,"Single Select Value:",-1),J={ref:"selectedMultiple",multiple:""},P=e("option",{value:"value1"},"Value 1",-1),Y=e("option",{value:"value2",selected:""},"Value 2",-1),q=e("option",{value:"value3",selected:""},"Value 3",-1),z=[P,Y,q],F={key:0,class:"pad-t-m pad-b-m"},H=e("b",null,"Multi Select Value:",-1),K=e("pre",null,[l("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+        var values = select.getSelected() // Will return an array of strings
+        console.log(values)
+      `),l(`
+    `)],-1);function L(t,s,h,p,_,v){return o(),a("div",E,[k,O,C,e("div",G,[e("div",{class:"btn",onClick:s[0]||(s[0]=(...n)=>t.getSelected&&t.getSelected(...n))},"Get Selected"),e("div",null,[e("select",T,W,512),t.selectedSingleValue.length?(o(),a("div",I,[A,l(" "+$(t.selectedSingleValue),1)])):g("",!0)]),e("div",null,[e("select",J,z,512),t.selectedMultipleValue.length?(o(),a("div",F,[H,l(" "+$(t.selectedMultipleValue),1)])):g("",!0)])]),K])}const Q=r(M,[["render",L]]),R=u({name:"SetSelected",data(){return{selectedSingle:null,selectedMultiple:null}},mounted(){this.selectedSingle=new i({select:this.$refs.selectedSingle}),this.selectedMultiple=new i({select:this.$refs.selectedMultiple})},methods:{setSelected(){this.selectedSingle.open(),this.selectedSingle.setSelected("value2"),this.selectedMultiple.open(),this.selectedMultiple.setSelected(["value1","value3"]),setTimeout(()=>{this.selectedSingle.close(),this.selectedMultiple.close()},1e3)}}}),U={id:"setSelected",class:"content"},X=e("h2",{class:"header"},"setSelected",-1),Z=e("p",null,"The setSelected method will set the selected value(s) of the select.",-1),x=e("p",null,"setSelected will accept both string or array of strings.",-1),ee={class:"row"},te={ref:"selectedSingle"},se=e("option",{value:"value1"},"Value 1",-1),le=e("option",{value:"value2"},"Value 2",-1),ne=e("option",{value:"value3"},"Value 3",-1),oe=[se,le,ne],ae={ref:"selectedMultiple",multiple:""},ie=e("option",{value:"value1"},"Value 1",-1),ce=e("option",{value:"value2"},"Value 2",-1),de=e("option",{value:"value3"},"Value 3",-1),ue=[ie,ce,de],re=e("pre",null,[l("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+        select.setSelected('value1' /* or */ ['value1', 'value3'])
+        console.log(select.getSelected())
+      `),l(`
+    `)],-1);function he(t,s,h,p,_,v){return o(),a("div",U,[X,Z,x,e("div",ee,[e("div",{class:"btn",onClick:s[0]||(s[0]=(...n)=>t.setSelected&&t.setSelected(...n))},"Set Selected"),e("select",te,oe,512),e("select",ae,ue,512)]),re])}const pe=r(R,[["render",he]]),_e=u({name:"GetData",data(){return{getDataOptions:null,getDataOptionsValue:[],getDataOptgroups:null,getDataOptgroupsValue:[]}},mounted(){this.getDataOptions=new i({select:this.$refs.getDataOptions}),this.getDataOptgroups=new i({select:this.$refs.getDataOptgroups})},methods:{getData(){this.getDataOptionsValue=this.getDataOptions.getData(),this.getDataOptgroupsValue=this.getDataOptgroups.getData()}}}),ve={id:"getData",class:"content"},$e=e("h2",{class:"header"},"getData",-1),ge=e("p",null,"The getData method will return an array of the full data set.",-1),Se={class:"row"},me={ref:"getDataOptions"},fe=e("option",{value:"value1"},"Value 1",-1),be=e("option",{value:"value2"},"Value 2",-1),De=e("option",{value:"value3"},"Value 3",-1),Ve=[fe,be,De],ye={key:0,class:"pad-t-m pad-b-m"},we=e("b",null,"Option Data:",-1),Me={ref:"getDataOptgroups",multiple:""},Ee=y('<optgroup label="Group 1"><option value="value1">Value 1</option><option value="value2">Value 2</option><option value="value3">Value 3</option></optgroup><optgroup label="Group 2"><option value="value4">Value 4</option><option value="value5">Value 5</option><option value="value6">Value 6</option></optgroup>',2),ke=[Ee],Oe={key:0,class:"pad-t-m pad-b-m"},Ce=e("b",null,"Optgroup Data:",-1),Ge=e("pre",null,[l("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+        var data = select.getData() // Will return an array of options and optgroups
+        console.log(data)
+      `),l(`
+    `)],-1);function Te(t,s,h,p,_,v){return o(),a("div",ve,[$e,ge,e("div",Se,[e("div",{class:"btn",onClick:s[0]||(s[0]=(...n)=>t.getData&&t.getData(...n))},"Get Data"),e("div",null,[e("select",me,Ve,512),t.getDataOptionsValue.length?(o(),a("div",ye,[we,l(" "+$(t.getDataOptionsValue),1)])):g("",!0)]),e("div",null,[e("select",Me,ke,512),t.getDataOptgroupsValue.length?(o(),a("div",Oe,[Ce,l(" "+$(t.getDataOptgroupsValue),1)])):g("",!0)])]),Ge])}const je=r(_e,[["render",Te]]),Ne=u({name:"SetData",data(){return{setDataSingle:null,setDataMultiple:null}},mounted(){this.setDataSingle=new i({select:this.$refs.setDataSingle,events:{error:t=>{console.error(t)}}}),this.setDataMultiple=new i({select:this.$refs.setDataMultiple,events:{error:t=>{console.error(t)}}})},methods:{setData(){fetch("https://api.gofakeit.com/json",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({type:"array",rowcount:10,indent:!1,fields:[{name:"text",function:"generate",params:{str:"{firstname} {lastname}"}},{name:"selected",function:"bool"}]})}).then(t=>t.json()).then(t=>{this.setDataSingle.setData(t),this.setDataMultiple.setData(t)}).catch(t=>console.error(t))}}}),Be={id:"setData",class:"content"},We=e("h2",{class:"header"},"setData",-1),Ie=e("p",null," The setData method can take in an array of objects. This will set the options of the original select and rerender slim select. ",-1),Ae=e("div",{class:"alert info"}," If you use a single select but an option is not selected it will select the first option. ",-1),Je=e("div",{class:"alert info"}," If you use a single select but pass in data with multiple selected options, the first option will be selected. ",-1),Pe={class:"alert info"},Ye={class:"row"},qe={ref:"setDataSingle"},ze={ref:"setDataMultiple",multiple:""},Fe=e("pre",null,[l("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+
+        // Array of objects
+        select.setData([
+          {text: 'Value 1', value: 'value1'},
+          {text: 'Value 2', value: 'value2'},
+          {
+            label: 'Group 1',
+            options: [
+              {text: 'Value 3', value: 'value3'},
+              {text: 'Value 4', value: 'value4'},
+            ]
+          }
+        ])
+      `),l(`
+    `)],-1);function He(t,s,h,p,_,v){const n=c("router-link");return o(),a("div",Be,[We,Ie,Ae,Je,e("div",Pe,[l(" To get a better break down of possible data options see "),d(n,{to:"/data#types"},{default:w(()=>[l("data")]),_:1})]),e("div",Ye,[e("div",{class:"btn",onClick:s[0]||(s[0]=(...S)=>t.setData&&t.setData(...S))},"Set Data"),e("select",qe,null,512),e("select",ze,null,512)]),Fe])}const Ke=r(Ne,[["render",He]]),Le=u({name:"EnableDisable",data(){return{setEnableSingle:null,setEnableMultiple:null}},mounted(){this.setEnableSingle=new i({select:this.$refs.setEnableSingle}),this.setEnableMultiple=new i({select:this.$refs.setEnableMultiple})},methods:{setEnable(){this.setEnableSingle.enable(),this.setEnableMultiple.enable()},setDisable(){this.setEnableSingle.disable(),this.setEnableMultiple.disable()}}}),Qe={id:"enableDisable",class:"content"},Re=e("h2",{class:"header"},"enable / disable",-1),Ue=e("p",null,[l(" These methods will enable or disable the select dropdown. "),e("br"),l(" You may also set disabled on your original select and slim-select will pick that up. ")],-1),Xe={class:"row"},Ze={ref:"setEnableSingle",disabled:""},xe=e("option",{value:"value1"},"Value 1",-1),et=e("option",{value:"value2"},"Value 2",-1),tt=e("option",{value:"value3"},"Value 3",-1),st=[xe,et,tt],lt={ref:"setEnableMultiple",multiple:"",disabled:""},nt=e("option",{value:"value1"},"Value 1",-1),ot=e("option",{value:"value2"},"Value 2",-1),at=e("option",{value:"value3"},"Value 3",-1),it=[nt,ot,at],ct=e("pre",null,[l("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+        select.enable()
+        // or
+        select.disable()
+      `),l(`
+    `)],-1);function dt(t,s,h,p,_,v){return o(),a("div",Qe,[Re,Ue,e("div",Xe,[t.setEnableSingle&&!t.setEnableSingle.settings.isEnabled?(o(),a("div",{key:0,class:"btn",onClick:s[0]||(s[0]=(...n)=>t.setEnable&&t.setEnable(...n))},"Enable")):(o(),a("div",{key:1,class:"btn",onClick:s[1]||(s[1]=(...n)=>t.setDisable&&t.setDisable(...n))},"Disable")),e("select",Ze,st,512),e("select",lt,it,512)]),ct])}const ut=r(Le,[["render",dt]]),rt=u({name:"Search",data(){return{searchSingle:null,searchMultiple:null}},mounted(){this.searchSingle=new i({select:this.$refs.searchSingle}),this.searchMultiple=new i({select:this.$refs.searchMultiple})},methods:{setSearch(){this.searchSingle.open(),this.searchSingle.search("value 2"),this.searchMultiple.open(),this.searchMultiple.search("value 2")}}}),ht={id:"search",class:"content"},pt=e("h2",{class:"header"},"search",-1),_t=e("p",null,"The search method will update the search input field and search the data against that value.",-1),vt={class:"row"},$t={ref:"searchSingle"},gt=e("option",{value:"value1"},"Value 1",-1),St=e("option",{value:"value2"},"Value 2",-1),mt=e("option",{value:"value3"},"Value 3",-1),ft=[gt,St,mt],bt={ref:"searchMultiple",multiple:""},Dt=e("option",{value:"value1"},"Value 1",-1),Vt=e("option",{value:"value2"},"Value 2",-1),yt=e("option",{value:"value3"},"Value 3",-1),wt=[Dt,Vt,yt],Mt=e("pre",null,[l("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+        select.search('value')
+      `),l(`
+    `)],-1);function Et(t,s,h,p,_,v){return o(),a("div",ht,[pt,_t,e("div",vt,[e("div",{class:"btn",onClick:s[0]||(s[0]=(...n)=>t.setSearch&&t.setSearch(...n))},"Set Search"),e("select",$t,ft,512),e("select",bt,wt,512)]),Mt])}const kt=r(rt,[["render",Et]]),Ot=u({name:"Destroy",data(){return{destroySingle:null,destroyMultiple:null}},mounted(){this.create()},methods:{create(){this.destroySingle=new i({select:this.$refs.destroySingle}),this.destroyMultiple=new i({select:this.$refs.destroyMultiple})},destroy(){this.destroySingle.destroy(),this.destroySingle=null,this.destroyMultiple.destroy(),this.destroyMultiple=null}}}),Ct={id:"destroy",class:"content"},Gt=e("h2",{class:"header"},"destroy",-1),Tt=e("p",null,"The destroy method will remove slim-select and display your original select.",-1),jt={class:"row"},Nt={ref:"destroySingle"},Bt=e("option",{value:"value1"},"Value 1",-1),Wt=e("option",{value:"value2"},"Value 2",-1),It=e("option",{value:"value3"},"Value 3",-1),At=[Bt,Wt,It],Jt={ref:"destroyMultiple",multiple:""},Pt=e("option",{value:"value1"},"Value 1",-1),Yt=e("option",{value:"value2"},"Value 2",-1),qt=e("option",{value:"value3"},"Value 3",-1),zt=[Pt,Yt,qt],Ft=e("pre",null,[l("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+        select.destroy()
+      `),l(`
+    `)],-1);function Ht(t,s,h,p,_,v){return o(),a("div",Ct,[Gt,Tt,e("div",jt,[t.destroySingle?(o(),a("div",{key:1,class:"btn",onClick:s[1]||(s[1]=(...n)=>t.destroy&&t.destroy(...n))},"Destroy")):(o(),a("div",{key:0,class:"btn",onClick:s[0]||(s[0]=(...n)=>t.create&&t.create(...n))},"Create")),e("select",Nt,At,512),e("select",Jt,zt,512)]),Ft])}const Kt=r(Ot,[["render",Ht]]),Lt=u({name:"Methods",components:{GetSelected:Q,SetSelected:pe,GetData:je,SetData:Ke,EnableDisable:ut,Search:kt,Destroy:Kt}}),Qt={id:"methods",class:"contents"};function Rt(t,s,h,p,_,v){const n=c("GetSelected"),S=c("SetSelected"),m=c("GetData"),f=c("SetData"),b=c("EnableDisable"),D=c("Search"),V=c("Destroy");return o(),a("div",Qt,[d(n),d(S),d(m),d(f),d(b),d(D),d(V)])}const Xt=r(Lt,[["render",Rt]]);export{Xt as default};

package/docs/assets/install.js

@@ -0,0 +1,34 @@
+import{e as N,d as $,_ as O,o as V,c as I,a as n,f as L,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=B(e),c=e.type||p;else return navigator.msSaveBlob?navigator.msSaveBlob(B(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 B(t){var r=t.split(/[:;,]/),h=r[1],E=r[2]=="base64"?atob:decodeURIComponent,C=E(r.pop()),T=C.length,v=0,D=new Uint8Array(T);for(v;v<T;++v)D[v]=C.charCodeAt(v);return new i([D],{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
+
+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="1.27.1",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.min.js",P="dist/slimselect.esm.js",Q="dist/slimselect.min.js",Y="dist/index.d.ts",Z="dist/index.d.ts",ee="dist/slimselect.min.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">
+          npm install slim-select
+        </code>
+      </pre><pre class="example-code">        <code class="language-javascript">
+          import SlimSelect from &#39;slim-select&#39;
+
+          new SlimSelect({
+            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("div",{class:"alert info"},"New releases may be delayed until the next time its indexed",-1),be={class:"install-code"},fe={class:"language-html"},he={id:"download",class:"content"},ve=n("h2",null,"Download",-1),ge=n("p",null,"Download the latest minified version of slim select",-1);function ye(d,y,w,g,j,_){return V(),I("div",ae,[re,n("div",de,[pe,me,ue,n("pre",be,[L("        "),n("code",fe,`
+          <html>
+            <head>
+              <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/`+R(d.version)+`/slimselect.min.js"><\/script>
+              <link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/`+R(d.version)+`/slimselect.min.css" rel="stylesheet"></link>
+              
+              <script>
+                new SlimSelect({
+                  select: '#selectElement'
+                })
+              <script>
+            </head>
+            <body>
+              <select id="selectElement">
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+              </select>
+            </body>
+          </html>
+        `,1),L(`
+      `)])]),n("div",he,[ve,ge,n("div",{class:"btn",onClick:y[0]||(y[0]=o=>d.downloadLink())},"Click Here To Download")])])}const je=O(ce,[["render",ye]]);export{je as default};