@danielgindi/selectbox 1.0.35 → 1.0.43

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).
  */
 
@@ -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: item._checked,
+                        isGroup: item._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: item._checked,
+                        isGroup: item._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

@@ -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);
@@ -1874,16 +1875,26 @@ class SelectBox {
 
                         switch (evt.key) {
                             case VALUE_PAGE_UP:
-                                dropList.previousPage(evt);
+                                if (dropList.isVisible())
+                                    dropList.previousPage(evt);
                                 break;
                             case VALUE_PAGE_DOWN:
-                                dropList.nextPage(evt);
+                                if (dropList.isVisible())
+                                    dropList.nextPage(evt);
                                 break;
                             case VALUE_UP:
-                                dropList.previous(evt);
+                                if (dropList.isVisible()) {
+                                    dropList.previous(evt);
+                                } else {
+                                    this._movePrev();
+                                }
                                 break;
                             case VALUE_DOWN:
-                                dropList.next(evt);
+                                if (dropList.isVisible()) {
+                                    dropList.next(evt);
+                                } else {
+                                    this._moveNext();
+                                }
                                 break;
 
                         }
@@ -1891,7 +1902,7 @@ class SelectBox {
 
                     case VALUE_SPACE:
                         if (p.lastKeyAllowsSpaceToggle) {
-                            if (dropList.hasFocusedItem()) {
+                            if (dropList.isVisible() && dropList.hasFocusedItem()) {
                                 suppressKeyPress = true;
                                 suppressKeyPressRepeat = true;
                                 if (p.multi)
@@ -1913,7 +1924,7 @@ class SelectBox {
                         break;
 
                     case VALUE_TAB:
-                        if (dropList.hasFocusedItem()) {
+                        if (dropList.isVisible() && dropList.hasFocusedItem()) {
                             dropList.triggerItemSelection(evt);
                         }
                         break;
@@ -1970,18 +1981,27 @@ class SelectBox {
 
                         switch (evt.key) {
                             case VALUE_PAGE_UP:
-                                dropList.previousPage(evt);
+                                if (dropList.isVisible())
+                                    dropList.previousPage(evt);
                                 break;
                             case VALUE_PAGE_DOWN:
-                                dropList.nextPage(evt);
+                                if (dropList.isVisible())
+                                    dropList.nextPage(evt);
                                 break;
                             case VALUE_UP:
-                                dropList.previous(evt);
+                                if (dropList.isVisible()) {
+                                    dropList.previous(evt);
+                                } else {
+                                    this._movePrev();
+                                }
                                 break;
                             case VALUE_DOWN:
-                                dropList.next(evt);
+                                if (dropList.isVisible()) {
+                                    dropList.next(evt);
+                                } else {
+                                    this._moveNext();
+                                }
                                 break;
-
                         }
                         break;
                 }
@@ -2066,6 +2086,40 @@ class SelectBox {
             });
     }
 
+    _movePrev() {
+        const p = this._p;
+
+        if (this.isMultiEnabled()) return;
+
+        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 : (items.length - 1);
+            if (nextIndex === -1 && !p.clearable)
+                nextIndex = items.length - 1;
+            this.setSelectedItems(nextIndex === -1 ? [] : [items[nextIndex]]);
+        }
+    }
+
+    _moveNext() {
+        const p = this._p;
+
+        if (this.isMultiEnabled()) return;
+
+        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 === items.length)
+                nextIndex = p.clearable ? -1 : 0;
+            this.setSelectedItems(nextIndex === -1 ? [] : [items[nextIndex]]);
+        }
+    }
+
     /** @private */
     _updateListItems() {
         const p = this._p;
@@ -2104,6 +2158,7 @@ class SelectBox {
             }
 
             dropList.addItems(items);
+            p.currentItemsView = items;
             p.itemsChanged = false;
             p.selectionChanged = true;
             p.resortBySelectionNeeded = false;
@@ -3059,7 +3114,7 @@ class SelectBox {
                 }
 
                 const aLabel = a[labelProp] || a[multiItemLabelProp];
-                const bLabel = a[labelProp] || a[multiItemLabelProp];
+                const bLabel = b[labelProp] || b[multiItemLabelProp];
 
                 if (aLabel < bLabel) return -1;
                 if (aLabel > bLabel) return 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.35",
+  "version": "1.0.43",
   "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,26 +31,30 @@
   "homepage": "https://github.com/danielgindi/selectbox#readme",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/runtime": "^7.15.4",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/runtime": "^7.16.3",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "core-js": "^3.18.2",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^7.19.1",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "core-js": "^3.19.1",
+    "eslint": "^8.2.0",
+    "eslint-formatter-codeframe": "^7.32.1",
+    "eslint-plugin-vue": "^8.0.3",
     "fs-extra": "^10.0.0",
-    "husky": "^7.0.2",
+    "husky": "^7.0.4",
     "pinst": "^2.1.6",
-    "rollup": "^2.58.0",
+    "rollup": "^2.59.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.42.1"
+    "sass": "^1.43.4"
   },
   "dependencies": {
-    "@danielgindi/dom-utils": "^1.0.4",
+    "@danielgindi/dom-utils": "^1.0.5",
     "@danielgindi/virtual-list-helper": "^1.0.3",
     "keycode-js": "^3.1.0",
     "mitt": "^3.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^2.*"
   }
 }

package/vue/DropList.vue

@@ -7,27 +7,9 @@
 </template>
 
 <script>
-    import Vue from 'vue';
     import DropList from '../lib/DropList';
     import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
-
-    const generateVNodeRenderer = vnode => {
-        return new Vue({
-            render() {
-                return vnode;
-            },
-        });
-    };
-
-    const generateVNodesRenderer = vnodes => {
-        return new Vue({
-            render(h) {
-                return h('div', vnodes);
-            },
-        });
-    };
-
-    const VueInstanceSymbol = Symbol('vue_instance');
+    import { createSlotBasedRenderFunc, createSlotBasedUnrenderFunc } from './utils/slots.js';
 
     export default {
         props: {
@@ -152,8 +134,18 @@
                     opts.keyDownHandler = this.keyDownHandler;
                 }
 
-                opts.renderItem = this.renderItem || this._createSlotBasedRenderFunc('item');
-                opts.unrenderItem = this.unrenderItem || this._createSlotBasedUnrenderFunc('item');
+                opts.renderItem = this.renderItem;
+                if (!opts.renderItem) {
+                    opts.renderItem = createSlotBasedRenderFunc(this, 'item');
+                }
+
+                opts.unrenderItem = this.unrenderItem;
+                if (!opts.unrenderItem) {
+                    let fn = createSlotBasedUnrenderFunc(this, 'item');
+                    if (fn) {
+                        opts.unrenderItem = (item, el) => fn(el);
+                    }
+                }
 
                 return opts;
             },
@@ -242,65 +234,6 @@
                 }
             },
 
-            _createSlotBasedRenderFunc(slotName, onAfterUpdate) {
-                if (this.$scopedSlots[slotName]) {
-                    return (item, parent) => {
-                        let vnode = this.$scopedSlots[slotName](item);
-                        let vm;
-
-                        if (Array.isArray(vnode)) {
-                            vm = generateVNodesRenderer(vnode);
-                            vm.$mount();
-                            let nodes = vm.$el.childNodes;
-                            nodes[0][VueInstanceSymbol] = vm;
-                            for (let node of nodes)
-                                parent.appendChild(node);
-                        } else {
-                            vm = generateVNodeRenderer(vnode);
-                            vm.$mount();
-                            vm.$el[VueInstanceSymbol] = vm;
-                            parent.appendChild(vm.$el);
-                        }
-
-                        if (onAfterUpdate) {
-                            vm.$on('hook:updated', () => {
-                                vm.$nextTick(() => onAfterUpdate(item));
-                            });
-                        }
-                    };
-                }
-
-                if (this.$slots[slotName]) {
-                    return (item, parent) => {
-                        let vnode = this.$slots[slotName];
-                        let vm = generateVNodeRenderer(vnode);
-                        vm.$mount();
-                        vm.$el[VueInstanceSymbol] = vm;
-                        parent.appendChild(vm.$el);
-
-                        if (onAfterUpdate) {
-                            vm.$on('hook:updated', () => {
-                                vm.$nextTick(() => onAfterUpdate(item));
-                            });
-                        }
-                    };
-                }
-            },
-
-            _createSlotBasedUnrenderFunc(slotName) {
-                if (this.$slots[slotName] || this.$slots[slotName]) {
-                    return (_item, parent) => {
-                        if (parent.childNodes.length > 0) {
-                            let node = parent.childNodes[0][VueInstanceSymbol];
-                            if (node) {
-                                node.$destroy();
-                                delete parent.childNodes[0][VueInstanceSymbol];
-                            }
-                        }
-                    };
-                }
-            },
-
             _createList() {
                 this._destroyList();