@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.
- package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
- package/dist/es/AutoComplete/AutoComplete.js +108 -12
- 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/MultiSelect/MultiSelect.js +116 -26
- package/dist/es/MultiSelect/MultiSelectProps.d.ts +12 -0
- 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/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/package-metadata.js +1 -1
- package/dist/esm/AutoComplete/AutoComplete.js +108 -12
- 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/MultiSelect/MultiSelect.js +116 -26
- package/dist/esm/MultiSelect/MultiSelectProps.d.ts +12 -0
- 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/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/package-metadata.js +1 -1
- package/dist/npm/AutoComplete/AutoComplete.js +108 -12
- 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/MultiSelect/MultiSelect.js +116 -26
- package/dist/npm/MultiSelect/MultiSelectProps.d.ts +12 -0
- 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/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/package-metadata.js +1 -1
- 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
|
|
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 &&
|
|
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 (
|
|
281
|
-
this.
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
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
|
|
903
|
-
|
|
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
|
-
|
|
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":
|
|
1024
|
+
"scroll": this.onScroll
|
|
955
1025
|
},
|
|
956
1026
|
itemRender: itemRender,
|
|
1027
|
+
groupHeaderItemRender: groupHeaderItemRender,
|
|
957
1028
|
noDataRender: listNoDataRender,
|
|
958
|
-
|
|
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,
|
|
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,
|
|
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
|
package/dist/esm/common/List.js
CHANGED
|
@@ -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 {
|
|
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
|
-
|
|
107
|
+
groupField = _a.groupField,
|
|
108
|
+
itemRender = _a.itemRender,
|
|
109
|
+
groupHeaderItemRender = _a.groupHeaderItemRender,
|
|
110
|
+
dataItems = _a.dataItems;
|
|
105
111
|
var isArray = Array.isArray(value);
|
|
106
|
-
|
|
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
|
-
|
|
112
|
-
|
|
113
|
-
|
|
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 ===
|
|
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 };
|
|
@@ -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:
|
|
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
|
};
|