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

package/dist/es/Grid.js

@@ -45,9 +45,10 @@ var __spreadArrays = this && this.__spreadArrays || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var markRaw = allVue.markRaw;
-import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, canUseDOM, templateDefinition, isObject } from '@progress/kendo-vue-common';
+import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, canUseDOM, templateDefinition, isObject, setRef, getRef } from '@progress/kendo-vue-common';
 import { tableColumnsVirtualization, Pager, normalize, tableKeyboardNavigationTools as navigationTools, TableKeyboardNavigationProvider } from '@progress/kendo-vue-data-tools';
 import { Loader } from '@progress/kendo-vue-indicators';
 import { GridNav } from './GridNav';
@@ -189,7 +190,7 @@ var GridVue2 = {
     var rtl = isRtl(this._element);
     this.isRtl = rtl;
   },
-  destroyed: !!gh ? undefined : function () {
+  destroyed: !!isV3 ? undefined : function () {
     this.gridUnmounted();
   },
   // @ts-ignore
@@ -263,30 +264,30 @@ var GridVue2 = {
     },
     setRefs: function setRefs() {
       var elementString = '$el';
-      var element = this.v3 ? this.gridNavRef : this.$refs.gridNav;
+      var element = getRef(this, 'gridNav');
 
       if (element) {
         this._element = element[elementString];
       }
 
-      var groupPanelDiv = this.v3 ? this.groupPanelDivRef : this.$refs.groupPanelDiv;
+      var groupPanelDiv = getRef(this, 'groupPanelDiv');
 
       if (groupPanelDiv) {
         var groupPanelDivElement = groupPanelDiv[elementString] || null;
         this.dragLogic.refGroupPanelDiv(groupPanelDivElement);
       }
 
-      var dropElementClue = this.v3 ? this.dropElementClueRef : this.$refs.dropElementClue;
-      var dragElementClue = this.v3 ? this.dragElementClueRef : this.$refs.dragElementClue;
+      var dropElementClue = getRef(this, 'dropElementClue');
+      var dragElementClue = getRef(this, 'dragElementClue');
       this.dragLogic.refDropElementClue(dropElementClue);
       this.dragLogic.refDragElementClue(dragElementClue);
-      this.columnResize.colGroupMain = this.v3 ? this.colGroupRef : this.$refs.colGroup;
-      this._header = this.v3 ? this.headerRef : this.$refs.header;
-      this._footer = this.v3 ? this.footerRef : this.$refs.footer;
-      this.vs.container = this.v3 ? this.scrollContainerRef : this.$refs.scrollContainer;
-      this.vs.table = this.v3 ? this.scrollTableRef : this.$refs.scrollTable;
+      this.columnResize.colGroupMain = getRef(this, 'colGroup');
+      this._header = getRef(this, 'header');
+      this._footer = getRef(this, 'footer');
+      this.vs.container = getRef(this, 'scrollContainer');
+      this.vs.table = getRef(this, 'scrollTable');
       this.resetTableWidth();
-      this.vs.tableBody = this.v3 ? this.scrollTableBodyRef : this.$refs.scrollTableBody;
+      this.vs.tableBody = getRef(this, 'scrollTableBody');
     },
     gridUnmounted: function gridUnmounted() {
       clearTimeout(this.forceUpdateTimeout);
@@ -806,8 +807,8 @@ var GridVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var groupPanelDivRef = ref(null);
     var dropElementClueRef = ref(null);
     var dragElementClueRef = ref(null);
@@ -1640,11 +1641,11 @@ var GridVue2 = {
     }, this) || h("tr", {
       "class": "k-grid-norecords"
     }, [h("td", {
-      colSpan: this._columns.filter(function (c) {
+      colspan: this._columns.filter(function (c) {
         return !c.children.length;
       }).length,
       attrs: this.v3 ? undefined : {
-        colSpan: this._columns.filter(function (c) {
+        colspan: this._columns.filter(function (c) {
           return !c.children.length;
         }).length
       }
@@ -1698,9 +1699,7 @@ var GridVue2 = {
       attrs: this.v3 ? undefined : {
         role: "presentation"
       },
-      ref: this.v3 ? function (el) {
-        _this.colGroupRef = el;
-      } : 'colGroup'
+      ref: setRef(this, 'colGroup')
     }, [columnsWithColGroup.map(function (column, index) {
       return h("col", {
         key: index.toString(),
@@ -1714,6 +1713,26 @@ var GridVue2 = {
     var wrapperStyle = {
       height: this.getCorrectHeight
     };
+    var loaderTemplate = templateRendering.call(this, this.$props.loader, getListeners.call(this));
+    var defaultLoaderRendering = this.$props.loader && h("div", {
+      "class": "k-loader-container k-loader-container-md k-loader-top"
+    }, [h("div", {
+      "class": "k-loader-container-overlay k-overlay-light"
+    }), h("div", {
+      "class": "k-loader-container-inner"
+    }, [h(Loader, {
+      size: 'large',
+      attrs: this.v3 ? undefined : {
+        size: 'large',
+        type: 'infinite-spinner'
+      },
+      type: 'infinite-spinner'
+    })])]);
+    var loader = getTemplate.call(this, {
+      h: h,
+      template: loaderTemplate,
+      defaultRendering: defaultLoaderRendering
+    });
 
     if (this.$props.scrollable === 'none') {
       return (// @ts-ignore function children
@@ -1749,7 +1768,7 @@ var GridVue2 = {
               attrs: _this3.v3 ? undefined : {
                 "data-keyboardnavbody": true
               }
-            }, [body]), footer]), pager, clues];
+            }, [body, loader]), footer]), pager, clues];
           } : [toolbar, groupingPanel, h("table", {
             style: {
               tableLayout: 'fixed'
@@ -1759,7 +1778,7 @@ var GridVue2 = {
             attrs: _this3.v3 ? undefined : {
               "data-keyboardnavbody": true
             }
-          }, [body]), footer]), pager, clues])];
+          }, [body, loader]), footer]), pager, clues])];
         } : [h(GridNav, {
           ref: _this3.v3 ? function (el) {
             _this.gridNavRef = el;
@@ -1782,7 +1801,7 @@ var GridVue2 = {
             attrs: _this3.v3 ? undefined : {
               "data-keyboardnavbody": true
             }
-          }, [body]), footer]), pager, clues];
+          }, [body, loader]), footer]), pager, clues];
         } : [toolbar, groupingPanel, h("table", {
           style: {
             tableLayout: 'fixed'
@@ -1792,30 +1811,10 @@ var GridVue2 = {
           attrs: _this3.v3 ? undefined : {
             "data-keyboardnavbody": true
           }
-        }, [body]), footer]), pager, clues])])
+        }, [body, loader]), footer]), pager, clues])])
       );
     }
 
-    var loaderTemplate = templateRendering.call(this, this.$props.loader, getListeners.call(this));
-    var defaultLoaderRendering = this.$props.loader && h("div", {
-      "class": "k-loader-container k-loader-container-md k-loader-top"
-    }, [h("div", {
-      "class": "k-loader-container-overlay k-overlay-light"
-    }), h("div", {
-      "class": "k-loader-container-inner"
-    }, [h(Loader, {
-      size: 'large',
-      attrs: this.v3 ? undefined : {
-        size: 'large',
-        type: 'infinite-spinner'
-      },
-      type: 'infinite-spinner'
-    })])]);
-    var loader = getTemplate.call(this, {
-      h: h,
-      template: loaderTemplate,
-      defaultRendering: defaultLoaderRendering
-    });
     return (// @ts-ignore function children
       h(TableKeyboardNavigationProvider, {
         ref: 'navRef',
@@ -1851,9 +1850,7 @@ var GridVue2 = {
             attrs: _this3.v3 ? undefined : {
               role: "presentation"
             },
-            ref: _this3.v3 ? function (el) {
-              _this.scrollContainerRef = el;
-            } : 'scrollContainer',
+            ref: setRef(_this3, 'scrollContainer'),
             "class": "k-grid-content k-virtual-content",
             onScroll: _this3.scrollHandler,
             on: _this3.v3 ? undefined : {
@@ -1867,13 +1864,11 @@ var GridVue2 = {
             role: "presentation",
             attrs: _this3.v3 ? undefined : {
               role: "presentation",
-              tabIndex: -1
+              tabindex: -1
             },
-            tabIndex: -1,
+            tabindex: -1,
             "class": 'k-grid-table',
-            ref: _this3.v3 ? function (el) {
-              _this.scrollTableRef = el;
-            } : 'scrollTable'
+            ref: setRef(_this3, 'scrollTable')
           }, [colGroups, h("tbody", {
             role: "presentation",
             attrs: _this3.v3 ? undefined : {
@@ -1881,9 +1876,7 @@ var GridVue2 = {
               "data-keyboardnavbody": true
             },
             "data-keyboardnavbody": true,
-            ref: _this3.v3 ? function (el) {
-              _this.scrollTableBodyRef = el;
-            } : 'scrollTableBody'
+            ref: setRef(_this3, 'scrollTableBody')
           }, [body])])]), h("div", {
             "class": "k-height-container",
             role: "presentation",
@@ -1906,9 +1899,7 @@ var GridVue2 = {
           attrs: _this3.v3 ? undefined : {
             role: "presentation"
           },
-          ref: _this3.v3 ? function (el) {
-            _this.scrollContainerRef = el;
-          } : 'scrollContainer',
+          ref: setRef(_this3, 'scrollContainer'),
           "class": "k-grid-content k-virtual-content",
           onScroll: _this3.scrollHandler,
           on: _this3.v3 ? undefined : {
@@ -1922,13 +1913,11 @@ var GridVue2 = {
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
             role: "presentation",
-            tabIndex: -1
+            tabindex: -1
           },
-          tabIndex: -1,
+          tabindex: -1,
           "class": 'k-grid-table',
-          ref: _this3.v3 ? function (el) {
-            _this.scrollTableRef = el;
-          } : 'scrollTable'
+          ref: setRef(_this3, 'scrollTable')
         }, [colGroups, h("tbody", {
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -1936,9 +1925,7 @@ var GridVue2 = {
             "data-keyboardnavbody": true
           },
           "data-keyboardnavbody": true,
-          ref: _this3.v3 ? function (el) {
-            _this.scrollTableBodyRef = el;
-          } : 'scrollTableBody'
+          ref: setRef(_this3, 'scrollTableBody')
         }, [body])])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
@@ -1974,9 +1961,7 @@ var GridVue2 = {
           attrs: _this3.v3 ? undefined : {
             role: "presentation"
           },
-          ref: _this3.v3 ? function (el) {
-            _this.scrollContainerRef = el;
-          } : 'scrollContainer',
+          ref: setRef(_this3, 'scrollContainer'),
           "class": "k-grid-content k-virtual-content",
           onScroll: _this3.scrollHandler,
           on: _this3.v3 ? undefined : {
@@ -1990,13 +1975,11 @@ var GridVue2 = {
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
             role: "presentation",
-            tabIndex: -1
+            tabindex: -1
           },
-          tabIndex: -1,
+          tabindex: -1,
           "class": 'k-grid-table',
-          ref: _this3.v3 ? function (el) {
-            _this.scrollTableRef = el;
-          } : 'scrollTable'
+          ref: setRef(_this3, 'scrollTable')
         }, [colGroups, h("tbody", {
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -2004,9 +1987,7 @@ var GridVue2 = {
             "data-keyboardnavbody": true
           },
           "data-keyboardnavbody": true,
-          ref: _this3.v3 ? function (el) {
-            _this.scrollTableBodyRef = el;
-          } : 'scrollTableBody'
+          ref: setRef(_this3, 'scrollTableBody')
         }, [body])])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
@@ -2029,9 +2010,7 @@ var GridVue2 = {
         attrs: _this3.v3 ? undefined : {
           role: "presentation"
         },
-        ref: _this3.v3 ? function (el) {
-          _this.scrollContainerRef = el;
-        } : 'scrollContainer',
+        ref: setRef(_this3, 'scrollContainer'),
         "class": "k-grid-content k-virtual-content",
         onScroll: _this3.scrollHandler,
         on: _this3.v3 ? undefined : {
@@ -2045,13 +2024,11 @@ var GridVue2 = {
         role: "presentation",
         attrs: _this3.v3 ? undefined : {
           role: "presentation",
-          tabIndex: -1
+          tabindex: -1
         },
-        tabIndex: -1,
+        tabindex: -1,
         "class": 'k-grid-table',
-        ref: _this3.v3 ? function (el) {
-          _this.scrollTableRef = el;
-        } : 'scrollTable'
+        ref: setRef(_this3, 'scrollTable')
       }, [colGroups, h("tbody", {
         role: "presentation",
         attrs: _this3.v3 ? undefined : {
@@ -2059,9 +2036,7 @@ var GridVue2 = {
           "data-keyboardnavbody": true
         },
         "data-keyboardnavbody": true,
-        ref: _this3.v3 ? function (el) {
-          _this.scrollTableBodyRef = el;
-        } : 'scrollTableBody'
+        ref: setRef(_this3, 'scrollTableBody')
       }, [body])])]), h("div", {
         "class": "k-height-container",
         role: "presentation",

package/dist/es/GridNav.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, noop } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -13,8 +14,8 @@ var GridNavVue2 = {
     currentData: Array
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/GridNoRecords.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, noRecords } from './messages';
@@ -18,8 +19,8 @@ var GridNoRecordsVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
       v3: v3,

package/dist/es/GridToolbar.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
@@ -10,8 +11,8 @@ import { getDefaultSlots } from '@progress/kendo-vue-common';
 var GridToolbarVue2 = {
   name: 'GridToolbar',
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/cells/GridCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { getNestedValue, parsers } from './../utils';
 import { provideIntlService } from '@progress/kendo-vue-intl';
@@ -80,8 +81,8 @@ var GridCellVue2 = {
     this._intl = provideIntlService(this);
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoIntlService = inject('kendoIntlService', {});
     return {
       v3: v3,
@@ -107,14 +108,14 @@ var GridCellVue2 = {
       }
 
       defaultRendering = h("td", {
-        colSpan: this.$props.colSpan,
+        colspan: this.$props.colSpan,
         attrs: this.v3 ? undefined : {
-          colSpan: this.$props.colSpan,
+          colspan: this.$props.colSpan,
           role: 'gridcell',
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
           "data-grid-col-index": this.$props.columnIndex,
-          tabIndex: navAttrs.tabIndex,
+          tabindex: navAttrs.tabIndex,
           "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
           "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
         },
@@ -129,7 +130,7 @@ var GridCellVue2 = {
         "aria-colindex": this.$props.ariaColumnIndex,
         "aria-selected": this.$props.isSelected,
         "data-grid-col-index": this.$props.columnIndex,
-        tabIndex: navAttrs.tabIndex,
+        tabindex: navAttrs.tabIndex,
         "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
         "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
       }, [dataAsString]);

package/dist/es/cells/GridDetailCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { getTemplate, noop } from '@progress/kendo-vue-common';
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
@@ -24,8 +25,8 @@ var GridDetailCellVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoIntlService = inject('kendoIntlService', {});
     return {
       v3: v3,
@@ -53,18 +54,18 @@ var GridDetailCellVue2 = {
 
     return h("td", {
       "class": "k-detail-cell",
-      colSpan: colSpan,
+      colspan: colSpan,
       attrs: this.v3 ? undefined : {
-        colSpan: colSpan,
+        colspan: colSpan,
         "aria-colindex": ariaColIndex,
         role: 'gridcell',
-        tabIndex: navAttrs.tabIndex,
+        tabindex: navAttrs.tabIndex,
         "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
         "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
       },
       "aria-colindex": ariaColIndex,
       role: 'gridcell',
-      tabIndex: navAttrs.tabIndex,
+      tabindex: navAttrs.tabIndex,
       "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
       "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
     }, [detailRender.call(this, {

package/dist/es/cells/GridDetailHierarchyCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
 import { noop } from '@progress/kendo-vue-common';
@@ -19,8 +20,8 @@ var GridDetailHierarchyCellVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoIntlService = inject('kendoIntlService', {});
     return {
       v3: v3,
@@ -33,9 +34,9 @@ var GridDetailHierarchyCellVue2 = {
     var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
     return h("td", {
       "class": "k-hierarchy-cell",
-      tabIndex: navAttrs.tabIndex,
+      tabindex: navAttrs.tabIndex,
       attrs: this.v3 ? undefined : {
-        tabIndex: navAttrs.tabIndex,
+        tabindex: navAttrs.tabIndex,
         "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
         "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
       },

package/dist/es/cells/GridEditCell.d.ts

@@ -15,7 +15,7 @@ export interface GridEditCellMethods extends Vue2type {
     triggerCancel: (dataItem: any) => void;
     triggerSave: (dataItem: any) => void;
     triggerRemove: (dataItem: any) => void;
-    changeHandler: (event: any, value: any) => void;
+    changeHandler: (event: any, value?: any) => void;
     getKeyboardNavigationAttributes: (id: string) => any;
 }
 /**

package/dist/es/cells/GridEditCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { getNestedValue } from './../utils';
 import { guid, getTemplate, noop } from '@progress/kendo-vue-common';
@@ -95,8 +96,8 @@ var GridEditCellVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoIntlService = inject('kendoIntlService', {});
     return {
       v3: v3,
@@ -117,14 +118,14 @@ var GridEditCellVue2 = {
           on: this.v3 ? undefined : {
             "keydown": this.triggerKeydown
           },
-          colSpan: this.$props.colSpan,
+          colspan: this.$props.colSpan,
           attrs: this.v3 ? undefined : {
-            colSpan: this.$props.colSpan,
+            colspan: this.$props.colSpan,
             role: 'gridcell',
             "aria-colindex": this.$props.ariaColumnIndex,
             "aria-selected": this.$props.isSelected,
             "data-grid-col-index": this.$props.columnIndex,
-            tabIndex: navAttrs.tabIndex,
+            tabindex: navAttrs.tabIndex,
             "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
             "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
           },
@@ -133,7 +134,7 @@ var GridEditCellVue2 = {
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
           "data-grid-col-index": this.$props.columnIndex,
-          tabIndex: navAttrs.tabIndex,
+          tabindex: navAttrs.tabIndex,
           "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
           "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
         }, [// @ts-ignore
@@ -158,14 +159,14 @@ var GridEditCellVue2 = {
           on: this.v3 ? undefined : {
             "keydown": this.triggerKeydown
           },
-          colSpan: this.$props.colSpan,
+          colspan: this.$props.colSpan,
           attrs: this.v3 ? undefined : {
-            colSpan: this.$props.colSpan,
+            colspan: this.$props.colSpan,
             role: 'gridcell',
             "aria-colindex": this.$props.ariaColumnIndex,
             "aria-selected": this.$props.isSelected,
             "data-grid-col-index": this.$props.columnIndex,
-            tabIndex: navAttrs.tabIndex,
+            tabindex: navAttrs.tabIndex,
             "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
             "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
           },
@@ -174,7 +175,7 @@ var GridEditCellVue2 = {
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
           "data-grid-col-index": this.$props.columnIndex,
-          tabIndex: navAttrs.tabIndex,
+          tabindex: navAttrs.tabIndex,
           "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
           "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
         }, [// @ts-ignore
@@ -199,14 +200,14 @@ var GridEditCellVue2 = {
           on: this.v3 ? undefined : {
             "keydown": this.triggerKeydown
           },
-          colSpan: this.$props.colSpan,
+          colspan: this.$props.colSpan,
           attrs: this.v3 ? undefined : {
-            colSpan: this.$props.colSpan,
+            colspan: this.$props.colSpan,
             role: 'gridcell',
             "aria-colindex": this.$props.ariaColumnIndex,
             "aria-selected": this.$props.isSelected,
             "data-grid-col-index": this.$props.columnIndex,
-            tabIndex: navAttrs.tabIndex,
+            tabindex: navAttrs.tabIndex,
             "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
             "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
           },
@@ -215,7 +216,7 @@ var GridEditCellVue2 = {
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
           "data-grid-col-index": this.$props.columnIndex,
-          tabIndex: navAttrs.tabIndex,
+          tabindex: navAttrs.tabIndex,
           "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
           "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
         }, [h("input", {
@@ -249,14 +250,14 @@ var GridEditCellVue2 = {
           on: this.v3 ? undefined : {
             "keydown": this.triggerKeydown
           },
-          colSpan: this.$props.colSpan,
+          colspan: this.$props.colSpan,
           attrs: this.v3 ? undefined : {
-            colSpan: this.$props.colSpan,
+            colspan: this.$props.colSpan,
             role: 'gridcell',
             "aria-colindex": this.$props.ariaColumnIndex,
             "aria-selected": this.$props.isSelected,
             "data-grid-col-index": this.$props.columnIndex,
-            tabIndex: navAttrs.tabIndex,
+            tabindex: navAttrs.tabIndex,
             "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
             "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
           },
@@ -265,7 +266,7 @@ var GridEditCellVue2 = {
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
           "data-grid-col-index": this.$props.columnIndex,
-          tabIndex: navAttrs.tabIndex,
+          tabindex: navAttrs.tabIndex,
           "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
           "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
         }, [h("span", {

package/dist/es/cells/GridFilterCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { Button } from '@progress/kendo-vue-buttons';
 import { messages, filterClearButton, filterChooseOperator } from '../messages';
@@ -66,8 +67,8 @@ var GridFilterCellVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoIntlService = inject('kendoIntlService', {});
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {