@danielgindi/selectbox 1.0.61 → 1.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib.cjs.js +850 -459
- package/dist/lib.cjs.js.map +1 -1
- package/dist/lib.cjs.min.js +2 -2
- package/dist/lib.cjs.min.js.map +1 -1
- package/dist/lib.es6.js +101 -72
- package/dist/lib.es6.js.map +1 -1
- package/dist/lib.es6.min.js +2 -2
- package/dist/lib.es6.min.js.map +1 -1
- package/dist/lib.umd.js +850 -459
- package/dist/lib.umd.js.map +1 -1
- package/dist/lib.umd.min.js +2 -2
- package/dist/lib.umd.min.js.map +1 -1
- package/lib/DropList.js +63 -63
- package/lib/SelectBox.js +37 -8
- package/package.json +11 -11
- package/vue/DropList.vue +2 -2
- package/vue/SelectBox.vue +24 -0
package/dist/lib.es6.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @danielgindi/selectbox 1.0.
|
|
2
|
+
* @danielgindi/selectbox 1.0.64
|
|
3
3
|
* git://github.com/danielgindi/selectbox.git
|
|
4
4
|
*/
|
|
5
5
|
import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
|
|
@@ -1937,17 +1937,17 @@ class DropList {
|
|
|
1937
1937
|
_updateGroupStateForItem(item) {
|
|
1938
1938
|
const p = this._p;
|
|
1939
1939
|
|
|
1940
|
-
if (p.multi
|
|
1941
|
-
|
|
1942
|
-
let items, groupIndex, itemIndex;
|
|
1940
|
+
if (!p.multi)
|
|
1941
|
+
return this;
|
|
1943
1942
|
|
|
1944
|
-
|
|
1945
|
-
|
|
1943
|
+
if (item._group) {
|
|
1944
|
+
// Now loop through children below the group
|
|
1946
1945
|
|
|
1947
|
-
|
|
1948
|
-
groupIndex = items.indexOf(item);
|
|
1946
|
+
let affectedItems = 0;
|
|
1949
1947
|
|
|
1950
|
-
|
|
1948
|
+
if (p.autoCheckGroupChildren) {
|
|
1949
|
+
let items = p.items;
|
|
1950
|
+
let groupIndex = items.indexOf(item);
|
|
1951
1951
|
|
|
1952
1952
|
for (let i = groupIndex + 1, len = items.length; i < len; i++) {
|
|
1953
1953
|
let next = items[i];
|
|
@@ -1980,30 +1980,30 @@ class DropList {
|
|
|
1980
1980
|
isCheckingGroup: true,
|
|
1981
1981
|
});
|
|
1982
1982
|
}
|
|
1983
|
+
}
|
|
1983
1984
|
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
// Find the group index
|
|
1996
|
-
for (let i = itemIndex - 1; i >= 0; i--) {
|
|
1997
|
-
if (items[i]._group) {
|
|
1998
|
-
groupIndex = i;
|
|
1999
|
-
break;
|
|
2000
|
-
}
|
|
2001
|
-
}
|
|
1985
|
+
// Fire event
|
|
1986
|
+
this._trigger('groupcheck', {
|
|
1987
|
+
value: item.value,
|
|
1988
|
+
item: item[ItemSymbol$1] ?? item,
|
|
1989
|
+
affectedItems: affectedItems,
|
|
1990
|
+
});
|
|
1991
|
+
} else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
|
|
1992
|
+
let items = p.items;
|
|
1993
|
+
let itemIndex = items.indexOf(item);
|
|
1994
|
+
let groupIndex = -1;
|
|
2002
1995
|
|
|
2003
|
-
|
|
2004
|
-
|
|
1996
|
+
// Find the group index
|
|
1997
|
+
for (let i = itemIndex - 1; i >= 0; i--) {
|
|
1998
|
+
if (items[i]._group) {
|
|
1999
|
+
groupIndex = i;
|
|
2000
|
+
break;
|
|
2005
2001
|
}
|
|
2006
2002
|
}
|
|
2003
|
+
|
|
2004
|
+
if (groupIndex > -1) {
|
|
2005
|
+
this._updateGroupCheckedState(groupIndex, true);
|
|
2006
|
+
}
|
|
2007
2007
|
}
|
|
2008
2008
|
|
|
2009
2009
|
return this;
|
|
@@ -2012,50 +2012,50 @@ class DropList {
|
|
|
2012
2012
|
_updateGroupCheckedState(groupIndex, fireEvents) {
|
|
2013
2013
|
const p = this._p;
|
|
2014
2014
|
|
|
2015
|
-
if (p.multi && p.autoCheckGroupChildren && groupIndex > -1)
|
|
2015
|
+
if (!(p.multi && p.autoCheckGroupChildren && groupIndex > -1))
|
|
2016
|
+
return this;
|
|
2016
2017
|
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
if (!groupItem || !groupItem._group) return this;
|
|
2018
|
+
let items = p.items;
|
|
2019
|
+
let groupItem = items[groupIndex];
|
|
2020
2020
|
|
|
2021
|
-
|
|
2021
|
+
if (!groupItem || !groupItem._group) return this;
|
|
2022
2022
|
|
|
2023
|
-
|
|
2024
|
-
item = items[i];
|
|
2023
|
+
let item, hasChecked = false, hasUnchecked = false;
|
|
2025
2024
|
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
break;
|
|
2025
|
+
for (let i = groupIndex + 1, len = items.length; i < len; i++) {
|
|
2026
|
+
item = items[i];
|
|
2029
2027
|
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2028
|
+
// Hit the next group, break out
|
|
2029
|
+
if (item._group || (!item._child && items[i - 1]._child))
|
|
2030
|
+
break;
|
|
2031
|
+
|
|
2032
|
+
if (item._checked) {
|
|
2033
|
+
hasChecked = true;
|
|
2034
|
+
} else if (!item._checked) {
|
|
2035
|
+
hasUnchecked = true;
|
|
2035
2036
|
}
|
|
2037
|
+
}
|
|
2036
2038
|
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
groupItem._checked = shouldCheckGroup;
|
|
2039
|
+
let shouldCheckGroup = hasChecked && !hasUnchecked;
|
|
2040
|
+
if (!!groupItem._checked !== shouldCheckGroup) {
|
|
2041
|
+
// Update state
|
|
2042
|
+
groupItem._checked = shouldCheckGroup;
|
|
2042
2043
|
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2044
|
+
// Update DOM
|
|
2045
|
+
let nextEl = p.virtualListHelper.getItemElementAt(groupIndex);
|
|
2046
|
+
if (nextEl) {
|
|
2047
|
+
toggleClass(nextEl, `${p.baseClassName}__item_checked`, groupItem._checked);
|
|
2048
|
+
}
|
|
2048
2049
|
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
}
|
|
2050
|
+
if (fireEvents) {
|
|
2051
|
+
// Fire event
|
|
2052
|
+
this._trigger('check', {
|
|
2053
|
+
value: groupItem.value,
|
|
2054
|
+
item: groupItem[ItemSymbol$1] ?? groupItem,
|
|
2055
|
+
checked: groupItem._checked,
|
|
2056
|
+
isGroup: groupItem._group,
|
|
2057
|
+
isCheckingGroup: false,
|
|
2058
|
+
});
|
|
2059
2059
|
}
|
|
2060
2060
|
}
|
|
2061
2061
|
|
|
@@ -2299,6 +2299,7 @@ const inputBackbufferCssProps = [
|
|
|
2299
2299
|
* @property {boolean} [sortSelectedItems=true] Should the selected items be sorted?
|
|
2300
2300
|
* @property {boolean} [sortListItems=false] Sort list items
|
|
2301
2301
|
* @property {boolean} [sortListCheckedFirst=true] When sorting - put checked items first (applicable to `multi` mode only)
|
|
2302
|
+
* @property {boolean} [treatGroupSelectionAsItems=false] Treat group items as normal items
|
|
2302
2303
|
* @property {*[]} [stickyValues]
|
|
2303
2304
|
* @property {function(a: DropList.ItemBase, b: DropList.ItemBase):number} [sortItemComparator]
|
|
2304
2305
|
* @property {boolean} [splitListCheckedGroups=true] Split groups to "checked" and "unchecked", works with `sortCheckedFirst` only
|
|
@@ -2344,6 +2345,7 @@ const defaultOptions = {
|
|
|
2344
2345
|
stickyValues: null,
|
|
2345
2346
|
sortItemComparator: null,
|
|
2346
2347
|
splitListCheckedGroups: true,
|
|
2348
|
+
treatGroupSelectionAsItems: false,
|
|
2347
2349
|
blurOnSingleSelection: 'touch',
|
|
2348
2350
|
multi: false,
|
|
2349
2351
|
showSelection: true,
|
|
@@ -2433,6 +2435,7 @@ class SelectBox {
|
|
|
2433
2435
|
stickyValues: Array.isArray(o.stickyValues) ? new Set(o.stickyValues) : null,
|
|
2434
2436
|
sortItemComparator: o.sortItemComparator,
|
|
2435
2437
|
splitListCheckedGroups: !!o.splitListCheckedGroups,
|
|
2438
|
+
treatGroupSelectionAsItems: o.treatGroupSelectionAsItems,
|
|
2436
2439
|
blurOnSingleSelection: o.blurOnSingleSelection,
|
|
2437
2440
|
multi: o.multi,
|
|
2438
2441
|
showSelection: o.showSelection,
|
|
@@ -2978,6 +2981,29 @@ class SelectBox {
|
|
|
2978
2981
|
return this._p.sortItemComparator;
|
|
2979
2982
|
}
|
|
2980
2983
|
|
|
2984
|
+
/**
|
|
2985
|
+
* @param {boolean} treatGroupSelectionAsItems
|
|
2986
|
+
* @returns {SelectBox}
|
|
2987
|
+
*/
|
|
2988
|
+
setTreatGroupSelectionAsItems(treatGroupSelectionAsItems) {
|
|
2989
|
+
const p = this._p;
|
|
2990
|
+
treatGroupSelectionAsItems = !!treatGroupSelectionAsItems;
|
|
2991
|
+
if (p.treatGroupSelectionAsItems === treatGroupSelectionAsItems)
|
|
2992
|
+
return this;
|
|
2993
|
+
|
|
2994
|
+
p.treatGroupSelectionAsItems = treatGroupSelectionAsItems;
|
|
2995
|
+
p.itemsChanged = true;
|
|
2996
|
+
this._scheduleSync();
|
|
2997
|
+
return this;
|
|
2998
|
+
}
|
|
2999
|
+
|
|
3000
|
+
/**
|
|
3001
|
+
* @returns {boolean}
|
|
3002
|
+
*/
|
|
3003
|
+
isTreatGroupSelectionAsItemsEnabled() {
|
|
3004
|
+
return !this._p.treatGroupSelectionAsItems;
|
|
3005
|
+
}
|
|
3006
|
+
|
|
2981
3007
|
/**
|
|
2982
3008
|
* @param {boolean} splitListCheckedGroups
|
|
2983
3009
|
* @returns {SelectBox}
|
|
@@ -3929,7 +3955,7 @@ class SelectBox {
|
|
|
3929
3955
|
const value = event.value;
|
|
3930
3956
|
|
|
3931
3957
|
let checked = event.checked;
|
|
3932
|
-
if (event.isGroup) return; // Ignore groups
|
|
3958
|
+
if (event.isGroup && !p.treatGroupSelectionAsItems) return; // Ignore groups
|
|
3933
3959
|
|
|
3934
3960
|
let selEvt = { value: value, item: item, cancel: false };
|
|
3935
3961
|
this._trigger((checked ? 'addsel' : 'removesel') + ':before', selEvt);
|
|
@@ -3965,7 +3991,7 @@ class SelectBox {
|
|
|
3965
3991
|
this._scheduleSync('full');
|
|
3966
3992
|
} else {
|
|
3967
3993
|
if (p.maxMultiItems != null &&
|
|
3968
|
-
p.selectedItems.filter(x => !x._group).length > p.maxMultiItems) {
|
|
3994
|
+
(p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group)).length > p.maxMultiItems) {
|
|
3969
3995
|
this._scheduleSync('addOrUpdateMultiItemRestElement');
|
|
3970
3996
|
} else {
|
|
3971
3997
|
this._scheduleSync('addMultiItemElement', item);
|
|
@@ -3976,7 +4002,7 @@ class SelectBox {
|
|
|
3976
4002
|
}
|
|
3977
4003
|
} else {
|
|
3978
4004
|
if (p.maxMultiItems != null &&
|
|
3979
|
-
p.selectedItems.filter(x => !x._group).length === p.maxMultiItems) {
|
|
4005
|
+
(p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group)).length === p.maxMultiItems) {
|
|
3980
4006
|
this._scheduleSync('removeMultiItemRestElement');
|
|
3981
4007
|
} else {
|
|
3982
4008
|
this._scheduleSync('removeMultiItemElement', item);
|
|
@@ -4428,6 +4454,7 @@ class SelectBox {
|
|
|
4428
4454
|
const p = this._p;
|
|
4429
4455
|
|
|
4430
4456
|
const term = p.filterTerm;
|
|
4457
|
+
const treatGroupSelectionAsItems = p.treatGroupSelectionAsItems;
|
|
4431
4458
|
|
|
4432
4459
|
if (term || (p.filterOnEmptyTerm && p.filterFn)) {
|
|
4433
4460
|
let fn = p.filterFn;
|
|
@@ -4446,7 +4473,7 @@ class SelectBox {
|
|
|
4446
4473
|
multiItemLabelProp = p.multiItemLabelProp;
|
|
4447
4474
|
|
|
4448
4475
|
filteredItems = p.items.filter(x => {
|
|
4449
|
-
if (x._group) return true;
|
|
4476
|
+
if (!treatGroupSelectionAsItems && x._group) return true;
|
|
4450
4477
|
return matcher.test(x[labelProp] || x[multiItemLabelProp]);
|
|
4451
4478
|
});
|
|
4452
4479
|
} else {
|
|
@@ -4456,7 +4483,7 @@ class SelectBox {
|
|
|
4456
4483
|
|
|
4457
4484
|
p.filteredItems = filteredItems;
|
|
4458
4485
|
|
|
4459
|
-
if (filteredItems) {
|
|
4486
|
+
if (filteredItems && !treatGroupSelectionAsItems) {
|
|
4460
4487
|
// Clean up groups without children
|
|
4461
4488
|
|
|
4462
4489
|
let lastGroup = -1;
|
|
@@ -4714,7 +4741,7 @@ class SelectBox {
|
|
|
4714
4741
|
const p = this._p;
|
|
4715
4742
|
|
|
4716
4743
|
let items = p.selectedItems.slice(0);
|
|
4717
|
-
let count = items.filter(x => !x._group).length - p.maxMultiItems;
|
|
4744
|
+
let count = (p.treatGroupSelectionAsItems ? items : items.filter(x => !x._group)).length - p.maxMultiItems;
|
|
4718
4745
|
let label = p.multiItemsRestLabelProvider
|
|
4719
4746
|
? p.multiItemsRestLabelProvider(count, items)
|
|
4720
4747
|
: `+ ${count}`;
|
|
@@ -4819,6 +4846,7 @@ class SelectBox {
|
|
|
4819
4846
|
if (p.multi) {
|
|
4820
4847
|
if (fullItemsRender) {
|
|
4821
4848
|
const items = p.selectedItems;
|
|
4849
|
+
const treatGroupSelectionAsItems = p.treatGroupSelectionAsItems;
|
|
4822
4850
|
|
|
4823
4851
|
// Sort these
|
|
4824
4852
|
if (p.sortSelectedItems) {
|
|
@@ -4851,7 +4879,7 @@ class SelectBox {
|
|
|
4851
4879
|
|
|
4852
4880
|
// Add item elements
|
|
4853
4881
|
for (let i = 0; i < items.length; i++) {
|
|
4854
|
-
if (items[i]._group) continue;
|
|
4882
|
+
if (!treatGroupSelectionAsItems && items[i]._group) continue;
|
|
4855
4883
|
|
|
4856
4884
|
if (max != null && actualItemCount === max) {
|
|
4857
4885
|
addRestItem = true;
|
|
@@ -4964,7 +4992,8 @@ class SelectBox {
|
|
|
4964
4992
|
|
|
4965
4993
|
if (item !== undefined) {
|
|
4966
4994
|
if (value === RestMultiItemsSymbol) {
|
|
4967
|
-
let items = p.selectedItems.filter(x => !x._group)
|
|
4995
|
+
let items = (p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group))
|
|
4996
|
+
.slice(p.maxMultiItems);
|
|
4968
4997
|
let itemsToRemove = [];
|
|
4969
4998
|
|
|
4970
4999
|
for (let item of items) {
|