@danielgindi/selectbox 2.0.7 → 2.0.9

package/lib/DropList.js

@@ -158,7 +158,7 @@ Emits the following events:
 'hide': the drop list was hidden.
 '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).
+'groupcheck' {value, item, affectedCount: number}: item was selected (in multi mode).
 'blur' {event}: element lost focus
 'show_subitems {value, item, el, droplist: DropList}': subitems dropdown will show.
 'hide_subitems {value, item, el}': subitems dropdown did hide.
@@ -751,6 +751,10 @@ class DropList {
                 p.groupCount++;
             }
 
+            if (typeof oitem._level === 'number') {
+                item._level = oitem._level;
+            }
+
             if (oitem._child) {
                 // This is used for setting a child class,
                 // But can be used to determine that current item is not part of above group,
@@ -853,6 +857,10 @@ class DropList {
             }
         }
 
+        if (hasOwnProperty.call(newItem, '_level')) {
+            newItem._level = item._level;
+        }
+
         if (hasOwnProperty.call(newItem, '_child'))
             item._child = !!newItem._child;
 
@@ -1182,6 +1190,7 @@ class DropList {
                                 _nointeraction: !!oitem._nointeraction,
                                 _subitems: oitem._subitems,
                                 _group: !!oitem._group,
+                                _level: !!oitem._level,
                                 _checked: !!oitem._checked,
                             };
                         }
@@ -1725,15 +1734,23 @@ class DropList {
             let item = p.items[i];
             let checked = !item._nocheck && values.indexOf(item.value) !== -1;
 
-            if (item._group) {
-                groupIndexes.push(i);
+            let itemIndex = i;
+            if (p.filteredItems) {
+                const item = p.items[itemIndex];
+                itemIndex = p.filteredItems.indexOf(item);
+            }
+
+            if (item._group && itemIndex !== -1) {
+                groupIndexes.push(itemIndex);
             }
 
             if (item._checked === checked) continue;
 
             item._checked = checked;
 
-            let li = p.virtualListHelper.getItemElementAt(i);
+            if (itemIndex === -1) continue;
+
+            let li = p.virtualListHelper.getItemElementAt(itemIndex);
             if (!li) continue;
 
             toggleClass(li, `${p.baseClassName}__item_checked`, item._checked);
@@ -2034,7 +2051,7 @@ class DropList {
         this.rushRefilter();
 
         if (p.filteredItems) {
-            const item = p.items[itemIndex];
+            const item = p.filteredItems[itemIndex];
             itemIndex = p.items.indexOf(item);
         }
 
@@ -2988,17 +3005,19 @@ class DropList {
         if (item._group) {
             // Now loop through children below the group
 
-            let affectedItems = 0;
+            let affectedCount = 0;
 
             if (p.autoCheckGroupChildren) {
                 const items = p.filteredItems ?? p.items;
                 let groupIndex = items.indexOf(item);
+                const groupLevel = item._level;
 
                 for (let i = groupIndex + 1, len = items.length; i < len; i++) {
                     let next = items[i];
 
                     // Hit the next group, break out
-                    if (next._group || (!next._child && items[i - 1]._child))
+                    if ((!next._child && items[i - 1]._child) ||
+                        (groupLevel === undefined ? next._group || next._level !== undefined : next._level <= groupLevel))
                         break;
 
                     // No change, skip
@@ -3008,7 +3027,7 @@ class DropList {
                     // Update state
                     next._checked = item._checked;
 
-                    affectedItems++;
+                    affectedCount++;
 
                     // Update DOM
                     let nextEl = p.virtualListHelper.getItemElementAt(i);
@@ -3031,7 +3050,7 @@ class DropList {
             this._trigger('groupcheck', {
                 value: item.value,
                 item: item[ItemSymbol] ?? item,
-                affectedItems: affectedItems,
+                affectedCount: affectedCount,
             });
         } else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
             const items = p.filteredItems ?? p.items;
@@ -3065,18 +3084,21 @@ class DropList {
 
         if (!groupItem || !groupItem._group) return this;
 
-        let item, hasChecked = false, hasUnchecked = false;
+        let next, hasChecked = false, hasUnchecked = false;
+
+        const groupLevel = groupItem._level;
 
         for (let i = groupIndex + 1, len = items.length; i < len; i++) {
-            item = items[i];
+            next = items[i];
 
             // Hit the next group, break out
-            if (item._group || (!item._child && items[i - 1]._child))
+            if ((!next._child && items[i - 1]._child) ||
+                (groupLevel === undefined ? next._group || next._level !== undefined : next._level <= groupLevel))
                 break;
 
-            if (item._checked) {
+            if (next._checked) {
                 hasChecked = true;
-            } else if (!item._checked) {
+            } else if (!next._checked) {
                 hasUnchecked = true;
             }
         }

package/lib/SelectBox.js

@@ -179,11 +179,12 @@ Emits the following events:
 'open' { list: DropList }: the drop list is opening
 'open:before' { list: DropList }: the drop list will open
 'close': the drop list is closing
-'addsel:before' {value, item, cancel: false}: an item selection is about to be added (in multi mode). return false to abort.
-'removesel:before' {value, item, cancel: false}: an item selection is about to be removed (in multi mode). return false to abort.
+'addsel:before' {value, item, cancel: false, isCheckingGroup: bool}: an item selection is about to be added (in multi mode). return false to abort.
+'removesel:before' {value, item, cancel: false, isCheckingGroup: bool}: an item selection is about to be removed (in multi mode). return false to abort.
+'addsel' {value, item, isCheckingGroup: bool}: an item selection has been added (in multi mode)
+'removesel' {value, item, isCheckingGroup: bool}: an item selection has been removed (in multi mode)
+'groupcheck' {value, item, affectedCount: number}: an item selection has been removed (in multi mode)
 'select:before' {value, item, cancel: false}: an item is about to be selected (in single mode). return false to abort.
-'addsel' {value, item}: an item selection has been added (in multi mode)
-'removesel' {value, item}: an item selection has been removed (in multi mode)
 'select' {value, item}: an item has been selected (in single mode)
 'search' {value}: input box value has changed
 'search:focus': input box has gained focus
@@ -1861,7 +1862,12 @@ class SelectBox {
                         let checked = event.checked;
                         if (event.isGroup && !p.treatGroupSelectionAsItems) return; // Ignore groups
 
-                        let selEvt = { value: value, item: item, cancel: false };
+                        let selEvt = {
+                            value: value,
+                            item: item,
+                            cancel: false,
+                            isCheckingGroup: event.isCheckingGroup,
+                        };
                         this._trigger((checked ? 'addsel' : 'removesel') + ':before', selEvt);
 
                         if (selEvt.cancel) {
@@ -1919,16 +1925,26 @@ class SelectBox {
                             this._scheduleSync('syncPlaceholder');
                         }
 
-                        this._trigger(checked ? 'addsel' : 'removesel', { value: value, item: item });
+                        this._trigger(checked ? 'addsel' : 'removesel', {
+                            value: value,
+                            item: item,
+                            isCheckingGroup: event.isCheckingGroup,
+                        });
                     }
                         break;
 
                     case 'groupcheck': {
                         if (!p.multi) return;
 
-                        if (event.affectedItems) {
+                        if (event.affectedCount) {
                             this._scheduleSync(p.sortSelectedItems ? 'full' : 'render_base');
                         }
+
+                        this._trigger('groupcheck', {
+                            value: event.value,
+                            item: event.item,
+                            affectedCount: event.affectedCount,
+                        });
                     }
                         break;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "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/vue/SelectBox.vue

@@ -724,8 +724,9 @@
 
                 if (event === 'select' ||
                     event === 'clear' ||
-                    event === 'addsel' ||
-                    event === 'removesel') {
+                    event === 'groupcheck' ||
+                    (event === 'addsel' && !event.isCheckingGroup) ||
+                    (event === 'removesel' && !event.isCheckingGroup)) {
                     let value = event === 'select' ? data.value : this.nonReactive.instance.getValue();
                     if (value === undefined && event !== 'select' && this.emitNullForEmptyValue)
                         value = null;