slim-select 2.1.0 → 2.2.0

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

@@ -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) {

package/src/slim-select/render.ts

@@ -89,17 +89,28 @@ export default class Render {
     addable: 'ss-addable',
     addablePath: 'M50,10 L50,90 M10,50 L90,50', // Not a class but whatever
 
-    // List options
+    // List optgroups/options
     list: 'ss-list',
+
+    // Optgroup
     optgroup: 'ss-optgroup',
     optgroupLabel: 'ss-optgroup-label',
-    optgroupSelectable: 'ss-optgroup-selectable',
+    optgroupLabelText: 'ss-optgroup-label-text',
+    optgroupActions: 'ss-optgroup-actions',
+    optgroupSelectAll: 'ss-selectall', // optgroup select all
+    optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50', // Not a class but whatever
+    optgroupSelectAllCheck: 'M30,45 L50,70 L90,10', // Not a class but whatever
+    optgroupClosable: 'ss-closable',
+
+    // Option
     option: 'ss-option',
-    optionSelected: 'ss-option-selected',
     optionDelete: 'M10,10 L90,90 M10,90 L90,10', // Not a class but whatever
     highlighted: 'ss-highlighted',
 
     // Misc
+    open: 'ss-open',
+    close: 'ss-close',
+    selected: 'ss-selected',
     error: 'ss-error',
     disabled: 'ss-disabled',
     hide: 'ss-hide',
@@ -113,12 +124,6 @@ export default class Render {
     this.main = this.mainDiv()
     this.content = this.contentDiv()
 
-    // Render the values
-    this.renderValues()
-
-    // Render the options
-    this.renderOptions(this.store.getData())
-
     // Add content to the content location settings
     this.settings.contentLocation.appendChild(this.content.main)
   }
@@ -826,25 +831,31 @@ export default class Render {
     // Loop through options and find the highlighted one
     for (let i = 0; i < options.length; i++) {
       if (options[i].classList.contains(this.classes.highlighted)) {
+        const prevOption = options[i]
         // Remove highlighted class from current one
-        options[i].classList.remove(this.classes.highlighted)
+        prevOption.classList.remove(this.classes.highlighted)
+
+        // If previous option has parent classes ss-optgroup with ss-open then click it
+        const prevParent = prevOption.parentElement
+        if (prevParent && prevParent.classList.contains(this.classes.open)) {
+          const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel) as HTMLDivElement
+          if (optgroupLabel) {
+            optgroupLabel.click()
+          }
+        }
 
         // Highlight the next one
-        if (dir === 'down') {
-          if (i + 1 < options.length) {
-            options[i + 1].classList.add(this.classes.highlighted)
-            this.ensureElementInView(this.content.list, options[i + 1])
-          } else {
-            options[0].classList.add(this.classes.highlighted)
-            this.ensureElementInView(this.content.list, options[0])
-          }
-        } else {
-          if (i - 1 >= 0) {
-            options[i - 1].classList.add(this.classes.highlighted)
-            this.ensureElementInView(this.content.list, options[i - 1])
-          } else {
-            options[options.length - 1].classList.add(this.classes.highlighted)
-            this.ensureElementInView(this.content.list, options[options.length - 1])
+        let selectOption =
+          options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1]
+        selectOption.classList.add(this.classes.highlighted)
+        this.ensureElementInView(this.content.list, selectOption)
+
+        // If selected option has parent classes ss-optgroup with ss-close then click it
+        const selectParent = selectOption.parentElement
+        if (selectParent && selectParent.classList.contains(this.classes.close)) {
+          const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel) as HTMLDivElement
+          if (optgroupLabel) {
+            optgroupLabel.click()
           }
         }
 
@@ -915,21 +926,140 @@ export default class Render {
         // Create label
         const optgroupLabel = document.createElement('div')
         optgroupLabel.classList.add(this.classes.optgroupLabel)
-        optgroupLabel.innerHTML = d.label
+        optgroupEl.appendChild(optgroupLabel)
+
+        // Create label text div element
+        const optgroupLabelText = document.createElement('div')
+        optgroupLabelText.classList.add(this.classes.optgroupLabelText)
+        optgroupLabelText.textContent = d.label
+        optgroupLabel.appendChild(optgroupLabelText)
+
+        // Create options container
+        const optgroupActions = document.createElement('div')
+        optgroupActions.classList.add(this.classes.optgroupActions)
+        optgroupLabel.appendChild(optgroupActions)
 
         // If selectByGroup is true and isMultiple then add click event to label
-        if (this.settings.selectByGroup && this.settings.isMultiple) {
-          optgroupLabel.classList.add(this.classes.optgroupSelectable)
+        if (this.settings.isMultiple && d.selectAll) {
+          // Create new div to hold a checkbox svg
+          const selectAll = document.createElement('div')
+          selectAll.classList.add(this.classes.optgroupSelectAll)
+
+          // Check options and if all are selected, if so add class selected
+          let allSelected = true
+          for (const o of d.options) {
+            if (!o.selected) {
+              allSelected = false
+              break
+            }
+          }
+
+          // Add class if all selected
+          if (allSelected) {
+            selectAll.classList.add(this.classes.selected)
+          }
+
+          // Add select all text span
+          const selectAllText = document.createElement('span')
+          selectAllText.textContent = 'Select All'
+          selectAll.appendChild(selectAllText)
+
+          // Create new svg for checkbox
+          const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+          selectAllSvg.setAttribute('viewBox', '0 0 100 100')
+          selectAll.appendChild(selectAllSvg)
+
+          // Create new path for box
+          const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+          selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox)
+          selectAllSvg.appendChild(selectAllBox)
+
+          // Create new path for check
+          const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+          selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck)
+          selectAllSvg.appendChild(selectAllCheck)
+
+          // Add click event listener to select all
+          selectAll.addEventListener('click', (e: MouseEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+
+            // Get the store current selected values
+            const currentSelected = this.store.getSelected()
+
+            // If all selected, remove all options from selected
+            // call setSelected and return
+            if (allSelected) {
+              // Put together new list minus all options in this optgroup
+              const newSelected = currentSelected.filter((s) => {
+                for (const o of d.options) {
+                  if (s === o.value) {
+                    return false
+                  }
+                }
+
+                return true
+              })
+
+              this.callbacks.setSelected(newSelected)
+              return
+            } else {
+              // Put together new list with all options in this optgroup
+              const newSelected = currentSelected.concat(d.options.map((o) => o.value))
+
+              this.callbacks.setSelected(newSelected)
+            }
+          })
+
+          // Append select all to label
+          optgroupActions.appendChild(selectAll)
+        }
+
+        // If optgroup has collapsable
+        if (d.closable !== 'off') {
+          // Create new div to hold a checkbox svg
+          const optgroupClosable = document.createElement('div')
+          optgroupClosable.classList.add(this.classes.optgroupClosable)
+
+          // Create svg arrow
+          const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+          optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100')
+          optgroupClosableSvg.classList.add(this.classes.arrow)
+          optgroupClosable.appendChild(optgroupClosableSvg)
+
+          // Create new path for arrow
+          const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+          optgroupClosableArrow.setAttribute('d', this.classes.arrow)
+          optgroupClosableSvg.appendChild(optgroupClosableArrow)
+
+          // Add primary open or close class to optgroupEl
+          if (d.closable === 'open') {
+            optgroupEl.classList.add(this.classes.open)
+            optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen)
+          } else if (d.closable === 'close') {
+            optgroupEl.classList.add(this.classes.close)
+            optgroupClosableArrow.setAttribute('d', this.classes.arrowClose)
+          }
+
+          // Add click event listener to close
           optgroupLabel.addEventListener('click', (e: MouseEvent) => {
             e.preventDefault()
             e.stopPropagation()
 
-            for (const childEl of optgroupEl.children as any as HTMLDivElement[]) {
-              if (childEl.className.indexOf(this.classes.option) !== -1) {
-                childEl.click()
-              }
+            // If optgroup is closed, open it
+            if (optgroupEl.classList.contains(this.classes.close)) {
+              optgroupEl.classList.remove(this.classes.close)
+              optgroupEl.classList.add(this.classes.open)
+              optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen)
+            } else {
+              optgroupEl.classList.remove(this.classes.open)
+              optgroupEl.classList.add(this.classes.close)
+              optgroupClosableArrow.setAttribute('d', this.classes.arrowClose)
             }
           })
+
+          // Append close to label
+          optgroupActions.appendChild(optgroupClosable)
         }
 
         // Add optgroup label
@@ -1006,9 +1136,9 @@ export default class Render {
 
     // If option is selected
     if (option.selected) {
-      optionEl.classList.add(this.classes.optionSelected)
+      optionEl.classList.add(this.classes.selected)
     } else {
-      optionEl.classList.remove(this.classes.optionSelected)
+      optionEl.classList.remove(this.classes.selected)
     }
 
     // Add click event listener

package/src/slim-select/select.ts

@@ -1,12 +1,12 @@
 import { generateID, kebabCase } from './helpers'
-import { DataArray, Optgroup, Option } from './store'
+import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store'
 
 export default class Select {
   public select: HTMLSelectElement
   public listen: boolean = false
 
   // Mutation observer fields
-  public onSelectChange?: (data: DataArray) => void
+  public onSelectChange?: (data: DataArrayPartial) => void
   public onValueChange?: (value: string[]) => void
   private observer: MutationObserver | null = null
 
@@ -55,7 +55,7 @@ export default class Select {
   }
 
   // Add change listener to original select
-  public addSelectChangeListener(func: (data: DataArray) => void): void {
+  public addSelectChangeListener(func: (data: DataArrayPartial) => void): void {
     this.onSelectChange = func
     this.addObserver()
     this.connectObserver()
@@ -129,8 +129,8 @@ export default class Select {
   }
 
   // From the select element pull optgroup and options into data
-  public getData(): DataArray {
-    let data = []
+  public getData(): DataArrayPartial {
+    let data = [] as DataArrayPartial
 
     // Loop through nodes and get data
     const nodes = this.select.childNodes as any as HTMLOptGroupElement[] | HTMLOptionElement[]
@@ -149,23 +149,43 @@ export default class Select {
     return data
   }
 
-  public getDataFromOptgroup(optgroup: HTMLOptGroupElement): Optgroup {
+  public getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional {
     let data = {
-      id: '',
+      id: (optgroup.dataset ? optgroup.dataset.id : false) || '',
       label: optgroup.label,
+      selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
+      closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
       options: [],
-    } as Optgroup
+    } as OptgroupOptional
 
     const options = optgroup.childNodes as any as HTMLOptionElement[]
     for (const o of options) {
       if (o.nodeName === 'OPTION') {
-        data.options.push(this.getDataFromOption(o as HTMLOptionElement))
+        data.options!.push(this.getDataFromOption(o as HTMLOptionElement))
       }
     }
 
     return data
   }
 
+  // From passed in option pull pieces of usable information
+  public getDataFromOption(option: HTMLOptionElement): Option {
+    return {
+      id: (option.dataset ? option.dataset.id : false) || '',
+      value: option.value,
+      text: option.text,
+      html: option.innerHTML,
+      selected: option.selected,
+      display: option.style.display === 'none' ? false : true,
+      disabled: option.disabled,
+      mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
+      placeholder: option.dataset.placeholder === 'true',
+      class: option.className,
+      style: option.style.cssText,
+      data: option.dataset,
+    } as Option
+  }
+
   public getSelectedValues(): string[] {
     let values = []
 
@@ -195,24 +215,6 @@ export default class Select {
     return values
   }
 
-  // From passed in option pull pieces of usable information
-  public getDataFromOption(option: HTMLOptionElement): Option {
-    return {
-      id: (option.dataset ? option.dataset.id : false) || generateID(),
-      value: option.value,
-      text: option.text,
-      html: option.innerHTML,
-      selected: option.selected,
-      display: option.style.display === 'none' ? false : true,
-      disabled: option.disabled,
-      mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
-      placeholder: option.dataset.placeholder === 'true',
-      class: option.className,
-      style: option.style.cssText,
-      data: option.dataset,
-    } as Option
-  }
-
   public setSelected(value: string[]): void {
     // Loop through options and set selected
     const options = this.select.childNodes as any as (HTMLOptGroupElement | HTMLOptionElement)[]
@@ -288,6 +290,12 @@ export default class Select {
     const optgroupEl = document.createElement('optgroup')
     optgroupEl.id = optgroup.id
     optgroupEl.label = optgroup.label
+    if (optgroup.selectAll) {
+      optgroupEl.dataset.selectAll = 'true'
+    }
+    if (optgroup.closable !== 'off') {
+      optgroupEl.dataset.closable = optgroup.closable
+    }
     if (optgroup.options) {
       for (const o of optgroup.options) {
         optgroupEl.appendChild(this.createOption(o))

package/src/slim-select/settings.ts

@@ -14,8 +14,6 @@ export default class Settings {
   public intervalMove: NodeJS.Timeout | null = null
 
   // Fields set from constructor
-  public mainHeight: number = 30
-  public contentHeight: number = 0
   public isEnabled: boolean
   public alwaysOpen: boolean
   public showSearch: boolean
@@ -31,7 +29,6 @@ export default class Settings {
   public allowDeselect: boolean
   public hideSelected: boolean
   public showOptionTooltips: boolean
-  public selectByGroup: boolean
   public minSelected: number
   public maxSelected: number
   public timeoutDelay: number
@@ -60,7 +57,6 @@ export default class Settings {
     this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false
     this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false
     this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false
-    this.selectByGroup = settings.selectByGroup !== undefined ? settings.selectByGroup : false
     this.minSelected = settings.minSelected || 0
     this.maxSelected = settings.maxSelected || 1000
     this.timeoutDelay = settings.timeoutDelay || 200