slim-select 2.1.0 → 2.2.1

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>

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>