@danielgindi/selectbox 1.0.39 → 1.0.46

package/lib/DropList.js

@@ -131,7 +131,7 @@ Emits the following events:
 'hide:before': the drop list will hide.
 'hide': the drop list was hidden.
 'hide:after': emitted after the hide css transition has ended, or immediately after 'hide'.
-'check' {value, item, isCheckingGroup}: item was selected (in multi mode).
+'check' {value, item, checked: boolean, isGroup: boolean, isCheckingGroup: boolean}: item was selected (in multi mode).
 'groupcheck' {value, item, affectedItems}: item was selected (in multi mode).
  */
 
@@ -181,7 +181,7 @@ class DropList {
         let classes = [p.baseClassName];
 
         if (p.additionalClasses) {
-            classes = classes.concat(p.additionalClasses);
+            classes = classes.concat((p.additionalClasses + '').split('').filter(x => x));
         }
 
         const initialCss = {
@@ -230,8 +230,13 @@ class DropList {
 
                 if ((/**@type any*/index) === GhostSymbol) {
                     item = {
-                        [p.labelProp]: p.lastMeasureLongestLabelText,
-                        [p.valueProp]: 'Measure',
+                        label: p.lastMeasureLongestLabelText,
+                        value: 'Measure',
+
+                        [ItemSymbol]: {
+                            [p.labelProp]: p.lastMeasureLongestLabelText,
+                            [p.valueProp]: 'Measure',
+                        },
                     };
                     itemEl.setAttribute('aria-hidden', 'true');
                 } else {
@@ -285,7 +290,7 @@ class DropList {
             const fn = p.unrenderItem;
             p.virtualListHelper.setOnItemUnrender(el => {
                 try {
-                    fn(el[ItemSymbol], el);
+                    fn(el[ItemSymbol][ItemSymbol], el);
                 } catch (err) { console.error(err); } // eslint-disable-line no-console
                 delete el[ItemSymbol];
 
@@ -425,7 +430,7 @@ class DropList {
         if (!item)
             return;
 
-        this._trigger('itemblur', { value: item[p.valueProp], item: item });
+        this._trigger('itemblur', { value: item.value, item: item[ItemSymbol] ?? item });
     }
 
     nextPage(event) {
@@ -447,7 +452,13 @@ class DropList {
             if (p.focusItemEl) {
                 toggleClass(p.focusItemEl, `${p.baseClassName}__item_checked`, item._checked);
             }
-            this._trigger('check', { value: item[p.valueProp], item: item });
+            this._trigger('check', {
+                value: item.value,
+                item: item[ItemSymbol] ?? item,
+                checked: item._checked,
+                isGroup: item._group,
+                isCheckingGroup: false,
+            });
 
             this._updateGroupStateForItem(item);
         }
@@ -472,7 +483,7 @@ class DropList {
             this._setSingleSelectedItemEl(p.focusItemEl);
         }
 
-        this._trigger('select', { value: item ? item[p.valueProp] : undefined, item: item });
+        this._trigger('select', { value: item ? item.value : undefined, item: item[ItemSymbol] ?? item });
 
         return true;
     }
@@ -511,8 +522,8 @@ class DropList {
             //noinspection PointlessBooleanExpressionJS
             let item = {
                 [ItemSymbol]: oitem,
-                [labelProp]: oitem[labelProp],
-                [valueProp]: oitem[valueProp],
+                label: oitem[labelProp],
+                value: oitem[valueProp],
                 _nocheck: !!oitem._nocheck,
                 _nointeraction: !!oitem._nointeraction,
             };
@@ -563,10 +574,10 @@ class DropList {
         item[ItemSymbol] = newItem;
 
         if (hasOwnProperty.call(newItem, p.labelProp))
-            item[p.labelProp] = newItem[p.labelProp];
+            item.label = newItem[p.labelProp];
 
         if (hasOwnProperty.call(newItem, p.valueProp))
-            item[p.valueProp] = newItem[p.valueProp];
+            item.value = newItem[p.valueProp];
 
         if (hasOwnProperty.call(newItem, '_nocheck'))
             item._nocheck = !!newItem._nocheck;
@@ -634,12 +645,12 @@ class DropList {
     }
 
     itemDataByValue(value) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
-            if (item[valueProp] === value) {
-                return item;
+            if (item.value === value) {
+                return item[ItemSymbol];
             }
         }
 
@@ -647,11 +658,11 @@ class DropList {
     }
 
     itemIndexByValue(value) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
-            if (item[valueProp] === value) {
+            if (item.value === value) {
                 return i;
             }
         }
@@ -660,11 +671,11 @@ class DropList {
     }
 
     itemIndexByValueOrLabel(value, label) {
-        const p = this._p, labelProp = p.labelProp, valueProp = p.valueProp;
+        const p = this._p;
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
-            if (item[valueProp] === value || item[labelProp] === label) {
+            if (item.value === value || item.label === label) {
                 return i;
             }
         }
@@ -673,7 +684,7 @@ class DropList {
     }
 
     items() {
-        return this._p.items.slice(0);
+        return this._p.items.map(x => x[ItemSymbol]);
     }
 
     itemsReference() {
@@ -685,7 +696,7 @@ class DropList {
     }
 
     itemAtIndex(index) {
-        return this._p.items[index];
+        return this._p.items[index]?.[ItemSymbol];
     }
 
     /**
@@ -965,13 +976,13 @@ class DropList {
      * @returns {DropList} self
      */
     setCheckedValues(values) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         let groupIndexes = [];
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
-            let checked = !item._nocheck && values.indexOf(item[valueProp]) !== -1;
+            let checked = !item._nocheck && values.indexOf(item.value) !== -1;
 
             if (item._group) {
                 groupIndexes.push(i);
@@ -1003,7 +1014,7 @@ class DropList {
      * @returns {Array<*>} self
      */
     getCheckedValues(excludeGroups) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         excludeGroups = excludeGroups && p.groupCount > 0;
 
@@ -1013,7 +1024,7 @@ class DropList {
             let item = p.items[i];
             if (!item._checked) continue;
             if (excludeGroups && item._group) continue;
-            values.push(item[valueProp]);
+            values.push(item.value);
         }
 
         return values;
@@ -1036,7 +1047,7 @@ class DropList {
             let item = p.items[i];
             if (!item._checked) continue;
             if (excludeGroups && item._group) continue;
-            items.push(item);
+            items.push(item[ItemSymbol]);
         }
 
         return items;
@@ -1215,7 +1226,7 @@ class DropList {
                 itemElement.classList.add(`${p.baseClassName}__item_focus`);
                 p.focusItemEl = itemElement;
 
-                this._trigger('itemfocus', { value: itemElement[p.valueProp], item: itemElement[ItemSymbol], event: null });
+                this._trigger('itemfocus', { value: itemElement.value, item: itemElement[ItemSymbol], event: null });
             }
         }
 
@@ -1372,15 +1383,15 @@ class DropList {
     }
 
     _getItemIndex(item) {
-        const p = this._p, labelProp = p.labelProp, valueProp = p.valueProp;
+        const p = this._p;
 
         let itemIndex = -1;
 
         if (item) {
             itemIndex = p.items.indexOf(item);
             if (itemIndex === -1) {
-                let value = (item && item[valueProp] !== undefined) ? item[valueProp] : item;
-                let label = (item && item[labelProp]) ? item[labelProp] : value;
+                let value = (item && item.value !== undefined) ? item.value : item;
+                let label = (item && item.label) ? item.label : value;
                 itemIndex = this.itemIndexByValueOrLabel(value, label);
             }
         }
@@ -1616,7 +1627,7 @@ class DropList {
     }
 
     _keydownFreeType(evt) {
-        const p = this._p, labelProp = p.labelProp;
+        const p = this._p;
 
         // noinspection JSDeprecatedSymbols
         let character = evt.key || String.fromCharCode(evt.keyCode);
@@ -1635,7 +1646,7 @@ class DropList {
         // These are all the possible matches
         for (let i = 0, count = p.items.length; i < count; i++) {
             item = p.items[i];
-            if (regex.test(item[labelProp])) {
+            if (regex.test(item.label)) {
                 matchIndices.push(i);
             }
         }
@@ -1648,7 +1659,7 @@ class DropList {
 
             for (let i = 0, count = p.items.length; i < count; i++) {
                 item = p.items[i];
-                if (regex.test(item[labelProp])) {
+                if (regex.test(item.label)) {
                     matchIndices.push(i);
                 }
             }
@@ -1722,7 +1733,7 @@ class DropList {
         p.focusItemIndex = itemIndex;
 
         const item = p.items[itemIndex];
-        this._trigger('itemfocus', { value: item[p.valueProp], item: item, event: event });
+        this._trigger('itemfocus', { value: item.value, item: item[ItemSymbol] ?? item, event: event });
     }
 
     _delayBlur() {
@@ -1875,7 +1886,7 @@ class DropList {
     }
 
     _updateGroupStateForItem(item) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         if (p.multi && p.autoCheckGroupChildren) {
 
@@ -1912,11 +1923,17 @@ class DropList {
                     }
 
                     // Fire event
-                    this._trigger('check', { value: next[valueProp], item: next, isCheckingGroup: true });
+                    this._trigger('check', {
+                        value: next.value,
+                        item: next[ItemSymbol] ?? next,
+                        checked: next._checked,
+                        isGroup: next._group,
+                        isCheckingGroup: true,
+                    });
                 }
 
                 // Fire event
-                this._trigger('groupcheck', { value: item[valueProp], item: item, affectedItems: affectedItems });
+                this._trigger('groupcheck', { value: item.value, item: item[ItemSymbol] ?? item, affectedItems: affectedItems });
             } else if (p.groupCount > 0) {
                 items = p.items;
                 itemIndex = items.indexOf(item);
@@ -1978,7 +1995,13 @@ class DropList {
 
                 if (fireEvents) {
                     // Fire event
-                    this._trigger('check', { value: groupItem[p.valueProp], item: groupItem });
+                    this._trigger('check', {
+                        value: groupItem.value,
+                        item: groupItem[ItemSymbol] ?? groupItem,
+                        checked: groupItem._checked,
+                        isGroup: groupItem._group,
+                        isCheckingGroup: false,
+                    });
                 }
             }
         }
@@ -1994,7 +2017,6 @@ class DropList {
         const p = this._p;
 
         if (p.lastMeasureItemCount !== p.items.length) {
-            const labelProp = p.labelProp, valueProp = p.valueProp;
             let longestLabel = p.lastMeasureLongestLabel || 1,
                 longestLabelText = p.lastMeasureLongestLabelText || '';
 
@@ -2003,9 +2025,9 @@ class DropList {
                  i++) {
 
                 const item = items[i];
-                let text = item[labelProp];
+                let text = item.label;
                 if (text == null)
-                    text = item[valueProp];
+                    text = item.value;
                 if (text == null)
                     text = '';
 
@@ -2054,7 +2076,7 @@ class DropList {
     }
 
     _renderItemContent(item, itemEl) {
-        const p = this._p, labelProp = p.labelProp;
+        const p = this._p;
 
         // NOTE: a "measure" item will not have full data of original item.
         //      so for a custom renderer - we try to send original item, and fallback to our private list item.
@@ -2062,7 +2084,7 @@ class DropList {
         if (!p.renderItem || p.renderItem(item[ItemSymbol] || item, itemEl) === false) {
             itemEl.appendChild(createElement('span', {
                 class: `${p.baseClassName}__item_label`,
-                textContent: item[labelProp],
+                textContent: item.label,
             }));
 
             if (p.multi) {

package/lib/SelectBox.js

@@ -83,7 +83,7 @@ const inputBackbufferCssProps = [
  * @property {boolean} [hasOpenIndicator=true] has open/close indicator?
  * @property {string} [placeholder=''] Placeholder text
  * @property {boolean} [sortSelectedItems=true] Should the selected items be sorted?
- * @property {boolean} [sortListItems=true] Sort list items
+ * @property {boolean} [sortListItems=false] Sort list items
  * @property {boolean} [sortListCheckedFirst=true] When sorting - put checked items first (applicable to `multi` mode only)
  * @property {*[]} [stickyValues]
  * @property {function(a: DropList.ItemBase, b: DropList.ItemBase):number} [sortItemComparator]
@@ -125,7 +125,7 @@ const defaultOptions = {
     hasOpenIndicator: true,
     placeholder: '',
     sortSelectedItems: true,
-    sortListItems: true,
+    sortListItems: false,
     sortListCheckedFirst: true,
     stickyValues: null,
     sortItemComparator: null,
@@ -253,6 +253,7 @@ class SelectBox {
 
             items: [],
             filteredItems: null,
+            currentItemsView: [], // contains the final version of items sent to DropList
             itemsChanged: true,
 
             sink: new DomEventsSink(),
@@ -1729,8 +1730,8 @@ class SelectBox {
                         const item = /**@type DropList.Item*/event.item;
                         const value = event.value;
 
-                        let checked = item._checked;
-                        if (item._group) return; // Ignore groups
+                        let checked = event.checked;
+                        if (event.isGroup) return; // Ignore groups
 
                         let selEvt = { value: value, item: item, cancel: false };
                         this._trigger((checked ? 'addsel' : 'removesel') + ':before', selEvt);
@@ -2092,8 +2093,10 @@ class SelectBox {
 
         let selectedItems = this.getSelectedItems();
         let items = p.filteredItems ?? p.items;
+        if (p.currentItemsView && p.currentItemsView.length === items.length)
+            items = p.currentItemsView;
         if ((items.length + (p.clearable ? 1 : 0)) > 1) {
-            let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) - 1 : (selectedItems.length - 1);
+            let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) - 1 : (items.length - 1);
             if (nextIndex === -1 && !p.clearable)
                 nextIndex = items.length - 1;
             this.setSelectedItems(nextIndex === -1 ? [] : [items[nextIndex]]);
@@ -2107,9 +2110,11 @@ class SelectBox {
 
         let selectedItems = this.getSelectedItems();
         let items = p.filteredItems ?? p.items;
+        if (p.currentItemsView && p.currentItemsView.length === items.length)
+            items = p.currentItemsView;
         if ((items.length + (p.clearable ? 1 : 0)) > 1) {
             let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) + 1 : 0;
-            if (nextIndex === selectedItems.length)
+            if (nextIndex === items.length)
                 nextIndex = p.clearable ? -1 : 0;
             this.setSelectedItems(nextIndex === -1 ? [] : [items[nextIndex]]);
         }
@@ -2153,6 +2158,7 @@ class SelectBox {
             }
 
             dropList.addItems(items);
+            p.currentItemsView = items;
             p.itemsChanged = false;
             p.selectionChanged = true;
             p.resortBySelectionNeeded = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.39",
+  "version": "1.0.46",
   "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",
@@ -31,27 +31,30 @@
   "homepage": "https://github.com/danielgindi/selectbox#readme",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/runtime": "^7.16.3",
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/runtime": "^7.16.7",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "core-js": "^3.19.1",
-    "eslint": "^8.2.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "core-js": "^3.20.3",
+    "eslint": "^8.7.0",
     "eslint-formatter-codeframe": "^7.32.1",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vue": "^8.3.0",
     "fs-extra": "^10.0.0",
     "husky": "^7.0.4",
     "pinst": "^2.1.6",
-    "rollup": "^2.59.0",
+    "rollup": "^2.64.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.43.4"
+    "sass": "^1.48.0"
   },
   "dependencies": {
-    "@danielgindi/dom-utils": "^1.0.5",
+    "@danielgindi/dom-utils": "^1.0.6",
     "@danielgindi/virtual-list-helper": "^1.0.3",
     "keycode-js": "^3.1.0",
     "mitt": "^3.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^2.*"
   }
 }

package/vue/SelectBox.vue

@@ -54,7 +54,7 @@
             },
             sortListItems: {
                 type: Boolean,
-                default: true,
+                default: false,
             },
             sortListCheckedFirst: {
                 type: Boolean,

package/vue/utils/slots.js

@@ -1,4 +1,4 @@
-import Vue, { Component as VueComponent } from 'vue';
+import Vue from 'vue';
 
 const generateVNodeRenderer = vnode => {
     return new Vue({
@@ -20,7 +20,7 @@ const VueInstanceSymbol = Symbol('vue_instance');
 
 /**
  *
- * @param {VueComponent} vue
+ * @param {import('vue').Component} vue
  * @param {string} slotName
  * @param {function(item: *)?} onAfterUpdate
  * @returns {(function(item: *, parent: Element): void)|undefined}
@@ -72,7 +72,7 @@ const createSlotBasedRenderFunc = (vue, slotName, onAfterUpdate) => {
 
 /**
  *
- * @param {VueComponent} vue
+ * @param {import('vue').Component} vue
  * @param {string} slotName
  * @returns {(function(parent: Element): void)|undefined}
  */