@danielgindi/selectbox 2.0.6 → 2.0.8
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 +57 -19
- 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 +57 -19
- 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 +57 -19
- 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 +33 -11
- package/lib/SelectBox.js +23 -7
- package/package.json +1 -1
- package/vue/SelectBox.vue +3 -2
package/dist/lib.es6.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @danielgindi/selectbox 2.0.
|
|
2
|
+
* @danielgindi/selectbox 2.0.8
|
|
3
3
|
* git://github.com/danielgindi/selectbox.git
|
|
4
4
|
*/
|
|
5
5
|
import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
|
|
@@ -186,7 +186,7 @@ Emits the following events:
|
|
|
186
186
|
'hide': the drop list was hidden.
|
|
187
187
|
'hide:after': emitted after the hide css transition has ended, or immediately after 'hide'.
|
|
188
188
|
'check' {value, item, checked: boolean, isGroup: boolean, isCheckingGroup: boolean}: item was selected (in multi mode).
|
|
189
|
-
'groupcheck' {value, item,
|
|
189
|
+
'groupcheck' {value, item, affectedCount: number}: item was selected (in multi mode).
|
|
190
190
|
'blur' {event}: element lost focus
|
|
191
191
|
'show_subitems {value, item, el, droplist: DropList}': subitems dropdown will show.
|
|
192
192
|
'hide_subitems {value, item, el}': subitems dropdown did hide.
|
|
@@ -779,6 +779,10 @@ class DropList {
|
|
|
779
779
|
p.groupCount++;
|
|
780
780
|
}
|
|
781
781
|
|
|
782
|
+
if (typeof oitem._level === 'number') {
|
|
783
|
+
item._level = oitem._level;
|
|
784
|
+
}
|
|
785
|
+
|
|
782
786
|
if (oitem._child) {
|
|
783
787
|
// This is used for setting a child class,
|
|
784
788
|
// But can be used to determine that current item is not part of above group,
|
|
@@ -881,6 +885,10 @@ class DropList {
|
|
|
881
885
|
}
|
|
882
886
|
}
|
|
883
887
|
|
|
888
|
+
if (hasOwnProperty.call(newItem, '_level')) {
|
|
889
|
+
newItem._level = item._level;
|
|
890
|
+
}
|
|
891
|
+
|
|
884
892
|
if (hasOwnProperty.call(newItem, '_child'))
|
|
885
893
|
item._child = !!newItem._child;
|
|
886
894
|
|
|
@@ -1186,7 +1194,15 @@ class DropList {
|
|
|
1186
1194
|
if (typeof fn === 'function') {
|
|
1187
1195
|
// Send the original items to the filter function
|
|
1188
1196
|
filteredItems = p.filterFn(
|
|
1189
|
-
p.items.map(x =>
|
|
1197
|
+
p.items.map(x => {
|
|
1198
|
+
const y = x[ItemSymbol];
|
|
1199
|
+
if (y !== undefined) {
|
|
1200
|
+
y[ItemSymbol] = x;
|
|
1201
|
+
return y;
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
return x;
|
|
1205
|
+
}),
|
|
1190
1206
|
term);
|
|
1191
1207
|
|
|
1192
1208
|
if (Array.isArray(filteredItems)) {
|
|
@@ -1202,6 +1218,7 @@ class DropList {
|
|
|
1202
1218
|
_nointeraction: !!oitem._nointeraction,
|
|
1203
1219
|
_subitems: oitem._subitems,
|
|
1204
1220
|
_group: !!oitem._group,
|
|
1221
|
+
_level: !!oitem._level,
|
|
1205
1222
|
_checked: !!oitem._checked,
|
|
1206
1223
|
};
|
|
1207
1224
|
}
|
|
@@ -3008,17 +3025,19 @@ class DropList {
|
|
|
3008
3025
|
if (item._group) {
|
|
3009
3026
|
// Now loop through children below the group
|
|
3010
3027
|
|
|
3011
|
-
let
|
|
3028
|
+
let affectedCount = 0;
|
|
3012
3029
|
|
|
3013
3030
|
if (p.autoCheckGroupChildren) {
|
|
3014
3031
|
const items = p.filteredItems ?? p.items;
|
|
3015
3032
|
let groupIndex = items.indexOf(item);
|
|
3033
|
+
const groupLevel = item._level;
|
|
3016
3034
|
|
|
3017
3035
|
for (let i = groupIndex + 1, len = items.length; i < len; i++) {
|
|
3018
3036
|
let next = items[i];
|
|
3019
3037
|
|
|
3020
3038
|
// Hit the next group, break out
|
|
3021
|
-
if (
|
|
3039
|
+
if ((!next._child && items[i - 1]._child) ||
|
|
3040
|
+
(groupLevel === undefined ? next._group || next._level !== undefined : next._level <= groupLevel))
|
|
3022
3041
|
break;
|
|
3023
3042
|
|
|
3024
3043
|
// No change, skip
|
|
@@ -3028,7 +3047,7 @@ class DropList {
|
|
|
3028
3047
|
// Update state
|
|
3029
3048
|
next._checked = item._checked;
|
|
3030
3049
|
|
|
3031
|
-
|
|
3050
|
+
affectedCount++;
|
|
3032
3051
|
|
|
3033
3052
|
// Update DOM
|
|
3034
3053
|
let nextEl = p.virtualListHelper.getItemElementAt(i);
|
|
@@ -3051,7 +3070,7 @@ class DropList {
|
|
|
3051
3070
|
this._trigger('groupcheck', {
|
|
3052
3071
|
value: item.value,
|
|
3053
3072
|
item: item[ItemSymbol] ?? item,
|
|
3054
|
-
|
|
3073
|
+
affectedCount: affectedCount,
|
|
3055
3074
|
});
|
|
3056
3075
|
} else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
|
|
3057
3076
|
const items = p.filteredItems ?? p.items;
|
|
@@ -3085,18 +3104,21 @@ class DropList {
|
|
|
3085
3104
|
|
|
3086
3105
|
if (!groupItem || !groupItem._group) return this;
|
|
3087
3106
|
|
|
3088
|
-
let
|
|
3107
|
+
let next, hasChecked = false, hasUnchecked = false;
|
|
3108
|
+
|
|
3109
|
+
const groupLevel = groupItem._level;
|
|
3089
3110
|
|
|
3090
3111
|
for (let i = groupIndex + 1, len = items.length; i < len; i++) {
|
|
3091
|
-
|
|
3112
|
+
next = items[i];
|
|
3092
3113
|
|
|
3093
3114
|
// Hit the next group, break out
|
|
3094
|
-
if (
|
|
3115
|
+
if ((!next._child && items[i - 1]._child) ||
|
|
3116
|
+
(groupLevel === undefined ? next._group || next._level !== undefined : next._level <= groupLevel))
|
|
3095
3117
|
break;
|
|
3096
3118
|
|
|
3097
|
-
if (
|
|
3119
|
+
if (next._checked) {
|
|
3098
3120
|
hasChecked = true;
|
|
3099
|
-
} else if (!
|
|
3121
|
+
} else if (!next._checked) {
|
|
3100
3122
|
hasUnchecked = true;
|
|
3101
3123
|
}
|
|
3102
3124
|
}
|
|
@@ -3453,11 +3475,12 @@ Emits the following events:
|
|
|
3453
3475
|
'open' { list: DropList }: the drop list is opening
|
|
3454
3476
|
'open:before' { list: DropList }: the drop list will open
|
|
3455
3477
|
'close': the drop list is closing
|
|
3456
|
-
'addsel:before' {value, item, cancel: false}: an item selection is about to be added (in multi mode). return false to abort.
|
|
3457
|
-
'removesel:before' {value, item, cancel: false}: an item selection is about to be removed (in multi mode). return false to abort.
|
|
3478
|
+
'addsel:before' {value, item, cancel: false, isCheckingGroup: bool}: an item selection is about to be added (in multi mode). return false to abort.
|
|
3479
|
+
'removesel:before' {value, item, cancel: false, isCheckingGroup: bool}: an item selection is about to be removed (in multi mode). return false to abort.
|
|
3480
|
+
'addsel' {value, item, isCheckingGroup: bool}: an item selection has been added (in multi mode)
|
|
3481
|
+
'removesel' {value, item, isCheckingGroup: bool}: an item selection has been removed (in multi mode)
|
|
3482
|
+
'groupcheck' {value, item, affectedCount: number}: an item selection has been removed (in multi mode)
|
|
3458
3483
|
'select:before' {value, item, cancel: false}: an item is about to be selected (in single mode). return false to abort.
|
|
3459
|
-
'addsel' {value, item}: an item selection has been added (in multi mode)
|
|
3460
|
-
'removesel' {value, item}: an item selection has been removed (in multi mode)
|
|
3461
3484
|
'select' {value, item}: an item has been selected (in single mode)
|
|
3462
3485
|
'search' {value}: input box value has changed
|
|
3463
3486
|
'search:focus': input box has gained focus
|
|
@@ -5135,7 +5158,12 @@ class SelectBox {
|
|
|
5135
5158
|
let checked = event.checked;
|
|
5136
5159
|
if (event.isGroup && !p.treatGroupSelectionAsItems) return; // Ignore groups
|
|
5137
5160
|
|
|
5138
|
-
let selEvt = {
|
|
5161
|
+
let selEvt = {
|
|
5162
|
+
value: value,
|
|
5163
|
+
item: item,
|
|
5164
|
+
cancel: false,
|
|
5165
|
+
isCheckingGroup: event.isCheckingGroup,
|
|
5166
|
+
};
|
|
5139
5167
|
this._trigger((checked ? 'addsel' : 'removesel') + ':before', selEvt);
|
|
5140
5168
|
|
|
5141
5169
|
if (selEvt.cancel) {
|
|
@@ -5193,16 +5221,26 @@ class SelectBox {
|
|
|
5193
5221
|
this._scheduleSync('syncPlaceholder');
|
|
5194
5222
|
}
|
|
5195
5223
|
|
|
5196
|
-
this._trigger(checked ? 'addsel' : 'removesel', {
|
|
5224
|
+
this._trigger(checked ? 'addsel' : 'removesel', {
|
|
5225
|
+
value: value,
|
|
5226
|
+
item: item,
|
|
5227
|
+
isCheckingGroup: event.isCheckingGroup,
|
|
5228
|
+
});
|
|
5197
5229
|
}
|
|
5198
5230
|
break;
|
|
5199
5231
|
|
|
5200
5232
|
case 'groupcheck': {
|
|
5201
5233
|
if (!p.multi) return;
|
|
5202
5234
|
|
|
5203
|
-
if (event.
|
|
5235
|
+
if (event.affectedCount) {
|
|
5204
5236
|
this._scheduleSync(p.sortSelectedItems ? 'full' : 'render_base');
|
|
5205
5237
|
}
|
|
5238
|
+
|
|
5239
|
+
this._trigger('groupcheck', {
|
|
5240
|
+
value: event.value,
|
|
5241
|
+
item: event.item,
|
|
5242
|
+
affectedCount: event.affectedCount,
|
|
5243
|
+
});
|
|
5206
5244
|
}
|
|
5207
5245
|
break;
|
|
5208
5246
|
|