slim-select 2.2.0 → 2.2.1

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

@@ -1,63 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'OpenClose',
-  data() {
-    return {
-      openCloseSingle: null as SlimSelect | null,
-      openCloseMultiple: null as SlimSelect | null,
-    }
-  },
-  mounted() {
-    // Open / Close
-    this.openCloseSingle = new SlimSelect({
-      select: this.$refs.openCloseSingle as HTMLSelectElement,
-    })
-    this.openCloseMultiple = new SlimSelect({
-      select: this.$refs.openCloseMultiple as HTMLSelectElement,
-    })
-  },
-  methods: {
-    setOpenClose() {
-      if (!this.openCloseSingle!.settings.isOpen) {
-        this.openCloseSingle!.open()
-        this.openCloseMultiple!.open()
-      }
-    },
-  },
-})
-</script>
-
-<template>
-  <div class="content">
-    <h2 class="header">open / close</h2>
-    <p>The open and close methods will do just that.</p>
-
-    <div class="row">
-      <div class="btn" @click="setOpenClose">Open/Close</div>
-      <select ref="openCloseSingle">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-      <select ref="openCloseMultiple" 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.open()
-        // or
-        select.close()
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,62 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Search',
-  data() {
-    return {
-      searchSingle: null as SlimSelect | null,
-      searchMultiple: null as SlimSelect | null,
-    }
-  },
-  mounted() {
-    this.searchSingle = new SlimSelect({
-      select: this.$refs.searchSingle as HTMLSelectElement,
-    })
-    this.searchMultiple = new SlimSelect({
-      select: this.$refs.searchMultiple as HTMLSelectElement,
-    })
-  },
-  methods: {
-    setSearch() {
-      this.searchSingle!.open()
-      this.searchSingle!.search('value 2')
-
-      this.searchMultiple!.open()
-      this.searchMultiple!.search('value 2')
-    },
-  },
-})
-</script>
-
-<template>
-  <div id="search" class="content">
-    <h2 class="header">search</h2>
-    <p>The search method will update the search input field and search the data against that value.</p>
-
-    <div class="row">
-      <div class="btn" @click="setSearch">Set Search</div>
-      <select ref="searchSingle">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-      <select ref="searchMultiple" 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.search('value')
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,106 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'SetData',
-  data() {
-    return {
-      setDataSingle: null as SlimSelect | null,
-      setDataMultiple: null as SlimSelect | null,
-    }
-  },
-  mounted() {
-    // Set Data
-    this.setDataSingle = new SlimSelect({
-      select: this.$refs.setDataSingle as HTMLSelectElement,
-      events: {
-        error: (err: Error) => {
-          console.error(err)
-        },
-      },
-    })
-    this.setDataMultiple = new SlimSelect({
-      select: this.$refs.setDataMultiple as HTMLSelectElement,
-      events: {
-        error: (err: Error) => {
-          console.error(err)
-        },
-      },
-    })
-  },
-  methods: {
-    setData() {
-      // Fetch random json array data from gofakeit
-      fetch('https://api.gofakeit.com/json', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          type: 'array',
-          rowcount: 10,
-          indent: false,
-          fields: [
-            { name: 'text', function: 'generate', params: { str: '{firstname} {lastname}' } },
-            { name: 'selected', function: 'bool' },
-          ],
-        }),
-      })
-        .then((res) => res.json())
-        .then((data) => {
-          this.setDataSingle!.setData(data)
-          this.setDataMultiple!.setData(data)
-        })
-        .catch((err) => console.error(err))
-    },
-  },
-})
-</script>
-
-<template>
-  <div id="setData" class="content">
-    <h2 class="header">setData</h2>
-    <p>
-      The setData method can take in an array of objects. This will set the options of the original select and rerender
-      slim select.
-    </p>
-    <div class="alert info">
-      If you use a single select but an option is not selected it will select the first option.
-    </div>
-    <div class="alert info">
-      If you use a single select but pass in data with multiple selected options, the first option will be selected.
-    </div>
-    <div class="alert info">
-      To get a better break down of possible data options see <router-link to="/data#types">data</router-link>
-    </div>
-
-    <div class="row">
-      <div class="btn" @click="setData">Set Data</div>
-      <select ref="setDataSingle"></select>
-      <select ref="setDataMultiple" multiple></select>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        var select = new SlimSelect({
-          select: '#selectElement'
-        })
-
-        // Array of objects
-        select.setData([
-          {text: 'Value 1', value: 'value1'},
-          {text: 'Value 2', value: 'value2'},
-          {
-            label: 'Group 1',
-            options: [
-              {text: 'Value 3', value: 'value3'},
-              {text: 'Value 4', value: 'value4'},
-            ]
-          }
-        ])
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,70 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'SetSelected',
-  data() {
-    return {
-      selectedSingle: null as SlimSelect | null,
-      selectedMultiple: null as SlimSelect | null,
-    }
-  },
-  mounted() {
-    this.selectedSingle = new SlimSelect({
-      select: this.$refs.selectedSingle as HTMLSelectElement,
-    })
-    this.selectedMultiple = new SlimSelect({
-      select: this.$refs.selectedMultiple as HTMLSelectElement,
-    })
-  },
-  methods: {
-    setSelected() {
-      this.selectedSingle!.open()
-      this.selectedSingle!.setSelected('value2')
-      this.selectedMultiple!.open()
-      this.selectedMultiple!.setSelected(['value1', 'value3'])
-
-      setTimeout(() => {
-        this.selectedSingle!.close()
-        this.selectedMultiple!.close()
-      }, 1000)
-    },
-  },
-})
-</script>
-
-<template>
-  <div id="setSelected" class="content">
-    <h2 class="header">setSelected</h2>
-    <p>The setSelected method will set the selected value(s) of the select.</p>
-    <p>setSelected will accept both string or array of strings.</p>
-
-    <div class="row">
-      <div class="btn" @click="setSelected">Set Selected</div>
-
-      <select ref="selectedSingle">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-
-      <select ref="selectedMultiple" 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.setSelected('value1' /* or */ ['value1', 'value3'])
-        console.log(select.getSelected())
-      </code>
-    </pre>
-  </div>
-</template>

package/src/docs/pages/selects.vue

@@ -1,213 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../slim-select'
-
-export default defineComponent({
-  name: 'Selects',
-  data() {
-    return {
-      states: [
-        { abv: 'AL', state: 'Alabama' },
-        { abv: 'AK', state: 'Alaska' },
-        { abv: 'AZ', state: 'Arizona' },
-        { abv: 'AR', state: 'Arkansas' },
-        { abv: 'CA', state: 'California' },
-        { abv: 'CO', state: 'Colorado' },
-        { abv: 'CT', state: 'Connecticut' },
-        { abv: 'DE', state: 'Delaware' },
-        { abv: 'FL', state: 'Florida' },
-        { abv: 'GA', state: 'Georgia' },
-        { abv: 'HI', state: 'Hawaii' },
-        { abv: 'ID', state: 'Idaho' },
-        { abv: 'IL', state: 'Illinois' },
-        { abv: 'IN', state: 'Indiana' },
-        { abv: 'IA', state: 'Iowa' },
-        { abv: 'KS', state: 'Kansas' },
-        { abv: 'KY', state: 'Kentucky' },
-        { abv: 'LA', state: 'Louisiana' },
-        { abv: 'ME', state: 'Maine' },
-        { abv: 'MD', state: 'Maryland' },
-        { abv: 'MA', state: 'Massachusetts' },
-        { abv: 'MI', state: 'Michigan' },
-        { abv: 'MN', state: 'Minnesota' },
-        { abv: 'MS', state: 'Mississippi' },
-        { abv: 'MO', state: 'Missouri' },
-        { abv: 'MT', state: 'Montana' },
-        { abv: 'NE', state: 'Nebraska' },
-        { abv: 'NV', state: 'Nevada' },
-        { abv: 'NH', state: 'New Hampshire' },
-        { abv: 'NJ', state: 'New Jersey' },
-        { abv: 'NM', state: 'New Mexico' },
-        { abv: 'NY', state: 'New York' },
-        { abv: 'NC', state: 'North Carolina' },
-        { abv: 'ND', state: 'North Dakota' },
-        { abv: 'OH', state: 'Ohio' },
-        { abv: 'OK', state: 'Oklahoma' },
-        { abv: 'OR', state: 'Oregon' },
-        { abv: 'PA', state: 'Pennsylvania' },
-        { abv: 'RI', state: 'Rhode Island' },
-        { abv: 'SC', state: 'South Carolina' },
-        { abv: 'SD', state: 'South Dakota' },
-        { abv: 'TN', state: 'Tennessee', selected: true },
-        { abv: 'TX', state: 'Texas' },
-        { abv: 'UT', state: 'Utah' },
-        { abv: 'VT', state: 'Vermont' },
-        { abv: 'VA', state: 'Virginia' },
-        { abv: 'WA', state: 'Washington' },
-        { abv: 'WV', state: 'West Virginia' },
-        { abv: 'WI', state: 'Wisconsin' },
-        { abv: 'WY', state: 'Wyoming' },
-      ],
-      foods: [
-        { label: 'Dairy', options: ['Milk', 'Cheese', 'Butter', 'Ice Cream'] },
-        { label: 'Meat', options: ['Beef', 'Ham', 'Pork', 'Sausage', 'Chicken', 'Turkey'] },
-        { label: 'Fruits', options: ['Apple', 'Banana', 'Grape', 'Orange', 'Strawberry', 'Blueberry', 'Raspberry'] },
-        {
-          label: 'Vegetables',
-          options: ['Carrot', 'Tomato', 'Broccoli', 'Celery', 'Corn', 'Pumpkin', 'Kale', 'Spinach'],
-        },
-      ],
-    }
-  },
-  mounted() {
-    // Single
-    new SlimSelect({
-      select: this.$refs.single as HTMLSelectElement,
-    })
-    new SlimSelect({
-      select: this.$refs.singleOptgroup as HTMLSelectElement,
-    })
-
-    // Multiple
-    new SlimSelect({
-      select: this.$refs.multiple as HTMLSelectElement,
-    })
-    const multiGroup = new SlimSelect({
-      select: this.$refs.multipleOptgroup as HTMLSelectElement,
-    })
-    multiGroup.setSelected(['Cheese', 'Apple', 'Corn'])
-  },
-})
-</script>
-
-<template>
-  <div id="selects" class="contents">
-    <div id="single" class="content">
-      <h2 class="header">Single</h2>
-      <p>
-        Basic single select usage with Slim Select is extremely easy. Just set the select value to your select element.
-      </p>
-      <div class="row">
-        <div>
-          <h4>Options</h4>
-          <select ref="single">
-            <option v-for="value in states" :key="value.abv" :value="value.abv" :selected="value.selected">
-              {{ value.state }}
-            </option>
-          </select>
-        </div>
-        <div>
-          <h4>Optgroups</h4>
-          <select ref="singleOptgroup">
-            <optgroup v-for="food in foods" :key="food.label" :label="food.label">
-              <option v-for="option in food.options" :key="option" :value="option">{{ option }}</option>
-            </optgroup>
-          </select>
-        </div>
-      </div>
-
-      <pre>
-        <code class="language-javascript">
-          new SlimSelect({
-            select: '#single'
-          })
-        </code>
-      </pre>
-
-      <pre>
-        <code class="language-html">
-          &lt;!-- Options --&gt;
-          &lt;select id="single"&gt;
-            &lt;option value="value 1"&gt;Value 1&lt;/option&gt;
-            &lt;option value="value 2"&gt;Value 2&lt;/option&gt;
-            &lt;option value="value 3"&gt;Value 3&lt;/option&gt;
-          &lt;/select&gt;
-
-          &lt;!-- Optgroups --&gt;
-          &lt;select id="single-optgroups"&gt;
-            &lt;optgroup label="Label 1"&gt;
-              &lt;option value="value 1"&gt;Value 1&lt;/option&gt;
-              &lt;option value="value 2"&gt;Value 2&lt;/option&gt;
-              &lt;option value="value 3"&gt;Value 3&lt;/option&gt;
-            &lt;/optgroup&gt;
-            &lt;optgroup label="Label 2"&gt;
-              &lt;option value="value 21"&gt;Value 1&lt;/option&gt;
-              &lt;option value="value 22"&gt;Value 2&lt;/option&gt;
-              &lt;option value="value 23"&gt;Value 3&lt;/option&gt;
-            &lt;/optgroup&gt;
-          &lt;/select&gt;
-        </code>
-      </pre>
-    </div>
-
-    <div id="multiple" class="content">
-      <h2 class="header">Multiple</h2>
-      <p>
-        Multi selects work just the same as a single select. The only difference is setting the multiple attribute on
-        your select.
-      </p>
-      <div class="row">
-        <div>
-          <h4>Options</h4>
-          <select ref="multiple" multiple>
-            <option v-for="value in states" :value="value.abv" :key="value.abv" :selected="value.selected">
-              {{ value.state }}
-            </option>
-          </select>
-        </div>
-        <div>
-          <h4>Optgroups</h4>
-          <select ref="multipleOptgroup" multiple>
-            <optgroup v-for="food in foods" :key="food.label" :label="food.label">
-              <option v-for="option in food.options" :key="option" :value="option">{{ option }}</option>
-            </optgroup>
-          </select>
-        </div>
-      </div>
-
-      <pre>
-        <code class="language-javascript">
-          new SlimSelect({
-            select: '#multiple'
-          })
-        </code>
-      </pre>
-
-      <pre>
-        <code class="language-html">
-          &lt;!-- Options --&gt;
-          &lt;select id="multiple" multiple&gt;
-            &lt;option value="value 1"&gt;Value 1&lt;/option&gt;
-            &lt;option value="value 2"&gt;Value 2&lt;/option&gt;
-            &lt;option value="value 3"&gt;Value 3&lt;/option&gt;
-          &lt;/select&gt;
-
-          &lt;!-- Optgroups --&gt;
-          &lt;select id="multiple-optgroups" multiple&gt;
-            &lt;optgroup label="Label 1"&gt;
-              &lt;option value="value 1"&gt;Value 1&lt;/option&gt;
-              &lt;option value="value 2"&gt;Value 2&lt;/option&gt;
-              &lt;option value="value 3"&gt;Value 3&lt;/option&gt;
-            &lt;/optgroup&gt;
-            &lt;optgroup label="Label 2"&gt;
-              &lt;option value="value 21"&gt;Value 1&lt;/option&gt;
-              &lt;option value="value 22"&gt;Value 2&lt;/option&gt;
-              &lt;option value="value 23"&gt;Value 3&lt;/option&gt;
-            &lt;/optgroup&gt;
-          &lt;/select&gt;
-        </code>
-      </pre>
-    </div>
-  </div>
-</template>

package/src/docs/pages/settings/always_open.vue

@@ -1,88 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'AlwaysOpen',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.alwaysOpenSingle as HTMLSelectElement,
-      settings: {
-        alwaysOpen: true,
-        contentLocation: this.$refs.alwaysOpenSingleContent as HTMLElement,
-        contentPosition: 'relative',
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.alwaysOpenMultiple as HTMLSelectElement,
-      settings: {
-        alwaysOpen: true,
-        contentLocation: this.$refs.alwaysOpenMultipleContent as HTMLElement,
-        contentPosition: 'relative',
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="alwaysOpen" class="content">
-    <h2 class="header">alwaysOpen</h2>
-    <p>
-      alwaysOpen option is used to keep the select open at all times. This is useful for when you want to display the
-      options at all times.
-    </p>
-
-    <div class="row">
-      <div style="height: auto">
-        <select ref="alwaysOpenSingle">
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-        </select>
-        <div ref="alwaysOpenSingleContent"></div>
-      </div>
-
-      <div style="height: auto">
-        <select ref="alwaysOpenMultiple" multiple>
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-          <option value="value4">Value 4</option>
-        </select>
-        <div ref="alwaysOpenMultipleContent"></div>
-      </div>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#selectElement',
-          settings: {
-            alwaysOpen: true,
-
-            // In various situations it may be useful to set the contentLocation
-            // to an element that will display best
-            contentLocation: document.getElementById('local'), ,
-            contentPosition: 'relative',
-          }
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;select id="selectElement"&gt;
-          &lt;option value="value1"&gt;Value 1&lt;/option&gt;
-          &lt;option value="value2"&gt;Value 2&lt;/option&gt;
-          &lt;option value="value3"&gt;Value 3&lt;/option&gt;
-        &lt;/select&gt;
-
-        &lt;!-- The content will go in this div --&gt;
-        &lt;div id="local"&gt;&lt;/div&gt;
-      </code>
-    </pre>
-  </div>
-</template>