@progress/kendo-vue-dropdowns 3.11.0-dev.202305230623 → 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 (56) hide show
  1. package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
  2. package/dist/es/AutoComplete/AutoComplete.js +108 -12
  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/MultiSelect/MultiSelect.js +116 -26
  9. package/dist/es/MultiSelect/MultiSelectProps.d.ts +12 -0
  10. package/dist/es/common/DropDownBase.d.ts +2 -0
  11. package/dist/es/common/DropDownBase.js +20 -0
  12. package/dist/es/common/GroupStickyHeader.d.ts +29 -0
  13. package/dist/es/common/GroupStickyHeader.js +59 -0
  14. package/dist/es/common/List.d.ts +2 -0
  15. package/dist/es/common/List.js +53 -25
  16. package/dist/es/common/ListGroupItem.d.ts +41 -0
  17. package/dist/es/common/ListGroupItem.js +71 -0
  18. package/dist/es/common/settings.d.ts +1 -0
  19. package/dist/es/package-metadata.js +1 -1
  20. package/dist/esm/AutoComplete/AutoComplete.js +108 -12
  21. package/dist/esm/AutoComplete/AutoCompleteProps.d.ts +12 -0
  22. package/dist/esm/ComboBox/ComboBox.js +115 -16
  23. package/dist/esm/ComboBox/ComboBoxProps.d.ts +12 -0
  24. package/dist/esm/DropDownList/DropDownList.js +101 -14
  25. package/dist/esm/DropDownList/DropDownListProps.d.ts +12 -0
  26. package/dist/esm/MultiSelect/MultiSelect.js +116 -26
  27. package/dist/esm/MultiSelect/MultiSelectProps.d.ts +12 -0
  28. package/dist/esm/common/DropDownBase.d.ts +2 -0
  29. package/dist/esm/common/DropDownBase.js +20 -0
  30. package/dist/esm/common/GroupStickyHeader.d.ts +29 -0
  31. package/dist/esm/common/GroupStickyHeader.js +59 -0
  32. package/dist/esm/common/List.d.ts +2 -0
  33. package/dist/esm/common/List.js +53 -25
  34. package/dist/esm/common/ListGroupItem.d.ts +41 -0
  35. package/dist/esm/common/ListGroupItem.js +71 -0
  36. package/dist/esm/common/settings.d.ts +1 -0
  37. package/dist/esm/package-metadata.js +1 -1
  38. package/dist/npm/AutoComplete/AutoComplete.js +108 -12
  39. package/dist/npm/AutoComplete/AutoCompleteProps.d.ts +12 -0
  40. package/dist/npm/ComboBox/ComboBox.js +115 -16
  41. package/dist/npm/ComboBox/ComboBoxProps.d.ts +12 -0
  42. package/dist/npm/DropDownList/DropDownList.js +101 -14
  43. package/dist/npm/DropDownList/DropDownListProps.d.ts +12 -0
  44. package/dist/npm/MultiSelect/MultiSelect.js +116 -26
  45. package/dist/npm/MultiSelect/MultiSelectProps.d.ts +12 -0
  46. package/dist/npm/common/DropDownBase.d.ts +2 -0
  47. package/dist/npm/common/DropDownBase.js +20 -0
  48. package/dist/npm/common/GroupStickyHeader.d.ts +29 -0
  49. package/dist/npm/common/GroupStickyHeader.js +66 -0
  50. package/dist/npm/common/List.d.ts +2 -0
  51. package/dist/npm/common/List.js +52 -24
  52. package/dist/npm/common/ListGroupItem.d.ts +41 -0
  53. package/dist/npm/common/ListGroupItem.js +78 -0
  54. package/dist/npm/common/settings.d.ts +1 -0
  55. package/dist/npm/package-metadata.js +1 -1
  56. package/package.json +9 -9
@@ -33,6 +33,7 @@ import { List } from '../common/List.js';
33
33
  import { TagList } from './TagList.js';
34
34
  import { SearchBar } from '../common/SearchBar.js';
35
35
  import DropDownBase from '../common/DropDownBase.js';
36
+ import { GroupStickyHeader } from '../common/GroupStickyHeader.js';
36
37
  import { ClearButton } from '../common/ClearButton.js';
37
38
  import { ActiveDescendant } from './../common/settings.js';
38
39
  import { itemIndexStartsWith, getItemValue, areSame, matchDataCollections, removeDataItems, isPresent, preventDefaultNonInputs } from '../common/utils.js';
@@ -139,6 +140,8 @@ var MultiSelectVue2 = {
139
140
  }
140
141
  },
141
142
  itemRender: [String, Function, Object],
143
+ groupHeaderItemRender: [String, Function, Object],
144
+ groupStickyHeaderItemRender: [String, Function, Object],
142
145
  listNoDataRender: [String, Function, Object],
143
146
  focusedItemIndex: Function,
144
147
  virtual: {
@@ -181,6 +184,9 @@ var MultiSelectVue2 = {
181
184
  validator: function validator(value) {
182
185
  return ['small', 'medium', 'large'].includes(value);
183
186
  }
187
+ },
188
+ groupField: {
189
+ type: String
184
190
  }
185
191
  },
186
192
  // @ts-ignore
@@ -232,7 +238,10 @@ var MultiSelectVue2 = {
232
238
  last: ''
233
239
  },
234
240
  suggested: '',
235
- activedescendant: ActiveDescendant.PopupList
241
+ activedescendant: ActiveDescendant.PopupList,
242
+ group: undefined,
243
+ isScrolling: false,
244
+ itemHeight: 0
236
245
  };
237
246
  },
238
247
  watch: {
@@ -249,7 +258,13 @@ var MultiSelectVue2 = {
249
258
  }
250
259
  },
251
260
  updated: function updated() {
252
- var virtual = this.$props.virtual;
261
+ var _a;
262
+ var _b = this.$props,
263
+ virtual = _b.virtual,
264
+ _c = _b.groupField,
265
+ groupField = _c === void 0 ? '' : _c,
266
+ _d = _b.dataItems,
267
+ dataItems = _d === void 0 ? [] : _d;
253
268
  var skip = virtual ? virtual.skip : 0;
254
269
  var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
255
270
  var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
@@ -270,29 +285,38 @@ var MultiSelectVue2 = {
270
285
  if (scrollElement) {
271
286
  this.base.vs.scrollElement = scrollElement;
272
287
  }
273
- if (list && this.dataItems.length) {
288
+ if (list && dataItems.length) {
274
289
  // @ts-ignore
275
290
  this.base.vs.scrollerRef(list.$el);
276
291
  }
277
292
  if (!popupSettings.animate && closing) {
278
293
  this.onPopupClosed();
279
294
  }
280
- if (virtual && this.virtualTotalHasChanged) {
281
- this.base.vs.calcScrollElementHeight();
282
- this.base.vs.reset();
283
- this.virtualTotalHasChanged = false;
284
- } else {
285
- var _a = this.getFocusedState(),
286
- focusedItem = _a.focusedItem,
287
- focusedIndex = _a.focusedIndex;
288
- if (opening && virtual) {
289
- this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
290
- this.prevCurrentOpened = true;
291
- } else if (opening && !virtual) {
292
- this.base.scrollToItem(focusedIndex);
293
- this.prevCurrentOpened = true;
294
- } else if (opened && prevOpened && focusedItem && this.scrollToFocused) {
295
- this.base.scrollToItem(focusedIndex - skip);
295
+ if (!this.isScrolling) {
296
+ if (virtual && this.virtualTotalHasChanged) {
297
+ this.base.vs.calcScrollElementHeight();
298
+ this.base.vs.reset();
299
+ this.virtualTotalHasChanged = false;
300
+ } else {
301
+ var _e = this.getFocusedState(),
302
+ focusedItem = _e.focusedItem,
303
+ focusedIndex = _e.focusedIndex;
304
+ if (groupField !== '') {
305
+ focusedIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
306
+ }
307
+ if (opening && virtual) {
308
+ this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
309
+ this.prevCurrentOpened = true;
310
+ } else if (opening && !virtual) {
311
+ // Resets the sticky header group value for scenarios with open/close of component's popup
312
+ if (dataItems && dataItems.length !== 0) {
313
+ this.base.resetGroupStickyHeader(dataItems[0][groupField], this);
314
+ }
315
+ this.base.scrollToItem(focusedIndex);
316
+ this.prevCurrentOpened = true;
317
+ } else if (opened && prevOpened && focusedItem) {
318
+ this.base.scrollToItem(focusedIndex - skip);
319
+ }
296
320
  }
297
321
  }
298
322
  this.scrollToFocused = false;
@@ -478,6 +502,10 @@ var MultiSelectVue2 = {
478
502
  this.base.togglePopup(state);
479
503
  }
480
504
  this.base.filterChanged(value, state);
505
+ // Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
506
+ if (this.$props.filterable) {
507
+ state.data.group = undefined;
508
+ }
481
509
  this.applyState(state);
482
510
  },
483
511
  clearButtonClick: function clearButtonClick(event) {
@@ -505,6 +533,9 @@ var MultiSelectVue2 = {
505
533
  },
506
534
  onInputKeyDown: function onInputKeyDown(event) {
507
535
  var _this = this;
536
+ if (this.isScrolling) {
537
+ this.isScrolling = false;
538
+ }
508
539
  var keyCode = event.keyCode;
509
540
  var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
510
541
  var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
@@ -794,6 +825,39 @@ var MultiSelectVue2 = {
794
825
  },
795
826
  repositionPopup: function repositionPopup() {
796
827
  this.base.repositionPopup();
828
+ },
829
+ onScroll: function onScroll(event) {
830
+ this.isScrolling = true;
831
+ var _a = this.base,
832
+ vs = _a.vs,
833
+ list = _a.list;
834
+ vs.scrollHandler(event);
835
+ var state = this.base.initState();
836
+ var groupField = this.$props.groupField;
837
+ var _b = this.$props.dataItems,
838
+ dataItems = _b === void 0 ? [] : _b;
839
+ if (!groupField || !dataItems.length) {
840
+ return;
841
+ }
842
+ var itemHeight = this.itemHeight = this.itemHeight || (vs.enabled ? vs.itemHeight : list ? list.children[0].offsetHeight : 0);
843
+ var target = event.target;
844
+ var scrollTop = target.scrollTop - vs.skip * itemHeight;
845
+ if (groupField) {
846
+ dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
847
+ }
848
+ var group = dataItems[0][groupField];
849
+ for (var i = 1; i < dataItems.length; i++) {
850
+ if (itemHeight * i > scrollTop) {
851
+ break;
852
+ }
853
+ if (dataItems[i] && dataItems[i][groupField]) {
854
+ group = dataItems[i][groupField];
855
+ }
856
+ }
857
+ if (group !== this.group) {
858
+ state.data.group = group;
859
+ this.applyState(state);
860
+ }
797
861
  }
798
862
  },
799
863
  render: function render(createElement) {
@@ -899,14 +963,18 @@ var MultiSelectVue2 = {
899
963
  };
900
964
  var renderList = function renderList() {
901
965
  var _this2 = this;
902
- var _a = this.$props.dataItems,
903
- dataItems = _a === void 0 ? [] : _a;
966
+ var groupField = this.$props.groupField;
967
+ var dataItems = this.$props.dataItems || [];
904
968
  var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
969
+ var groupHeaderItemRender = templateRendering.call(this, this.$props.groupHeaderItemRender, getListeners.call(this));
905
970
  var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
906
971
  var skip = virtual ? virtual.skip : 0;
907
972
  var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
908
973
  var focusedIndex = this.getFocusedState().focusedIndex;
909
974
  var translate = "translateY(".concat(vs.translate, "px)");
975
+ if (groupField) {
976
+ dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
977
+ }
910
978
  return (
911
979
  // @ts-ignore function children
912
980
  h(List, {
@@ -929,7 +997,9 @@ var MultiSelectVue2 = {
929
997
  } : undefined,
930
998
  skip: skip,
931
999
  itemRender: itemRender,
932
- noDataRender: listNoDataRender
1000
+ groupHeaderItemRender: groupHeaderItemRender,
1001
+ noDataRender: listNoDataRender,
1002
+ groupField: groupField
933
1003
  },
934
1004
  show: opened,
935
1005
  dataItems: dataItems.slice(),
@@ -951,11 +1021,13 @@ var MultiSelectVue2 = {
951
1021
  onListclick: this.handleItemClick,
952
1022
  on: this.v3 ? undefined : {
953
1023
  "listclick": this.handleItemClick,
954
- "scroll": vs.scrollHandler
1024
+ "scroll": this.onScroll
955
1025
  },
956
1026
  itemRender: itemRender,
1027
+ groupHeaderItemRender: groupHeaderItemRender,
957
1028
  noDataRender: listNoDataRender,
958
- onScroll: vs.scrollHandler
1029
+ groupField: groupField,
1030
+ onScroll: this.onScroll
959
1031
  }, this.v3 ? function () {
960
1032
  return [renderScrollElement.call(_this2)];
961
1033
  } : [renderScrollElement.call(_this2)])
@@ -977,6 +1049,7 @@ var MultiSelectVue2 = {
977
1049
  dataItems = _c === void 0 ? [] : _c;
978
1050
  var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
979
1051
  var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
1052
+ var groupStickyHeaderTemplate = templateRendering.call(this, this.$props.groupStickyHeaderItemRender, getListeners.call(this));
980
1053
  var header = getTemplate.call(this, {
981
1054
  h: h,
982
1055
  template: headerTemplate
@@ -1011,6 +1084,9 @@ var MultiSelectVue2 = {
1011
1084
  float: 'right'
1012
1085
  }
1013
1086
  })])]);
1087
+ if (this.group === undefined && this.$props.groupField !== undefined) {
1088
+ this.group = getItemValue(dataItems[0], this.$props.groupField);
1089
+ }
1014
1090
  return (
1015
1091
  // @ts-ignore function children
1016
1092
  h(ListContainer, {
@@ -1048,12 +1124,26 @@ var MultiSelectVue2 = {
1048
1124
  }, this.v3 ? function () {
1049
1125
  return [header && h("div", {
1050
1126
  "class": "k-list-header"
1051
- }, [header]), customItem, renderList.call(_this3), footer && h("div", {
1127
+ }, [header]), customItem, _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
1128
+ group: _this3.group,
1129
+ attrs: _this3.v3 ? undefined : {
1130
+ group: _this3.group,
1131
+ render: groupStickyHeaderTemplate
1132
+ },
1133
+ render: groupStickyHeaderTemplate
1134
+ }), renderList.call(_this3), footer && h("div", {
1052
1135
  "class": "k-list-footer"
1053
1136
  }, [footer]), virtual && header];
1054
1137
  } : [header && h("div", {
1055
1138
  "class": "k-list-header"
1056
- }, [header]), customItem, renderList.call(_this3), footer && h("div", {
1139
+ }, [header]), customItem, _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
1140
+ group: _this3.group,
1141
+ attrs: _this3.v3 ? undefined : {
1142
+ group: _this3.group,
1143
+ render: groupStickyHeaderTemplate
1144
+ },
1145
+ render: groupStickyHeaderTemplate
1146
+ }), renderList.call(_this3), footer && h("div", {
1057
1147
  "class": "k-list-footer"
1058
1148
  }, [footer]), virtual && header])
1059
1149
  );
@@ -263,4 +263,16 @@ export interface MultiSelectProps extends FormComponentProps {
263
263
  * @default `solid`
264
264
  */
265
265
  fillMode?: null | 'solid' | 'outline' | 'flat' | string;
266
+ /**
267
+ * Sets the data item field that represents the start of a group. Applicable to objects data.
268
+ */
269
+ groupField?: string;
270
+ /**
271
+ * Fires when a MultiSelect group header item is about to be rendered. Used to override the default appearance of the group's headers.
272
+ */
273
+ groupHeaderItemRender?: any;
274
+ /**
275
+ * Fires when a MultiSelect sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
276
+ */
277
+ groupStickyHeaderItemRender?: any;
266
278
  }
@@ -82,4 +82,6 @@ export default class DropDownBase {
82
82
  triggerOnPageChange(state: InternalState, skip: number, take: number): void;
83
83
  triggerPageChangeCornerItems(item: any, state: InternalState): void;
84
84
  scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void;
85
+ getGroupedDataModernMode: (data: any[], groupField: string) => any[];
86
+ resetGroupStickyHeader: (groupName: string, that: any) => void;
85
87
  }
@@ -113,6 +113,26 @@ var DropDownBase = /** @class */function () {
113
113
  return vs.enabled = true;
114
114
  }, 10);
115
115
  };
116
+ this.getGroupedDataModernMode = function (data, groupField) {
117
+ var newData = [];
118
+ data.forEach(function (el, index) {
119
+ var _a;
120
+ if (data[index - 1] && el[groupField] !== data[index - 1][groupField]) {
121
+ newData.push((_a = {}, _a[groupField] = el[groupField], _a));
122
+ newData.push(data[index]);
123
+ } else {
124
+ newData.push(data[index]);
125
+ }
126
+ });
127
+ return newData;
128
+ };
129
+ this.resetGroupStickyHeader = function (groupName, that) {
130
+ var state = _this.initState();
131
+ if (groupName !== that.group && that.state) {
132
+ that.state.data.group = groupName;
133
+ _this.applyState(state);
134
+ }
135
+ };
116
136
  validatePackage(packageMetadata);
117
137
  this.listBoxId = guid();
118
138
  this.guid = guid();
@@ -0,0 +1,29 @@
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
+ /**
7
+ * Represents the props of the GroupStickyHeader component.
8
+ */
9
+ export interface GroupStickyHeaderProps {
10
+ /**
11
+ * The group that will be rendered.
12
+ */
13
+ group?: string;
14
+ /**
15
+ * Fires when a sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
16
+ */
17
+ render?: any;
18
+ }
19
+ export interface GroupStickyHeaderAll extends Vue2type {
20
+ }
21
+ /**
22
+ * @hidden
23
+ */
24
+ declare let GroupStickyHeaderVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GroupStickyHeaderProps>>;
25
+ /**
26
+ * @hidden
27
+ */
28
+ declare const GroupStickyHeader: DefineComponent<GroupStickyHeaderProps, any, {}, {}, {}, {}, {}, {}, string, GroupStickyHeaderProps, GroupStickyHeaderProps, {}>;
29
+ export { GroupStickyHeader, GroupStickyHeaderVue2 };
@@ -0,0 +1,59 @@
1
+ var __assign = this && this.__assign || function () {
2
+ __assign = Object.assign || function (t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) {
6
+ if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
7
+ }
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ // @ts-ignore
14
+ import * as Vue from 'vue';
15
+ var allVue = Vue;
16
+ var gh = allVue.h;
17
+ var isV3 = allVue.version && allVue.version[0] === '3';
18
+ var ref = allVue.ref;
19
+ import { getTemplate } from '@progress/kendo-vue-common';
20
+ /**
21
+ * @hidden
22
+ */
23
+ var GroupStickyHeaderVue2 = {
24
+ name: 'KendoGroupStickyHeader',
25
+ props: {
26
+ group: String,
27
+ render: Object
28
+ },
29
+ // @ts-ignore
30
+ setup: !isV3 ? undefined : function () {
31
+ var v3 = !!isV3;
32
+ return {
33
+ v3: v3
34
+ };
35
+ },
36
+ // @ts-ignore
37
+ render: function render(createElement) {
38
+ var h = gh || createElement;
39
+ var _a = this.$props,
40
+ group = _a.group,
41
+ render = _a.render;
42
+ var defaulGroupStickyHeader = h("div", {
43
+ "class": "k-list-group-sticky-header"
44
+ }, [h("div", {
45
+ "class": "k-list-header-text"
46
+ }, [group])]);
47
+ return getTemplate.call(this, {
48
+ h: h,
49
+ template: render,
50
+ defaultRendering: defaulGroupStickyHeader,
51
+ additionalProps: __assign({}, this.$props)
52
+ });
53
+ }
54
+ };
55
+ /**
56
+ * @hidden
57
+ */
58
+ var GroupStickyHeader = GroupStickyHeaderVue2;
59
+ export { GroupStickyHeader, GroupStickyHeaderVue2 };
@@ -23,8 +23,10 @@ export interface ListProps {
23
23
  highlightSelected?: boolean;
24
24
  onClick?: (index: number, event: any) => void;
25
25
  itemRender?: any;
26
+ groupHeaderItemRender?: any;
26
27
  noDataRender?: any;
27
28
  scroller?: boolean;
29
+ groupField: string;
28
30
  }
29
31
  /**
30
32
  * @hidden
@@ -6,7 +6,8 @@ var isV3 = allVue.version && allVue.version[0] === '3';
6
6
  var ref = allVue.ref;
7
7
  var inject = allVue.inject;
8
8
  import { ListItem } from './ListItem.js';
9
- import { areSame } from './utils.js';
9
+ import { ListGroupItem } from './ListGroupItem.js';
10
+ import { areSame, getItemValue } from './utils.js';
10
11
  import { getTemplate, getDefaultSlots, setRef, getRef } from '@progress/kendo-vue-common';
11
12
  import { provideLocalizationService } from '@progress/kendo-vue-intl';
12
13
  import { messages, nodata } from '../messages/main.js';
@@ -38,8 +39,10 @@ var ListVue2 = {
38
39
  default: true
39
40
  },
40
41
  itemRender: [String, Function, Object],
42
+ groupHeaderItemRender: [String, Function, Object],
41
43
  noDataRender: [String, Function, Object],
42
- scroller: Boolean
44
+ scroller: Boolean,
45
+ groupField: String
43
46
  },
44
47
  inject: {
45
48
  kendoLocalizationService: {
@@ -101,39 +104,64 @@ var ListVue2 = {
101
104
  focusedIndex = _a.focusedIndex,
102
105
  highlightSelected = _a.highlightSelected,
103
106
  value = _a.value,
104
- itemRender = _a.itemRender;
107
+ groupField = _a.groupField,
108
+ itemRender = _a.itemRender,
109
+ groupHeaderItemRender = _a.groupHeaderItemRender,
110
+ dataItems = _a.dataItems;
105
111
  var isArray = Array.isArray(value);
106
- return this.$props.dataItems.map(function (item, index) {
112
+ var groupCounter = 0;
113
+ return dataItems.map(function (item, index) {
107
114
  var realIndex = skip + index;
108
115
  var selected = highlightSelected && (!isArray && areSame(item, value, valueField) || isArray && value.findIndex(function (i) {
109
116
  return areSame(i, item, valueField);
110
117
  }) !== -1);
111
- return (
112
- // @ts-ignore
113
- h(ListItem, {
118
+ var group = undefined;
119
+ var current, previous;
120
+ if (index > 0 && groupField !== undefined) {
121
+ current = getItemValue(item, groupField);
122
+ previous = getItemValue(dataItems[index - 1], groupField);
123
+ if (current && previous && current !== previous !== undefined) {
124
+ group = current;
125
+ }
126
+ }
127
+ if (group !== undefined && Object.keys(item).length === 1) {
128
+ groupCounter += 1;
129
+ }
130
+ return group !== undefined && item[groupField] !== undefined && Object.keys(item).length === 1 ? h(ListGroupItem, {
131
+ id: "option-".concat(optionsGuid, "-").concat(realIndex),
132
+ attrs: this.v3 ? undefined : {
133
+ id: "option-".concat(optionsGuid, "-").concat(realIndex),
134
+ group: group,
135
+ render: groupHeaderItemRender
136
+ },
137
+ key: realIndex + '-group-item',
138
+ group: group,
139
+ render: groupHeaderItemRender
140
+ }) : h(ListItem, {
141
+ id: "option-".concat(optionsGuid, "-").concat(realIndex),
142
+ attrs: this.v3 ? undefined : {
114
143
  id: "option-".concat(optionsGuid, "-").concat(realIndex),
115
- attrs: this.v3 ? undefined : {
116
- id: "option-".concat(optionsGuid, "-").concat(realIndex),
117
- dataItem: item,
118
- selected: selected,
119
- focused: focusedIndex === index,
120
- index: realIndex,
121
- textField: textField,
122
- render: itemRender
123
- },
124
144
  dataItem: item,
125
145
  selected: selected,
126
- focused: focusedIndex === index,
127
- index: realIndex,
128
- key: realIndex,
129
- onItemclick: this.handleClick,
130
- on: this.v3 ? undefined : {
131
- "itemclick": this.handleClick
132
- },
146
+ focused: focusedIndex === realIndex - groupCounter,
147
+ index: realIndex - groupCounter,
133
148
  textField: textField,
149
+ group: group,
134
150
  render: itemRender
135
- })
136
- );
151
+ },
152
+ dataItem: item,
153
+ selected: selected,
154
+ focused: focusedIndex === realIndex - groupCounter,
155
+ index: realIndex - groupCounter,
156
+ key: realIndex - groupCounter,
157
+ onItemclick: this.handleClick,
158
+ on: this.v3 ? undefined : {
159
+ "itemclick": this.handleClick
160
+ },
161
+ textField: textField,
162
+ group: group,
163
+ render: itemRender
164
+ });
137
165
  }, this);
138
166
  };
139
167
  var items = renderItems.call(this);
@@ -0,0 +1,41 @@
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
+ /**
7
+ * Represents the props of the ListItem component.
8
+ */
9
+ export interface ListGroupItemProps {
10
+ /**
11
+ * Specifies the id that will be added to the group header item element.
12
+ */
13
+ id?: string;
14
+ /**
15
+ * The group that will be rendered.
16
+ */
17
+ group?: string;
18
+ /**
19
+ * @hidden
20
+ */
21
+ virtual?: boolean;
22
+ /**
23
+ * Fires when the group header item is about to be rendered. Used to override the default appearance of the group header item.
24
+ */
25
+ render?: any;
26
+ }
27
+ /**
28
+ * @hidden
29
+ */
30
+ export interface ListItemAll extends Vue2type {
31
+ itemClass: object;
32
+ }
33
+ /**
34
+ * @hidden
35
+ */
36
+ declare let ListGroupItemVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListItemAll>, {}, RecordPropsDefinition<ListGroupItemProps>>;
37
+ /**
38
+ * @hidden
39
+ */
40
+ declare const ListGroupItem: DefineComponent<ListGroupItemProps, any, {}, {}, {}, {}, {}, {}, string, ListGroupItemProps, ListGroupItemProps, {}>;
41
+ export { ListGroupItem, ListGroupItemVue2 };
@@ -0,0 +1,71 @@
1
+ var __assign = this && this.__assign || function () {
2
+ __assign = Object.assign || function (t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) {
6
+ if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
7
+ }
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ // @ts-ignore
14
+ import * as Vue from 'vue';
15
+ var allVue = Vue;
16
+ var gh = allVue.h;
17
+ var isV3 = allVue.version && allVue.version[0] === '3';
18
+ import { getTemplate } from '@progress/kendo-vue-common';
19
+ /**
20
+ * @hidden
21
+ */
22
+ var ListGroupItemVue2 = {
23
+ name: 'KendoListItem',
24
+ inheritAttrs: false,
25
+ props: {
26
+ id: String,
27
+ group: String,
28
+ render: Object
29
+ },
30
+ // @ts-ignore
31
+ setup: !isV3 ? undefined : function () {
32
+ var v3 = !!isV3;
33
+ return {
34
+ v3: v3
35
+ };
36
+ },
37
+ // @ts-ignore
38
+ render: function render(createElement) {
39
+ var h = gh || createElement;
40
+ var _a = this.$props,
41
+ id = _a.id,
42
+ group = _a.group,
43
+ virtual = _a.virtual,
44
+ renderer = _a.render;
45
+ var defaultRendering = h("li", {
46
+ id: id,
47
+ attrs: this.v3 ? undefined : {
48
+ id: id,
49
+ role: "group"
50
+ },
51
+ role: "group",
52
+ "class": 'k-list-group-item',
53
+ style: {
54
+ position: virtual ? 'relative' : 'unset'
55
+ }
56
+ }, [h("span", {
57
+ "class": !renderer ? 'k-list-item-text' : undefined
58
+ }, [group])]);
59
+ return getTemplate.call(this, {
60
+ h: h,
61
+ template: this.$props.render,
62
+ defaultRendering: defaultRendering,
63
+ additionalProps: __assign({}, this.$props)
64
+ });
65
+ }
66
+ };
67
+ /**
68
+ * @hidden
69
+ */
70
+ var ListGroupItem = ListGroupItemVue2;
71
+ export { ListGroupItem, ListGroupItemVue2 };
@@ -92,6 +92,7 @@ export interface DropDownStateBase {
92
92
  value?: any;
93
93
  focused?: boolean;
94
94
  opened?: boolean;
95
+ group?: string;
95
96
  }
96
97
  /**
97
98
  * @hidden
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-vue-dropdowns',
6
6
  productName: 'Kendo UI for Vue',
7
7
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
8
- publishDate: 1684822401,
8
+ publishDate: 1684827665,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
11
11
  };