slim-select 2.0.2 → 2.2.0

package/src/docs/pages/data.vue

@@ -49,6 +49,8 @@ export default defineComponent({
         <code class="language-javascript">
           var optgroup = {
             label: 'label', // Required
+            selectAll: false, // Optional - default false
+            closabel: 'off', // Optional - default 'off' - 'off', 'open', 'close'
             options: [] // Required - value is an array of options
           }
 
@@ -57,7 +59,9 @@ export default defineComponent({
             value: 'value', // Optional - value will be set by text if not set
             html: '&lt;b&gt;Html&lt;/b&gt;', // Optional - will be used for display purposes if set
             selected: false, // Optional - default is false
+            display: true, // Optional - default is true
             disabled: false, // Optional - default is false
+            mandatory: false, // Optional - default is false
             placeholder: false, // Optional - default is false
             class: '', // Optional - default is not set
             style: '', // Optional - default is not set

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
@@ -59,7 +60,7 @@ onMounted(() => {
   })
 })
 
-function searchPromise(search: string, selectedData: DataArray): Promise<Option[]> {
+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')
@@ -76,13 +77,20 @@ function searchPromise(search: string, selectedData: DataArray): Promise<Option[
       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[]
+    // 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(() => {
@@ -134,13 +142,20 @@ function searchPromise(search: string, selectedData: DataArray): Promise<Option[
                 })
                   .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}`,
-                      }
-                    })
+                    // 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)
                   })

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

@@ -1,39 +1,407 @@
 <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 {
+              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">
-        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>