@danielgindi/selectbox 1.0.67 → 1.0.70

package/lib/SelectBox.js

@@ -92,6 +92,7 @@ const inputBackbufferCssProps = [
  * @property {boolean|'touch'} [blurOnSingleSelection='touch']
  * @property {boolean} [multi=false] can multiple values be selected?
  * @property {boolean} [showSelection=true] show selection? if false, the placeholder will take effect
+ * @property {boolean} [showPlaceholderInTooltip=false] show placeholder in title attribute
  * @property {function(items: DropList.ItemBase[]):string} [multiPlaceholderFormatter] formatter for placeholder for multi items mode
  * @property {boolean} [searchable=false] is it searchable?
  * @property {string} [noResultsText='No matching results'] text for no results (empty for none)
@@ -135,6 +136,7 @@ const defaultOptions = {
     blurOnSingleSelection: 'touch',
     multi: false,
     showSelection: true,
+    showPlaceholderInTooltip: false,
     multiPlaceholderFormatter: null,
     searchable: true,
     noResultsText: 'No matching results',
@@ -225,6 +227,7 @@ class SelectBox {
             blurOnSingleSelection: o.blurOnSingleSelection,
             multi: o.multi,
             showSelection: o.showSelection,
+            showPlaceholderInTooltip: o.showPlaceholderInTooltip,
             multiPlaceholderFormatter: o.multiPlaceholderFormatter,
             searchable: o.searchable,
             noResultsText: o.noResultsText,
@@ -360,6 +363,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);
@@ -511,6 +515,8 @@ class SelectBox {
         p.filteredItems = null;
         p.itemsChanged = true;
 
+        this._updateItemByValueMap();
+
         if (resetValues) {
             this.setSelectedValues(this.getSelectedValues());
         }
@@ -540,9 +546,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);
 
@@ -823,7 +829,7 @@ class SelectBox {
         if (p.showSelection === showSelection)
             return this;
 
-        this._p.showSelection = showSelection;
+        p.showSelection = showSelection;
         this._scheduleSync('full');
         return this;
     }
@@ -835,6 +841,28 @@ class SelectBox {
         return this._p.showSelection;
     }
 
+    /**
+     * @param {boolean} showPlaceholderInTooltip
+     * @returns {SelectBox}
+     */
+    setShowPlaceholderInTooltip(showPlaceholderInTooltip) {
+        const p = this._p;
+        showPlaceholderInTooltip = !!showPlaceholderInTooltip;
+        if (p.showPlaceholderInTooltip === showPlaceholderInTooltip)
+            return this;
+
+        p.showPlaceholderInTooltip = showPlaceholderInTooltip;
+        this._scheduleSync('full');
+        return this;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    isShowPlaceholderInTooltipEnabled() {
+        return this._p.showPlaceholderInTooltip;
+    }
+
     /**
      * @param {function(items: DropList.ItemBase[]):string} formatter
      * @returns {SelectBox}
@@ -845,7 +873,7 @@ class SelectBox {
         if (p.multiPlaceholderFormatter === formatter)
             return this;
 
-        this._p.multiPlaceholderFormatter = formatter;
+        p.multiPlaceholderFormatter = formatter;
         this._scheduleSync('full');
         return this;
     }
@@ -859,7 +887,7 @@ class SelectBox {
         if (p.blurOnSingleSelection === value)
             return this;
 
-        this._p.blurOnSingleSelection = value;
+        p.blurOnSingleSelection = value;
         return this;
     }
 
@@ -1064,11 +1092,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;
     }
 
@@ -1220,7 +1254,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 {
@@ -1441,6 +1475,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;
@@ -2599,6 +2648,12 @@ class SelectBox {
 
         // Set input placeholder
         p.input.setAttribute('placeholder', placeholder);
+
+        if (p.showPlaceholderInTooltip) {
+            p.input.setAttribute('title', placeholder);
+        } else {
+            p.input.removeAttribute('title');
+        }
     }
 
     /** @private */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.67",
+  "version": "1.0.70",
   "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
   "main": "dist/lib.cjs.min.js",
   "module": "lib/index.js",

package/scss/selectbox.scss

@@ -234,7 +234,7 @@ $spinner-transition-duration: .15s;
         font-size: 13px;
         line-height: 1.4;
         margin: 0;
-        padding: 0 0 3px;
+        padding: 0;
         border: 0;
         background: none;
 
@@ -261,6 +261,10 @@ $spinner-transition-duration: .15s;
             left: 14px;
         }
     }
+
+    .selectbox[aria-disabled=true] > & {
+        display: none;
+    }
 }
 
 .selectbox__spinner {

package/vue/SelectBox.vue

@@ -24,7 +24,7 @@
      * 'search:focus': input box has gained focus
      * 'search:blur': input box has lost focus
      * 'input:resize': input box resized
-     * 'input': (on select, clear, addsel, removesel)
+     * 'input': (on select, clear, addsel, removesel) - fired after any of the above events.
      * 'itemschanged': `{term, mutated, count}` = the current set of items has changed
      *
      * Slots:
@@ -77,6 +77,10 @@
                 type: Boolean,
                 default: true,
             },
+            showPlaceholderInTooltip: {
+                type: Boolean,
+                default: true,
+            },
             multiPlaceholderFormatter: {
                 type: Function,
                 required: false,
@@ -443,6 +447,11 @@
                     this._box.setShowSelection(value);
             },
 
+            showPlaceholderInTooltip(value) {
+                if (this._box)
+                    this._box.setShowPlaceholderInTooltip(value);
+            },
+
             multiPlaceholderFormatter(formatter) {
                 if (this._box)
                     this._box.setMultiPlaceholderFormatter(formatter);
@@ -632,27 +641,11 @@
 
         methods: {
             _handleBoxEvents(event, data) {
-                if (event === 'select' ||
-                    event === 'clear' ||
-                    event === 'addsel' ||
-                    event === 'removesel') {
-                    let value = event === 'select' ? data.value : this._box.getValue();
-                    if (value === undefined && event !== 'select' && this.useNullForEmptyValue)
-                        value = null;
-                    this.$emit('input', value);
-                }
-
-                if (event === 'search') {
-                    this.$emit(event, data.value);
-                    return;
-                }
-
                 switch (event) {
                     case 'clear:before':
                     case 'clear':
                     case 'open':
                     case 'close':
-                    case 'search':
                     case 'search:focus':
                     case 'search:blur':
                     case 'addsel:before':
@@ -665,6 +658,20 @@
                     case 'itemschanged':
                         this.$emit(event, ...(data === undefined ? [] : [data]));
                         break;
+
+                    case 'search':
+                        this.$emit(event, data.value);
+                        break;
+                }
+
+                if (event === 'select' ||
+                    event === 'clear' ||
+                    event === 'addsel' ||
+                    event === 'removesel') {
+                    let value = event === 'select' ? data.value : this._box.getValue();
+                    if (value === undefined && event !== 'select' && this.useNullForEmptyValue)
+                        value = null;
+                    this.$emit('input', value);
                 }
             },
 
@@ -689,6 +696,7 @@
                     sortItemComparator: this.sortItemComparator,
                     splitListCheckedGroups: this.splitListCheckedGroups,
                     showSelection: this.showSelection,
+                    showPlaceholderInTooltip: this.showPlaceholderInTooltip,
                     multiPlaceholderFormatter: this.multiPlaceholderFormatter,
                     blurOnSingleSelection: this.blurOnSingleSelection,
                     multi: this.multi,