@progress/kendo-vue-dropdowns 2.8.0-dev.202201121019 → 2.8.0-dev.202201131525
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/ComboBox/ComboBox.js +14 -35
- package/dist/es/DropDownList/DropDownList.js +36 -38
- package/dist/es/MultiSelect/MultiSelect.js +28 -37
- 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/ComboBox/ComboBox.js +14 -35
- package/dist/npm/DropDownList/DropDownList.js +36 -38
- package/dist/npm/MultiSelect/MultiSelect.js +28 -37
- 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
|
@@ -227,7 +227,6 @@ var ComboBoxVue2 = {
|
|
|
227
227
|
var closing = prevOpened && !opened;
|
|
228
228
|
var list = this.$refs.list;
|
|
229
229
|
var scrollElement = this.$refs.scrollElement;
|
|
230
|
-
var scroller = this.$refs.scroller;
|
|
231
230
|
var selectedItem = this.computedValue();
|
|
232
231
|
this.valueOnDidUpdate = selectedItem;
|
|
233
232
|
|
|
@@ -242,8 +241,9 @@ var ComboBoxVue2 = {
|
|
|
242
241
|
this.base.vs.scrollElement = scrollElement;
|
|
243
242
|
}
|
|
244
243
|
|
|
245
|
-
if (
|
|
246
|
-
|
|
244
|
+
if (list && dataItems.length) {
|
|
245
|
+
// @ts-ignore
|
|
246
|
+
this.base.vs.scrollerRef(list.$el);
|
|
247
247
|
} // @ts-ignore
|
|
248
248
|
|
|
249
249
|
|
|
@@ -776,12 +776,8 @@ var ComboBoxVue2 = {
|
|
|
776
776
|
textField: textField,
|
|
777
777
|
valueField: dataItemKey,
|
|
778
778
|
optionsGuid: base.guid,
|
|
779
|
-
wrapperStyle:
|
|
780
|
-
maxHeight: popupSettings.height
|
|
781
|
-
overflowY: 'scroll'
|
|
782
|
-
} : {
|
|
783
|
-
float: 'left',
|
|
784
|
-
width: '100%'
|
|
779
|
+
wrapperStyle: {
|
|
780
|
+
maxHeight: popupSettings.height
|
|
785
781
|
},
|
|
786
782
|
wrapperCssClass: 'k-list-content',
|
|
787
783
|
listStyle: vs.enabled ? {
|
|
@@ -799,12 +795,8 @@ var ComboBoxVue2 = {
|
|
|
799
795
|
valueField: dataItemKey,
|
|
800
796
|
optionsGuid: base.guid,
|
|
801
797
|
ref: 'list',
|
|
802
|
-
wrapperStyle:
|
|
803
|
-
maxHeight: popupSettings.height
|
|
804
|
-
overflowY: 'scroll'
|
|
805
|
-
} : {
|
|
806
|
-
float: 'left',
|
|
807
|
-
width: '100%'
|
|
798
|
+
wrapperStyle: {
|
|
799
|
+
maxHeight: popupSettings.height
|
|
808
800
|
},
|
|
809
801
|
wrapperCssClass: 'k-list-content',
|
|
810
802
|
listStyle: vs.enabled ? {
|
|
@@ -814,27 +806,14 @@ var ComboBoxVue2 = {
|
|
|
814
806
|
skip: skip,
|
|
815
807
|
onListclick: this.handleItemClick,
|
|
816
808
|
on: this.v3 ? undefined : {
|
|
817
|
-
"listclick": this.handleItemClick
|
|
809
|
+
"listclick": this.handleItemClick,
|
|
810
|
+
"scroll": vs.scrollHandler
|
|
818
811
|
},
|
|
819
812
|
itemRender: itemRender,
|
|
820
|
-
noDataRender: listNoDataRender
|
|
821
|
-
|
|
813
|
+
noDataRender: listNoDataRender,
|
|
814
|
+
onScroll: vs.scrollHandler
|
|
815
|
+
}, [renderScrollElement.call(this)])
|
|
822
816
|
);
|
|
823
|
-
}; // Common rendering
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
var renderScrollWrapper = function renderScrollWrapper(children) {
|
|
827
|
-
return vs.enabled ? h("div", {
|
|
828
|
-
onScroll: vs.scrollHandler,
|
|
829
|
-
on: this.v3 ? undefined : {
|
|
830
|
-
"scroll": vs.scrollHandler
|
|
831
|
-
},
|
|
832
|
-
ref: 'scroller',
|
|
833
|
-
style: {
|
|
834
|
-
height: popupSettings.height,
|
|
835
|
-
overflowY: 'scroll'
|
|
836
|
-
}
|
|
837
|
-
}, [children]) : children;
|
|
838
817
|
};
|
|
839
818
|
|
|
840
819
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -896,12 +875,12 @@ var ComboBoxVue2 = {
|
|
|
896
875
|
}, this.v3 ? function () {
|
|
897
876
|
return [header && h("div", {
|
|
898
877
|
"class": "k-list-header"
|
|
899
|
-
}, [header]),
|
|
878
|
+
}, [header]), renderList.call(_this2), footer && h("div", {
|
|
900
879
|
"class": "k-list-footer"
|
|
901
880
|
}, [footer])];
|
|
902
881
|
} : [header && h("div", {
|
|
903
882
|
"class": "k-list-header"
|
|
904
|
-
}, [header]),
|
|
883
|
+
}, [header]), renderList.call(_this2), footer && h("div", {
|
|
905
884
|
"class": "k-list-footer"
|
|
906
885
|
}, [footer])])
|
|
907
886
|
);
|
|
@@ -266,8 +266,9 @@ var DropDownListVue2 = {
|
|
|
266
266
|
this.filterInput = filterInput;
|
|
267
267
|
}
|
|
268
268
|
|
|
269
|
-
if (
|
|
270
|
-
|
|
269
|
+
if (list && dataItems.length) {
|
|
270
|
+
// @ts-ignore
|
|
271
|
+
this.base.vs.scrollerRef(list.$el);
|
|
271
272
|
}
|
|
272
273
|
|
|
273
274
|
if (!this.$props.popupSettings.animate) {
|
|
@@ -826,12 +827,14 @@ var DropDownListVue2 = {
|
|
|
826
827
|
};
|
|
827
828
|
|
|
828
829
|
var renderList = function renderList() {
|
|
830
|
+
var _this2 = this;
|
|
831
|
+
|
|
829
832
|
var textField = this.$props.textField;
|
|
830
833
|
var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
|
|
831
834
|
var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
|
|
832
835
|
var skip = virtual.skip;
|
|
833
836
|
var translate = "translateY(" + vs.translate + "px)";
|
|
834
|
-
return (// @ts-ignore
|
|
837
|
+
return (// @ts-ignore function children
|
|
835
838
|
h(List, {
|
|
836
839
|
id: this.base.listBoxId,
|
|
837
840
|
attrs: this.v3 ? undefined : {
|
|
@@ -843,12 +846,8 @@ var DropDownListVue2 = {
|
|
|
843
846
|
textField: textField,
|
|
844
847
|
valueField: dataItemKey,
|
|
845
848
|
optionsGuid: this.base.guid,
|
|
846
|
-
wrapperStyle:
|
|
847
|
-
maxHeight: popupSettings.height
|
|
848
|
-
overflowY: 'scroll'
|
|
849
|
-
} : {
|
|
850
|
-
float: 'left',
|
|
851
|
-
width: '100%'
|
|
849
|
+
wrapperStyle: {
|
|
850
|
+
maxHeight: popupSettings.height
|
|
852
851
|
},
|
|
853
852
|
wrapperCssClass: 'k-list-content',
|
|
854
853
|
listStyle: vs.enabled ? {
|
|
@@ -866,12 +865,8 @@ var DropDownListVue2 = {
|
|
|
866
865
|
valueField: dataItemKey,
|
|
867
866
|
optionsGuid: this.base.guid,
|
|
868
867
|
ref: 'list',
|
|
869
|
-
wrapperStyle:
|
|
870
|
-
maxHeight: popupSettings.height
|
|
871
|
-
overflowY: 'scroll'
|
|
872
|
-
} : {
|
|
873
|
-
float: 'left',
|
|
874
|
-
width: '100%'
|
|
868
|
+
wrapperStyle: {
|
|
869
|
+
maxHeight: popupSettings.height
|
|
875
870
|
},
|
|
876
871
|
wrapperCssClass: 'k-list-content',
|
|
877
872
|
listStyle: vs.enabled ? {
|
|
@@ -881,11 +876,15 @@ var DropDownListVue2 = {
|
|
|
881
876
|
skip: skip,
|
|
882
877
|
onListclick: this.handleItemClick,
|
|
883
878
|
on: this.v3 ? undefined : {
|
|
884
|
-
"listclick": this.handleItemClick
|
|
879
|
+
"listclick": this.handleItemClick,
|
|
880
|
+
"scroll": vs.scrollHandler
|
|
885
881
|
},
|
|
886
882
|
itemRender: itemRender,
|
|
887
|
-
noDataRender: listNoDataRender
|
|
888
|
-
|
|
883
|
+
noDataRender: listNoDataRender,
|
|
884
|
+
onScroll: vs.scrollHandler
|
|
885
|
+
}, this.v3 ? function () {
|
|
886
|
+
return [renderScrollElement.call(_this2)];
|
|
887
|
+
} : [renderScrollElement.call(_this2)])
|
|
889
888
|
);
|
|
890
889
|
};
|
|
891
890
|
|
|
@@ -895,7 +894,10 @@ var DropDownListVue2 = {
|
|
|
895
894
|
h(ListFilter, {
|
|
896
895
|
value: filterText,
|
|
897
896
|
attrs: this.v3 ? undefined : {
|
|
898
|
-
value: filterText
|
|
897
|
+
value: filterText,
|
|
898
|
+
size: this.$props.size,
|
|
899
|
+
rounded: this.$props.rounded,
|
|
900
|
+
fillMode: this.$props.fillMode
|
|
899
901
|
},
|
|
900
902
|
ref: 'filterInput',
|
|
901
903
|
onChange: this.handleListFilterChange,
|
|
@@ -903,23 +905,11 @@ var DropDownListVue2 = {
|
|
|
903
905
|
"change": this.handleListFilterChange,
|
|
904
906
|
"keydown": this.handleKeyDown
|
|
905
907
|
},
|
|
906
|
-
onKeydown: this.handleKeyDown
|
|
908
|
+
onKeydown: this.handleKeyDown,
|
|
909
|
+
size: this.$props.size,
|
|
910
|
+
rounded: this.$props.rounded,
|
|
911
|
+
fillMode: this.$props.fillMode
|
|
907
912
|
});
|
|
908
|
-
}; // Common rendering
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
var renderScrollWrapper = function renderScrollWrapper(children) {
|
|
912
|
-
return vs.enabled ? h("div", {
|
|
913
|
-
onScroll: vs.scrollHandler,
|
|
914
|
-
on: this.v3 ? undefined : {
|
|
915
|
-
"scroll": vs.scrollHandler
|
|
916
|
-
},
|
|
917
|
-
ref: 'scroller',
|
|
918
|
-
style: {
|
|
919
|
-
height: popupSettings.height,
|
|
920
|
-
overflowY: 'scroll'
|
|
921
|
-
}
|
|
922
|
-
}, [children]) : children;
|
|
923
913
|
};
|
|
924
914
|
|
|
925
915
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -930,7 +920,7 @@ var DropDownListVue2 = {
|
|
|
930
920
|
};
|
|
931
921
|
|
|
932
922
|
var renderListContainer = function renderListContainer() {
|
|
933
|
-
var
|
|
923
|
+
var _this3 = this;
|
|
934
924
|
|
|
935
925
|
var _a;
|
|
936
926
|
|
|
@@ -979,8 +969,16 @@ var DropDownListVue2 = {
|
|
|
979
969
|
onClose: this.onPopupClosed,
|
|
980
970
|
onBlur: this.handleBlur
|
|
981
971
|
}, this.v3 ? function () {
|
|
982
|
-
return [renderListFilter.call(
|
|
983
|
-
|
|
972
|
+
return [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
|
|
973
|
+
"class": "k-list-header"
|
|
974
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
975
|
+
"class": "k-list-footer"
|
|
976
|
+
}, [footer])];
|
|
977
|
+
} : [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
|
|
978
|
+
"class": "k-list-header"
|
|
979
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
980
|
+
"class": "k-list-footer"
|
|
981
|
+
}, [footer])])
|
|
984
982
|
);
|
|
985
983
|
};
|
|
986
984
|
|
|
@@ -260,7 +260,6 @@ var MultiSelectVue2 = {
|
|
|
260
260
|
}, this.$props.popupSettings);
|
|
261
261
|
var list = this.$refs.list;
|
|
262
262
|
var scrollElement = this.$refs.scrollElement;
|
|
263
|
-
var scroller = this.$refs.scroller;
|
|
264
263
|
|
|
265
264
|
if (list) {
|
|
266
265
|
// @ts-ignore
|
|
@@ -273,8 +272,9 @@ var MultiSelectVue2 = {
|
|
|
273
272
|
this.base.vs.scrollElement = scrollElement;
|
|
274
273
|
}
|
|
275
274
|
|
|
276
|
-
if (
|
|
277
|
-
|
|
275
|
+
if (list && this.dataItems.length) {
|
|
276
|
+
// @ts-ignore
|
|
277
|
+
this.base.vs.scrollerRef(list.$el);
|
|
278
278
|
}
|
|
279
279
|
|
|
280
280
|
if (!popupSettings.animate && closing) {
|
|
@@ -986,6 +986,8 @@ var MultiSelectVue2 = {
|
|
|
986
986
|
};
|
|
987
987
|
|
|
988
988
|
var renderList = function renderList() {
|
|
989
|
+
var _this2 = this;
|
|
990
|
+
|
|
989
991
|
var _a = this.$props.dataItems,
|
|
990
992
|
dataItems = _a === void 0 ? [] : _a;
|
|
991
993
|
var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
|
|
@@ -994,7 +996,7 @@ var MultiSelectVue2 = {
|
|
|
994
996
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
995
997
|
var focusedIndex = this.getFocusedState().focusedIndex;
|
|
996
998
|
var translate = "translateY(" + vs.translate + "px)";
|
|
997
|
-
return (// @ts-ignore
|
|
999
|
+
return (// @ts-ignore function children
|
|
998
1000
|
h(List, {
|
|
999
1001
|
id: this.base.listBoxId,
|
|
1000
1002
|
attrs: this.v3 ? undefined : {
|
|
@@ -1006,12 +1008,8 @@ var MultiSelectVue2 = {
|
|
|
1006
1008
|
textField: textField,
|
|
1007
1009
|
valueField: dataItemKey,
|
|
1008
1010
|
optionsGuid: this.base.guid,
|
|
1009
|
-
wrapperStyle:
|
|
1010
|
-
|
|
1011
|
-
width: '100%'
|
|
1012
|
-
} : {
|
|
1013
|
-
maxHeight: popupSettings.height,
|
|
1014
|
-
overflowY: 'scroll'
|
|
1011
|
+
wrapperStyle: {
|
|
1012
|
+
maxHeight: popupSettings.height
|
|
1015
1013
|
},
|
|
1016
1014
|
wrapperCssClass: 'k-list-content',
|
|
1017
1015
|
listStyle: vs.enabled ? {
|
|
@@ -1029,12 +1027,8 @@ var MultiSelectVue2 = {
|
|
|
1029
1027
|
valueField: dataItemKey,
|
|
1030
1028
|
optionsGuid: this.base.guid,
|
|
1031
1029
|
ref: 'list',
|
|
1032
|
-
wrapperStyle:
|
|
1033
|
-
|
|
1034
|
-
width: '100%'
|
|
1035
|
-
} : {
|
|
1036
|
-
maxHeight: popupSettings.height,
|
|
1037
|
-
overflowY: 'scroll'
|
|
1030
|
+
wrapperStyle: {
|
|
1031
|
+
maxHeight: popupSettings.height
|
|
1038
1032
|
},
|
|
1039
1033
|
wrapperCssClass: 'k-list-content',
|
|
1040
1034
|
listStyle: vs.enabled ? {
|
|
@@ -1044,27 +1038,16 @@ var MultiSelectVue2 = {
|
|
|
1044
1038
|
skip: skip,
|
|
1045
1039
|
onListclick: this.handleItemClick,
|
|
1046
1040
|
on: this.v3 ? undefined : {
|
|
1047
|
-
"listclick": this.handleItemClick
|
|
1041
|
+
"listclick": this.handleItemClick,
|
|
1042
|
+
"scroll": vs.scrollHandler
|
|
1048
1043
|
},
|
|
1049
1044
|
itemRender: itemRender,
|
|
1050
|
-
noDataRender: listNoDataRender
|
|
1051
|
-
|
|
1045
|
+
noDataRender: listNoDataRender,
|
|
1046
|
+
onScroll: vs.scrollHandler
|
|
1047
|
+
}, this.v3 ? function () {
|
|
1048
|
+
return [renderScrollElement.call(_this2)];
|
|
1049
|
+
} : [renderScrollElement.call(_this2)])
|
|
1052
1050
|
);
|
|
1053
|
-
}; // Common rendering
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
var renderScrollWrapper = function renderScrollWrapper(children) {
|
|
1057
|
-
return vs.enabled ? h("div", {
|
|
1058
|
-
onScroll: vs.scrollHandler,
|
|
1059
|
-
on: this.v3 ? undefined : {
|
|
1060
|
-
"scroll": vs.scrollHandler
|
|
1061
|
-
},
|
|
1062
|
-
ref: 'scroller',
|
|
1063
|
-
style: {
|
|
1064
|
-
height: popupSettings.height,
|
|
1065
|
-
overflowY: 'scroll'
|
|
1066
|
-
}
|
|
1067
|
-
}, [children]) : children;
|
|
1068
1051
|
};
|
|
1069
1052
|
|
|
1070
1053
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -1075,7 +1058,7 @@ var MultiSelectVue2 = {
|
|
|
1075
1058
|
};
|
|
1076
1059
|
|
|
1077
1060
|
var renderListContainer = function renderListContainer() {
|
|
1078
|
-
var
|
|
1061
|
+
var _this3 = this;
|
|
1079
1062
|
|
|
1080
1063
|
var _a;
|
|
1081
1064
|
|
|
@@ -1153,8 +1136,16 @@ var MultiSelectVue2 = {
|
|
|
1153
1136
|
},
|
|
1154
1137
|
itemsCount: dataItems.length
|
|
1155
1138
|
}, this.v3 ? function () {
|
|
1156
|
-
return [
|
|
1157
|
-
|
|
1139
|
+
return [header && h("div", {
|
|
1140
|
+
"class": "k-list-header"
|
|
1141
|
+
}, [header]), customItem, renderList.call(_this3), footer && h("div", {
|
|
1142
|
+
"class": "k-list-footer"
|
|
1143
|
+
}, [footer]), virtual && header];
|
|
1144
|
+
} : [header && h("div", {
|
|
1145
|
+
"class": "k-list-header"
|
|
1146
|
+
}, [header]), customItem, renderList.call(_this3), footer && h("div", {
|
|
1147
|
+
"class": "k-list-footer"
|
|
1148
|
+
}, [footer]), virtual && header])
|
|
1158
1149
|
);
|
|
1159
1150
|
};
|
|
1160
1151
|
|
package/dist/es/common/List.d.ts
CHANGED
|
@@ -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/es/common/List.js
CHANGED
|
@@ -6,7 +6,7 @@ var ref = allVue.ref;
|
|
|
6
6
|
var inject = allVue.inject;
|
|
7
7
|
import { ListItem } from './ListItem';
|
|
8
8
|
import { areSame } from './utils';
|
|
9
|
-
import { getTemplate } from '@progress/kendo-vue-common';
|
|
9
|
+
import { getTemplate, getDefaultSlots } from '@progress/kendo-vue-common';
|
|
10
10
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
11
11
|
import { messages, nodata } from '../messages';
|
|
12
12
|
/**
|
|
@@ -15,6 +15,11 @@ import { messages, nodata } from '../messages';
|
|
|
15
15
|
|
|
16
16
|
var ListVue2 = {
|
|
17
17
|
name: 'list',
|
|
18
|
+
// @ts-ignore
|
|
19
|
+
emits: {
|
|
20
|
+
listclick: null,
|
|
21
|
+
scroll: null
|
|
22
|
+
},
|
|
18
23
|
props: {
|
|
19
24
|
id: String,
|
|
20
25
|
show: Boolean,
|
|
@@ -33,7 +38,8 @@ var ListVue2 = {
|
|
|
33
38
|
default: true
|
|
34
39
|
},
|
|
35
40
|
itemRender: [String, Function, Object],
|
|
36
|
-
noDataRender: [String, Function, Object]
|
|
41
|
+
noDataRender: [String, Function, Object],
|
|
42
|
+
scroller: Boolean
|
|
37
43
|
},
|
|
38
44
|
inject: {
|
|
39
45
|
kendoLocalizationService: {
|
|
@@ -57,6 +63,9 @@ var ListVue2 = {
|
|
|
57
63
|
methods: {
|
|
58
64
|
handleClick: function handleClick(index, e) {
|
|
59
65
|
this.$emit('listclick', index, e);
|
|
66
|
+
},
|
|
67
|
+
handleScroll: function handleScroll(e) {
|
|
68
|
+
this.$emit('scroll', e);
|
|
60
69
|
}
|
|
61
70
|
},
|
|
62
71
|
// @ts-ignore
|
|
@@ -64,6 +73,7 @@ var ListVue2 = {
|
|
|
64
73
|
var _this = this;
|
|
65
74
|
|
|
66
75
|
var h = gh || createElement;
|
|
76
|
+
var defaultSlot = getDefaultSlots(this);
|
|
67
77
|
var localizationService = provideLocalizationService(this);
|
|
68
78
|
var _a = this.$props,
|
|
69
79
|
id = _a.id,
|
|
@@ -137,6 +147,10 @@ var ListVue2 = {
|
|
|
137
147
|
unselectable: 'on',
|
|
138
148
|
attrs: this.v3 ? undefined : {
|
|
139
149
|
unselectable: 'on'
|
|
150
|
+
},
|
|
151
|
+
onScroll: this.handleScroll,
|
|
152
|
+
on: this.v3 ? undefined : {
|
|
153
|
+
"scroll": this.handleScroll
|
|
140
154
|
}
|
|
141
155
|
}, [h("ul", {
|
|
142
156
|
id: id,
|
|
@@ -152,7 +166,7 @@ var ListVue2 = {
|
|
|
152
166
|
_this.listRef = el;
|
|
153
167
|
} : 'list',
|
|
154
168
|
style: listStyle
|
|
155
|
-
}, [items])]) : renderNoValueElement.call(this);
|
|
169
|
+
}, [items]), defaultSlot]) : renderNoValueElement.call(this);
|
|
156
170
|
}
|
|
157
171
|
};
|
|
158
172
|
var List = 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
|
|
@@ -3,6 +3,9 @@ import * as Vue from 'vue';
|
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
5
|
var ref = allVue.ref;
|
|
6
|
+
import { kendoThemeMaps } from '@progress/kendo-vue-common';
|
|
7
|
+
var sizeMap = kendoThemeMaps.sizeMap,
|
|
8
|
+
roundedMap = kendoThemeMaps.roundedMap;
|
|
6
9
|
/**
|
|
7
10
|
* Represents the default `ListFilter` component.
|
|
8
11
|
*/
|
|
@@ -15,7 +18,41 @@ var ListFilterVue2 = {
|
|
|
15
18
|
change: null
|
|
16
19
|
},
|
|
17
20
|
props: {
|
|
18
|
-
value: String
|
|
21
|
+
value: String,
|
|
22
|
+
rounded: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: 'medium',
|
|
25
|
+
validator: function validator(value) {
|
|
26
|
+
return ['small', 'medium', 'large', 'full'].includes(value);
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
fillMode: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: 'solid',
|
|
32
|
+
validator: function validator(value) {
|
|
33
|
+
return ['solid', 'flat', 'outline'].includes(value);
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
size: {
|
|
37
|
+
type: String,
|
|
38
|
+
default: 'medium',
|
|
39
|
+
validator: function validator(value) {
|
|
40
|
+
return ['small', 'medium', 'large'].includes(value);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
computed: {
|
|
45
|
+
spanClass: function spanClass() {
|
|
46
|
+
var _a;
|
|
47
|
+
|
|
48
|
+
var _b = this.$props,
|
|
49
|
+
size = _b.size,
|
|
50
|
+
rounded = _b.rounded,
|
|
51
|
+
fillMode = _b.fillMode;
|
|
52
|
+
return _a = {
|
|
53
|
+
'k-searchbox k-input': true
|
|
54
|
+
}, _a["k-input-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-input-" + fillMode] = fillMode, _a;
|
|
55
|
+
}
|
|
19
56
|
},
|
|
20
57
|
// @ts-ignore
|
|
21
58
|
setup: !gh ? undefined : function () {
|
|
@@ -45,7 +82,7 @@ var ListFilterVue2 = {
|
|
|
45
82
|
return h("span", {
|
|
46
83
|
"class": "k-list-filter"
|
|
47
84
|
}, [h("span", {
|
|
48
|
-
"class":
|
|
85
|
+
"class": this.spanClass
|
|
49
86
|
}, [h("input", {
|
|
50
87
|
ref: this.v3 ? function (el) {
|
|
51
88
|
_this.inputRef = el;
|
|
@@ -65,6 +102,8 @@ var ListFilterVue2 = {
|
|
|
65
102
|
"keydown": this.onKeyDown
|
|
66
103
|
},
|
|
67
104
|
onKeydown: this.onKeyDown
|
|
105
|
+
}), h("span", {
|
|
106
|
+
"class": "k-input-icon k-icon k-i-search"
|
|
68
107
|
})])]);
|
|
69
108
|
}
|
|
70
109
|
};
|
|
@@ -89,8 +89,9 @@ function () {
|
|
|
89
89
|
VirtualScroll.prototype.scrollToEnd = function () {
|
|
90
90
|
if (this.container && this.list) {
|
|
91
91
|
this.calcScrollElementHeight();
|
|
92
|
-
this.container.scrollTop = this.container.scrollHeight - this.container.offsetHeight;
|
|
93
|
-
|
|
92
|
+
this.container.scrollTop = this.container.scrollHeight - this.container.offsetHeight; // this.translateTo(this.container.scrollHeight - this.list.offsetHeight);
|
|
93
|
+
|
|
94
|
+
this.translateTo(this.container.scrollHeight); // - this.list.offsetHeight
|
|
94
95
|
}
|
|
95
96
|
};
|
|
96
97
|
|
|
@@ -182,8 +183,9 @@ function () {
|
|
|
182
183
|
};
|
|
183
184
|
|
|
184
185
|
VirtualScroll.prototype.validateTranslate = function (translate) {
|
|
185
|
-
translate = Math.max(0, translate);
|
|
186
|
-
|
|
186
|
+
translate = Math.max(0, translate); // translate = Math.min(this.containerHeight - this.list!.offsetHeight, translate);
|
|
187
|
+
|
|
188
|
+
translate = Math.min(this.containerHeight, translate);
|
|
187
189
|
return translate;
|
|
188
190
|
};
|
|
189
191
|
|
|
@@ -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: 1642086741,
|
|
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
|
};
|
|
@@ -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
|
|
|
@@ -793,12 +793,8 @@ var ComboBoxVue2 = {
|
|
|
793
793
|
textField: textField,
|
|
794
794
|
valueField: dataItemKey,
|
|
795
795
|
optionsGuid: base.guid,
|
|
796
|
-
wrapperStyle:
|
|
797
|
-
maxHeight: popupSettings.height
|
|
798
|
-
overflowY: 'scroll'
|
|
799
|
-
} : {
|
|
800
|
-
float: 'left',
|
|
801
|
-
width: '100%'
|
|
796
|
+
wrapperStyle: {
|
|
797
|
+
maxHeight: popupSettings.height
|
|
802
798
|
},
|
|
803
799
|
wrapperCssClass: 'k-list-content',
|
|
804
800
|
listStyle: vs.enabled ? {
|
|
@@ -816,12 +812,8 @@ var ComboBoxVue2 = {
|
|
|
816
812
|
valueField: dataItemKey,
|
|
817
813
|
optionsGuid: base.guid,
|
|
818
814
|
ref: 'list',
|
|
819
|
-
wrapperStyle:
|
|
820
|
-
maxHeight: popupSettings.height
|
|
821
|
-
overflowY: 'scroll'
|
|
822
|
-
} : {
|
|
823
|
-
float: 'left',
|
|
824
|
-
width: '100%'
|
|
815
|
+
wrapperStyle: {
|
|
816
|
+
maxHeight: popupSettings.height
|
|
825
817
|
},
|
|
826
818
|
wrapperCssClass: 'k-list-content',
|
|
827
819
|
listStyle: vs.enabled ? {
|
|
@@ -831,27 +823,14 @@ var ComboBoxVue2 = {
|
|
|
831
823
|
skip: skip,
|
|
832
824
|
onListclick: this.handleItemClick,
|
|
833
825
|
on: this.v3 ? undefined : {
|
|
834
|
-
"listclick": this.handleItemClick
|
|
826
|
+
"listclick": this.handleItemClick,
|
|
827
|
+
"scroll": vs.scrollHandler
|
|
835
828
|
},
|
|
836
829
|
itemRender: itemRender,
|
|
837
|
-
noDataRender: listNoDataRender
|
|
838
|
-
|
|
830
|
+
noDataRender: listNoDataRender,
|
|
831
|
+
onScroll: vs.scrollHandler
|
|
832
|
+
}, [renderScrollElement.call(this)])
|
|
839
833
|
);
|
|
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
834
|
};
|
|
856
835
|
|
|
857
836
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -913,12 +892,12 @@ var ComboBoxVue2 = {
|
|
|
913
892
|
}, this.v3 ? function () {
|
|
914
893
|
return [header && h("div", {
|
|
915
894
|
"class": "k-list-header"
|
|
916
|
-
}, [header]),
|
|
895
|
+
}, [header]), renderList.call(_this2), footer && h("div", {
|
|
917
896
|
"class": "k-list-footer"
|
|
918
897
|
}, [footer])];
|
|
919
898
|
} : [header && h("div", {
|
|
920
899
|
"class": "k-list-header"
|
|
921
|
-
}, [header]),
|
|
900
|
+
}, [header]), renderList.call(_this2), footer && h("div", {
|
|
922
901
|
"class": "k-list-footer"
|
|
923
902
|
}, [footer])])
|
|
924
903
|
);
|