slim-select 1.27.1 → 2.0.0

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

@@ -0,0 +1,79 @@
+<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 value
+        },
+      },
+    })
+
+    new SlimSelect({
+      select: this.$refs.addableMultiple as HTMLSelectElement,
+      events: {
+        addable: (value: string) => {
+          return {
+            text: value,
+            value: value.toLowerCase(),
+          }
+        },
+      },
+    })
+  },
+})
+</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()
+              }
+            }
+          }
+        })
+      </code>
+    </pre>
+  </div>
+</template>

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

@@ -0,0 +1,140 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect, { DataArray } from '../../../slim-select'
+
+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,
+      events: {
+        beforeChange: (newValue: DataArray, oldValue: DataArray) => {
+          this.beforeChangeSingle = oldValue
+        },
+      },
+    })
+
+    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,
+      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 v-if="beforeChangeSingle">
+      <strong>Before change: {{ beforeChangeSingle }}</strong>
+    </div>
+
+    <select ref="beforeChangeSingle">
+      <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 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

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

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

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

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

@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { onMounted, Ref, ref } from 'vue'
+
+import SlimSelect, { DataArray, Option } from '../../../slim-select'
+
+interface Person {
+  first_name: string
+  last_name: string
+}
+
+let searchData: Person[] = []
+let searchSingle: Ref<HTMLSelectElement | null> = ref(null)
+let searchMultiple: Ref<HTMLSelectElement | null> = ref(null)
+
+// 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: 1000,
+    indent: false,
+    fields: [
+      { name: 'first_name', function: 'firstname', params: {} },
+      { name: 'last_name', function: 'lastname', params: {} },
+    ],
+  }),
+})
+  .then((response) => response.json())
+  .then((data: Person[]) => {
+    searchData = data
+  })
+
+onMounted(() => {
+  new SlimSelect({
+    select: searchSingle.value!,
+    settings: {
+      placeholderText: 'Search First or Last Name',
+      searchingText: 'Searching Users...',
+      searchHighlight: true,
+    },
+    events: {
+      search: searchPromise,
+    },
+  })
+
+  new SlimSelect({
+    select: searchMultiple.value!,
+    settings: {
+      placeholderText: 'Search First or Last Name',
+      searchingText: 'Searching Users...',
+      searchHighlight: true,
+    },
+    events: {
+      search: searchPromise,
+    },
+  })
+})
+
+function searchPromise(search: string, selectedData: DataArray): Promise<Option[]> {
+  return new Promise((resolve, reject) => {
+    if (search.length < 2) {
+      return reject('Search must be at least 2 characters')
+    }
+
+    const results = searchData.filter((person) => {
+      return (
+        person.first_name.toLowerCase().includes(search.toLowerCase()) ||
+        person.last_name.toLowerCase().includes(search.toLowerCase())
+      )
+    })
+
+    if (results.length === 0) {
+      return reject('No results found')
+    }
+
+    // Convert the results to an array of options
+    let options = results.map((person) => {
+      return {
+        text: `${person.first_name} ${person.last_name}`,
+        value: `${person.first_name} ${person.last_name}`,
+      }
+    }) as Option[]
+
+    // Simulate a slow search
+    setTimeout(() => {
+      resolve(options)
+    }, 300)
+  })
+}
+</script>
+
+<template>
+  <div id="search" class="content">
+    <h2 class="header">search</h2>
+    <p>
+      Slim select allows you to syncronize result values from your promise response.<br />
+      Call callback() method with slimselect data, false or string with specific string.
+    </p>
+
+    <div class="row">
+      <select ref="searchSingle"></select>
+      <select ref="searchMultiple" multiple></select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        new SlimSelect({
+          select: '#selectElement',
+          events: {
+            search: (search, currentData) => {
+              return new Promise((resolve, reject) => {
+                if (search.length &lt; 2) {
+                  return reject('Search must be at least 2 characters')
+                }
+
+                // Fetch random first and last name data
+                fetch('https://api.gofakeit.com/json', {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    type: 'array',
+                    rowcount: 10,
+                    indent: false,
+                    fields: [
+                      { name: 'first_name', function: 'firstname', params: {} },
+                      { name: 'last_name', function: 'lastname', params: {} },
+                    ],
+                  }),
+                })
+                  .then((response) => response.json())
+                  .then((data) => {
+                    // Take data and generate array of options
+                    const options = data.map((person) => {
+                      return {
+                        text: `${person.first_name} ${person.last_name}`,
+                        value: `${person.first_name} ${person.last_name}`,
+                      }
+                    })
+
+                    resolve(options)
+                  })
+              })
+            }
+          }
+        })
+      </code>
+    </pre>
+  </div>
+</template>

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'SearchFilter',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.searchFilter as HTMLSelectElement,
+      events: {
+        searchFilter: (option: any, search: any) => option.text.substr(0, search.length) === search,
+      },
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="searchFilter" class="content">
+    <h2 class="header">searchFilter</h2>
+    <p>searchFilter event is used to replace the default matching algorithm.</p>
+    <p>See Data for the proper object interface of <em>option</em>.</p>
+
+    <select ref="searchFilter">
+      <option value="apple">Apple</option>
+      <option value="orange">Orange</option>
+      <option value="pineapple">Pineapple</option>
+    </select>
+
+    <pre>
+      <code class="language-javascript">
+        new SlimSelect({
+          select: '#selectElement',
+          events: {
+            // Exact case sensitive start of string match
+            searchFilter: (option, search) => {
+              return option.text.substr(0, search.length) === search
+            }
+          }
+        })
+      </code>
+    </pre>
+  </div>
+</template>