@progress/kendo-vue-buttons 3.4.0 → 3.4.2-dev.202207070519

package/dist/es/ButtonGroup.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, getDefaultSlots, validatePackage } from '@progress/kendo-vue-common';
 import { ButtonWrap } from './ButtonWrap';
 import { packageMetadata } from './package-metadata';
@@ -30,8 +31,8 @@ var ButtonGroupVue2 = {
     validatePackage(packageMetadata);
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -77,16 +78,14 @@ var ButtonGroupVue2 = {
       style: {
         width: this.width
       },
-      width: this.$props.width,
+      dir: this.$props.dir // Accessibility properties
+      ,
       attrs: this.v3 ? undefined : {
-        width: this.$props.width,
-        dir: this.$props.dir // Accessibility properties
-        ,
+        dir: this.$props.dir,
         role: 'group',
         "aria-disabled": this.$props.disabled,
         "aria-multiselectable": true
       },
-      dir: this.$props.dir,
       role: 'group',
       "aria-disabled": this.$props.disabled,
       "aria-multiselectable": true,

package/dist/es/ButtonWrap.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { getDefaultSlots } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -11,8 +12,8 @@ var ButtonWrapVue2 = {
   name: 'KendoButtonWrap',
   props: {},
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/Chip/Chip.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; // import { ChipListSelectionContext, ChipListFocusContext, ChipListDataContext } from './ChipList';
 
-import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 import { FOCUS_ACTION } from './focus-reducer';
 import { DATA_ACTION } from './data-reducer';
 import { SELECTION_ACTION } from './selection-reducer';
@@ -117,7 +118,7 @@ var ChipVue2 = {
     validatePackage(packageMetadata);
   },
   mounted: function mounted() {
-    this.chip = this.v3 ? this.chipRef : this.$refs.chip;
+    this.chip = getRef(this, 'chip');
     this.currentDir = this.$props.dir !== undefined ? this.$props.dir === 'rtl' : this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
   },
   updated: function updated() {
@@ -252,8 +253,8 @@ var ChipVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var chipRef = ref(null);
     return {
       v3: v3,
@@ -263,8 +264,6 @@ var ChipVue2 = {
   render: function render(createElement) {
     var _a;
 
-    var _this = this;
-
     var h = gh || createElement;
     var _b = this.$props,
         size = _b.size,
@@ -279,17 +278,15 @@ var ChipVue2 = {
         role: this.$props.role,
         id: this.$props.value,
         dir: this.currentDir,
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
         "aria-checked": this.currentSelected,
         "aria-disabled": this.$props.disabled,
         "aria-describedby": this.$props.ariaDescribedBy
       },
       id: this.$props.value,
-      ref: this.v3 ? function (el) {
-        _this.chipRef = el;
-      } : 'chip',
+      ref: setRef(this, 'chip'),
       dir: this.currentDir,
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
       "class": classNames('k-chip', (_a = {
         'k-rtl': this.currentDir === 'rtl',
         'k-disabled': this.$props.disabled,

package/dist/es/Chip/ChipList.js

@@ -18,8 +18,9 @@ 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 { getTabIndex, classNames, getListeners, templateRendering, getTemplate, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { getTabIndex, classNames, getListeners, templateRendering, getTemplate, validatePackage, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
 import { selectionReducer } from './selection-reducer';
 import { focusReducer } from './focus-reducer';
 import { dataReducer } from './data-reducer';
@@ -186,8 +187,8 @@ var ChipListVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var chipListRef = ref(null);
     return {
       v3: v3,
@@ -197,27 +198,23 @@ var ChipListVue2 = {
   render: function render(createElement) {
     var _a;
 
-    var _this = this;
-
     var h = gh || createElement;
     var size = this.$props.size;
     return h("div", {
-      ref: this.v3 ? function (el) {
-        _this.chipListRef = el;
-      } : 'chipList',
+      ref: setRef(this, 'chipList'),
       role: 'listbox',
       attrs: this.v3 ? undefined : {
         role: 'listbox',
         id: this.$props.id,
         dir: this.currentDir,
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy
       },
       id: this.$props.id,
       dir: this.currentDir,
       style: this.$props.style,
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
       "class": classNames('k-chip-list', (_a = {}, _a["k-chip-list-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-rtl'] = this.currentDir === 'rtl', _a['k-selection-single'] = this.$props.selection === 'single', _a['k-selection-multiple'] = this.$props.selection === 'multiple', _a['k-disabled'] = this.$props.disabled, _a)),
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -2,8 +2,9 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, guid, Keys, getTabIndex, templateRendering, getListeners, validatePackage, canUseDOM, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { classNames, guid, Keys, getTabIndex, templateRendering, getListeners, validatePackage, canUseDOM, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 import { FloatingActionButtonItem } from './FloatingActionButtonItem';
 import { packageMetadata } from '../package-metadata';
 import { position, getAnchorAlign, getPopupAlign, getTextDirectionClass } from './utils';
@@ -111,8 +112,8 @@ var FloatingActionButtonVue2 = {
   },
   mounted: function mounted() {
     this.element = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
-    this.list = this.v3 ? this.listRef : this.$refs.list;
-    this.popup = this.v3 ? this.popupRef : this.$refs.popup;
+    this.list = getRef(this, 'list');
+    this.popup = getRef(this, 'popup');
     this.currentDir = this.$props.dir !== undefined ? this.$props.dir : this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
     this.isRtl = this.currentDir === 'rtl';
 
@@ -297,8 +298,8 @@ var FloatingActionButtonVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var chipRef = ref(null);
     var kendoAnchorRef = ref(null);
     return {
@@ -378,8 +379,8 @@ var FloatingActionButtonVue2 = {
         "aria-label": (text || '') + " floatingactionbutton",
         "aria-owns": items ? this.listId : undefined,
         "aria-activedescendant": this.focusedIndex >= 0 && items ? this.listId + "-" + this.focusedIndex : undefined,
-        tabIndex: getTabIndex(tabIndex, disabled),
-        accessKey: accessKey,
+        tabindex: getTabIndex(tabIndex, disabled),
+        accesskey: accessKey,
         dir: this.currentDir,
         disabled: disabled
       },
@@ -391,8 +392,8 @@ var FloatingActionButtonVue2 = {
       "aria-label": (text || '') + " floatingactionbutton",
       "aria-owns": items ? this.listId : undefined,
       "aria-activedescendant": this.focusedIndex >= 0 && items ? this.listId + "-" + this.focusedIndex : undefined,
-      tabIndex: getTabIndex(tabIndex, disabled),
-      accessKey: accessKey,
+      tabindex: getTabIndex(tabIndex, disabled),
+      accesskey: accessKey,
       dir: this.currentDir,
       disabled: disabled,
       "class": this.buttonClassNames,
@@ -426,9 +427,7 @@ var FloatingActionButtonVue2 = {
       "class": "k-fab-text"
     }, [text])]), // @ts-ignore function children
     h(Popup, {
-      ref: this.v3 ? function (el) {
-        _this.popupRef = el;
-      } : 'popup',
+      ref: setRef(this, 'popup'),
       show: this.computedOpened,
       attrs: this.v3 ? undefined : {
         show: this.computedOpened,
@@ -448,9 +447,7 @@ var FloatingActionButtonVue2 = {
       }
     }, this.v3 ? function () {
       return [h("ul", {
-        ref: _this2.v3 ? function (el) {
-          _this.listRef = el;
-        } : 'list',
+        ref: setRef(_this2, 'list'),
         role: 'menu',
         attrs: _this2.v3 ? undefined : {
           role: 'menu',
@@ -469,9 +466,7 @@ var FloatingActionButtonVue2 = {
         }
       }, [fabItems.call(_this2)])];
     } : [h("ul", {
-      ref: _this2.v3 ? function (el) {
-        _this.listRef = el;
-      } : 'list',
+      ref: setRef(_this2, 'list'),
       role: 'menu',
       attrs: _this2.v3 ? undefined : {
         role: 'menu',

package/dist/es/FloatingActionButton/FloatingActionButtonItem.js

@@ -2,8 +2,9 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, getTabIndex, getTemplate } from '@progress/kendo-vue-common';
+import { classNames, getRef, getTabIndex, getTemplate, setRef } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -27,7 +28,7 @@ var FloatingActionButtonItemVue2 = {
     'down': null
   },
   mounted: function mounted() {
-    this.element = this.v3 ? this.elementRef : this.$refs.element;
+    this.element = getRef(this, 'element');
   },
   computed: {
     itemClassNames: function itemClassNames() {
@@ -53,8 +54,8 @@ var FloatingActionButtonItemVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var elementRef = ref(null);
     return {
       v3: v3,
@@ -62,8 +63,6 @@ var FloatingActionButtonItemVue2 = {
     };
   },
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var _a = this.$props,
         disabled = _a.disabled,
@@ -75,21 +74,18 @@ var FloatingActionButtonItemVue2 = {
         icon = dataItem.icon;
     var item;
     var itemDefaultRendering = h("li", {
-      ref: this.v3 ? function (el) {
-        _this.elementRef = el;
-      } : 'element',
+      ref: setRef(this, 'element'),
       id: id,
       attrs: this.v3 ? undefined : {
         id: id,
         role: 'menuitem',
-        tabIndex: getTabIndex(tabIndex, disabled),
+        tabindex: getTabIndex(tabIndex, disabled),
         "aria-disabled": disabled,
-        "aria-label": (text || '') + " floatingactionbutton item",
-        customProp: customProp
+        "aria-label": (text || '') + " floatingactionbutton item"
       },
       "class": this.itemClassNames,
       role: 'menuitem',
-      tabIndex: getTabIndex(tabIndex, disabled),
+      tabindex: getTabIndex(tabIndex, disabled),
       "aria-disabled": disabled,
       "aria-label": (text || '') + " floatingactionbutton item",
       onClick: this.handleClick,
@@ -99,8 +95,7 @@ var FloatingActionButtonItemVue2 = {
         "pointerdown": this.onDown
       },
       onMousedown: this.onDown,
-      onPointerdown: this.onDown,
-      customProp: customProp
+      onPointerdown: this.onDown
     }, [text && h("span", {
       "class": "k-fab-item-text"
     }, [text]), icon && h("span", {

package/dist/es/ListButton/ButtonItem.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { getTemplate } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -48,8 +49,8 @@ var ButtonItemVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -68,9 +69,9 @@ var ButtonItemVue2 = {
       var text = dataItem.text !== undefined ? dataItem.text : textField ? dataItem[textField] : dataItem;
       var iconClass = dataItem.icon ? "k-icon k-i-" + dataItem.icon : dataItem.iconClass;
       var itemContent = h("span", {
-        tabIndex: -1,
+        tabindex: -1,
         attrs: this.v3 ? undefined : {
-          tabIndex: -1
+          tabindex: -1
         },
         "class": this.innerClass,
         key: "icon"

package/dist/es/ListButton/DropDownButton.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 { Button as KendoButton } from '../Button';
 import { classNames, guid, Keys, kendoThemeMaps, getDefaultSlots } from '@progress/kendo-vue-common';
@@ -144,8 +145,8 @@ var DropDownButtonVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoAnchorRef = ref(null);
     return {
       v3: v3,

package/dist/es/ListButton/SplitButton.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 { Button as KendoButton } from '../Button';
 import { classNames, guid, Keys, kendoThemeMaps, getDefaultSlots } from '@progress/kendo-vue-common';
@@ -133,8 +134,8 @@ var SplitButtonVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoAnchorRef = ref(null);
     return {
       v3: v3,

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-buttons',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1655871601,
+    publishDate: 1657170562,
     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/toolbar/Toolbar.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 { Keys, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
 import { toolbarButtons, internalButtons } from './../util';
 import { packageMetadata } from '../package-metadata';
@@ -82,7 +83,7 @@ var ToolbarVue2 = {
     this.currentButtons = this.getCurrentButtons();
     this.setTabIndex(this.focusedIndex());
   },
-  destroyed: !!gh ? undefined : function () {
+  destroyed: !!isV3 ? undefined : function () {
     window.removeEventListener('resize', this.onWindowResize);
     this.currentButtons.length = 0;
   },
@@ -92,8 +93,8 @@ var ToolbarVue2 = {
     this.currentButtons.length = 0;
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/toolbar/tools/ToolbarItem.js

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

package/dist/es/toolbar/tools/ToolbarSeparator.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { ToolbarItem } from './ToolbarItem';
 /**
  * @hidden
@@ -10,8 +11,8 @@ import { ToolbarItem } from './ToolbarItem';
 var ToolbarSeparatorVue2 = {
   name: 'KendoToolbarItem',
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/toolbar/tools/ToolbarSpacer.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 /**
  * @hidden
  */
@@ -9,8 +10,8 @@ var gh = allVue.h;
 var ToolbarSpacerVue2 = {
   name: 'KendoToolbarItem',
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/npm/Button.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
@@ -187,8 +188,8 @@ var ButtonVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/npm/ButtonGroup.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
@@ -42,8 +43,8 @@ var ButtonGroupVue2 = {
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -89,16 +90,14 @@ var ButtonGroupVue2 = {
       style: {
         width: this.width
       },
-      width: this.$props.width,
+      dir: this.$props.dir // Accessibility properties
+      ,
       attrs: this.v3 ? undefined : {
-        width: this.$props.width,
-        dir: this.$props.dir // Accessibility properties
-        ,
+        dir: this.$props.dir,
         role: 'group',
         "aria-disabled": this.$props.disabled,
         "aria-multiselectable": true
       },
-      dir: this.$props.dir,
       role: 'group',
       "aria-disabled": this.$props.disabled,
       "aria-multiselectable": true,

package/dist/npm/ButtonWrap.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 /**
@@ -20,8 +21,8 @@ var ButtonWrapVue2 = {
   name: 'KendoButtonWrap',
   props: {},
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/npm/Chip/Chip.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref; // import { ChipListSelectionContext, ChipListFocusContext, ChipListDataContext } from './ChipList';
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
@@ -129,7 +130,7 @@ var ChipVue2 = {
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
   },
   mounted: function mounted() {
-    this.chip = this.v3 ? this.chipRef : this.$refs.chip;
+    this.chip = kendo_vue_common_1.getRef(this, 'chip');
     this.currentDir = this.$props.dir !== undefined ? this.$props.dir === 'rtl' : this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
   },
   updated: function updated() {
@@ -264,8 +265,8 @@ var ChipVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var chipRef = ref(null);
     return {
       v3: v3,
@@ -275,8 +276,6 @@ var ChipVue2 = {
   render: function render(createElement) {
     var _a;
 
-    var _this = this;
-
     var h = gh || createElement;
     var _b = this.$props,
         size = _b.size,
@@ -291,17 +290,15 @@ var ChipVue2 = {
         role: this.$props.role,
         id: this.$props.value,
         dir: this.currentDir,
-        tabIndex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+        tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
         "aria-checked": this.currentSelected,
         "aria-disabled": this.$props.disabled,
         "aria-describedby": this.$props.ariaDescribedBy
       },
       id: this.$props.value,
-      ref: this.v3 ? function (el) {
-        _this.chipRef = el;
-      } : 'chip',
+      ref: kendo_vue_common_1.setRef(this, 'chip'),
       dir: this.currentDir,
-      tabIndex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+      tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
       "class": kendo_vue_common_1.classNames('k-chip', (_a = {
         'k-rtl': this.currentDir === 'rtl',
         'k-disabled': this.$props.disabled,