slim-select 2.2.0 → 2.2.1

package/src/docs/pages/home.vue

@@ -1,241 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../slim-select'
-
-export default defineComponent({
-  name: 'Home',
-  data() {
-    return {
-      single: null as SlimSelect | null,
-      multiple: null as SlimSelect | null,
-    }
-  },
-  mounted() {
-    this.single = new SlimSelect({
-      select: this.$refs.slimSingle as HTMLSelectElement,
-    })
-    this.multiple = new SlimSelect({
-      select: this.$refs.slimMulti as HTMLSelectElement,
-    })
-
-    setTimeout(() => {
-      if (this.single) {
-        this.single.open()
-      }
-      setTimeout(() => {
-        if (this.single) {
-          this.single.setSelected('best')
-        }
-      }, 500)
-      setTimeout(() => {
-        if (this.single) {
-          this.single.setSelected('select')
-        }
-      }, 1000)
-      setTimeout(() => {
-        if (this.single) {
-          this.single.setSelected('ever')
-        }
-      }, 1500)
-      setTimeout(() => {
-        if (this.single) {
-          this.single.close()
-        }
-      }, 2000)
-
-      if (this.multiple) {
-        this.multiple.open()
-      }
-      setTimeout(() => {
-        if (this.multiple) {
-          this.multiple.setSelected(['best'])
-        }
-      }, 500)
-      setTimeout(() => {
-        if (this.multiple) {
-          this.multiple.setSelected(['best', 'select'])
-        }
-      }, 1000)
-      setTimeout(() => {
-        if (this.multiple) {
-          this.multiple.setSelected(['best', 'select', 'ever'])
-        }
-      }, 1500)
-      setTimeout(() => {
-        if (this.multiple) {
-          this.multiple.close()
-        }
-      }, 2000)
-    }, 500)
-  },
-  unmounted() {
-    if (this.single) {
-      this.single.destroy()
-    }
-    if (this.multiple) {
-      this.multiple.destroy()
-    }
-  },
-})
-</script>
-
-<style lang="scss">
-#home {
-  .samples {
-    display: flex;
-    justify-content: space-between;
-    gap: var(--spacing);
-
-    .single {
-      flex: 1 1 50%;
-    }
-    .multi {
-      flex: 1 1 50%;
-    }
-  }
-
-  .support {
-    .links {
-      display: flex;
-      flex-direction: row;
-      gap: var(--spacing);
-    }
-  }
-
-  .features {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-
-    .header {
-      padding: 0 0 var(--spacing) 0;
-    }
-
-    .row {
-      justify-content: space-around;
-
-      .list {
-        display: flex;
-        flex-direction: column;
-        list-style: none;
-        padding: 0px;
-        width: 200px;
-        margin: 0 auto;
-
-        li {
-          display: flex;
-          align-items: center;
-          padding: 0 0 5px 0;
-          font-weight: bold;
-          font-size: 20px;
-
-          img {
-            width: 20px;
-            padding: 0 8px 0 0;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
-
-<template>
-  <div id="home" class="content">
-    <div class="samples row">
-      <div class="single">
-        <h2>Single Select</h2>
-        <select ref="slimSingle">
-          <option data-placeholder="true"></option>
-          <option value="best">Best</option>
-          <option value="select">Select</option>
-          <option value="ever">Ever</option>
-        </select>
-      </div>
-      <div class="multi">
-        <h2>Multi Select</h2>
-        <select ref="slimMulti" multiple>
-          <option value="best">Best</option>
-          <option value="select">Select</option>
-          <option value="ever">Ever</option>
-        </select>
-      </div>
-    </div>
-
-    <br />
-
-    <div class="support">
-      <h2 class="header">Support</h2>
-      <p>Help support creators that make development easier!</p>
-      <div class="links">
-        <iframe
-          src="https://github.com/sponsors/brianvoe/button"
-          title="Sponsor brianvoe"
-          height="35"
-          width="116"
-          style="border: 0"
-        ></iframe>
-        <a href="https://www.buymeacoffee.com/brianvoe" target="_blank"
-          ><img
-            src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png"
-            alt="Buy Me A Coffee"
-            style="height: auto !important; width: auto !important"
-        /></a>
-      </div>
-    </div>
-
-    <br />
-    <div class="separator" />
-    <br />
-
-    <div class="features">
-      <h2 class="header">Features</h2>
-
-      <div class="row">
-        <ul class="list">
-          <li><img src="../assets/images/check-mark.svg" /> No Dependencies</li>
-          <li><img src="../assets/images/check-mark.svg" /> ~30kb - ~5kb gzip</li>
-          <li><img src="../assets/images/check-mark.svg" /> Single Select</li>
-          <li><img src="../assets/images/check-mark.svg" /> Multiple Select</li>
-          <li><img src="../assets/images/check-mark.svg" /> Addable Options</li>
-          <li><img src="../assets/images/check-mark.svg" /> Html Options</li>
-          <li><img src="../assets/images/check-mark.svg" /> Settable Data</li>
-          <li><img src="../assets/images/check-mark.svg" /> Callback Events</li>
-          <li><img src="../assets/images/check-mark.svg" /> Placeholders</li>
-        </ul>
-        <ul class="list">
-          <li><img src="../assets/images/check-mark.svg" /> Advanced Search</li>
-          <li><img src="../assets/images/check-mark.svg" /> Tabbable</li>
-          <li><img src="../assets/images/check-mark.svg" /> Disable Options</li>
-          <li><img src="../assets/images/check-mark.svg" /> Light Css</li>
-          <li><img src="../assets/images/check-mark.svg" /> Light Color Scheme</li>
-          <li><img src="../assets/images/check-mark.svg" /> Style Inheritance</li>
-          <li><img src="../assets/images/check-mark.svg" /> Clean Animations</li>
-          <li><img src="../assets/images/check-mark.svg" /> Performant</li>
-          <li><img src="../assets/images/check-mark.svg" /> Typescript</li>
-        </ul>
-      </div>
-    </div>
-
-    <br />
-    <div class="separator" />
-    <br />
-
-    <div class="frameworks">
-      <h2 class="header">Frameworks</h2>
-      <p>
-        SlimSelect is in the process of adding a few framework integrations.<br />
-        If you are an expert in any specific framework and would like to help out, please reach out!
-      </p>
-      <div class="row frameworks">
-        <router-link to="frameworks#vue">
-          <svg viewBox="0 0 128 128" width="100" height="100">
-            <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z"></path>
-            <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z"></path>
-          </svg>
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>

package/src/docs/pages/install.vue

@@ -1,105 +0,0 @@
-<script lang="ts">
-import download from 'downloadjs'
-import { defineComponent } from 'vue'
-import packageJson from '../../../package.json'
-
-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>
-
-<template>
-  <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
-        </code>
-      </pre>
-
-      <pre class="example-code">
-        <code class="language-javascript">
-          import SlimSelect from 'slim-select'
-
-          new SlimSelect({
-            select: '#selectElement'
-          })
-        </code>
-      </pre>
-    </div>
-
-    <div id="cdn" class="content">
-      <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>
-
-      <pre class="install-code">
-        <code class="language-html">
-          &lt;html&gt;
-            &lt;head&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({
-                  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 id="download" class="content">
-      <h2>Download</h2>
-      <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>
-</template>

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

@@ -1,66 +0,0 @@
-<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

@@ -1,70 +0,0 @@
-<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

@@ -1,82 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-import { DataArray } from '../../../slim-select/store'
-
-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>

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

@@ -1,78 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'GetSelected',
-  data() {
-    return {
-      selectedSingle: null as SlimSelect | null,
-      selectedSingleValue: [] as string[],
-      selectedMultiple: null as SlimSelect | null,
-      selectedMultipleValue: [] as string[],
-    }
-  },
-  mounted() {
-    this.selectedSingle = new SlimSelect({
-      select: this.$refs.selectedSingle as HTMLSelectElement,
-    })
-    this.selectedMultiple = new SlimSelect({
-      select: this.$refs.selectedMultiple as HTMLSelectElement,
-    })
-  },
-  methods: {
-    getSelected() {
-      this.selectedSingleValue = this.selectedSingle!.getSelected()
-      this.selectedMultipleValue = this.selectedMultiple!.getSelected()
-    },
-  },
-})
-</script>
-
-<template>
-  <div id="getSelected" class="content">
-    <h2 class="header">getSelected</h2>
-    <p>The getSelected method will return an array of the currently selected value strings.</p>
-
-    <div class="alert info">
-      Whether or not its a single or multiple select, getSelected will always return an array.
-    </div>
-
-    <div class="row">
-      <div class="btn" @click="getSelected">Get Selected</div>
-
-      <div>
-        <select ref="selectedSingle">
-          <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="selectedSingleValue.length">
-          <b>Single Select Value:</b> {{ selectedSingleValue }}
-        </div>
-      </div>
-
-      <div>
-        <select ref="selectedMultiple" multiple>
-          <option value="value1">Value 1</option>
-          <option value="value2" selected>Value 2</option>
-          <option value="value3" selected>Value 3</option>
-        </select>
-        <div class="pad-t-m pad-b-m" v-if="selectedMultipleValue.length">
-          <b>Multi Select Value:</b> {{ selectedMultipleValue }}
-        </div>
-      </div>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        var select = new SlimSelect({
-          select: '#selectElement'
-        })
-        var values = select.getSelected() // Will return an array of strings
-        console.log(values)
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,36 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import GetSelected from './get_selected.vue'
-import SetSelected from './set_selected.vue'
-import GetData from './get_data.vue'
-import SetData from './set_data.vue'
-import EnableDisable from './enable_disable.vue'
-import Search from './search.vue'
-import Destroy from './destroy.vue'
-
-export default defineComponent({
-  name: 'Methods',
-  components: {
-    GetSelected,
-    SetSelected,
-    GetData,
-    SetData,
-    EnableDisable,
-    Search,
-    Destroy,
-  },
-})
-</script>
-
-<template>
-  <div id="methods" class="contents">
-    <GetSelected />
-    <SetSelected />
-    <GetData />
-    <SetData />
-    <EnableDisable />
-    <Search />
-    <Destroy />
-  </div>
-</template>