slim-select 1.27.1 → 2.0.0

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

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

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

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect, { DataArray } 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

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

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

@@ -0,0 +1,70 @@
+<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,124 +1,117 @@
 <script lang="ts">
-  import Vue from 'vue'
-  import SlimSelect from '@/slim-select'
+import { defineComponent } from 'vue'
 
-  export default Vue.extend({
-    data() {
-      return {
-        states: [
-          {abv: 'AL', state: 'Alabama'},
-          {abv: 'AK', state: 'Alaska'},
-          {abv: 'AZ', state: 'Arizona'},
-          {abv: 'AR', state: 'Arkansas'},
-          {abv: 'CA', state: 'California', selected: true},
-          {abv: 'CO', state: 'Colorado'},
-          {abv: 'CT', state: 'Connecticut'},
-          {abv: 'DE', state: 'Delaware'},
-          {abv: 'DC', state: 'District Of Columbia'},
-          {abv: 'FL', state: 'Florida'},
-          {abv: 'GA', state: 'Georgia'},
-          {abv: 'HI', state: 'Hawaii'},
-          {abv: 'ID', state: 'Idaho'},
-          {abv: 'IL', state: 'Illinois', selected: true},
-          {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'},
-          {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() {
-      new SlimSelect({
-        select: '#single'
-      })
-      new SlimSelect({
-        select: '#single-group'
-      })
+import SlimSelect from '../../slim-select'
 
-      new SlimSelect({
-        select: '#multiple'
-      })
-      const multiGroup = new SlimSelect({
-        select: '#multiple-group'
-      })
-      multiGroup.set(['Cheese', 'Apple', 'Corn'])
+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'],
+        },
+      ],
     }
-  })
-</script>
-
-<style lang="scss">
-  #selects-content {
-    .select-split {
-      display: flex;
-      justify-content: space-between;
+  },
+  mounted() {
+    // Single
+    new SlimSelect({
+      select: this.$refs.single as HTMLSelectElement,
+    })
+    new SlimSelect({
+      select: this.$refs.singleOptgroup as HTMLSelectElement,
+    })
 
-      > * {
-        flex: 0 1 49%;
-      }
-    }
-  }
-</style>
+    // 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-content">
-
-    <div class="content">
+  <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.
+        Basic single select usage with Slim Select is extremely easy. Just set the select value to your select element.
       </p>
-      <div class="select-split">
+      <div class="row">
         <div>
           <h4>Options</h4>
-          <select id="single">
-            <option v-for="value in states" :key="value.abv" :value="value.abv" :selected="value.selected">{{value.state}}</option>
+          <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 id="single-group">
+          <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>
+              <option v-for="option in food.options" :key="option" :value="option">{{ option }}</option>
             </optgroup>
           </select>
         </div>
@@ -157,25 +150,27 @@
         </code>
       </pre>
     </div>
-    
-    <div class="content">
+
+    <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.
+        Multi selects work just the same as a single select. The only difference is setting the multiple attribute on
+        your select.
       </p>
-      <div class="select-split">
+      <div class="row">
         <div>
           <h4>Options</h4>
-          <select id="multiple" multiple>
-            <option v-for="value in states" :value="value.abv" :key="value.abv" :selected="value.selected">{{value.state}}</option>
+          <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 id="multiple-group" multiple>
+          <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>
+              <option v-for="option in food.options" :key="option" :value="option">{{ option }}</option>
             </optgroup>
           </select>
         </div>
@@ -214,6 +209,5 @@
         </code>
       </pre>
     </div>
-
   </div>
 </template>