slim-select 2.1.0 → 2.2.0

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

@@ -54,6 +54,8 @@ var SlimSelectVue = (function (vue) {
       constructor(optgroup) {
           this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
           this.label = optgroup.label || '';
+          this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
+          this.closable = optgroup.closable || 'off';
           this.options = [];
           if (optgroup.options) {
               for (const o of optgroup.options) {
@@ -200,6 +202,14 @@ var SlimSelectVue = (function (vue) {
           });
           return selectedIDs;
       }
+      getOptgroupByID(id) {
+          for (let dataObj of this.data) {
+              if (dataObj instanceof Optgroup && dataObj.id === id) {
+                  return dataObj;
+              }
+          }
+          return null;
+      }
       getOptionByID(id) {
           let options = this.filter((opt) => {
               return opt.id === id;
@@ -234,7 +244,7 @@ var SlimSelectVue = (function (vue) {
                           }
                       });
                       if (optOptions.length > 0) {
-                          dataSearch.push(new Optgroup({ id: dataObj.id, label: dataObj.label, options: optOptions }));
+                          dataSearch.push(new Optgroup(dataObj));
                       }
                   }
               }
@@ -275,11 +285,18 @@ var SlimSelectVue = (function (vue) {
               list: 'ss-list',
               optgroup: 'ss-optgroup',
               optgroupLabel: 'ss-optgroup-label',
-              optgroupSelectable: 'ss-optgroup-selectable',
+              optgroupLabelText: 'ss-optgroup-label-text',
+              optgroupActions: 'ss-optgroup-actions',
+              optgroupSelectAll: 'ss-selectall',
+              optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
+              optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
+              optgroupClosable: 'ss-closable',
               option: 'ss-option',
-              optionSelected: 'ss-option-selected',
               optionDelete: 'M10,10 L90,90 M10,90 L90,10',
               highlighted: 'ss-highlighted',
+              open: 'ss-open',
+              close: 'ss-close',
+              selected: 'ss-selected',
               error: 'ss-error',
               disabled: 'ss-disabled',
               hide: 'ss-hide',
@@ -289,8 +306,6 @@ var SlimSelectVue = (function (vue) {
           this.callbacks = callbacks;
           this.main = this.mainDiv();
           this.content = this.contentDiv();
-          this.renderValues();
-          this.renderOptions(this.store.getData());
           this.settings.contentLocation.appendChild(this.content.main);
       }
       enable() {
@@ -803,25 +818,23 @@ var SlimSelectVue = (function (vue) {
           }
           for (let i = 0; i < options.length; i++) {
               if (options[i].classList.contains(this.classes.highlighted)) {
-                  options[i].classList.remove(this.classes.highlighted);
-                  if (dir === 'down') {
-                      if (i + 1 < options.length) {
-                          options[i + 1].classList.add(this.classes.highlighted);
-                          this.ensureElementInView(this.content.list, options[i + 1]);
-                      }
-                      else {
-                          options[0].classList.add(this.classes.highlighted);
-                          this.ensureElementInView(this.content.list, options[0]);
+                  const prevOption = options[i];
+                  prevOption.classList.remove(this.classes.highlighted);
+                  const prevParent = prevOption.parentElement;
+                  if (prevParent && prevParent.classList.contains(this.classes.open)) {
+                      const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel);
+                      if (optgroupLabel) {
+                          optgroupLabel.click();
                       }
                   }
-                  else {
-                      if (i - 1 >= 0) {
-                          options[i - 1].classList.add(this.classes.highlighted);
-                          this.ensureElementInView(this.content.list, options[i - 1]);
-                      }
-                      else {
-                          options[options.length - 1].classList.add(this.classes.highlighted);
-                          this.ensureElementInView(this.content.list, options[options.length - 1]);
+                  let selectOption = options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1];
+                  selectOption.classList.add(this.classes.highlighted);
+                  this.ensureElementInView(this.content.list, selectOption);
+                  const selectParent = selectOption.parentElement;
+                  if (selectParent && selectParent.classList.contains(this.classes.close)) {
+                      const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel);
+                      if (optgroupLabel) {
+                          optgroupLabel.click();
                       }
                   }
                   return;
@@ -866,18 +879,95 @@ var SlimSelectVue = (function (vue) {
                   optgroupEl.classList.add(this.classes.optgroup);
                   const optgroupLabel = document.createElement('div');
                   optgroupLabel.classList.add(this.classes.optgroupLabel);
-                  optgroupLabel.innerHTML = d.label;
-                  if (this.settings.selectByGroup && this.settings.isMultiple) {
-                      optgroupLabel.classList.add(this.classes.optgroupSelectable);
+                  optgroupEl.appendChild(optgroupLabel);
+                  const optgroupLabelText = document.createElement('div');
+                  optgroupLabelText.classList.add(this.classes.optgroupLabelText);
+                  optgroupLabelText.textContent = d.label;
+                  optgroupLabel.appendChild(optgroupLabelText);
+                  const optgroupActions = document.createElement('div');
+                  optgroupActions.classList.add(this.classes.optgroupActions);
+                  optgroupLabel.appendChild(optgroupActions);
+                  if (this.settings.isMultiple && d.selectAll) {
+                      const selectAll = document.createElement('div');
+                      selectAll.classList.add(this.classes.optgroupSelectAll);
+                      let allSelected = true;
+                      for (const o of d.options) {
+                          if (!o.selected) {
+                              allSelected = false;
+                              break;
+                          }
+                      }
+                      if (allSelected) {
+                          selectAll.classList.add(this.classes.selected);
+                      }
+                      const selectAllText = document.createElement('span');
+                      selectAllText.textContent = 'Select All';
+                      selectAll.appendChild(selectAllText);
+                      const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                      selectAllSvg.setAttribute('viewBox', '0 0 100 100');
+                      selectAll.appendChild(selectAllSvg);
+                      const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                      selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
+                      selectAllSvg.appendChild(selectAllBox);
+                      const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                      selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
+                      selectAllSvg.appendChild(selectAllCheck);
+                      selectAll.addEventListener('click', (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          const currentSelected = this.store.getSelected();
+                          if (allSelected) {
+                              const newSelected = currentSelected.filter((s) => {
+                                  for (const o of d.options) {
+                                      if (s === o.value) {
+                                          return false;
+                                      }
+                                  }
+                                  return true;
+                              });
+                              this.callbacks.setSelected(newSelected);
+                              return;
+                          }
+                          else {
+                              const newSelected = currentSelected.concat(d.options.map((o) => o.value));
+                              this.callbacks.setSelected(newSelected);
+                          }
+                      });
+                      optgroupActions.appendChild(selectAll);
+                  }
+                  if (d.closable !== 'off') {
+                      const optgroupClosable = document.createElement('div');
+                      optgroupClosable.classList.add(this.classes.optgroupClosable);
+                      const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                      optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100');
+                      optgroupClosableSvg.classList.add(this.classes.arrow);
+                      optgroupClosable.appendChild(optgroupClosableSvg);
+                      const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                      optgroupClosableArrow.setAttribute('d', this.classes.arrow);
+                      optgroupClosableSvg.appendChild(optgroupClosableArrow);
+                      if (d.closable === 'open') {
+                          optgroupEl.classList.add(this.classes.open);
+                          optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
+                      }
+                      else if (d.closable === 'close') {
+                          optgroupEl.classList.add(this.classes.close);
+                          optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
+                      }
                       optgroupLabel.addEventListener('click', (e) => {
                           e.preventDefault();
                           e.stopPropagation();
-                          for (const childEl of optgroupEl.children) {
-                              if (childEl.className.indexOf(this.classes.option) !== -1) {
-                                  childEl.click();
-                              }
+                          if (optgroupEl.classList.contains(this.classes.close)) {
+                              optgroupEl.classList.remove(this.classes.close);
+                              optgroupEl.classList.add(this.classes.open);
+                              optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
+                          }
+                          else {
+                              optgroupEl.classList.remove(this.classes.open);
+                              optgroupEl.classList.add(this.classes.close);
+                              optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
                           }
                       });
+                      optgroupActions.appendChild(optgroupClosable);
                   }
                   optgroupEl.appendChild(optgroupLabel);
                   for (const o of d.options) {
@@ -929,10 +1019,10 @@ var SlimSelectVue = (function (vue) {
               optionEl.classList.add(this.classes.hide);
           }
           if (option.selected) {
-              optionEl.classList.add(this.classes.optionSelected);
+              optionEl.classList.add(this.classes.selected);
           }
           else {
-              optionEl.classList.remove(this.classes.optionSelected);
+              optionEl.classList.remove(this.classes.selected);
           }
           optionEl.addEventListener('click', (e) => {
               e.preventDefault();
@@ -1154,8 +1244,10 @@ var SlimSelectVue = (function (vue) {
       }
       getDataFromOptgroup(optgroup) {
           let data = {
-              id: '',
+              id: (optgroup.dataset ? optgroup.dataset.id : false) || '',
               label: optgroup.label,
+              selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
+              closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
               options: [],
           };
           const options = optgroup.childNodes;
@@ -1166,6 +1258,22 @@ var SlimSelectVue = (function (vue) {
           }
           return data;
       }
+      getDataFromOption(option) {
+          return {
+              id: (option.dataset ? option.dataset.id : false) || '',
+              value: option.value,
+              text: option.text,
+              html: option.innerHTML,
+              selected: option.selected,
+              display: option.style.display === 'none' ? false : true,
+              disabled: option.disabled,
+              mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
+              placeholder: option.dataset.placeholder === 'true',
+              class: option.className,
+              style: option.style.cssText,
+              data: option.dataset,
+          };
+      }
       getSelectedValues() {
           let values = [];
           const options = this.select.childNodes;
@@ -1190,22 +1298,6 @@ var SlimSelectVue = (function (vue) {
           }
           return values;
       }
-      getDataFromOption(option) {
-          return {
-              id: (option.dataset ? option.dataset.id : false) || generateID(),
-              value: option.value,
-              text: option.text,
-              html: option.innerHTML,
-              selected: option.selected,
-              display: option.style.display === 'none' ? false : true,
-              disabled: option.disabled,
-              mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
-              placeholder: option.dataset.placeholder === 'true',
-              class: option.className,
-              style: option.style.cssText,
-              data: option.dataset,
-          };
-      }
       setSelected(value) {
           const options = this.select.childNodes;
           for (const o of options) {
@@ -1260,6 +1352,12 @@ var SlimSelectVue = (function (vue) {
           const optgroupEl = document.createElement('optgroup');
           optgroupEl.id = optgroup.id;
           optgroupEl.label = optgroup.label;
+          if (optgroup.selectAll) {
+              optgroupEl.dataset.selectAll = 'true';
+          }
+          if (optgroup.closable !== 'off') {
+              optgroupEl.dataset.closable = optgroup.closable;
+          }
           if (optgroup.options) {
               for (const o of optgroup.options) {
                   optgroupEl.appendChild(this.createOption(o));
@@ -1316,8 +1414,6 @@ var SlimSelectVue = (function (vue) {
           this.isOpen = false;
           this.triggerFocus = true;
           this.intervalMove = null;
-          this.mainHeight = 30;
-          this.contentHeight = 0;
           if (!settings) {
               settings = {};
           }
@@ -1339,7 +1435,6 @@ var SlimSelectVue = (function (vue) {
           this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
           this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
           this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
-          this.selectByGroup = settings.selectByGroup !== undefined ? settings.selectByGroup : false;
           this.minSelected = settings.minSelected || 0;
           this.maxSelected = settings.maxSelected || 1000;
           this.timeoutDelay = settings.timeoutDelay || 200;
@@ -1446,6 +1541,8 @@ var SlimSelectVue = (function (vue) {
               afterChange: this.events.afterChange,
           };
           this.render = new Render(this.settings, this.store, callbacks);
+          this.render.renderValues();
+          this.render.renderOptions(this.store.getData());
           if (this.selectEl.parentNode) {
               this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
           }

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

@@ -55,6 +55,8 @@ class Optgroup {
     constructor(optgroup) {
         this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
         this.label = optgroup.label || '';
+        this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
+        this.closable = optgroup.closable || 'off';
         this.options = [];
         if (optgroup.options) {
             for (const o of optgroup.options) {
@@ -201,6 +203,14 @@ class Store {
         });
         return selectedIDs;
     }
+    getOptgroupByID(id) {
+        for (let dataObj of this.data) {
+            if (dataObj instanceof Optgroup && dataObj.id === id) {
+                return dataObj;
+            }
+        }
+        return null;
+    }
     getOptionByID(id) {
         let options = this.filter((opt) => {
             return opt.id === id;
@@ -235,7 +245,7 @@ class Store {
                         }
                     });
                     if (optOptions.length > 0) {
-                        dataSearch.push(new Optgroup({ id: dataObj.id, label: dataObj.label, options: optOptions }));
+                        dataSearch.push(new Optgroup(dataObj));
                     }
                 }
             }
@@ -276,11 +286,18 @@ class Render {
             list: 'ss-list',
             optgroup: 'ss-optgroup',
             optgroupLabel: 'ss-optgroup-label',
-            optgroupSelectable: 'ss-optgroup-selectable',
+            optgroupLabelText: 'ss-optgroup-label-text',
+            optgroupActions: 'ss-optgroup-actions',
+            optgroupSelectAll: 'ss-selectall',
+            optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
+            optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
+            optgroupClosable: 'ss-closable',
             option: 'ss-option',
-            optionSelected: 'ss-option-selected',
             optionDelete: 'M10,10 L90,90 M10,90 L90,10',
             highlighted: 'ss-highlighted',
+            open: 'ss-open',
+            close: 'ss-close',
+            selected: 'ss-selected',
             error: 'ss-error',
             disabled: 'ss-disabled',
             hide: 'ss-hide',
@@ -290,8 +307,6 @@ class Render {
         this.callbacks = callbacks;
         this.main = this.mainDiv();
         this.content = this.contentDiv();
-        this.renderValues();
-        this.renderOptions(this.store.getData());
         this.settings.contentLocation.appendChild(this.content.main);
     }
     enable() {
@@ -804,25 +819,23 @@ class Render {
         }
         for (let i = 0; i < options.length; i++) {
             if (options[i].classList.contains(this.classes.highlighted)) {
-                options[i].classList.remove(this.classes.highlighted);
-                if (dir === 'down') {
-                    if (i + 1 < options.length) {
-                        options[i + 1].classList.add(this.classes.highlighted);
-                        this.ensureElementInView(this.content.list, options[i + 1]);
-                    }
-                    else {
-                        options[0].classList.add(this.classes.highlighted);
-                        this.ensureElementInView(this.content.list, options[0]);
+                const prevOption = options[i];
+                prevOption.classList.remove(this.classes.highlighted);
+                const prevParent = prevOption.parentElement;
+                if (prevParent && prevParent.classList.contains(this.classes.open)) {
+                    const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel);
+                    if (optgroupLabel) {
+                        optgroupLabel.click();
                     }
                 }
-                else {
-                    if (i - 1 >= 0) {
-                        options[i - 1].classList.add(this.classes.highlighted);
-                        this.ensureElementInView(this.content.list, options[i - 1]);
-                    }
-                    else {
-                        options[options.length - 1].classList.add(this.classes.highlighted);
-                        this.ensureElementInView(this.content.list, options[options.length - 1]);
+                let selectOption = options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1];
+                selectOption.classList.add(this.classes.highlighted);
+                this.ensureElementInView(this.content.list, selectOption);
+                const selectParent = selectOption.parentElement;
+                if (selectParent && selectParent.classList.contains(this.classes.close)) {
+                    const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel);
+                    if (optgroupLabel) {
+                        optgroupLabel.click();
                     }
                 }
                 return;
@@ -867,18 +880,95 @@ class Render {
                 optgroupEl.classList.add(this.classes.optgroup);
                 const optgroupLabel = document.createElement('div');
                 optgroupLabel.classList.add(this.classes.optgroupLabel);
-                optgroupLabel.innerHTML = d.label;
-                if (this.settings.selectByGroup && this.settings.isMultiple) {
-                    optgroupLabel.classList.add(this.classes.optgroupSelectable);
+                optgroupEl.appendChild(optgroupLabel);
+                const optgroupLabelText = document.createElement('div');
+                optgroupLabelText.classList.add(this.classes.optgroupLabelText);
+                optgroupLabelText.textContent = d.label;
+                optgroupLabel.appendChild(optgroupLabelText);
+                const optgroupActions = document.createElement('div');
+                optgroupActions.classList.add(this.classes.optgroupActions);
+                optgroupLabel.appendChild(optgroupActions);
+                if (this.settings.isMultiple && d.selectAll) {
+                    const selectAll = document.createElement('div');
+                    selectAll.classList.add(this.classes.optgroupSelectAll);
+                    let allSelected = true;
+                    for (const o of d.options) {
+                        if (!o.selected) {
+                            allSelected = false;
+                            break;
+                        }
+                    }
+                    if (allSelected) {
+                        selectAll.classList.add(this.classes.selected);
+                    }
+                    const selectAllText = document.createElement('span');
+                    selectAllText.textContent = 'Select All';
+                    selectAll.appendChild(selectAllText);
+                    const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                    selectAllSvg.setAttribute('viewBox', '0 0 100 100');
+                    selectAll.appendChild(selectAllSvg);
+                    const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                    selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
+                    selectAllSvg.appendChild(selectAllBox);
+                    const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                    selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
+                    selectAllSvg.appendChild(selectAllCheck);
+                    selectAll.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const currentSelected = this.store.getSelected();
+                        if (allSelected) {
+                            const newSelected = currentSelected.filter((s) => {
+                                for (const o of d.options) {
+                                    if (s === o.value) {
+                                        return false;
+                                    }
+                                }
+                                return true;
+                            });
+                            this.callbacks.setSelected(newSelected);
+                            return;
+                        }
+                        else {
+                            const newSelected = currentSelected.concat(d.options.map((o) => o.value));
+                            this.callbacks.setSelected(newSelected);
+                        }
+                    });
+                    optgroupActions.appendChild(selectAll);
+                }
+                if (d.closable !== 'off') {
+                    const optgroupClosable = document.createElement('div');
+                    optgroupClosable.classList.add(this.classes.optgroupClosable);
+                    const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                    optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100');
+                    optgroupClosableSvg.classList.add(this.classes.arrow);
+                    optgroupClosable.appendChild(optgroupClosableSvg);
+                    const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                    optgroupClosableArrow.setAttribute('d', this.classes.arrow);
+                    optgroupClosableSvg.appendChild(optgroupClosableArrow);
+                    if (d.closable === 'open') {
+                        optgroupEl.classList.add(this.classes.open);
+                        optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
+                    }
+                    else if (d.closable === 'close') {
+                        optgroupEl.classList.add(this.classes.close);
+                        optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
+                    }
                     optgroupLabel.addEventListener('click', (e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        for (const childEl of optgroupEl.children) {
-                            if (childEl.className.indexOf(this.classes.option) !== -1) {
-                                childEl.click();
-                            }
+                        if (optgroupEl.classList.contains(this.classes.close)) {
+                            optgroupEl.classList.remove(this.classes.close);
+                            optgroupEl.classList.add(this.classes.open);
+                            optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
+                        }
+                        else {
+                            optgroupEl.classList.remove(this.classes.open);
+                            optgroupEl.classList.add(this.classes.close);
+                            optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
                         }
                     });
+                    optgroupActions.appendChild(optgroupClosable);
                 }
                 optgroupEl.appendChild(optgroupLabel);
                 for (const o of d.options) {
@@ -930,10 +1020,10 @@ class Render {
             optionEl.classList.add(this.classes.hide);
         }
         if (option.selected) {
-            optionEl.classList.add(this.classes.optionSelected);
+            optionEl.classList.add(this.classes.selected);
         }
         else {
-            optionEl.classList.remove(this.classes.optionSelected);
+            optionEl.classList.remove(this.classes.selected);
         }
         optionEl.addEventListener('click', (e) => {
             e.preventDefault();
@@ -1155,8 +1245,10 @@ class Select {
     }
     getDataFromOptgroup(optgroup) {
         let data = {
-            id: '',
+            id: (optgroup.dataset ? optgroup.dataset.id : false) || '',
             label: optgroup.label,
+            selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
+            closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
             options: [],
         };
         const options = optgroup.childNodes;
@@ -1167,6 +1259,22 @@ class Select {
         }
         return data;
     }
+    getDataFromOption(option) {
+        return {
+            id: (option.dataset ? option.dataset.id : false) || '',
+            value: option.value,
+            text: option.text,
+            html: option.innerHTML,
+            selected: option.selected,
+            display: option.style.display === 'none' ? false : true,
+            disabled: option.disabled,
+            mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
+            placeholder: option.dataset.placeholder === 'true',
+            class: option.className,
+            style: option.style.cssText,
+            data: option.dataset,
+        };
+    }
     getSelectedValues() {
         let values = [];
         const options = this.select.childNodes;
@@ -1191,22 +1299,6 @@ class Select {
         }
         return values;
     }
-    getDataFromOption(option) {
-        return {
-            id: (option.dataset ? option.dataset.id : false) || generateID(),
-            value: option.value,
-            text: option.text,
-            html: option.innerHTML,
-            selected: option.selected,
-            display: option.style.display === 'none' ? false : true,
-            disabled: option.disabled,
-            mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
-            placeholder: option.dataset.placeholder === 'true',
-            class: option.className,
-            style: option.style.cssText,
-            data: option.dataset,
-        };
-    }
     setSelected(value) {
         const options = this.select.childNodes;
         for (const o of options) {
@@ -1261,6 +1353,12 @@ class Select {
         const optgroupEl = document.createElement('optgroup');
         optgroupEl.id = optgroup.id;
         optgroupEl.label = optgroup.label;
+        if (optgroup.selectAll) {
+            optgroupEl.dataset.selectAll = 'true';
+        }
+        if (optgroup.closable !== 'off') {
+            optgroupEl.dataset.closable = optgroup.closable;
+        }
         if (optgroup.options) {
             for (const o of optgroup.options) {
                 optgroupEl.appendChild(this.createOption(o));
@@ -1317,8 +1415,6 @@ class Settings {
         this.isOpen = false;
         this.triggerFocus = true;
         this.intervalMove = null;
-        this.mainHeight = 30;
-        this.contentHeight = 0;
         if (!settings) {
             settings = {};
         }
@@ -1340,7 +1436,6 @@ class Settings {
         this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
         this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
         this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
-        this.selectByGroup = settings.selectByGroup !== undefined ? settings.selectByGroup : false;
         this.minSelected = settings.minSelected || 0;
         this.maxSelected = settings.maxSelected || 1000;
         this.timeoutDelay = settings.timeoutDelay || 200;
@@ -1447,6 +1542,8 @@ class SlimSelect {
             afterChange: this.events.afterChange,
         };
         this.render = new Render(this.settings, this.store, callbacks);
+        this.render.renderValues();
+        this.render.renderOptions(this.store.getData());
         if (this.selectEl.parentNode) {
             this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
         }

package/src/vue/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@slim-select/vue",
-  "version": "1.0.0",
+  "private": false,
+  "version": "1.1.0",
   "description": "Vue integration",
   "repository": {
     "type": "git",
@@ -10,7 +11,7 @@
     "vue"
   ],
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
-  "homepage": "https://slimselectjs.com",
+  "homepage": "https://slimselectjs.com/frameworks#vue",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/brianvoe/slim-select/issues"