slim-select 2.0.2 → 2.1.0

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, Ref, ref } from 'vue'
 
-import SlimSelect, { DataArray, Option } from '../../../slim-select'
+import SlimSelect from '../../../slim-select'
+import { DataArray, Option } from '../../../slim-select/store'
 
 interface Person {
   first_name: string

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

@@ -1,39 +1,405 @@
 <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="error" class="content">
+  <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 {
+              data: [],
+            }
+          },
+          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">
-        var select = new SlimSelect({
-          select: '#selectElement',
-          events: {
-            error: function(err) {
-              console.error(err)
+        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>

package/src/docs/pages/home.vue

@@ -166,26 +166,26 @@ export default defineComponent({
 
         <div class="row">
           <ul class="list">
-            <li><img src="../images/check-mark.svg" /> No Dependencies</li>
-            <li><img src="../images/check-mark.svg" /> ~30kb - ~5kb gzip</li>
-            <li><img src="../images/check-mark.svg" /> Single Select</li>
-            <li><img src="../images/check-mark.svg" /> Multiple Select</li>
-            <li><img src="../images/check-mark.svg" /> Addable Options</li>
-            <li><img src="../images/check-mark.svg" /> Html Options</li>
-            <li><img src="../images/check-mark.svg" /> Settable Data</li>
-            <li><img src="../images/check-mark.svg" /> Callback Events</li>
-            <li><img src="../images/check-mark.svg" /> Placeholders</li>
+            <li><img src="../assets/images/check-mark.svg" /> No Dependencies</li>
+            <li><img src="../assets/images/check-mark.svg" /> ~30kb - ~5kb gzip</li>
+            <li><img src="../assets/images/check-mark.svg" /> Single Select</li>
+            <li><img src="../assets/images/check-mark.svg" /> Multiple Select</li>
+            <li><img src="../assets/images/check-mark.svg" /> Addable Options</li>
+            <li><img src="../assets/images/check-mark.svg" /> Html Options</li>
+            <li><img src="../assets/images/check-mark.svg" /> Settable Data</li>
+            <li><img src="../assets/images/check-mark.svg" /> Callback Events</li>
+            <li><img src="../assets/images/check-mark.svg" /> Placeholders</li>
           </ul>
           <ul class="list">
-            <li><img src="../images/check-mark.svg" /> Advanced Search</li>
-            <li><img src="../images/check-mark.svg" /> Tabbable</li>
-            <li><img src="../images/check-mark.svg" /> Disable Options</li>
-            <li><img src="../images/check-mark.svg" /> Light Css</li>
-            <li><img src="../images/check-mark.svg" /> Light Color Scheme</li>
-            <li><img src="../images/check-mark.svg" /> Style Inheritance</li>
-            <li><img src="../images/check-mark.svg" /> Clean Animations</li>
-            <li><img src="../images/check-mark.svg" /> Performant</li>
-            <li><img src="../images/check-mark.svg" /> Typescript</li>
+            <li><img src="../assets/images/check-mark.svg" /> Advanced Search</li>
+            <li><img src="../assets/images/check-mark.svg" /> Tabbable</li>
+            <li><img src="../assets/images/check-mark.svg" /> Disable Options</li>
+            <li><img src="../assets/images/check-mark.svg" /> Light Css</li>
+            <li><img src="../assets/images/check-mark.svg" /> Light Color Scheme</li>
+            <li><img src="../assets/images/check-mark.svg" /> Style Inheritance</li>
+            <li><img src="../assets/images/check-mark.svg" /> Clean Animations</li>
+            <li><img src="../assets/images/check-mark.svg" /> Performant</li>
+            <li><img src="../assets/images/check-mark.svg" /> Typescript</li>
           </ul>
         </div>
       </div>

package/src/docs/pages/methods/get_data.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import SlimSelect, { DataArray } from '../../../slim-select'
+import SlimSelect from '../../../slim-select'
+import { DataArray } from '../../../slim-select/store'
 
 export default defineComponent({
   name: 'GetData',

package/src/docs/pages/methods/open_close.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import SlimSelect, { DataArray } from '../../../slim-select'
+import SlimSelect from '../../../slim-select'
 
 export default defineComponent({
   name: 'OpenClose',

package/src/slim-select/index.ts

@@ -14,7 +14,7 @@ export interface Config {
 export interface Events {
   search?: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial
   searchFilter?: (option: Option, search: string) => boolean
-  addable?: (value: string) => OptionOptional | string
+  addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string
   beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void
   afterChange?: (newVal: Option[]) => void
   beforeOpen?: () => void

package/src/slim-select/render.ts

@@ -5,7 +5,7 @@ import Store, { DataArray, Optgroup, Option, OptionOptional } from './store'
 export interface Callbacks {
   open: () => void
   close: () => void
-  addable?: (value: string) => OptionOptional | string
+  addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string
   setSelected: (value: string[]) => void
   addOption: (option: Option) => void
   search: (search: string) => void
@@ -266,6 +266,8 @@ export default class Render {
     if (!this.settings.allowDeselect || this.settings.isMultiple) {
       deselect.classList.add(this.classes.hide)
     }
+
+    // Add deselect onclick event
     deselect.onclick = (e: Event) => {
       e.stopPropagation()
 
@@ -274,7 +276,29 @@ export default class Render {
         return
       }
 
-      this.callbacks.setSelected([''])
+      // By Default we will delete
+      let shouldDelete = true
+      const before = this.store.getSelectedOptions()
+      const after = [] as Option[]
+
+      // Add beforeChange callback
+      if (this.callbacks.beforeChange) {
+        shouldDelete = this.callbacks.beforeChange(after, before) === true
+      }
+
+      if (shouldDelete) {
+        this.callbacks.setSelected([''])
+
+        // Check if we need to close the dropdown
+        if (this.settings.closeOnSelect) {
+          this.callbacks.close()
+        }
+
+        // Run afterChange callback
+        if (this.callbacks.afterChange) {
+          this.callbacks.afterChange(after)
+        }
+      }
     }
 
     // Add deselect svg
@@ -466,8 +490,11 @@ export default class Render {
 
     // Only add deletion if the option is not mandatory
     if (!option.mandatory) {
+      // Create delete div element
       const deleteDiv = document.createElement('div')
       deleteDiv.classList.add(this.classes.valueDelete)
+
+      // Add delete onclick event
       deleteDiv.onclick = (e: Event) => {
         e.preventDefault()
         e.stopPropagation()
@@ -656,13 +683,18 @@ export default class Render {
 
     // If addable is enabled, add the addable div
     if (this.callbacks.addable) {
+      // Add main class
       addable.classList.add(this.classes.addable)
+
+      // Add svg icon
       const plus = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
       plus.setAttribute('viewBox', '0 0 100 100')
       const plusPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
       plusPath.setAttribute('d', this.classes.addablePath)
       plus.appendChild(plusPath)
       addable.appendChild(plus)
+
+      // Add click event to addable div
       addable.onclick = (e: Event) => {
         e.preventDefault()
         e.stopPropagation()
@@ -679,35 +711,61 @@ export default class Render {
           return
         }
 
+        // Run finish will be ran at the end of the addable function.
+        // Reason its in a function is so we can run it after the
+        // addable function is done for promise based addables
+        const runFinish = (oo: OptionOptional) => {
+          let newOption = new Option(oo)
+
+          // Call addOption to add the new option
+          this.callbacks.addOption(newOption)
+
+          // set selected value for single and multiple
+          if (this.settings.isMultiple) {
+            let values = this.store.getSelected()
+            values.push(newOption.value)
+            this.callbacks.setSelected(values)
+          } else {
+            this.callbacks.setSelected([newOption.value])
+          }
+
+          // Clear search
+          this.callbacks.search('')
+
+          // Close it only if closeOnSelect = true
+          if (this.settings.closeOnSelect) {
+            setTimeout(() => {
+              // Give it a little padding for a better looking animation
+              this.callbacks.close()
+            }, 100)
+          }
+        }
+
         // Call addable callback
         const addableValue = this.callbacks.addable(inputValue)
 
-        // If the addableValue is a string, we will add it as a new option
-        // Otherwise we will assume it is an option object
-        if (typeof addableValue === 'string') {
-          this.callbacks.addOption(
-            new Option({
-              text: addableValue,
-              value: addableValue,
-            }),
-          )
+        // If addableValue is a promise, wait for it to resolve
+        if (addableValue instanceof Promise) {
+          addableValue.then((value) => {
+            if (typeof value === 'string') {
+              runFinish({
+                text: value,
+                value: value,
+              })
+            } else {
+              runFinish(value)
+            }
+          })
+        } else if (typeof addableValue === 'string') {
+          runFinish({
+            text: addableValue,
+            value: addableValue,
+          })
         } else {
-          this.callbacks.addOption(new Option(addableValue))
+          runFinish(addableValue)
         }
 
-        // Add option to selected
-        this.callbacks.setSelected([inputValue])
-
-        // Clear search
-        this.callbacks.search('')
-
-        // Close it only if closeOnSelect = true
-        if (this.settings.closeOnSelect) {
-          setTimeout(() => {
-            // Give it a little padding for a better looking animation
-            this.callbacks.close()
-          }, 100)
-        }
+        return
       }
       main.appendChild(addable)