@progress/kendo-vue-inputs 3.4.1 → 3.4.2-dev.202207070519

package/dist/es/checkbox/Checkbox.js

@@ -2,9 +2,10 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, checkboxValidation, checkboxOptionalText } from './../messages';
@@ -145,7 +146,7 @@ var CheckboxVue2 = {
     }
   },
   mounted: function mounted() {
-    this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this.input = getRef(this, 'input');
 
     if (!this.currentDir && window && this.$el) {
       // Note: getComputedStyle forces reflow
@@ -160,14 +161,14 @@ var CheckboxVue2 = {
   },
   updated: function updated() {
     if (!this.input) {
-      this.input = this.v3 ? this.inputRef : this.$refs.input;
+      this.input = getRef(this, 'input');
     }
 
     this.setValidity();
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
@@ -208,8 +209,6 @@ var CheckboxVue2 = {
     }, _a["k-checkbox-" + kendoThemeMaps.sizeMap[size]] = size, _a["k-rounded-" + kendoThemeMaps.roundedMap[rounded]] = rounded, _a['k-state-indeterminate'] = this.indeterminateProp, _a['k-state-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
 
     var checkboxInput = function checkboxInput() {
-      var _this = this;
-
       return h("input", {
         type: 'checkbox',
         attrs: this.v3 ? undefined : {
@@ -219,7 +218,7 @@ var CheckboxVue2 = {
           "aria-labelledby": ariaLabelledBy,
           "aria-describedby": ariaDescribedBy,
           disabled: disabled,
-          tabIndex: getTabIndex(tabIndex, disabled),
+          tabindex: getTabIndex(tabIndex, disabled),
           role: 'checkbox',
           required: required !== undefined ? required : false,
           "aria-checked": this.computedChecked || this.checkedProp ? true : this.indeterminateProp ? 'mixed' : false,
@@ -228,9 +227,7 @@ var CheckboxVue2 = {
         "class": inputClasses,
         name: name,
         id: id || this.calculatedId,
-        ref: this.v3 ? function (el) {
-          _this.inputRef = el;
-        } : 'input',
+        ref: setRef(this, 'input'),
         "aria-labelledby": ariaLabelledBy,
         "aria-describedby": ariaDescribedBy,
         checked: this.v3 ? Boolean(this.checkedProp) : null,
@@ -238,7 +235,7 @@ var CheckboxVue2 = {
           "checked": Boolean(this.checkedProp)
         },
         disabled: disabled,
-        tabIndex: getTabIndex(tabIndex, disabled),
+        tabindex: getTabIndex(tabIndex, disabled),
         role: 'checkbox',
         required: required !== undefined ? required : false,
         "aria-checked": this.computedChecked || this.checkedProp ? true : this.indeterminateProp ? 'mixed' : false,

package/dist/es/colors/ColorContrastLabels.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages';
 import { getContrastFromTwoRGBAs } from './utils/color-parser';
@@ -21,8 +22,8 @@ var ColorContrastLabelsVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/colors/ColorContrastSvg.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { bezierCommand, controlPoint, line, svgPath } from './utils/svg-calc';
 import { getColorFromHSV, getRGBA, getContrastFromTwoRGBAs } from './utils/color-parser';
 var AA_CONTRAST = 4.5;
@@ -19,8 +20,8 @@ var ColorContrastSvgVue2 = {
     hsva: Object
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/colors/ColorGradient.js

@@ -18,6 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { Draggable, guid, classNames, focusFirstFocusableChild, getTabIndex } from '@progress/kendo-vue-common';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -114,8 +115,8 @@ var ColorGradientVue2 = {
   },
   // private alphaSlider: any;
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -153,13 +154,13 @@ var ColorGradientVue2 = {
       attrs: this.v3 ? undefined : {
         id: this.$props.id,
         "aria-disabled": this.$props.disabled ? 'true' : undefined,
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy
       },
       "class": className,
       "aria-disabled": this.$props.disabled ? 'true' : undefined,
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       onFocus: this.onFocus,

package/dist/es/colors/ColorInput.js

@@ -18,6 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { NumericTextBox } from '../main';
 import { HexInput } from './HexInput';
 import { Button } from '@progress/kendo-vue-buttons';
@@ -47,8 +48,8 @@ var ColorInputVue2 = {
     };
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/colors/ColorPalette.js

@@ -2,8 +2,9 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { ColorPaletteService } from './utils/color-palette.service';
-import { classNames, Keys, guid, getTabIndex, validatePackage } from '@progress/kendo-vue-common';
+import { classNames, Keys, guid, getTabIndex, validatePackage, setRef, getRef } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models/palette-presets';
 import { isPresent } from './utils/misc';
@@ -59,10 +60,10 @@ var ColorPaletteVue2 = {
     this.guid = guid();
   },
   mounted: function mounted() {
-    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
+    this.wrapper = getRef(this, 'wrapper');
   },
   updated: function updated() {
-    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
+    this.wrapper = getRef(this, 'wrapper');
   },
   computed: {
     focusedColorCooridanates: function focusedColorCooridanates() {
@@ -83,16 +84,14 @@ var ColorPaletteVue2 = {
     };
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var paletteInfo = this.getPaletteInfo();
     var svc = this.paletteService = new ColorPaletteService();
@@ -178,7 +177,7 @@ var ColorPaletteVue2 = {
           "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords),
           "aria-labelledby": this.$props.ariaLabelledBy,
           "aria-describedby": this.$props.ariaDescribedBy,
-          tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
+          tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
         },
         "class": className,
         onFocusin: this.onFocus,
@@ -193,10 +192,8 @@ var ColorPaletteVue2 = {
         "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords),
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
-        ref: this.v3 ? function (el) {
-          _this.wrapperRef = el;
-        } : 'wrapper'
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+        ref: setRef(this, 'wrapper')
       }, [h("div", {
         "class": "k-colorpalette-table-wrap",
         role: "grid",

package/dist/es/colors/ColorPicker.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { Button } from '@progress/kendo-vue-buttons';
 import { classNames, Keys, // useDir, 
 getTabIndex, guid, kendoThemeMaps, validatePackage } from '@progress/kendo-vue-common';
@@ -143,8 +144,8 @@ var ColorPickerVue2 = {
     this.palette = this.v3 ? this.paletteRef : this.$refs.palette;
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -171,14 +172,14 @@ var ColorPickerVue2 = {
         id: this.$props.id,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
-        tabIndex: getTabIndex(tabIndex, disabled),
+        tabindex: getTabIndex(tabIndex, disabled),
         title: this.$props.title
       },
       id: this.$props.id,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       ref: this.focusableElementGuid,
-      tabIndex: getTabIndex(tabIndex, disabled),
+      tabindex: getTabIndex(tabIndex, disabled),
       title: this.$props.title,
       onKeydown: this.onKeyDownHandler,
       on: this.v3 ? undefined : {

package/dist/es/colors/FlatColorPicker.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { classNames, validatePackage, getTabIndex } from '@progress/kendo-vue-common';
 import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
 import { ColorPalette } from './ColorPalette';
@@ -54,8 +55,8 @@ var FlatColorPickerVue2 = {
     };
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -66,9 +67,9 @@ var FlatColorPickerVue2 = {
 
     var h = gh || createElement;
     return h("div", {
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
       attrs: this.v3 ? undefined : {
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
       },
       "class": classNames('k-flatcolorpicker k-coloreditor', {
         'k-disabled': this.$props.disabled

package/dist/es/colors/HexInput.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { parseColor } from './utils/color-parser';
 import { isPresent } from './utils/misc';
 import { Input } from '../input/Input';
@@ -22,8 +23,8 @@ var HexInputVue2 = {
     };
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/colors/Picker.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { Popup } from '@progress/kendo-vue-popup';
 import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
@@ -44,8 +45,8 @@ var PickerVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/input/Input.js

@@ -18,6 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -138,8 +139,8 @@ var InputVue2 = {
     this.setValidity();
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,

package/dist/es/input-separator/InputSeparator.js

@@ -3,6 +3,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { packageMetadata } from '../package-metadata';
 /**
@@ -14,8 +15,8 @@ var InputSeparatorVue2 = {
     validatePackage(packageMetadata);
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -2,10 +2,11 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { MaskingService } from './masking.service';
 import { defaultRules, maskingChanged, returnFalse } from './utils';
-import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, setRef } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
@@ -120,8 +121,8 @@ var MaskedTextBoxVue2 = {
     this.isPasted = false;
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,
@@ -372,8 +373,6 @@ var MaskedTextBoxVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var inputId = this.$props.id || this.inputId;
     var _a = this.$props,
@@ -419,26 +418,26 @@ var MaskedTextBoxVue2 = {
       type: this.$props.type,
       attrs: this.v3 ? undefined : {
         type: this.$props.type,
-        autoComplete: "off",
-        autoCorrect: "off",
-        autoCapitalize: "off",
-        spellCheck: false,
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        spellcheck: false,
         id: inputId,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         name: this.$props.name,
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
-        accessKey: this.$props.accessKey,
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
+        accesskey: this.$props.accessKey,
         title: this.$props.title,
         disabled: this.$props.disabled || undefined,
-        readOnly: this.$props.readonly || undefined,
+        readonly: this.$props.readonly || undefined,
         placeholder: this.$props.placeholder,
         required: this.$props.required
       },
-      autoComplete: "off",
-      autoCorrect: "off",
-      autoCapitalize: "off",
-      spellCheck: false,
+      autocomplete: "off",
+      autocorrect: "off",
+      autocapitalize: "off",
+      spellcheck: false,
       "class": this.inputInnerClass,
       value: this.v3 ? newValue : null,
       domProps: this.v3 ? undefined : {
@@ -448,29 +447,27 @@ var MaskedTextBoxVue2 = {
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       name: this.$props.name,
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
-      accessKey: this.$props.accessKey,
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
+      accesskey: this.$props.accessKey,
       title: this.$props.title,
       disabled: this.$props.disabled || undefined,
-      readOnly: this.$props.readonly || undefined,
+      readonly: this.$props.readonly || undefined,
       placeholder: this.$props.placeholder,
       required: this.$props.required,
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input',
+      ref: setRef(this, 'input'),
       onInput: this.onChangeHandler,
       on: this.v3 ? undefined : {
         "input": this.onChangeHandler,
         "paste": this.pasteHandler,
         "focus": this.focusHandler,
         "blur": this.blurHandler,
-        "dragStart": returnFalse,
+        "dragstart": returnFalse,
         "drop": returnFalse
       },
       onPaste: this.pasteHandler,
       onFocus: this.focusHandler,
       onBlur: this.blurHandler,
-      onDragStart: returnFalse,
+      onDragstart: returnFalse,
       onDrop: returnFalse
     }), this.$props.inputSuffix && h("span", {
       "class": "k-input-suffix"

package/dist/es/numerictextbox/NumericTextBox.js

@@ -2,9 +2,10 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { canUseDOM, getDefaultSlots, getListeners, getTemplate, kendoThemeMaps, templateDefinition, templateRendering } from '@progress/kendo-vue-common';
+import { canUseDOM, getDefaultSlots, getListeners, getRef, getTemplate, kendoThemeMaps, setRef, templateDefinition, templateRendering } 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';
@@ -141,7 +142,7 @@ var NumericTextBoxVue2 = {
     }
   },
   mounted: function mounted() {
-    this._input = this.v3 ? this.inputRef : this.$refs.input;
+    this._input = getRef(this, 'input');
     this._elementWrapper = this.v3 ? this.elementWrapperRef : this.$refs.elementWrapper;
     this.$data.hasMounted = true;
 
@@ -472,8 +473,8 @@ var NumericTextBoxVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     var elementWrapperRef = ref(null);
     var kendoLocalizationService = inject('kendoLocalizationService', {});
@@ -488,8 +489,6 @@ var NumericTextBoxVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var _a = this.$props,
         iconName = _a.iconName,
@@ -540,33 +539,33 @@ var NumericTextBoxVue2 = {
     }), this.$props.inputPrefix && h("span", {
       "class": "k-input-prefix"
     }, [inputPrefix]), h("input", {
-      tabIndex: this.$props.tabIndex,
+      tabindex: this.$props.tabIndex,
       attrs: this.v3 ? undefined : {
-        tabIndex: this.$props.tabIndex,
-        accessKey: this.$props.accessKey,
+        tabindex: this.$props.tabIndex,
+        accesskey: this.$props.accessKey,
         disabled: this.$props.disabled,
         title: this.$props.title,
         "aria-valuemin": this.$props.min,
         "aria-valuemax": this.$props.max,
         placeholder: this.$props.placeholder,
         type: this.$props.inputType || 'tel',
-        spellCheck: false,
-        autoComplete: "off",
-        autoCorrect: "off",
+        spellcheck: false,
+        autocomplete: "off",
+        autocorrect: "off",
         id: inputId,
         "aria-valuenow": this.$data.currentValue !== null ? this.$data.currentValue : undefined,
         name: this.$props.name
       },
-      accessKey: this.$props.accessKey,
+      accesskey: this.$props.accessKey,
       disabled: this.$props.disabled,
       title: this.$props.title,
       "aria-valuemin": this.$props.min,
       "aria-valuemax": this.$props.max,
       placeholder: this.$props.placeholder,
       type: this.$props.inputType || 'tel',
-      spellCheck: false,
-      autoComplete: "off",
-      autoCorrect: "off",
+      spellcheck: false,
+      autocomplete: "off",
+      autocorrect: "off",
       "class": this.inputInnerClass,
       id: inputId,
       value: this.v3 ? this.looseValue : null,
@@ -589,9 +588,7 @@ var NumericTextBoxVue2 = {
       onFocus: this.emitFocus,
       onBlur: this.emitBlur,
       onPaste: this.onPasteHandler,
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input'
+      ref: setRef(this, 'input')
     }), this.$props.inputSuffix && h("span", {
       "class": "k-input-suffix"
     }, [inputSuffix]), showValidationIcon && isValid && h("span", {

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: 1656415338,
+    publishDate: 1657170635,
     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.js

@@ -2,9 +2,10 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { guid, getTabIndex, getDefaultSlots, templateRendering, getTemplate, getListeners, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { guid, getTabIndex, getDefaultSlots, templateRendering, getTemplate, getListeners, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
@@ -54,7 +55,7 @@ var RadioButtonVue2 = {
     validatePackage(packageMetadata);
   },
   mounted: function mounted() {
-    this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this.input = getRef(this, 'input');
   },
   computed: {
     inputClassName: function inputClassName() {
@@ -89,8 +90,8 @@ var RadioButtonVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,
@@ -98,8 +99,6 @@ var RadioButtonVue2 = {
     };
   },
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     var _a = this.$props,
@@ -147,17 +146,15 @@ var RadioButtonVue2 = {
         id: id || this.calculatedId,
         name: name,
         disabled: disabled,
-        tabIndex: getTabIndex(tabIndex, disabled),
+        tabindex: getTabIndex(tabIndex, disabled),
         "aria-describedby": ariaDescribedBy
       },
       id: id || this.calculatedId,
       name: name,
       "class": this.inputClassName,
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input',
+      ref: setRef(this, 'input'),
       disabled: disabled,
-      tabIndex: getTabIndex(tabIndex, disabled),
+      tabindex: getTabIndex(tabIndex, disabled),
       checked: this.v3 ? checked : null,
       domProps: this.v3 ? undefined : {
         "checked": checked,