slim-select 2.1.0 → 2.2.1

package/docs/assets/index5.js

@@ -1,147 +0,0 @@
-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,34 +0,0 @@
-import{e as M,d as $,_ as I,o as O,c as V,a as o,f as B,t as E,b as L}from"./index.js";var R={exports:{}};(function(d,w){(function(y,v){d.exports=v()})(M,function(){return function y(v,j,k){var n=window,p="application/octet-stream",r=k||p,e=v,c=!j&&!k&&e,t=document.createElement("a"),_=function(s){return String(s)},i=n.Blob||n.MozBlob||n.WebKitBlob||_,m=j||"download",l,S;if(i=i.call?i.bind(n):Blob,String(this)==="true"&&(e=[e,r],r=e[0],e=e[1]),c&&c.length<2048&&(m=c.split("/").pop().split("?")[0],t.href=c,t.href.indexOf(c)!==-1)){var u=new XMLHttpRequest;return u.open("GET",c,!0),u.responseType="blob",u.onload=function(s){y(s.target.response,m,p)},setTimeout(function(){u.send()},0),u}if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(e))if(e.length>1024*1024*1.999&&i!==_)e=x(e),r=e.type||p;else return navigator.msSaveBlob?navigator.msSaveBlob(x(e),m):f(e);else if(/([\x80-\xff])/.test(e)){var b=0,C=new Uint8Array(e.length),N=C.length;for(b;b<N;++b)C[b]=e.charCodeAt(b);e=new i([C],{type:r})}l=e instanceof i?e:new i([e],{type:r});function x(s){var a=s.split(/[:;,]/),h=a[1],A=a[2]=="base64"?atob:decodeURIComponent,D=A(a.pop()),U=D.length,g=0,T=new Uint8Array(U);for(g;g<U;++g)T[g]=D.charCodeAt(g);return new i([T],{type:h})}function f(s,a){if("download"in t)return t.href=s,t.setAttribute("download",m),t.className="download-js-link",t.innerHTML="downloading...",t.style.display="none",document.body.appendChild(t),setTimeout(function(){t.click(),document.body.removeChild(t),a===!0&&setTimeout(function(){n.URL.revokeObjectURL(t.href)},250)},66),!0;if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent))return/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,p)),window.open(s)||confirm(`Displaying New Document
-
-Use Save As... to download, then click back to return to this page.`)&&(location.href=s),!0;var h=document.createElement("iframe");document.body.appendChild(h),!a&&/^data:/.test(s)&&(s="data:"+s.replace(/^data:([\w\/\-\+]+)/,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">
-          import SlimSelect from &#39;slim-select&#39;
-
-          new SlimSelect({
-            select: &#39;#selectElement&#39;
-          })
-        </code>
-      </pre></div>`,1),me={id:"cdn",class:"content"},ue=L('<h2>Cdn</h2><p> Cdn has a url link you can grab. Cdn exists on both <a target="_blank" href="https://cdnjs.com">cdnjs.com</a> and <a target="_blank" href="https://unpkg.com">unpkg.com</a></p><p> See full list of available options.<br><strong>cdnjs</strong> - <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a><br><strong>unpkg</strong> - <a target="_blank" href="https://unpkg.com/browse/slim-select/dist/">https://unpkg.com/browse/slim-select/dist/</a></p><ul><li>slimselct.js - UMD unminified</li><li>slimselct.min.js - UMD minified</li><li>slimselect.cjs.js - CommonJS (for Node) and ES module (for bundlers) build</li><li>slimselect.umd.js - UMD build for browsers</li><li>slimselect.es.js - ES module build for modern browsers</li><li>slimselect.global.js - IIFE build for modern browsers</li></ul><div class="alert info">New releases may be delayed until the next time its indexed</div>',5),be={class:"install-code"},fe={class:"language-html"},he={id:"download",class:"content"},ge=o("h2",null,"Download",-1),ve=o("p",null,"Download the latest minified umd version of slim select",-1),we=o("p",null,[B(" See full list of available downloadable options. "),o("a",{target:"_blank",href:"https://cdnjs.com/libraries/slim-select"},"cdnjs.com/libraries/slim-select")],-1);function ye(d,w,y,v,j,k){return O(),V("div",de,[pe,o("div",me,[ue,o("pre",be,[B("        "),o("code",fe,`
-          <html>
-            <head>
-              <script src="unpkg.com/slim-select@`+E(d.version)+`/dist/slimselect.min.js"><\/script>
-              <link href="unpkg.com/slim-select@`+E(d.version)+`/dist/slimselect.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),B(`
-      `)])]),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/assets/selects.js

@@ -1,55 +0,0 @@
-import{d as c,S as p,_ as v,o as a,c as s,a as e,F as n,r as i,f as l,t as r}from"./index.js";const b=c({name:"Selects",data(){return{states:[{abv:"AL",state:"Alabama"},{abv:"AK",state:"Alaska"},{abv:"AZ",state:"Arizona"},{abv:"AR",state:"Arkansas"},{abv:"CA",state:"California"},{abv:"CO",state:"Colorado"},{abv:"CT",state:"Connecticut"},{abv:"DE",state:"Delaware"},{abv:"FL",state:"Florida"},{abv:"GA",state:"Georgia"},{abv:"HI",state:"Hawaii"},{abv:"ID",state:"Idaho"},{abv:"IL",state:"Illinois"},{abv:"IN",state:"Indiana"},{abv:"IA",state:"Iowa"},{abv:"KS",state:"Kansas"},{abv:"KY",state:"Kentucky"},{abv:"LA",state:"Louisiana"},{abv:"ME",state:"Maine"},{abv:"MD",state:"Maryland"},{abv:"MA",state:"Massachusetts"},{abv:"MI",state:"Michigan"},{abv:"MN",state:"Minnesota"},{abv:"MS",state:"Mississippi"},{abv:"MO",state:"Missouri"},{abv:"MT",state:"Montana"},{abv:"NE",state:"Nebraska"},{abv:"NV",state:"Nevada"},{abv:"NH",state:"New Hampshire"},{abv:"NJ",state:"New Jersey"},{abv:"NM",state:"New Mexico"},{abv:"NY",state:"New York"},{abv:"NC",state:"North Carolina"},{abv:"ND",state:"North Dakota"},{abv:"OH",state:"Ohio"},{abv:"OK",state:"Oklahoma"},{abv:"OR",state:"Oregon"},{abv:"PA",state:"Pennsylvania"},{abv:"RI",state:"Rhode Island"},{abv:"SC",state:"South Carolina"},{abv:"SD",state:"South Dakota"},{abv:"TN",state:"Tennessee",selected:!0},{abv:"TX",state:"Texas"},{abv:"UT",state:"Utah"},{abv:"VT",state:"Vermont"},{abv:"VA",state:"Virginia"},{abv:"WA",state:"Washington"},{abv:"WV",state:"West Virginia"},{abv:"WI",state:"Wisconsin"},{abv:"WY",state:"Wyoming"}],foods:[{label:"Dairy",options:["Milk","Cheese","Butter","Ice Cream"]},{label:"Meat",options:["Beef","Ham","Pork","Sausage","Chicken","Turkey"]},{label:"Fruits",options:["Apple","Banana","Grape","Orange","Strawberry","Blueberry","Raspberry"]},{label:"Vegetables",options:["Carrot","Tomato","Broccoli","Celery","Corn","Pumpkin","Kale","Spinach"]}]}},mounted(){new p({select:this.$refs.single}),new p({select:this.$refs.singleOptgroup}),new p({select:this.$refs.multiple}),new p({select:this.$refs.multipleOptgroup}).setSelected(["Cheese","Apple","Corn"])}}),d={id:"selects",class:"contents"},h={id:"single",class:"content"},_=e("h2",{class:"header"},"Single",-1),g=e("p",null," Basic single select usage with Slim Select is extremely easy. Just set the select value to your select element. ",-1),m={class:"row"},V=e("h4",null,"Options",-1),y={ref:"single"},k=["value","selected"],M=e("h4",null,"Optgroups",-1),S={ref:"singleOptgroup"},N=["label"],O=["value"],f=e("pre",null,[l("        "),e("code",{class:"language-javascript"},`
-          new SlimSelect({
-            select: '#single'
-          })
-        `),l(`
-      `)],-1),C=e("pre",null,[l("        "),e("code",{class:"language-html"},`
-          <!-- Options -->
-          <select id="single">
-            <option value="value 1">Value 1</option>
-            <option value="value 2">Value 2</option>
-            <option value="value 3">Value 3</option>
-          </select>
-
-          <!-- Optgroups -->
-          <select id="single-optgroups">
-            <optgroup label="Label 1">
-              <option value="value 1">Value 1</option>
-              <option value="value 2">Value 2</option>
-              <option value="value 3">Value 3</option>
-            </optgroup>
-            <optgroup label="Label 2">
-              <option value="value 21">Value 1</option>
-              <option value="value 22">Value 2</option>
-              <option value="value 23">Value 3</option>
-            </optgroup>
-          </select>
-        `),l(`
-      `)],-1),w={id:"multiple",class:"content"},A=e("h2",{class:"header"},"Multiple",-1),I=e("p",null," Multi selects work just the same as a single select. The only difference is setting the multiple attribute on your select. ",-1),T={class:"row"},D=e("h4",null,"Options",-1),L={ref:"multiple",multiple:""},B=["value","selected"],W=e("h4",null,"Optgroups",-1),$={ref:"multipleOptgroup",multiple:""},K=["label"],H=["value"],F=e("pre",null,[l("        "),e("code",{class:"language-javascript"},`
-          new SlimSelect({
-            select: '#multiple'
-          })
-        `),l(`
-      `)],-1),G=e("pre",null,[l("        "),e("code",{class:"language-html"},`
-          <!-- Options -->
-          <select id="multiple" multiple>
-            <option value="value 1">Value 1</option>
-            <option value="value 2">Value 2</option>
-            <option value="value 3">Value 3</option>
-          </select>
-
-          <!-- Optgroups -->
-          <select id="multiple-optgroups" multiple>
-            <optgroup label="Label 1">
-              <option value="value 1">Value 1</option>
-              <option value="value 2">Value 2</option>
-              <option value="value 3">Value 3</option>
-            </optgroup>
-            <optgroup label="Label 2">
-              <option value="value 21">Value 1</option>
-              <option value="value 22">Value 2</option>
-              <option value="value 23">Value 3</option>
-            </optgroup>
-          </select>
-        `),l(`
-      `)],-1);function R(u,E,P,Y,j,x){return a(),s("div",d,[e("div",h,[_,g,e("div",m,[e("div",null,[V,e("select",y,[(a(!0),s(n,null,i(u.states,t=>(a(),s("option",{key:t.abv,value:t.abv,selected:t.selected},r(t.state),9,k))),128))],512)]),e("div",null,[M,e("select",S,[(a(!0),s(n,null,i(u.foods,t=>(a(),s("optgroup",{key:t.label,label:t.label},[(a(!0),s(n,null,i(t.options,o=>(a(),s("option",{key:o,value:o},r(o),9,O))),128))],8,N))),128))],512)])]),f,C]),e("div",w,[A,I,e("div",T,[e("div",null,[D,e("select",L,[(a(!0),s(n,null,i(u.states,t=>(a(),s("option",{value:t.abv,key:t.abv,selected:t.selected},r(t.state),9,B))),128))],512)]),e("div",null,[W,e("select",$,[(a(!0),s(n,null,i(u.foods,t=>(a(),s("optgroup",{key:t.label,label:t.label},[(a(!0),s(n,null,i(t.options,o=>(a(),s("option",{key:o,value:o},r(o),9,H))),128))],8,K))),128))],512)])]),F,G])])}const U=v(b,[["render",R]]);export{U as default};

package/docs/index.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <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
-      >
-    </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>

package/public/404.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <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
-      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
-      // ----------------------------------------------------------------------
-      // This script takes the current url and converts the path and query
-      // string into just a query string, and then redirects the browser
-      // to the new url with only a query string and hash fragment,
-      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
-      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
-      // Note: this 404.html file must be at least 512 bytes for it to work
-      // with Internet Explorer (it is currently > 512 bytes)
-      // If you're creating a Project Pages site and NOT using a custom domain,
-      // then set pathPrefix = true. This way the repo name will remain in the path:
-      // 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
-      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,
-      )
-    </script>
-  </head>
-  <body></body>
-</html>

package/public/CNAME

@@ -1 +0,0 @@
-slimselectjs.com

package/src/docs/app.vue

@@ -1,227 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../slim-select'
-import Settings from '../slim-select/settings'
-import { debounce } from '../slim-select/helpers'
-
-export default defineComponent({
-  name: 'App',
-  data() {
-    return {
-      nav: null as SlimSelect | null,
-      navDebounce: debounce(() => {
-        this.setDemensions()
-      }, 100),
-      year: new Date().getFullYear(),
-      width: 0,
-      height: 0,
-
-      navData: [
-        { text: 'Home', value: '/', class: 'label' },
-
-        // Install
-        { text: 'Install', value: 'install', class: 'label' },
-        { text: 'npm', value: 'install#npm', class: 'mar-l-l' },
-        { text: 'cdn', value: 'install#cdn', class: 'mar-l-l' },
-        { text: 'download', value: 'install#download', class: 'mar-l-l' },
-
-        // Select
-        { text: 'Selects', value: 'selects', class: 'label' },
-        { text: 'single', value: 'selects#single', class: 'mar-l-l' },
-        { text: 'multiple', value: 'selects#multiple', class: 'mar-l-l' },
-
-        // Data
-        { text: 'Data', value: 'data', class: 'label' },
-        { text: 'types', value: 'data#types', class: 'mar-l-l' },
-        { text: 'field', value: 'data#field', class: 'mar-l-l' },
-
-        // Settings
-        { text: 'Settings', value: 'settings', class: 'label' },
-        { text: 'select', value: 'settings#select', class: 'mar-l-l' },
-        { text: 'alwaysOpen', value: 'settings#alwaysOpen', class: 'mar-l-l' },
-        { text: 'contentLocation', value: 'settings#contentLocation', class: 'mar-l-l' },
-        { text: 'contentPosition', value: 'settings#contentPosition', class: 'mar-l-l' },
-        { text: 'openPosition', value: 'settings#openPosition', class: 'mar-l-l' },
-        { text: 'placeholder', value: 'settings#placeholder', class: 'mar-l-l' },
-        { text: 'allowDeselect', value: 'settings#allowDeselect', class: 'mar-l-l' },
-        { text: 'display', value: 'settings#display', class: 'mar-l-l' },
-        { text: 'mandatory', value: 'settings#mandatory', class: 'mar-l-l' },
-        { text: 'minmax', value: 'settings#minmax', class: 'mar-l-l' },
-        { text: 'dataAttributes', value: 'settings#dataAttributes', class: 'mar-l-l' },
-        { text: 'cssClass', value: 'settings#cssClass', class: 'mar-l-l' },
-        { text: 'inlineStyles', value: 'settings#inlineStyles', class: 'mar-l-l' },
-        { text: 'html', value: 'settings#html', class: 'mar-l-l' },
-        { text: 'search', value: 'settings#search', class: 'mar-l-l' },
-        { text: 'closeOnSelect', value: 'settings#closeOnSelect', class: 'mar-l-l' },
-        { text: 'showOptionTooltips', value: 'settings#showOptionTooltips', class: 'mar-l-l' },
-        { text: 'selectByGroup', value: 'settings#selectByGroup', class: 'mar-l-l' },
-        { text: 'hideSelected', value: 'settings#hideSelected', class: 'mar-l-l' },
-
-        // Events
-        { text: 'Events', value: 'events', class: 'label' },
-        { text: 'error', value: 'events#error', class: 'mar-l-l' },
-        { text: 'beforeChange', value: 'events#beforeChange', class: 'mar-l-l' },
-        { text: 'afterChange', value: 'events#afterChange', class: 'mar-l-l' },
-        { text: 'open', value: 'events#open', class: 'mar-l-l' },
-        { text: 'search', value: 'events#search', class: 'mar-l-l' },
-        { text: 'searchFilter', value: 'events#searchFilter', class: 'mar-l-l' },
-        { text: 'addable', value: 'events#addable', class: 'mar-l-l' },
-
-        // Methods
-        { text: 'Methods', value: 'methods', class: 'label' },
-        { text: 'getSelected', value: 'methods#getSelected', class: 'mar-l-l' },
-        { text: 'setSelected', value: 'methods#setSelected', class: 'mar-l-l' },
-        { text: 'getData', value: 'methods#getData', class: 'mar-l-l' },
-        { text: 'setData', value: 'methods#setData', class: 'mar-l-l' },
-        { 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' },
-      ],
-    }
-  },
-  mounted() {
-    this.runNav()
-
-    this.$router.isReady().then(() => {
-      if (this.nav) {
-        this.nav.setSelected(this.$router.currentRoute.value.fullPath.replace('/', ''))
-      }
-    })
-
-    this.$router.afterEach(() => {
-      if (this.$route.query.p) {
-        // Delay router push to allow for
-        // other things to happen first
-        setTimeout(() => {
-          if (this.$route.query.p) {
-            this.$router.push({ path: this.$route.query.p.toString(), hash: this.$route.hash })
-          }
-        }, 200)
-
-        return
-      }
-
-      // After route change get the hash and scroll to element in main
-      setTimeout(() => {
-        const hash = this.$route.hash
-        if (hash === '') {
-          window.scroll({
-            top: 0,
-            behavior: 'smooth',
-          })
-        }
-
-        // If hash is not empty scroll to element
-        if (hash) {
-          const el = document.querySelector(hash) as HTMLElement
-          if (el) {
-            // get header height
-            const header = document.querySelector('header') as HTMLElement
-            const nav = document.querySelector('nav') as HTMLElement
-            const headerHeight = header ? header.clientHeight + (window.innerWidth < 700 ? nav.clientHeight : 0) + 8 : 0
-
-            window.scroll({
-              top: el.offsetTop - headerHeight, // header height + padding
-              behavior: 'smooth',
-            })
-          }
-        }
-      }, 200)
-    })
-
-    this.setDemensions()
-    window.addEventListener('resize', this.navDebounce)
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.navDebounce)
-
-    this.nav?.destroy()
-  },
-  watch: {
-    width() {
-      this.runNav()
-    },
-  },
-  methods: {
-    setDemensions(): void {
-      this.width = document.documentElement.clientWidth
-      this.height = document.documentElement.clientHeight
-    },
-    runNav() {
-      if (this.nav) {
-        this.nav.destroy()
-        this.nav = null
-      }
-
-      let settings = {
-        searchHighlight: true,
-        openContent: 'below',
-      } as Partial<Settings>
-
-      if (this.width > 700) {
-        settings.alwaysOpen = true
-        settings.contentPosition = 'relative'
-        settings.contentLocation = this.$refs.navContent as HTMLDivElement
-      }
-
-      this.nav = new SlimSelect({
-        select: this.$refs.nav as HTMLSelectElement,
-        data: this.navData,
-        settings: settings,
-        events: {
-          afterChange: (newVal) => {
-            const value = newVal[0].value
-            const split = value.split('#')
-            const val = split[0]
-            const hash = split[1] ? '#' + split[1] : undefined
-            this.$router.push({ path: val, hash: hash })
-          },
-        },
-      })
-    },
-  },
-})
-</script>
-
-<template>
-  <header>
-    <div class="top">
-      <div class="text">
-        <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="./assets/images/github.png" />
-        </a>
-        <a href="https://www.npmjs.com/package/slim-select" target="_blank">
-          <img src="./assets/images/npm.png" />
-        </a>
-      </div>
-    </div>
-    <div class="bar">
-      <div class="tagline">Advanced select dropdown</div>
-      <div class="drop">
-        <svg viewBox="0 0 100 100">
-          <path d="M10,30 L50,70 L90,30" />
-        </svg>
-      </div>
-    </div>
-  </header>
-  <nav>
-    <select ref="nav"></select>
-    <div class="nav-content" ref="navContent"></div>
-  </nav>
-  <main>
-    <router-view />
-    <footer>
-      © {{ year }} <a href="http://webiswhatido.com" style="color: #ffffff" target="_blank">Brian Voelker</a>.
-      <br />
-      Slim Select is under the MIT license.
-    </footer>
-  </main>
-</template>

package/src/docs/assets/images/check-mark.svg

@@ -1,6 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" style="enable-background:new 0 0 45.701 45.7;" xml:space="preserve">
-	<path fill="#5897fb" d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504
-		c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0
-		c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/>
-</svg>

package/src/docs/assets/images/chrome.svg

@@ -1,22 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
-<path style="fill:#E16B5A;" d="M255.333,0.048c0,0,150.936-6.78,230.932,144.636c-42.26,0-243.764,0-243.764,0
-	s-46.036-1.512-85.28,54.244c-11.32,23.352-23.392,47.46-9.808,94.916C127.793,260.704,43.265,113.8,43.265,113.8
-	S102.889,6.072,255.333,0.048z"/>
-<path style="fill:#CC6152;" d="M255.333,0.048c-2.604,0.104-5.116,0.308-7.668,0.468c40.752,2.968,150.852,22.468,215.148,144.168
-	c9.928,0,18.016,0,23.444,0C406.265-6.736,255.333,0.048,255.333,0.048z"/>
-<path style="fill:#FFD464;" d="M478.409,384.488c0,0-69.6,133.852-240.968,127.268c21.14-36.524,121.912-210.704,121.912-210.704
-	s24.328-39.044-4.4-100.844c-14.604-21.464-58.844-43.96-106.812-55.952c38.576-0.384,237.644,0.024,237.644,0.024
-	S549.417,249.7,478.409,384.488z"/>
-<path style="fill:#F2C95F;" d="M485.781,144.284c0,0-101.54-0.208-173.636-0.184c69.164,0.016,152.012,0.184,152.012,0.184
-	s63.636,105.416-7.372,240.204c0,0-63.776,122.416-219.348,127.268l0,0c171.368,6.584,240.972-127.268,240.972-127.268
-	C549.417,249.7,485.781,144.284,485.781,144.284z"/>
-<path style="fill:#74B340;" d="M33.333,385.504c0,0-81.324-127.104,10.08-271.952c21.124,36.54,121.84,210.752,121.84,210.752
-	s21.696,40.552,89.684,46.616c25.916-1.888,52.876-3.492,87.264-38.952c-18.96,33.532-104.172,180.028-104.172,180.028
-	S114.757,514.292,33.333,385.504z"/>
-<circle style="fill:#FFFFFF;" cx="254.721" cy="258.08" r="116"/>
-<circle style="fill:#2995CC;" cx="254.681" cy="258.08" r="92"/>
-<path style="fill:#268CBF;" d="M254.705,166.1c-1.832,0-3.644,0.068-5.444,0.172c48.272,2.82,86.552,42.848,86.552,91.824
-	c0,48.984-38.28,89.016-86.552,91.836c1.804,0.1,3.616,0.172,5.444,0.172c50.804,0,92-41.196,92-92.008
-	C346.705,207.292,305.509,166.1,254.705,166.1z"/>
-</svg>