@progress/kendo-vue-grid 8.1.0-develop.2 → 8.1.0-develop.3

package/GridNav.d.ts

@@ -10,9 +10,28 @@
  */
 declare const GridNav: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     columnsRef: ArrayConstructor;
-    currentData: ArrayConstructor;
+    dataRef: ArrayConstructor;
     id: StringConstructor;
-}>, {}, {}, {}, {
+}>, {
+    pendingStickyNavRef: import('vue').Ref<{
+        navId: string;
+        key: string;
+        code: string;
+        keyCode: number;
+    }, {
+        navId: string;
+        key: string;
+        code: string;
+        keyCode: number;
+    } | {
+        navId: string;
+        key: string;
+        code: string;
+        keyCode: number;
+    }>;
+}, {}, {}, {
+    handleStickyKeyDown(event: any): boolean;
+    handlePendingStickyNav(): void;
     onKeyDown(event: any): void;
     onFocus(event: any): void;
     onNavigationAction(options: {
@@ -21,9 +40,9 @@ declare const GridNav: import('vue').DefineComponent<import('vue').ExtractPropTy
         action?: 'moveToNextPage' | 'moveToPrevPage' | 'reorderToLeft' | 'reorderToRight' | 'select';
     }): void;
     getLeafDataItems(): any;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("keydown" | "navigationaction" | "keyboardselectionchange" | "movetonextpage" | "movetoprevpage" | "columnreorder")[], "keydown" | "navigationaction" | "keyboardselectionchange" | "movetonextpage" | "movetoprevpage" | "columnreorder", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("keydown" | "navigationaction" | "keyboardselectionchange" | "movetonextpage" | "movetoprevpage" | "columnreorder" | "setcurrentontop")[], "keydown" | "navigationaction" | "keyboardselectionchange" | "movetonextpage" | "movetoprevpage" | "columnreorder" | "setcurrentontop", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     columnsRef: ArrayConstructor;
-    currentData: ArrayConstructor;
+    dataRef: ArrayConstructor;
     id: StringConstructor;
 }>> & Readonly<{
     onKeydown?: (...args: any[]) => any;
@@ -32,5 +51,6 @@ declare const GridNav: import('vue').DefineComponent<import('vue').ExtractPropTy
     onKeyboardselectionchange?: (...args: any[]) => any;
     onMovetonextpage?: (...args: any[]) => any;
     onMovetoprevpage?: (...args: any[]) => any;
+    onSetcurrentontop?: (...args: any[]) => any;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { GridNav };

package/GridNav.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),n=require("@progress/kendo-vue-common"),r=a.defineComponent({name:"KendoGridNav",props:{columnsRef:Array,currentData:Array,id:String},emits:["keydown","navigationaction","keyboardselectionchange","movetonextpage","movetoprevpage","columnreorder"],inject:{onNavKeyDown:{default:n.noop},onNavFocus:{default:n.noop},onNavMount:{default:n.noop},onNavBeforeUpdate:{default:n.noop},onNavUpdate:{default:n.noop},handleDispatchFocus:{default:n.noop},kbContext:{default:null},navigation:{default:null}},mounted(){this.onNavMount({scope:this.$el||void 0})},updated(){this.onNavUpdate({scope:this.$el||void 0})},methods:{onKeyDown(e){this.onNavKeyDown(e,{navigation:this.navigation,kbContext:this.kbContext,onNavigationAction:this.onNavigationAction}),this.onNavBeforeUpdate({scope:this.$el||void 0,kbContext:this.kbContext,navigation:this.navigation}),this.$emit("keydown",{dataItems:this.getLeafDataItems(),componentId:this._gridId,selectedField:this.$props.selectedField,event:e})},onFocus(e){this.onNavFocus(e,{kbContext:this.kbContext})},onNavigationAction(e){const{columnsRef:o}=this.$props;if(e.action==="moveToNextPage"&&this.$emit("movetonextpage",e.event),e.action==="moveToPrevPage"&&this.$emit("movetoprevpage",e.event),e.focusElement&&(e.action==="reorderToRight"||e.action==="reorderToLeft")){const t=parseInt(e.focusElement.ariaColIndex,10)-1;if(!o[t].reorderable)return;if(e.action==="reorderToRight"&&t<this.$props.columnsRef.length-1){if(o[t+1].disableReorder)return;this.$emit("columnreorder",t,t+1,e.event)}if(e.action==="reorderToLeft"&&t>0){if(o[t-1].disableReorder)return;this.$emit("columnreorder",t,t-1,e.event)}}e.action==="select"&&this.$emit("keyboardselectionchange",e.event),this.$emit("navigationaction",{focusElement:e.focusElement,event:e.event})},getLeafDataItems(){return this.$props.currentData.filter(e=>e.rowType==="data").map(e=>e.dataItem)}},render(){const e=n.getDefaultSlots(this);return a.createVNode("div",{onKeydown:this.onKeyDown,onFocusin:this.onFocus,id:this.$props.id,"data-keyboardnavscope":!0},[e])}});exports.GridNav=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),i=require("@progress/kendo-vue-common"),s=d.defineComponent({name:"KendoGridNav",props:{columnsRef:Array,dataRef:Array,id:String},emits:["keydown","navigationaction","keyboardselectionchange","movetonextpage","movetoprevpage","columnreorder","setcurrentontop"],inject:{onNavKeyDown:{default:i.noop},onNavFocus:{default:i.noop},onNavMount:{default:i.noop},onNavBeforeUpdate:{default:i.noop},onNavUpdate:{default:i.noop},handleDispatchFocus:{default:i.noop},kbContext:{default:null},navigation:{default:null}},mounted(){this.onNavMount({scope:this.$el||void 0})},updated(){this.onNavUpdate({scope:this.$el||void 0}),this.handlePendingStickyNav()},setup(e,n){return{pendingStickyNavRef:d.ref(null)}},methods:{handleStickyKeyDown(e){var t,r;const n=e.target;if((e.keyCode===38||e.keyCode===40)&&n.closest(".k-grid-sticky-container")){const o=parseInt(((t=n.closest("tr"))==null?void 0:t.getAttribute("absolute-row-index"))||"",10),a=n.getAttribute("data-keyboardnavid");if(!isNaN(o)&&a&&!((r=this.$el)==null?void 0:r.querySelector(`.k-grid-content .k-table-tbody>tr[absolute-row-index="${o}"]`)))return this.pendingStickyNavRef={navId:a,key:e.key,code:e.code,keyCode:e.keyCode},e.preventDefault(),e.stopPropagation(),this.$emit("setcurrentontop",{rowIndex:o}),!0}return!1},handlePendingStickyNav(){var a;if(!this.pendingStickyNavRef||!this.$el)return;const{navId:e,key:n,code:t,keyCode:r}=this.pendingStickyNavRef,o=(a=this.$el)==null?void 0:a.querySelector(`.k-grid-content .k-table-tbody td[data-keyboardnavid="${e}"]`);o&&o.dispatchEvent(new KeyboardEvent("keydown",{key:n,code:t,keyCode:r,bubbles:!0,cancelable:!0})),this.pendingStickyNavRef=null},onKeyDown(e){this.handleStickyKeyDown(e)||(this.onNavKeyDown(e,{navigation:this.navigation,kbContext:this.kbContext,onNavigationAction:this.onNavigationAction}),this.onNavBeforeUpdate({scope:this.$el||void 0,kbContext:this.kbContext,navigation:this.navigation}),this.$emit("keydown",{dataItems:this.getLeafDataItems(),componentId:this._gridId,selectedField:this.$props.selectedField,event:e}))},onFocus(e){this.onNavFocus(e,{kbContext:this.kbContext})},onNavigationAction(e){const{columnsRef:n}=this.$props;if(e.action==="moveToNextPage"&&this.$emit("movetonextpage",e.event),e.action==="moveToPrevPage"&&this.$emit("movetoprevpage",e.event),e.focusElement&&(e.action==="reorderToRight"||e.action==="reorderToLeft")){const t=parseInt(e.focusElement.ariaColIndex,10)-1;if(!n[t].reorderable)return;if(e.action==="reorderToRight"&&t<this.$props.columnsRef.length-1){if(n[t+1].disableReorder)return;this.$emit("columnreorder",t,t+1,e.event)}if(e.action==="reorderToLeft"&&t>0){if(n[t-1].disableReorder)return;this.$emit("columnreorder",t,t-1,e.event)}}e.action==="select"&&this.$emit("keyboardselectionchange",e.event),this.$emit("navigationaction",{focusElement:e.focusElement,event:e.event})},getLeafDataItems(){return this.$props.dataRef.filter(e=>e.rowType==="data").map(e=>e.dataItem)}},render(){const e=i.getDefaultSlots(this);return d.createVNode("div",{onKeydown:this.onKeyDown,onFocusin:this.onFocus,id:this.$props.id,"data-keyboardnavscope":!0},[e])}});exports.GridNav=s;

package/GridNav.mjs

@@ -5,34 +5,34 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as i, createVNode as r } from "vue";
-import { noop as n, getDefaultSlots as d } from "@progress/kendo-vue-common";
-const m = /* @__PURE__ */ i({
+import { defineComponent as d, createVNode as s, ref as c } from "vue";
+import { noop as i, getDefaultSlots as l } from "@progress/kendo-vue-common";
+const v = /* @__PURE__ */ d({
   name: "KendoGridNav",
   props: {
     columnsRef: Array,
-    currentData: Array,
+    dataRef: Array,
     id: String
   },
-  emits: ["keydown", "navigationaction", "keyboardselectionchange", "movetonextpage", "movetoprevpage", "columnreorder"],
+  emits: ["keydown", "navigationaction", "keyboardselectionchange", "movetonextpage", "movetoprevpage", "columnreorder", "setcurrentontop"],
   inject: {
     onNavKeyDown: {
-      default: n
+      default: i
     },
     onNavFocus: {
-      default: n
+      default: i
     },
     onNavMount: {
-      default: n
+      default: i
     },
     onNavBeforeUpdate: {
-      default: n
+      default: i
     },
     onNavUpdate: {
-      default: n
+      default: i
     },
     handleDispatchFocus: {
-      default: n
+      default: i
     },
     kbContext: {
       default: null
@@ -49,11 +49,51 @@ const m = /* @__PURE__ */ i({
   updated() {
     this.onNavUpdate({
       scope: this.$el || void 0
-    });
+    }), this.handlePendingStickyNav();
+  },
+  setup(e, n) {
+    return {
+      pendingStickyNavRef: c(null)
+    };
   },
   methods: {
+    handleStickyKeyDown(e) {
+      var t, r;
+      const n = e.target;
+      if ((e.keyCode === 38 || e.keyCode === 40) && n.closest(".k-grid-sticky-container")) {
+        const o = parseInt(((t = n.closest("tr")) == null ? void 0 : t.getAttribute("absolute-row-index")) || "", 10), a = n.getAttribute("data-keyboardnavid");
+        if (!isNaN(o) && a && !((r = this.$el) == null ? void 0 : r.querySelector(`.k-grid-content .k-table-tbody>tr[absolute-row-index="${o}"]`)))
+          return this.pendingStickyNavRef = {
+            navId: a,
+            key: e.key,
+            code: e.code,
+            keyCode: e.keyCode
+          }, e.preventDefault(), e.stopPropagation(), this.$emit("setcurrentontop", {
+            rowIndex: o
+          }), !0;
+      }
+      return !1;
+    },
+    handlePendingStickyNav() {
+      var a;
+      if (!this.pendingStickyNavRef || !this.$el)
+        return;
+      const {
+        navId: e,
+        key: n,
+        code: t,
+        keyCode: r
+      } = this.pendingStickyNavRef, o = (a = this.$el) == null ? void 0 : a.querySelector(`.k-grid-content .k-table-tbody td[data-keyboardnavid="${e}"]`);
+      o && o.dispatchEvent(new KeyboardEvent("keydown", {
+        key: n,
+        code: t,
+        keyCode: r,
+        bubbles: !0,
+        cancelable: !0
+      })), this.pendingStickyNavRef = null;
+    },
     onKeyDown(e) {
-      this.onNavKeyDown(e, {
+      this.handleStickyKeyDown(e) || (this.onNavKeyDown(e, {
         navigation: this.navigation,
         kbContext: this.kbContext,
         onNavigationAction: this.onNavigationAction
@@ -66,7 +106,7 @@ const m = /* @__PURE__ */ i({
         componentId: this._gridId,
         selectedField: this.$props.selectedField,
         event: e
-      });
+      }));
     },
     onFocus(e) {
       this.onNavFocus(e, {
@@ -75,19 +115,19 @@ const m = /* @__PURE__ */ i({
     },
     onNavigationAction(e) {
       const {
-        columnsRef: o
+        columnsRef: n
       } = this.$props;
       if (e.action === "moveToNextPage" && this.$emit("movetonextpage", e.event), e.action === "moveToPrevPage" && this.$emit("movetoprevpage", e.event), e.focusElement && (e.action === "reorderToRight" || e.action === "reorderToLeft")) {
         const t = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-        if (!o[t].reorderable)
+        if (!n[t].reorderable)
           return;
         if (e.action === "reorderToRight" && t < this.$props.columnsRef.length - 1) {
-          if (o[t + 1].disableReorder)
+          if (n[t + 1].disableReorder)
             return;
           this.$emit("columnreorder", t, t + 1, e.event);
         }
         if (e.action === "reorderToLeft" && t > 0) {
-          if (o[t - 1].disableReorder)
+          if (n[t - 1].disableReorder)
             return;
           this.$emit("columnreorder", t, t - 1, e.event);
         }
@@ -98,12 +138,12 @@ const m = /* @__PURE__ */ i({
       });
     },
     getLeafDataItems() {
-      return this.$props.currentData.filter((e) => e.rowType === "data").map((e) => e.dataItem);
+      return this.$props.dataRef.filter((e) => e.rowType === "data").map((e) => e.dataItem);
     }
   },
   render() {
-    const e = d(this);
-    return r("div", {
+    const e = l(this);
+    return s("div", {
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       id: this.$props.id,
@@ -112,5 +152,5 @@ const m = /* @__PURE__ */ i({
   }
 });
 export {
-  m as GridNav
+  v as GridNav
 };

package/GridState.d.ts

@@ -34,6 +34,7 @@ declare const GridStateProvider: import('vue').DefineComponent<{
     alternatePerGroup?: boolean;
     columns?: import('.').GridColumnProps[];
     dataItems?: any[] | import('@progress/kendo-data-query').DataResult;
+    cells?: import('.').GridCellsSettings;
     sortable?: import('.').GridSortSettings;
     onSortchange?: (event: GridSortChangeEvent) => void;
     defaultSort?: import('@progress/kendo-data-query').SortDescriptor[];
@@ -114,6 +115,7 @@ declare const GridStateProvider: import('vue').DefineComponent<{
     headerCellRender?: any;
     showLoader?: boolean;
     loader?: string | Object;
+    lockGroups?: boolean;
     pager?: string | boolean | Object;
     columnVirtualization?: boolean;
     navigatable?: boolean;
@@ -137,6 +139,7 @@ declare const GridStateProvider: import('vue').DefineComponent<{
     alternatePerGroup?: boolean;
     columns?: import('.').GridColumnProps[];
     dataItems?: any[] | import('@progress/kendo-data-query').DataResult;
+    cells?: import('.').GridCellsSettings;
     sortable?: import('.').GridSortSettings;
     onSortchange?: (event: GridSortChangeEvent) => void;
     defaultSort?: import('@progress/kendo-data-query').SortDescriptor[];
@@ -217,6 +220,7 @@ declare const GridStateProvider: import('vue').DefineComponent<{
     headerCellRender?: any;
     showLoader?: boolean;
     loader?: string | Object;
+    lockGroups?: boolean;
     pager?: string | boolean | Object;
     columnVirtualization?: boolean;
     navigatable?: boolean;

package/RootGrid.d.ts

@@ -82,12 +82,9 @@ export declare const RootGrid: import('vue').DefineComponent<import('vue').Extra
         type: import('vue').PropType<import('.').GridColumnState[]>;
         default: () => any;
     };
+    cells: import('vue').PropType<import('.').GridCellsSettings>;
     defaultColumnsState: {
-        type: import('vue').PropType<import('.').GridColumnState[]>; /**
-         * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
-         *
-         * @param options - Object, containing the rowIndex to which is going to be scrolled.
-         */
+        type: import('vue').PropType<import('.').GridColumnState[]>;
         default: () => any;
     };
     columnVirtualization: import('vue').PropType<boolean>;
@@ -104,6 +101,7 @@ export declare const RootGrid: import('vue').DefineComponent<import('vue').Extra
         default: any;
     };
     loader: import('vue').PropType<string | Object | Function>;
+    lockGroups: import('vue').PropType<boolean>;
     defaultFilter: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
     filter: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
     defaultSearch: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
@@ -239,7 +237,32 @@ export declare const RootGrid: import('vue').DefineComponent<import('vue').Extra
     onDetailexpandchange: import('vue').PropType<(event: import('.').GridDetailExpandChangeEvent) => void>;
 }>, void, {}, {
     columnsWithTemplates(): any[];
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    cellsWithTemplates(): any;
+}, {
+    transformTemplate(template: any, listeners: any): any;
+    transformGroupTemplates(group: any, listeners: any): {
+        groupHeader: any;
+        data: any;
+        groupFooter: any;
+    };
+    transformCellTemplates(cells: any, listeners: any): {
+        headerCell: any;
+        filterCell: any;
+        footerCell: any;
+        groupHeader: any;
+        data: any;
+        groupFooter: any;
+        select: any;
+        hierarchy: any;
+        group: any;
+        edit: {
+            text: any;
+            numeric: any;
+            boolean: any;
+            date: any;
+        };
+    };
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     id: import('vue').PropType<string>;
     autoProcessData: import('vue').PropType<boolean | {
         filter?: boolean;
@@ -267,12 +290,9 @@ export declare const RootGrid: import('vue').DefineComponent<import('vue').Extra
         type: import('vue').PropType<import('.').GridColumnState[]>;
         default: () => any;
     };
+    cells: import('vue').PropType<import('.').GridCellsSettings>;
     defaultColumnsState: {
-        type: import('vue').PropType<import('.').GridColumnState[]>; /**
-         * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
-         *
-         * @param options - Object, containing the rowIndex to which is going to be scrolled.
-         */
+        type: import('vue').PropType<import('.').GridColumnState[]>;
         default: () => any;
     };
     columnVirtualization: import('vue').PropType<boolean>;
@@ -289,6 +309,7 @@ export declare const RootGrid: import('vue').DefineComponent<import('vue').Extra
         default: any;
     };
     loader: import('vue').PropType<string | Object | Function>;
+    lockGroups: import('vue').PropType<boolean>;
     defaultFilter: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
     filter: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
     defaultSearch: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;

package/RootGrid.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),v=require("./Grid.js"),x=require("./GridState.js"),L=require("./common.js"),n=require("@progress/kendo-vue-common"),P=c.defineComponent({name:"KendoVueGrid",props:L.gridProps,setup(l,{expose:r}){const t=c.ref(null);r({get element(){var e;return((e=t.value)==null?void 0:e.element)||null},get props(){return l},get columns(){var e;return((e=t.value)==null?void 0:e.columns)||[]},scrollIntoView:e=>{var s;(s=t.value)==null||s.scrollIntoView(e)},fitColumns:e=>{var s;(s=t.value)==null||s.fitColumns(e)},exportAsPdf:()=>{var e;(e=t.value)==null||e.exportAsPdf()}})},computed:{columnsWithTemplates(){const l=n.getListeners.call(this);return n.mapTree(this.$props.columns||[],"children",r=>{const t={...r},e=n.templateRendering.call(this,t.cell,l),s=n.templateRendering.call(this,t.headerCell,l),m=n.templateRendering.call(this,t.filterCell,l),u=n.templateRendering.call(this,t.footerCell,l),p=t.columnMenu!==!1?n.templateRendering.call(this,t.columnMenu,l):!1;return{...t,cell:e,headerCell:s,filterCell:m,footerCell:u,columnMenu:p}})}},render(){const l=n.getDefaultSlots(this)||[],r=n.getListeners.call(this),t=l.filter(o=>{var a,i;return o.tag&&o.tag.toLowerCase().indexOf("toolbar")!==-1||o.componentOptions&&((a=o.componentOptions.tag)==null?void 0:a.toLowerCase().indexOf("toolbar"))!==-1||((i=o==null?void 0:o.type)==null?void 0:i.name.toLowerCase().indexOf("toolbar"))!==-1}),e=l.filter(o=>{var a,i;return o.tag&&o.tag.toLowerCase().indexOf("records")!==-1||o.componentOptions&&((a=o.componentOptions.tag)==null?void 0:a.toLowerCase().indexOf("records"))!==-1||((i=o==null?void 0:o.type)==null?void 0:i.name.toLowerCase().indexOf("records"))!==-1}),{cellRender:s,detail:m,columns:u,rowRender:p,pager:g,loader:f,...d}=this.$props,R=n.templateRendering.call(this,m,r),C=n.templateRendering.call(this,s,r),T=n.templateRendering.call(this,p,r),w=n.templateRendering.call(this,g,r),O=n.templateRendering.call(this,f,r),h=this.columnsWithTemplates;return c.createVNode(x.GridStateProvider,d,{default:()=>[c.createVNode(v.Grid,c.mergeProps(d,r,{class:this.$attrs.class,style:this.$attrs.style,columns:h,cellRender:C,rowRender:T,pager:w,loader:O,detail:R,toolbar:t,noRecords:e}),null)]})}});exports.RootGrid=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),g=require("./Grid.js"),C=require("./GridState.js"),G=require("./common.js"),n=require("@progress/kendo-vue-common"),O=i.defineComponent({name:"KendoVueGrid",props:G.gridProps,setup(e,{expose:t}){const r=i.ref(null);t({get element(){var a;return((a=r.value)==null?void 0:a.element)||null},get props(){return e},get columns(){var a;return((a=r.value)==null?void 0:a.columns)||[]},scrollIntoView:a=>{var s;(s=r.value)==null||s.scrollIntoView(a)},fitColumns:a=>{var s;(s=r.value)==null||s.fitColumns(a)},exportAsPdf:()=>{var a;(a=r.value)==null||a.exportAsPdf()}})},methods:{transformTemplate(e,t){return e?n.templateRendering.call(this,e,t):void 0},transformGroupTemplates(e,t){if(e)return{groupHeader:this.transformTemplate(e.groupHeader,t),data:this.transformTemplate(e.data,t),groupFooter:this.transformTemplate(e.groupFooter,t)}},transformCellTemplates(e,t){if(e)return{headerCell:this.transformTemplate(e.headerCell,t),filterCell:this.transformTemplate(e.filterCell,t),footerCell:this.transformTemplate(e.footerCell,t),groupHeader:this.transformTemplate(e.groupHeader,t),data:this.transformTemplate(e.data,t),groupFooter:this.transformTemplate(e.groupFooter,t),select:this.transformGroupTemplates(e.select,t),hierarchy:this.transformGroupTemplates(e.hierarchy,t),group:this.transformGroupTemplates(e.group,t),edit:e.edit?{text:this.transformTemplate(e.edit.text,t),numeric:this.transformTemplate(e.edit.numeric,t),boolean:this.transformTemplate(e.edit.boolean,t),date:this.transformTemplate(e.edit.date,t)}:void 0}}},computed:{columnsWithTemplates(){const e=n.getListeners.call(this);return n.mapTree(this.$props.columns||[],"children",t=>{const r={...t};return{...r,cell:this.transformTemplate(r.cell,e),headerCell:this.transformTemplate(r.headerCell,e),filterCell:this.transformTemplate(r.filterCell,e),footerCell:this.transformTemplate(r.footerCell,e),columnMenu:r.columnMenu===!1?!1:this.transformTemplate(r.columnMenu,e),cells:this.transformCellTemplates(r.cells,e)}})},cellsWithTemplates(){const e=n.getListeners.call(this);return this.transformCellTemplates(this.$props.cells,e)}},render(){const e=n.getDefaultSlots(this)||[],t=n.getListeners.call(this),r=e.filter(o=>{var l,m;return o.tag&&o.tag.toLowerCase().indexOf("toolbar")!==-1||o.componentOptions&&((l=o.componentOptions.tag)==null?void 0:l.toLowerCase().indexOf("toolbar"))!==-1||((m=o==null?void 0:o.type)==null?void 0:m.name.toLowerCase().indexOf("toolbar"))!==-1}),a=e.filter(o=>{var l,m;return o.tag&&o.tag.toLowerCase().indexOf("records")!==-1||o.componentOptions&&((l=o.componentOptions.tag)==null?void 0:l.toLowerCase().indexOf("records"))!==-1||((m=o==null?void 0:o.type)==null?void 0:m.name.toLowerCase().indexOf("records"))!==-1}),{cellRender:s,detail:u,columns:w,rowRender:f,pager:d,loader:h,...p}=this.$props,c=this.columnsWithTemplates,T=this.cellsWithTemplates;return i.createVNode(C.GridStateProvider,p,{default:()=>[i.createVNode(g.Grid,i.mergeProps(p,t,{class:this.$attrs.class,style:this.$attrs.style,columns:c,cells:T,cellRender:this.transformTemplate(s,t),rowRender:this.transformTemplate(f,t),pager:this.transformTemplate(d,t),loader:this.transformTemplate(h,t),detail:this.transformTemplate(u,t),toolbar:r,noRecords:a}),null)]})}});exports.RootGrid=O;

package/RootGrid.mjs

@@ -5,94 +5,133 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as L, createVNode as f, mergeProps as P, ref as v } from "vue";
-import { Grid as b } from "./Grid.mjs";
-import { GridStateProvider as y } from "./GridState.mjs";
-import { gridProps as G } from "./common.mjs";
-import { getDefaultSlots as M, getListeners as d, templateRendering as n, mapTree as V } from "@progress/kendo-vue-common";
-const I = /* @__PURE__ */ L({
+import { defineComponent as g, createVNode as i, mergeProps as C, ref as x } from "vue";
+import { Grid as w } from "./Grid.mjs";
+import { GridStateProvider as O } from "./GridState.mjs";
+import { gridProps as R } from "./common.mjs";
+import { getDefaultSlots as G, getListeners as l, mapTree as b, templateRendering as L } from "@progress/kendo-vue-common";
+const H = /* @__PURE__ */ g({
   name: "KendoVueGrid",
-  props: G,
-  setup(l, {
-    expose: r
+  props: R,
+  setup(e, {
+    expose: t
   }) {
-    const t = v(null);
-    r({
+    const r = x(null);
+    t({
       get element() {
-        var e;
-        return ((e = t.value) == null ? void 0 : e.element) || null;
+        var a;
+        return ((a = r.value) == null ? void 0 : a.element) || null;
       },
       get props() {
-        return l;
+        return e;
       },
       get columns() {
-        var e;
-        return ((e = t.value) == null ? void 0 : e.columns) || [];
+        var a;
+        return ((a = r.value) == null ? void 0 : a.columns) || [];
       },
-      scrollIntoView: (e) => {
+      scrollIntoView: (a) => {
         var s;
-        (s = t.value) == null || s.scrollIntoView(e);
+        (s = r.value) == null || s.scrollIntoView(a);
       },
-      fitColumns: (e) => {
+      fitColumns: (a) => {
         var s;
-        (s = t.value) == null || s.fitColumns(e);
+        (s = r.value) == null || s.fitColumns(a);
       },
       exportAsPdf: () => {
-        var e;
-        (e = t.value) == null || e.exportAsPdf();
+        var a;
+        (a = r.value) == null || a.exportAsPdf();
       }
     });
   },
+  methods: {
+    transformTemplate(e, t) {
+      return e ? L.call(this, e, t) : void 0;
+    },
+    transformGroupTemplates(e, t) {
+      if (e)
+        return {
+          groupHeader: this.transformTemplate(e.groupHeader, t),
+          data: this.transformTemplate(e.data, t),
+          groupFooter: this.transformTemplate(e.groupFooter, t)
+        };
+    },
+    transformCellTemplates(e, t) {
+      if (e)
+        return {
+          headerCell: this.transformTemplate(e.headerCell, t),
+          filterCell: this.transformTemplate(e.filterCell, t),
+          footerCell: this.transformTemplate(e.footerCell, t),
+          groupHeader: this.transformTemplate(e.groupHeader, t),
+          data: this.transformTemplate(e.data, t),
+          groupFooter: this.transformTemplate(e.groupFooter, t),
+          select: this.transformGroupTemplates(e.select, t),
+          hierarchy: this.transformGroupTemplates(e.hierarchy, t),
+          group: this.transformGroupTemplates(e.group, t),
+          edit: e.edit ? {
+            text: this.transformTemplate(e.edit.text, t),
+            numeric: this.transformTemplate(e.edit.numeric, t),
+            boolean: this.transformTemplate(e.edit.boolean, t),
+            date: this.transformTemplate(e.edit.date, t)
+          } : void 0
+        };
+    }
+  },
   computed: {
     columnsWithTemplates() {
-      const l = d.call(this);
-      return V(this.$props.columns || [], "children", (r) => {
-        const t = {
-          ...r
-        }, e = n.call(this, t.cell, l), s = n.call(this, t.headerCell, l), m = n.call(this, t.filterCell, l), p = n.call(this, t.footerCell, l), i = t.columnMenu !== !1 ? n.call(this, t.columnMenu, l) : !1;
+      const e = l.call(this);
+      return b(this.$props.columns || [], "children", (t) => {
+        const r = {
+          ...t
+        };
         return {
-          ...t,
-          cell: e,
-          headerCell: s,
-          filterCell: m,
-          footerCell: p,
-          columnMenu: i
+          ...r,
+          cell: this.transformTemplate(r.cell, e),
+          headerCell: this.transformTemplate(r.headerCell, e),
+          filterCell: this.transformTemplate(r.filterCell, e),
+          footerCell: this.transformTemplate(r.footerCell, e),
+          columnMenu: r.columnMenu === !1 ? !1 : this.transformTemplate(r.columnMenu, e),
+          cells: this.transformCellTemplates(r.cells, e)
         };
       });
+    },
+    cellsWithTemplates() {
+      const e = l.call(this);
+      return this.transformCellTemplates(this.$props.cells, e);
     }
   },
   render() {
-    const l = M(this) || [], r = d.call(this), t = l.filter((o) => {
-      var a, c;
-      return o.tag && o.tag.toLowerCase().indexOf("toolbar") !== -1 || o.componentOptions && ((a = o.componentOptions.tag) == null ? void 0 : a.toLowerCase().indexOf("toolbar")) !== -1 || ((c = o == null ? void 0 : o.type) == null ? void 0 : c.name.toLowerCase().indexOf("toolbar")) !== -1;
-    }), e = l.filter((o) => {
-      var a, c;
-      return o.tag && o.tag.toLowerCase().indexOf("records") !== -1 || o.componentOptions && ((a = o.componentOptions.tag) == null ? void 0 : a.toLowerCase().indexOf("records")) !== -1 || ((c = o == null ? void 0 : o.type) == null ? void 0 : c.name.toLowerCase().indexOf("records")) !== -1;
+    const e = G(this) || [], t = l.call(this), r = e.filter((o) => {
+      var n, m;
+      return o.tag && o.tag.toLowerCase().indexOf("toolbar") !== -1 || o.componentOptions && ((n = o.componentOptions.tag) == null ? void 0 : n.toLowerCase().indexOf("toolbar")) !== -1 || ((m = o == null ? void 0 : o.type) == null ? void 0 : m.name.toLowerCase().indexOf("toolbar")) !== -1;
+    }), a = e.filter((o) => {
+      var n, m;
+      return o.tag && o.tag.toLowerCase().indexOf("records") !== -1 || o.componentOptions && ((n = o.componentOptions.tag) == null ? void 0 : n.toLowerCase().indexOf("records")) !== -1 || ((m = o == null ? void 0 : o.type) == null ? void 0 : m.name.toLowerCase().indexOf("records")) !== -1;
     }), {
       cellRender: s,
-      detail: m,
-      columns: p,
-      rowRender: i,
-      pager: g,
-      loader: C,
-      ...u
-    } = this.$props, R = n.call(this, m, r), w = n.call(this, s, r), T = n.call(this, i, r), h = n.call(this, g, r), O = n.call(this, C, r), x = this.columnsWithTemplates;
-    return f(y, u, {
-      default: () => [f(b, P(u, r, {
+      detail: f,
+      columns: P,
+      rowRender: u,
+      pager: d,
+      loader: h,
+      ...p
+    } = this.$props, T = this.columnsWithTemplates, c = this.cellsWithTemplates;
+    return i(O, p, {
+      default: () => [i(w, C(p, t, {
         class: this.$attrs.class,
         style: this.$attrs.style,
-        columns: x,
-        cellRender: w,
-        rowRender: T,
-        pager: h,
-        loader: O,
-        detail: R,
-        toolbar: t,
-        noRecords: e
+        columns: T,
+        cells: c,
+        cellRender: this.transformTemplate(s, t),
+        rowRender: this.transformTemplate(u, t),
+        pager: this.transformTemplate(d, t),
+        loader: this.transformTemplate(h, t),
+        detail: this.transformTemplate(f, t),
+        toolbar: r,
+        noRecords: a
       }), null)]
     });
   }
 });
 export {
-  I as RootGrid
+  H as RootGrid
 };

package/cells/GridCell.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),a=require("../utils/main.js"),c=require("@progress/kendo-vue-intl"),d=require("@progress/kendo-vue-common"),p=require("@progress/kendo-vue-data-tools"),g=r.defineComponent({name:"GridCell",inheritAttrs:!1,emits:{cellclick:null,cellkeydown:null},props:{id:String,field:String,dataItem:Object,format:String,readFormat:String,className:String,columnType:String,colSpan:Number,columnIndex:Number,columnsCount:Number,dataIndex:Number,rowType:String,level:Number,expanded:Boolean,type:String,editor:String,rowSpan:[Number,Object],isSelected:Boolean,isHighlighted:Boolean,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean,onEdit:Function,onSave:Function,onRemove:Function,onCancel:Function,onChange:Function,onSelectionchange:Function},inject:{kendoIntlService:{default:null},getKeyboardNavigationAttributes:{default:d.noop}},methods:{triggerClick(){this.$emit("cellclick",{dataItem:this.$props.dataItem,field:this.$props.field})},triggerKeydown(e){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field})},triggerEdit(e){this.$emit("edit",e)},triggerAdd(e){this.$emit("add",e)},triggerCancel(e){this.$emit("cancel",e)},triggerSave(e){this.$emit("save",e)},triggerRemove(e){this.$emit("remove",e)}},created(){this._intl=c.provideIntlService(this)},computed:{tdClass(){const{className:e,isSelected:t,isHighlighted:n}=this.$props;return{"k-table-td":!0,"k-selected":t,"k-highlighted":n,[e]:e}}},setup(){return{kendoIntlService:r.inject("kendoIntlService",{})}},render(){var n,o,s;let e=null;const t=this.getKeyboardNavigationAttributes(this.$props.id);if(((n=this.$props.rowSpan)==null?void 0:n.count)===null)return null;if(this.$props.rowType==="groupFooter")e=r.createVNode("td",{class:this.tdClass},null);else if(this.$props.field!==void 0&&this.$props.rowType!=="groupHeader"){const i=a.getNestedValue(this.$props.field,this.$props.dataItem);let l="";i!=null&&(l=this.$props.format?this.$props.type?this._intl.format(this.$props.format,a.parsers[this.$props.type](i,this._intl,this.$props.readFormat)):this._intl.format(this.$props.format,i):i.toString()),e=r.createVNode("td",{style:this.$attrs.style,colspan:this.$props.colSpan,rowspan:(s=(o=this.$props.rowSpan)==null?void 0:o.count)!=null?s:void 0,class:this.tdClass,onKeydown:this.triggerKeydown,onClick:this.triggerClick,role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,"aria-selected":this.$props.isSelected,"data-grid-col-index":this.$props.columnIndex,tabindex:t.tabIndex,"data-keyboardnavlevel":t[p.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[p.KEYBOARD_NAV_DATA_ID]},[l])}return d.getTemplate.call(this,{h:r.h,template:this.$props.render,defaultRendering:e,additionalProps:this.$props,additionalListeners:{click:this.triggerClick,keydown:this.triggerKeydown,edit:this.triggerEdit,add:this.triggerAdd,cancel:this.triggerCancel,save:this.triggerSave,remove:this.triggerRemove}})}});exports.GridCell=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),c=require("../utils/main.js"),g=require("@progress/kendo-vue-intl"),p=require("@progress/kendo-vue-common"),o=require("@progress/kendo-vue-data-tools"),h=n.defineComponent({name:"GridCell",inheritAttrs:!1,emits:{cellclick:null,cellkeydown:null},props:{id:String,field:String,dataItem:Object,format:String,readFormat:String,className:String,columnType:String,colSpan:Number,columnIndex:Number,columnsCount:Number,dataIndex:Number,rowType:String,level:Number,expanded:Boolean,type:String,editor:String,rowSpan:[Number,Object],isSelected:Boolean,isHighlighted:Boolean,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean,onEdit:Function,onSave:Function,onRemove:Function,onCancel:Function,onChange:Function,onSelectionchange:Function},inject:{kendoIntlService:{default:null},getKeyboardNavigationAttributes:{default:p.noop}},methods:{triggerClick(){this.$emit("cellclick",{dataItem:this.$props.dataItem,field:this.$props.field})},triggerKeydown(e){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field})},triggerEdit(e){this.$emit("edit",e)},triggerAdd(e){this.$emit("add",e)},triggerCancel(e){this.$emit("cancel",e)},triggerSave(e){this.$emit("save",e)},triggerRemove(e){this.$emit("remove",e)}},created(){this._intl=g.provideIntlService(this)},computed:{tdClass(){const{className:e,isSelected:t,isHighlighted:i}=this.$props;return{"k-table-td":!0,"k-selected":t,"k-highlighted":i,[e]:e}}},setup(){return{kendoIntlService:n.inject("kendoIntlService",{})}},render(){var s,a,d;let e=null;const t=this.getKeyboardNavigationAttributes(this.$props.id);let i={};if(((s=this.$props.rowSpan)==null?void 0:s.count)===null)return null;if(this.$props.rowType==="groupFooter")i={class:this.tdClass,onKeydown:this.triggerKeydown,onClick:this.triggerClick,tabindex:t.tabIndex,"data-keyboardnavlevel":t[o.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[o.KEYBOARD_NAV_DATA_ID]},e=n.createVNode("td",i,null);else if(this.$props.field!==void 0&&this.$props.rowType!=="groupHeader"){const r=c.getNestedValue(this.$props.field,this.$props.dataItem);let l="";r!=null&&(l=this.$props.format?this.$props.type?this._intl.format(this.$props.format,c.parsers[this.$props.type](r,this._intl,this.$props.readFormat)):this._intl.format(this.$props.format,r):r.toString()),i={style:this.$attrs.style,colspan:this.$props.colSpan,rowspan:(d=(a=this.$props.rowSpan)==null?void 0:a.count)!=null?d:void 0,class:this.tdClass,onKeydown:this.triggerKeydown,onClick:this.triggerClick,role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,"aria-selected":this.$props.isSelected,"data-grid-col-index":this.$props.columnIndex,tabindex:t.tabIndex,"data-keyboardnavlevel":t[o.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[o.KEYBOARD_NAV_DATA_ID]},e=n.createVNode("td",i,[l])}return p.getTemplate.call(this,{h:n.h,template:this.$props.render,defaultRendering:e,additionalProps:{...this.$props,tdProps:i},additionalListeners:{click:this.triggerClick,keydown:this.triggerKeydown,edit:this.triggerEdit,add:this.triggerAdd,cancel:this.triggerCancel,save:this.triggerSave,remove:this.triggerRemove}})}});exports.GridCell=h;