slim-select 2.1.0 → 2.2.1

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,143 @@ 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)
+
+          // If any options are selected, set optgroup to open
+          if (d.options.some((o) => o.selected)) {
+            optgroupClosable.classList.add(this.classes.open)
+            optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen)
+          } else 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 +1139,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

package/src/slim-select/slimselect.scss

@@ -7,6 +7,7 @@
   --ss-disabled-color: #8a8a8a;
   --ss-border-color: #dcdee2;
   --ss-highlight-color: #fffb8c;
+  --ss-success-color: #00b755;
   --ss-error-color: #dc3545;
 
   // Heights
@@ -334,9 +335,117 @@
     }
 
     .ss-optgroup {
+      // If optgroup is open, show the options
+      &.ss-open {
+        .ss-option {
+        }
+      }
+
+      // If optgroup has close, hide all options
+      &.ss-close {
+        .ss-option {
+          display: none !important;
+        }
+      }
+
       .ss-optgroup-label {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
         padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
-        font-weight: bold;
+
+        .ss-optgroup-label-text {
+          flex: 1 1 auto;
+          font-weight: bold;
+          color: var(--ss-font-color);
+        }
+
+        // If optgroup has arrow, make label clickable
+        &:has(.ss-arrow) {
+          cursor: pointer;
+        }
+
+        .ss-optgroup-actions {
+          flex: 0 1 auto;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: var(--ss-spacing-m);
+
+          .ss-selectall {
+            flex: 0 0 auto;
+            display: flex;
+            flex-direction: row;
+            cursor: pointer;
+
+            &:hover {
+              opacity: 0.5;
+            }
+
+            &.ss-selected {
+              svg {
+                path {
+                  stroke: var(--ss-error-color);
+                }
+              }
+            }
+
+            span {
+              flex: 0 1 auto;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: calc(100% * 0.6);
+              text-align: center;
+              padding: 0 var(--ss-spacing-s) 0 0;
+            }
+
+            svg {
+              flex: 0 1 auto;
+              width: 13px;
+              height: 13px;
+
+              path {
+                fill: none;
+                stroke: var(--ss-success-color);
+                stroke-linecap: round;
+                stroke-linejoin: round;
+              }
+
+              &:first-child {
+                stroke-width: 5;
+              }
+              &:last-child {
+                stroke-width: 11;
+              }
+            }
+          }
+
+          .ss-closable {
+            flex: 0 1 auto;
+            display: flex;
+            flex-direction: row;
+            cursor: pointer;
+
+            .ss-arrow {
+              flex: 1 1 auto;
+              width: 10px;
+              height: 10px;
+
+              path {
+                fill: none;
+                stroke: var(--ss-font-color);
+                stroke-width: 18;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+                transition-timing-function: ease-out;
+                transition: var(--ss-animation-timing);
+              }
+            }
+          }
+        }
       }
 
       .ss-option {
@@ -344,16 +453,8 @@
       }
     }
 
-    .ss-optgroup-selectable {
-      cursor: pointer;
-
-      &:hover {
-        color: var(--ss-bg-color);
-        background-color: var(--ss-primary-color);
-      }
-    }
-
     .ss-option {
+      display: flex;
       padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
       cursor: pointer;
       user-select: none;
@@ -370,7 +471,7 @@
         background-color: var(--ss-bg-color);
       }
 
-      &:not(.ss-disabled).ss-option-selected {
+      &:not(.ss-disabled).ss-selected {
         color: var(--ss-font-color);
         background-color: var(--ss-highlight-color);
       }

package/src/slim-select/store.ts

@@ -11,17 +11,23 @@ type selectType = 'single' | 'multiple'
 export interface OptgroupOptional {
   id?: string
   label: string // Required
+  selectAll?: boolean
+  closable?: 'off' | 'open' | 'close'
   options?: OptionOptional[]
 }
 
 export class Optgroup {
   public id: string
   public label: string
+  public selectAll: boolean
+  public closable: 'off' | 'open' | 'close'
   public options: Option[]
 
   constructor(optgroup: OptgroupOptional) {
     this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id
     this.label = optgroup.label || ''
+    this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll
+    this.closable = optgroup.closable || 'off'
 
     // If options exist, loop through options and create new option class
     // and set the options to the optgroup options field
@@ -255,6 +261,18 @@ export default class Store {
     return selectedIDs
   }
 
+  public getOptgroupByID(id: string): Optgroup | null {
+    // Loop through each data object
+    // and if optgroup is found, return it
+    for (let dataObj of this.data) {
+      if (dataObj instanceof Optgroup && dataObj.id === id) {
+        return dataObj
+      }
+    }
+
+    return null
+  }
+
   public getOptionByID(id: string): Option | null {
     let options = this.filter((opt: Option) => {
       return opt.id === id
@@ -302,7 +320,7 @@ export default class Store {
           })
 
           if (optOptions.length > 0) {
-            dataSearch.push(new Optgroup({ id: dataObj.id, label: dataObj.label, options: optOptions }))
+            dataSearch.push(new Optgroup(dataObj))
           }
         }
       }

package/src/vue/README.md

@@ -0,0 +1,48 @@
+# Slim Select Vue
+
+## slimselectjs.com
+
+Vue integration for the SlimSelect
+
+See the website for the best details on how to use the vue integration
+
+[![NPM Downloads](https://img.shields.io/npm/dt/@slim-select/vue)](https://www.npmjs.com/package/@slim-select/vue)
+
+## Support
+
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/brianvoe)
+
+<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>
+
+## Installation
+
+```bash
+npm install @slim-select/vue
+```
+
+## Usage
+
+```javascript
+import { defineComponent } from 'vue'
+import SlimSelect from '@slim-select/vue'
+
+export default defineComponent({
+  components: {
+    SlimSelect,
+  },
+})
+```
+
+```html
+<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>
+```

package/src/vue/dist/slim-select/helpers.d.ts

@@ -0,0 +1,4 @@
+export declare function generateID(): string;
+export declare function hasClassInTree(element: HTMLElement, className: string): any;
+export declare function debounce(func: (...params: any[]) => void, wait?: number, immediate?: boolean): () => void;
+export declare function kebabCase(str: string): string;