@danielgindi/selectbox 1.0.65 → 1.0.68

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.65
+ * @danielgindi/selectbox 1.0.68
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -2574,6 +2574,7 @@ class SelectBox {
         }
 
         this.setItems(o.items);
+        delete o.items; // we do not need this in memory anymore
 
         if (o.multi && Array.isArray(o.selectedValues)) {
             this.setSelectedValues(o.selectedValues);
@@ -2725,6 +2726,8 @@ class SelectBox {
         p.filteredItems = null;
         p.itemsChanged = true;
 
+        this._updateItemByValueMap();
+
         if (resetValues) {
             this.setSelectedValues(this.getSelectedValues());
         }
@@ -2754,9 +2757,9 @@ class SelectBox {
     }
 
     updateItemByValue(value, newItem) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
-        let existingItem = p.items.find(x => x[valueProp] === value);
+        let existingItem = p.itemByValueMap.get(value);
         if (existingItem)
             Object.assign(existingItem, newItem);
 
@@ -3278,11 +3281,17 @@ class SelectBox {
      */
     setValueProp(prop) {
         const p = this._p;
+
+        if (p.valueProp === prop)
+            return this;
+
         p.valueProp = prop;
 
 		if (p.dropList)
 			p.dropList.setValueProp(prop);
 
+        this._updateItemByValueMap();
+
         return this;
     }
 
@@ -3434,7 +3443,7 @@ class SelectBox {
 
             selectedValues.push(value);
 
-            let item = p.items.find(x => x[valueProp] === value);
+            let item = p.itemByValueMap.get(value);
             if (item !== undefined) {
                 selectedItems.push(item);
             } else {
@@ -3655,6 +3664,21 @@ class SelectBox {
         return this;
     }
 
+    /**
+     * Prepare the mapping between values and items.
+     * This reduces search time greatly (i.e when checking items), especially when Vue proxies are in place.
+     * @private
+     */
+    _updateItemByValueMap() {
+        const p = this._p;
+
+        const itemByValueMap = p.itemByValueMap = new Map();
+        const valueProp = p.valueProp;
+        for (let item of p.items) {
+            itemByValueMap.set(item[valueProp], item);
+        }
+    }
+
     /** @private */
     _renderBase() {
         const p = this._p;
@@ -4725,15 +4749,18 @@ class SelectBox {
 
     /**
      * @param {DropList.ItemBase} item
+     * @returns {boolean} true if rendered, false if not
      * @private
      */
     _addMultiItemElement(item) {
         const p = this._p;
         const itemEl = this._renderMultiItem(item);
-        if (!itemEl) return;
+        if (!itemEl) return false;
 
         before(p.inputWrapper, itemEl);
         p.multiItemEls.push(itemEl);
+
+        return true;
     }
 
     /** @private */
@@ -4755,10 +4782,13 @@ class SelectBox {
 
     /** @private */
     _syncClearButton() {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         // Set clear button
-        if (p.selectedItems.length > 0 && p.clearable && p.showSelection) {
+        if (p.selectedItems.length > 0 &&
+            p.selectedItems.some(x => x[multiItemLabelProp] !== false) &&
+            p.clearable && p.showSelection) {
             if (!p.clearButtonWrapper) {
                 p.clearButtonWrapper = createElement(
                     p.multi ? 'li' : 'span',
@@ -4788,7 +4818,8 @@ class SelectBox {
 
     /** @private */
     _syncPlaceholder() {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         let placeholder = '';
 
@@ -4798,7 +4829,9 @@ class SelectBox {
             } else {
                 placeholder = defaultMultiPlaceholderFormatter(p.selectedItems, p.labelProp);
             }
-        } else if (p.selectedItems.length === 0 || !p.showSelection) {
+        } else if (p.selectedItems.length === 0 ||
+            !p.showSelection ||
+            p.selectedItems.every(x => x[multiItemLabelProp] === false)) {
             placeholder = p.placeholder == null ? '' : (p.placeholder + '');
         }
 
@@ -4827,13 +4860,16 @@ class SelectBox {
      * @returns {SelectBox}
      */
     _syncFull(fullItemsRender) {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         this._renderBase();
         this._syncClearButton();
         this._syncPlaceholder();
 
-        fullItemsRender = p.multi && p.showSelection && (fullItemsRender || p.selectedItems.length !== p.multiItemEls.length);
+        fullItemsRender = p.multi &&
+            p.showSelection &&
+            (fullItemsRender || p.selectedItems.filter(x => x[multiItemLabelProp] !== false).length !== p.multiItemEls.length);
 
         if (fullItemsRender || !p.showSelection || !p.multi) {
             // Remove all item elements
@@ -4886,8 +4922,9 @@ class SelectBox {
                         break;
                     }
 
-                    actualItemCount++;
-                    this._addMultiItemElement(items[i]);
+                    if (this._addMultiItemElement(items[i])) {
+                        actualItemCount++;
+                    }
                 }
 
                 if (addRestItem) {
@@ -5416,6 +5453,11 @@ class SelectBox {
             stickyGroup = groups[0].filter(x => stickyValues.has(x[valueProp]));
             if (stickyGroup.length > 0) {
                 groups[0] = groups[0].filter(x => !stickyValues.has(x[valueProp]));
+
+                if (groups[0].length === 0)
+                    groups.shift();
+            } else {
+                stickyGroup = null;
             }
         }
 
@@ -5440,7 +5482,7 @@ class SelectBox {
             });
         }
 
-        if (stickyGroup && stickyGroup.length > 0) {
+        if (stickyGroup) {
             groups.unshift(stickyGroup);
         }