slim-select 2.3.0 → 2.3.2

package/dist/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/dist/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/dist/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/dist/slimselect.cjs.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) {

package/dist/slimselect.es.js

@@ -76,7 +76,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;
@@ -343,6 +343,7 @@ class Render {
         this.callbacks = callbacks;
         this.main = this.mainDiv();
         this.content = this.contentDiv();
+        this.updateClassStyles();
         this.settings.contentLocation.appendChild(this.content.main);
     }
     enable() {
@@ -357,8 +358,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;
@@ -375,20 +374,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();
@@ -441,7 +452,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();
                 }
@@ -640,7 +651,7 @@ class Render {
                             selectedValues.push(o.value);
                         }
                     }
-                    this.callbacks.setSelected(selectedValues);
+                    this.callbacks.setSelected(selectedValues, false);
                     if (this.settings.closeOnSelect) {
                         this.callbacks.close();
                     }
@@ -661,21 +672,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();
@@ -787,10 +784,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) {
@@ -972,12 +969,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);
@@ -1061,6 +1058,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);
         }
@@ -1120,7 +1120,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();
                 }
@@ -1256,6 +1256,7 @@ class Select {
         if (!this.listen) {
             return;
         }
+        let classChanged = false;
         let disabledChanged = false;
         let optgroupOptionChanged = false;
         for (const m of mutations) {
@@ -1263,11 +1264,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);
@@ -1372,7 +1379,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;
@@ -1460,6 +1467,7 @@ class Select {
             this.observer.disconnect();
             this.observer = null;
         }
+        delete this.select.dataset.id;
         this.showUI();
     }
 }
@@ -1517,8 +1525,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];
             }
         }
@@ -1532,6 +1547,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();
@@ -1610,7 +1629,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();
@@ -1622,7 +1641,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());
         }
     }
@@ -1669,7 +1688,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) {