slim-select 2.0.1 → 2.0.2

package/docs/assets/index5.js

@@ -0,0 +1,11 @@
+import{d as n,S as f,_ as o,o as c,c as i,l as h,g as m,a as e,h as u,w as $,f as p}from"./index.js";const S=n({name:"SlimSelect",props:{settings:{type:Object}},data(){return{slim:null}},mounted(){let t={select:this.$refs.slim};this.settings&&(t.settings=this.settings),this.slim=new f(t)},beforeUnmount(){this.slim&&this.slim.destroy()}}),v={ref:"slim"};function g(t,r,a,l,_,d){return c(),i("select",v,[h(t.$slots,"default")],512)}const V=o(S,[["render",g]]),x=n({name:"Vue",components:{SlimSelect:V}}),w={id:"error",class:"content"},O=e("h2",{class:"header"},"Vue",-1),k={class:"row"},B=e("option",{value:"1"},"Option 1",-1),C=e("option",{value:"2"},"Option 2",-1),E=e("option",{value:"3"},"Option 3",-1),N=e("pre",null,[p("      "),e("code",{class:"language-javascript"},`
+        var select = new SlimSelect({
+          select: '#selectElement',
+          events: {
+            error: function(err) {
+              console.error(err)
+            }
+          }
+        })
+      `),p(`
+    `)],-1);function b(t,r,a,l,_,d){const s=m("SlimSelect");return c(),i("div",w,[O,e("div",k,[u(s,null,{default:$(()=>[B,C,E]),_:1})]),N])}const j=o(x,[["render",b]]),y=n({name:"Events",components:{Vue:j}}),T={id:"frameworks",class:"contents"};function U(t,r,a,l,_,d){const s=m("Vue");return c(),i("div",T,[u(s)])}const z=o(y,[["render",U]]);export{z as default};

package/docs/assets/install.js

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

package/docs/index.html

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

package/index.html

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

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/brianvoe/slim-select/issues"
   },
-  "main": "dist/slimselect.js",
+  "main": "dist/slimselect.cjs.js",
+  "browser": "dist/slimselect.umd.js",
   "module": "dist/slimselect.es.js",
-  "unpkg": "dist/slimselect.js",
+  "unpkg": "dist/slimselect.umd.min.js",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
   "style": "dist/slimselect.css",
@@ -27,7 +28,6 @@
     "multiselect"
   ],
   "scripts": {
-    "jestinit": "ts-jest config:init",
     "dev": "vite --port=1111",
     "format": "prettier --write --cache --parser typescript \"src/**/*.ts\"",
     "build": "npm run build:clean && npm run build:docs && npm run build:library",
@@ -40,6 +40,10 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
     "@rollup/plugin-typescript": "^9.0.2",
     "@types/downloadjs": "^1.4.3",
     "@vitejs/plugin-vue": "^3.2.0",
@@ -51,7 +55,6 @@
     "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",

package/public/404.html

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

package/src/docs/app.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import SlimSelect, { debounce, Settings } from '../slim-select'
+import SlimSelect from '../slim-select'
+import Settings from '../slim-select/settings'
+import { debounce } from '../slim-select/helpers'
 
 export default defineComponent({
   name: 'App',
@@ -75,6 +77,10 @@ export default defineComponent({
         { text: 'enableDisable', value: 'methods#enableDisable', class: 'mar-l-l' },
         { text: 'search', value: 'methods#search', class: 'mar-l-l' },
         { text: 'destroy', value: 'methods#destroy', class: 'mar-l-l' },
+
+        // Frameworks
+        // { text: 'Frameworks', value: 'frameworks', class: 'label' },
+        // { text: 'vue', value: 'frameworks#vue', class: 'mar-l-l' },
       ],
     }
   },
@@ -186,7 +192,7 @@ export default defineComponent({
   <header>
     <div class="top">
       <div class="text">
-        <h1 class="logo">Slim Select</h1>
+        <h1 class="logo">Slim Select <small>2.0</small></h1>
       </div>
       <div class="socials">
         <a href="https://github.com/brianvoe/slim-select" target="_blank">

package/src/docs/assets/scss/_variables.scss

@@ -10,7 +10,7 @@
   --color-alert-info-border: #b6d4fe;
 
   // Sizes
-  --width-max: 1200px;
+  --width-max: 1000px;
   --height-header: 90px;
   --width-nav: 200px;
   --height-nav: 30px;

package/src/docs/pages/frameworks/index.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import Vue from './vue.vue'
+
+export default defineComponent({
+  name: 'Events',
+  components: {
+    Vue,
+  },
+})
+</script>
+
+<template>
+  <div id="frameworks" class="contents">
+    <Vue />
+  </div>
+</template>

package/src/docs/pages/frameworks/vue.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../vue/slimselect.vue'
+
+export default defineComponent({
+  name: 'Vue',
+  components: {
+    SlimSelect,
+  },
+})
+</script>
+
+<template>
+  <div id="error" class="content">
+    <h2 class="header">Vue</h2>
+
+    <div class="row">
+      <SlimSelect>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </SlimSelect>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        var select = new SlimSelect({
+          select: '#selectElement',
+          events: {
+            error: function(err) {
+              console.error(err)
+            }
+          }
+        })
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/home.vue

@@ -142,7 +142,7 @@ export default defineComponent({
   <div id="home" class="content">
     <div class="samples row">
       <div class="single">
-        <h2>Single Select 2</h2>
+        <h2>Single Select</h2>
         <select ref="slimSingle">
           <option data-placeholder="true"></option>
           <option value="best">Best</option>

package/src/docs/pages/install.vue

@@ -43,19 +43,36 @@ export default defineComponent({
 
     <div id="cdn" class="content">
       <h2>Cdn</h2>
-      <p>Cdn has a url link you can grab.</p>
       <p>
-        See full list of available options.
-        <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a>
+        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>
 
       <pre class="install-code">
         <code class="language-html">
           &lt;html&gt;
             &lt;head&gt;
-              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/{{version}}/slimselect.js"&gt;&lt;/script&gt;
-              &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/{{version}}/slimselect.css" rel="stylesheet"&gt;&lt;/link&gt;
+              &lt;script src="unpkg.com/slim-select@{{version}}/dist/slimselect.min.js"&gt;&lt;/script&gt;
+              &lt;link href="unpkg.com/slim-select@{{version}}/dist/slimselect.css" rel="stylesheet"&gt;&lt;/link&gt;
               
               &lt;script&gt;
                 new SlimSelect({
@@ -77,7 +94,11 @@ export default defineComponent({
 
     <div id="download" class="content">
       <h2>Download</h2>
-      <p>Download the latest minified version of slim select</p>
+      <p>Download the latest minified umd version of slim select</p>
+      <p>
+        See full list of available downloadable options.
+        <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a>
+      </p>
       <div class="btn" @click="downloadLink()">Click Here To Download</div>
     </div>
   </div>

package/src/docs/router.ts

@@ -39,6 +39,11 @@ const router = createRouter({
       name: 'Methods',
       component: () => import('./pages/methods/index.vue'),
     },
+    {
+      path: '/frameworks',
+      name: 'Frameworks',
+      component: () => import('./pages/frameworks/index.vue'),
+    },
   ],
 })
 

package/src/slim-select/index.ts

@@ -1,19 +1,9 @@
-import { debounce, hasClassInTree } from './helper'
+import { debounce, hasClassInTree } from './helpers'
 import Render from './render'
 import Select from './select'
 import Settings, { SettingsPartial } from './settings'
 import Store, { DataArray, DataArrayPartial, Option, OptionOptional } from './store'
 
-// Export everything except the "export default"
-export * from './helper'
-export * from './settings'
-export * from './select'
-export * from './store'
-export * from './render'
-
-// Export all "export defaults"
-export { Settings, Select, Store, Render }
-
 export interface Config {
   select: string | Element
   data?: DataArrayPartial

package/src/slim-select/render.ts

@@ -1,4 +1,4 @@
-import { debounce } from './helper'
+import { debounce } from './helpers'
 import Settings from './settings'
 import Store, { DataArray, Optgroup, Option, OptionOptional } from './store'
 

package/src/slim-select/rollup.config.mjs

@@ -1,40 +1,122 @@
 import typescript from '@rollup/plugin-typescript'
-import { terser } from 'rollup-plugin-terser'
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
 
-export default {
-  input: './index.ts',
-  output: [
-    // Default umd
-    {
-      name: 'SlimSelect',
-      file: '../../dist/slimselect.js',
-      format: 'umd',
-      sourcemap: true,
+export default [
+  // CommonJS (for Node) and ES module (for bundlers) build
+  {
+    input: './index.ts',
+    output: {
+      file: '../../dist/slimselect.cjs.js',
+      format: 'cjs',
+      exports: 'default',
     },
-    {
-      name: 'SlimSelect',
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+        babelrc: false,
+        presets: [
+          [
+            '@babel/env',
+            {
+              modules: false,
+              useBuiltIns: 'usage',
+              targets: 'maintained node versions',
+            },
+          ],
+        ],
+      }),
+    ],
+  },
+
+  // UMD build for browsers
+  {
+    input: './index.ts',
+    output: [
+      {
+        name: 'SlimSelect',
+        file: '../../dist/slimselect.js',
+        format: 'umd',
+      },
+      {
+        name: 'SlimSelect',
+        file: '../../dist/slimselect.umd.js',
+        format: 'umd',
+      },
+    ],
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+      }),
+    ],
+  },
+
+  // UMD build for browsers minified with terser
+  {
+    input: './index.ts',
+    output: [
+      {
+        name: 'SlimSelect',
+        file: '../../dist/slimselect.min.js',
+        format: 'umd',
+      },
+      {
+        name: 'SlimSelect',
+        file: '../../dist/slimselect.umd.min.js',
+        format: 'umd',
+      },
+    ],
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+      }),
+      terser(),
+    ],
+  },
+
+  // ES module build for modern browsers
+  {
+    input: './index.ts',
+    output: {
       file: '../../dist/slimselect.es.js',
       format: 'es',
-      sourcemap: true,
     },
-    {
-      name: 'SlimSelect',
-      file: '../../dist/slimselect.cjs.js',
-      format: 'cjs',
-      sourcemap: true,
-    },
-    {
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+      }),
+    ],
+  },
+
+  // IIFE build for modern browsers
+  {
+    input: './index.ts',
+    output: {
       name: 'SlimSelect',
       file: '../../dist/slimselect.global.js',
       format: 'iife',
-      sourcemap: true,
-    },
-    {
-      name: 'SlimSelect',
-      file: '../../dist/slimselect.umd.js',
-      format: 'umd',
-      sourcemap: true,
     },
-  ],
-  plugins: [typescript(), terser()],
-}
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+      }),
+    ],
+  },
+]

package/src/slim-select/select.ts

@@ -1,4 +1,4 @@
-import { generateID, kebabCase } from './helper'
+import { generateID, kebabCase } from './helpers'
 import { DataArray, DataObject, Optgroup, Option } from './store'
 
 export default class Select {

package/src/slim-select/settings.ts

@@ -1,4 +1,4 @@
-import { generateID } from './helper'
+import { generateID } from './helpers'
 
 export type SettingsPartial = Partial<Settings>
 

package/src/slim-select/slimselect.scss

@@ -150,12 +150,16 @@
       .ss-value-delete {
         display: flex;
         align-items: center;
+        height: var(--ss-spacing-l);
         width: var(--ss-spacing-l);
         padding: var(--ss-spacing-s) var(--ss-spacing-m);
         cursor: pointer;
         border-left: solid 1px var(--ss-bg-color);
 
         svg {
+          height: var(--ss-spacing-l);
+          width: var(--ss-spacing-l);
+
           path {
             fill: none;
             stroke: var(--ss-bg-color);
@@ -178,6 +182,9 @@
     margin: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m);
 
     svg {
+      width: 8px;
+      height: 8px;
+
       path {
         fill: none;
         stroke: var(--ss-font-color);