@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.
@@ -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 (scroller) {
246
- this.base.vs.scrollerRef(scroller);
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: !vs.enabled ? {
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: !vs.enabled ? {
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]), renderScrollWrapper.call(_this2, [renderList.call(_this2), renderScrollElement.call(_this2)]), footer && h("div", {
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]), renderScrollWrapper.call(_this2, [renderList.call(_this2), renderScrollElement.call(_this2)]), footer && h("div", {
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 (scroller) {
270
- this.base.vs.scrollerRef(scroller);
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: !vs.enabled ? {
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: !vs.enabled ? {
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 _this2 = this;
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(_this2), _this2.$props.virtual ? renderDefaultItem.call(_this2) : undefined, _this2.$props.virtual && header, renderScrollWrapper.call(_this2, !_this2.$props.virtual ? [renderDefaultItem.call(_this2), header, renderList.call(_this2), footer, renderScrollElement.call(_this2)] : [renderList.call(_this2), renderScrollElement.call(_this2)]), _this2.$props.virtual && footer];
983
- } : [renderListFilter.call(_this2), _this2.$props.virtual ? renderDefaultItem.call(_this2) : undefined, _this2.$props.virtual && header, renderScrollWrapper.call(_this2, !_this2.$props.virtual ? [renderDefaultItem.call(_this2), header, renderList.call(_this2), footer, renderScrollElement.call(_this2)] : [renderList.call(_this2), renderScrollElement.call(_this2)]), _this2.$props.virtual && footer])
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 (scroller) {
277
- this.base.vs.scrollerRef(scroller);
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: vs.enabled ? {
1010
- float: 'left',
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: vs.enabled ? {
1033
- float: 'left',
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 _this2 = this;
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 [virtual && header, renderScrollWrapper.call(_this2, [!virtual && header, customItem, renderList.call(_this2), !virtual && footer, renderScrollElement.call(_this2)]), virtual && footer];
1157
- } : [virtual && header, renderScrollWrapper.call(_this2, [!virtual && header, customItem, renderList.call(_this2), !virtual && footer, renderScrollElement.call(_this2)]), virtual && footer])
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
 
@@ -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
@@ -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;
@@ -44,6 +44,9 @@ var ListDefaultItemVue2 = {
44
44
  "mousedown": this.onMouseDown
45
45
  },
46
46
  onMousedown: this.onMouseDown,
47
+ style: {
48
+ position: 'unset'
49
+ },
47
50
  "class": classNames('k-list-optionlabel', {
48
51
  'k-selected': selected
49
52
  })
@@ -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": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
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
  };
@@ -76,6 +76,9 @@ var ListItemVue2 = {
76
76
  onClick: this.handleClick,
77
77
  on: this.v3 ? undefined : {
78
78
  "click": this.handleClick
79
+ },
80
+ style: {
81
+ position: 'unset'
79
82
  }
80
83
  }, [h("span", {
81
84
  "class": "k-list-item-text"
@@ -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
- this.translateTo(this.container.scrollHeight - this.list.offsetHeight);
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
- translate = Math.min(this.containerHeight - this.list.offsetHeight, translate);
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: 1641982011,
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 (scroller) {
263
- this.base.vs.scrollerRef(scroller);
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: !vs.enabled ? {
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: !vs.enabled ? {
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]), renderScrollWrapper.call(_this2, [renderList.call(_this2), renderScrollElement.call(_this2)]), footer && h("div", {
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]), renderScrollWrapper.call(_this2, [renderList.call(_this2), renderScrollElement.call(_this2)]), footer && h("div", {
900
+ }, [header]), renderList.call(_this2), footer && h("div", {
922
901
  "class": "k-list-footer"
923
902
  }, [footer])])
924
903
  );