@danielgindi/selectbox 1.0.122 → 1.0.124

package/lib/DropList.js

@@ -21,9 +21,9 @@ import {
     VALUE_DOWN,
     VALUE_END,
     VALUE_ENTER, VALUE_ESCAPE,
-    VALUE_HOME,
+    VALUE_HOME, VALUE_LEFT,
     VALUE_PAGE_DOWN,
-    VALUE_PAGE_UP,
+    VALUE_PAGE_UP, VALUE_RIGHT,
     VALUE_SPACE,
     VALUE_UP,
 } from 'keycode-js';
@@ -90,6 +90,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
  * @property {boolean} [_child=false]
  * @property {boolean} [_nocheck=false]
  * @property {boolean} [_nointeraction=false]
+ * @property {DropList.ItemBase[]} [_subitems]
  * */
 
 /**
@@ -136,6 +137,9 @@ Emits the following events:
 'hide:after': emitted after the hide css transition has ended, or immediately after 'hide'.
 '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).
+'show_subitems {value, item, el, droplist: DropList}': subitems dropdown will show.
+'hide_subitems {value, item, el}': subitems dropdown did hide.
+'subitems:select' {value, item, event?, el}: item was selected (in single mode).
  */
 
 // noinspection JSUnusedGlobalSymbols
@@ -168,6 +172,7 @@ class DropList {
             useExactTargetWidth: o.useExactTargetWidth,
             constrainToWindow: o.constrainToWindow,
             autoFlipDirection: o.autoFlipDirection,
+            estimatedItemHeight: o.estimatedItemHeight,
             estimateWidth: o.estimateWidth,
             virtualMinItems: o.virtualMinItems,
             labelProp: o.labelProp,
@@ -343,6 +348,11 @@ class DropList {
             remove(p.el);
         }
 
+        if (p.currentSubDropList) {
+            p.currentSubDropList?.droplist?.destroy();
+            p.currentSubDropList = null;
+        }
+
         if (!p.ownsEl) {
             for (let name of Array.from(p.el.classList)) {
                 if (name.startsWith(p.baseClassName)) {
@@ -371,6 +381,22 @@ class DropList {
         return this._p.el;
     }
 
+    /**
+     * Returns true if other is an inclusive descendant of node, and false otherwise.
+     * @param {Node} other
+     * @param {boolean} [considerSubmenus=true]
+     * @returns {boolean}
+     */
+    elContains(other, considerSubmenus = true) {
+        if (this.el.contains(other))
+            return true;
+
+        if (considerSubmenus && this._p.currentSubDropList?.droplist?.elContains(other))
+            return true;
+
+        return false;
+    }
+
     /**
      * @param {string|string[]} classes
      * @returns {DropList}
@@ -508,6 +534,10 @@ class DropList {
         if (!item)
             return;
 
+        if (p.currentSubDropList) {
+            this._hideSublist();
+        }
+
         this._trigger('itemblur', { value: item.value, item: item[ItemSymbol] ?? item });
     }
 
@@ -617,6 +647,7 @@ class DropList {
                 value: oitem[valueProp],
                 _nocheck: !!oitem._nocheck,
                 _nointeraction: !!oitem._nointeraction,
+                _subitems: oitem._subitems,
             };
 
             if (isMulti) {
@@ -692,6 +723,9 @@ class DropList {
         if (hasOwnProperty.call(newItem, '_nointeraction'))
             item._nointeraction = !!newItem._nointeraction;
 
+        if (hasOwnProperty.call(newItem, '_subitems'))
+            item._subitems = !!newItem._subitems;
+
         if (p.multi) {
             if (hasOwnProperty.call(newItem, '_checked'))
                 item._checked = !!newItem._checked;
@@ -1292,6 +1326,10 @@ class DropList {
 
             if (this[DestroyedSymbol]) return;
             this._trigger('hide:after');
+
+            if (p.currentSubDropList) {
+                this._hideSublist();
+            }
         }
 
         if (p.lastPositionTarget) {
@@ -1347,18 +1385,99 @@ class DropList {
                 itemElement.classList.add(`${p.baseClassName}__item_focus`);
                 p.focusItemEl = itemElement;
 
+                const item = itemElement[ItemSymbol];
+
                 this._trigger('itemfocus', {
-                    value: itemElement.value,
-                    item: itemElement[ItemSymbol],
+                    value: item.value,
+                    item: item[ItemSymbol] ?? item,
                     event: null,
                     el: itemElement,
                 });
+
+                this._showSublist(item, itemElement);
             }
         }
 
         return this;
     }
 
+    _showSublist(item, itemElement) {
+        if (!item._subitems?.length) return;
+
+        const p = this._p;
+
+        const droplist = new DropList({
+            baseClassName: p.baseClassName,
+            additionalClasses: p.additionalClasses,
+            direction: p.direction,
+            autoItemBlur: p.autoItemBlur,
+            autoItemBlurDelay: p.autoItemBlurDelay,
+            capturesFocus: p.capturesFocus,
+            multi: p.multi,
+            keyDownHandler: p.keyDownHandler,
+            autoCheckGroupChildren: p.autoCheckGroupChildren,
+            useExactTargetWidth: p.useExactTargetWidth,
+            constrainToWindow: p.constrainToWindow,
+            autoFlipDirection: p.autoFlipDirection,
+            estimatedItemHeight: p.estimatedItemHeight,
+            estimateWidth: p.estimateWidth,
+            virtualMinItems: p.virtualMinItems,
+            labelProp: p.labelProp,
+            valueProp: p.valueProp,
+            renderItem: p.renderItem,
+            unrenderItem: p.unrenderItem,
+        });
+
+        droplist
+            .on('select', event => {
+                this._trigger('subitems:select', event);
+            })
+            .on('subitems:select', event => {
+                this._trigger('subitems:select', event);
+            });
+
+        droplist.setItems(item._subitems);
+
+        this._trigger('show_subitems', {
+            value: item.value,
+            item: item[ItemSymbol] ?? item,
+            el: itemElement,
+            droplist: droplist,
+        });
+
+        droplist.show( {
+            target: itemElement,
+            position: { x: 'start', y: 'top' },
+            anchor: { x: 'end', y: 'top' },
+            offset: { x: 0, y: 0 },
+            updateWidth: true,
+        });
+
+        p.currentSubDropList = {
+            item: item,
+            itemElement: itemElement,
+            droplist: droplist,
+        };
+    }
+
+    _hideSublist() {
+        const p = this._p;
+
+        if (!p.currentSubDropList)
+            return;
+
+        const data = p.currentSubDropList;
+        data.droplist.hide();
+        data.droplist.destroy();
+        p.currentSubDropList = null;
+
+        this._trigger('hide_subitems', {
+            value: data.item.value,
+            item: data.item,
+            el: data.itemElement,
+        });
+    }
+
     setFocusedItem(item) {
         const p = this._p;
 
@@ -1600,7 +1719,7 @@ class DropList {
     }
 
     _handleMouseOver(event, itemEl) {
-        this._focus(event, itemEl);
+        this._focus(event, itemEl, true);
     }
 
     _hookTouchEvents() {
@@ -1666,7 +1785,7 @@ class DropList {
                 let itemEl = p.focusItemEl || // focused item
                     p.el.firstChild; // or the first item
 
-                this._focus(event, itemEl);
+                this._focus(event, itemEl, false);
             })
             .add(p.el, 'blur', () => {
                 setTimeout(() => {
@@ -1725,6 +1844,21 @@ class DropList {
                 }
                 break;
 
+            case VALUE_LEFT:
+            case VALUE_RIGHT:
+                if (event.key === VALUE_RIGHT && getComputedStyle(event.target).direction !== 'rtl' ||
+                    event.key === VALUE_LEFT && getComputedStyle(event.target).direction === 'rtl') {
+                    let item = p.items[p.focusItemIndex];
+                    if (p.focusItemIndex > -1 && item._subitems)
+                        this._showSublist(item, p.focusItemEl);
+                } else {
+                    if (p.currentSubDropList) {
+                        p.currentSubDropList.hide();
+                        preventDefault = false;
+                    }
+                }
+                break;
+
             case VALUE_ENTER:
                 this.triggerItemSelection(null, event);
                 event.preventDefault();
@@ -1801,7 +1935,7 @@ class DropList {
 
         if (matchIndex > -1) {
             let next = p.virtualListHelper.getItemElementAt(matchIndex);
-            this._focus(evt, next || null, matchIndex);
+            this._focus(evt, next || null, matchIndex, true);
 
             if (!this.isVisible()) {
                 this.triggerItemSelection(next ? null : p.items[matchIndex], evt);
@@ -1820,7 +1954,7 @@ class DropList {
         }
     }
 
-    _focus(event, itemEl, itemIndex) {
+    _focus(event, itemEl, itemIndex, openSubitems) {
         const p = this._p;
 
         if (!itemIndex && itemEl) {
@@ -1851,7 +1985,15 @@ class DropList {
         p.focusItemIndex = itemIndex;
 
         const item = p.items[itemIndex];
-        this._trigger('itemfocus', { value: item.value, item: item[ItemSymbol] ?? item, event: event, el: focusItemEl });
+        this._trigger('itemfocus', {
+            value: item.value,
+            item: item[ItemSymbol] ?? item,
+            event: event,
+            el: focusItemEl,
+        });
+
+        if (openSubitems)
+            this._showSublist(item, focusItemEl);
     }
 
     _delayBlurItemOnBlur() {
@@ -1995,7 +2137,7 @@ class DropList {
         }
 
         next = p.virtualListHelper.getItemElementAt(nextIndex);
-        this._focus(event, next || null, nextIndex);
+        this._focus(event, next || null, nextIndex, false);
 
         if (!this.isVisible()) {
             this.triggerItemSelection(item, event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.122",
+  "version": "1.0.124",
   "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,22 +31,22 @@
   "homepage": "https://github.com/danielgindi/selectbox#readme",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/runtime": "^7.23.9",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/runtime": "^7.24.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "core-js": "^3.35.1",
-    "eslint": "^8.56.0",
+    "core-js": "^3.36.1",
+    "eslint": "^8.57.0",
     "eslint-formatter-codeframe": "^7.32.1",
-    "eslint-plugin-vue": "^9.21.1",
+    "eslint-plugin-vue": "^9.24.0",
     "fs-extra": "^11.2.0",
-    "husky": "^9.0.10",
+    "husky": "^9.0.11",
     "pinst": "^3.0.0",
-    "rollup": "^4.10.0",
-    "sass": "^1.70.0"
+    "rollup": "^4.13.2",
+    "sass": "^1.72.0"
   },
   "dependencies": {
     "@danielgindi/dom-utils": "^1.0.8",

package/vue/DropList.vue

@@ -10,7 +10,13 @@ import { version } from 'vue';
 
 const isVue3 = version > '3.';
 
-const AllListEvents = ['itemfocus', 'itemblur', 'select', 'show:before', 'show', 'hide:before', 'hide', 'hide:after', 'check', 'groupcheck'];
+const AllListEvents = [
+    'itemfocus', 'itemblur', 'select',
+    'show:before', 'show',
+    'hide:before', 'hide', 'hide:after',
+    'check', 'groupcheck',
+    'show_subitems', 'hide_subitems', 'subitems:select',
+];
 
 export default {
     inheritAttrs: false,