@progress/kendo-vue-treelist 3.5.2 → 3.5.3-dev.202209051408

package/dist/es/TreeList.js

@@ -44,7 +44,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var markRaw = allVue.markRaw;
-import { classNames, noop, getter, guid, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl } from '@progress/kendo-vue-common';
+import { classNames, noop, getter, guid, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl, getRef } from '@progress/kendo-vue-common';
 import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, readColumns, mapColumns, // tableKeyboardNavigation,
 // TableKeyboardNavigationContext,
 TableKeyboardNavigationProvider, tableKeyboardNavigationTools as navigationTools, operators, getSelectionOptions, normalize, Pager } from '@progress/kendo-vue-data-tools';
@@ -115,7 +115,8 @@ var TreeListVue2 = {
       wrapperScrollTop: 0,
       updateOnScroll: false,
       tbodyOffsetTop: 0,
-      isRtl: false
+      isRtl: false,
+      navigation: undefined
     };
   },
   // private get document(): Document | undefined {
@@ -132,11 +133,18 @@ var TreeListVue2 = {
   mounted: function mounted() {
     this.calculateSizes(this.$el);
     var rtl = isRtl(this.$el);
-    this.isRtl = rtl; // tableKeyboardNavigation.onComponentDidMount({
+    this.isRtl = rtl;
+    var elementString = '$el';
+    var element = getRef(this, 'gridNav');
+
+    if (element) {
+      this.element = element[elementString];
+    } // tableKeyboardNavigation.onComponentDidMount({
     //     scope: this.element || undefined,
     //     contextStateRef: this.contextStateRef,
     //     navigationStateRef: this.navigationStateRef
     // });
+
   },
   // /**
   //  * @hidden
@@ -206,7 +214,7 @@ var TreeListVue2 = {
       return Boolean(c.filter) || Boolean(c.filterCell);
     }) || filterRow !== undefined;
     var FilterRow = filterRow || TreeListFilterRow;
-    var idPrefix = navigationTools.getIdPrefix(undefined); // to do this.navigationStateRef
+    var idPrefix = navigationTools.getIdPrefix(this.navigation);
 
     if (this.prevColumns !== columns) {
       this.extendedColumn = readColumns(columns, {
@@ -680,9 +688,6 @@ var TreeListVue2 = {
           "class": classNames('k-widget k-grid', _this2.$props.className, {
             'k-treelist-scrollable': scrollable !== 'none'
           }),
-          ref: function ref(e) {
-            return _this.element = e;
-          },
           currentData: flattedData,
           attrs: _this2.v3 ? undefined : {
             currentData: flattedData,
@@ -693,14 +698,17 @@ var TreeListVue2 = {
           onScroll: virtualScroll ? _this2.handleOnScroll : noop,
           on: _this2.v3 ? undefined : {
             "scroll": virtualScroll ? _this2.handleOnScroll : noop,
-            "keyDown": _this2.onKeyDown,
+            "keydown": _this2.onKeyDown,
             "focus": _this2.onFocus
           },
-          onKeyDown: _this2.onKeyDown,
+          onKeydown: _this2.onKeyDown,
           onFocus: _this2.onFocus,
           "aria-rowcount": total,
           "aria-colcount": leafColumns.length,
-          role: 'treegrid'
+          role: 'treegrid',
+          ref: _this2.v3 ? function (el) {
+            _this.treeListNavRef = el;
+          } : 'treeListNav'
         }, _this2.v3 ? function () {
           return [_this2.$props.toolbar, //     // @ts-ignore
           //   <TableSelection
@@ -717,11 +725,12 @@ var TreeListVue2 = {
               role: 'presentation'
             }
           }, [colGroups, header, h("tbody", {
-            // {...tableKeyboardNavigationBodyAttributes} 
-            role: 'presentation',
+            "data-keyboardnavbody": true,
             attrs: _this2.v3 ? undefined : {
+              "data-keyboardnavbody": true,
               role: 'presentation'
-            }
+            },
+            role: 'presentation'
           }, [body])]) //     </TableSelection>
           , pager, reorderable && h(DropClue, {
             ref: _this2.dragLogic.refDropElementClue
@@ -737,10 +746,12 @@ var TreeListVue2 = {
             role: 'presentation'
           }
         }, [colGroups, header, h("tbody", {
-          role: 'presentation',
+          "data-keyboardnavbody": true,
           attrs: _this2.v3 ? undefined : {
+            "data-keyboardnavbody": true,
             role: 'presentation'
-          }
+          },
+          role: 'presentation'
         }, [body])]), pager, reorderable && h(DropClue, {
           ref: _this2.dragLogic.refDropElementClue
         }), reorderable && h(DragClue, {
@@ -751,9 +762,6 @@ var TreeListVue2 = {
         "class": classNames('k-widget k-grid', _this2.$props.className, {
           'k-treelist-scrollable': scrollable !== 'none'
         }),
-        ref: function ref(e) {
-          return _this.element = e;
-        },
         currentData: flattedData,
         attrs: _this2.v3 ? undefined : {
           currentData: flattedData,
@@ -764,14 +772,17 @@ var TreeListVue2 = {
         onScroll: virtualScroll ? _this2.handleOnScroll : noop,
         on: _this2.v3 ? undefined : {
           "scroll": virtualScroll ? _this2.handleOnScroll : noop,
-          "keyDown": _this2.onKeyDown,
+          "keydown": _this2.onKeyDown,
           "focus": _this2.onFocus
         },
-        onKeyDown: _this2.onKeyDown,
+        onKeydown: _this2.onKeyDown,
         onFocus: _this2.onFocus,
         "aria-rowcount": total,
         "aria-colcount": leafColumns.length,
-        role: 'treegrid'
+        role: 'treegrid',
+        ref: _this2.v3 ? function (el) {
+          _this.treeListNavRef = el;
+        } : 'treeListNav'
       }, _this2.v3 ? function () {
         return [_this2.$props.toolbar, h("table", {
           style: __assign(__assign({}, tableProps.style || {}), {
@@ -782,10 +793,12 @@ var TreeListVue2 = {
             role: 'presentation'
           }
         }, [colGroups, header, h("tbody", {
-          role: 'presentation',
+          "data-keyboardnavbody": true,
           attrs: _this2.v3 ? undefined : {
+            "data-keyboardnavbody": true,
             role: 'presentation'
-          }
+          },
+          role: 'presentation'
         }, [body])]), pager, reorderable && h(DropClue, {
           ref: _this2.dragLogic.refDropElementClue
         }), reorderable && h(DragClue, {
@@ -800,10 +813,12 @@ var TreeListVue2 = {
           role: 'presentation'
         }
       }, [colGroups, header, h("tbody", {
-        role: 'presentation',
+        "data-keyboardnavbody": true,
         attrs: _this2.v3 ? undefined : {
+          "data-keyboardnavbody": true,
           role: 'presentation'
-        }
+        },
+        role: 'presentation'
       }, [body])]), pager, reorderable && h(DropClue, {
         ref: _this2.dragLogic.refDropElementClue
       }), reorderable && h(DragClue, {
@@ -894,21 +909,7 @@ var TreeListVue2 = {
       return flattedData;
     },
     onKeyDown: function onKeyDown(event) {
-      // tableKeyboardNavigation.onKeyDown(event, {
-      //     contextStateRef: this.contextStateRef,
-      //     navigationStateRef: this.navigationStateRef
-      // });
-      var _a = getSelectionOptions(this.$props.selectable),
-          mode = _a.mode,
-          cell = _a.cell;
-
-      this.$emit('keydown', __assign({
-        dataItems: this.getLeafDataItems(),
-        mode: mode,
-        cell: cell,
-        componentId: this._treeListId,
-        selectedField: this.$props.selectedField
-      }, this.getArguments(event)));
+      this.$emit('keydown', event);
     },
     onFocus: function onFocus(_event) {// tableKeyboardNavigation.onFocus(event, {
       //     contextStateRef: this.contextStateRef
@@ -1227,7 +1228,7 @@ var TreeListVue2 = {
         this.$emit(handler, __assign(__assign({}, this.getArguments(event)), data));
       } else if (hasListener.call(this, 'datastatechange')) {
         this.$emit('datastatechange', __assign(__assign({}, this.getArguments(event)), {
-          data: __assign(__assign({}, this.getDataState()), moreData)
+          data: __assign(__assign(__assign({}, this.getDataState()), data), moreData)
         }));
       }
     },
@@ -1239,9 +1240,8 @@ var TreeListVue2 = {
     },
     getArguments: function getArguments(event) {
       return {
-        nativeEvent: event && event.nativeEvent,
         event: event,
-        target: this
+        component: this
       };
     },
     expandedSubItems: function expandedSubItems(dataItem) {

package/dist/es/cells/TreeListCell.js

@@ -49,7 +49,7 @@ var TreeListCellVue2 = {
           dataItem = _a.dataItem,
           level = _a.level;
 
-      if (event.isDefaultPrevented()) {
+      if (event.defaultPrevented) {
         return;
       }
 

package/dist/es/main.js

@@ -1,9 +1,6 @@
 import { TreeList } from './TreeList';
 import { TreeListCell } from './cells/TreeListCell';
-import { TreeListSelectionCell
-//  TreeListSelectionCellProps
- } from './cells/TreeListSelectionCell';
-// import { TreeListHeaderSelectionCell, TreeListHeaderSelectionCellProps } from './header/TreeListHeaderSelectionCell';
+import { TreeListSelectionCell } from './cells/TreeListSelectionCell';
 import { TreeListRow } from './rows/TreeListRow';
 import { TreeListToolbar } from './TreeListToolbar';
 import { TreeListNoRecords } from './TreeListNoRecords';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-treelist',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662110842,
+    publishDate: 1662386727,
     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/esm/TreeList.js

@@ -44,7 +44,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var markRaw = allVue.markRaw;
-import { classNames, noop, getter, guid, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl } from '@progress/kendo-vue-common';
+import { classNames, noop, getter, guid, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl, getRef } from '@progress/kendo-vue-common';
 import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, readColumns, mapColumns, // tableKeyboardNavigation,
 // TableKeyboardNavigationContext,
 TableKeyboardNavigationProvider, tableKeyboardNavigationTools as navigationTools, operators, getSelectionOptions, normalize, Pager } from '@progress/kendo-vue-data-tools';
@@ -115,7 +115,8 @@ var TreeListVue2 = {
       wrapperScrollTop: 0,
       updateOnScroll: false,
       tbodyOffsetTop: 0,
-      isRtl: false
+      isRtl: false,
+      navigation: undefined
     };
   },
   // private get document(): Document | undefined {
@@ -132,11 +133,18 @@ var TreeListVue2 = {
   mounted: function mounted() {
     this.calculateSizes(this.$el);
     var rtl = isRtl(this.$el);
-    this.isRtl = rtl; // tableKeyboardNavigation.onComponentDidMount({
+    this.isRtl = rtl;
+    var elementString = '$el';
+    var element = getRef(this, 'gridNav');
+
+    if (element) {
+      this.element = element[elementString];
+    } // tableKeyboardNavigation.onComponentDidMount({
     //     scope: this.element || undefined,
     //     contextStateRef: this.contextStateRef,
     //     navigationStateRef: this.navigationStateRef
     // });
+
   },
   // /**
   //  * @hidden
@@ -206,7 +214,7 @@ var TreeListVue2 = {
       return Boolean(c.filter) || Boolean(c.filterCell);
     }) || filterRow !== undefined;
     var FilterRow = filterRow || TreeListFilterRow;
-    var idPrefix = navigationTools.getIdPrefix(undefined); // to do this.navigationStateRef
+    var idPrefix = navigationTools.getIdPrefix(this.navigation);
 
     if (this.prevColumns !== columns) {
       this.extendedColumn = readColumns(columns, {
@@ -680,9 +688,6 @@ var TreeListVue2 = {
           "class": classNames('k-widget k-grid', _this2.$props.className, {
             'k-treelist-scrollable': scrollable !== 'none'
           }),
-          ref: function ref(e) {
-            return _this.element = e;
-          },
           currentData: flattedData,
           attrs: _this2.v3 ? undefined : {
             currentData: flattedData,
@@ -693,14 +698,17 @@ var TreeListVue2 = {
           onScroll: virtualScroll ? _this2.handleOnScroll : noop,
           on: _this2.v3 ? undefined : {
             "scroll": virtualScroll ? _this2.handleOnScroll : noop,
-            "keyDown": _this2.onKeyDown,
+            "keydown": _this2.onKeyDown,
             "focus": _this2.onFocus
           },
-          onKeyDown: _this2.onKeyDown,
+          onKeydown: _this2.onKeyDown,
           onFocus: _this2.onFocus,
           "aria-rowcount": total,
           "aria-colcount": leafColumns.length,
-          role: 'treegrid'
+          role: 'treegrid',
+          ref: _this2.v3 ? function (el) {
+            _this.treeListNavRef = el;
+          } : 'treeListNav'
         }, _this2.v3 ? function () {
           return [_this2.$props.toolbar, //     // @ts-ignore
           //   <TableSelection
@@ -717,11 +725,12 @@ var TreeListVue2 = {
               role: 'presentation'
             }
           }, [colGroups, header, h("tbody", {
-            // {...tableKeyboardNavigationBodyAttributes} 
-            role: 'presentation',
+            "data-keyboardnavbody": true,
             attrs: _this2.v3 ? undefined : {
+              "data-keyboardnavbody": true,
               role: 'presentation'
-            }
+            },
+            role: 'presentation'
           }, [body])]) //     </TableSelection>
           , pager, reorderable && h(DropClue, {
             ref: _this2.dragLogic.refDropElementClue
@@ -737,10 +746,12 @@ var TreeListVue2 = {
             role: 'presentation'
           }
         }, [colGroups, header, h("tbody", {
-          role: 'presentation',
+          "data-keyboardnavbody": true,
           attrs: _this2.v3 ? undefined : {
+            "data-keyboardnavbody": true,
             role: 'presentation'
-          }
+          },
+          role: 'presentation'
         }, [body])]), pager, reorderable && h(DropClue, {
           ref: _this2.dragLogic.refDropElementClue
         }), reorderable && h(DragClue, {
@@ -751,9 +762,6 @@ var TreeListVue2 = {
         "class": classNames('k-widget k-grid', _this2.$props.className, {
           'k-treelist-scrollable': scrollable !== 'none'
         }),
-        ref: function ref(e) {
-          return _this.element = e;
-        },
         currentData: flattedData,
         attrs: _this2.v3 ? undefined : {
           currentData: flattedData,
@@ -764,14 +772,17 @@ var TreeListVue2 = {
         onScroll: virtualScroll ? _this2.handleOnScroll : noop,
         on: _this2.v3 ? undefined : {
           "scroll": virtualScroll ? _this2.handleOnScroll : noop,
-          "keyDown": _this2.onKeyDown,
+          "keydown": _this2.onKeyDown,
           "focus": _this2.onFocus
         },
-        onKeyDown: _this2.onKeyDown,
+        onKeydown: _this2.onKeyDown,
         onFocus: _this2.onFocus,
         "aria-rowcount": total,
         "aria-colcount": leafColumns.length,
-        role: 'treegrid'
+        role: 'treegrid',
+        ref: _this2.v3 ? function (el) {
+          _this.treeListNavRef = el;
+        } : 'treeListNav'
       }, _this2.v3 ? function () {
         return [_this2.$props.toolbar, h("table", {
           style: __assign(__assign({}, tableProps.style || {}), {
@@ -782,10 +793,12 @@ var TreeListVue2 = {
             role: 'presentation'
           }
         }, [colGroups, header, h("tbody", {
-          role: 'presentation',
+          "data-keyboardnavbody": true,
           attrs: _this2.v3 ? undefined : {
+            "data-keyboardnavbody": true,
             role: 'presentation'
-          }
+          },
+          role: 'presentation'
         }, [body])]), pager, reorderable && h(DropClue, {
           ref: _this2.dragLogic.refDropElementClue
         }), reorderable && h(DragClue, {
@@ -800,10 +813,12 @@ var TreeListVue2 = {
           role: 'presentation'
         }
       }, [colGroups, header, h("tbody", {
-        role: 'presentation',
+        "data-keyboardnavbody": true,
         attrs: _this2.v3 ? undefined : {
+          "data-keyboardnavbody": true,
           role: 'presentation'
-        }
+        },
+        role: 'presentation'
       }, [body])]), pager, reorderable && h(DropClue, {
         ref: _this2.dragLogic.refDropElementClue
       }), reorderable && h(DragClue, {
@@ -894,21 +909,7 @@ var TreeListVue2 = {
       return flattedData;
     },
     onKeyDown: function onKeyDown(event) {
-      // tableKeyboardNavigation.onKeyDown(event, {
-      //     contextStateRef: this.contextStateRef,
-      //     navigationStateRef: this.navigationStateRef
-      // });
-      var _a = getSelectionOptions(this.$props.selectable),
-          mode = _a.mode,
-          cell = _a.cell;
-
-      this.$emit('keydown', __assign({
-        dataItems: this.getLeafDataItems(),
-        mode: mode,
-        cell: cell,
-        componentId: this._treeListId,
-        selectedField: this.$props.selectedField
-      }, this.getArguments(event)));
+      this.$emit('keydown', event);
     },
     onFocus: function onFocus(_event) {// tableKeyboardNavigation.onFocus(event, {
       //     contextStateRef: this.contextStateRef
@@ -1227,7 +1228,7 @@ var TreeListVue2 = {
         this.$emit(handler, __assign(__assign({}, this.getArguments(event)), data));
       } else if (hasListener.call(this, 'datastatechange')) {
         this.$emit('datastatechange', __assign(__assign({}, this.getArguments(event)), {
-          data: __assign(__assign({}, this.getDataState()), moreData)
+          data: __assign(__assign(__assign({}, this.getDataState()), data), moreData)
         }));
       }
     },
@@ -1239,9 +1240,8 @@ var TreeListVue2 = {
     },
     getArguments: function getArguments(event) {
       return {
-        nativeEvent: event && event.nativeEvent,
         event: event,
-        target: this
+        component: this
       };
     },
     expandedSubItems: function expandedSubItems(dataItem) {

package/dist/esm/cells/TreeListCell.js

@@ -49,7 +49,7 @@ var TreeListCellVue2 = {
           dataItem = _a.dataItem,
           level = _a.level;
 
-      if (event.isDefaultPrevented()) {
+      if (event.defaultPrevented) {
         return;
       }
 

package/dist/esm/main.js

@@ -1,9 +1,6 @@
 import { TreeList } from './TreeList.js';
 import { TreeListCell } from './cells/TreeListCell.js';
-import { TreeListSelectionCell
-//  TreeListSelectionCellProps
- } from './cells/TreeListSelectionCell.js';
-// import { TreeListHeaderSelectionCell, TreeListHeaderSelectionCellProps } from './header/TreeListHeaderSelectionCell.js';
+import { TreeListSelectionCell } from './cells/TreeListSelectionCell.js';
 import { TreeListRow } from './rows/TreeListRow.js';
 import { TreeListToolbar } from './TreeListToolbar.js';
 import { TreeListNoRecords } from './TreeListNoRecords.js';

package/dist/esm/package-metadata.js

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