slim-select 2.2.0 → 2.2.1

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

@@ -1,169 +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, currentData: 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')
-    }
-
-    // Take the results and create an array of options excluding any that are already selected in currentData
-    const options = results
-      .filter((person) => {
-        return !currentData.some((data) => {
-          // check if option has a value property
-          return data instanceof Option && data.value === `${person.first_name} ${person.last_name}`
-        })
-      })
-      .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 the data and create an array of options 
-                    // excluding any that are already selected in currentData
-                    const options = data
-                      .filter((person) => {
-                        return !currentData.some((optionData) => {
-                          return optionData.value === `${person.first_name} ${person.last_name}`
-                        })
-                      })
-                      .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>

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

@@ -1,407 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-// We need to import from the root of the package
-// Because if we use @slim-select/vue then we loose
-// hot reloading of the file changes
-import SlimSelectJS from '../../../slim-select'
-import SlimSelect from '../../../vue/slimselect.vue'
-import Settings from '../../../slim-select/settings'
-import { Option, OptionOptional } from '../../../slim-select/store'
-import { Events } from '../../../slim-select'
-
-interface Person {
-  id: string
-  first_name: string
-  last_name: string
-  selected: number
-}
-
-export default defineComponent({
-  name: 'Vue',
-  components: {
-    SlimSelect,
-  },
-  data() {
-    return {
-      settings: {
-        showSearch: false,
-      } as Settings,
-      data: [
-        { value: 'value1', text: 'Value 1' },
-        { value: 'value2', text: 'Value 2' },
-        { value: 'value3', text: 'Value 3' },
-      ],
-      dynamicData: [] as OptionOptional[],
-      afterChangeData: [] as OptionOptional[],
-      events: {
-        afterChange: this.afterChange,
-      } as Events,
-    }
-  },
-  mounted() {
-    // Show the original select for debugging
-    // const randomComponent = this.$refs.randomDynamic as any
-    // const randomSlim = randomComponent.getSlimSelect()
-    // randomSlim.select.showUI()
-  },
-  methods: {
-    changeData() {
-      const dataSingle = this.$refs.dataSingle as any
-      const dataSingleSlim = dataSingle.getSlimSelect() as SlimSelectJS
-      dataSingleSlim.open()
-      const dataMultiple = this.$refs.dataMultiple as any
-      const dataMultipleSlim = dataMultiple.getSlimSelect() as SlimSelectJS
-      dataMultipleSlim.open()
-
-      setTimeout(() => {
-        this.data = [
-          { value: 'value4', text: 'Value 4' },
-          { value: 'value5', text: 'Value 5' },
-          { value: 'value6', text: 'Value 6' },
-        ]
-      }, 500)
-    },
-    afterChange(newVal: Option[]) {
-      this.afterChangeData = newVal
-    },
-    randomDynamicData() {
-      // 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: 20,
-          indent: false,
-          fields: [
-            {
-              name: 'key',
-              function: 'password',
-              params: {
-                lower: true,
-                upper: true,
-                numeric: true,
-                special: false,
-                space: false,
-                length: 10,
-              },
-            },
-            { name: 'first_name', function: 'firstname', params: {} },
-            { name: 'last_name', function: 'lastname', params: {} },
-            { name: 'selected', function: 'number', params: { min: 1, max: 10 } },
-          ],
-        }),
-      })
-        .then((response) => response.json())
-        .then((data: Person[]) => {
-          // Map the data to the format slim select expects
-          this.dynamicData = data.map((person: Person) => {
-            return {
-              id: person.id,
-              text: `${person.first_name} ${person.last_name}`,
-              value: `${person.first_name} ${person.last_name}`,
-              selected: person.selected >= 8,
-            } as OptionOptional
-          })
-        })
-    },
-  },
-})
-</script>
-
-<template>
-  <div id="vue" class="content">
-    <h2 class="header">Vue</h2>
-
-    <h3>Install</h3>
-    <p>The vue component is in a sub package under SlimSelect</p>
-    <pre>
-      <code class="language-bash">
-        npm install @slim-select/vue
-      </code>
-    </pre>
-    <br />
-
-    <h3>Simple example</h3>
-    <div class="row">
-      <SlimSelect>
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-      </SlimSelect>
-
-      <SlimSelect multiple>
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-      </SlimSelect>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        import { defineComponent } from 'vue'
-        import SlimSelect from '@slim-select/vue'
-
-        export default defineComponent({
-          components: {
-            SlimSelect,
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-
-        &lt;SlimSelect multiple&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-      </code>
-    </pre>
-
-    <br />
-    <div class="separator"></div>
-    <br />
-
-    <h3>Settings</h3>
-    <p>
-      Settings just like its passed as an object in normal SlimSelct will also be passed as an object to the component
-      prop
-    </p>
-
-    <div class="row">
-      <SlimSelect :settings="settings">
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-      </SlimSelect>
-
-      <SlimSelect :settings="settings" multiple>
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-      </SlimSelect>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        import { defineComponent } from 'vue'
-        import SlimSelect from '@slim-select/vue'
-
-        export default defineComponent({
-          components: {
-            SlimSelect,
-          },
-          data() {
-            return {
-              settings: {
-                showSearch: false,
-              }
-            }
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect :settings="settings"&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-
-        &lt;SlimSelect :settings="settings" multiple&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-      </code>
-    </pre>
-
-    <br />
-    <div class="separator"></div>
-    <br />
-
-    <h3>Data</h3>
-    <p>
-      Data just like its passed as an array in normal SlimSelct will also be passed as an array to the component prop.
-    </p>
-    <div class="alert info">
-      You may pass data as a prop if you would like. But you can also have reactive options that when options change the
-      select will update as well. See Reactivity below for more info.
-    </div>
-
-    <div class="row">
-      <div class="btn info" @click="changeData">Change data</div>
-      <SlimSelect ref="dataSingle" :data="data" />
-      <SlimSelect ref="dataMultiple" :data="data" multiple />
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        import { defineComponent } from 'vue'
-        import SlimSelect from '@slim-select/vue'
-
-        export default defineComponent({
-          components: {
-            SlimSelect,
-          },
-          data() {
-            return {
-              data: [
-                { value: 'value1', text: 'Value 1' },
-                { value: 'value2', text: 'Value 2' },
-                { value: 'value3', text: 'Value 3' },
-              ],
-            }
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect :data="data" /&gt;
-
-        &lt;SlimSelect :data="data" multiple /&gt;
-      </code>
-    </pre>
-
-    <br />
-    <div class="separator"></div>
-    <br />
-
-    <h3>Events</h3>
-    <p>
-      Events just like its passed as an object in normal SlimSelct will also be passed as an object to the component
-      prop.
-    </p>
-
-    <div v-if="afterChangeData.length"><strong>afterChange:</strong> {{ afterChangeData }}</div>
-    <div class="row">
-      <SlimSelect :events="events">
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-      </SlimSelect>
-
-      <SlimSelect :events="events" multiple>
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option>
-      </SlimSelect>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        import { defineComponent } from 'vue'
-        import SlimSelect from '@slim-select/vue'
-
-        export default defineComponent({
-          components: {
-            SlimSelect,
-          },
-          data() {
-            return {
-              events: {
-                afterChange: this.afterChange,
-              },
-            }
-          },
-          methods: {
-            afterChange(newVal) {
-              console.log(newVal)
-            },
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect :events="events"&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-
-        &lt;SlimSelect :events="events" multiple&gt;
-          &lt;option value="1"&gt;Option 1&lt;/option&gt;
-          &lt;option value="2"&gt;Option 2&lt;/option&gt;
-          &lt;option value="3"&gt;Option 3&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-      </code>
-    </pre>
-
-    <br />
-    <div class="separator"></div>
-    <br />
-
-    <h3>Reactivity</h3>
-    <p>
-      Slim select will look out for any options changes that happen to the select options and SlimSelect will update
-      accordingly. This is done via mutation observers.
-    </p>
-
-    <div class="row">
-      <div class="btn info" @click="randomDynamicData">Change data</div>
-      <SlimSelect ref="randomDynamic">
-        <option v-for="d in dynamicData" :key="d.id" :value="d.value" :selected="d.selected">{{ d.text }}</option>
-      </SlimSelect>
-
-      <SlimSelect multiple>
-        <option v-for="d in dynamicData" :value="d.value" :selected="d.selected">{{ d.text }}</option>
-      </SlimSelect>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        import { defineComponent } from 'vue'
-        import SlimSelect from '@slim-select/vue'
-
-        export default defineComponent({
-          components: {
-            SlimSelect,
-          },
-          data() {
-            return {
-              dynamicData: []
-            }
-          },
-          methods: {
-            changeData() {
-              this.dynamicData = [
-                { id: 1, value: 1, text: 'Option 1', selected: true },
-                { id: 2, value: 2, text: 'Option 2', selected: false },
-                { id: 3, value: 3, text: 'Option 3', selected: false },
-              ]
-            },
-          },
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;SlimSelect :events="events"&gt;
-          &lt;option v-for="d in dynamicData" :key="d.id" :value="d.value" :selected="d.selected"&gt;&#123;&#123; d.text &#125;&#125;&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-
-        &lt;SlimSelect :events="events" multiple&gt;
-          &lt;option v-for="d in dynamicData" :value="d.value" :selected="d.selected"&gt;&#123;&#123; d.text &#125;&#125;&lt;/option&gt;
-        &lt;/SlimSelect&gt;
-      </code>
-    </pre>
-  </div>
-</template>