slim-select 2.1.0 → 2.2.1

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>

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

@@ -1,155 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, Ref, ref } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-import { DataArray, Option } from '../../../slim-select/store'
-
-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

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

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

@@ -1,18 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import Vue from './vue.vue'
-
-export default defineComponent({
-  name: 'Events',
-  components: {
-    Vue,
-  },
-})
-</script>
-
-<template>
-  <div id="frameworks" class="contents">
-    <Vue />
-  </div>
-</template>