slim-select 2.0.2 → 2.2.0

package/src/docs/pages/home.vue

@@ -95,41 +95,44 @@ export default defineComponent({
     }
   }
 
-  .callouts {
+  .support {
+    .links {
+      display: flex;
+      flex-direction: row;
+      gap: var(--spacing);
+    }
+  }
+
+  .features {
+    flex: 1 1 auto;
     display: flex;
-    padding: 20px 0 0 0;
+    flex-direction: column;
 
-    .features {
-      flex: 1 1 auto;
-      display: flex;
-      flex-direction: column;
+    .header {
+      padding: 0 0 var(--spacing) 0;
+    }
 
-      .header {
-        padding: 0 0 var(--spacing) 0;
-      }
+    .row {
+      justify-content: space-around;
 
-      .row {
-        justify-content: space-around;
+      .list {
+        display: flex;
+        flex-direction: column;
+        list-style: none;
+        padding: 0px;
+        width: 200px;
+        margin: 0 auto;
 
-        .list {
+        li {
           display: flex;
-          flex-direction: column;
-          list-style: none;
-          padding: 0px;
-          width: 200px;
-          margin: 0 auto;
-
-          li {
-            display: flex;
-            align-items: center;
-            padding: 0 0 5px 0;
-            font-weight: bold;
-            font-size: 20px;
-
-            img {
-              width: 20px;
-              padding: 0 8px 0 0;
-            }
+          align-items: center;
+          padding: 0 0 5px 0;
+          font-weight: bold;
+          font-size: 20px;
+
+          img {
+            width: 20px;
+            padding: 0 8px 0 0;
           }
         }
       }
@@ -160,34 +163,78 @@ export default defineComponent({
       </div>
     </div>
 
-    <div class="callouts">
-      <div class="features">
-        <div class="header"><h2>Features</h2></div>
-
-        <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>
-          </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>
-          </ul>
-        </div>
+    <br />
+
+    <div class="support">
+      <h2 class="header">Support</h2>
+      <p>Help support creators that make development easier!</p>
+      <div class="links">
+        <iframe
+          src="https://github.com/sponsors/brianvoe/button"
+          title="Sponsor brianvoe"
+          height="35"
+          width="116"
+          style="border: 0"
+        ></iframe>
+        <a href="https://www.buymeacoffee.com/brianvoe" target="_blank"
+          ><img
+            src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png"
+            alt="Buy Me A Coffee"
+            style="height: auto !important; width: auto !important"
+        /></a>
+      </div>
+    </div>
+
+    <br />
+    <div class="separator" />
+    <br />
+
+    <div class="features">
+      <h2 class="header">Features</h2>
+
+      <div class="row">
+        <ul class="list">
+          <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="../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>
+
+    <br />
+    <div class="separator" />
+    <br />
+
+    <div class="frameworks">
+      <h2 class="header">Frameworks</h2>
+      <p>
+        SlimSelect is in the process of adding a few framework integrations.<br />
+        If you are an expert in any specific framework and would like to help out, please reach out!
+      </p>
+      <div class="row frameworks">
+        <router-link to="frameworks#vue">
+          <svg viewBox="0 0 128 128" width="100" height="100">
+            <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z"></path>
+            <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z"></path>
+          </svg>
+        </router-link>
       </div>
     </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/docs/pages/settings/closable.vue

@@ -0,0 +1,128 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'Closable',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.closableSingle as HTMLSelectElement,
+    })
+    new SlimSelect({
+      select: this.$refs.closableMultiple as HTMLSelectElement,
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="closable" class="content">
+    <h2 class="header">closable</h2>
+    <p>closable is a optgroup settings that adds the ability to have closable optgroup options.</p>
+    <p>Values: <strong>"off"</strong> | <strong>"open"</strong> | <strong>"close"</strong></p>
+    <p>Default: <strong>"off"</strong></p>
+
+    <div class="alert info">You can set closable either by data or by html dataset added to the optgroup element</div>
+
+    <div class="row">
+      <select ref="closableSingle">
+        <optgroup label="Label 1" data-closable="off">
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </optgroup>
+        <optgroup label="Label 2" data-closable="open">
+          <option value="value4">Value 4</option>
+          <option value="value5">Value 5</option>
+          <option value="value6">Value 6</option>
+        </optgroup>
+        <optgroup label="Label 3" data-closable="close">
+          <option value="value7">Value 7</option>
+          <option value="value8">Value 8</option>
+          <option value="value9">Value 9</option>
+        </optgroup>
+      </select>
+      <select ref="closableMultiple" multiple>
+        <optgroup label="Label 1" data-selectall="true" data-closable="off">
+          <option value="value1">Value 1</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </optgroup>
+        <optgroup label="Label 2" data-selectall="true" data-closable="open">
+          <option value="value4">Value 4</option>
+          <option value="value5">Value 5</option>
+          <option value="value6">Value 6</option>
+        </optgroup>
+        <optgroup label="Label 3" data-selectall="true" data-closable="close">
+          <option value="value7">Value 7</option>
+          <option value="value8">Value 8</option>
+          <option value="value9">Value 9</option>
+        </optgroup>
+      </select>
+    </div>
+    <br />
+
+    <h3>Via data</h3>
+    <pre>
+      <code class="language-javascript">
+        new SlimSelect({
+          select: '#selectElement',
+          data: [
+            {
+              label: 'Label 1',
+              closable: 'off',
+              options: [
+                { text: 'Option 1', value: '1' },
+                { text: 'Option 2', value: '2' },
+                { text: 'Option 3', value: '3' },
+              ],
+            },
+            {
+              label: 'Label 2',
+              closable: 'open',
+              options: [
+                { text: 'Option 4', value: '4' },
+                { text: 'Option 5', value: '5' },
+                { text: 'Option 6', value: '6' },
+              ],
+            },
+            {
+              label: 'Label 3',
+              closable: 'close',
+              options: [
+                { text: 'Option 7', value: '7' },
+                { text: 'Option 8', value: '8' },
+                { text: 'Option 9', value: '9' },
+              ],
+            },
+          ],
+        })
+      </code>
+    </pre>
+    <br />
+
+    <h3>Via html</h3>
+    <pre>
+      <code class="language-html">
+        &lt;select ref="closable" multiple&gt;
+          &lt;optgroup label="Label 1" data-closable="off"&gt;
+            &lt;option value="value1"&gt;Value 1&lt;/option&gt;
+            &lt;option value="value2"&gt;Value 2&lt;/option&gt;
+            &lt;option value="value3"&gt;Value 3&lt;/option&gt;
+          &lt;/optgroup&gt;
+          &lt;optgroup label="Label 2" data-closable="open"&gt;
+            &lt;option value="value4"&gt;Value 4&lt;/option&gt;
+            &lt;option value="value5"&gt;Value 5&lt;/option&gt;
+            &lt;option value="value6"&gt;Value 6&lt;/option&gt;
+          &lt;/optgroup&gt;
+          &lt;optgroup label="Label 3" data-closable="close"&gt;
+            &lt;option value="value7"&gt;Value 7&lt;/option&gt;
+            &lt;option value="value8"&gt;Value 8&lt;/option&gt;
+            &lt;option value="value9"&gt;Value 9&lt;/option&gt;
+          &lt;/optgroup&gt;
+        &lt;/select&gt;
+      </code>
+    </pre>
+  </div>
+</template>

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

@@ -3,6 +3,7 @@ import { defineComponent } from 'vue'
 
 // Components
 import AlwaysOpen from './always_open.vue'
+import Closable from './closable.vue'
 import CloseOnSelect from './close_on_select.vue'
 import ContentLocation from './content_location.vue'
 import ContentPosition from './content_position.vue'
@@ -18,7 +19,7 @@ import OpenPosition from './open_position.vue'
 import Placeholder from './placeholder.vue'
 import Search from './search.vue'
 import Select from './select.vue'
-import SelectByGroup from './select_by_group.vue'
+import SelectAll from './select_all.vue'
 import ShowTooltip from './show_tooltip.vue'
 import Styles from './styles.vue'
 
@@ -42,7 +43,8 @@ export default defineComponent({
     Search,
     CloseOnSelect,
     ShowTooltip,
-    SelectByGroup,
+    SelectAll,
+    Closable,
     HideSelected,
   },
 })
@@ -67,7 +69,8 @@ export default defineComponent({
     <Search />
     <CloseOnSelect />
     <ShowTooltip />
-    <SelectByGroup />
+    <SelectAll />
+    <Closable />
     <HideSelected />
   </div>
 </template>

package/src/docs/pages/settings/select_all.vue

@@ -0,0 +1,88 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'SelectAll',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.selectAll as HTMLSelectElement,
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="selectAll" class="content">
+    <h2 class="header">selectAll</h2>
+    <p>
+      selectAll is a setting that can be used to add a select all action to an optgroup. This setting can be set to true
+      or false. If set to true, a select all option will be added to the top of the selected values. If set to false or
+      not set at all, no select all action will be added to the optgroup.
+    </p>
+    <div class="alert info">You can set selectAll either by data or by html dataset added to the optgroup element</div>
+
+    <select ref="selectAll" multiple>
+      <optgroup label="Label 1" data-selectall="true">
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+      </optgroup>
+      <optgroup label="Label 2">
+        <option value="value4">Value 4</option>
+        <option value="value5">Value 5</option>
+        <option value="value6">Value 6</option>
+      </optgroup>
+    </select>
+    <br />
+
+    <h3>Via data</h3>
+    <pre>
+      <code class="language-javascript">
+        new SlimSelect({
+          select: '#selectElement',
+          data: [
+            {
+              label: 'Label 1',
+              selectAll: true,
+              options: [
+                { text: 'Option 1', value: '1' },
+                { text: 'Option 2', value: '2' },
+                { text: 'Option 3', value: '3' },
+              ],
+            },
+            {
+              label: 'Label 2',
+              selectAll: false,
+              options: [
+                { text: 'Option 4', value: '4' },
+                { text: 'Option 5', value: '5' },
+                { text: 'Option 6', value: '6' },
+              ],
+            },
+          ],
+        })
+      </code>
+    </pre>
+    <br />
+
+    <h3>Via html</h3>
+    <pre>
+      <code class="language-html">
+        &lt;select ref="selectAll" multiple&gt;
+          &lt;optgroup label="Label 1" data-selectall="true"&gt;
+            &lt;option value="value1"&gt;Value 1&lt;/option&gt;
+            &lt;option value="value2"&gt;Value 2&lt;/option&gt;
+            &lt;option value="value3"&gt;Value 3&lt;/option&gt;
+          &lt;/optgroup&gt;
+          &lt;optgroup label="Label 2"&gt;
+            &lt;option value="value4"&gt;Value 4&lt;/option&gt;
+            &lt;option value="value5"&gt;Value 5&lt;/option&gt;
+            &lt;option value="value6"&gt;Value 6&lt;/option&gt;
+          &lt;/optgroup&gt;
+        &lt;/select&gt;
+      </code>
+    </pre>
+  </div>
+</template>

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
@@ -92,7 +92,7 @@ export default class SlimSelect {
     this.select.hideUI() // Hide the original select element
 
     // Add select listeners
-    this.select.addSelectChangeListener((data: DataArray) => {
+    this.select.addSelectChangeListener((data: DataArrayPartial) => {
       // Run set data from the values given
       this.setData(data)
     })
@@ -126,6 +126,8 @@ export default class SlimSelect {
 
     // Setup render class
     this.render = new Render(this.settings, this.store, callbacks)
+    this.render.renderValues()
+    this.render.renderOptions(this.store.getData())
 
     // Add render after original select element
     if (this.selectEl.parentNode) {