slim-select 2.3.0 → 2.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "downloadjs": "^1.4.7",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.1",
     "prismjs": "^1.29.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.1",
@@ -65,10 +65,10 @@
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
-    "vite": "^3.2.4",
+    "vite": "^3.2.5",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.9",
+    "vue-tsc": "^1.0.11",
     "vuex": "^4.0.2"
   }
 }

package/src/slim-select/index.ts

@@ -75,8 +75,17 @@ export default class SlimSelect {
     this.settings = new Settings(config.settings)
 
     // Set events
+    const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose']
     for (const key in config.events) {
-      if (config.events.hasOwnProperty(key)) {
+      // Check if key exists in events
+      if (!config.events.hasOwnProperty(key)) {
+        continue
+      }
+
+      // Check if key is in debounceEvents
+      if (debounceEvents.indexOf(key) !== -1) {
+        ;(this.events as { [key: string]: any })[key] = debounce((config.events as { [key: string]: any })[key], 100)
+      } else {
         ;(this.events as { [key: string]: any })[key] = (config.events as { [key: string]: any })[key]
       }
     }
@@ -97,6 +106,13 @@ export default class SlimSelect {
       // Run set selected from the values given
       this.setSelected(values)
     }
+    this.select.onClassChange = (classes: string[]) => {
+      // Update settings with new class
+      this.settings.class = classes
+
+      // Run render updateClassStyles
+      this.render.updateClassStyles()
+    }
     this.select.onDisabledChange = (disabled: boolean) => {
       if (disabled) {
         this.disable()
@@ -222,7 +238,7 @@ export default class SlimSelect {
     return this.store.getSelected()
   }
 
-  public setSelected(value: string | string[]): void {
+  public setSelected(value: string | string[], runAfterChange = true): void {
     // Get original selected values
     const selected = this.store.getSelected()
 
@@ -245,7 +261,7 @@ export default class SlimSelect {
     }
 
     // Trigger afterChange event, if it doesnt equal the original selected values
-    if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+    if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
       this.events.afterChange(this.store.getSelectedOptions())
     }
   }
@@ -327,8 +343,10 @@ export default class SlimSelect {
     // Tell render to close
     this.render.close()
 
-    // Clear search
-    this.search('') // Clear search
+    // Clear search only if not empty
+    if (this.render.content.search.input.value !== '') {
+      this.search('') // Clear search
+    }
 
     // If we arent tabbing focus back on the main element
     this.render.mainFocus(false)

package/src/slim-select/render.ts

@@ -6,7 +6,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
@@ -125,6 +125,9 @@ export default class Render {
     this.main = this.mainDiv()
     this.content = this.contentDiv()
 
+    // Add classes and styles to main/content
+    this.updateClassStyles()
+
     // Add content to the content location settings
     this.settings.contentLocation.appendChild(this.content.main)
   }
@@ -156,12 +159,6 @@ export default class Render {
     // move the content in to the right location
     this.moveContent()
 
-    // Render the options
-    this.renderOptions(this.store.getData())
-
-    // Move the content in to the right location
-    this.moveContent()
-
     // Move to last selected option
     const selectedOptions = this.store.getSelectedOptions()
     if (selectedOptions.length) {
@@ -181,30 +178,49 @@ export default class Render {
     this.main.arrow.path.setAttribute('d', this.classes.arrowClose)
   }
 
-  public mainDiv(): Main {
-    // Create main container
-    const main = document.createElement('div')
-
-    // Set tabable to allow tabbing to the element
-    main.tabIndex = 0
+  public updateClassStyles(): void {
+    // Clear all classes and styles
+    this.main.main.className = ''
+    this.main.main.removeAttribute('style')
+    this.content.main.className = ''
+    this.content.main.removeAttribute('style')
 
-    // Add style and classes
-    main.style.cssText = this.settings.style !== '' ? this.settings.style : ''
+    // Make sure main/content has its base class
+    this.main.main.classList.add(this.classes.main)
+    this.content.main.classList.add(this.classes.content)
 
-    // Clear out classlist
-    main.className = ''
+    // Add styles
+    if (this.settings.style !== '') {
+      this.content.main.style.cssText = this.settings.style
+    }
 
-    // Loop through config class and add
-    main.classList.add(this.settings.id)
-    main.classList.add(this.classes.main)
-    if (this.settings.class) {
+    // Add classes
+    if (this.settings.class.length) {
       for (const c of this.settings.class) {
         if (c.trim() !== '') {
-          main.classList.add(c.trim())
+          this.main.main.classList.add(c.trim())
+          this.content.main.classList.add(c.trim())
         }
       }
     }
 
+    // Misc classes
+    // Add content position class
+    if (this.settings.contentPosition === 'relative') {
+      this.content.main.classList.add('ss-' + this.settings.contentPosition)
+    }
+  }
+
+  public mainDiv(): Main {
+    // Create main container
+    const main = document.createElement('div')
+
+    // Add id to data-id
+    main.dataset.id = this.settings.id
+
+    // Set tabable to allow tabbing to the element
+    main.tabIndex = 0
+
     // If main gets focus, open the content
     main.onfocus = () => {
       if (this.settings.triggerFocus) {
@@ -280,7 +296,7 @@ export default class Render {
       }
 
       if (shouldDelete) {
-        this.callbacks.setSelected([''])
+        this.callbacks.setSelected([''], false)
 
         // Check if we need to close the dropdown
         if (this.settings.closeOnSelect) {
@@ -546,7 +562,7 @@ export default class Render {
               selectedValues.push(o.value)
             }
           }
-          this.callbacks.setSelected(selectedValues)
+          this.callbacks.setSelected(selectedValues, false)
 
           // Check if we need to close the dropdown
           if (this.settings.closeOnSelect) {
@@ -576,28 +592,10 @@ export default class Render {
 
   public contentDiv(): Content {
     const main = document.createElement('div')
-    main.classList.add(this.classes.content)
 
     // Add id to data-id
     main.dataset.id = this.settings.id
 
-    // Add styles
-    if (this.settings.style !== '') {
-      main.style.cssText = this.settings.style
-    }
-
-    // Add classes
-    if (this.settings.contentPosition === 'relative') {
-      main.classList.add('ss-' + this.settings.contentPosition)
-    }
-    if (this.settings.class.length) {
-      for (const c of this.settings.class) {
-        if (c.trim() !== '') {
-          main.classList.add(c.trim())
-        }
-      }
-    }
-
     // Add search
     const search = this.searchDiv()
     main.appendChild(search.main)
@@ -753,9 +751,9 @@ export default class Render {
           if (this.settings.isMultiple) {
             let values = this.store.getSelected()
             values.push(newOption.value)
-            this.callbacks.setSelected(values)
+            this.callbacks.setSelected(values, true)
           } else {
-            this.callbacks.setSelected([newOption.value])
+            this.callbacks.setSelected([newOption.value], true)
           }
 
           // Clear search
@@ -1024,13 +1022,13 @@ export default class Render {
                 return true
               })
 
-              this.callbacks.setSelected(newSelected)
+              this.callbacks.setSelected(newSelected, true)
               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)
+              this.callbacks.setSelected(newSelected, true)
             }
           })
 
@@ -1148,6 +1146,11 @@ export default class Render {
       optionEl.setAttribute('title', optionEl.textContent)
     }
 
+    // If option is disabled
+    if (!option.display) {
+      optionEl.classList.add(this.classes.hide)
+    }
+
     // If allowed to deselect, null onclick and add disabled
     if (option.disabled) {
       optionEl.classList.add(this.classes.disabled)
@@ -1238,7 +1241,10 @@ export default class Render {
         }
 
         // Get values from after and set as selected
-        this.callbacks.setSelected(after.map((o: Option) => o.value))
+        this.callbacks.setSelected(
+          after.map((o: Option) => o.value),
+          false,
+        )
 
         // If closeOnSelect is true
         if (this.settings.closeOnSelect) {

package/src/slim-select/select.ts

@@ -6,6 +6,7 @@ export default class Select {
 
   // Mutation observer fields
   public onValueChange?: (value: string[]) => void
+  public onClassChange?: (classes: string[]) => void
   public onDisabledChange?: (disabled: boolean) => void
   public onOptionsChange?: (data: DataArrayPartial) => void
 
@@ -88,6 +89,7 @@ export default class Select {
       return
     }
 
+    let classChanged = false
     let disabledChanged = false
     let optgroupOptionChanged = false
 
@@ -99,6 +101,11 @@ export default class Select {
         if (m.attributeName === 'disabled') {
           disabledChanged = true
         }
+
+        // Check if class has changed
+        if (m.attributeName === 'class') {
+          classChanged = true
+        }
       }
 
       // Check if its an optgroup or option
@@ -107,6 +114,11 @@ export default class Select {
       }
     }
 
+    // If class has changed then call the class change function
+    if (classChanged && this.onClassChange) {
+      this.onClassChange(this.select.className.split(' '))
+    }
+
     // If disabled has changed then call the disabled change function
     if (disabledChanged && this.onDisabledChange) {
       this.changeListen(false)
@@ -241,9 +253,9 @@ export default class Select {
     // 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
@@ -310,7 +322,7 @@ export default class Select {
   public createOption(info: Option): HTMLOptionElement {
     const optionEl = document.createElement('option')
     optionEl.id = info.id
-    optionEl.value = info.value // !== '' ? info.value : info.text
+    optionEl.value = info.value
     optionEl.innerHTML = info.text
     if (info.html !== '') {
       optionEl.setAttribute('data-html', info.html)
@@ -356,7 +368,10 @@ export default class Select {
       this.observer = null
     }
 
-    // show the original select
+    // Remove dataset id from original select
+    delete this.select.dataset.id
+
+    // Show the original select
     this.showUI()
   }
 }

package/src/slim-select/settings.ts

@@ -55,7 +55,7 @@ export default class Settings {
     this.contentLocation = settings.contentLocation || document.body
     this.contentPosition = settings.contentPosition || 'absolute'
     this.openPosition = settings.openPosition || 'auto' // options: auto, up, down
-    this.placeholderText = settings.placeholderText || 'Select Value'
+    this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value'
     this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false
     this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false
     this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false

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;
@@ -90,6 +90,7 @@ export default class Render {
     disable(): void;
     open(): void;
     close(): void;
+    updateClassStyles(): void;
     mainDiv(): Main;
     mainFocus(trigger: boolean): void;
     placeholder(): HTMLDivElement;

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

@@ -2,6 +2,7 @@ import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from
 export default class Select {
     select: HTMLSelectElement;
     onValueChange?: (value: string[]) => void;
+    onClassChange?: (classes: string[]) => void;
     onDisabledChange?: (disabled: boolean) => void;
     onOptionsChange?: (data: DataArrayPartial) => void;
     listen: boolean;

package/src/vue/dist/slimselectvue.es.js

@@ -78,7 +78,7 @@ class Settings {
         this.contentLocation = settings.contentLocation || document.body;
         this.contentPosition = settings.contentPosition || 'absolute';
         this.openPosition = settings.openPosition || 'auto';
-        this.placeholderText = settings.placeholderText || 'Select Value';
+        this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
         this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
         this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
         this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
@@ -345,6 +345,7 @@ class Render {
         this.callbacks = callbacks;
         this.main = this.mainDiv();
         this.content = this.contentDiv();
+        this.updateClassStyles();
         this.settings.contentLocation.appendChild(this.content.main);
     }
     enable() {
@@ -359,8 +360,6 @@ class Render {
         this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
         this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
         this.moveContent();
-        this.renderOptions(this.store.getData());
-        this.moveContent();
         const selectedOptions = this.store.getSelectedOptions();
         if (selectedOptions.length) {
             const selectedId = selectedOptions[selectedOptions.length - 1].id;
@@ -377,20 +376,32 @@ class Render {
         this.content.main.classList.remove(this.classes.openBelow);
         this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
     }
-    mainDiv() {
-        const main = document.createElement('div');
-        main.tabIndex = 0;
-        main.style.cssText = this.settings.style !== '' ? this.settings.style : '';
-        main.className = '';
-        main.classList.add(this.settings.id);
-        main.classList.add(this.classes.main);
-        if (this.settings.class) {
+    updateClassStyles() {
+        this.main.main.className = '';
+        this.main.main.removeAttribute('style');
+        this.content.main.className = '';
+        this.content.main.removeAttribute('style');
+        this.main.main.classList.add(this.classes.main);
+        this.content.main.classList.add(this.classes.content);
+        if (this.settings.style !== '') {
+            this.content.main.style.cssText = this.settings.style;
+        }
+        if (this.settings.class.length) {
             for (const c of this.settings.class) {
                 if (c.trim() !== '') {
-                    main.classList.add(c.trim());
+                    this.main.main.classList.add(c.trim());
+                    this.content.main.classList.add(c.trim());
                 }
             }
         }
+        if (this.settings.contentPosition === 'relative') {
+            this.content.main.classList.add('ss-' + this.settings.contentPosition);
+        }
+    }
+    mainDiv() {
+        const main = document.createElement('div');
+        main.dataset.id = this.settings.id;
+        main.tabIndex = 0;
         main.onfocus = () => {
             if (this.settings.triggerFocus) {
                 this.callbacks.open();
@@ -443,7 +454,7 @@ class Render {
                 shouldDelete = this.callbacks.beforeChange(after, before) === true;
             }
             if (shouldDelete) {
-                this.callbacks.setSelected(['']);
+                this.callbacks.setSelected([''], false);
                 if (this.settings.closeOnSelect) {
                     this.callbacks.close();
                 }
@@ -642,7 +653,7 @@ class Render {
                             selectedValues.push(o.value);
                         }
                     }
-                    this.callbacks.setSelected(selectedValues);
+                    this.callbacks.setSelected(selectedValues, false);
                     if (this.settings.closeOnSelect) {
                         this.callbacks.close();
                     }
@@ -663,21 +674,7 @@ class Render {
     }
     contentDiv() {
         const main = document.createElement('div');
-        main.classList.add(this.classes.content);
         main.dataset.id = this.settings.id;
-        if (this.settings.style !== '') {
-            main.style.cssText = this.settings.style;
-        }
-        if (this.settings.contentPosition === 'relative') {
-            main.classList.add('ss-' + this.settings.contentPosition);
-        }
-        if (this.settings.class.length) {
-            for (const c of this.settings.class) {
-                if (c.trim() !== '') {
-                    main.classList.add(c.trim());
-                }
-            }
-        }
         const search = this.searchDiv();
         main.appendChild(search.main);
         const list = this.listDiv();
@@ -789,10 +786,10 @@ class Render {
                     if (this.settings.isMultiple) {
                         let values = this.store.getSelected();
                         values.push(newOption.value);
-                        this.callbacks.setSelected(values);
+                        this.callbacks.setSelected(values, true);
                     }
                     else {
-                        this.callbacks.setSelected([newOption.value]);
+                        this.callbacks.setSelected([newOption.value], true);
                     }
                     this.callbacks.search('');
                     if (this.settings.closeOnSelect) {
@@ -974,12 +971,12 @@ class Render {
                                 }
                                 return true;
                             });
-                            this.callbacks.setSelected(newSelected);
+                            this.callbacks.setSelected(newSelected, true);
                             return;
                         }
                         else {
                             const newSelected = currentSelected.concat(d.options.map((o) => o.value));
-                            this.callbacks.setSelected(newSelected);
+                            this.callbacks.setSelected(newSelected, true);
                         }
                     });
                     optgroupActions.appendChild(selectAll);
@@ -1063,6 +1060,9 @@ class Render {
         if (this.settings.showOptionTooltips && optionEl.textContent) {
             optionEl.setAttribute('title', optionEl.textContent);
         }
+        if (!option.display) {
+            optionEl.classList.add(this.classes.hide);
+        }
         if (option.disabled) {
             optionEl.classList.add(this.classes.disabled);
         }
@@ -1122,7 +1122,7 @@ class Render {
                 if (!this.store.getOptionByID(elementID)) {
                     this.callbacks.addOption(option);
                 }
-                this.callbacks.setSelected(after.map((o) => o.value));
+                this.callbacks.setSelected(after.map((o) => o.value), false);
                 if (this.settings.closeOnSelect) {
                     this.callbacks.close();
                 }
@@ -1258,6 +1258,7 @@ class Select {
         if (!this.listen) {
             return;
         }
+        let classChanged = false;
         let disabledChanged = false;
         let optgroupOptionChanged = false;
         for (const m of mutations) {
@@ -1265,11 +1266,17 @@ class Select {
                 if (m.attributeName === 'disabled') {
                     disabledChanged = true;
                 }
+                if (m.attributeName === 'class') {
+                    classChanged = true;
+                }
             }
             if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
                 optgroupOptionChanged = true;
             }
         }
+        if (classChanged && this.onClassChange) {
+            this.onClassChange(this.select.className.split(' '));
+        }
         if (disabledChanged && this.onDisabledChange) {
             this.changeListen(false);
             this.onDisabledChange(this.select.disabled);
@@ -1374,7 +1381,7 @@ class Select {
     updateSelect(id, style, classes) {
         this.changeListen(false);
         if (id) {
-            this.select.id = id;
+            this.select.dataset.id = id;
         }
         if (style) {
             this.select.style.cssText = style;
@@ -1462,6 +1469,7 @@ class Select {
             this.observer.disconnect();
             this.observer = null;
         }
+        delete this.select.dataset.id;
         this.showUI();
     }
 }
@@ -1519,8 +1527,15 @@ class SlimSelect {
             this.destroy();
         }
         this.settings = new Settings(config.settings);
+        const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
         for (const key in config.events) {
-            if (config.events.hasOwnProperty(key)) {
+            if (!config.events.hasOwnProperty(key)) {
+                continue;
+            }
+            if (debounceEvents.indexOf(key) !== -1) {
+                this.events[key] = debounce(config.events[key], 100);
+            }
+            else {
                 this.events[key] = config.events[key];
             }
         }
@@ -1534,6 +1549,10 @@ class SlimSelect {
         this.select.onValueChange = (values) => {
             this.setSelected(values);
         };
+        this.select.onClassChange = (classes) => {
+            this.settings.class = classes;
+            this.render.updateClassStyles();
+        };
         this.select.onDisabledChange = (disabled) => {
             if (disabled) {
                 this.disable();
@@ -1612,7 +1631,7 @@ class SlimSelect {
     getSelected() {
         return this.store.getSelected();
     }
-    setSelected(value) {
+    setSelected(value, runAfterChange = true) {
         const selected = this.store.getSelected();
         this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
         const data = this.store.getData();
@@ -1624,7 +1643,7 @@ class SlimSelect {
         else {
             this.render.renderOptions(data);
         }
-        if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+        if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
             this.events.afterChange(this.store.getSelectedOptions());
         }
     }
@@ -1671,7 +1690,9 @@ class SlimSelect {
             this.events.beforeClose();
         }
         this.render.close();
-        this.search('');
+        if (this.render.content.search.input.value !== '') {
+            this.search('');
+        }
         this.render.mainFocus(false);
         setTimeout(() => {
             if (this.events.afterClose) {