slim-select 2.0.2 → 2.2.0

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
@@ -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)
   }
@@ -266,6 +271,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 +281,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 +495,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 +688,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 +716,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)
 
@@ -768,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()
           }
         }
 
@@ -857,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
@@ -948,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/rollup.config.mjs

@@ -18,6 +18,7 @@ export default [
       resolve(),
       commonjs(),
       babel({
+        babelHelpers: 'bundled',
         exclude: 'node_modules/**',
         babelrc: false,
         presets: [
@@ -54,6 +55,7 @@ export default [
       resolve(),
       commonjs(),
       babel({
+        babelHelpers: 'bundled',
         exclude: 'node_modules/**',
       }),
     ],
@@ -79,6 +81,7 @@ export default [
       resolve(),
       commonjs(),
       babel({
+        babelHelpers: 'bundled',
         exclude: 'node_modules/**',
       }),
       terser(),
@@ -97,6 +100,7 @@ export default [
       resolve(),
       commonjs(),
       babel({
+        babelHelpers: 'bundled',
         exclude: 'node_modules/**',
       }),
     ],
@@ -115,6 +119,7 @@ export default [
       resolve(),
       commonjs(),
       babel({
+        babelHelpers: 'bundled',
         exclude: 'node_modules/**',
       }),
     ],

package/src/slim-select/select.ts

@@ -1,12 +1,12 @@
 import { generateID, kebabCase } from './helpers'
-import { DataArray, DataObject, 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()
@@ -86,7 +86,11 @@ export default class Select {
 
   private observeWrapper(mutations: MutationRecord[]): void {
     if (this.onSelectChange) {
+      // Just in case this triggers a change in the select
+      // we want to stop listening to it while we run onSelectChange
+      this.changeListen(false)
       this.onSelectChange(this.getData())
+      this.changeListen(true)
     }
   }
 
@@ -99,16 +103,21 @@ export default class Select {
     }
 
     // If anything changes in the select then update the data
-    this.observer = new MutationObserver(this.observeWrapper)
+    this.observer = new MutationObserver(this.observeWrapper.bind(this))
   }
 
+  // Start observing the select
   private connectObserver(): void {
     if (this.observer) {
       this.observer.observe(this.select, {
-        attributes: true,
+        // For now we only care about if the children change
         childList: true,
-        characterData: true,
-        subtree: true,
+
+        // We dont care about attributes for now
+        // might need to add this later
+        // attributes: true,
+        // characterData: true,
+        // subtree: true,
       })
     }
   }
@@ -120,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[]
@@ -140,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 = []
 
@@ -186,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)[]
@@ -279,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