@progress/kendo-vue-dropdowns 2.8.0-dev.202201121019 → 3.0.0-dev.202201170830
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 +1 -1
- package/dist/es/ComboBox/ComboBox.js +21 -38
- package/dist/es/DropDownList/DropDownList.js +37 -39
- package/dist/es/MultiSelect/MultiSelect.js +29 -38
- package/dist/es/common/DropDownBase.js +5 -2
- package/dist/es/common/List.d.ts +2 -0
- package/dist/es/common/List.js +17 -3
- package/dist/es/common/ListDefaultItem.js +3 -0
- package/dist/es/common/ListFilter.d.ts +3 -0
- package/dist/es/common/ListFilter.js +41 -2
- package/dist/es/common/ListItem.js +3 -0
- package/dist/es/common/VirtualScroll.js +6 -4
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/AutoComplete/AutoComplete.js +1 -1
- package/dist/npm/ComboBox/ComboBox.js +21 -38
- package/dist/npm/DropDownList/DropDownList.js +37 -39
- package/dist/npm/MultiSelect/MultiSelect.js +29 -38
- package/dist/npm/common/DropDownBase.js +5 -2
- package/dist/npm/common/List.d.ts +2 -0
- package/dist/npm/common/List.js +16 -2
- package/dist/npm/common/ListDefaultItem.js +3 -0
- package/dist/npm/common/ListFilter.d.ts +3 -0
- package/dist/npm/common/ListFilter.js +43 -2
- package/dist/npm/common/ListItem.js +3 -0
- package/dist/npm/common/VirtualScroll.js +6 -4
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +5 -5
|
@@ -244,7 +244,6 @@ var ComboBoxVue2 = {
|
|
|
244
244
|
var closing = prevOpened && !opened;
|
|
245
245
|
var list = this.$refs.list;
|
|
246
246
|
var scrollElement = this.$refs.scrollElement;
|
|
247
|
-
var scroller = this.$refs.scroller;
|
|
248
247
|
var selectedItem = this.computedValue();
|
|
249
248
|
this.valueOnDidUpdate = selectedItem;
|
|
250
249
|
|
|
@@ -259,8 +258,9 @@ var ComboBoxVue2 = {
|
|
|
259
258
|
this.base.vs.scrollElement = scrollElement;
|
|
260
259
|
}
|
|
261
260
|
|
|
262
|
-
if (
|
|
263
|
-
|
|
261
|
+
if (list && dataItems.length) {
|
|
262
|
+
// @ts-ignore
|
|
263
|
+
this.base.vs.scrollerRef(list.$el);
|
|
264
264
|
} // @ts-ignore
|
|
265
265
|
|
|
266
266
|
|
|
@@ -333,7 +333,7 @@ var ComboBoxVue2 = {
|
|
|
333
333
|
return {
|
|
334
334
|
'k-floating-label-container': true,
|
|
335
335
|
'k-focus': this.currentFocused,
|
|
336
|
-
'k-empty': !this.computedValue(),
|
|
336
|
+
'k-state-empty': !this.computedValue(),
|
|
337
337
|
'k-invalid': !isValid && isValid !== undefined,
|
|
338
338
|
'k-rtl': this.$props.dir === 'rtl'
|
|
339
339
|
};
|
|
@@ -763,6 +763,8 @@ var ComboBoxVue2 = {
|
|
|
763
763
|
}
|
|
764
764
|
|
|
765
765
|
var renderList = function renderList() {
|
|
766
|
+
var _this2 = this;
|
|
767
|
+
|
|
766
768
|
var _a = this.$props,
|
|
767
769
|
dataItemKey = _a.dataItemKey,
|
|
768
770
|
_b = _a.dataItems,
|
|
@@ -781,7 +783,7 @@ var ComboBoxVue2 = {
|
|
|
781
783
|
var translate = "translateY(" + vs.translate + "px)";
|
|
782
784
|
var focusedIndex = opened ? this.getFocusedIndex() : undefined;
|
|
783
785
|
var value = utils_1.isPresent(text) && text !== selectedItemText ? null : this.computedValue();
|
|
784
|
-
return (// @ts-ignore
|
|
786
|
+
return (// @ts-ignore function children
|
|
785
787
|
h(List_1.List, {
|
|
786
788
|
id: base.listBoxId,
|
|
787
789
|
attrs: this.v3 ? undefined : {
|
|
@@ -793,12 +795,8 @@ var ComboBoxVue2 = {
|
|
|
793
795
|
textField: textField,
|
|
794
796
|
valueField: dataItemKey,
|
|
795
797
|
optionsGuid: base.guid,
|
|
796
|
-
wrapperStyle:
|
|
797
|
-
maxHeight: popupSettings.height
|
|
798
|
-
overflowY: 'scroll'
|
|
799
|
-
} : {
|
|
800
|
-
float: 'left',
|
|
801
|
-
width: '100%'
|
|
798
|
+
wrapperStyle: {
|
|
799
|
+
maxHeight: popupSettings.height
|
|
802
800
|
},
|
|
803
801
|
wrapperCssClass: 'k-list-content',
|
|
804
802
|
listStyle: vs.enabled ? {
|
|
@@ -816,12 +814,8 @@ var ComboBoxVue2 = {
|
|
|
816
814
|
valueField: dataItemKey,
|
|
817
815
|
optionsGuid: base.guid,
|
|
818
816
|
ref: 'list',
|
|
819
|
-
wrapperStyle:
|
|
820
|
-
maxHeight: popupSettings.height
|
|
821
|
-
overflowY: 'scroll'
|
|
822
|
-
} : {
|
|
823
|
-
float: 'left',
|
|
824
|
-
width: '100%'
|
|
817
|
+
wrapperStyle: {
|
|
818
|
+
maxHeight: popupSettings.height
|
|
825
819
|
},
|
|
826
820
|
wrapperCssClass: 'k-list-content',
|
|
827
821
|
listStyle: vs.enabled ? {
|
|
@@ -831,27 +825,16 @@ var ComboBoxVue2 = {
|
|
|
831
825
|
skip: skip,
|
|
832
826
|
onListclick: this.handleItemClick,
|
|
833
827
|
on: this.v3 ? undefined : {
|
|
834
|
-
"listclick": this.handleItemClick
|
|
828
|
+
"listclick": this.handleItemClick,
|
|
829
|
+
"scroll": vs.scrollHandler
|
|
835
830
|
},
|
|
836
831
|
itemRender: itemRender,
|
|
837
|
-
noDataRender: listNoDataRender
|
|
838
|
-
|
|
832
|
+
noDataRender: listNoDataRender,
|
|
833
|
+
onScroll: vs.scrollHandler
|
|
834
|
+
}, this.v3 ? function () {
|
|
835
|
+
return [renderScrollElement.call(_this2)];
|
|
836
|
+
} : [renderScrollElement.call(_this2)])
|
|
839
837
|
);
|
|
840
|
-
}; // Common rendering
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
var renderScrollWrapper = function renderScrollWrapper(children) {
|
|
844
|
-
return vs.enabled ? h("div", {
|
|
845
|
-
onScroll: vs.scrollHandler,
|
|
846
|
-
on: this.v3 ? undefined : {
|
|
847
|
-
"scroll": vs.scrollHandler
|
|
848
|
-
},
|
|
849
|
-
ref: 'scroller',
|
|
850
|
-
style: {
|
|
851
|
-
height: popupSettings.height,
|
|
852
|
-
overflowY: 'scroll'
|
|
853
|
-
}
|
|
854
|
-
}, [children]) : children;
|
|
855
838
|
};
|
|
856
839
|
|
|
857
840
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -862,7 +845,7 @@ var ComboBoxVue2 = {
|
|
|
862
845
|
};
|
|
863
846
|
|
|
864
847
|
var renderListContainer = function renderListContainer() {
|
|
865
|
-
var
|
|
848
|
+
var _this3 = this;
|
|
866
849
|
|
|
867
850
|
var _a;
|
|
868
851
|
|
|
@@ -913,12 +896,12 @@ var ComboBoxVue2 = {
|
|
|
913
896
|
}, this.v3 ? function () {
|
|
914
897
|
return [header && h("div", {
|
|
915
898
|
"class": "k-list-header"
|
|
916
|
-
}, [header]),
|
|
899
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
917
900
|
"class": "k-list-footer"
|
|
918
901
|
}, [footer])];
|
|
919
902
|
} : [header && h("div", {
|
|
920
903
|
"class": "k-list-header"
|
|
921
|
-
}, [header]),
|
|
904
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
922
905
|
"class": "k-list-footer"
|
|
923
906
|
}, [footer])])
|
|
924
907
|
);
|
|
@@ -283,8 +283,9 @@ var DropDownListVue2 = {
|
|
|
283
283
|
this.filterInput = filterInput;
|
|
284
284
|
}
|
|
285
285
|
|
|
286
|
-
if (
|
|
287
|
-
|
|
286
|
+
if (list && dataItems.length) {
|
|
287
|
+
// @ts-ignore
|
|
288
|
+
this.base.vs.scrollerRef(list.$el);
|
|
288
289
|
}
|
|
289
290
|
|
|
290
291
|
if (!this.$props.popupSettings.animate) {
|
|
@@ -348,7 +349,7 @@ var DropDownListVue2 = {
|
|
|
348
349
|
return {
|
|
349
350
|
'k-floating-label-container': true,
|
|
350
351
|
'k-focus': this.currentFocused,
|
|
351
|
-
'k-empty': !this.computedValue(),
|
|
352
|
+
'k-state-empty': !this.computedValue(),
|
|
352
353
|
'k-invalid': !isValid && isValid !== undefined,
|
|
353
354
|
'k-rtl': this.$props.dir === 'rtl'
|
|
354
355
|
};
|
|
@@ -843,12 +844,14 @@ var DropDownListVue2 = {
|
|
|
843
844
|
};
|
|
844
845
|
|
|
845
846
|
var renderList = function renderList() {
|
|
847
|
+
var _this2 = this;
|
|
848
|
+
|
|
846
849
|
var textField = this.$props.textField;
|
|
847
850
|
var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
|
|
848
851
|
var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
|
|
849
852
|
var skip = virtual.skip;
|
|
850
853
|
var translate = "translateY(" + vs.translate + "px)";
|
|
851
|
-
return (// @ts-ignore
|
|
854
|
+
return (// @ts-ignore function children
|
|
852
855
|
h(List_1.List, {
|
|
853
856
|
id: this.base.listBoxId,
|
|
854
857
|
attrs: this.v3 ? undefined : {
|
|
@@ -860,12 +863,8 @@ var DropDownListVue2 = {
|
|
|
860
863
|
textField: textField,
|
|
861
864
|
valueField: dataItemKey,
|
|
862
865
|
optionsGuid: this.base.guid,
|
|
863
|
-
wrapperStyle:
|
|
864
|
-
maxHeight: popupSettings.height
|
|
865
|
-
overflowY: 'scroll'
|
|
866
|
-
} : {
|
|
867
|
-
float: 'left',
|
|
868
|
-
width: '100%'
|
|
866
|
+
wrapperStyle: {
|
|
867
|
+
maxHeight: popupSettings.height
|
|
869
868
|
},
|
|
870
869
|
wrapperCssClass: 'k-list-content',
|
|
871
870
|
listStyle: vs.enabled ? {
|
|
@@ -883,12 +882,8 @@ var DropDownListVue2 = {
|
|
|
883
882
|
valueField: dataItemKey,
|
|
884
883
|
optionsGuid: this.base.guid,
|
|
885
884
|
ref: 'list',
|
|
886
|
-
wrapperStyle:
|
|
887
|
-
maxHeight: popupSettings.height
|
|
888
|
-
overflowY: 'scroll'
|
|
889
|
-
} : {
|
|
890
|
-
float: 'left',
|
|
891
|
-
width: '100%'
|
|
885
|
+
wrapperStyle: {
|
|
886
|
+
maxHeight: popupSettings.height
|
|
892
887
|
},
|
|
893
888
|
wrapperCssClass: 'k-list-content',
|
|
894
889
|
listStyle: vs.enabled ? {
|
|
@@ -898,11 +893,15 @@ var DropDownListVue2 = {
|
|
|
898
893
|
skip: skip,
|
|
899
894
|
onListclick: this.handleItemClick,
|
|
900
895
|
on: this.v3 ? undefined : {
|
|
901
|
-
"listclick": this.handleItemClick
|
|
896
|
+
"listclick": this.handleItemClick,
|
|
897
|
+
"scroll": vs.scrollHandler
|
|
902
898
|
},
|
|
903
899
|
itemRender: itemRender,
|
|
904
|
-
noDataRender: listNoDataRender
|
|
905
|
-
|
|
900
|
+
noDataRender: listNoDataRender,
|
|
901
|
+
onScroll: vs.scrollHandler
|
|
902
|
+
}, this.v3 ? function () {
|
|
903
|
+
return [renderScrollElement.call(_this2)];
|
|
904
|
+
} : [renderScrollElement.call(_this2)])
|
|
906
905
|
);
|
|
907
906
|
};
|
|
908
907
|
|
|
@@ -912,7 +911,10 @@ var DropDownListVue2 = {
|
|
|
912
911
|
h(ListFilter_1.ListFilter, {
|
|
913
912
|
value: filterText,
|
|
914
913
|
attrs: this.v3 ? undefined : {
|
|
915
|
-
value: filterText
|
|
914
|
+
value: filterText,
|
|
915
|
+
size: this.$props.size,
|
|
916
|
+
rounded: this.$props.rounded,
|
|
917
|
+
fillMode: this.$props.fillMode
|
|
916
918
|
},
|
|
917
919
|
ref: 'filterInput',
|
|
918
920
|
onChange: this.handleListFilterChange,
|
|
@@ -920,23 +922,11 @@ var DropDownListVue2 = {
|
|
|
920
922
|
"change": this.handleListFilterChange,
|
|
921
923
|
"keydown": this.handleKeyDown
|
|
922
924
|
},
|
|
923
|
-
onKeydown: this.handleKeyDown
|
|
925
|
+
onKeydown: this.handleKeyDown,
|
|
926
|
+
size: this.$props.size,
|
|
927
|
+
rounded: this.$props.rounded,
|
|
928
|
+
fillMode: this.$props.fillMode
|
|
924
929
|
});
|
|
925
|
-
}; // Common rendering
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
var renderScrollWrapper = function renderScrollWrapper(children) {
|
|
929
|
-
return vs.enabled ? h("div", {
|
|
930
|
-
onScroll: vs.scrollHandler,
|
|
931
|
-
on: this.v3 ? undefined : {
|
|
932
|
-
"scroll": vs.scrollHandler
|
|
933
|
-
},
|
|
934
|
-
ref: 'scroller',
|
|
935
|
-
style: {
|
|
936
|
-
height: popupSettings.height,
|
|
937
|
-
overflowY: 'scroll'
|
|
938
|
-
}
|
|
939
|
-
}, [children]) : children;
|
|
940
930
|
};
|
|
941
931
|
|
|
942
932
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -947,7 +937,7 @@ var DropDownListVue2 = {
|
|
|
947
937
|
};
|
|
948
938
|
|
|
949
939
|
var renderListContainer = function renderListContainer() {
|
|
950
|
-
var
|
|
940
|
+
var _this3 = this;
|
|
951
941
|
|
|
952
942
|
var _a;
|
|
953
943
|
|
|
@@ -996,8 +986,16 @@ var DropDownListVue2 = {
|
|
|
996
986
|
onClose: this.onPopupClosed,
|
|
997
987
|
onBlur: this.handleBlur
|
|
998
988
|
}, this.v3 ? function () {
|
|
999
|
-
return [renderListFilter.call(
|
|
1000
|
-
|
|
989
|
+
return [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
|
|
990
|
+
"class": "k-list-header"
|
|
991
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
992
|
+
"class": "k-list-footer"
|
|
993
|
+
}, [footer])];
|
|
994
|
+
} : [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
|
|
995
|
+
"class": "k-list-header"
|
|
996
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
997
|
+
"class": "k-list-footer"
|
|
998
|
+
}, [footer])])
|
|
1001
999
|
);
|
|
1002
1000
|
};
|
|
1003
1001
|
|
|
@@ -219,7 +219,7 @@ var MultiSelectVue2 = {
|
|
|
219
219
|
return {
|
|
220
220
|
'k-floating-label-container': true,
|
|
221
221
|
'k-focus': this.currentFocused,
|
|
222
|
-
'k-empty': !(editorValue && editorValue !== 0),
|
|
222
|
+
'k-state-empty': !(editorValue && editorValue !== 0),
|
|
223
223
|
'k-invalid': !isValid && isValid !== undefined,
|
|
224
224
|
'k-rtl': this.$props.dir === 'rtl'
|
|
225
225
|
};
|
|
@@ -278,7 +278,6 @@ var MultiSelectVue2 = {
|
|
|
278
278
|
}, this.$props.popupSettings);
|
|
279
279
|
var list = this.$refs.list;
|
|
280
280
|
var scrollElement = this.$refs.scrollElement;
|
|
281
|
-
var scroller = this.$refs.scroller;
|
|
282
281
|
|
|
283
282
|
if (list) {
|
|
284
283
|
// @ts-ignore
|
|
@@ -291,8 +290,9 @@ var MultiSelectVue2 = {
|
|
|
291
290
|
this.base.vs.scrollElement = scrollElement;
|
|
292
291
|
}
|
|
293
292
|
|
|
294
|
-
if (
|
|
295
|
-
|
|
293
|
+
if (list && this.dataItems.length) {
|
|
294
|
+
// @ts-ignore
|
|
295
|
+
this.base.vs.scrollerRef(list.$el);
|
|
296
296
|
}
|
|
297
297
|
|
|
298
298
|
if (!popupSettings.animate && closing) {
|
|
@@ -1004,6 +1004,8 @@ var MultiSelectVue2 = {
|
|
|
1004
1004
|
};
|
|
1005
1005
|
|
|
1006
1006
|
var renderList = function renderList() {
|
|
1007
|
+
var _this2 = this;
|
|
1008
|
+
|
|
1007
1009
|
var _a = this.$props.dataItems,
|
|
1008
1010
|
dataItems = _a === void 0 ? [] : _a;
|
|
1009
1011
|
var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
|
|
@@ -1012,7 +1014,7 @@ var MultiSelectVue2 = {
|
|
|
1012
1014
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
1013
1015
|
var focusedIndex = this.getFocusedState().focusedIndex;
|
|
1014
1016
|
var translate = "translateY(" + vs.translate + "px)";
|
|
1015
|
-
return (// @ts-ignore
|
|
1017
|
+
return (// @ts-ignore function children
|
|
1016
1018
|
h(List_1.List, {
|
|
1017
1019
|
id: this.base.listBoxId,
|
|
1018
1020
|
attrs: this.v3 ? undefined : {
|
|
@@ -1024,12 +1026,8 @@ var MultiSelectVue2 = {
|
|
|
1024
1026
|
textField: textField,
|
|
1025
1027
|
valueField: dataItemKey,
|
|
1026
1028
|
optionsGuid: this.base.guid,
|
|
1027
|
-
wrapperStyle:
|
|
1028
|
-
|
|
1029
|
-
width: '100%'
|
|
1030
|
-
} : {
|
|
1031
|
-
maxHeight: popupSettings.height,
|
|
1032
|
-
overflowY: 'scroll'
|
|
1029
|
+
wrapperStyle: {
|
|
1030
|
+
maxHeight: popupSettings.height
|
|
1033
1031
|
},
|
|
1034
1032
|
wrapperCssClass: 'k-list-content',
|
|
1035
1033
|
listStyle: vs.enabled ? {
|
|
@@ -1047,12 +1045,8 @@ var MultiSelectVue2 = {
|
|
|
1047
1045
|
valueField: dataItemKey,
|
|
1048
1046
|
optionsGuid: this.base.guid,
|
|
1049
1047
|
ref: 'list',
|
|
1050
|
-
wrapperStyle:
|
|
1051
|
-
|
|
1052
|
-
width: '100%'
|
|
1053
|
-
} : {
|
|
1054
|
-
maxHeight: popupSettings.height,
|
|
1055
|
-
overflowY: 'scroll'
|
|
1048
|
+
wrapperStyle: {
|
|
1049
|
+
maxHeight: popupSettings.height
|
|
1056
1050
|
},
|
|
1057
1051
|
wrapperCssClass: 'k-list-content',
|
|
1058
1052
|
listStyle: vs.enabled ? {
|
|
@@ -1062,27 +1056,16 @@ var MultiSelectVue2 = {
|
|
|
1062
1056
|
skip: skip,
|
|
1063
1057
|
onListclick: this.handleItemClick,
|
|
1064
1058
|
on: this.v3 ? undefined : {
|
|
1065
|
-
"listclick": this.handleItemClick
|
|
1059
|
+
"listclick": this.handleItemClick,
|
|
1060
|
+
"scroll": vs.scrollHandler
|
|
1066
1061
|
},
|
|
1067
1062
|
itemRender: itemRender,
|
|
1068
|
-
noDataRender: listNoDataRender
|
|
1069
|
-
|
|
1063
|
+
noDataRender: listNoDataRender,
|
|
1064
|
+
onScroll: vs.scrollHandler
|
|
1065
|
+
}, this.v3 ? function () {
|
|
1066
|
+
return [renderScrollElement.call(_this2)];
|
|
1067
|
+
} : [renderScrollElement.call(_this2)])
|
|
1070
1068
|
);
|
|
1071
|
-
}; // Common rendering
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
var renderScrollWrapper = function renderScrollWrapper(children) {
|
|
1075
|
-
return vs.enabled ? h("div", {
|
|
1076
|
-
onScroll: vs.scrollHandler,
|
|
1077
|
-
on: this.v3 ? undefined : {
|
|
1078
|
-
"scroll": vs.scrollHandler
|
|
1079
|
-
},
|
|
1080
|
-
ref: 'scroller',
|
|
1081
|
-
style: {
|
|
1082
|
-
height: popupSettings.height,
|
|
1083
|
-
overflowY: 'scroll'
|
|
1084
|
-
}
|
|
1085
|
-
}, [children]) : children;
|
|
1086
1069
|
};
|
|
1087
1070
|
|
|
1088
1071
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -1093,7 +1076,7 @@ var MultiSelectVue2 = {
|
|
|
1093
1076
|
};
|
|
1094
1077
|
|
|
1095
1078
|
var renderListContainer = function renderListContainer() {
|
|
1096
|
-
var
|
|
1079
|
+
var _this3 = this;
|
|
1097
1080
|
|
|
1098
1081
|
var _a;
|
|
1099
1082
|
|
|
@@ -1171,8 +1154,16 @@ var MultiSelectVue2 = {
|
|
|
1171
1154
|
},
|
|
1172
1155
|
itemsCount: dataItems.length
|
|
1173
1156
|
}, this.v3 ? function () {
|
|
1174
|
-
return [
|
|
1175
|
-
|
|
1157
|
+
return [header && h("div", {
|
|
1158
|
+
"class": "k-list-header"
|
|
1159
|
+
}, [header]), customItem, renderList.call(_this3), footer && h("div", {
|
|
1160
|
+
"class": "k-list-footer"
|
|
1161
|
+
}, [footer]), virtual && header];
|
|
1162
|
+
} : [header && h("div", {
|
|
1163
|
+
"class": "k-list-header"
|
|
1164
|
+
}, [header]), customItem, renderList.call(_this3), footer && h("div", {
|
|
1165
|
+
"class": "k-list-footer"
|
|
1166
|
+
}, [footer]), virtual && header])
|
|
1176
1167
|
);
|
|
1177
1168
|
};
|
|
1178
1169
|
|
|
@@ -201,8 +201,11 @@ function () {
|
|
|
201
201
|
if (item && itemIndex >= 0) {
|
|
202
202
|
var vs = this.vs;
|
|
203
203
|
var scrollElement = vs.container || list.parentNode;
|
|
204
|
-
|
|
205
|
-
|
|
204
|
+
|
|
205
|
+
if (scrollElement) {
|
|
206
|
+
var virtualScroll = vsEnabled !== undefined ? vsEnabled : vs.enabled;
|
|
207
|
+
utils_1.scrollToItem(scrollElement, item.offsetHeight, itemIndex, vs.translate, virtualScroll);
|
|
208
|
+
}
|
|
206
209
|
}
|
|
207
210
|
};
|
|
208
211
|
|
|
@@ -24,12 +24,14 @@ export interface ListProps {
|
|
|
24
24
|
onClick?: (index: number, event: any) => void;
|
|
25
25
|
itemRender?: any;
|
|
26
26
|
noDataRender?: any;
|
|
27
|
+
scroller?: boolean;
|
|
27
28
|
}
|
|
28
29
|
/**
|
|
29
30
|
* @hidden
|
|
30
31
|
*/
|
|
31
32
|
export interface ListMethods extends Vue2type {
|
|
32
33
|
handleClick: (e: any) => void;
|
|
34
|
+
handleScroll: (e: any) => void;
|
|
33
35
|
}
|
|
34
36
|
/**
|
|
35
37
|
* @hidden
|
package/dist/npm/common/List.js
CHANGED
|
@@ -28,6 +28,11 @@ var messages_1 = require("../messages");
|
|
|
28
28
|
|
|
29
29
|
var ListVue2 = {
|
|
30
30
|
name: 'list',
|
|
31
|
+
// @ts-ignore
|
|
32
|
+
emits: {
|
|
33
|
+
listclick: null,
|
|
34
|
+
scroll: null
|
|
35
|
+
},
|
|
31
36
|
props: {
|
|
32
37
|
id: String,
|
|
33
38
|
show: Boolean,
|
|
@@ -46,7 +51,8 @@ var ListVue2 = {
|
|
|
46
51
|
default: true
|
|
47
52
|
},
|
|
48
53
|
itemRender: [String, Function, Object],
|
|
49
|
-
noDataRender: [String, Function, Object]
|
|
54
|
+
noDataRender: [String, Function, Object],
|
|
55
|
+
scroller: Boolean
|
|
50
56
|
},
|
|
51
57
|
inject: {
|
|
52
58
|
kendoLocalizationService: {
|
|
@@ -70,6 +76,9 @@ var ListVue2 = {
|
|
|
70
76
|
methods: {
|
|
71
77
|
handleClick: function handleClick(index, e) {
|
|
72
78
|
this.$emit('listclick', index, e);
|
|
79
|
+
},
|
|
80
|
+
handleScroll: function handleScroll(e) {
|
|
81
|
+
this.$emit('scroll', e);
|
|
73
82
|
}
|
|
74
83
|
},
|
|
75
84
|
// @ts-ignore
|
|
@@ -77,6 +86,7 @@ var ListVue2 = {
|
|
|
77
86
|
var _this = this;
|
|
78
87
|
|
|
79
88
|
var h = gh || createElement;
|
|
89
|
+
var defaultSlot = kendo_vue_common_1.getDefaultSlots(this);
|
|
80
90
|
var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
|
|
81
91
|
var _a = this.$props,
|
|
82
92
|
id = _a.id,
|
|
@@ -150,6 +160,10 @@ var ListVue2 = {
|
|
|
150
160
|
unselectable: 'on',
|
|
151
161
|
attrs: this.v3 ? undefined : {
|
|
152
162
|
unselectable: 'on'
|
|
163
|
+
},
|
|
164
|
+
onScroll: this.handleScroll,
|
|
165
|
+
on: this.v3 ? undefined : {
|
|
166
|
+
"scroll": this.handleScroll
|
|
153
167
|
}
|
|
154
168
|
}, [h("ul", {
|
|
155
169
|
id: id,
|
|
@@ -165,7 +179,7 @@ var ListVue2 = {
|
|
|
165
179
|
_this.listRef = el;
|
|
166
180
|
} : 'list',
|
|
167
181
|
style: listStyle
|
|
168
|
-
}, [items])]) : renderNoValueElement.call(this);
|
|
182
|
+
}, [items]), defaultSlot]) : renderNoValueElement.call(this);
|
|
169
183
|
}
|
|
170
184
|
};
|
|
171
185
|
exports.ListVue2 = ListVue2;
|
|
@@ -10,6 +10,9 @@ export interface ListFilterProps {
|
|
|
10
10
|
value?: string;
|
|
11
11
|
onChange?: any;
|
|
12
12
|
onKeyDown?: any;
|
|
13
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
14
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
15
|
+
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
|
|
13
16
|
}
|
|
14
17
|
/**
|
|
15
18
|
* @hidden
|
|
@@ -10,6 +10,11 @@ var Vue = require("vue");
|
|
|
10
10
|
var allVue = Vue;
|
|
11
11
|
var gh = allVue.h;
|
|
12
12
|
var ref = allVue.ref;
|
|
13
|
+
|
|
14
|
+
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
15
|
+
|
|
16
|
+
var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
|
|
17
|
+
roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
|
|
13
18
|
/**
|
|
14
19
|
* Represents the default `ListFilter` component.
|
|
15
20
|
*/
|
|
@@ -22,7 +27,41 @@ var ListFilterVue2 = {
|
|
|
22
27
|
change: null
|
|
23
28
|
},
|
|
24
29
|
props: {
|
|
25
|
-
value: String
|
|
30
|
+
value: String,
|
|
31
|
+
rounded: {
|
|
32
|
+
type: String,
|
|
33
|
+
default: 'medium',
|
|
34
|
+
validator: function validator(value) {
|
|
35
|
+
return ['small', 'medium', 'large', 'full'].includes(value);
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
fillMode: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: 'solid',
|
|
41
|
+
validator: function validator(value) {
|
|
42
|
+
return ['solid', 'flat', 'outline'].includes(value);
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
size: {
|
|
46
|
+
type: String,
|
|
47
|
+
default: 'medium',
|
|
48
|
+
validator: function validator(value) {
|
|
49
|
+
return ['small', 'medium', 'large'].includes(value);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
computed: {
|
|
54
|
+
spanClass: function spanClass() {
|
|
55
|
+
var _a;
|
|
56
|
+
|
|
57
|
+
var _b = this.$props,
|
|
58
|
+
size = _b.size,
|
|
59
|
+
rounded = _b.rounded,
|
|
60
|
+
fillMode = _b.fillMode;
|
|
61
|
+
return _a = {
|
|
62
|
+
'k-searchbox k-input': true
|
|
63
|
+
}, _a["k-input-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-input-" + fillMode] = fillMode, _a;
|
|
64
|
+
}
|
|
26
65
|
},
|
|
27
66
|
// @ts-ignore
|
|
28
67
|
setup: !gh ? undefined : function () {
|
|
@@ -52,7 +91,7 @@ var ListFilterVue2 = {
|
|
|
52
91
|
return h("span", {
|
|
53
92
|
"class": "k-list-filter"
|
|
54
93
|
}, [h("span", {
|
|
55
|
-
"class":
|
|
94
|
+
"class": this.spanClass
|
|
56
95
|
}, [h("input", {
|
|
57
96
|
ref: this.v3 ? function (el) {
|
|
58
97
|
_this.inputRef = el;
|
|
@@ -72,6 +111,8 @@ var ListFilterVue2 = {
|
|
|
72
111
|
"keydown": this.onKeyDown
|
|
73
112
|
},
|
|
74
113
|
onKeydown: this.onKeyDown
|
|
114
|
+
}), h("span", {
|
|
115
|
+
"class": "k-input-icon k-icon k-i-search"
|
|
75
116
|
})])]);
|
|
76
117
|
}
|
|
77
118
|
};
|
|
@@ -94,8 +94,9 @@ function () {
|
|
|
94
94
|
VirtualScroll.prototype.scrollToEnd = function () {
|
|
95
95
|
if (this.container && this.list) {
|
|
96
96
|
this.calcScrollElementHeight();
|
|
97
|
-
this.container.scrollTop = this.container.scrollHeight - this.container.offsetHeight;
|
|
98
|
-
|
|
97
|
+
this.container.scrollTop = this.container.scrollHeight - this.container.offsetHeight; // this.translateTo(this.container.scrollHeight - this.list.offsetHeight);
|
|
98
|
+
|
|
99
|
+
this.translateTo(this.container.scrollHeight); // - this.list.offsetHeight
|
|
99
100
|
}
|
|
100
101
|
};
|
|
101
102
|
|
|
@@ -187,8 +188,9 @@ function () {
|
|
|
187
188
|
};
|
|
188
189
|
|
|
189
190
|
VirtualScroll.prototype.validateTranslate = function (translate) {
|
|
190
|
-
translate = Math.max(0, translate);
|
|
191
|
-
|
|
191
|
+
translate = Math.max(0, translate); // translate = Math.min(this.containerHeight - this.list!.offsetHeight, translate);
|
|
192
|
+
|
|
193
|
+
translate = Math.min(this.containerHeight, translate);
|
|
192
194
|
return translate;
|
|
193
195
|
};
|
|
194
196
|
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-dropdowns',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1642407385,
|
|
12
12
|
version: '',
|
|
13
13
|
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'
|
|
14
14
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-vue-dropdowns",
|
|
3
3
|
"description": "Kendo UI for Vue Dropdowns package",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "3.0.0-dev.202201170830",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/telerik/kendo-vue.git"
|
|
@@ -43,14 +43,14 @@
|
|
|
43
43
|
"vue": "^2.6.12 || ^3.0.2"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@progress/kendo-vue-buttons": "
|
|
47
|
-
"@progress/kendo-vue-common": "
|
|
48
|
-
"@progress/kendo-vue-popup": "
|
|
46
|
+
"@progress/kendo-vue-buttons": "3.0.0-dev.202201170830",
|
|
47
|
+
"@progress/kendo-vue-common": "3.0.0-dev.202201170830",
|
|
48
|
+
"@progress/kendo-vue-popup": "3.0.0-dev.202201170830"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@progress/kendo-data-query": "^1.5.4",
|
|
52
52
|
"@progress/kendo-licensing": "^1.1.0",
|
|
53
|
-
"@progress/kendo-vue-intl": "
|
|
53
|
+
"@progress/kendo-vue-intl": "3.0.0-dev.202201170830"
|
|
54
54
|
},
|
|
55
55
|
"author": "Progress",
|
|
56
56
|
"license": "SEE LICENSE IN LICENSE.md",
|