@progress/kendo-vue-dropdowns 2.7.3-dev.202201070829 → 2.8.0-dev.202201131525

package/dist/npm/AutoComplete/AutoComplete.js

@@ -19,7 +19,7 @@ var __assign = undefined && undefined.__assign || function () {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AutoCompleteVue3 = exports.AutoComplete = void 0; // @ts-ignore
+exports.AutoCompleteVue2 = exports.AutoComplete = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -41,12 +41,14 @@ var utils_1 = require("../common/utils");
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
+var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
+    roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * Represents the default `AutoComplete` component.
  */
 
-var AutoComplete = {
+var AutoCompleteVue2 = {
   name: 'KendoAutoComplete',
   model: {
     event: 'changemodel'
@@ -103,7 +105,6 @@ var AutoComplete = {
     accessKey: String,
     dataItems: Array,
     textField: String,
-    className: String,
     loading: Boolean,
     popupSettings: {
       type: Object,
@@ -124,7 +125,28 @@ var AutoComplete = {
       default: false
     },
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    }
   },
   data: function data() {
     return {
@@ -216,10 +238,10 @@ var AutoComplete = {
       get: function get() {
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
         return {
-          'k-textbox-container': true,
-          'k-state-focused': this.currentFocused,
-          'k-state-empty': !this.computedValue(),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
+          'k-empty': !this.computedValue(),
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -478,17 +500,21 @@ var AutoComplete = {
     }
   },
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
-    var _a = this.$props,
-        dir = _a.dir,
-        disabled = _a.disabled,
-        label = _a.label,
-        className = _a.className,
-        style = _a.style,
-        loading = _a.loading,
-        suggest = _a.suggest;
+    var _b = this.$props,
+        dir = _b.dir,
+        disabled = _b.disabled,
+        label = _b.label,
+        size = _b.size,
+        rounded = _b.rounded,
+        fillMode = _b.fillMode,
+        style = _b.style,
+        loading = _b.loading,
+        suggest = _b.suggest;
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var focused = this.currentFocused;
     var base = this.base;
@@ -589,7 +615,7 @@ var AutoComplete = {
             wrapperStyle: {
               maxHeight: popupSettings.height
             },
-            wrapperCssClass: "k-list-scroller",
+            wrapperCssClass: "k-list-content",
             itemRender: itemRender,
             noDataRender: listNoDataRender
           },
@@ -605,7 +631,7 @@ var AutoComplete = {
           wrapperStyle: {
             maxHeight: popupSettings.height
           },
-          wrapperCssClass: "k-list-scroller",
+          wrapperCssClass: "k-list-content",
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
             "listclick": this.handleItemClick
@@ -619,6 +645,8 @@ var AutoComplete = {
     var renderListContainer = function renderListContainer() {
       var _this2 = this;
 
+      var _a;
+
       var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
       var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
       var header = kendo_vue_common_1.getTemplate.call(this, {
@@ -648,7 +676,8 @@ var AutoComplete = {
               animate: popupSettings.animate,
               anchor: this.anchor,
               show: opened,
-              className: kendo_vue_common_1.classNames('k-list-container k-reset', popupSettings.className),
+              popupClass: kendo_vue_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a)),
+              className: popupSettings.className,
               appendTo: popupSettings.appendTo
             },
             dir: dir !== undefined ? dir : this.base.dirCalculated
@@ -658,13 +687,22 @@ var AutoComplete = {
             animate: popupSettings.animate,
             anchor: this.anchor,
             show: opened,
-            className: kendo_vue_common_1.classNames('k-list-container k-reset', popupSettings.className),
+            popupClass: kendo_vue_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a)),
+            className: popupSettings.className,
             appendTo: popupSettings.appendTo
           },
           dir: dir !== undefined ? dir : this.base.dirCalculated
         }, this.v3 ? function () {
-          return [header, renderList.call(_this2), footer];
-        } : [header, renderList.call(_this2), footer])
+          return [header && h("div", {
+            "class": "k-list-header"
+          }, [header]), renderList.call(_this2), footer && h("div", {
+            "class": "k-list-footer"
+          }, [footer])];
+        } : [header && h("div", {
+          "class": "k-list-header"
+        }, [header]), renderList.call(_this2), footer && h("div", {
+          "class": "k-list-footer"
+        }, [footer])])
       );
     };
 
@@ -694,11 +732,7 @@ var AutoComplete = {
     };
 
     var autoComplete = h("span", {
-      "class": kendo_vue_common_1.classNames('k-widget k-autocomplete', className, {
-        'k-state-disabled': disabled,
-        'k-state-focused': focused && !disabled,
-        'k-state-invalid': !isValid
-      }),
+      "class": kendo_vue_common_1.classNames('k-autocomplete k-input', (_a = {}, _a["k-input-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-input-" + fillMode] = fillMode, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-focus'] = focused && !disabled, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a)),
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this.anchor,
@@ -727,6 +761,6 @@ var AutoComplete = {
     }, [this.$props.label]) : null]) : autoComplete;
   }
 };
-exports.AutoComplete = AutoComplete;
-var AutoCompleteVue3 = AutoComplete;
-exports.AutoCompleteVue3 = AutoCompleteVue3;
+exports.AutoCompleteVue2 = AutoCompleteVue2;
+var AutoComplete = AutoCompleteVue2;
+exports.AutoComplete = AutoComplete;

package/dist/npm/AutoComplete/AutoCompleteProps.d.ts

@@ -165,4 +165,43 @@ export interface AutoCompleteProps extends FormComponentProps {
      * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
      */
     footer?: any;
+    /**
+     * Configures the `size` of the AutoComnplete.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the AutoComnplete.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the AutoComnplete.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
 }

package/dist/npm/ComboBox/ComboBox.d.ts

@@ -1,4 +1,3 @@
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
 declare type DefaultData<V> = object | ((this: V) => ComboBoxData);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -6,7 +5,7 @@ declare type DefaultMethods<V> = {
 import { ComboBoxProps } from './ComboBoxProps';
 import { DropDownStateBase, InternalState } from './../common/settings';
 import { FormComponentValidity } from '@progress/kendo-vue-common';
-import { DefineComponent } from '../additionalTypes';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 /**
  * @hidden
  */
@@ -88,11 +87,11 @@ export interface ComboBoxComputed {
 /**
  * @hidden
  */
-export interface ComboBoxAll extends ComboBoxMethods, ComboBoxState, ComboBoxData, ComboBoxComputed, Vue {
+export interface ComboBoxAll extends ComboBoxMethods, ComboBoxState, ComboBoxData, ComboBoxComputed, Vue2type {
 }
 /**
  * Represents the default `ComboBox` component.
  */
-declare let ComboBox: ComponentOptions<Vue, DefaultData<ComboBoxData>, DefaultMethods<ComboBoxAll>, ComboBoxComputed, RecordPropsDefinition<ComboBoxProps>>;
-declare const ComboBoxVue3: DefineComponent<ComboBoxProps, any, ComboBoxData, ComboBoxComputed, ComboBoxMethods, {}, {}, {}, string, ComboBoxProps, ComboBoxProps, {}>;
-export { ComboBox, ComboBoxVue3 };
+declare let ComboBoxVue2: ComponentOptions<Vue2type, DefaultData<ComboBoxData>, DefaultMethods<ComboBoxAll>, ComboBoxComputed, RecordPropsDefinition<ComboBoxProps>>;
+declare const ComboBox: DefineComponent<ComboBoxProps, any, ComboBoxData, ComboBoxComputed, ComboBoxMethods, {}, {}, {}, string, ComboBoxProps, ComboBoxProps, {}>;
+export { ComboBox, ComboBoxVue2 };

package/dist/npm/ComboBox/ComboBox.js

@@ -19,7 +19,7 @@ var __assign = undefined && undefined.__assign || function () {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComboBoxVue3 = exports.ComboBox = void 0; // @ts-ignore
+exports.ComboBoxVue2 = exports.ComboBox = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -31,6 +31,11 @@ var DropDownBase_1 = require("../common/DropDownBase");
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+
+var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
+    roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
+
 var utils_1 = require("../common/utils");
 
 var SearchBar_1 = require("../common/SearchBar");
@@ -46,7 +51,7 @@ var VALIDATION_MESSAGE = 'Please enter a valid value!';
  * Represents the default `ComboBox` component.
  */
 
-var ComboBox = {
+var ComboBoxVue2 = {
   name: 'KendoComboBox',
   model: {
     event: 'changemodel'
@@ -155,7 +160,28 @@ var ComboBox = {
       default: true
     },
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    }
   },
   data: function data() {
     return {
@@ -201,8 +227,8 @@ var ComboBox = {
     this.hasMounted = true; // @ts-ignore
 
     this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
-    this.base.wrapper = this.v3 ? this.baseWrapperRef : this.$refs.baseWrapper;
-    this.element = this.v3 ? this.elementRef : this.$refs.element;
+    this.base.wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
+    this.element = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
     this.base.didMount();
     this.setValidity();
   },
@@ -218,7 +244,6 @@ var ComboBox = {
     var closing = prevOpened && !opened;
     var list = this.$refs.list;
     var scrollElement = this.$refs.scrollElement;
-    var scroller = this.$refs.scroller;
     var selectedItem = this.computedValue();
     this.valueOnDidUpdate = selectedItem;
 
@@ -233,8 +258,9 @@ var ComboBox = {
       this.base.vs.scrollElement = scrollElement;
     }
 
-    if (scroller) {
-      this.base.vs.scrollerRef(scroller);
+    if (list && dataItems.length) {
+      // @ts-ignore
+      this.base.vs.scrollerRef(list.$el);
     } // @ts-ignore
 
 
@@ -305,10 +331,10 @@ var ComboBox = {
       get: function get() {
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
         return {
-          'k-textbox-container': true,
-          'k-state-focused': this.currentFocused,
-          'k-state-empty': !this.computedValue(),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
+          'k-empty': !this.computedValue(),
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -696,20 +722,25 @@ var ComboBox = {
     }
   },
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
-    var _a = this.$props,
-        dir = _a.dir,
-        disabled = _a.disabled,
-        clearButton = _a.clearButton,
-        label = _a.label,
-        textField = _a.textField,
-        className = _a.className,
-        style = _a.style,
-        loading = _a.loading,
-        iconClassName = _a.iconClassName,
-        virtual = _a.virtual;
+    var _b = this.$props,
+        dir = _b.dir,
+        disabled = _b.disabled,
+        clearButton = _b.clearButton,
+        label = _b.label,
+        textField = _b.textField,
+        className = _b.className,
+        style = _b.style,
+        loading = _b.loading,
+        iconClassName = _b.iconClassName,
+        virtual = _b.virtual,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
     var focused = this.currentFocused;
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
@@ -762,13 +793,10 @@ var ComboBox = {
             textField: textField,
             valueField: dataItemKey,
             optionsGuid: base.guid,
-            wrapperStyle: !vs.enabled ? {
+            wrapperStyle: {
               maxHeight: popupSettings.height
-            } : {
-              float: 'left',
-              width: '100%'
             },
-            wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined,
+            wrapperCssClass: 'k-list-content',
             listStyle: vs.enabled ? {
               transform: translate
             } : undefined,
@@ -784,13 +812,10 @@ var ComboBox = {
           valueField: dataItemKey,
           optionsGuid: base.guid,
           ref: 'list',
-          wrapperStyle: !vs.enabled ? {
+          wrapperStyle: {
             maxHeight: popupSettings.height
-          } : {
-            float: 'left',
-            width: '100%'
           },
-          wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined,
+          wrapperCssClass: 'k-list-content',
           listStyle: vs.enabled ? {
             transform: translate
           } : undefined,
@@ -798,27 +823,14 @@ var ComboBox = {
           skip: skip,
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
-            "listclick": this.handleItemClick
+            "listclick": this.handleItemClick,
+            "scroll": vs.scrollHandler
           },
           itemRender: itemRender,
-          noDataRender: listNoDataRender
-        })
+          noDataRender: listNoDataRender,
+          onScroll: vs.scrollHandler
+        }, [renderScrollElement.call(this)])
       );
-    }; // Common rendering
-
-
-    var renderScrollWrapper = function renderScrollWrapper(children) {
-      return vs.enabled ? h("div", {
-        onScroll: vs.scrollHandler,
-        on: this.v3 ? undefined : {
-          "scroll": vs.scrollHandler
-        },
-        ref: 'scroller',
-        style: {
-          height: popupSettings.height,
-          overflowY: 'scroll'
-        }
-      }, [children]) : children;
     };
 
     var renderScrollElement = function renderScrollElement() {
@@ -831,6 +843,8 @@ var ComboBox = {
     var renderListContainer = function renderListContainer() {
       var _this2 = this;
 
+      var _a;
+
       var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
       var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
       var header = kendo_vue_common_1.getTemplate.call(this, {
@@ -860,7 +874,8 @@ var ComboBox = {
               animate: popupSettings.animate,
               anchor: this.anchor,
               show: opened,
-              className: kendo_vue_common_1.classNames('k-list-container k-reset', popupSettings.className),
+              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)),
+              className: popupSettings.className,
               appendTo: popupSettings.appendTo
             },
             dir: dir !== undefined ? dir : this.base.dirCalculated
@@ -869,13 +884,22 @@ var ComboBox = {
             animate: popupSettings.animate,
             anchor: this.anchor,
             show: opened,
-            className: kendo_vue_common_1.classNames('k-list-container k-reset', popupSettings.className),
+            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)),
+            className: popupSettings.className,
             appendTo: popupSettings.appendTo
           },
           dir: dir !== undefined ? dir : this.base.dirCalculated
         }, this.v3 ? function () {
-          return [header, renderScrollWrapper.call(_this2, [renderList.call(_this2), renderScrollElement.call(_this2)]), footer];
-        } : [header, renderScrollWrapper.call(_this2, [renderList.call(_this2), renderScrollElement.call(_this2)]), footer])
+          return [header && h("div", {
+            "class": "k-list-header"
+          }, [header]), renderList.call(_this2), footer && h("div", {
+            "class": "k-list-footer"
+          }, [footer])];
+        } : [header && h("div", {
+          "class": "k-list-header"
+        }, [header]), renderList.call(_this2), footer && h("div", {
+          "class": "k-list-footer"
+        }, [footer])])
       );
     };
 
@@ -951,10 +975,7 @@ var ComboBox = {
     };
 
     var combobox = h("span", {
-      "class": kendo_vue_common_1.classNames('k-widget k-combobox', {
-        'k-combobox-clearable': clearButton,
-        'k-state-invalid': !isValid
-      }, className),
+      "class": kendo_vue_common_1.classNames('k-combobox k-input', (_a = {}, _a["k-input-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-input-" + fillMode] = fillMode, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a['k-focus'] = focused && !disabled, _a), className),
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this.anchor,
@@ -965,23 +986,27 @@ var ComboBox = {
       attrs: this.v3 ? undefined : {
         dir: dir
       }
-    }, [h("span", {
-      ref: this.v3 ? function (el) {
-        _this.baseWrapperRef = el;
-      } : 'baseWrapper',
-      "class": kendo_vue_common_1.classNames('k-dropdown-wrap', {
-        'k-state-disabled': disabled,
-        'k-state-focused': focused && !disabled
-      })
-    }, [renderSearchBar.call(this, inputText || '', id), renderClearButton && // @ts-ignore  function children
+    }, [renderSearchBar.call(this, inputText || '', id), renderClearButton && !loading && // @ts-ignore  function children
     h(ClearButton_1.ClearButton, {
       onClearclick: this.clearButtonClick,
       on: this.v3 ? undefined : {
         "clearclick": this.clearButtonClick
       },
       key: "clearbutton"
-    }), h("span", {
-      "class": "k-select",
+    }), loading && h("span", {
+      "class": "k-icon k-i-loading",
+      key: "loading"
+    }), // @ts-ignore
+    h(kendo_vue_buttons_1.Button, {
+      size: size,
+      attrs: this.v3 ? undefined : {
+        size: size,
+        fillMode: fillMode,
+        iconClass: kendo_vue_common_1.classNames('k-icon k-i-arrow-s', iconClassName)
+      },
+      fillMode: fillMode,
+      "class": 'k-input-button',
+      iconClass: kendo_vue_common_1.classNames('k-icon k-i-arrow-s', iconClassName),
       onClick: this.toggleBtnClick,
       on: this.v3 ? undefined : {
         "click": this.toggleBtnClick,
@@ -992,12 +1017,7 @@ var ComboBox = {
       onMousedown: function mousedown(e) {
         return e.preventDefault();
       }
-    }, [h("span", {
-      "class": kendo_vue_common_1.classNames('k-icon', iconClassName, {
-        'k-i-arrow-s': !loading && !iconClassName,
-        'k-i-loading': loading && !iconClassName
-      })
-    })])]), renderListContainer.call(this)]);
+    }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       onFocusin: this.handleFocus,
@@ -1019,6 +1039,6 @@ var ComboBox = {
     }, [this.$props.label]) : null]) : combobox;
   }
 };
-exports.ComboBox = ComboBox;
-var ComboBoxVue3 = ComboBox;
-exports.ComboBoxVue3 = ComboBoxVue3;
+exports.ComboBoxVue2 = ComboBoxVue2;
+var ComboBox = ComboBoxVue2;
+exports.ComboBox = ComboBox;

package/dist/npm/ComboBox/ComboBoxProps.d.ts

@@ -195,4 +195,43 @@ export interface ComboBoxProps extends FormComponentProps {
      * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
      */
     footer?: any;
+    /**
+     * Configures the `size` of the ComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the ComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the ComboBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
 }

package/dist/npm/DropDownList/DropDownList.d.ts

@@ -1,10 +1,9 @@
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
 declare type DefaultData<V> = object | ((this: V) => DropDownListData);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
 import { FormComponentValidity } from '@progress/kendo-vue-common';
-import { DefineComponent } from '../additionalTypes';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 import { DropDownListProps } from './DropDownListProps';
 import { DropDownStateBase, InternalState } from './../common/settings';
 /**
@@ -89,11 +88,11 @@ export interface DropDownListComputed {
 /**
  * @hidden
  */
-export interface DropDownListAll extends DropDownListMethods, DropDownListState, DropDownListData, DropDownListComputed, Vue {
+export interface DropDownListAll extends DropDownListMethods, DropDownListState, DropDownListData, DropDownListComputed, Vue2type {
 }
 /**
  * Represents the default `DropDownList` component.
  */
-declare let DropDownList: ComponentOptions<Vue, DefaultData<DropDownListData>, DefaultMethods<DropDownListAll>, DropDownListComputed, RecordPropsDefinition<DropDownListProps>>;
-declare let DropDownListVue3: DefineComponent<DropDownListProps, any, DropDownListData, DropDownListComputed, DropDownListMethods, {}, {}, {}, string, DropDownListProps, DropDownListProps, {}>;
-export { DropDownList, DropDownListVue3 };
+declare let DropDownListVue2: ComponentOptions<Vue2type, DefaultData<DropDownListData>, DefaultMethods<DropDownListAll>, DropDownListComputed, RecordPropsDefinition<DropDownListProps>>;
+declare let DropDownList: DefineComponent<DropDownListProps, any, DropDownListData, DropDownListComputed, DropDownListMethods, {}, {}, {}, string, DropDownListProps, DropDownListProps, {}>;
+export { DropDownList, DropDownListVue2 };