slim-select 2.2.0 → 2.2.1

package/src/docs/pages/data.vue

@@ -1,134 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../slim-select'
-
-export default defineComponent({
-  name: 'Data',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.dataSingle as HTMLSelectElement,
-      data: [
-        {
-          placeholder: true,
-          text: 'data placeholder',
-        },
-        { text: 'Cat' },
-        { text: 'Dog' },
-        { text: 'Bird' },
-      ],
-    })
-
-    new SlimSelect({
-      select: this.$refs.dataMultiple as HTMLSelectElement,
-      data: [
-        {
-          placeholder: true,
-          text: 'data placeholder',
-        },
-        { text: 'Human' },
-        {
-          label: 'Animals',
-          options: [{ text: 'Cat' }, { text: 'Dog' }, { text: 'Bird' }],
-        },
-      ],
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="data" class="contents">
-    <div id="types" class="content">
-      <h2 class="header">Data Types</h2>
-      <p>
-        There are two types of data types. The option which consists of a variation of fields to customize the option.
-        You can also provide an optgroup which has a label and an array of options.
-      </p>
-      <pre>
-        <code class="language-javascript">
-          var optgroup = {
-            label: 'label', // Required
-            selectAll: false, // Optional - default false
-            closabel: 'off', // Optional - default 'off' - 'off', 'open', 'close'
-            options: [] // Required - value is an array of options
-          }
-
-          var option = {
-            text: 'text', // Required
-            value: 'value', // Optional - value will be set by text if not set
-            html: '&lt;b&gt;Html&lt;/b&gt;', // Optional - will be used for display purposes if set
-            selected: false, // Optional - default is false
-            display: true, // Optional - default is true
-            disabled: false, // Optional - default is false
-            mandatory: false, // Optional - default is false
-            placeholder: false, // Optional - default is false
-            class: '', // Optional - default is not set
-            style: '', // Optional - default is not set
-            data: {} // Optional - If you have data attributes
-          }
-        </code>
-      </pre>
-    </div>
-
-    <div id="field" class="content">
-      <h2 class="header">Data Field</h2>
-      <p>
-        The data field is an array of options and optgroups. The data field can be used in place of the select element.
-        The data field will also be used to update the options in the original select element.
-      </p>
-      <p>
-        The only required field is the text field. The value field will be set to the text field if not set. All other
-        fields are optional and have default values if not set.
-      </p>
-
-      <div class="row">
-        <select ref="dataSingle"></select>
-        <select ref="dataMultiple" multiple></select>
-      </div>
-
-      <pre>
-        <code class="language-javascript">
-          new SlimSelect({
-            select: '#selectElement',
-            
-            // Options
-            data: [
-              {text: 'Value 1'},
-              {text: 'Value 2'},
-              {text: 'Value 3'}
-            ],
-
-            // Optgroup
-            data: [
-              {
-                label: 'Animals',
-                options: [
-                  {text: 'Cat'},
-                  {text: 'Dog'},
-                  {text: 'Bird'}
-                ]
-              }
-            ]
-
-            // Mix - option and group options
-            data: [
-              {text: 'Human'}, // regular option
-              {
-                label: 'Animals',
-                options: [
-                  {text: 'Cat'},
-                  {text: 'Dog'},
-                  {text: 'Bird'}
-                ]
-              }
-            ]
-          })
-
-          // If you want to set a placeholder set the first object placeholder to true
-          {'placeholder': true, 'text': 'placeholder text'}
-        </code>
-      </pre>
-    </div>
-  </div>
-</template>

package/src/docs/pages/events/addable.vue

@@ -1,95 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Addable',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.addableSingle as HTMLSelectElement,
-      events: {
-        addable: (value: string) => {
-          return {
-            text: value,
-            value: value.toLowerCase(),
-          }
-        },
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.addableMultiple as HTMLSelectElement,
-      events: {
-        addable: (value: string) => {
-          return new Promise((resolve) => {
-            setTimeout(() => {
-              resolve({
-                text: value,
-                value: value,
-              })
-            }, 100)
-          })
-        },
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="addable" class="content">
-    <h2 class="header">addable</h2>
-    <p>Slim select has the ability to dynamically add options via the search input field</p>
-    <p>
-      addable is a callback which takes a function parameter. The return value can either be a string or an option
-      object.
-    </p>
-
-    <div class="row">
-      <select ref="addableSingle">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-      <select ref="addableMultiple" 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">
-        new SlimSelect({
-          select: '#selectElement',
-
-          events: {
-            addable: function (value) {
-              // return false or null if you do not want to allow value to be submitted
-              if (value === 'bad') {return false}
-
-              // Return the value string
-              return value // Optional - value alteration // ex: value.toLowerCase()
-
-              // Optional - Return a valid data object. 
-              // See methods/setData for list of valid options
-              return {
-                text: value,
-                value: value.toLowerCase()
-              }
-
-              // Optional - Return a promise with either a string or data object
-              return new Promise((resolve) => {
-                resolve({
-                  text: value,
-                  value: value,
-                })
-              })
-            }
-          }
-        })
-      </code>
-    </pre>
-  </div>
-</template>

package/src/docs/pages/events/before_after_change.vue

@@ -1,154 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-import { DataArray } from '../../../slim-select/store'
-
-export default defineComponent({
-  name: 'BeforeAfterChange',
-  data() {
-    return {
-      beforeChangeSingle: [] as DataArray,
-      beforeChangeMultiple: [] as DataArray,
-      afterChangeSingle: [] as DataArray,
-      afterChangeMultiple: [] as DataArray,
-    }
-  },
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.beforeChangeSingle as HTMLSelectElement,
-      settings: {
-        allowDeselect: true,
-      },
-      events: {
-        beforeChange: (newValue: DataArray, oldValue: DataArray) => {
-          this.beforeChangeSingle = oldValue
-          return true
-        },
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.beforeChangeMultiple as HTMLSelectElement,
-      events: {
-        beforeChange: (newValue: DataArray, oldValue: DataArray) => {
-          this.beforeChangeMultiple = oldValue
-          return true
-        },
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.afterChangeSingle as HTMLSelectElement,
-      settings: {
-        allowDeselect: true,
-      },
-      events: {
-        afterChange: (value: DataArray) => {
-          this.afterChangeSingle = value
-        },
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.afterChangeMultiple as HTMLSelectElement,
-      events: {
-        afterChange: (value: DataArray) => {
-          this.afterChangeMultiple = value
-        },
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="beforeChange" class="content">
-    <h2 class="header">beforeChange</h2>
-    <p>
-      beforeOnChange will trigger a callback on an option click and will allow you the ability to halt if the value it
-      produces isnt to your liking. In order to stop the change from happening just return false on the callback.
-      Returning nothing or true will allow it to continue as normal.
-    </p>
-
-    <div class="alert info">
-      Be sure to return true to allow for the change to happen. False or nothing to cancel change.
-    </div>
-
-    <div v-if="beforeChangeSingle">
-      <strong>Before change: {{ beforeChangeSingle }}</strong>
-    </div>
-
-    <select ref="beforeChangeSingle">
-      <option data-placeholder="true">Select Option</option>
-      <option value="value1">Value 1</option>
-      <option value="value2">Value 2</option>
-      <option value="value3">Value 3</option>
-    </select>
-    <br />
-
-    <div v-if="beforeChangeMultiple">
-      <strong>Before change: {{ beforeChangeMultiple }}</strong>
-    </div>
-
-    <select ref="beforeChangeMultiple" multiple>
-      <option value="value1" selected>Value 1</option>
-      <option value="value2">Value 2</option>
-      <option value="value3">Value 3</option>
-    </select>
-
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#selectElement',
-          events: {
-            beforeChange: (newVal, oldVal) => {
-              console.log(newVal)
-              return false // this will stop the change from happening
-            }
-          }
-        })
-      </code>
-    </pre>
-  </div>
-
-  <div id="afterChange" class="content">
-    <h2 class="header">afterChange</h2>
-    <p>afterChange will trigger a callback after the value of the select dropdown has changed.</p>
-
-    <div v-if="afterChangeSingle">
-      <strong>After change: {{ afterChangeSingle }}</strong>
-    </div>
-
-    <select ref="afterChangeSingle">
-      <option data-placeholder="true">Select Option</option>
-      <option value="value1">Value 1</option>
-      <option value="value2">Value 2</option>
-      <option value="value3">Value 3</option>
-    </select>
-    <br />
-
-    <div v-if="afterChangeMultiple">
-      <strong>After change: {{ afterChangeMultiple }}</strong>
-    </div>
-
-    <select ref="afterChangeMultiple" multiple>
-      <option value="value1" selected>Value 1</option>
-      <option value="value2">Value 2</option>
-      <option value="value3">Value 3</option>
-    </select>
-
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#selectElement',
-          events: {
-            afterChange: (newVal) => {
-              console.log(newVal)
-            }
-          }
-        })
-      </code>
-    </pre>
-  </div>
-</template>

package/src/docs/pages/events/before_after_open_close.vue

@@ -1,122 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'BeForeAfterOpenClose',
-  data() {
-    return {
-      beforeAfterOpenCloseSingle: null as SlimSelect | null,
-      singleState: '',
-      beforeAfterOpenCloseMultiple: null as SlimSelect | null,
-      multipleState: '',
-    }
-  },
-  mounted() {
-    this.beforeAfterOpenCloseSingle = new SlimSelect({
-      select: this.$refs.beforeAfterOpenCloseSingle as HTMLSelectElement,
-      events: {
-        beforeOpen: () => {
-          this.setState('single', 'beforeOpen')
-        },
-        afterOpen: () => {
-          this.setState('single', 'afterOpen')
-        },
-        beforeClose: () => {
-          this.setState('single', 'beforeClose')
-        },
-        afterClose: () => {
-          this.setState('single', 'afterClose')
-        },
-      },
-    })
-
-    this.beforeAfterOpenCloseMultiple = new SlimSelect({
-      select: this.$refs.beforeAfterOpenCloseMultiple as HTMLSelectElement,
-      events: {
-        beforeOpen: () => {
-          this.setState('multiple', 'beforeOpen')
-        },
-        afterOpen: () => {
-          this.setState('multiple', 'afterOpen')
-        },
-        beforeClose: () => {
-          this.setState('multiple', 'beforeClose')
-        },
-        afterClose: () => {
-          this.setState('multiple', 'afterClose')
-        },
-      },
-    })
-  },
-  methods: {
-    setState(el: string, state: string) {
-      if (el === 'single') {
-        this.singleState = state
-      } else {
-        this.multipleState = state
-      }
-
-      // Set timer to clear state
-      setTimeout(() => {
-        if (el === 'single') {
-          this.singleState = ''
-        } else {
-          this.multipleState = ''
-        }
-      }, 1000)
-    },
-  },
-})
-</script>
-
-<template>
-  <div id="open" class="content">
-    <h2 class="header">beforeOpen / afterOpen / beforeClose / afterClose</h2>
-    <p>
-      The beforeOpen, afterOpen, beforeClose, and afterClose events will fire before and after the select is opened and
-      closed.
-    </p>
-
-    <div class="row">
-      <div>
-        <div>State: {{ singleState }}</div>
-        <select ref="beforeAfterOpenCloseSingle">
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-        </select>
-      </div>
-      <div>
-        <div>State: {{ multipleState }}</div>
-        <select ref="beforeAfterOpenCloseMultiple" multiple>
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-        </select>
-      </div>
-    </div>
-    <pre>
-      <code class="language-javascript">
-        var select = new SlimSelect({
-          select: '#selectElement',
-          events: {
-            beforeOpen: () => {
-              console.log('before open')
-            },
-            afterOpen: () => {
-              console.log('after open')
-            },
-            beforeClose: () => {
-              console.log('before close')
-            },
-            afterClose: () => {
-              console.log('after close')
-            },
-          },
-        })
-      </code>
-    </pre>
-  </div>
-</template>

package/src/docs/pages/events/error.vue

@@ -1,59 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Error',
-  data() {
-    return {
-      errorSingle: null as SlimSelect | null,
-      errMsg: '',
-    }
-  },
-  mounted() {
-    this.errorSingle = new SlimSelect({
-      select: this.$refs.errorSingle as HTMLSelectElement,
-      events: {
-        error: (err: Error) => {
-          this.errMsg = err.message
-        },
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="error" class="content">
-    <h2 class="header">error</h2>
-    <p>The error event is fired when an error occurs. The error message is passed as the first argument.</p>
-    <div class="alert info">
-      If you are are having issues with slim select finding the select element. Try delaying new SlimSelect() call as
-      the select dom element might not be available yet.
-    </div>
-
-    <div v-if="errMsg !== ''"><b>Error:</b> {{ errMsg }}</div>
-
-    <div class="row">
-      <select ref="notError">
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-      </select>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        var select = new SlimSelect({
-          select: '#selectElement',
-          events: {
-            error: function(err) {
-              console.error(err)
-            }
-          }
-        })
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,33 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import Error from './error.vue'
-import BeforeAfterChange from './before_after_change.vue'
-import BeforeAfterOpenClose from './before_after_open_close.vue'
-import Search from './search.vue'
-import SearchFilter from './search_filter.vue'
-import Addable from './addable.vue'
-
-export default defineComponent({
-  name: 'Events',
-  components: {
-    Error,
-    BeforeAfterChange,
-    BeforeAfterOpenClose,
-    Search,
-    SearchFilter,
-    Addable,
-  },
-})
-</script>
-
-<template>
-  <div id="events" class="contents">
-    <Error />
-    <BeforeAfterChange />
-    <BeforeAfterOpenClose />
-    <Search />
-    <SearchFilter />
-    <Addable />
-  </div>
-</template>