slim-select 1.27.1 → 2.0.0

package/src/docs/pages/home.vue

@@ -1,53 +1,81 @@
 <script lang="ts">
-import Vue from 'vue'
-import SlimSelect from '@/slim-select'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+import SlimSelect from '../../slim-select'
+
+export default defineComponent({
+  name: 'Home',
   mounted() {
-    new SlimSelect({
-      select: '#slim-single-select'
+    const single = new SlimSelect({
+      select: this.$refs.slimSingle as HTMLSelectElement,
     })
-    new SlimSelect({
-      select: '#slim-multi-select'
+    const multiple = new SlimSelect({
+      select: this.$refs.slimMulti as HTMLSelectElement,
     })
-  }
+
+    setTimeout(() => {
+      single.open()
+      setTimeout(() => {
+        single.setSelected('best')
+      }, 500)
+      setTimeout(() => {
+        single.setSelected('select')
+      }, 1000)
+      setTimeout(() => {
+        single.setSelected('ever')
+      }, 1500)
+      setTimeout(() => {
+        single.close()
+      }, 2000)
+
+      multiple.open()
+      setTimeout(() => {
+        multiple.setSelected(['best'])
+      }, 500)
+      setTimeout(() => {
+        multiple.setSelected(['best', 'select'])
+      }, 1000)
+      setTimeout(() => {
+        multiple.setSelected(['best', 'select', 'ever'])
+      }, 1500)
+      setTimeout(() => {
+        multiple.close()
+      }, 2000)
+    }, 500)
+  },
 })
 </script>
 
 <style lang="scss">
-  #home-content {
-    .samples {
-      display: flex;
-      justify-content: space-between;
+#home {
+  .samples {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--spacing);
+
+    .single {
+      flex: 1 1 50%;
+    }
+    .multi {
+      flex: 1 1 50%;
+    }
+  }
 
-      @media screen and (max-width: 600px) {
-        flex-direction: column;
-      }
-      .single {
-        flex: 1 1 50%;
-        padding: 0 10px 0 0;
+  .callouts {
+    display: flex;
+    padding: 20px 0 0 0;
 
-        @media screen and (max-width: 600px) {
-          padding: 0 0 10px 0;
-        }
-      }
-      .multi {
-        flex: 1 1 50%;
-        padding: 0 0 0 10px;
+    .features {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
 
-        @media screen and (max-width: 600px) {
-          padding: 0 0 0 0;
-        }
+      .header {
+        padding: 0 0 var(--spacing) 0;
       }
-    }
-
-    .callouts {
-      padding: 20px 0 0 0;
-      display: flex;
-      justify-content: space-around;
 
-      .features {
-        flex: 0 1 50%;
+      .row {
+        justify-content: space-around;
 
         .list {
           display: flex;
@@ -62,7 +90,7 @@ export default Vue.extend({
             align-items: center;
             padding: 0 0 5px 0;
             font-weight: bold;
-            font-size: 16px;
+            font-size: 20px;
 
             img {
               width: 20px;
@@ -71,56 +99,28 @@ export default Vue.extend({
           }
         }
       }
-
-      .browsers {
-        flex: 0 1 50%;
-
-        .list {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          justify-content: center;
-
-          .browser {
-            display: flex;
-            flex-direction: column;
-            width: 80px;
-            padding: 0 16px 0 16px;
-
-            img {
-              height: 80px;
-              width: 80px;
-              margin: 0 auto;
-              padding: 0 0 8px 0;
-            }
-            .version {
-              text-align: center;
-              font-size: 22px;
-              font-weight: bold;
-            }
-          }
-        }
-      }
     }
   }
+}
 </style>
 
 <template>
-  <div id="home-content" class="content">
-    <div class="samples">
+  <div id="home" class="content">
+    <div class="samples row">
       <div class="single">
         <h2>Single Select</h2>
-        <select id="slim-single-select">
+        <select ref="slimSingle">
+          <option data-placeholder="true"></option>
           <option value="best">Best</option>
-          <option value="select" selected="true">Select</option>
+          <option value="select">Select</option>
           <option value="ever">Ever</option>
         </select>
       </div>
       <div class="multi">
         <h2>Multi Select</h2>
-        <select id="slim-multi-select" multiple>
+        <select ref="slimMulti" multiple>
           <option value="best">Best</option>
-          <option value="select" selected="true">Select</option>
+          <option value="select">Select</option>
           <option value="ever">Ever</option>
         </select>
       </div>
@@ -129,52 +129,32 @@ export default Vue.extend({
     <div class="callouts">
       <div class="features">
         <div class="header"><h2>Features</h2></div>
-        <ul class="list">
-          <li><img src="images/check-mark.svg" /> No Dependencies</li>
-          <li><img src="images/check-mark.svg" /> 20kb - 5kb gzip</li>
-          <li><img src="images/check-mark.svg" /> Single Select</li>
-          <li><img src="images/check-mark.svg" /> Multiple Select</li>
-          <li><img src="images/check-mark.svg" /> Addable Options</li>
-          <li><img src="images/check-mark.svg" /> Html Options</li>
-          <li><img src="images/check-mark.svg" /> Settable Data</li>
-          <li><img src="images/check-mark.svg" /> Callback Events</li>
-          <li><img src="images/check-mark.svg" /> Placeholders</li>
-          <li><img src="images/check-mark.svg" /> Search</li>
-          <li><img src="images/check-mark.svg" /> Disable Options</li>
-          <li><img src="images/check-mark.svg" /> Light Css</li>
-          <li><img src="images/check-mark.svg" /> Light Color Scheme</li>
-          <li><img src="images/check-mark.svg" /> Style Inheritance</li>
-          <li><img src="images/check-mark.svg" /> Clean Animations</li>
-          <li><img src="images/check-mark.svg" /> Performant</li>
-        </ul>
-      </div>
 
-      <div class="browsers">
-        <div class="header"><h2>Support</h2></div>
-        <div class="list">
-          <div class="browser">
-            <img src="images/ie.svg" />
-            <div class="version">11+</div>
-          </div>
-          <div class="browser">
-            <img src="images/chrome.svg" />
-            <div class="version">30+</div>
-          </div>
-          <div class="browser">
-            <img src="images/firefox.svg" />
-            <div class="version">25+</div>
-          </div>
-          <div class="browser">
-            <img src="images/opera.svg" />
-            <div class="version">25+</div>
-          </div>
-          <div class="browser">
-            <img src="images/safari.svg" />
-            <div class="version">9+</div>
-          </div>
+        <div class="row">
+          <ul class="list">
+            <li><img src="../images/check-mark.svg" /> No Dependencies</li>
+            <li><img src="../images/check-mark.svg" /> ~30kb - ~5kb gzip</li>
+            <li><img src="../images/check-mark.svg" /> Single Select</li>
+            <li><img src="../images/check-mark.svg" /> Multiple Select</li>
+            <li><img src="../images/check-mark.svg" /> Addable Options</li>
+            <li><img src="../images/check-mark.svg" /> Html Options</li>
+            <li><img src="../images/check-mark.svg" /> Settable Data</li>
+            <li><img src="../images/check-mark.svg" /> Callback Events</li>
+            <li><img src="../images/check-mark.svg" /> Placeholders</li>
+          </ul>
+          <ul class="list">
+            <li><img src="../images/check-mark.svg" /> Advanced Search</li>
+            <li><img src="../images/check-mark.svg" /> Tabbable</li>
+            <li><img src="../images/check-mark.svg" /> Disable Options</li>
+            <li><img src="../images/check-mark.svg" /> Light Css</li>
+            <li><img src="../images/check-mark.svg" /> Light Color Scheme</li>
+            <li><img src="../images/check-mark.svg" /> Style Inheritance</li>
+            <li><img src="../images/check-mark.svg" /> Clean Animations</li>
+            <li><img src="../images/check-mark.svg" /> Performant</li>
+            <li><img src="../images/check-mark.svg" /> Typescript</li>
+          </ul>
         </div>
       </div>
     </div>
-
   </div>
 </template>

package/src/docs/pages/install.vue

@@ -1,68 +1,29 @@
-<script>
-  import SlimSelect from '@/slim-select'
-  import packageJson from '../../../package.json'
+<script lang="ts">
+import download from 'downloadjs'
+import { defineComponent } from 'vue'
+import packageJson from '../../../package.json'
 
-  export default {
-    data: () => {
-      return {
-        version: packageJson.version
-      }
-    },
-    methods: {
-      download() {
-        function A(blob) {
-          const a = document.createElement('a')
-          document.body.appendChild(a)
-          a.style = 'display: none'
-
-          const url = window.URL.createObjectURL(blob)
-          a.href = url
-          a.download = 'slimselect.js'
-          a.click()
-          window.URL.revokeObjectURL(url)
-        }
-
-        const xhr = new XMLHttpRequest()
-        xhr.open('GET', `https://cdnjs.cloudflare.com/ajax/libs/slim-select/${this.version}/slimselect.min.js`)
-        xhr.responseType = 'blob'
-        xhr.onload = () => { A(this.response, 'filename') }
-        xhr.send()
-      }
+export default defineComponent({
+  name: 'Install',
+  data: () => {
+    return {
+      version: packageJson.version,
     }
-  }
+  },
+  methods: {
+    downloadLink() {
+      download(`https://cdnjs.cloudflare.com/ajax/libs/slim-select/${this.version}/slimselect.min.js`)
+    },
+  },
+})
 </script>
 
-<style lang="scss">
-  #install-content {
-    .npm-content {
-      padding: 0 0 30px 0;
-
-      .install-code {
-        max-width: 200px;
-        margin-left: auto;
-        margin-right: auto;
-      }
-      .example-code {
-        max-width: 310px;
-        margin: 0 auto;
-      }
-    }
-
-    .cdn-content {
-      .example-code {
-        max-width: 220px;
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-  }
-</style>
-
 <template>
-  <div id="install-content" class="content">
-
-    <div class="npm-content">
+  <div id="install" class="contents">
+    <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
@@ -74,34 +35,46 @@
           import SlimSelect from 'slim-select'
 
           new SlimSelect({
-            select: '#slim-select'
+            select: '#selectElement'
           })
         </code>
       </pre>
     </div>
 
-    <div class="cdn-content">
+    <div id="cdn" class="content">
       <h2>Cdn</h2>
+      <p>Cdn has a url link you can grab.</p>
+      <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;script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/{{version}}/slimselect.min.js"&gt;&lt;/script&gt;
-          &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/{{version}}/slimselect.min.css" rel="stylesheet"&gt;&lt;/link&gt;
-        </code>
-      </pre>
-
-      <pre class="example-code">
-        <code class="language-javascript">
-          new SlimSelect({
-            select: '#slim-select'
-          })
+          &lt;html&gt;
+            &lt;head&gt;
+              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/{{version}}/slimselect.min.js"&gt;&lt;/script&gt;
+              &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/{{version}}/slimselect.min.css" rel="stylesheet"&gt;&lt;/link&gt;
+              
+              &lt;script&gt;
+                new SlimSelect({
+                  select: '#selectElement'
+                })
+              &lt;script&gt;
+            &lt;/head&gt;
+            &lt;body&gt;
+              &lt;select id="selectElement"&gt;
+                &lt;option&gt;Option 1&lt;/option&gt;
+                &lt;option&gt;Option 2&lt;/option&gt;
+                &lt;option&gt;Option 3&lt;/option&gt;
+              &lt;/select&gt;
+            &lt;/body&gt;
+          &lt;/html&gt;
         </code>
       </pre>
     </div>
 
-    <div class="download-content">
+    <div id="download" class="content">
       <h2>Download</h2>
-      <div class="btn" @click="download">Click Here To Download</div>
+      <p>Download the latest minified version of slim select</p>
+      <div class="btn" @click="downloadLink()">Click Here To Download</div>
     </div>
-
   </div>
 </template>

package/src/docs/pages/methods/destroy.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'Destroy',
+  data() {
+    return {
+      destroySingle: null as SlimSelect | null,
+      destroyMultiple: null as SlimSelect | null,
+    }
+  },
+  mounted() {
+    this.create()
+  },
+  methods: {
+    create() {
+      this.destroySingle = new SlimSelect({
+        select: this.$refs.destroySingle as HTMLSelectElement,
+      })
+
+      this.destroyMultiple = new SlimSelect({
+        select: this.$refs.destroyMultiple as HTMLSelectElement,
+      })
+    },
+    destroy() {
+      this.destroySingle!.destroy()
+      this.destroySingle = null
+      this.destroyMultiple!.destroy()
+      this.destroyMultiple = null
+    },
+  },
+})
+</script>
+
+<template>
+  <div id="destroy" class="content">
+    <h2 class="header">destroy</h2>
+    <p>The destroy method will remove slim-select and display your original select.</p>
+
+    <div class="row">
+      <div class="btn" @click="create" v-if="!destroySingle">Create</div>
+      <div class="btn" @click="destroy" v-else>Destroy</div>
+      <select ref="destroySingle">
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+      </select>
+      <select ref="destroyMultiple" multiple>
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+      </select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+        select.destroy()
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/methods/enable_disable.vue

@@ -0,0 +1,70 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'EnableDisable',
+  data() {
+    return {
+      setEnableSingle: null as SlimSelect | null,
+      setEnableMultiple: null as SlimSelect | null,
+    }
+  },
+  mounted() {
+    this.setEnableSingle = new SlimSelect({
+      select: this.$refs.setEnableSingle as HTMLSelectElement,
+    })
+    this.setEnableMultiple = new SlimSelect({
+      select: this.$refs.setEnableMultiple as HTMLSelectElement,
+    })
+  },
+  methods: {
+    setEnable() {
+      this.setEnableSingle!.enable()
+      this.setEnableMultiple!.enable()
+    },
+    setDisable() {
+      this.setEnableSingle!.disable()
+      this.setEnableMultiple!.disable()
+    },
+  },
+})
+</script>
+
+<template>
+  <div id="enableDisable" class="content">
+    <h2 class="header">enable / disable</h2>
+    <p>
+      These methods will enable or disable the select dropdown.
+      <br />
+      You may also set disabled on your original select and slim-select will pick that up.
+    </p>
+
+    <div class="row">
+      <div class="btn" @click="setEnable" v-if="setEnableSingle && !setEnableSingle.settings.isEnabled">Enable</div>
+      <div class="btn" @click="setDisable" v-else>Disable</div>
+
+      <select ref="setEnableSingle" disabled>
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+      </select>
+      <select ref="setEnableMultiple" multiple disabled>
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+      </select>
+    </div>
+    <pre>
+      <code class="language-javascript">
+        var select = new SlimSelect({
+          select: '#selectElement'
+        })
+        select.enable()
+        // or
+        select.disable()
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/methods/get_data.vue

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect, { DataArray } from '../../../slim-select'
+
+export default defineComponent({
+  name: 'GetData',
+  data() {
+    return {
+      getDataOptions: null as SlimSelect | null,
+      getDataOptionsValue: [] as DataArray,
+      getDataOptgroups: null as SlimSelect | null,
+      getDataOptgroupsValue: [] as DataArray,
+    }
+  },
+  mounted() {
+    this.getDataOptions = new SlimSelect({
+      select: this.$refs.getDataOptions as HTMLSelectElement,
+    })
+    this.getDataOptgroups = new SlimSelect({
+      select: this.$refs.getDataOptgroups as HTMLSelectElement,
+    })
+  },
+  methods: {
+    getData() {
+      this.getDataOptionsValue = this.getDataOptions!.getData()
+      this.getDataOptgroupsValue = this.getDataOptgroups!.getData()
+    },
+  },
+})
+</script>
+
+<template>
+  <div id="getData" class="content">
+    <h2 class="header">getData</h2>
+    <p>The getData method will return an array of the full data set.</p>
+
+    <div class="row">
+      <div class="btn" @click="getData">Get Data</div>
+
+      <div>
+        <select ref="getDataOptions">
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+        <div class="pad-t-m pad-b-m" v-if="getDataOptionsValue.length">
+          <b>Option Data:</b> {{ getDataOptionsValue }}
+        </div>
+      </div>
+
+      <div>
+        <select ref="getDataOptgroups" multiple>
+          <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>
+        </select>
+        <div class="pad-t-m pad-b-m" v-if="getDataOptgroupsValue.length">
+          <b>Optgroup Data:</b> {{ getDataOptgroupsValue }}
+        </div>
+      </div>
+    </div>
+
+    <pre>
+      <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)
+      </code>
+    </pre>
+  </div>
+</template>