slim-select 2.3.0 → 2.3.2

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

@@ -79,7 +79,7 @@ var SlimSelectVue = (function (vue) {
           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;
@@ -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();
       }
   }
@@ -1520,8 +1528,15 @@ var SlimSelectVue = (function (vue) {
               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];
               }
           }
@@ -1535,6 +1550,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 +1632,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 +1644,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 +1691,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) {

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

@@ -80,7 +80,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;
@@ -347,6 +347,7 @@ class Render {
         this.callbacks = callbacks;
         this.main = this.mainDiv();
         this.content = this.contentDiv();
+        this.updateClassStyles();
         this.settings.contentLocation.appendChild(this.content.main);
     }
     enable() {
@@ -361,8 +362,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;
@@ -379,20 +378,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();
@@ -445,7 +456,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();
                 }
@@ -644,7 +655,7 @@ class Render {
                             selectedValues.push(o.value);
                         }
                     }
-                    this.callbacks.setSelected(selectedValues);
+                    this.callbacks.setSelected(selectedValues, false);
                     if (this.settings.closeOnSelect) {
                         this.callbacks.close();
                     }
@@ -665,21 +676,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();
@@ -791,10 +788,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) {
@@ -976,12 +973,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);
@@ -1065,6 +1062,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);
         }
@@ -1124,7 +1124,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();
                 }
@@ -1260,6 +1260,7 @@ class Select {
         if (!this.listen) {
             return;
         }
+        let classChanged = false;
         let disabledChanged = false;
         let optgroupOptionChanged = false;
         for (const m of mutations) {
@@ -1267,11 +1268,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);
@@ -1376,7 +1383,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;
@@ -1464,6 +1471,7 @@ class Select {
             this.observer.disconnect();
             this.observer = null;
         }
+        delete this.select.dataset.id;
         this.showUI();
     }
 }
@@ -1521,8 +1529,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];
             }
         }
@@ -1536,6 +1551,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();
@@ -1614,7 +1633,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();
@@ -1626,7 +1645,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());
         }
     }
@@ -1673,7 +1692,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/vue/slimselect.vue.d.ts

@@ -67,6 +67,7 @@ declare const _default: import("vue").DefineComponent<{
         select: {
             select: HTMLSelectElement;
             onValueChange?: ((value: string[]) => void) | undefined;
+            onClassChange?: ((classes: string[]) => void) | undefined;
             onDisabledChange?: ((disabled: boolean) => void) | undefined;
             onOptionsChange?: ((data: DataArrayPartial) => void) | undefined;
             listen: boolean;
@@ -161,7 +162,7 @@ declare const _default: import("vue").DefineComponent<{
                 open: () => void;
                 close: () => void;
                 addable?: ((value: string) => string | import("../slim-select/store").OptionOptional | Promise<string | import("../slim-select/store").OptionOptional>) | undefined;
-                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) | undefined;
@@ -239,6 +240,7 @@ declare const _default: import("vue").DefineComponent<{
             disable: () => void;
             open: () => void;
             close: () => void;
+            updateClassStyles: () => void;
             mainDiv: () => import("../slim-select/render").Main;
             mainFocus: (trigger: boolean) => void;
             placeholder: () => HTMLDivElement;
@@ -278,7 +280,7 @@ declare const _default: import("vue").DefineComponent<{
         getData: () => import("../slim-select/store").DataArray;
         setData: (data: DataArrayPartial) => void;
         getSelected: () => string[];
-        setSelected: (value: string | string[]) => void;
+        setSelected: (value: string | string[], runAfterChange?: boolean) => void;
         addOption: (option: import("../slim-select/store").OptionOptional) => void;
         open: () => void;
         close: () => void;

package/src/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slim-select/vue",
   "private": false,
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Vue integration",
   "repository": {
     "type": "git",