@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.
Files changed (83) hide show
  1. package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
  2. package/dist/es/AutoComplete/AutoComplete.js +115 -15
  3. package/dist/es/AutoComplete/AutoCompleteProps.d.ts +12 -0
  4. package/dist/es/ComboBox/ComboBox.js +115 -16
  5. package/dist/es/ComboBox/ComboBoxProps.d.ts +12 -0
  6. package/dist/es/DropDownList/DropDownList.js +101 -14
  7. package/dist/es/DropDownList/DropDownListProps.d.ts +12 -0
  8. package/dist/es/DropDownTree/DropDownTree.d.ts +49 -1
  9. package/dist/es/DropDownTree/DropDownTree.js +863 -638
  10. package/dist/es/DropDownTree/DropDownTreeProps.d.ts +19 -8
  11. package/dist/es/MultiSelect/MultiSelect.js +122 -28
  12. package/dist/es/MultiSelect/MultiSelectProps.d.ts +12 -0
  13. package/dist/es/MultiSelectTree/MultiSelectTree.js +12 -12
  14. package/dist/es/common/DropDownBase.d.ts +2 -0
  15. package/dist/es/common/DropDownBase.js +20 -0
  16. package/dist/es/common/GroupStickyHeader.d.ts +29 -0
  17. package/dist/es/common/GroupStickyHeader.js +59 -0
  18. package/dist/es/common/List.d.ts +2 -0
  19. package/dist/es/common/List.js +53 -25
  20. package/dist/es/common/ListFilter.js +47 -25
  21. package/dist/es/common/ListGroupItem.d.ts +41 -0
  22. package/dist/es/common/ListGroupItem.js +71 -0
  23. package/dist/es/common/settings.d.ts +1 -0
  24. package/dist/es/main.d.ts +2 -1
  25. package/dist/es/main.js +2 -1
  26. package/dist/es/package-metadata.js +1 -1
  27. package/dist/esm/AutoComplete/AutoComplete.js +115 -15
  28. package/dist/esm/AutoComplete/AutoCompleteProps.d.ts +12 -0
  29. package/dist/esm/ComboBox/ComboBox.js +115 -16
  30. package/dist/esm/ComboBox/ComboBoxProps.d.ts +12 -0
  31. package/dist/esm/DropDownList/DropDownList.js +101 -14
  32. package/dist/esm/DropDownList/DropDownListProps.d.ts +12 -0
  33. package/dist/esm/DropDownTree/DropDownTree.d.ts +49 -1
  34. package/dist/esm/DropDownTree/DropDownTree.js +863 -638
  35. package/dist/esm/DropDownTree/DropDownTreeProps.d.ts +19 -8
  36. package/dist/esm/MultiSelect/MultiSelect.js +122 -28
  37. package/dist/esm/MultiSelect/MultiSelectProps.d.ts +12 -0
  38. package/dist/esm/MultiSelectTree/MultiSelectTree.js +12 -12
  39. package/dist/esm/common/DropDownBase.d.ts +2 -0
  40. package/dist/esm/common/DropDownBase.js +20 -0
  41. package/dist/esm/common/GroupStickyHeader.d.ts +29 -0
  42. package/dist/esm/common/GroupStickyHeader.js +59 -0
  43. package/dist/esm/common/List.d.ts +2 -0
  44. package/dist/esm/common/List.js +53 -25
  45. package/dist/esm/common/ListFilter.js +47 -25
  46. package/dist/esm/common/ListGroupItem.d.ts +41 -0
  47. package/dist/esm/common/ListGroupItem.js +71 -0
  48. package/dist/esm/common/settings.d.ts +1 -0
  49. package/dist/esm/main.d.ts +2 -1
  50. package/dist/esm/main.js +2 -1
  51. package/dist/esm/package-metadata.js +1 -1
  52. package/dist/npm/AutoComplete/AutoComplete.js +114 -14
  53. package/dist/npm/AutoComplete/AutoCompleteProps.d.ts +12 -0
  54. package/dist/npm/ComboBox/ComboBox.js +115 -16
  55. package/dist/npm/ComboBox/ComboBoxProps.d.ts +12 -0
  56. package/dist/npm/DropDownList/DropDownList.js +101 -14
  57. package/dist/npm/DropDownList/DropDownListProps.d.ts +12 -0
  58. package/dist/npm/DropDownTree/DropDownTree.d.ts +49 -1
  59. package/dist/npm/DropDownTree/DropDownTree.js +868 -639
  60. package/dist/npm/DropDownTree/DropDownTreeProps.d.ts +19 -8
  61. package/dist/npm/MultiSelect/MultiSelect.js +122 -28
  62. package/dist/npm/MultiSelect/MultiSelectProps.d.ts +12 -0
  63. package/dist/npm/MultiSelectTree/MultiSelectTree.js +12 -12
  64. package/dist/npm/common/DropDownBase.d.ts +2 -0
  65. package/dist/npm/common/DropDownBase.js +20 -0
  66. package/dist/npm/common/GroupStickyHeader.d.ts +29 -0
  67. package/dist/npm/common/GroupStickyHeader.js +66 -0
  68. package/dist/npm/common/List.d.ts +2 -0
  69. package/dist/npm/common/List.js +52 -24
  70. package/dist/npm/common/ListFilter.js +47 -25
  71. package/dist/npm/common/ListGroupItem.d.ts +41 -0
  72. package/dist/npm/common/ListGroupItem.js +78 -0
  73. package/dist/npm/common/settings.d.ts +1 -0
  74. package/dist/npm/main.d.ts +2 -1
  75. package/dist/npm/main.js +3 -1
  76. package/dist/npm/package-metadata.js +1 -1
  77. package/package.json +10 -8
  78. package/dist/es/DropDownTree/useDropdownWidth.d.ts +0 -4
  79. package/dist/es/DropDownTree/useDropdownWidth.js +0 -10
  80. package/dist/esm/DropDownTree/useDropdownWidth.d.ts +0 -4
  81. package/dist/esm/DropDownTree/useDropdownWidth.js +0 -10
  82. package/dist/npm/DropDownTree/useDropdownWidth.d.ts +0 -4
  83. 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 = this.$props,
238
- _b = _a.dataItems,
239
- dataItems = _b === void 0 ? [] : _b,
240
- dataItemKey = _a.dataItemKey,
241
- virtual = _a.virtual;
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
- this.base.scrollToItem(selectedItem ? selectedItemIndex : this.getFocusedIndex());
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
- this.base.scrollToItem(this.getFocusedIndex());
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
- _c = _b.dataItems,
729
- dataItems = _c === void 0 ? [] : _c;
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
- noDataRender: listNoDataRender
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": vs.scrollHandler
864
+ "scroll": this.onScroll
787
865
  },
788
866
  itemRender: itemRender,
867
+ groupHeaderItemRender: groupHeaderItemRender,
789
868
  noDataRender: listNoDataRender,
790
- onScroll: vs.scrollHandler
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]), renderList.call(_this3), footer && h("div", {
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]), renderList.call(_this3), footer && h("div", {
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 = this.$props,
244
- _b = _a.dataItems,
245
- dataItems = _b === void 0 ? [] : _b,
246
- dataItemKey = _a.dataItemKey,
247
- virtual = _a.virtual;
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 textField = this.$props.textField;
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: dataItems.slice(),
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
- noDataRender: listNoDataRender
900
+ groupHeaderItemRender: groupHeaderItemRender,
901
+ noDataRender: listNoDataRender,
902
+ groupField: groupField
836
903
  },
837
904
  show: opened,
838
- dataItems: dataItems.slice(),
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": vs.scrollHandler
924
+ "scroll": this.onScroll
858
925
  },
859
926
  itemRender: itemRender,
927
+ groupHeaderItemRender: groupHeaderItemRender,
860
928
  noDataRender: listNoDataRender,
861
- onScroll: vs.scrollHandler
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), header && h("div", {
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), header && h("div", {
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 };