@progress/kendo-vue-inputs 2.7.3 → 3.0.0-dev.202201141128

package/dist/es/radiobutton/RadioGroup.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -45,8 +44,8 @@ export interface RadioGroupComputed {
 /**
  * @hidden
  */
-export interface RadioGroupAll extends Vue, RadioGroupMethods, RadioGroupComputed, RadioGroupState, RadioGroupData {
+export interface RadioGroupAll extends Vue2type, RadioGroupMethods, RadioGroupComputed, RadioGroupState, RadioGroupData {
 }
-declare let RadioGroup: ComponentOptions<RadioGroupAll, DefaultData<RadioGroupData>, DefaultMethods<RadioGroupAll>, RadioGroupComputed, RecordPropsDefinition<RadioGroupProps>>;
-declare let RadioGroupVue3: DefineComponent<RadioGroupProps, any, RadioGroupData, RadioGroupComputed, RadioGroupMethods, {}, {}, {}, string, RadioGroupProps, RadioGroupProps, {}>;
-export { RadioGroup, RadioGroupVue3 };
+declare let RadioGroupVue2: ComponentOptions<RadioGroupAll, DefaultData<RadioGroupData>, DefaultMethods<RadioGroupAll>, RadioGroupComputed, RecordPropsDefinition<RadioGroupProps>>;
+declare let RadioGroup: DefineComponent<RadioGroupProps, any, RadioGroupData, RadioGroupComputed, RadioGroupMethods, {}, {}, {}, string, RadioGroupProps, RadioGroupProps, {}>;
+export { RadioGroup, RadioGroupVue2 };

package/dist/es/radiobutton/RadioGroup.js

@@ -7,7 +7,7 @@ var inject = allVue.inject;
 import { RadioButton } from './RadioButton';
 import { guid, classNames, focusFirstFocusableChild, validatePackage, isRtl } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
-var RadioGroup = {
+var RadioGroupVue2 = {
   name: 'KendoRadioGroup',
   props: {
     ariaLabelledBy: String,
@@ -198,5 +198,5 @@ var RadioGroup = {
     }, [radioOptions]);
   }
 };
-var RadioGroupVue3 = RadioGroup;
-export { RadioGroup, RadioGroupVue3 };
+var RadioGroup = RadioGroupVue2;
+export { RadioGroup, RadioGroupVue2 };

package/dist/es/radiobutton/interfaces/RadioButtonProps.d.ts

@@ -50,6 +50,18 @@ export interface RadioButtonProps {
      * Sets the `name` property of the Radio button.
      */
     name?: string;
+    /**
+     * Configures the `size` of the RadioButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
     /**
      * Sets the `tabIndex` property of the Radio button.
      * Defaults to `0`.

package/dist/es/slider/Slider.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -124,8 +123,8 @@ export interface SliderComputed {
 /**
  * @hidden
  */
-export interface SliderAll extends Vue, SliderMethods, SliderComputed, SliderState, SliderData {
+export interface SliderAll extends Vue2type, SliderMethods, SliderComputed, SliderState, SliderData {
 }
-declare let Slider: ComponentOptions<SliderAll, DefaultData<SliderData>, DefaultMethods<SliderAll>, SliderComputed, RecordPropsDefinition<SliderProps>>;
-declare const SliderVue3: DefineComponent<SliderProps, any, SliderData, SliderComputed, SliderMethods, {}, {}, {}, string, SliderProps, SliderProps, {}>;
-export { Slider, SliderVue3 };
+declare let SliderVue2: ComponentOptions<SliderAll, DefaultData<SliderData>, DefaultMethods<SliderAll>, SliderComputed, RecordPropsDefinition<SliderProps>>;
+declare const Slider: DefineComponent<SliderProps, any, SliderData, SliderComputed, SliderMethods, {}, {}, {}, string, SliderProps, SliderProps, {}>;
+export { Slider, SliderVue2 };

package/dist/es/slider/Slider.js

@@ -20,13 +20,14 @@ var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
+import { Button } from '@progress/kendo-vue-buttons';
 import { getDefaultSlots } from '@progress/kendo-vue-common';
 import { Keys, classNames, Draggable, getTabIndex, validatePackage } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from './../messages';
 import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
 import { packageMetadata } from '../package-metadata';
-var Slider = {
+var SliderVue2 = {
   name: 'KendoSlider',
   model: {
     event: 'changemodel'
@@ -206,25 +207,27 @@ var Slider = {
         position: 'relative',
         flexDirection: this.$props.vertical ? 'column-reverse' : 'row'
       }
-    }, [this.$props.buttons && h("a", {
-      "class": "k-button k-button-decrease",
+    }, [this.$props.buttons && // @ts-ignore
+    h(Button, {
+      tabIndex: -1,
+      attrs: this.v3 ? undefined : {
+        tabIndex: -1,
+        icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+        rounded: 'full',
+        title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
+      },
+      icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
       style: {
         position: 'relative'
       },
+      rounded: 'full',
+      "class": "k-button-decrease",
       title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue]),
-      attrs: this.v3 ? undefined : {
-        title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
-      },
       onClick: this.decrement,
       on: this.v3 ? undefined : {
         "click": this.decrement
       }
-    }, [h("span", {
-      "class": classNames('k-icon', {
-        'k-i-arrow-s': this.$props.vertical,
-        'k-i-arrow-w': !this.$props.vertical
-      })
-    })]), // @ts-ignore  function children
+    }), // @ts-ignore  function children
     h(Draggable, {
       onDrag: this.dragOver,
       on: this.v3 ? undefined : {
@@ -307,25 +310,27 @@ var Slider = {
         bottom: 'calc(' + percentValue + '% - 8px)',
         zIndex: 1
       } : (_b = {}, _b[_this.currentDir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentValue + '% - 8px)', _b.zIndex = 1, _b)
-    })])])]), this.$props.buttons && h("a", {
-      "class": "k-button k-button-increase",
+    })])])]), this.$props.buttons && // @ts-ignore
+    h(Button, {
+      tabIndex: -1,
+      attrs: this.v3 ? undefined : {
+        tabIndex: -1,
+        icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+        rounded: 'full',
+        title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
+      },
+      icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+      rounded: 'full',
       style: {
         position: 'relative'
       },
+      "class": "k-button-increase",
       title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue]),
-      attrs: this.v3 ? undefined : {
-        title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
-      },
       onClick: this.increment,
       on: this.v3 ? undefined : {
         "click": this.increment
       }
-    }, [h("span", {
-      "class": classNames('k-icon', {
-        'k-i-arrow-n': this.$props.vertical,
-        'k-i-arrow-e': !this.$props.vertical
-      })
-    })])])]);
+    })])]);
   },
   methods: {
     focus: function focus() {
@@ -416,5 +421,5 @@ var Slider = {
     }
   }
 };
-var SliderVue3 = Slider;
-export { Slider, SliderVue3 };
+var Slider = SliderVue2;
+export { Slider, SliderVue2 };

package/dist/es/slider/SliderLabel.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -51,8 +50,8 @@ export interface SliderLabelData {
 /**
  * @hidden
  */
-export interface SliderLabelAll extends Vue, SliderLabelMethods, SliderLabelData, SliderLabelState {
+export interface SliderLabelAll extends Vue2type, SliderLabelMethods, SliderLabelData, SliderLabelState {
 }
-declare let SliderLabel: ComponentOptions<SliderLabelAll, DefaultData<SliderLabelData>, DefaultMethods<SliderLabelAll>, {}, RecordPropsDefinition<SliderLabelProps>>;
-declare const SliderLabelVue3: DefineComponent<SliderLabelProps, any, SliderLabelData, {}, SliderLabelMethods, {}, {}, {}, string, SliderLabelProps, SliderLabelProps, {}>;
-export { SliderLabel, SliderLabelVue3 };
+declare let SliderLabelVue2: ComponentOptions<SliderLabelAll, DefaultData<SliderLabelData>, DefaultMethods<SliderLabelAll>, {}, RecordPropsDefinition<SliderLabelProps>>;
+declare const SliderLabel: DefineComponent<SliderLabelProps, any, SliderLabelData, {}, SliderLabelMethods, {}, {}, {}, string, SliderLabelProps, SliderLabelProps, {}>;
+export { SliderLabel, SliderLabelVue2 };

package/dist/es/slider/SliderLabel.js

@@ -26,7 +26,7 @@ import { getDefaultSlots } from '@progress/kendo-vue-common';
 
 export var SLIDER_LABEL_ATTRIBUTE = 'data-slider-label'; // tslint:enable:max-line-length
 
-var SliderLabel = {
+var SliderLabelVue2 = {
   name: 'KendoSliderLabel',
   // @ts-ignore
   emits: {
@@ -107,5 +107,5 @@ var SliderLabel = {
     }
   }
 };
-var SliderLabelVue3 = SliderLabel;
-export { SliderLabel, SliderLabelVue3 };
+var SliderLabel = SliderLabelVue2;
+export { SliderLabel, SliderLabelVue2 };

package/dist/es/switch/Switch.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -20,6 +19,10 @@ export interface SwitchChangeEvent {
  * Represents the props of the [Kendo UI for Vue Switch component]({% slug overview_switch %}).
  */
 export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
+    /**
+     * Specifies the `name` of the Switch.
+     */
+    name?: string;
     /**
      * Specifies the `accessKey` of the Switch.
      */
@@ -52,6 +55,46 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
      * Sets the `id` of the Switch.
      */
     id?: string;
+    /**
+     * Configures the `size` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `trackRounded` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - circle
+     * - null&mdash;Does not set a trackRounded `className`.
+     *
+     * @default `full`
+     */
+    trackRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `thumbRounded` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - circle
+     * - null&mdash;Does not set a thumbRounded `className`.
+     *
+     * @default `circle`
+     */
+    thumbRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
     /**
      * 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).
      * For example these elements could contain error or hint message.
@@ -124,8 +167,8 @@ export interface SwitchData {
 /**
  * @hidden
  */
-export interface SwitchAll extends Vue, SwitchMethods, SwitchData, SwitchComputed, SwitchState {
+export interface SwitchAll extends Vue2type, SwitchMethods, SwitchData, SwitchComputed, SwitchState {
 }
-declare let Switch: ComponentOptions<SwitchAll, DefaultData<SwitchData>, DefaultMethods<SwitchAll>, SwitchComputed, RecordPropsDefinition<SwitchProps>>;
-declare const SwitchVue3: DefineComponent<SwitchProps, any, SwitchData, SwitchComputed, SwitchMethods, {}, {}, {}, string, SwitchProps, SwitchProps, {}>;
-export { Switch, SwitchVue3 };
+declare let SwitchVue2: ComponentOptions<SwitchAll, DefaultData<SwitchData>, DefaultMethods<SwitchAll>, SwitchComputed, RecordPropsDefinition<SwitchProps>>;
+declare const Switch: DefineComponent<SwitchProps, any, SwitchData, SwitchComputed, SwitchMethods, {}, {}, {}, string, SwitchProps, SwitchProps, {}>;
+export { Switch, SwitchVue2 };

package/dist/es/switch/Switch.js

@@ -2,16 +2,12 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-import { guid, noop, Keys, getTabIndex, validatePackage, isRtl } from '@progress/kendo-vue-common';
+import { guid, noop, Keys, getTabIndex, validatePackage, isRtl, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, switchValidation } from './../messages';
-import { packageMetadata } from '../package-metadata';
-var SWITCH_CONTAINER = 'k-switch-container';
-var SWITCH_HANDLE = 'k-switch-handle';
-var SWITCH_LABEL_ON = 'k-switch-label-on';
-var SWITCH_LABEL_OFF = 'k-switch-label-off'; // tslint:enable:max-line-length
+import { packageMetadata } from '../package-metadata'; // tslint:enable:max-line-length
 
-var Switch = {
+var SwitchVue2 = {
   name: 'KendoSwitch',
   model: {
     event: 'changemodel'
@@ -25,6 +21,7 @@ var Switch = {
     'blur': null
   },
   props: {
+    name: String,
     accessKey: String,
     checked: {
       type: Boolean,
@@ -39,6 +36,27 @@ var Switch = {
       type: Boolean,
       default: false
     },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    trackRounded: {
+      type: String,
+      default: 'full',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    thumbRounded: {
+      type: String,
+      default: 'full',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
     dir: String,
     id: String,
     ariaLabelledBy: String,
@@ -93,16 +111,26 @@ var Switch = {
       return this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.checked !== undefined ? this.$props.checked : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentChecked;
     },
     switchClassName: function switchClassName() {
+      var _a;
+
       var isValid = !this.validityStyles || this.validity().valid;
-      return {
-        'k-widget': true,
-        'k-switch': true,
-        'k-switch-on': this.computedValue,
-        'k-switch-off': !this.computedValue,
-        'k-state-focused': this.focused,
-        'k-state-disabled': this.$props.disabled,
-        'k-state-invalid': !isValid
-      };
+      return _a = {
+        'k-switch': true
+      }, _a["k-switch-" + kendoThemeMaps.sizeMap[this.$props.size]] = true, _a["k-rounded-" + this.$props.trackRounded] = this.$props.trackRounded, _a['k-switch-on'] = this.computedValue, _a['k-switch-off'] = !this.computedValue, _a['k-focus'] = this.focused, _a['k-disabled'] = this.$props.disabled, _a['k-invalid'] = !isValid, _a;
+    },
+    switchTrackClass: function switchTrackClass() {
+      var _a;
+
+      return _a = {
+        'k-switch-track': true
+      }, _a["k-rounded-" + this.$props.trackRounded] = this.$props.trackRounded, _a;
+    },
+    switchThumbClass: function switchThumbClass() {
+      var _a;
+
+      return _a = {
+        'k-switch-thumb': true
+      }, _a["k-rounded-" + this.$props.thumbRounded] = this.$props.thumbRounded, _a;
     }
   },
   mounted: function mounted() {
@@ -131,7 +159,8 @@ var Switch = {
         id = _a.id,
         offLabel = _a.offLabel,
         onLabel = _a.onLabel,
-        tabIndex = _a.tabIndex;
+        tabIndex = _a.tabIndex,
+        required = _a.required;
     return h("span", {
       "class": this.switchClassName,
       dir: this.currentDir,
@@ -149,7 +178,7 @@ var Switch = {
       onFocusout: this.handleWrapperBlur,
       onFocusin: this.handleWrapperFocus
     }, [h("span", {
-      "class": SWITCH_CONTAINER,
+      "class": this.switchTrackClass,
       id: id || this._id,
       attrs: this.v3 ? undefined : {
         id: id || this._id,
@@ -176,6 +205,8 @@ var Switch = {
       attrs: this.v3 ? undefined : {
         type: "checkbox",
         tabIndex: -1,
+        name: this.$props.name,
+        required: required !== undefined ? required : false,
         "aria-hidden": true
       },
       checked: this.v3 ? this.$props.checked : null,
@@ -187,6 +218,8 @@ var Switch = {
         _this.inputRef = el;
       } : 'input',
       tabIndex: -1,
+      name: this.$props.name,
+      required: required !== undefined ? required : false,
       "aria-hidden": true,
       value: this.v3 ? this.computedValue : null,
       style: {
@@ -202,12 +235,14 @@ var Switch = {
         "change": noop
       }
     }), h("span", {
-      "class": SWITCH_LABEL_ON
+      "class": 'k-switch-label-on'
     }, [onLabel]), h("span", {
-      "class": SWITCH_LABEL_OFF
+      "class": 'k-switch-label-off'
     }, [offLabel]), h("span", {
-      "class": SWITCH_HANDLE
-    })])]);
+      "class": 'k-switch-thumb-wrap'
+    }, [h("span", {
+      "class": this.switchThumbClass
+    })])])]);
   },
   methods: {
     focus: function focus() {
@@ -218,9 +253,6 @@ var Switch = {
     element: function element() {
       return this._element;
     },
-    name: function name() {
-      return this.$props.name;
-    },
     validity: function validity() {
       var customError = this.$props.validationMessage !== undefined;
       var isValid = this.$props.valid !== undefined ? this.$props.valid : !this.$props.required ? true : this.computedValue ? true : false;
@@ -303,5 +335,5 @@ var Switch = {
     }
   }
 };
-var SwitchVue3 = Switch;
-export { Switch, SwitchVue3 };
+var Switch = SwitchVue2;
+export { Switch, SwitchVue2 };

package/dist/es/textarea/TextArea.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -39,8 +38,8 @@ export interface TextAreaData {
 /**
  * @hidden
  */
-export interface TextAreaAll extends Vue, TextAreaMethods, TextAreaData, TextAreaComputed, TextAreaState {
+export interface TextAreaAll extends Vue2type, TextAreaMethods, TextAreaData, TextAreaComputed, TextAreaState {
 }
-declare let TextArea: ComponentOptions<TextAreaAll, DefaultData<TextAreaData>, DefaultMethods<TextAreaAll>, TextAreaComputed, RecordPropsDefinition<TextAreaProps>>;
-declare const TextAreaVue3: DefineComponent<TextAreaProps, any, TextAreaData, TextAreaComputed, TextAreaMethods, {}, {}, {}, string, TextAreaProps, TextAreaProps, {}>;
-export { TextArea, TextAreaVue3 };
+declare let TextAreaVue2: ComponentOptions<TextAreaAll, DefaultData<TextAreaData>, DefaultMethods<TextAreaAll>, TextAreaComputed, RecordPropsDefinition<TextAreaProps>>;
+declare const TextArea: DefineComponent<TextAreaProps, any, TextAreaData, TextAreaComputed, TextAreaMethods, {}, {}, {}, string, TextAreaProps, TextAreaProps, {}>;
+export { TextArea, TextAreaVue2 };

package/dist/es/textarea/TextArea.js

@@ -18,11 +18,11 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-import { guid, isRtl, getTabIndex, validatePackage // useDir,
+import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps // useDir,
 } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata'; // tslint:enable:max-line-length
 
-var TextArea = {
+var TextAreaVue2 = {
   name: 'KendoTextArea',
   inheritAttrs: false,
   model: {
@@ -52,6 +52,27 @@ var TextArea = {
     rows: Number,
     id: String,
     name: String,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'solid', 'flat', 'outline'].includes(value);
+      }
+    },
     required: Boolean,
     placeholder: String,
     tabIndex: Number,
@@ -71,11 +92,18 @@ var TextArea = {
   },
   computed: {
     rootClassName: function rootClassName() {
-      return {
-        'k-textarea': true,
-        'k-state-invalid': this.validityStyles === true ? !this.isValid : false,
-        'k-state-disabled': this.$props.disabled
-      };
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          fillMode = _b.fillMode,
+          rounded = _b.rounded,
+          required = _b.required;
+      var invalid = this.validityStyles === true ? !this.isValid : false;
+      return _a = {
+        'k-input': true,
+        'k-textarea': true
+      }, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-disabled'] = this.$props.disabled, _a['k-valid'] = !invalid, _a['k-invalid'] = invalid, _a['k-required'] = required, _a;
     },
     computedValue: function computedValue() {
       return this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
@@ -142,7 +170,7 @@ var TextArea = {
 
     var textarea = h('textarea', __assign(__assign({}, textAreaAttrs), {
       attrs: this.v3 ? undefined : textAreaAttrs,
-      'class': 'k-input',
+      'class': 'k-input-inner',
       ref: this.v3 ? function (el) {
         _this.elementRef = el;
       } : 'element',
@@ -171,7 +199,8 @@ var TextArea = {
       dir: this.currentDir,
       attrs: this.v3 ? undefined : {
         dir: this.currentDir
-      }
+      },
+      style: this.$attrs.style
     }, [textarea]);
   },
   methods: {
@@ -247,5 +276,5 @@ var TextArea = {
     }
   }
 };
-var TextAreaVue3 = TextArea;
-export { TextArea, TextAreaVue3 };
+var TextArea = TextAreaVue2;
+export { TextArea, TextAreaVue2 };

package/dist/es/textarea/interfaces/TextAreaProps.d.ts

@@ -64,6 +64,43 @@ export interface TextAreaProps extends FormComponentProps {
      * Defaults to `0`.
      */
     tabIndex?: number;
+    /**
+     * Configures the `size` of the NumericTextBox.
+     *
+     * 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 NumericTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the NumericTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
     /**
      * Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
      */

package/dist/npm/additionalTypes.ts

@@ -1,3 +1,9 @@
 // @ts-ignore
 import { DefineComponent } from 'vue';
-export { DefineComponent };
+// @ts-ignore
+import * as Vue from 'vue';
+// @ts-ignore
+type Vue2type = Vue.default;
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/npm/checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -67,8 +66,8 @@ export interface CheckboxComputed {
 /**
  * @hidden
  */
-export interface CheckboxAll extends Vue, CheckboxMethods, CheckboxState, CheckboxData, CheckboxComputed {
+export interface CheckboxAll extends Vue2type, CheckboxMethods, CheckboxState, CheckboxData, CheckboxComputed {
 }
-declare let Checkbox: ComponentOptions<CheckboxAll, DefaultData<CheckboxData>, DefaultMethods<CheckboxAll>, CheckboxComputed, RecordPropsDefinition<CheckboxProps>>;
-declare const CheckboxVue3: DefineComponent<CheckboxProps, any, CheckboxData, CheckboxComputed, CheckboxMethods, {}, {}, {}, string, CheckboxProps, CheckboxProps, {}>;
-export { Checkbox, CheckboxVue3 };
+declare let CheckboxVue2: ComponentOptions<CheckboxAll, DefaultData<CheckboxData>, DefaultMethods<CheckboxAll>, CheckboxComputed, RecordPropsDefinition<CheckboxProps>>;
+declare const Checkbox: DefineComponent<CheckboxProps, any, CheckboxData, CheckboxComputed, CheckboxMethods, {}, {}, {}, string, CheckboxProps, CheckboxProps, {}>;
+export { Checkbox, CheckboxVue2 };