@progress/kendo-vue-dropdowns 3.10.2 → 3.11.0-dev.202305230751
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/cdn/js/kendo-vue-dropdowns.js +1 -1
- package/dist/es/AutoComplete/AutoComplete.js +115 -15
- package/dist/es/AutoComplete/AutoCompleteProps.d.ts +12 -0
- package/dist/es/ComboBox/ComboBox.js +115 -16
- package/dist/es/ComboBox/ComboBoxProps.d.ts +12 -0
- package/dist/es/DropDownList/DropDownList.js +101 -14
- package/dist/es/DropDownList/DropDownListProps.d.ts +12 -0
- package/dist/es/DropDownTree/DropDownTree.d.ts +49 -1
- package/dist/es/DropDownTree/DropDownTree.js +863 -638
- package/dist/es/DropDownTree/DropDownTreeProps.d.ts +19 -8
- package/dist/es/MultiSelect/MultiSelect.js +122 -28
- package/dist/es/MultiSelect/MultiSelectProps.d.ts +12 -0
- package/dist/es/MultiSelectTree/MultiSelectTree.js +12 -12
- package/dist/es/common/DropDownBase.d.ts +2 -0
- package/dist/es/common/DropDownBase.js +20 -0
- package/dist/es/common/GroupStickyHeader.d.ts +29 -0
- package/dist/es/common/GroupStickyHeader.js +59 -0
- package/dist/es/common/List.d.ts +2 -0
- package/dist/es/common/List.js +53 -25
- package/dist/es/common/ListFilter.js +47 -25
- package/dist/es/common/ListGroupItem.d.ts +41 -0
- package/dist/es/common/ListGroupItem.js +71 -0
- package/dist/es/common/settings.d.ts +1 -0
- package/dist/es/main.d.ts +2 -1
- package/dist/es/main.js +2 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/esm/AutoComplete/AutoComplete.js +115 -15
- package/dist/esm/AutoComplete/AutoCompleteProps.d.ts +12 -0
- package/dist/esm/ComboBox/ComboBox.js +115 -16
- package/dist/esm/ComboBox/ComboBoxProps.d.ts +12 -0
- package/dist/esm/DropDownList/DropDownList.js +101 -14
- package/dist/esm/DropDownList/DropDownListProps.d.ts +12 -0
- package/dist/esm/DropDownTree/DropDownTree.d.ts +49 -1
- package/dist/esm/DropDownTree/DropDownTree.js +863 -638
- package/dist/esm/DropDownTree/DropDownTreeProps.d.ts +19 -8
- package/dist/esm/MultiSelect/MultiSelect.js +122 -28
- package/dist/esm/MultiSelect/MultiSelectProps.d.ts +12 -0
- package/dist/esm/MultiSelectTree/MultiSelectTree.js +12 -12
- package/dist/esm/common/DropDownBase.d.ts +2 -0
- package/dist/esm/common/DropDownBase.js +20 -0
- package/dist/esm/common/GroupStickyHeader.d.ts +29 -0
- package/dist/esm/common/GroupStickyHeader.js +59 -0
- package/dist/esm/common/List.d.ts +2 -0
- package/dist/esm/common/List.js +53 -25
- package/dist/esm/common/ListFilter.js +47 -25
- package/dist/esm/common/ListGroupItem.d.ts +41 -0
- package/dist/esm/common/ListGroupItem.js +71 -0
- package/dist/esm/common/settings.d.ts +1 -0
- package/dist/esm/main.d.ts +2 -1
- package/dist/esm/main.js +2 -1
- package/dist/esm/package-metadata.js +1 -1
- package/dist/npm/AutoComplete/AutoComplete.js +114 -14
- package/dist/npm/AutoComplete/AutoCompleteProps.d.ts +12 -0
- package/dist/npm/ComboBox/ComboBox.js +115 -16
- package/dist/npm/ComboBox/ComboBoxProps.d.ts +12 -0
- package/dist/npm/DropDownList/DropDownList.js +101 -14
- package/dist/npm/DropDownList/DropDownListProps.d.ts +12 -0
- package/dist/npm/DropDownTree/DropDownTree.d.ts +49 -1
- package/dist/npm/DropDownTree/DropDownTree.js +868 -639
- package/dist/npm/DropDownTree/DropDownTreeProps.d.ts +19 -8
- package/dist/npm/MultiSelect/MultiSelect.js +122 -28
- package/dist/npm/MultiSelect/MultiSelectProps.d.ts +12 -0
- package/dist/npm/MultiSelectTree/MultiSelectTree.js +12 -12
- package/dist/npm/common/DropDownBase.d.ts +2 -0
- package/dist/npm/common/DropDownBase.js +20 -0
- package/dist/npm/common/GroupStickyHeader.d.ts +29 -0
- package/dist/npm/common/GroupStickyHeader.js +66 -0
- package/dist/npm/common/List.d.ts +2 -0
- package/dist/npm/common/List.js +52 -24
- package/dist/npm/common/ListFilter.js +47 -25
- package/dist/npm/common/ListGroupItem.d.ts +41 -0
- package/dist/npm/common/ListGroupItem.js +78 -0
- package/dist/npm/common/settings.d.ts +1 -0
- package/dist/npm/main.d.ts +2 -1
- package/dist/npm/main.js +3 -1
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +10 -8
- package/dist/es/DropDownTree/useDropdownWidth.d.ts +0 -4
- package/dist/es/DropDownTree/useDropdownWidth.js +0 -10
- package/dist/esm/DropDownTree/useDropdownWidth.d.ts +0 -4
- package/dist/esm/DropDownTree/useDropdownWidth.js +0 -10
- package/dist/npm/DropDownTree/useDropdownWidth.d.ts +0 -4
- package/dist/npm/DropDownTree/useDropdownWidth.js +0 -17
|
@@ -24,6 +24,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
|
|
|
24
24
|
var ref = allVue.ref;
|
|
25
25
|
var inject = allVue.inject;
|
|
26
26
|
var DropDownBase_1 = require("../common/DropDownBase");
|
|
27
|
+
var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
|
|
27
28
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
28
29
|
var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
|
|
29
30
|
var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
|
|
@@ -125,6 +126,8 @@ var ComboBoxVue2 = {
|
|
|
125
126
|
}
|
|
126
127
|
},
|
|
127
128
|
itemRender: [String, Function, Object],
|
|
129
|
+
groupHeaderItemRender: [String, Function, Object],
|
|
130
|
+
groupStickyHeaderItemRender: [String, Function, Object],
|
|
128
131
|
listNoDataRender: [String, Function, Object],
|
|
129
132
|
focusedItemIndex: Function,
|
|
130
133
|
header: [String, Function, Object],
|
|
@@ -174,6 +177,9 @@ var ComboBoxVue2 = {
|
|
|
174
177
|
validator: function validator(value) {
|
|
175
178
|
return ['small', 'medium', 'large'].includes(value);
|
|
176
179
|
}
|
|
180
|
+
},
|
|
181
|
+
groupField: {
|
|
182
|
+
type: String
|
|
177
183
|
}
|
|
178
184
|
},
|
|
179
185
|
inject: {
|
|
@@ -195,7 +201,10 @@ var ComboBoxVue2 = {
|
|
|
195
201
|
_skipFocusEvent: false,
|
|
196
202
|
valueDuringOnChange: {},
|
|
197
203
|
_navigated: false,
|
|
198
|
-
suggested: ''
|
|
204
|
+
suggested: '',
|
|
205
|
+
group: undefined,
|
|
206
|
+
isScrolling: false,
|
|
207
|
+
itemHeight: 0
|
|
199
208
|
};
|
|
200
209
|
},
|
|
201
210
|
created: function created() {
|
|
@@ -234,11 +243,14 @@ var ComboBoxVue2 = {
|
|
|
234
243
|
this.setValidity();
|
|
235
244
|
},
|
|
236
245
|
updated: function updated() {
|
|
237
|
-
var _a
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
246
|
+
var _a;
|
|
247
|
+
var _b = this.$props,
|
|
248
|
+
_c = _b.dataItems,
|
|
249
|
+
dataItems = _c === void 0 ? [] : _c,
|
|
250
|
+
dataItemKey = _b.dataItemKey,
|
|
251
|
+
virtual = _b.virtual,
|
|
252
|
+
groupField = _b.groupField,
|
|
253
|
+
textField = _b.textField;
|
|
242
254
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
243
255
|
var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
|
|
244
256
|
var opening = !prevOpened && opened;
|
|
@@ -270,17 +282,37 @@ var ComboBoxVue2 = {
|
|
|
270
282
|
var selectedItemIndex = dataItems.findIndex(function (i) {
|
|
271
283
|
return (0, utils_1.areSame)(i, selectedItem, dataItemKey);
|
|
272
284
|
});
|
|
285
|
+
// Needed to calculate the proper item index when in grouping mode
|
|
286
|
+
if (groupField) {
|
|
287
|
+
selectedItemIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem);
|
|
288
|
+
}
|
|
273
289
|
var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem, dataItemKey);
|
|
274
290
|
if (opening && virtual) {
|
|
275
291
|
this.base.scrollToVirtualItem(virtual, selectedItemIndex);
|
|
276
292
|
this.prevCurrentOpened = true;
|
|
277
293
|
} else if (opening && !virtual) {
|
|
278
|
-
|
|
294
|
+
// Resets the sticky header group value for scenarios with open/close of component's popup
|
|
295
|
+
if (dataItems && dataItems.length !== 0) {
|
|
296
|
+
this.base.resetGroupStickyHeader(dataItems[0][groupField], this);
|
|
297
|
+
}
|
|
298
|
+
this.base.scrollToItem(selectedItemIndex);
|
|
279
299
|
this.prevCurrentOpened = true;
|
|
280
300
|
} else if (opened && prevOpened && selectedItem && selectedItemChanged) {
|
|
281
301
|
this.base.scrollToItem(selectedItemIndex);
|
|
282
|
-
} else if (opened && !selectedItem) {
|
|
283
|
-
|
|
302
|
+
} else if (opened && !selectedItem && !this.isScrolling) {
|
|
303
|
+
var groupHeadersBeforeFocus = 0;
|
|
304
|
+
// Handle the items' focusing when working with grouped data
|
|
305
|
+
if (groupField && this.getFocusedIndex() !== -1 && dataItems.length > 0) {
|
|
306
|
+
var focusedElemBeforeGrouping_1 = dataItems[this.getFocusedIndex()][textField];
|
|
307
|
+
var gropedDataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
|
|
308
|
+
var groupedDataIdex = gropedDataItems.findIndex(function (el) {
|
|
309
|
+
return el[textField] === focusedElemBeforeGrouping_1;
|
|
310
|
+
});
|
|
311
|
+
groupHeadersBeforeFocus = gropedDataItems.slice(0, groupedDataIdex).filter(function (el) {
|
|
312
|
+
return Object.keys(el).length === 1;
|
|
313
|
+
}).length;
|
|
314
|
+
}
|
|
315
|
+
this.base.scrollToItem(this.getFocusedIndex() + groupHeadersBeforeFocus);
|
|
284
316
|
}
|
|
285
317
|
}
|
|
286
318
|
if (opening && this.input) {
|
|
@@ -542,6 +574,9 @@ var ComboBoxVue2 = {
|
|
|
542
574
|
},
|
|
543
575
|
onInputKeyDown: function onInputKeyDown(event) {
|
|
544
576
|
var _this = this;
|
|
577
|
+
if (this.isScrolling) {
|
|
578
|
+
this.isScrolling = false;
|
|
579
|
+
}
|
|
545
580
|
var keyCode = event.keyCode;
|
|
546
581
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
547
582
|
var state = this.base.initState();
|
|
@@ -606,6 +641,10 @@ var ComboBoxVue2 = {
|
|
|
606
641
|
this.base.togglePopup(state);
|
|
607
642
|
}
|
|
608
643
|
this.base.filterChanged(value, state);
|
|
644
|
+
// Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
|
|
645
|
+
if (this.$props.filterable) {
|
|
646
|
+
state.data.group = undefined;
|
|
647
|
+
}
|
|
609
648
|
this.applyState(state);
|
|
610
649
|
},
|
|
611
650
|
clearButtonClick: function clearButtonClick(event) {
|
|
@@ -679,6 +718,39 @@ var ComboBoxVue2 = {
|
|
|
679
718
|
},
|
|
680
719
|
repositionPopup: function repositionPopup() {
|
|
681
720
|
this.base.repositionPopup();
|
|
721
|
+
},
|
|
722
|
+
onScroll: function onScroll(event) {
|
|
723
|
+
this.isScrolling = true;
|
|
724
|
+
var _a = this.base,
|
|
725
|
+
vs = _a.vs,
|
|
726
|
+
list = _a.list;
|
|
727
|
+
vs.scrollHandler(event);
|
|
728
|
+
var state = this.base.initState();
|
|
729
|
+
var groupField = this.$props.groupField;
|
|
730
|
+
var _b = this.$props.dataItems,
|
|
731
|
+
dataItems = _b === void 0 ? [] : _b;
|
|
732
|
+
if (!groupField || !dataItems.length) {
|
|
733
|
+
return;
|
|
734
|
+
}
|
|
735
|
+
var itemHeight = this.itemHeight = this.itemHeight || (vs.enabled ? vs.itemHeight : list ? list.children[0].offsetHeight : 0);
|
|
736
|
+
var target = event.target;
|
|
737
|
+
var scrollTop = target.scrollTop - vs.skip * itemHeight;
|
|
738
|
+
if (groupField) {
|
|
739
|
+
dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
|
|
740
|
+
}
|
|
741
|
+
var group = dataItems[0][groupField];
|
|
742
|
+
for (var i = 1; i < dataItems.length; i++) {
|
|
743
|
+
if (itemHeight * i > scrollTop) {
|
|
744
|
+
break;
|
|
745
|
+
}
|
|
746
|
+
if (dataItems[i] && dataItems[i][groupField]) {
|
|
747
|
+
group = dataItems[i][groupField];
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
if (group !== this.group) {
|
|
751
|
+
state.data.group = group;
|
|
752
|
+
this.applyState(state);
|
|
753
|
+
}
|
|
682
754
|
}
|
|
683
755
|
},
|
|
684
756
|
render: function render(createElement) {
|
|
@@ -725,9 +797,10 @@ var ComboBoxVue2 = {
|
|
|
725
797
|
var _a;
|
|
726
798
|
var _b = this.$props,
|
|
727
799
|
dataItemKey = _b.dataItemKey,
|
|
728
|
-
|
|
729
|
-
|
|
800
|
+
groupField = _b.groupField;
|
|
801
|
+
var dataItems = this.$props.dataItems || [];
|
|
730
802
|
var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
|
|
803
|
+
var groupHeaderItemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.groupHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
|
|
731
804
|
var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
|
|
732
805
|
if (!virtual) {
|
|
733
806
|
virtual = {
|
|
@@ -739,6 +812,9 @@ var ComboBoxVue2 = {
|
|
|
739
812
|
var translate = "translateY(".concat(vs.translate, "px)");
|
|
740
813
|
var focusedIndex = opened ? this.getFocusedIndex() : undefined;
|
|
741
814
|
var value = (0, utils_1.isPresent)(text) && text !== selectedItemText ? null : this.computedValue();
|
|
815
|
+
if (groupField) {
|
|
816
|
+
dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
|
|
817
|
+
}
|
|
742
818
|
return (
|
|
743
819
|
// @ts-ignore function children
|
|
744
820
|
h(List_1.List, {
|
|
@@ -761,7 +837,9 @@ var ComboBoxVue2 = {
|
|
|
761
837
|
} : undefined,
|
|
762
838
|
skip: skip,
|
|
763
839
|
itemRender: itemRender,
|
|
764
|
-
|
|
840
|
+
groupHeaderItemRender: groupHeaderItemRender,
|
|
841
|
+
noDataRender: listNoDataRender,
|
|
842
|
+
groupField: groupField
|
|
765
843
|
},
|
|
766
844
|
show: opened,
|
|
767
845
|
dataItems: dataItems,
|
|
@@ -783,11 +861,13 @@ var ComboBoxVue2 = {
|
|
|
783
861
|
onListclick: this.handleItemClick,
|
|
784
862
|
on: this.v3 ? undefined : {
|
|
785
863
|
"listclick": this.handleItemClick,
|
|
786
|
-
"scroll":
|
|
864
|
+
"scroll": this.onScroll
|
|
787
865
|
},
|
|
788
866
|
itemRender: itemRender,
|
|
867
|
+
groupHeaderItemRender: groupHeaderItemRender,
|
|
789
868
|
noDataRender: listNoDataRender,
|
|
790
|
-
|
|
869
|
+
groupField: groupField,
|
|
870
|
+
onScroll: this.onScroll
|
|
791
871
|
}, this.v3 ? function () {
|
|
792
872
|
return [renderScrollElement.call(_this2)];
|
|
793
873
|
} : [renderScrollElement.call(_this2)])
|
|
@@ -804,6 +884,7 @@ var ComboBoxVue2 = {
|
|
|
804
884
|
var _a;
|
|
805
885
|
var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
|
|
806
886
|
var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
|
|
887
|
+
var groupStickyHeaderTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.groupStickyHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
|
|
807
888
|
var header = kendo_vue_common_1.getTemplate.call(this, {
|
|
808
889
|
h: h,
|
|
809
890
|
template: headerTemplate
|
|
@@ -814,6 +895,10 @@ var ComboBoxVue2 = {
|
|
|
814
895
|
});
|
|
815
896
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
816
897
|
var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
|
|
898
|
+
var dataItems = this.$props.dataItems || [];
|
|
899
|
+
if (this.group === undefined && this.$props.groupField !== undefined) {
|
|
900
|
+
this.group = (0, utils_1.getItemValue)(dataItems[0], this.$props.groupField);
|
|
901
|
+
}
|
|
817
902
|
return (
|
|
818
903
|
// @ts-ignore function children
|
|
819
904
|
h(ListContainer_1.ListContainer, {
|
|
@@ -847,12 +932,26 @@ var ComboBoxVue2 = {
|
|
|
847
932
|
}, this.v3 ? function () {
|
|
848
933
|
return [header && h("div", {
|
|
849
934
|
"class": "k-list-header"
|
|
850
|
-
}, [header]),
|
|
935
|
+
}, [header]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
|
|
936
|
+
group: _this3.group,
|
|
937
|
+
attrs: _this3.v3 ? undefined : {
|
|
938
|
+
group: _this3.group,
|
|
939
|
+
render: groupStickyHeaderTemplate
|
|
940
|
+
},
|
|
941
|
+
render: groupStickyHeaderTemplate
|
|
942
|
+
}), renderList.call(_this3), footer && h("div", {
|
|
851
943
|
"class": "k-list-footer"
|
|
852
944
|
}, [footer])];
|
|
853
945
|
} : [header && h("div", {
|
|
854
946
|
"class": "k-list-header"
|
|
855
|
-
}, [header]),
|
|
947
|
+
}, [header]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
|
|
948
|
+
group: _this3.group,
|
|
949
|
+
attrs: _this3.v3 ? undefined : {
|
|
950
|
+
group: _this3.group,
|
|
951
|
+
render: groupStickyHeaderTemplate
|
|
952
|
+
},
|
|
953
|
+
render: groupStickyHeaderTemplate
|
|
954
|
+
}), renderList.call(_this3), footer && h("div", {
|
|
856
955
|
"class": "k-list-footer"
|
|
857
956
|
}, [footer])])
|
|
858
957
|
);
|
|
@@ -250,4 +250,16 @@ export interface ComboBoxProps extends FormComponentProps {
|
|
|
250
250
|
* @default `solid`
|
|
251
251
|
*/
|
|
252
252
|
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
|
|
253
|
+
/**
|
|
254
|
+
* Sets the data item field that represents the start of a group. Applicable to objects data.
|
|
255
|
+
*/
|
|
256
|
+
groupField?: string;
|
|
257
|
+
/**
|
|
258
|
+
* Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers.
|
|
259
|
+
*/
|
|
260
|
+
groupHeaderItemRender?: any;
|
|
261
|
+
/**
|
|
262
|
+
* Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
|
|
263
|
+
*/
|
|
264
|
+
groupStickyHeaderItemRender?: any;
|
|
253
265
|
}
|
|
@@ -31,6 +31,7 @@ var ListFilter_1 = require("../common/ListFilter");
|
|
|
31
31
|
var ListDefaultItem_1 = require("../common/ListDefaultItem");
|
|
32
32
|
var List_1 = require("../common/List");
|
|
33
33
|
var DropDownBase_1 = require("../common/DropDownBase");
|
|
34
|
+
var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
|
|
34
35
|
var main_1 = require("../messages/main");
|
|
35
36
|
var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
|
36
37
|
var utils_1 = require("../common/utils");
|
|
@@ -133,6 +134,8 @@ var DropDownListVue2 = {
|
|
|
133
134
|
}
|
|
134
135
|
},
|
|
135
136
|
itemRender: [String, Function, Object],
|
|
137
|
+
groupHeaderItemRender: [String, Function, Object],
|
|
138
|
+
groupStickyHeaderItemRender: [String, Function, Object],
|
|
136
139
|
listNoDataRender: [String, Function, Object],
|
|
137
140
|
focusedItemIndex: Function,
|
|
138
141
|
header: [String, Function, Object],
|
|
@@ -169,6 +172,9 @@ var DropDownListVue2 = {
|
|
|
169
172
|
validator: function validator(value) {
|
|
170
173
|
return ['small', 'medium', 'large'].includes(value);
|
|
171
174
|
}
|
|
175
|
+
},
|
|
176
|
+
groupField: {
|
|
177
|
+
type: String
|
|
172
178
|
}
|
|
173
179
|
},
|
|
174
180
|
inject: {
|
|
@@ -189,7 +195,10 @@ var DropDownListVue2 = {
|
|
|
189
195
|
},
|
|
190
196
|
_skipFocusEvent: false,
|
|
191
197
|
valueDuringOnChange: {},
|
|
192
|
-
_navigated: false
|
|
198
|
+
_navigated: false,
|
|
199
|
+
group: undefined,
|
|
200
|
+
isScrolling: false,
|
|
201
|
+
itemHeight: 0
|
|
193
202
|
};
|
|
194
203
|
},
|
|
195
204
|
watch: {
|
|
@@ -240,11 +249,14 @@ var DropDownListVue2 = {
|
|
|
240
249
|
this.setValidity();
|
|
241
250
|
},
|
|
242
251
|
updated: function updated() {
|
|
243
|
-
var _a
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
252
|
+
var _a;
|
|
253
|
+
var _b = this.$props,
|
|
254
|
+
_c = _b.dataItems,
|
|
255
|
+
dataItems = _c === void 0 ? [] : _c,
|
|
256
|
+
dataItemKey = _b.dataItemKey,
|
|
257
|
+
virtual = _b.virtual,
|
|
258
|
+
groupField = _b.groupField,
|
|
259
|
+
textField = _b.textField;
|
|
248
260
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
249
261
|
var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
|
|
250
262
|
var opening = !prevOpened && opened;
|
|
@@ -288,11 +300,19 @@ var DropDownListVue2 = {
|
|
|
288
300
|
var selectedItemIndex = dataItems.findIndex(function (i) {
|
|
289
301
|
return (0, utils_1.areSame)(i, selectedItem_1, dataItemKey);
|
|
290
302
|
});
|
|
303
|
+
// Needed to calculate the proper item index when in grouping mode
|
|
304
|
+
if (groupField) {
|
|
305
|
+
selectedItemIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem_1);
|
|
306
|
+
}
|
|
291
307
|
var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem_1, dataItemKey);
|
|
292
308
|
if (opening && virtual) {
|
|
293
309
|
this.base.scrollToVirtualItem(virtual, selectedItemIndex);
|
|
294
310
|
this.prevCurrentOpened = true;
|
|
295
311
|
} else if (opening && !virtual) {
|
|
312
|
+
// Resets the sticky header group value for scenarios with open/close of component's popup
|
|
313
|
+
if (dataItems && dataItems.length !== 0) {
|
|
314
|
+
this.base.resetGroupStickyHeader(dataItems[0][groupField], this);
|
|
315
|
+
}
|
|
296
316
|
this.base.scrollToItem(selectedItemIndex);
|
|
297
317
|
this.prevCurrentOpened = true;
|
|
298
318
|
} else if (opened && prevOpened && selectedItem_1 && selectedItemChanged && !this._navigated) {
|
|
@@ -493,6 +513,9 @@ var DropDownListVue2 = {
|
|
|
493
513
|
}
|
|
494
514
|
},
|
|
495
515
|
handleKeyDown: function handleKeyDown(event) {
|
|
516
|
+
if (this.isScrolling) {
|
|
517
|
+
this.isScrolling = false;
|
|
518
|
+
}
|
|
496
519
|
var _a = this.$props,
|
|
497
520
|
_b = _a.dataItems,
|
|
498
521
|
dataItems = _b === void 0 ? [] : _b,
|
|
@@ -617,6 +640,8 @@ var DropDownListVue2 = {
|
|
|
617
640
|
state.data.currentText = event.target.value;
|
|
618
641
|
}
|
|
619
642
|
this.base.filterChanged(event.target.value, state);
|
|
643
|
+
// Used to reset the value of the StickyHeader when filtering the data
|
|
644
|
+
state.data.group = undefined;
|
|
620
645
|
this.applyState(state);
|
|
621
646
|
},
|
|
622
647
|
onPopupOpened: function onPopupOpened() {
|
|
@@ -688,6 +713,39 @@ var DropDownListVue2 = {
|
|
|
688
713
|
},
|
|
689
714
|
repositionPopup: function repositionPopup() {
|
|
690
715
|
this.base.repositionPopup();
|
|
716
|
+
},
|
|
717
|
+
onScroll: function onScroll(event) {
|
|
718
|
+
this.isScrolling = true;
|
|
719
|
+
var _a = this.base,
|
|
720
|
+
vs = _a.vs,
|
|
721
|
+
list = _a.list;
|
|
722
|
+
vs.scrollHandler(event);
|
|
723
|
+
var state = this.base.initState();
|
|
724
|
+
var groupField = this.$props.groupField;
|
|
725
|
+
var _b = this.$props.dataItems,
|
|
726
|
+
dataItems = _b === void 0 ? [] : _b;
|
|
727
|
+
if (!groupField || !dataItems.length) {
|
|
728
|
+
return;
|
|
729
|
+
}
|
|
730
|
+
var itemHeight = this.itemHeight = this.itemHeight || (vs.enabled ? vs.itemHeight : list ? list.children[0].offsetHeight : 0);
|
|
731
|
+
var target = event.target;
|
|
732
|
+
var scrollTop = target.scrollTop - vs.skip * itemHeight;
|
|
733
|
+
if (groupField) {
|
|
734
|
+
dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
|
|
735
|
+
}
|
|
736
|
+
var group = dataItems[0][groupField];
|
|
737
|
+
for (var i = 1; i < dataItems.length; i++) {
|
|
738
|
+
if (itemHeight * i > scrollTop) {
|
|
739
|
+
break;
|
|
740
|
+
}
|
|
741
|
+
if (dataItems[i] && dataItems[i][groupField]) {
|
|
742
|
+
group = dataItems[i][groupField];
|
|
743
|
+
}
|
|
744
|
+
}
|
|
745
|
+
if (group !== this.group) {
|
|
746
|
+
state.data.group = group;
|
|
747
|
+
this.applyState(state);
|
|
748
|
+
}
|
|
691
749
|
}
|
|
692
750
|
},
|
|
693
751
|
render: function render(createElement) {
|
|
@@ -805,11 +863,18 @@ var DropDownListVue2 = {
|
|
|
805
863
|
};
|
|
806
864
|
var renderList = function renderList() {
|
|
807
865
|
var _this2 = this;
|
|
808
|
-
var
|
|
866
|
+
var _a = this.$props,
|
|
867
|
+
textField = _a.textField,
|
|
868
|
+
groupField = _a.groupField;
|
|
869
|
+
var dataItemsToRender = this.$props.dataItems || [];
|
|
809
870
|
var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
|
|
871
|
+
var groupHeaderItemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.groupHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
|
|
810
872
|
var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
|
|
811
873
|
var skip = virtual.skip;
|
|
812
874
|
var translate = "translateY(".concat(vs.translate, "px)");
|
|
875
|
+
if (groupField) {
|
|
876
|
+
dataItemsToRender = this.base.getGroupedDataModernMode(dataItemsToRender, groupField);
|
|
877
|
+
}
|
|
813
878
|
return (
|
|
814
879
|
// @ts-ignore function children
|
|
815
880
|
h(List_1.List, {
|
|
@@ -817,7 +882,7 @@ var DropDownListVue2 = {
|
|
|
817
882
|
attrs: this.v3 ? undefined : {
|
|
818
883
|
id: this.base.listBoxId,
|
|
819
884
|
show: opened,
|
|
820
|
-
dataItems:
|
|
885
|
+
dataItems: dataItemsToRender.slice(),
|
|
821
886
|
focusedIndex: this.focusedIndex(),
|
|
822
887
|
value: this.computedValue(),
|
|
823
888
|
textField: textField,
|
|
@@ -832,10 +897,12 @@ var DropDownListVue2 = {
|
|
|
832
897
|
} : undefined,
|
|
833
898
|
skip: skip,
|
|
834
899
|
itemRender: itemRender,
|
|
835
|
-
|
|
900
|
+
groupHeaderItemRender: groupHeaderItemRender,
|
|
901
|
+
noDataRender: listNoDataRender,
|
|
902
|
+
groupField: groupField
|
|
836
903
|
},
|
|
837
904
|
show: opened,
|
|
838
|
-
dataItems:
|
|
905
|
+
dataItems: dataItemsToRender.slice(),
|
|
839
906
|
focusedIndex: this.focusedIndex(),
|
|
840
907
|
value: this.computedValue(),
|
|
841
908
|
textField: textField,
|
|
@@ -854,11 +921,13 @@ var DropDownListVue2 = {
|
|
|
854
921
|
onListclick: this.handleItemClick,
|
|
855
922
|
on: this.v3 ? undefined : {
|
|
856
923
|
"listclick": this.handleItemClick,
|
|
857
|
-
"scroll":
|
|
924
|
+
"scroll": this.onScroll
|
|
858
925
|
},
|
|
859
926
|
itemRender: itemRender,
|
|
927
|
+
groupHeaderItemRender: groupHeaderItemRender,
|
|
860
928
|
noDataRender: listNoDataRender,
|
|
861
|
-
|
|
929
|
+
groupField: groupField,
|
|
930
|
+
onScroll: this.onScroll
|
|
862
931
|
}, this.v3 ? function () {
|
|
863
932
|
return [renderScrollElement.call(_this2)];
|
|
864
933
|
} : [renderScrollElement.call(_this2)])
|
|
@@ -899,6 +968,7 @@ var DropDownListVue2 = {
|
|
|
899
968
|
var _a;
|
|
900
969
|
var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
|
|
901
970
|
var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
|
|
971
|
+
var groupStickyHeaderTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.groupStickyHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
|
|
902
972
|
var header = kendo_vue_common_1.getTemplate.call(this, {
|
|
903
973
|
h: h,
|
|
904
974
|
template: headerTemplate
|
|
@@ -908,6 +978,9 @@ var DropDownListVue2 = {
|
|
|
908
978
|
template: footerTemplate
|
|
909
979
|
});
|
|
910
980
|
var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
|
|
981
|
+
if (this.group === undefined && this.$props.groupField !== undefined) {
|
|
982
|
+
this.group = (0, utils_1.getItemValue)(dataItems[0], this.$props.groupField);
|
|
983
|
+
}
|
|
911
984
|
return (
|
|
912
985
|
// @ts-ignore function children
|
|
913
986
|
h(ListContainer_1.ListContainer, {
|
|
@@ -943,12 +1016,26 @@ var DropDownListVue2 = {
|
|
|
943
1016
|
onClose: this.onPopupClosed,
|
|
944
1017
|
onBlur: this.handleBlur
|
|
945
1018
|
}, this.v3 ? function () {
|
|
946
|
-
return [renderListFilter.call(_this3), renderDefaultItem.call(_this3),
|
|
1019
|
+
return [renderListFilter.call(_this3), renderDefaultItem.call(_this3), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
|
|
1020
|
+
group: _this3.group,
|
|
1021
|
+
attrs: _this3.v3 ? undefined : {
|
|
1022
|
+
group: _this3.group,
|
|
1023
|
+
render: groupStickyHeaderTemplate
|
|
1024
|
+
},
|
|
1025
|
+
render: groupStickyHeaderTemplate
|
|
1026
|
+
}), header && h("div", {
|
|
947
1027
|
"class": "k-list-header"
|
|
948
1028
|
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
949
1029
|
"class": "k-list-footer"
|
|
950
1030
|
}, [footer])];
|
|
951
|
-
} : [renderListFilter.call(_this3), renderDefaultItem.call(_this3),
|
|
1031
|
+
} : [renderListFilter.call(_this3), renderDefaultItem.call(_this3), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
|
|
1032
|
+
group: _this3.group,
|
|
1033
|
+
attrs: _this3.v3 ? undefined : {
|
|
1034
|
+
group: _this3.group,
|
|
1035
|
+
render: groupStickyHeaderTemplate
|
|
1036
|
+
},
|
|
1037
|
+
render: groupStickyHeaderTemplate
|
|
1038
|
+
}), header && h("div", {
|
|
952
1039
|
"class": "k-list-header"
|
|
953
1040
|
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
954
1041
|
"class": "k-list-footer"
|
|
@@ -284,4 +284,16 @@ export interface DropDownListProps extends FormComponentProps {
|
|
|
284
284
|
* @default `solid`
|
|
285
285
|
*/
|
|
286
286
|
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
|
|
287
|
+
/**
|
|
288
|
+
* Sets the data item field that represents the start of a group. Applicable to objects data.
|
|
289
|
+
*/
|
|
290
|
+
groupField?: string;
|
|
291
|
+
/**
|
|
292
|
+
* Fires when a DropDownList group header item is about to be rendered. Used to override the default appearance of the group's headers.
|
|
293
|
+
*/
|
|
294
|
+
groupHeaderItemRender?: any;
|
|
295
|
+
/**
|
|
296
|
+
* Fires when a DropDownList sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
|
|
297
|
+
*/
|
|
298
|
+
groupStickyHeaderItemRender?: any;
|
|
287
299
|
}
|
|
@@ -1 +1,49 @@
|
|
|
1
|
-
|
|
1
|
+
import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
|
|
2
|
+
declare type DefaultData<V> = object | ((this: V) => {});
|
|
3
|
+
declare type DefaultMethods<V> = {
|
|
4
|
+
[key: string]: (this: V, ...args: any[]) => any;
|
|
5
|
+
};
|
|
6
|
+
import { DropDownTreeProps } from './DropDownTreeProps';
|
|
7
|
+
/**
|
|
8
|
+
* @hidden
|
|
9
|
+
*/
|
|
10
|
+
export interface DropDownTreeState {
|
|
11
|
+
calculatedId: string;
|
|
12
|
+
anchor: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* @hidden
|
|
16
|
+
*/
|
|
17
|
+
export interface DropDownTreeComputed {
|
|
18
|
+
[key: string]: any;
|
|
19
|
+
isOpen: boolean;
|
|
20
|
+
computedValue: any;
|
|
21
|
+
hasValue: boolean;
|
|
22
|
+
currentValueText: string;
|
|
23
|
+
wrapperClass: object;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* @hidden
|
|
27
|
+
*/
|
|
28
|
+
export interface DropDownTreeMethods {
|
|
29
|
+
[key: string]: any;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* @hidden
|
|
33
|
+
*/
|
|
34
|
+
export interface DropDownTreeData {
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* @hidden
|
|
38
|
+
*/
|
|
39
|
+
export interface DropDownTreeAll extends Vue2type, DropDownTreeMethods, DropDownTreeData, DropDownTreeComputed, DropDownTreeState {
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* @hidden
|
|
43
|
+
*/
|
|
44
|
+
declare let DropDownTreeVue2: ComponentOptions<DropDownTreeAll, DefaultData<DropDownTreeData>, DefaultMethods<DropDownTreeAll>, DropDownTreeComputed, RecordPropsDefinition<DropDownTreeProps>>;
|
|
45
|
+
/**
|
|
46
|
+
* @hidden
|
|
47
|
+
*/
|
|
48
|
+
declare const DropDownTree: DefineComponent<DropDownTreeProps, any, DropDownTreeData, DropDownTreeComputed, DropDownTreeMethods, {}, {}, {}, string, DropDownTreeProps, DropDownTreeProps, {}>;
|
|
49
|
+
export { DropDownTree, DropDownTreeVue2 };
|