slim-select 2.2.3 → 2.3.1

package/src/slim-select/select.ts

@@ -1,36 +1,43 @@
-import { generateID, kebabCase } from './helpers'
+import { kebabCase } from './helpers'
 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: DataArrayPartial) => void
   public onValueChange?: (value: string[]) => void
+  public onClassChange?: (classes: string[]) => void
+  public onDisabledChange?: (disabled: boolean) => void
+  public onOptionsChange?: (data: DataArrayPartial) => void
+
+  // Change observers
+  public listen: boolean = false
   private observer: MutationObserver | null = null
 
   constructor(select: HTMLSelectElement) {
     this.select = select
+
+    // Add change event listener
+    this.select.addEventListener('change', this.valueChange.bind(this), {
+      // allow bubbling of event
+      passive: true,
+    })
+
+    // Initiate mutation observer
+    this.observer = new MutationObserver(this.observeCall.bind(this))
+
+    // Start listening for changes
+    this.changeListen(true)
   }
 
-  // Set to enabled
   public enable(): void {
-    // Disable original select but dont trigger observer
-    this.disconnectObserver()
     this.select.disabled = false
-    this.connectObserver()
   }
 
-  // Set to disabled
   public disable(): void {
-    // Enable original select but dont trigger observer
-    this.disconnectObserver()
     this.select.disabled = true
-    this.connectObserver()
   }
 
-  // Set misc attributes on the main select element
   public hideUI(): void {
     this.select.tabIndex = -1
     this.select.style.display = 'none'
@@ -43,44 +50,30 @@ export default class Select {
     this.select.removeAttribute('aria-hidden')
   }
 
-  public changeListen(on: boolean) {
-    this.listen = on
-
-    // Deal with some observer situations
-    if (this.listen) {
-      this.connectObserver()
-    } else {
-      this.disconnectObserver()
+  public changeListen(listen: boolean) {
+    this.listen = listen
+
+    // Start listening for changes
+    if (listen) {
+      if (this.observer) {
+        this.observer.observe(this.select, {
+          subtree: true, // subtree for optgroups options
+          childList: true, // children changes
+          attributes: true, // attributes changes
+        })
+      }
     }
-  }
-
-  // Add change listener to original select
-  public addSelectChangeListener(func: (data: DataArrayPartial) => void): void {
-    this.onSelectChange = func
-    this.addObserver()
-    this.connectObserver()
-    this.changeListen(true) // Last start listening
-  }
 
-  // remove change listener from original select
-  public removeSelectChangeListener(): void {
-    this.changeListen(false) // First stop listening
-    this.onSelectChange = undefined
-  }
-
-  public addValueChangeListener(func: (value: string[]) => void): void {
-    this.onValueChange = func
-    this.select.addEventListener('change', this.valueChange.bind(this), {
-      // allow bubbling of event
-      passive: true,
-    })
-  }
-
-  public removeValueChangeListener(): void {
-    this.onValueChange = undefined
-    this.select.removeEventListener('change', this.valueChange.bind(this))
+    // Stop listening for changes
+    if (!listen) {
+      if (this.observer) {
+        this.observer.disconnect()
+      }
+    }
   }
 
+  // This function get triggers when the select value changes
+  // and will call the onValueChange function if it exists
   public valueChange(ev: Event): boolean {
     if (this.listen && this.onValueChange) {
       this.onValueChange(this.getSelectedValues())
@@ -90,47 +83,54 @@ export default class Select {
     return true
   }
 
-  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)
+  private observeCall(mutations: MutationRecord[]): void {
+    // If we are not listeing do nothing
+    if (!this.listen) {
+      return
     }
-  }
 
-  // Add MutationObserver to select
-  private addObserver(): void {
-    // If mutation observer already exists then disconnect and
-    if (this.observer) {
-      this.disconnectObserver()
-      this.observer = null
+    let classChanged = false
+    let disabledChanged = false
+    let optgroupOptionChanged = false
+
+    // Loop through mutations and check various things
+    for (const m of mutations) {
+      // Check if its the select
+      if (m.target === this.select) {
+        // Check if disabled has changed
+        if (m.attributeName === 'disabled') {
+          disabledChanged = true
+        }
+
+        // Check if class has changed
+        if (m.attributeName === 'class') {
+          classChanged = true
+        }
+      }
+
+      // Check if its an optgroup or option
+      if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
+        optgroupOptionChanged = true
+      }
     }
 
-    // If anything changes in the select then update the data
-    this.observer = new MutationObserver(this.observeWrapper.bind(this))
-  }
+    // If class has changed then call the class change function
+    if (classChanged && this.onClassChange) {
+      this.onClassChange(this.select.className.split(' '))
+    }
 
-  // Start observing the select
-  private connectObserver(): void {
-    if (this.observer) {
-      this.observer.observe(this.select, {
-        // For now we only care about if the children change
-        childList: true,
-
-        // We dont care about attributes for now
-        // might need to add this later
-        // attributes: true,
-        // characterData: true,
-        // subtree: true,
-      })
+    // If disabled has changed then call the disabled change function
+    if (disabledChanged && this.onDisabledChange) {
+      this.changeListen(false)
+      this.onDisabledChange(this.select.disabled)
+      this.changeListen(true)
     }
-  }
 
-  private disconnectObserver(): void {
-    if (this.observer) {
-      this.observer.disconnect()
+    // If optgroup or option has changed then call the select change function
+    if (optgroupOptionChanged && this.onOptionsChange) {
+      this.changeListen(false)
+      this.onOptionsChange(this.getData())
+      this.changeListen(true)
     }
   }
 
@@ -157,7 +157,7 @@ export default class Select {
 
   public getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional {
     let data = {
-      id: (optgroup.dataset ? optgroup.dataset.id : false) || '',
+      id: optgroup.id,
       label: optgroup.label,
       selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
       closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
@@ -177,10 +177,10 @@ export default class Select {
   // From passed in option pull pieces of usable information
   public getDataFromOption(option: HTMLOptionElement): Option {
     return {
-      id: (option.dataset ? option.dataset.id : false) || '',
+      id: option.id,
       value: option.value,
       text: option.text,
-      html: option.innerHTML,
+      html: option.dataset && option.dataset.html ? option.dataset.html : '',
       selected: option.selected,
       display: option.style.display === 'none' ? false : true,
       disabled: option.disabled,
@@ -222,6 +222,9 @@ export default class Select {
   }
 
   public setSelected(value: string[]): void {
+    // Stop listening to changes
+    this.changeListen(false)
+
     // Loop through options and set selected
     const options = this.select.childNodes as any as (HTMLOptGroupElement | HTMLOptionElement)[]
     for (const o of options) {
@@ -241,15 +244,18 @@ export default class Select {
         option.selected = value.includes(option.value)
       }
     }
+
+    // Stop listening to changes
+    this.changeListen(true)
   }
 
   public updateSelect(id?: string, style?: string, classes?: string[]): void {
     // Stop listening to changes
     this.changeListen(false)
 
-    // Update id
+    // Update id, only if the id isnt already set
     if (id) {
-      this.select.id = id
+      this.select.dataset.id = id
     }
 
     // Update style
@@ -315,8 +321,12 @@ export default class Select {
 
   public createOption(info: Option): HTMLOptionElement {
     const optionEl = document.createElement('option')
-    optionEl.value = info.value !== '' ? info.value : info.text
-    optionEl.innerHTML = info.html || info.text
+    optionEl.id = info.id
+    optionEl.value = info.value
+    optionEl.innerHTML = info.text
+    if (info.html !== '') {
+      optionEl.setAttribute('data-html', info.html)
+    }
     if (info.selected) {
       optionEl.selected = info.selected
     }
@@ -348,11 +358,20 @@ export default class Select {
 
   public destroy() {
     this.changeListen(false)
-    this.disconnectObserver()
-    this.removeSelectChangeListener()
-    this.removeValueChangeListener()
 
-    // show the original select
+    // Remove event change listener
+    this.select.removeEventListener('change', this.valueChange.bind(this))
+
+    // Disconnect observer and null
+    if (this.observer) {
+      this.observer.disconnect()
+      this.observer = null
+    }
+
+    // Remove dataset id from original select
+    delete this.select.dataset.id
+
+    // Show the original select
     this.showUI()
   }
 }

package/src/slim-select/settings.ts

@@ -14,7 +14,7 @@ export default class Settings {
   public intervalMove: NodeJS.Timeout | null = null
 
   // Fields set from constructor
-  public isEnabled: boolean
+  public disabled: boolean
   public alwaysOpen: boolean
   public showSearch: boolean
   public searchPlaceholder: string
@@ -32,6 +32,8 @@ export default class Settings {
   public minSelected: number
   public maxSelected: number
   public timeoutDelay: number
+  public maxValuesShown: number
+  public maxValuesMessage: string
 
   constructor(settings?: SettingsPartial) {
     if (!settings) {
@@ -42,7 +44,7 @@ export default class Settings {
     this.style = settings.style || ''
     this.class = settings.class || []
 
-    this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true
+    this.disabled = settings.disabled !== undefined ? settings.disabled : false
     this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false
     this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true
     this.searchPlaceholder = settings.searchPlaceholder || 'Search'
@@ -60,5 +62,7 @@ export default class Settings {
     this.minSelected = settings.minSelected || 0
     this.maxSelected = settings.maxSelected || 1000
     this.timeoutDelay = settings.timeoutDelay || 200
+    this.maxValuesShown = settings.maxValuesShown || 20
+    this.maxValuesMessage = settings.maxValuesMessage || '{number} selected'
   }
 }

package/src/slim-select/slimselect.scss

@@ -4,7 +4,7 @@
   --ss-bg-color: #ffffff;
   --ss-font-color: #4d4d4d;
   --ss-font-placeholder-color: #8d8d8d;
-  --ss-disabled-color: #8a8a8a;
+  --ss-disabled-color: #dcdee2;
   --ss-border-color: #dcdee2;
   --ss-highlight-color: #fffb8c;
   --ss-success-color: #00b755;
@@ -74,7 +74,7 @@
   }
 
   &.ss-disabled {
-    background-color: var(--ss-border-color);
+    background-color: var(--ss-disabled-color);
     cursor: not-allowed;
 
     .ss-values {
@@ -118,11 +118,27 @@
       white-space: nowrap;
     }
 
+    // Max is used to display max number of values
+    .ss-max {
+      display: flex;
+      user-select: none;
+      align-items: center;
+      width: fit-content;
+      font-size: 12px;
+      color: var(--ss-bg-color);
+      line-height: 1;
+      padding: var(--ss-spacing-s) var(--ss-spacing-m);
+      background-color: var(--ss-primary-color);
+      border-radius: var(--ss-border-radius);
+    }
+
+    // Used for single select selected value
     .ss-single {
       display: flex;
       margin: auto 0px auto var(--ss-spacing-s);
     }
 
+    // Used for the selected values
     .ss-value {
       display: flex;
       user-select: none;
@@ -231,6 +247,7 @@
   transition: transform var(--ss-animation-timing), opacity var(--ss-animation-timing);
   opacity: 0;
   transform: scaleY(0);
+  transform-origin: center top;
   overflow: hidden;
   z-index: 10000;
 
@@ -240,6 +257,7 @@
   }
 
   &.ss-open-above {
+    flex-direction: column-reverse;
     opacity: 1;
     transform: scaleY(1);
     transform-origin: center bottom;
@@ -456,26 +474,31 @@
     .ss-option {
       display: flex;
       padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
+      color: var(--ss-font-color);
       cursor: pointer;
       user-select: none;
 
-      &:hover,
-      &.ss-highlighted {
+      &:hover {
+        color: var(--ss-bg-color);
+        background-color: var(--ss-primary-color);
+      }
+
+      &.ss-highlighted,
+      &:not(.ss-disabled).ss-selected {
         color: var(--ss-bg-color);
         background-color: var(--ss-primary-color);
       }
 
       &.ss-disabled {
         cursor: not-allowed;
-        color: var(--ss-disabled-color);
-        background-color: var(--ss-bg-color);
-      }
+        background-color: var(--ss-disabled-color);
 
-      &:not(.ss-disabled).ss-selected {
-        color: var(--ss-font-color);
-        background-color: var(--ss-highlight-color);
+        &:hover {
+          color: var(--ss-font-color);
+        }
       }
 
+      // Sub div wrapper for highlighting text
       .ss-search-highlight {
         background-color: var(--ss-highlight-color);
       }

package/src/slim-select/store.test.ts

@@ -117,6 +117,28 @@ describe('store module', () => {
     expect((data[0] as Option).selected).toBe(true)
   })
 
+  test('set data and set selected to empty string', () => {
+    let store = new Store('single', [
+      {
+        text: 'all',
+        value: '',
+      },
+      {
+        text: 'Value 1',
+        value: '1',
+        selected: true,
+      },
+    ])
+    store.setSelectedBy('value', [''])
+
+    let data = store.getData()
+
+    // Make sure data has one item and that it has the correct text
+    expect(data.length).toBe(2)
+    expect((data[0] as Option).text).toBe('all')
+    expect((data[0] as Option).selected).toBe(true)
+  })
+
   test('set data and set selected by value multiple for single element', () => {
     let store = new Store('single', [
       {

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

@@ -33,7 +33,7 @@ export default class SlimSelect {
     getData(): DataArray;
     setData(data: DataArrayPartial): void;
     getSelected(): string[];
-    setSelected(value: string | string[]): void;
+    setSelected(value: string | string[], runAfterChange?: boolean): void;
     addOption(option: OptionOptional): void;
     open(): void;
     close(): void;

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

@@ -4,7 +4,7 @@ export interface Callbacks {
     open: () => void;
     close: () => void;
     addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string;
-    setSelected: (value: string[]) => void;
+    setSelected: (value: string[], runAfterChange: boolean) => void;
     addOption: (option: Option) => void;
     search: (search: string) => void;
     beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
@@ -48,6 +48,7 @@ export default class Render {
         placeholder: string;
         values: string;
         single: string;
+        max: string;
         value: string;
         valueText: string;
         valueDelete: string;
@@ -89,6 +90,7 @@ export default class Render {
     disable(): void;
     open(): void;
     close(): void;
+    updateClassStyles(): void;
     mainDiv(): Main;
     mainFocus(trigger: boolean): void;
     placeholder(): HTMLDivElement;
@@ -112,5 +114,5 @@ export default class Render {
     moveContentAbove(): void;
     moveContentBelow(): void;
     ensureElementInView(container: HTMLElement, element: HTMLElement): void;
-    putContent(el: HTMLElement, isOpen: boolean): 'up' | 'down';
+    putContent(): 'up' | 'down';
 }

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

@@ -1,25 +1,20 @@
 import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store';
 export default class Select {
     select: HTMLSelectElement;
-    listen: boolean;
-    onSelectChange?: (data: DataArrayPartial) => void;
     onValueChange?: (value: string[]) => void;
+    onClassChange?: (classes: string[]) => void;
+    onDisabledChange?: (disabled: boolean) => void;
+    onOptionsChange?: (data: DataArrayPartial) => void;
+    listen: boolean;
     private observer;
     constructor(select: HTMLSelectElement);
     enable(): void;
     disable(): void;
     hideUI(): void;
     showUI(): void;
-    changeListen(on: boolean): void;
-    addSelectChangeListener(func: (data: DataArrayPartial) => void): void;
-    removeSelectChangeListener(): void;
-    addValueChangeListener(func: (value: string[]) => void): void;
-    removeValueChangeListener(): void;
+    changeListen(listen: boolean): void;
     valueChange(ev: Event): boolean;
-    private observeWrapper;
-    private addObserver;
-    private connectObserver;
-    private disconnectObserver;
+    private observeCall;
     getData(): DataArrayPartial;
     getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional;
     getDataFromOption(option: HTMLOptionElement): Option;

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

@@ -8,7 +8,7 @@ export default class Settings {
     isOpen: boolean;
     triggerFocus: boolean;
     intervalMove: NodeJS.Timeout | null;
-    isEnabled: boolean;
+    disabled: boolean;
     alwaysOpen: boolean;
     showSearch: boolean;
     searchPlaceholder: string;
@@ -26,5 +26,7 @@ export default class Settings {
     minSelected: number;
     maxSelected: number;
     timeoutDelay: number;
+    maxValuesShown: number;
+    maxValuesMessage: string;
     constructor(settings?: SettingsPartial);
 }