slim-select 2.0.1 → 2.1.0

package/src/docs/assets/scss/_variables.scss

@@ -10,7 +10,7 @@
   --color-alert-info-border: #b6d4fe;
 
   // Sizes
-  --width-max: 1200px;
+  --width-max: 1000px;
   --height-header: 90px;
   --width-nav: 200px;
   --height-nav: 30px;

package/src/docs/assets/scss/misc.scss

@@ -40,6 +40,13 @@ p {
   margin: 0 0 var(--spacing-half) 0;
 }
 
+.separator {
+  height: 1px;
+  width: 100%;
+  margin: var(--spacing-half) 0 var(--spacing-half) 0;
+  background-color: var(--color-border);
+}
+
 .bold {
   font-weight: bold;
 }

package/src/docs/env.d.ts

@@ -7,6 +7,7 @@ declare module '*.vue' {
   export default component
 }
 
+declare module '@slim-select/vue'
 declare module 'chance'
 declare module 'prismjs'
 declare module 'prismjs/*'

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

@@ -10,7 +10,10 @@ export default defineComponent({
       select: this.$refs.addableSingle as HTMLSelectElement,
       events: {
         addable: (value: string) => {
-          return value
+          return {
+            text: value,
+            value: value.toLowerCase(),
+          }
         },
       },
     })
@@ -19,10 +22,14 @@ export default defineComponent({
       select: this.$refs.addableMultiple as HTMLSelectElement,
       events: {
         addable: (value: string) => {
-          return {
-            text: value,
-            value: value.toLowerCase(),
-          }
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                text: value,
+                value: value,
+              })
+            }, 100)
+          })
         },
       },
     })
@@ -65,11 +72,20 @@ export default defineComponent({
               // 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
+              // 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,
+                })
+              })
             }
           }
         })

package/src/docs/pages/events/before_after_change.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: 'BeforeAfterChange',
@@ -16,9 +17,13 @@ export default defineComponent({
   mounted() {
     new SlimSelect({
       select: this.$refs.beforeChangeSingle as HTMLSelectElement,
+      settings: {
+        allowDeselect: true,
+      },
       events: {
         beforeChange: (newValue: DataArray, oldValue: DataArray) => {
           this.beforeChangeSingle = oldValue
+          return true
         },
       },
     })
@@ -35,6 +40,9 @@ export default defineComponent({
 
     new SlimSelect({
       select: this.$refs.afterChangeSingle as HTMLSelectElement,
+      settings: {
+        allowDeselect: true,
+      },
       events: {
         afterChange: (value: DataArray) => {
           this.afterChangeSingle = value
@@ -63,11 +71,16 @@ export default defineComponent({
       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>
@@ -108,6 +121,7 @@ export default defineComponent({
     </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>

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/index.vue

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

@@ -0,0 +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="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">
+        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

@@ -142,7 +142,7 @@ export default defineComponent({
   <div id="home" class="content">
     <div class="samples row">
       <div class="single">
-        <h2>Single Select 2</h2>
+        <h2>Single Select</h2>
         <select ref="slimSingle">
           <option data-placeholder="true"></option>
           <option value="best">Best</option>
@@ -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>