@danielgindi/selectbox 1.0.62 → 1.0.65

package/lib/DropList.js

@@ -1954,17 +1954,17 @@ class DropList {
     _updateGroupStateForItem(item) {
         const p = this._p;
 
-        if (p.multi && p.autoCheckGroupChildren) {
+        if (!p.multi)
+            return this;
 
-            let items, groupIndex, itemIndex;
+        if (item._group) {
+            // Now loop through children below the group
 
-            if (item._group) {
-                // Now loop through children below the group
-
-                items = p.items;
-                groupIndex = items.indexOf(item);
+            let affectedItems = 0;
 
-                let affectedItems = 0;
+            if (p.autoCheckGroupChildren) {
+                let items = p.items;
+                let groupIndex = items.indexOf(item);
 
                 for (let i = groupIndex + 1, len = items.length; i < len; i++) {
                     let next = items[i];
@@ -1997,30 +1997,30 @@ class DropList {
                         isCheckingGroup: true,
                     });
                 }
+            }
 
-                // Fire event
-                this._trigger('groupcheck', {
-                    value: item.value,
-                    item: item[ItemSymbol] ?? item,
-                    affectedItems: affectedItems,
-                });
-            } else if (p.groupCount > 0) {
-                items = p.items;
-                itemIndex = items.indexOf(item);
-                groupIndex = -1;
-
-                // Find the group index
-                for (let i = itemIndex - 1; i >= 0; i--) {
-                    if (items[i]._group) {
-                        groupIndex = i;
-                        break;
-                    }
-                }
+            // Fire event
+            this._trigger('groupcheck', {
+                value: item.value,
+                item: item[ItemSymbol] ?? item,
+                affectedItems: affectedItems,
+            });
+        } else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
+            let items = p.items;
+            let itemIndex = items.indexOf(item);
+            let groupIndex = -1;
 
-                if (groupIndex > -1) {
-                    this._updateGroupCheckedState(groupIndex, true);
+            // Find the group index
+            for (let i = itemIndex - 1; i >= 0; i--) {
+                if (items[i]._group) {
+                    groupIndex = i;
+                    break;
                 }
             }
+
+            if (groupIndex > -1) {
+                this._updateGroupCheckedState(groupIndex, true);
+            }
         }
 
         return this;
@@ -2029,50 +2029,50 @@ class DropList {
     _updateGroupCheckedState(groupIndex, fireEvents) {
         const p = this._p;
 
-        if (p.multi && p.autoCheckGroupChildren && groupIndex > -1) {
+        if (!(p.multi && p.autoCheckGroupChildren && groupIndex > -1))
+            return this;
 
-            let items = p.items;
-            let groupItem = items[groupIndex];
-            if (!groupItem || !groupItem._group) return this;
+        let items = p.items;
+        let groupItem = items[groupIndex];
 
-            let item, hasChecked = false, hasUnchecked = false;
+        if (!groupItem || !groupItem._group) return this;
 
-            for (let i = groupIndex + 1, len = items.length; i < len; i++) {
-                item = items[i];
+        let item, hasChecked = false, hasUnchecked = false;
 
-                // Hit the next group, break out
-                if (item._group || (!item._child && items[i - 1]._child))
-                    break;
+        for (let i = groupIndex + 1, len = items.length; i < len; i++) {
+            item = items[i];
 
-                if (item._checked) {
-                    hasChecked = true;
-                } else if (!item._checked) {
-                    hasUnchecked = true;
-                }
+            // Hit the next group, break out
+            if (item._group || (!item._child && items[i - 1]._child))
+                break;
+
+            if (item._checked) {
+                hasChecked = true;
+            } else if (!item._checked) {
+                hasUnchecked = true;
             }
+        }
 
-            // See if we need to update the group
-            let shouldCheckGroup = hasChecked && !hasUnchecked;
-            if (!!groupItem._checked !== shouldCheckGroup) {
-                // Update state
-                groupItem._checked = shouldCheckGroup;
+        let shouldCheckGroup = hasChecked && !hasUnchecked;
+        if (!!groupItem._checked !== shouldCheckGroup) {
+            // Update state
+            groupItem._checked = shouldCheckGroup;
 
-                // Update DOM
-                let nextEl = p.virtualListHelper.getItemElementAt(groupIndex);
-                if (nextEl) {
-                    toggleClass(nextEl, `${p.baseClassName}__item_checked`, groupItem._checked);
-                }
+            // Update DOM
+            let nextEl = p.virtualListHelper.getItemElementAt(groupIndex);
+            if (nextEl) {
+                toggleClass(nextEl, `${p.baseClassName}__item_checked`, groupItem._checked);
+            }
 
-                if (fireEvents) {
-                    // Fire event
-                    this._trigger('check', {
-                        value: groupItem.value,
-                        item: groupItem[ItemSymbol] ?? groupItem,
-                        checked: groupItem._checked,
-                        isGroup: groupItem._group,
-                        isCheckingGroup: false,
-                    });
-                }
+            if (fireEvents) {
+                // Fire event
+                this._trigger('check', {
+                    value: groupItem.value,
+                    item: groupItem[ItemSymbol] ?? groupItem,
+                    checked: groupItem._checked,
+                    isGroup: groupItem._group,
+                    isCheckingGroup: false,
+                });
             }
         }
 

package/lib/SelectBox.js

@@ -85,6 +85,7 @@ const inputBackbufferCssProps = [
  * @property {boolean} [sortSelectedItems=true] Should the selected items be sorted?
  * @property {boolean} [sortListItems=false] Sort list items
  * @property {boolean} [sortListCheckedFirst=true] When sorting - put checked items first (applicable to `multi` mode only)
+ * @property {boolean} [treatGroupSelectionAsItems=false] Treat group items as normal items
  * @property {*[]} [stickyValues]
  * @property {function(a: DropList.ItemBase, b: DropList.ItemBase):number} [sortItemComparator]
  * @property {boolean} [splitListCheckedGroups=true] Split groups to "checked" and "unchecked", works with `sortCheckedFirst` only
@@ -130,6 +131,7 @@ const defaultOptions = {
     stickyValues: null,
     sortItemComparator: null,
     splitListCheckedGroups: true,
+    treatGroupSelectionAsItems: false,
     blurOnSingleSelection: 'touch',
     multi: false,
     showSelection: true,
@@ -219,6 +221,7 @@ class SelectBox {
             stickyValues: Array.isArray(o.stickyValues) ? new Set(o.stickyValues) : null,
             sortItemComparator: o.sortItemComparator,
             splitListCheckedGroups: !!o.splitListCheckedGroups,
+            treatGroupSelectionAsItems: o.treatGroupSelectionAsItems,
             blurOnSingleSelection: o.blurOnSingleSelection,
             multi: o.multi,
             showSelection: o.showSelection,
@@ -764,6 +767,29 @@ class SelectBox {
         return this._p.sortItemComparator;
     }
 
+    /**
+     * @param {boolean} treatGroupSelectionAsItems
+     * @returns {SelectBox}
+     */
+    setTreatGroupSelectionAsItems(treatGroupSelectionAsItems) {
+        const p = this._p;
+        treatGroupSelectionAsItems = !!treatGroupSelectionAsItems;
+        if (p.treatGroupSelectionAsItems === treatGroupSelectionAsItems)
+            return this;
+
+        p.treatGroupSelectionAsItems = treatGroupSelectionAsItems;
+        p.itemsChanged = true;
+        this._scheduleSync();
+        return this;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    isTreatGroupSelectionAsItemsEnabled() {
+        return !this._p.treatGroupSelectionAsItems;
+    }
+
     /**
      * @param {boolean} splitListCheckedGroups
      * @returns {SelectBox}
@@ -1715,7 +1741,7 @@ class SelectBox {
                         const value = event.value;
 
                         let checked = event.checked;
-                        if (event.isGroup) return; // Ignore groups
+                        if (event.isGroup && !p.treatGroupSelectionAsItems) return; // Ignore groups
 
                         let selEvt = { value: value, item: item, cancel: false };
                         this._trigger((checked ? 'addsel' : 'removesel') + ':before', selEvt);
@@ -1751,7 +1777,7 @@ class SelectBox {
                                         this._scheduleSync('full');
                                 } else {
                                     if (p.maxMultiItems != null &&
-                                        p.selectedItems.filter(x => !x._group).length > p.maxMultiItems) {
+                                        (p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group)).length > p.maxMultiItems) {
                                         this._scheduleSync('addOrUpdateMultiItemRestElement');
                                     } else {
                                         this._scheduleSync('addMultiItemElement', item);
@@ -1762,7 +1788,7 @@ class SelectBox {
                                 }
                             } else {
                                 if (p.maxMultiItems != null &&
-                                    p.selectedItems.filter(x => !x._group).length === p.maxMultiItems) {
+                                    (p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group)).length === p.maxMultiItems) {
                                     this._scheduleSync('removeMultiItemRestElement');
                                 } else {
                                     this._scheduleSync('removeMultiItemElement', item);
@@ -2214,6 +2240,7 @@ class SelectBox {
         const p = this._p;
 
         const term = p.filterTerm;
+        const treatGroupSelectionAsItems = p.treatGroupSelectionAsItems;
 
         if (term || (p.filterOnEmptyTerm && p.filterFn)) {
             let fn = p.filterFn;
@@ -2232,7 +2259,7 @@ class SelectBox {
                         multiItemLabelProp = p.multiItemLabelProp;
 
                     filteredItems = p.items.filter(x => {
-                        if (x._group) return true;
+                        if (!treatGroupSelectionAsItems && x._group) return true;
                         return matcher.test(x[labelProp] || x[multiItemLabelProp]);
                     });
                 } else {
@@ -2242,7 +2269,7 @@ class SelectBox {
 
             p.filteredItems = filteredItems;
 
-            if (filteredItems) {
+            if (filteredItems && !treatGroupSelectionAsItems) {
                 // Clean up groups without children
 
                 let lastGroup = -1;
@@ -2500,7 +2527,7 @@ class SelectBox {
         const p = this._p;
 
         let items = p.selectedItems.slice(0);
-        let count = items.filter(x => !x._group).length - p.maxMultiItems;
+        let count = (p.treatGroupSelectionAsItems ? items : items.filter(x => !x._group)).length - p.maxMultiItems;
         let label = p.multiItemsRestLabelProvider
             ? p.multiItemsRestLabelProvider(count, items)
             : `+ ${count}`;
@@ -2605,6 +2632,7 @@ class SelectBox {
         if (p.multi) {
             if (fullItemsRender) {
                 const items = p.selectedItems;
+                const treatGroupSelectionAsItems = p.treatGroupSelectionAsItems;
 
                 // Sort these
                 if (p.sortSelectedItems) {
@@ -2637,7 +2665,7 @@ class SelectBox {
 
                 // Add item elements
                 for (let i = 0; i < items.length; i++) {
-                    if (items[i]._group) continue;
+                    if (!treatGroupSelectionAsItems && items[i]._group) continue;
 
                     if (max != null && actualItemCount === max) {
                         addRestItem = true;
@@ -2750,7 +2778,8 @@ class SelectBox {
 
         if (item !== undefined) {
             if (value === RestMultiItemsSymbol) {
-                let items = p.selectedItems.filter(x => !x._group).slice(p.maxMultiItems);
+                let items = (p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group))
+                    .slice(p.maxMultiItems);
                 let itemsToRemove = [];
 
                 for (let item of items) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.62",
+  "version": "1.0.65",
   "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.17.9",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/runtime": "^7.17.9",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/runtime": "^7.18.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
-    "core-js": "^3.22.3",
-    "eslint": "^8.14.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "core-js": "^3.22.8",
+    "eslint": "^8.17.0",
     "eslint-formatter-codeframe": "^7.32.1",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^9.1.0",
     "fs-extra": "^10.1.0",
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
     "pinst": "^3.0.0",
-    "rollup": "^2.70.2",
+    "rollup": "^2.75.5",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.51.0"
+    "sass": "^1.52.2"
   },
   "dependencies": {
     "@danielgindi/dom-utils": "^1.0.8",

package/vue/SelectBox.vue

@@ -213,6 +213,22 @@
                 type: Boolean,
                 default: false,
             },
+            treatGroupSelectionAsItems: {
+                type: Boolean,
+                default: false,
+            },
+            autoCheckGroupChildren: {
+                type: Boolean,
+                default: true,
+            },
+            constrainListToWindow: {
+                type: Boolean,
+                default: true,
+            },
+            autoFlipListDirection: {
+                type: Boolean,
+                default: true,
+            },
         },
 
         data() {
@@ -233,6 +249,18 @@
                     opts.additionalClasses = this.additionalDroplistClassesList;
                 }
 
+                if (typeof this.autoCheckGroupChildren === 'boolean' && this.multi) {
+                    opts.autoCheckGroupChildren = this.autoCheckGroupChildren;
+                }
+
+                if (typeof this.constrainListToWindow === 'boolean') {
+                    opts.constrainToWindow = this.constrainListToWindow;
+                }
+
+                if (typeof this.autoFlipListDirection === 'boolean') {
+                    opts.autoFlipDirection = this.autoFlipListDirection;
+                }
+
                 opts.virtualMinItems = this.virtualMinItems;
                 opts.useExactTargetWidth = this.fixedDroplistWidth;
 
@@ -565,6 +593,11 @@
                 if (this._box)
                     this._box.setIsLoadingMode(!!this.isLoadingMode);
             },
+
+            treatGroupSelectionAsItems() {
+                if (this._box)
+                    this._box.setTreatGroupSelectionAsItems(!!this.treatGroupSelectionAsItems);
+            },
         },
 
         mounted() {
@@ -682,6 +715,7 @@
                     on: this._handleBoxEvents.bind(this),
                     additionalClasses: this.additionalClassesList,
                     isLoadingMode: this.isLoadingMode,
+                    treatGroupSelectionAsItems: this.treatGroupSelectionAsItems,
                 });
 
                 box.setValue(this.value === null ? undefined : this.value);