slim-select 2.1.0 → 2.2.1

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

@@ -1,405 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-// We need to import from the root of the package
-// Because if we use @slim-select/vue then we loose
-// hot reloading of the file changes
-import SlimSelectJS from '../../../slim-select'
-import SlimSelect from '../../../vue/slimselect.vue'
-import Settings from '../../../slim-select/settings'
-import { Option, OptionOptional } from '../../../slim-select/store'
-import { Events } from '../../../slim-select'
-
-interface Person {
-  id: string
-  first_name: string
-  last_name: string
-  selected: number
-}
-
-export default defineComponent({
-  name: 'Vue',
-  components: {
-    SlimSelect,
-  },
-  data() {
-    return {
-      settings: {
-        showSearch: false,
-      } as Settings,
-      data: [
-        { value: 'value1', text: 'Value 1' },
-        { value: 'value2', text: 'Value 2' },
-        { value: 'value3', text: 'Value 3' },
-      ],
-      dynamicData: [] as OptionOptional[],
-      afterChangeData: [] as OptionOptional[],
-      events: {
-        afterChange: this.afterChange,
-      } as Events,
-    }
-  },
-  mounted() {
-    // Show the original select for debugging
-    // const randomComponent = this.$refs.randomDynamic as any
-    // const randomSlim = randomComponent.getSlimSelect()
-    // randomSlim.select.showUI()
-  },
-  methods: {
-    changeData() {
-      const dataSingle = this.$refs.dataSingle as any
-      const dataSingleSlim = dataSingle.getSlimSelect() as SlimSelectJS
-      dataSingleSlim.open()
-      const dataMultiple = this.$refs.dataMultiple as any
-      const dataMultipleSlim = dataMultiple.getSlimSelect() as SlimSelectJS
-      dataMultipleSlim.open()
-
-      setTimeout(() => {
-        this.data = [
-          { value: 'value4', text: 'Value 4' },
-          { value: 'value5', text: 'Value 5' },
-          { value: 'value6', text: 'Value 6' },
-        ]
-      }, 500)
-    },
-    afterChange(newVal: Option[]) {
-      this.afterChangeData = newVal
-    },
-    randomDynamicData() {
-      // Go fetch some gofakeit data via post to json
-      fetch('https://api.gofakeit.com/json', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          type: 'array',
-          rowcount: 20,
-          indent: false,
-          fields: [
-            {
-              name: 'key',
-              function: 'password',
-              params: {
-                lower: true,
-                upper: true,
-                numeric: true,
-                special: false,
-                space: false,
-                length: 10,
-              },
-            },
-            { name: 'first_name', function: 'firstname', params: {} },
-            { name: 'last_name', function: 'lastname', params: {} },
-            { name: 'selected', function: 'number', params: { min: 1, max: 10 } },
-          ],
-        }),
-      })
-        .then((response) => response.json())
-        .then((data: Person[]) => {
-          // Map the data to the format slim select expects
-          this.dynamicData = data.map((person: Person) => {
-            return {
-              id: person.id,
-              text: `${person.first_name} ${person.last_name}`,
-              value: `${person.first_name} ${person.last_name}`,
-              selected: person.selected >= 8,
-            } as OptionOptional
-          })
-        })
-    },
-  },
-})
-</script>
-
-<template>
-  <div id="vue" class="content">
-    <h2 class="header">Vue</h2>
-
-    <h3>Install</h3>
-    <p>The vue component is in a sub package under SlimSelect</p>
-    <pre>
-      <code class="language-bash">
-        npm install @slim-select/vue
-      </code>
-    </pre>
-    <br />
-
-    <h3>Simple example</h3>
-    <div class="row">
-      <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>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        import { defineComponent } from 'vue'
-        import SlimSelect from '@slim-select/vue'
-
-        export default defineComponent({
-          components: {
-            SlimSelect,
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-
-        &lt;SlimSelect multiple&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-      </code>
-    </pre>
-
-    <br />
-    <div class="separator"></div>
-    <br />
-
-    <h3>Settings</h3>
-    <p>
-      Settings just like its passed as an object in normal SlimSelct will also be passed as an object to the component
-      prop
-    </p>
-
-    <div class="row">
-      <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>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        import { defineComponent } from 'vue'
-        import SlimSelect from '@slim-select/vue'
-
-        export default defineComponent({
-          components: {
-            SlimSelect,
-          },
-          data() {
-            return {
-              settings: {
-                showSearch: false,
-              }
-            }
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect :settings="settings"&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-
-        &lt;SlimSelect :settings="settings" multiple&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-      </code>
-    </pre>
-
-    <br />
-    <div class="separator"></div>
-    <br />
-
-    <h3>Data</h3>
-    <p>
-      Data just like its passed as an array in normal SlimSelct will also be passed as an array to the component prop.
-    </p>
-    <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.
-    </div>
-
-    <div class="row">
-      <div class="btn info" @click="changeData">Change data</div>
-      <SlimSelect ref="dataSingle" :data="data" />
-      <SlimSelect ref="dataMultiple" :data="data" multiple />
-    </div>
-
-    <pre>
-      <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' },
-              ],
-            }
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect :data="data" /&gt;
-
-        &lt;SlimSelect :data="data" multiple /&gt;
-      </code>
-    </pre>
-
-    <br />
-    <div class="separator"></div>
-    <br />
-
-    <h3>Events</h3>
-    <p>
-      Events just like its passed as an object in normal SlimSelct will also be passed as an object to the component
-      prop.
-    </p>
-
-    <div v-if="afterChangeData.length"><strong>afterChange:</strong> {{ afterChangeData }}</div>
-    <div class="row">
-      <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>
-    </div>
-
-    <pre>
-      <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)
-            },
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect :events="events"&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-
-        &lt;SlimSelect :events="events" multiple&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-      </code>
-    </pre>
-
-    <br />
-    <div class="separator"></div>
-    <br />
-
-    <h3>Reactivity</h3>
-    <p>
-      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.
-    </p>
-
-    <div class="row">
-      <div class="btn info" @click="randomDynamicData">Change data</div>
-      <SlimSelect ref="randomDynamic">
-        <option v-for="d in dynamicData" :key="d.id" :value="d.value" :selected="d.selected">{{ d.text }}</option>
-      </SlimSelect>
-
-      <SlimSelect multiple>
-        <option v-for="d in dynamicData" :value="d.value" :selected="d.selected">{{ d.text }}</option>
-      </SlimSelect>
-    </div>
-
-    <pre>
-      <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 },
-              ]
-            },
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect :events="events"&gt;
-          &lt;option v-for="d in dynamicData" :key="d.id" :value="d.value" :selected="d.selected"&gt;&#123;&#123; d.text &#125;&#125;&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-
-        &lt;SlimSelect :events="events" multiple&gt;
-          &lt;option v-for="d in dynamicData" :value="d.value" :selected="d.selected"&gt;&#123;&#123; d.text &#125;&#125;&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-      </code>
-    </pre>
-  </div>
-</template>

package/src/docs/pages/home.vue

@@ -1,194 +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%;
-    }
-  }
-
-  .callouts {
-    display: flex;
-    padding: 20px 0 0 0;
-
-    .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>
-
-    <div class="callouts">
-      <div class="features">
-        <div class="header"><h2>Features</h2></div>
-
-        <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>
-    </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>