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

package/dist/es/input/Input.js

@@ -19,14 +19,13 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-import { guid, noop, validatePackage } from '@progress/kendo-vue-common';
+import { guid, noop, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
-var Input = {
+var InputVue2 = {
   model: {
     event: 'changemodel'
   },
-  inheritAttrs: false,
   // @ts-ignore
   emits: {
     'input': null,
@@ -58,6 +57,27 @@ var Input = {
       type: Boolean,
       default: false
     },
+    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'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'solid', 'flat', 'outline'].includes(value);
+      }
+    },
     dir: {
       type: String
     },
@@ -116,12 +136,6 @@ var Input = {
     var h = gh || createElement;
     var listeners = this.v3 ? this.$attrs : this.$listeners;
     var isValid = !this.$props.validityStyles || this.validity().valid;
-    var hasInput = Object.keys(this.$attrs).some(function (attr) {
-      return attr === 'onInput';
-    });
-    var hasModel = Object.keys(this.$attrs).some(function (attr) {
-      return attr === 'onUpdate:modelValue';
-    });
     var _a = this.$props,
         label = _a.label,
         id = _a.id,
@@ -139,7 +153,7 @@ var Input = {
       id: inputId,
       required: required,
       value: this.computedValue,
-      class: __assign({}, this.inputClassNames()),
+      class: 'k-input-inner',
       ref: this.v3 ? function (el) {
         _this.inputRef = el;
       } : 'input',
@@ -158,6 +172,9 @@ var Input = {
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
     }));
+    var inputWrapper = h("span", {
+      "class": this.inputWrapperClass
+    }, [textbox]);
     return label ? // @ts-ignore function children
     h(FloatingLabel, {
       label: label,
@@ -177,8 +194,8 @@ var Input = {
       editorPlaceholder: this.$data.focused ? this.$props.placeholder : '',
       dir: this.$props.dir
     }, this.v3 ? function () {
-      return [textbox];
-    } : [textbox]) : textbox;
+      return [inputWrapper];
+    } : [inputWrapper]) : inputWrapper;
   },
   methods: {
     emitFocus: function emitFocus(e) {
@@ -194,13 +211,6 @@ var Input = {
         this.$data.input.focus();
       }
     },
-    inputClassNames: function inputClassNames() {
-      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
-      return {
-        'k-textbox': true,
-        'k-state-invalid': !isValid && isValid !== undefined
-      };
-    },
     validity: function validity() {
       var result = {
         badInput: this.$data.input ? this.$data.input.validity.badInput : false,
@@ -296,14 +306,27 @@ var Input = {
         var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
         return {
           'k-floating-label-container': true,
-          'k-state-focused': this.$data.focused,
+          'k-focus': this.$data.focused,
           'k-state-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
           'k-autofill': this.$data.autofill,
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
     },
+    inputWrapperClass: function inputWrapperClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          fillMode = _b.fillMode,
+          rounded = _b.rounded;
+      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+      return _a = {
+        'k-textbox': true,
+        'k-input': true
+      }, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a;
+    },
     computedValue: {
       get: function get() {
         return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
@@ -311,5 +334,5 @@ var Input = {
     }
   }
 };
-var InputVue3 = Input;
-export { Input, InputVue3 };
+var Input = InputVue2;
+export { Input, InputVue2 };

package/dist/es/main.d.ts

@@ -10,7 +10,7 @@ export * from './colors/interfaces/ColorPickerFocusEvent';
 export * from './colors/interfaces/ColorPickerPaletteSettings';
 export * from './colors/interfaces/ColorPickerPopupSettings';
 export * from './colors/interfaces/ColorPickerProps';
-export { Switch, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
+export { Switch, SwitchVue2, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
 export * from './input/Input';
 export * from './numerictextbox/NumericTextBox';
 export * from './maskedtextbox/MaskedTextBox';

package/dist/es/main.js

@@ -8,7 +8,7 @@ export * from './colors/interfaces/ColorPickerFocusEvent';
 export * from './colors/interfaces/ColorPickerPaletteSettings';
 export * from './colors/interfaces/ColorPickerPopupSettings';
 export * from './colors/interfaces/ColorPickerProps';
-export { Switch } from './switch/Switch';
+export { Switch, SwitchVue2 } from './switch/Switch';
 export * from './input/Input';
 export * from './numerictextbox/NumericTextBox';
 export * from './maskedtextbox/MaskedTextBox';

package/dist/es/maskedtextbox/MaskedTextBox.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) => MaskedTextBoxData);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -40,7 +39,7 @@ interface MaskedTextBoxState {
 /**
  * @hidden
  */
-export interface MaskedTextBoxMethods extends Vue {
+export interface MaskedTextBoxMethods extends Vue2type {
     focus: (e: any) => void;
     computedValue: () => any;
     rawValue: () => string;
@@ -69,6 +68,6 @@ export interface MaskedTextBoxAll extends MaskedTextBoxMethods, MaskedTextBoxSta
 /**
  * Represents the default `MaskedTextBox` component.
  */
-declare let MaskedTextBox: ComponentOptions<Vue, DefaultData<MaskedTextBoxData>, DefaultMethods<MaskedTextBoxAll>, MaskedTextBoxComputed, RecordPropsDefinition<MaskedTextBoxProps>>;
-declare const MaskedTextBoxVue3: DefineComponent<MaskedTextBoxProps, any, MaskedTextBoxData, MaskedTextBoxComputed, MaskedTextBoxMethods, {}, {}, {}, string, MaskedTextBoxProps, MaskedTextBoxProps, {}>;
-export { MaskedTextBox, MaskedTextBoxVue3 };
+declare let MaskedTextBoxVue2: ComponentOptions<Vue2type, DefaultData<MaskedTextBoxData>, DefaultMethods<MaskedTextBoxAll>, MaskedTextBoxComputed, RecordPropsDefinition<MaskedTextBoxProps>>;
+declare const MaskedTextBox: DefineComponent<MaskedTextBoxProps, any, MaskedTextBoxData, MaskedTextBoxComputed, MaskedTextBoxMethods, {}, {}, {}, string, MaskedTextBoxProps, MaskedTextBoxProps, {}>;
+export { MaskedTextBox, MaskedTextBoxVue2 };

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -5,13 +5,13 @@ var gh = allVue.h;
 var ref = allVue.ref;
 import { MaskingService } from './masking.service';
 import { defaultRules, maskingChanged, returnFalse } from './utils';
-import { guid, classNames, getTabIndex, validatePackage } from '@progress/kendo-vue-common';
+import { guid, classNames, getTabIndex, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * Represents the default `MaskedTextBox` component.
  */
 
-var MaskedTextBox = {
+var MaskedTextBoxVue2 = {
   model: {
     event: 'changemodel'
   },
@@ -30,6 +30,27 @@ var MaskedTextBox = {
     accessKey: String,
     disabled: Boolean,
     readonly: Boolean,
+    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);
+      }
+    },
     prompt: {
       type: String,
       default: '_'
@@ -168,10 +189,10 @@ var MaskedTextBox = {
       get: function get() {
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
         return {
-          'k-textbox-container': true,
-          'k-state-focused': this.currentFocused,
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
           'k-state-empty': !this.computedValue(),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -311,11 +332,18 @@ var MaskedTextBox = {
       }
     }
   },
+  // @ts-ignore
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
     var inputId = this.$props.id || this.inputId;
+    var _b = this.$props,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
     var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
     var newValue = this.computedValue();
     var inputValue = this.inputValue;
@@ -324,11 +352,7 @@ var MaskedTextBox = {
       attrs: this.v3 ? undefined : {
         dir: this.$props.dir
       },
-      "class": classNames('k-widget k-maskedtextbox', this.$props.className, {
-        'k-state-focused': this.currentFocused,
-        'k-state-disabled': this.$props.disabled,
-        'k-state-invalid': !isValid
-      }),
+      "class": classNames('k-maskedtextbox k-input', (_a = {}, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a)),
       style: !this.$props.label ? {
         width: this.$props.width
       } : undefined
@@ -355,7 +379,7 @@ var MaskedTextBox = {
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: false,
-      "class": "k-textbox",
+      "class": "k-input k-input-inner",
       value: this.v3 ? newValue : null,
       domProps: this.v3 ? undefined : {
         "value": newValue
@@ -405,5 +429,5 @@ var MaskedTextBox = {
     }, [this.$props.label]) : null]) : component;
   }
 };
-var MaskedTextBoxVue3 = MaskedTextBox;
-export { MaskedTextBox, MaskedTextBoxVue3 };
+var MaskedTextBox = MaskedTextBoxVue2;
+export { MaskedTextBox, MaskedTextBoxVue2 };

package/dist/es/maskedtextbox/MaskedTextBoxProps.d.ts

@@ -53,6 +53,43 @@ export interface MaskedTextBoxProps extends FormComponentProps {
      * Represents the `dir` HTML attribute.
      */
     dir?: string;
+    /**
+     * Configures the `size` of the MaskedTextBox.
+     *
+     * 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 MaskedTextBox.
+     *
+     * 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 MaskedTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
     /**
      * Sets the `tabIndex` property of the MaskedTextBox.
      */

package/dist/es/numerictextbox/NumericTextBox.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 import { NumericTextBoxData } from './interfaces/NumericTextBoxData';
 import { NumericTextBoxProps } from './interfaces/NumericTextBoxProps';
 declare type DefaultData<V> = object | ((this: V) => NumericTextBoxData);
@@ -71,8 +70,8 @@ export interface NumericTextBoxComputed {
 /**
  * @hidden
  */
-export interface NumericTextBoxAll extends Vue, NumericTextBoxMethods, NumericTextBoxComputed, NumericTextBoxState {
+export interface NumericTextBoxAll extends Vue2type, NumericTextBoxMethods, NumericTextBoxComputed, NumericTextBoxState {
 }
-declare let NumericTextBox: ComponentOptions<NumericTextBoxAll, DefaultData<NumericTextBoxData>, DefaultMethods<NumericTextBoxAll>, NumericTextBoxComputed, RecordPropsDefinition<NumericTextBoxProps>>;
-declare const NumericTextBoxVue3: DefineComponent<NumericTextBoxProps, any, NumericTextBoxData, NumericTextBoxComputed, NumericTextBoxMethods, {}, {}, {}, string, NumericTextBoxProps, NumericTextBoxProps, {}>;
-export { NumericTextBox, NumericTextBoxVue3 };
+declare let NumericTextBoxVue2: ComponentOptions<NumericTextBoxAll, DefaultData<NumericTextBoxData>, DefaultMethods<NumericTextBoxAll>, NumericTextBoxComputed, RecordPropsDefinition<NumericTextBoxProps>>;
+declare const NumericTextBox: DefineComponent<NumericTextBoxProps, any, NumericTextBoxData, NumericTextBoxComputed, NumericTextBoxMethods, {}, {}, {}, string, NumericTextBoxProps, NumericTextBoxProps, {}>;
+export { NumericTextBox, NumericTextBoxVue2 };

package/dist/es/numerictextbox/NumericTextBox.js

@@ -4,14 +4,15 @@ var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { canUseDOM, getDefaultSlots } from '@progress/kendo-vue-common';
+import { canUseDOM, getDefaultSlots, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
 import { guid, validatePackage } from '@progress/kendo-vue-common';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
 import { messages, numericIncreaseValue, numericDecreaseValue } from './../messages';
 import { formatValue, sanitizeNumber, rangeValue, increaseValue, decreaseValue, getStateOrPropsValue } from './utils';
 import { packageMetadata } from '../package-metadata';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
-var NumericTextBox = {
+var NumericTextBoxVue2 = {
   model: {
     event: 'changemodel'
   },
@@ -59,6 +60,27 @@ var NumericTextBox = {
       type: Boolean,
       default: undefined
     },
+    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: {
       type: Boolean,
       default: false
@@ -154,23 +176,27 @@ var NumericTextBox = {
         var compValue = this.computedValue;
         return {
           'k-floating-label-container': true,
-          'k-state-focused': this.$data.focused,
+          'k-focus': this.$data.focused,
           'k-state-empty': !(compValue === 0 ? true : compValue || this.$props.placeholder),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
     },
-    wrapperClassNames: {
-      get: function get() {
-        var isValid = !this.$props.validityStyles || this.validity().valid;
-        return {
-          'k-numeric-wrap': true,
-          'k-state-focused': this.$data.focused,
-          'k-state-disabled': this.$props.disabled,
-          'k-state-invalid': !isValid || this.$data.isInvalid
-        };
-      }
+    wrapperClassNames: function wrapperClassNames() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          fillMode = _b.fillMode,
+          rounded = _b.rounded,
+          required = _b.required,
+          disabled = _b.disabled;
+      var isValid = !this.$props.validityStyles || this.validity().valid;
+      return _a = {
+        'k-input': true,
+        'k-numerictextbox': true
+      }, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = required, _a['k-disabled'] = disabled, _a;
     }
   },
   methods: {
@@ -266,7 +292,7 @@ var NumericTextBox = {
       if (newState.valueIsCorrected) {
         var wrapper = this._elementWrapper;
 
-        if (wrapper && wrapper.className.indexOf("k-state-invalid") === -1) {
+        if (wrapper && wrapper.className.indexOf("k-invalid") === -1) {
           this.$data.isInvalid = true;
           setTimeout(function () {
             _this.$data.isInvalid = false;
@@ -438,13 +464,9 @@ var NumericTextBox = {
         dir: this.$props.dir,
         "aria-disabled": this.$props.disabled ? 'true' : undefined
       },
-      "class": 'k-widget k-numerictextbox',
-      "aria-disabled": this.$props.disabled ? 'true' : undefined
-    }, [h("span", {
       "class": this.wrapperClassNames,
-      ref: this.v3 ? function (el) {
-        _this.elementWrapperRef = el;
-      } : 'elementWrapper'
+      "aria-disabled": this.$props.disabled ? 'true' : undefined,
+      style: this.$attrs.style
     }, [h("input", {
       tabIndex: this.$props.tabIndex,
       attrs: this.v3 ? undefined : {
@@ -473,7 +495,7 @@ var NumericTextBox = {
       spellCheck: false,
       autoComplete: "off",
       autoCorrect: "off",
-      "class": "k-input k-formatted-value",
+      "class": "k-input k-input-inner",
       id: inputId,
       value: this.v3 ? this.looseValue : null,
       domProps: this.v3 ? undefined : {
@@ -499,40 +521,42 @@ var NumericTextBox = {
         _this.inputRef = el;
       } : 'input'
     }), defaultSlot, this.$props.spinners && h("span", {
-      "class": "k-select",
+      "class": "k-input-spinner k-spin-button",
       onMousedown: this.spinnersWrapperMouseDown,
       on: this.v3 ? undefined : {
         "mousedown": this.spinnersWrapperMouseDown
       }
-    }, [h("span", {
-      "class": "k-link k-link-increase",
-      "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
+    }, [// @ts-ignore
+    h(KButton, {
+      icon: 'arrow-n',
       attrs: this.v3 ? undefined : {
+        icon: 'arrow-n',
         "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
         title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue])
       },
+      "class": "k-spinner-increase",
+      "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
       title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
       onClick: this.increase,
       on: this.v3 ? undefined : {
         "click": this.increase
       }
-    }, [h("span", {
-      "class": "k-icon k-i-arrow-n"
-    })]), h("span", {
-      "class": "k-link k-link-decrease",
-      "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
+    }), // @ts-ignore
+    h(KButton, {
+      "class": "k-spinner-decrease",
+      icon: 'arrow-s',
       attrs: this.v3 ? undefined : {
+        icon: 'arrow-s',
         "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
         title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue])
       },
+      "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
       title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
       onClick: this.decrease,
       on: this.v3 ? undefined : {
         "click": this.decrease
       }
-    }, [h("span", {
-      "class": "k-icon k-i-arrow-s"
-    })])])])]);
+    })])]);
     return this.$props.label ? h("span", {
       "class": this.spanClassNames,
       onFocusin: this.handleFocus,
@@ -556,5 +580,5 @@ var NumericTextBox = {
     }, [this.$props.label]) : null]) : numerictextbox;
   }
 };
-var NumericTextBoxVue3 = NumericTextBox;
-export { NumericTextBox, NumericTextBoxVue3 };
+var NumericTextBox = NumericTextBoxVue2;
+export { NumericTextBox, NumericTextBoxVue2 };

package/dist/es/numerictextbox/interfaces/NumericTextBoxProps.d.ts

@@ -29,6 +29,43 @@ export interface NumericTextBoxProps extends FormComponentProps {
      * Sets the `tabIndex` property of the NumericTextBox.
      */
     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;
     /**
      * Specifies the `accessKey` of the NumericTextBox.
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1641561208,
+    publishDate: 1642158965,
     version: '',
     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'
 };

package/dist/es/radiobutton/RadioButton.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;
@@ -43,8 +42,8 @@ export interface RadioButtonComputed {
 /**
  * @hidden
  */
-export interface RadioButtonAll extends Vue, RadioButtonMethods, RadioButtonComputed, RadioButtonState, RadioButtonData {
+export interface RadioButtonAll extends Vue2type, RadioButtonMethods, RadioButtonComputed, RadioButtonState, RadioButtonData {
 }
-declare let RadioButton: ComponentOptions<RadioButtonAll, DefaultData<RadioButtonData>, DefaultMethods<RadioButtonAll>, RadioButtonComputed, RecordPropsDefinition<RadioButtonProps>>;
-declare let RadioButtonVue3: DefineComponent<RadioButtonProps, any, RadioButtonData, RadioButtonComputed, RadioButtonMethods, {}, {}, {}, string, RadioButtonProps, RadioButtonProps, {}>;
-export { RadioButton, RadioButtonVue3 };
+declare let RadioButtonVue2: ComponentOptions<RadioButtonAll, DefaultData<RadioButtonData>, DefaultMethods<RadioButtonAll>, RadioButtonComputed, RecordPropsDefinition<RadioButtonProps>>;
+declare let RadioButton: DefineComponent<RadioButtonProps, any, RadioButtonData, RadioButtonComputed, RadioButtonMethods, {}, {}, {}, string, RadioButtonProps, RadioButtonProps, {}>;
+export { RadioButton, RadioButtonVue2 };

package/dist/es/radiobutton/RadioButton.js

@@ -4,10 +4,10 @@ var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { guid, getTabIndex, getDefaultSlots, templateRendering, getTemplate, getListeners } from '@progress/kendo-vue-common';
+import { guid, getTabIndex, getDefaultSlots, templateRendering, getTemplate, getListeners, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
-var RadioButton = {
+var RadioButtonVue2 = {
   name: 'KendoRadioButton',
   props: {
     ariaDescribedBy: String,
@@ -19,6 +19,13 @@ var RadioButton = {
     labelRender: [String, Number, Boolean, Object],
     labelPlacement: String,
     name: String,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
     tabIndex: Number,
     value: [String, Number, Object],
     valid: {
@@ -44,10 +51,8 @@ var RadioButton = {
       var _a;
 
       return _a = {
-        'k-radio': true,
-        'k-state-invalid': this.$props.valid === false,
-        'k-invalid': this.$props.valid === false
-      }, _a[this.$props.className] = this.$props.className, _a;
+        'k-radio': true
+      }, _a["k-radio-" + kendoThemeMaps.sizeMap[this.$props.size]] = this.$props.size, _a['k-state-invalid'] = this.$props.valid === false, _a['k-invalid'] = this.$props.valid === false, _a[this.$props.className] = this.$props.className, _a;
     }
   },
   methods: {
@@ -158,5 +163,5 @@ var RadioButton = {
     return labelPlacement === 'before' ? h("div", [radioButtonLabel, radio, defaultSlot]) : h("div", [radio, radioButtonLabel, defaultSlot]);
   }
 };
-var RadioButtonVue3 = RadioButton;
-export { RadioButton, RadioButtonVue3 };
+var RadioButton = RadioButtonVue2;
+export { RadioButton, RadioButtonVue2 };