@progress/kendo-vue-dropdowns 2.7.3-dev.202201070829 → 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.
Files changed (70) hide show
  1. package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
  2. package/dist/es/AutoComplete/AutoComplete.d.ts +5 -6
  3. package/dist/es/AutoComplete/AutoComplete.js +63 -29
  4. package/dist/es/AutoComplete/AutoCompleteProps.d.ts +39 -0
  5. package/dist/es/ComboBox/ComboBox.d.ts +5 -6
  6. package/dist/es/ComboBox/ComboBox.js +96 -78
  7. package/dist/es/ComboBox/ComboBoxProps.d.ts +39 -0
  8. package/dist/es/DropDownList/DropDownList.d.ts +5 -6
  9. package/dist/es/DropDownList/DropDownList.js +182 -153
  10. package/dist/es/DropDownList/DropDownListProps.d.ts +43 -0
  11. package/dist/es/MultiSelect/MultiSelect.d.ts +5 -6
  12. package/dist/es/MultiSelect/MultiSelect.js +106 -78
  13. package/dist/es/MultiSelect/MultiSelectProps.d.ts +53 -0
  14. package/dist/es/MultiSelect/TagList.d.ts +8 -4
  15. package/dist/es/MultiSelect/TagList.js +60 -11
  16. package/dist/es/additionalTypes.ts +7 -1
  17. package/dist/es/common/ClearButton.d.ts +5 -6
  18. package/dist/es/common/ClearButton.js +7 -5
  19. package/dist/es/common/DropDownBase.d.ts +4 -5
  20. package/dist/es/common/List.d.ts +7 -4
  21. package/dist/es/common/List.js +21 -6
  22. package/dist/es/common/ListContainer.d.ts +5 -6
  23. package/dist/es/common/ListContainer.js +7 -4
  24. package/dist/es/common/ListDefaultItem.d.ts +5 -6
  25. package/dist/es/common/ListDefaultItem.js +7 -4
  26. package/dist/es/common/ListFilter.d.ts +8 -6
  27. package/dist/es/common/ListFilter.js +50 -7
  28. package/dist/es/common/ListItem.d.ts +5 -6
  29. package/dist/es/common/ListItem.js +17 -9
  30. package/dist/es/common/SearchBar.d.ts +6 -6
  31. package/dist/es/common/SearchBar.js +13 -13
  32. package/dist/es/common/VirtualScroll.js +6 -4
  33. package/dist/es/main.d.ts +5 -5
  34. package/dist/es/main.js +5 -5
  35. package/dist/es/package-metadata.js +1 -1
  36. package/dist/npm/AutoComplete/AutoComplete.d.ts +5 -6
  37. package/dist/npm/AutoComplete/AutoComplete.js +64 -30
  38. package/dist/npm/AutoComplete/AutoCompleteProps.d.ts +39 -0
  39. package/dist/npm/ComboBox/ComboBox.d.ts +5 -6
  40. package/dist/npm/ComboBox/ComboBox.js +99 -79
  41. package/dist/npm/ComboBox/ComboBoxProps.d.ts +39 -0
  42. package/dist/npm/DropDownList/DropDownList.d.ts +5 -6
  43. package/dist/npm/DropDownList/DropDownList.js +185 -154
  44. package/dist/npm/DropDownList/DropDownListProps.d.ts +43 -0
  45. package/dist/npm/MultiSelect/MultiSelect.d.ts +5 -6
  46. package/dist/npm/MultiSelect/MultiSelect.js +108 -79
  47. package/dist/npm/MultiSelect/MultiSelectProps.d.ts +53 -0
  48. package/dist/npm/MultiSelect/TagList.d.ts +8 -4
  49. package/dist/npm/MultiSelect/TagList.js +60 -10
  50. package/dist/npm/additionalTypes.ts +7 -1
  51. package/dist/npm/common/ClearButton.d.ts +5 -6
  52. package/dist/npm/common/ClearButton.js +9 -7
  53. package/dist/npm/common/DropDownBase.d.ts +4 -5
  54. package/dist/npm/common/List.d.ts +7 -4
  55. package/dist/npm/common/List.js +21 -5
  56. package/dist/npm/common/ListContainer.d.ts +5 -6
  57. package/dist/npm/common/ListContainer.js +9 -6
  58. package/dist/npm/common/ListDefaultItem.d.ts +5 -6
  59. package/dist/npm/common/ListDefaultItem.js +9 -6
  60. package/dist/npm/common/ListFilter.d.ts +8 -6
  61. package/dist/npm/common/ListFilter.js +54 -9
  62. package/dist/npm/common/ListItem.d.ts +5 -6
  63. package/dist/npm/common/ListItem.js +18 -10
  64. package/dist/npm/common/SearchBar.d.ts +6 -6
  65. package/dist/npm/common/SearchBar.js +15 -15
  66. package/dist/npm/common/VirtualScroll.js +6 -4
  67. package/dist/npm/main.d.ts +5 -5
  68. package/dist/npm/main.js +5 -5
  69. package/dist/npm/package-metadata.js +1 -1
  70. package/package.json +5 -4
@@ -19,7 +19,7 @@ var __assign = undefined && undefined.__assign || function () {
19
19
  Object.defineProperty(exports, "__esModule", {
20
20
  value: true
21
21
  });
22
- exports.DropDownListVue3 = exports.DropDownList = void 0; // @ts-ignore
22
+ exports.DropDownListVue2 = exports.DropDownList = void 0; // @ts-ignore
23
23
 
24
24
  var Vue = require("vue");
25
25
 
@@ -29,6 +29,11 @@ var ref = allVue.ref;
29
29
 
30
30
  var kendo_vue_common_1 = require("@progress/kendo-vue-common");
31
31
 
32
+ var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
33
+
34
+ var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
35
+ roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
36
+
32
37
  var ListContainer_1 = require("../common/ListContainer");
33
38
 
34
39
  var ListFilter_1 = require("../common/ListFilter");
@@ -46,13 +51,14 @@ var VALIDATION_MESSAGE = 'Please select a value from the list!';
46
51
  * Represents the default `DropDownList` component.
47
52
  */
48
53
 
49
- var DropDownList = {
54
+ var DropDownListVue2 = {
50
55
  name: 'KendoDropDownList',
51
56
  model: {
52
57
  event: 'changemodel'
53
58
  },
54
59
  props: {
55
60
  id: String,
61
+ title: String,
56
62
  dataItemKey: {
57
63
  type: [Object, String]
58
64
  },
@@ -150,7 +156,28 @@ var DropDownList = {
150
156
  default: undefined
151
157
  },
152
158
  ariaLabelledBy: String,
153
- ariaDescribedBy: String
159
+ ariaDescribedBy: String,
160
+ rounded: {
161
+ type: String,
162
+ default: 'medium',
163
+ validator: function validator(value) {
164
+ return ['small', 'medium', 'large', 'full'].includes(value);
165
+ }
166
+ },
167
+ fillMode: {
168
+ type: String,
169
+ default: 'solid',
170
+ validator: function validator(value) {
171
+ return ['solid', 'flat', 'outline'].includes(value);
172
+ }
173
+ },
174
+ size: {
175
+ type: String,
176
+ default: 'medium',
177
+ validator: function validator(value) {
178
+ return ['small', 'medium', 'large'].includes(value);
179
+ }
180
+ }
154
181
  },
155
182
  data: function data() {
156
183
  return {
@@ -222,7 +249,7 @@ var DropDownList = {
222
249
  mounted: function mounted() {
223
250
  this.hasMounted = true;
224
251
  this.select = this.v3 ? this.selectRef : this.$refs.select;
225
- this.base.wrapper = this.v3 ? this.baseWrapperRef : this.$refs.baseWrapper;
252
+ this.base.wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
226
253
  this.base.didMount();
227
254
  this.setValidity();
228
255
  },
@@ -256,8 +283,9 @@ var DropDownList = {
256
283
  this.filterInput = filterInput;
257
284
  }
258
285
 
259
- if (scroller) {
260
- this.base.vs.scrollerRef(scroller);
286
+ if (list && dataItems.length) {
287
+ // @ts-ignore
288
+ this.base.vs.scrollerRef(list.$el);
261
289
  }
262
290
 
263
291
  if (!this.$props.popupSettings.animate) {
@@ -319,10 +347,10 @@ var DropDownList = {
319
347
  get: function get() {
320
348
  var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
321
349
  return {
322
- 'k-textbox-container': true,
323
- 'k-state-focused': this.currentFocused,
324
- 'k-state-empty': !this.computedValue(),
325
- 'k-state-invalid': !isValid && isValid !== undefined,
350
+ 'k-floating-label-container': true,
351
+ 'k-focus': this.currentFocused,
352
+ 'k-empty': !this.computedValue(),
353
+ 'k-invalid': !isValid && isValid !== undefined,
326
354
  'k-rtl': this.$props.dir === 'rtl'
327
355
  };
328
356
  }
@@ -700,18 +728,23 @@ var DropDownList = {
700
728
  }
701
729
  },
702
730
  render: function render(createElement) {
731
+ var _a;
732
+
703
733
  var _this = this;
704
734
 
705
735
  var h = gh || createElement;
706
- var _a = this.$props,
707
- style = _a.style,
708
- className = _a.className,
709
- label = _a.label,
710
- dir = _a.dir,
711
- _b = _a.virtual,
712
- virtual = _b === void 0 ? {
736
+ var _b = this.$props,
737
+ style = _b.style,
738
+ className = _b.className,
739
+ label = _b.label,
740
+ dir = _b.dir,
741
+ _c = _b.virtual,
742
+ virtual = _c === void 0 ? {
713
743
  skip: 0
714
- } : _b;
744
+ } : _c,
745
+ size = _b.size,
746
+ rounded = _b.rounded,
747
+ fillMode = _b.fillMode;
715
748
  var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
716
749
  var text = utils_1.getItemValue(this.computedValue(), this.$props.textField);
717
750
  var isValid = !this.$props.validityStyles || this.validity().valid;
@@ -723,8 +756,35 @@ var DropDownList = {
723
756
  animate: true,
724
757
  height: '200px'
725
758
  }, this.$props.popupSettings);
726
-
727
- var dummySelect = function dummySelect(value) {
759
+ var _d = this.$props,
760
+ dataItemKey = _d.dataItemKey,
761
+ _e = _d.dataItems,
762
+ dataItems = _e === void 0 ? [] : _e,
763
+ disabled = _d.disabled,
764
+ tabIndex = _d.tabIndex,
765
+ loading = _d.loading,
766
+ iconClassName = _d.iconClassName;
767
+ var valueRender = kendo_vue_common_1.templateRendering.call(this, this.$props.valueRender, kendo_vue_common_1.getListeners.call(this));
768
+ var focused = this.currentFocused;
769
+ var value = this.computedValue();
770
+ var selectedIndex = dataItems.findIndex(function (i) {
771
+ return utils_1.areSame(i, value, dataItemKey);
772
+ });
773
+ var valueDefaultRendering = h("span", {
774
+ "class": "k-input-inner"
775
+ }, [h("span", {
776
+ "class": "k-input-value-text"
777
+ }, [text])]);
778
+ var valueElement = kendo_vue_common_1.getTemplate.call(this, {
779
+ h: h,
780
+ template: valueRender,
781
+ defaultRendering: valueDefaultRendering,
782
+ additionalProps: __assign({
783
+ value: this.computedValue()
784
+ }, this.$data)
785
+ });
786
+
787
+ var dummySelect = function dummySelect(cvalue) {
728
788
  var _this = this;
729
789
  /* Dummy component to support forms */
730
790
 
@@ -754,97 +814,17 @@ var DropDownList = {
754
814
  left: '50%'
755
815
  }
756
816
  }, [h("option", {
757
- value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value : null,
817
+ value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue : null,
758
818
  domProps: this.v3 ? undefined : {
759
- "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value
819
+ "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue
760
820
  }
761
821
  })]);
762
822
  };
763
823
 
764
- var renderDropDownWrapper = function renderDropDownWrapper() {
765
- var _this = this;
766
-
767
- var _a = this.$props,
768
- dataItemKey = _a.dataItemKey,
769
- _b = _a.dataItems,
770
- dataItems = _b === void 0 ? [] : _b,
771
- disabled = _a.disabled,
772
- tabIndex = _a.tabIndex,
773
- loading = _a.loading,
774
- iconClassName = _a.iconClassName;
775
- var valueRender = kendo_vue_common_1.templateRendering.call(this, this.$props.valueRender, kendo_vue_common_1.getListeners.call(this));
776
- var focused = this.currentFocused;
777
- var value = this.computedValue();
778
- var selectedIndex = dataItems.findIndex(function (i) {
779
- return utils_1.areSame(i, value, dataItemKey);
780
- });
781
- var valueDefaultRendering = h("span", {
782
- "class": "k-input"
783
- }, [text]);
784
- var valueElement = kendo_vue_common_1.getTemplate.call(this, {
785
- h: h,
786
- template: valueRender,
787
- defaultRendering: valueDefaultRendering,
788
- additionalProps: __assign({
789
- value: this.computedValue()
790
- }, this.$data)
791
- });
792
- return h("span", {
793
- ref: this.v3 ? function (el) {
794
- _this.baseWrapperRef = el;
795
- } : 'baseWrapper',
796
- role: 'listbox',
797
- attrs: this.v3 ? undefined : {
798
- role: 'listbox',
799
- tabIndex: disabled ? undefined : tabIndex,
800
- accessKey: this.$props.accessKey,
801
- "aria-disabled": disabled || undefined,
802
- "aria-haspopup": true,
803
- "aria-expanded": opened || false,
804
- "aria-owns": this.base.listBoxId,
805
- "aria-activedescendant": 'option-' + this.base.guid + '-' + (selectedIndex + virtual.skip),
806
- "aria-label": this.$props.label,
807
- "aria-labelledby": this.$props.ariaLabelledBy,
808
- "aria-describedby": this.$props.ariaDescribedBy
809
- },
810
- tabIndex: disabled ? undefined : tabIndex,
811
- accessKey: this.$props.accessKey,
812
- "class": kendo_vue_common_1.classNames('k-dropdown-wrap', {
813
- 'k-state-focused': focused,
814
- 'k-state-disabled': disabled
815
- }),
816
- style: this.$props.style,
817
- onKeydown: this.handleKeyDown,
818
- on: this.v3 ? undefined : {
819
- "keydown": this.handleKeyDown,
820
- "keypress": this.handleKeyPress,
821
- "click": disabled ? kendo_vue_common_1.noop : this.handleWrapperClick
822
- },
823
- onKeypress: this.handleKeyPress,
824
- onClick: disabled ? kendo_vue_common_1.noop : this.handleWrapperClick,
825
- "aria-disabled": disabled || undefined,
826
- "aria-haspopup": true,
827
- "aria-expanded": opened || false,
828
- "aria-owns": this.base.listBoxId,
829
- "aria-activedescendant": 'option-' + this.base.guid + '-' + (selectedIndex + virtual.skip),
830
- "aria-label": this.$props.label,
831
- "aria-labelledby": this.$props.ariaLabelledBy,
832
- "aria-describedby": this.$props.ariaDescribedBy
833
- }, [valueElement, h("span", {
834
- "class": "k-select"
835
- }, [h("span", {
836
- "class": kendo_vue_common_1.classNames('k-icon', iconClassName, {
837
- 'k-i-arrow-s': !loading && !iconClassName,
838
- 'k-i-loading': loading && !iconClassName
839
- })
840
- })]), dummySelect.call(this, value)]);
841
- };
842
-
843
824
  var renderDefaultItem = function renderDefaultItem() {
844
825
  var _a = this.$props,
845
826
  textField = _a.textField,
846
- defaultItem = _a.defaultItem,
847
- dataItemKey = _a.dataItemKey;
827
+ defaultItem = _a.defaultItem;
848
828
  return defaultItem !== undefined && // @ts-ignore
849
829
  h(ListDefaultItem_1.ListDefaultItem, {
850
830
  defaultItem: defaultItem,
@@ -864,16 +844,14 @@ var DropDownList = {
864
844
  };
865
845
 
866
846
  var renderList = function renderList() {
867
- var _a = this.$props,
868
- _b = _a.dataItems,
869
- dataItems = _b === void 0 ? [] : _b,
870
- textField = _a.textField,
871
- dataItemKey = _a.dataItemKey;
847
+ var _this2 = this;
848
+
849
+ var textField = this.$props.textField;
872
850
  var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
873
851
  var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
874
852
  var skip = virtual.skip;
875
853
  var translate = "translateY(" + vs.translate + "px)";
876
- return (// @ts-ignore
854
+ return (// @ts-ignore function children
877
855
  h(List_1.List, {
878
856
  id: this.base.listBoxId,
879
857
  attrs: this.v3 ? undefined : {
@@ -885,13 +863,10 @@ var DropDownList = {
885
863
  textField: textField,
886
864
  valueField: dataItemKey,
887
865
  optionsGuid: this.base.guid,
888
- wrapperStyle: !vs.enabled ? {
866
+ wrapperStyle: {
889
867
  maxHeight: popupSettings.height
890
- } : {
891
- float: 'left',
892
- width: '100%'
893
868
  },
894
- wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined,
869
+ wrapperCssClass: 'k-list-content',
895
870
  listStyle: vs.enabled ? {
896
871
  transform: translate
897
872
  } : undefined,
@@ -907,13 +882,10 @@ var DropDownList = {
907
882
  valueField: dataItemKey,
908
883
  optionsGuid: this.base.guid,
909
884
  ref: 'list',
910
- wrapperStyle: !vs.enabled ? {
885
+ wrapperStyle: {
911
886
  maxHeight: popupSettings.height
912
- } : {
913
- float: 'left',
914
- width: '100%'
915
887
  },
916
- wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined,
888
+ wrapperCssClass: 'k-list-content',
917
889
  listStyle: vs.enabled ? {
918
890
  transform: translate
919
891
  } : undefined,
@@ -921,11 +893,15 @@ var DropDownList = {
921
893
  skip: skip,
922
894
  onListclick: this.handleItemClick,
923
895
  on: this.v3 ? undefined : {
924
- "listclick": this.handleItemClick
896
+ "listclick": this.handleItemClick,
897
+ "scroll": vs.scrollHandler
925
898
  },
926
899
  itemRender: itemRender,
927
- noDataRender: listNoDataRender
928
- })
900
+ noDataRender: listNoDataRender,
901
+ onScroll: vs.scrollHandler
902
+ }, this.v3 ? function () {
903
+ return [renderScrollElement.call(_this2)];
904
+ } : [renderScrollElement.call(_this2)])
929
905
  );
930
906
  };
931
907
 
@@ -935,7 +911,10 @@ var DropDownList = {
935
911
  h(ListFilter_1.ListFilter, {
936
912
  value: filterText,
937
913
  attrs: this.v3 ? undefined : {
938
- value: filterText
914
+ value: filterText,
915
+ size: this.$props.size,
916
+ rounded: this.$props.rounded,
917
+ fillMode: this.$props.fillMode
939
918
  },
940
919
  ref: 'filterInput',
941
920
  onChange: this.handleListFilterChange,
@@ -943,23 +922,11 @@ var DropDownList = {
943
922
  "change": this.handleListFilterChange,
944
923
  "keydown": this.handleKeyDown
945
924
  },
946
- onKeydown: this.handleKeyDown
925
+ onKeydown: this.handleKeyDown,
926
+ size: this.$props.size,
927
+ rounded: this.$props.rounded,
928
+ fillMode: this.$props.fillMode
947
929
  });
948
- }; // Common rendering
949
-
950
-
951
- var renderScrollWrapper = function renderScrollWrapper(children) {
952
- return vs.enabled ? h("div", {
953
- onScroll: vs.scrollHandler,
954
- on: this.v3 ? undefined : {
955
- "scroll": vs.scrollHandler
956
- },
957
- ref: 'scroller',
958
- style: {
959
- height: popupSettings.height,
960
- overflowY: 'scroll'
961
- }
962
- }, [children]) : children;
963
930
  };
964
931
 
965
932
  var renderScrollElement = function renderScrollElement() {
@@ -970,7 +937,9 @@ var DropDownList = {
970
937
  };
971
938
 
972
939
  var renderListContainer = function renderListContainer() {
973
- var _this2 = this;
940
+ var _this3 = this;
941
+
942
+ var _a;
974
943
 
975
944
  var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
976
945
  var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
@@ -998,7 +967,8 @@ var DropDownList = {
998
967
  width: popupWidth // @ts-ignore
999
968
  ,
1000
969
  popupSettings: {
1001
- className: kendo_vue_common_1.classNames('k-list-container k-reset', popupSettings.className),
970
+ popupClass: kendo_vue_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
971
+ className: popupSettings.className,
1002
972
  animate: popupSettings.animate,
1003
973
  anchor: this.anchor,
1004
974
  show: opened
@@ -1006,7 +976,8 @@ var DropDownList = {
1006
976
  },
1007
977
  width: popupWidth,
1008
978
  popupSettings: {
1009
- className: kendo_vue_common_1.classNames('k-list-container k-reset', popupSettings.className),
979
+ popupClass: kendo_vue_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
980
+ className: popupSettings.className,
1010
981
  animate: popupSettings.animate,
1011
982
  anchor: this.anchor,
1012
983
  show: opened
@@ -1015,8 +986,16 @@ var DropDownList = {
1015
986
  onClose: this.onPopupClosed,
1016
987
  onBlur: this.handleBlur
1017
988
  }, this.v3 ? function () {
1018
- 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];
1019
- } : [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])
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])])
1020
999
  );
1021
1000
  };
1022
1001
 
@@ -1032,25 +1011,77 @@ var DropDownList = {
1032
1011
  ref: this.v3 ? function (el) {
1033
1012
  _this.kendoAnchorRef = el;
1034
1013
  } : this.anchor,
1035
- "class": kendo_vue_common_1.classNames('k-widget k-dropdown', {
1036
- 'k-state-invalid': !isValid
1037
- }, className),
1014
+ "class": kendo_vue_common_1.classNames('k-dropdownlist k-picker', className, (_a = {}, _a["k-picker-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-picker-" + fillMode] = fillMode, _a['k-focus'] = focused, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-valid'] = isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
1038
1015
  style: !label ? style : __assign(__assign({}, style), {
1039
1016
  width: undefined
1040
1017
  }),
1041
1018
  dir: dir,
1042
1019
  attrs: this.v3 ? undefined : {
1043
- dir: dir
1020
+ dir: dir,
1021
+ tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
1022
+ accessKey: this.$props.accessKey,
1023
+ role: 'listbox',
1024
+ "aria-disabled": disabled || undefined,
1025
+ "aria-haspopup": true,
1026
+ "aria-expanded": opened || false,
1027
+ "aria-owns": this.base.listBoxId,
1028
+ "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
1029
+ "aria-label": this.$props.label,
1030
+ "aria-labelledby": this.$props.ariaLabelledBy,
1031
+ "aria-describedby": this.$props.ariaDescribedBy,
1032
+ id: this.$props.id,
1033
+ title: this.$props.title
1044
1034
  },
1045
1035
  onMousedown: opened ? utils_1.preventDefaultNonInputs : kendo_vue_common_1.noop,
1046
1036
  on: this.v3 ? undefined : {
1047
1037
  "mousedown": opened ? utils_1.preventDefaultNonInputs : kendo_vue_common_1.noop,
1048
1038
  "focusin": this.handleFocus,
1049
- "focusout": this.handleBlur
1039
+ "focusout": this.handleBlur,
1040
+ "keydown": this.handleKeyDown,
1041
+ "keypress": this.handleKeyPress,
1042
+ "click": disabled ? kendo_vue_common_1.noop : this.handleWrapperClick
1050
1043
  },
1051
1044
  onFocusin: this.handleFocus,
1052
- onFocusout: this.handleBlur
1053
- }, [renderDropDownWrapper.call(this), renderListContainer.call(this)]);
1045
+ onFocusout: this.handleBlur,
1046
+ tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
1047
+ accessKey: this.$props.accessKey,
1048
+ onKeydown: this.handleKeyDown,
1049
+ onKeypress: this.handleKeyPress,
1050
+ role: 'listbox',
1051
+ onClick: disabled ? kendo_vue_common_1.noop : this.handleWrapperClick,
1052
+ "aria-disabled": disabled || undefined,
1053
+ "aria-haspopup": true,
1054
+ "aria-expanded": opened || false,
1055
+ "aria-owns": this.base.listBoxId,
1056
+ "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
1057
+ "aria-label": this.$props.label,
1058
+ "aria-labelledby": this.$props.ariaLabelledBy,
1059
+ "aria-describedby": this.$props.ariaDescribedBy,
1060
+ id: this.$props.id,
1061
+ title: this.$props.title
1062
+ }, [valueElement, loading && h("span", {
1063
+ "class": "k-icon k-i-loading",
1064
+ key: "loading"
1065
+ }), // @ts-ignore
1066
+ h(kendo_vue_buttons_1.Button, {
1067
+ size: size,
1068
+ attrs: this.v3 ? undefined : {
1069
+ size: size,
1070
+ fillMode: fillMode,
1071
+ iconClass: kendo_vue_common_1.classNames('k-icon k-i-arrow-s', iconClassName)
1072
+ },
1073
+ fillMode: fillMode,
1074
+ "class": 'k-input-button',
1075
+ iconClass: kendo_vue_common_1.classNames('k-icon k-i-arrow-s', iconClassName),
1076
+ onMousedown: function onMousedown(e) {
1077
+ return e.preventDefault();
1078
+ },
1079
+ on: this.v3 ? undefined : {
1080
+ "mousedown": function onMousedown(e) {
1081
+ return e.preventDefault();
1082
+ }
1083
+ }
1084
+ }), dummySelect.call(this, value), renderListContainer.call(this)]);
1054
1085
  return label ? h("span", {
1055
1086
  "class": this.spanClassNames,
1056
1087
  onFocusin: this.handleFocus,
@@ -1074,6 +1105,6 @@ var DropDownList = {
1074
1105
  }, [this.$props.label]) : null]) : dropdownlist;
1075
1106
  }
1076
1107
  };
1077
- exports.DropDownList = DropDownList;
1078
- var DropDownListVue3 = DropDownList;
1079
- exports.DropDownListVue3 = DropDownListVue3;
1108
+ exports.DropDownListVue2 = DropDownListVue2;
1109
+ var DropDownList = DropDownListVue2;
1110
+ exports.DropDownList = DropDownList;
@@ -44,6 +44,10 @@ export interface DropDownListProps extends FormComponentProps {
44
44
  * Specifies the id of the component.
45
45
  */
46
46
  id?: string;
47
+ /**
48
+ * Specifies the title of the component.
49
+ */
50
+ title?: string;
47
51
  /**
48
52
  * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
49
53
  * For example these elements could contain error or hint message.
@@ -221,4 +225,43 @@ export interface DropDownListProps extends FormComponentProps {
221
225
  * Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys.
222
226
  */
223
227
  leftRightKeysNavigation?: boolean;
228
+ /**
229
+ * Configures the `size` of the DropDownList.
230
+ *
231
+ * The available options are:
232
+ * - small
233
+ * - medium
234
+ * - large
235
+ * - null—Does not set a size `class`.
236
+ *
237
+ * @default `medium`
238
+ */
239
+ size?: null | 'small' | 'medium' | 'large' | string;
240
+ /**
241
+ * Configures the `roundness` of the DropDownList.
242
+ *
243
+ * The available options are:
244
+ * - small
245
+ * - medium
246
+ * - large
247
+ * - circle
248
+ * - full
249
+ * - null—Does not set a rounded `class`.
250
+ *
251
+ * @default `medium`
252
+ */
253
+ rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
254
+ /**
255
+ * Configures the `fillMode` of the DropDownList.
256
+ *
257
+ * The available options are:
258
+ * - solid
259
+ * - outline
260
+ * - flat
261
+ * - link
262
+ * - null—Does not set a fillMode `class`.
263
+ *
264
+ * @default `solid`
265
+ */
266
+ fillMode?: null | 'solid' | 'outline' | 'flat' | string;
224
267
  }
@@ -1,10 +1,9 @@
1
- import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
2
1
  declare type DefaultData<V> = object | ((this: V) => MultiSelectData);
3
2
  declare type DefaultMethods<V> = {
4
3
  [key: string]: (this: V, ...args: any[]) => any;
5
4
  };
6
5
  import { FormComponentValidity } from '@progress/kendo-vue-common';
7
- import { DefineComponent } from '../additionalTypes';
6
+ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
8
7
  import { TagData } from './TagList';
9
8
  import { MultiSelectProps } from './MultiSelectProps';
10
9
  import { DropDownStateBase, InternalState, ActiveDescendant } from './../common/settings';
@@ -103,11 +102,11 @@ export interface MultiSelectComputed {
103
102
  /**
104
103
  * @hidden
105
104
  */
106
- export interface MultiSelectAll extends MultiSelectMethods, MultiSelectState, MultiSelectData, MultiSelectComputed, Vue {
105
+ export interface MultiSelectAll extends MultiSelectMethods, MultiSelectState, MultiSelectData, MultiSelectComputed, Vue2type {
107
106
  }
108
107
  /**
109
108
  * Represents the default `MultiSelect` component.
110
109
  */
111
- declare let MultiSelect: ComponentOptions<Vue, DefaultData<MultiSelectData>, DefaultMethods<MultiSelectAll>, MultiSelectComputed, RecordPropsDefinition<MultiSelectProps>>;
112
- declare const MultiSelectVue3: DefineComponent<MultiSelectProps, any, MultiSelectData, MultiSelectComputed, MultiSelectMethods, {}, {}, {}, string, MultiSelectProps, MultiSelectProps, {}>;
113
- export { MultiSelect, MultiSelectVue3 };
110
+ declare let MultiSelectVue2: ComponentOptions<Vue2type, DefaultData<MultiSelectData>, DefaultMethods<MultiSelectAll>, MultiSelectComputed, RecordPropsDefinition<MultiSelectProps>>;
111
+ declare const MultiSelect: DefineComponent<MultiSelectProps, any, MultiSelectData, MultiSelectComputed, MultiSelectMethods, {}, {}, {}, string, MultiSelectProps, MultiSelectProps, {}>;
112
+ export { MultiSelect, MultiSelectVue2 };