slim-select 2.3.0 → 2.3.1

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/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

@@ -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();
     }
 }
@@ -1534,6 +1542,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 +1624,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 +1636,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 +1683,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/src/vue/dist/slimselectvue.global.js

@@ -346,6 +346,7 @@ var SlimSelectVue = (function (vue) {
           this.callbacks = callbacks;
           this.main = this.mainDiv();
           this.content = this.contentDiv();
+          this.updateClassStyles();
           this.settings.contentLocation.appendChild(this.content.main);
       }
       enable() {
@@ -360,8 +361,6 @@ var SlimSelectVue = (function (vue) {
           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;
@@ -378,20 +377,32 @@ var SlimSelectVue = (function (vue) {
           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();
@@ -444,7 +455,7 @@ var SlimSelectVue = (function (vue) {
                   shouldDelete = this.callbacks.beforeChange(after, before) === true;
               }
               if (shouldDelete) {
-                  this.callbacks.setSelected(['']);
+                  this.callbacks.setSelected([''], false);
                   if (this.settings.closeOnSelect) {
                       this.callbacks.close();
                   }
@@ -643,7 +654,7 @@ var SlimSelectVue = (function (vue) {
                               selectedValues.push(o.value);
                           }
                       }
-                      this.callbacks.setSelected(selectedValues);
+                      this.callbacks.setSelected(selectedValues, false);
                       if (this.settings.closeOnSelect) {
                           this.callbacks.close();
                       }
@@ -664,21 +675,7 @@ var SlimSelectVue = (function (vue) {
       }
       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();
@@ -790,10 +787,10 @@ var SlimSelectVue = (function (vue) {
                       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) {
@@ -975,12 +972,12 @@ var SlimSelectVue = (function (vue) {
                                   }
                                   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);
@@ -1064,6 +1061,9 @@ var SlimSelectVue = (function (vue) {
           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);
           }
@@ -1123,7 +1123,7 @@ var SlimSelectVue = (function (vue) {
                   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();
                   }
@@ -1259,6 +1259,7 @@ var SlimSelectVue = (function (vue) {
           if (!this.listen) {
               return;
           }
+          let classChanged = false;
           let disabledChanged = false;
           let optgroupOptionChanged = false;
           for (const m of mutations) {
@@ -1266,11 +1267,17 @@ var SlimSelectVue = (function (vue) {
                   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);
@@ -1375,7 +1382,7 @@ var SlimSelectVue = (function (vue) {
       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;
@@ -1463,6 +1470,7 @@ var SlimSelectVue = (function (vue) {
               this.observer.disconnect();
               this.observer = null;
           }
+          delete this.select.dataset.id;
           this.showUI();
       }
   }
@@ -1535,6 +1543,10 @@ var SlimSelectVue = (function (vue) {
           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();
@@ -1613,7 +1625,7 @@ var SlimSelectVue = (function (vue) {
       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();
@@ -1625,7 +1637,7 @@ var SlimSelectVue = (function (vue) {
           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());
           }
       }
@@ -1672,7 +1684,9 @@ var SlimSelectVue = (function (vue) {
               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) {