@progress/kendo-vue-grid 8.1.0-develop.5 → 8.1.0-develop.7

package/cells/GridDetailCell.mjs

@@ -5,10 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as l, createVNode as c, inject as s, h as p } from "vue";
-import { noop as m, getTemplate as b } from "@progress/kendo-vue-common";
-import { KEYBOARD_NAV_DATA_ID as u, KEYBOARD_NAV_DATA_LEVEL as I } from "@progress/kendo-vue-data-tools";
-const x = /* @__PURE__ */ l({
+import { defineComponent as c, createVNode as s, inject as p, h as m } from "vue";
+import { noop as b, getTemplate as u } from "@progress/kendo-vue-common";
+import { KEYBOARD_NAV_DATA_ID as I, KEYBOARD_NAV_DATA_LEVEL as A } from "@progress/kendo-vue-data-tools";
+const S = /* @__PURE__ */ c({
   props: {
     colSpan: Number,
     ariaColIndex: Number,
@@ -19,12 +19,12 @@ const x = /* @__PURE__ */ l({
   },
   inject: {
     getKeyboardNavigationAttributes: {
-      default: m
+      default: b
     }
   },
   setup() {
     return {
-      kendoIntlService: s("kendoIntlService", {})
+      kendoIntlService: p("kendoIntlService", {})
     };
   },
   render() {
@@ -33,28 +33,28 @@ const x = /* @__PURE__ */ l({
       ariaColIndex: a,
       dataItem: n,
       dataIndex: r,
-      id: i
-    } = this.$props, t = this.getKeyboardNavigationAttributes(i), d = function(o) {
-      return b.call(this, {
-        h: p,
-        template: this.$props.detail,
-        additionalProps: o
-      });
-    };
-    return c("td", {
+      id: d
+    } = this.$props, t = this.getKeyboardNavigationAttributes(d), o = {
       class: "k-table-td k-detail-cell",
       colspan: e,
       "aria-colindex": a,
       role: "gridcell",
       tabindex: t.tabIndex,
-      "data-keyboardnavlevel": t[I],
-      "data-keyboardnavid": t[u]
-    }, [d.call(this, {
+      "data-keyboardnavlevel": t[A],
+      "data-keyboardnavid": t[I]
+    }, i = function(l) {
+      return u.call(this, {
+        h: m,
+        template: this.$props.detail,
+        additionalProps: l
+      });
+    }.call(this, {
       dataItem: n,
       dataIndex: r
-    })]);
+    });
+    return s("td", o, [i]);
   }
 });
 export {
-  x as GridDetailCell
+  S as GridDetailCell
 };

package/cells/GridFilterCell.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"),$=require("@progress/kendo-vue-buttons"),n=require("../messages/main.js"),u=require("@progress/kendo-vue-dropdowns"),d=require("@progress/kendo-vue-inputs"),S=require("@progress/kendo-vue-dateinputs"),h=require("@progress/kendo-svg-icons"),m=require("@progress/kendo-vue-intl"),p=require("../filterCommon.js"),c=require("@progress/kendo-vue-common"),k=r.defineComponent({name:"KendoGridFilterCell",inheritAttrs:!1,props:{id:String,grid:Object,field:String,filterType:String,colSpan:Number,title:String,value:[String,Number,Boolean,Date],operator:[String,Function],operators:Array,booleanValues:Array,onChange:Function,render:[String,Function,Object],ariaLabel:String,size:String},inject:{kendoLocalizationService:{default:null},kendoIntlService:{default:null}},methods:{inputChange(e,t){const o=p.cellInputChange(e,t,this.$props);this.triggerChange(o)},operatorChange(e,t){const o=p.cellOperatorChange(e.value.operator,t,this.$props.value);this.triggerChange(o)},boolDropdownChange(e,t){const o=p.cellBoolDropdownChange(e.value.operator,t);this.triggerChange(o)},clear(e){e.preventDefault(),this.triggerChange({value:"",operator:"",event:e})},triggerChange(e){e.field=this.$props.field,this.$emit("change",e)}},setup(){const e=r.inject("kendoIntlService",{}),t=r.inject("kendoLocalizationService",{});return{kendoIntlService:e,kendoLocalizationService:t}},render(){const e=m.provideLocalizationService(this),{size:t}=this.$props,o=this.$props.operators.find(l=>l.operator===this.$props.operator)||null,g=function(){if(this.$props.filterType!=="boolean")return r.createVNode(u.DropDownList,{onChange:this.operatorChange,value:o,size:t,class:"k-dropdown-operator",icon:"filter",svgIcon:h.filterIcon,iconClassName:"filter k-button-icon","data-items":this.$props.operators,textField:"text",title:e.toLanguageString(n.filterChooseOperator,n.messages[n.filterChooseOperator]),popupSettings:{width:"",anchor:""},ariaLabel:this.ariaLabel},null)},f=function(l,a){let s;switch(l){case"numeric":return r.createVNode(d.NumericTextBox,{size:t,value:a,onChange:i=>{this.inputChange(i.value,i.event)},title:this.$props.title,ariaLabel:this.ariaLabel},null);case"date":return r.createVNode(S.DatePicker,{size:t,value:a,onChange:i=>{this.inputChange(i.value,i)},title:this.$props.title,ariaLabel:this.ariaLabel},null);case"boolean":return s=this.$props.booleanValues,r.createVNode(u.DropDownList,{onChange:this.boolDropdownChange,size:t,value:s.find(i=>i.operator===(a!==null?a:"")),"data-items":s,textField:"text",title:this.$props.title,ariaLabel:this.ariaLabel},null);default:return r.createVNode(d.TextBox,{value:a||"",size:t,onInput:i=>{this.inputChange(i.target.value,i)},title:this.$props.title,"aria-label":this.ariaLabel},null)}},C=r.createVNode("div",{class:"k-filtercell",style:this.$attrs.style},[r.createVNode("div",{class:"k-filtercell-wrapper"},[f.call(this,this.$props.filterType,this.$props.value),r.createVNode("div",{class:"k-filtercell-operator"},[g.call(this),r.createTextVNode(" "),r.createVNode($.Button,{type:"button",size:t,icon:"filter-clear",svgIcon:h.filterClearIcon,class:{"k-disabled":!(!(this.$props.value===null||this.$props.value==="")||this.$props.operator)},title:e.toLanguageString(n.filterClearButton,n.messages[n.filterClearButton]),onClick:this.clear},null)])])]),v=this.$props.grid?c.getListeners.call(this.$props.grid):null,b=c.templateRendering.call(this.$props.grid,this.$props.render,v);return c.getTemplate.call(this,{h:r.h,template:b,defaultRendering:C,additionalProps:this.$props,additionalListeners:{change:this.triggerChange}})}});exports.GridFilterCell=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),b=require("@progress/kendo-vue-buttons"),n=require("../messages/main.js"),d=require("@progress/kendo-vue-dropdowns"),h=require("@progress/kendo-vue-inputs"),S=require("@progress/kendo-vue-dateinputs"),g=require("@progress/kendo-svg-icons"),m=require("@progress/kendo-vue-intl"),c=require("../filterCommon.js"),$=require("@progress/kendo-vue-common"),k=r.defineComponent({name:"KendoGridFilterCell",inheritAttrs:!1,props:{id:String,grid:Object,field:String,filterType:String,colSpan:Number,title:String,value:[String,Number,Boolean,Date],operator:[String,Function],operators:Array,booleanValues:Array,onChange:Function,render:[String,Function,Object],ariaLabel:String,size:String},inject:{kendoLocalizationService:{default:null},kendoIntlService:{default:null}},methods:{inputChange(e,t){const i=c.cellInputChange(e,t,this.$props);this.triggerChange(i)},operatorChange(e,t){const i=c.cellOperatorChange(e.value.operator,t,this.$props.value);this.triggerChange(i)},boolDropdownChange(e,t){const i=c.cellBoolDropdownChange(e.value.operator,t);this.triggerChange(i)},clear(e){e.preventDefault(),this.triggerChange({value:"",operator:"",event:e})},triggerChange(e){e.field=this.$props.field,this.$emit("change",e)}},setup(){const e=r.inject("kendoIntlService",{}),t=r.inject("kendoLocalizationService",{});return{kendoIntlService:e,kendoLocalizationService:t}},render(){const e=m.provideLocalizationService(this),{size:t}=this.$props,i=this.$props.operators.find(l=>l.operator===this.$props.operator)||null,f=function(){if(this.$props.filterType!=="boolean")return r.createVNode(d.DropDownList,{onChange:this.operatorChange,value:i,size:t,class:"k-dropdown-operator",icon:"filter",svgIcon:g.filterIcon,iconClassName:"filter k-button-icon","data-items":this.$props.operators,textField:"text",title:e.toLanguageString(n.filterChooseOperator,n.messages[n.filterChooseOperator]),popupSettings:{width:"",anchor:""},ariaLabel:this.ariaLabel},null)},C=function(l,a){let s;switch(l){case"numeric":return r.createVNode(h.NumericTextBox,{size:t,value:a,onChange:o=>{this.inputChange(o.value,o.event)},title:this.$props.title,ariaLabel:this.ariaLabel},null);case"date":return r.createVNode(S.DatePicker,{size:t,value:a,onChange:o=>{this.inputChange(o.value,o)},title:this.$props.title,ariaLabel:this.ariaLabel},null);case"boolean":return s=this.$props.booleanValues,r.createVNode(d.DropDownList,{onChange:this.boolDropdownChange,size:t,value:s.find(o=>o.operator===(a!==null?a:"")),"data-items":s,textField:"text",title:this.$props.title,ariaLabel:this.ariaLabel},null);default:return r.createVNode(h.TextBox,{value:a||"",size:t,onInput:o=>{this.inputChange(o.target.value,o)},title:this.$props.title,"aria-label":this.ariaLabel},null)}},p={class:"k-filtercell",style:this.$attrs.style},u=r.createVNode("div",{class:"k-filtercell-wrapper"},[C.call(this,this.$props.filterType,this.$props.value),r.createVNode("div",{class:"k-filtercell-operator"},[f.call(this),r.createTextVNode(" "),r.createVNode(b.Button,{type:"button",size:t,icon:"filter-clear",svgIcon:g.filterClearIcon,class:{"k-disabled":!(!(this.$props.value===null||this.$props.value==="")||this.$props.operator)},title:e.toLanguageString(n.filterClearButton,n.messages[n.filterClearButton]),onClick:this.clear},null)])]),v=r.createVNode("div",p,[u]);return $.getTemplate.call(this,{h:r.h,template:this.$props.render,defaultRendering:v,additionalProps:{...this.$props,tdProps:p},additionalListeners:{change:this.triggerChange},defaultSlots:u,swapDefaultSlots:!0})}});exports.GridFilterCell=k;

package/cells/GridFilterCell.mjs

@@ -5,17 +5,17 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as v, createVNode as i, createTextVNode as b, h as $, inject as s } from "vue";
-import { Button as S } from "@progress/kendo-vue-buttons";
-import { filterClearButton as p, messages as c, filterChooseOperator as h } from "../messages/main.mjs";
-import { DropDownList as g } from "@progress/kendo-vue-dropdowns";
+import { defineComponent as v, createVNode as i, createTextVNode as b, h as S, inject as c } from "vue";
+import { Button as $ } from "@progress/kendo-vue-buttons";
+import { filterClearButton as h, messages as u, filterChooseOperator as g } from "../messages/main.mjs";
+import { DropDownList as d } from "@progress/kendo-vue-dropdowns";
 import { TextBox as L, NumericTextBox as k } from "@progress/kendo-vue-inputs";
 import { DatePicker as z } from "@progress/kendo-vue-dateinputs";
-import { filterClearIcon as x, filterIcon as I } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as w } from "@progress/kendo-vue-intl";
-import { cellBoolDropdownChange as y, cellOperatorChange as D, cellInputChange as F } from "../filterCommon.mjs";
-import { getListeners as T, templateRendering as B, getTemplate as N } from "@progress/kendo-vue-common";
-const H = /* @__PURE__ */ v({
+import { filterClearIcon as x, filterIcon as w } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as D } from "@progress/kendo-vue-intl";
+import { cellBoolDropdownChange as I, cellOperatorChange as y, cellInputChange as F } from "../filterCommon.mjs";
+import { getTemplate as T } from "@progress/kendo-vue-common";
+const K = /* @__PURE__ */ v({
   name: "KendoGridFilterCell",
   inheritAttrs: !1,
   props: {
@@ -48,11 +48,11 @@ const H = /* @__PURE__ */ v({
       this.triggerChange(o);
     },
     operatorChange(e, t) {
-      const o = D(e.value.operator, t, this.$props.value);
+      const o = y(e.value.operator, t, this.$props.value);
       this.triggerChange(o);
     },
     boolDropdownChange(e, t) {
-      const o = y(e.value.operator, t);
+      const o = I(e.value.operator, t);
       this.triggerChange(o);
     },
     clear(e) {
@@ -67,41 +67,41 @@ const H = /* @__PURE__ */ v({
     }
   },
   setup() {
-    const e = s("kendoIntlService", {}), t = s("kendoLocalizationService", {});
+    const e = c("kendoIntlService", {}), t = c("kendoLocalizationService", {});
     return {
       kendoIntlService: e,
       kendoLocalizationService: t
     };
   },
   render() {
-    const e = w(this), {
+    const e = D(this), {
       size: t
-    } = this.$props, o = this.$props.operators.find((a) => a.operator === this.$props.operator) || null, u = function() {
+    } = this.$props, o = this.$props.operators.find((n) => n.operator === this.$props.operator) || null, f = function() {
       if (this.$props.filterType !== "boolean")
-        return i(g, {
+        return i(d, {
           onChange: this.operatorChange,
           value: o,
           size: t,
           class: "k-dropdown-operator",
           icon: "filter",
-          svgIcon: I,
+          svgIcon: w,
           iconClassName: "filter k-button-icon",
           "data-items": this.$props.operators,
           textField: "text",
-          title: e.toLanguageString(h, c[h]),
+          title: e.toLanguageString(g, u[g]),
           popupSettings: {
             width: "",
             anchor: ""
           },
           ariaLabel: this.ariaLabel
         }, null);
-    }, d = function(a, n) {
+    }, m = function(n, a) {
       let l;
-      switch (a) {
+      switch (n) {
         case "numeric":
           return i(k, {
             size: t,
-            value: n,
+            value: a,
             onChange: (r) => {
               this.inputChange(r.value, r.event);
             },
@@ -111,7 +111,7 @@ const H = /* @__PURE__ */ v({
         case "date":
           return i(z, {
             size: t,
-            value: n,
+            value: a,
             onChange: (r) => {
               this.inputChange(r.value, r);
             },
@@ -119,10 +119,10 @@ const H = /* @__PURE__ */ v({
             ariaLabel: this.ariaLabel
           }, null);
         case "boolean":
-          return l = this.$props.booleanValues, i(g, {
+          return l = this.$props.booleanValues, i(d, {
             onChange: this.boolDropdownChange,
             size: t,
-            value: l.find((r) => r.operator === (n !== null ? n : "")),
+            value: l.find((r) => r.operator === (a !== null ? a : "")),
             "data-items": l,
             textField: "text",
             title: this.$props.title,
@@ -130,7 +130,7 @@ const H = /* @__PURE__ */ v({
           }, null);
         default:
           return i(L, {
-            value: n || "",
+            value: a || "",
             size: t,
             onInput: (r) => {
               this.inputChange(r.target.value, r);
@@ -139,14 +139,14 @@ const H = /* @__PURE__ */ v({
             "aria-label": this.ariaLabel
           }, null);
       }
-    }, f = i("div", {
+    }, s = {
       class: "k-filtercell",
       style: this.$attrs.style
-    }, [i("div", {
+    }, p = i("div", {
       class: "k-filtercell-wrapper"
-    }, [d.call(this, this.$props.filterType, this.$props.value), i("div", {
+    }, [m.call(this, this.$props.filterType, this.$props.value), i("div", {
       class: "k-filtercell-operator"
-    }, [u.call(this), b(" "), i(S, {
+    }, [f.call(this), b(" "), i($, {
       type: "button",
       size: t,
       icon: "filter-clear",
@@ -155,20 +155,25 @@ const H = /* @__PURE__ */ v({
         /* button is always visible if there is either value or operator */
         "k-disabled": !(!(this.$props.value === null || this.$props.value === "") || this.$props.operator)
       },
-      title: e.toLanguageString(p, c[p]),
+      title: e.toLanguageString(h, u[h]),
       onClick: this.clear
-    }, null)])])]), m = this.$props.grid ? T.call(this.$props.grid) : null, C = B.call(this.$props.grid, this.$props.render, m);
-    return N.call(this, {
-      h: $,
-      template: C,
-      defaultRendering: f,
-      additionalProps: this.$props,
+    }, null)])]), C = i("div", s, [p]);
+    return T.call(this, {
+      h: S,
+      template: this.$props.render,
+      defaultRendering: C,
+      additionalProps: {
+        ...this.$props,
+        tdProps: s
+      },
       additionalListeners: {
         change: this.triggerChange
-      }
+      },
+      defaultSlots: p,
+      swapDefaultSlots: !0
     });
   }
 });
 export {
-  H as GridFilterCell
+  K as GridFilterCell
 };

package/cells/GridGroupCell.d.ts

@@ -30,6 +30,7 @@ declare const GridGroupCell: import('vue').DefineComponent<import('vue').Extract
     ariaColumnIndex: PropType<number>;
     group: PropType<import('@progress/kendo-vue-data-tools').GroupState>;
     render: PropType<any>;
+    cells: PropType<import('..').GridCellsSettings>;
 }>, {}, {}, {
     tdClass(): {
         [x: number]: any;
@@ -71,6 +72,7 @@ declare const GridGroupCell: import('vue').DefineComponent<import('vue').Extract
     ariaColumnIndex: PropType<number>;
     group: PropType<import('@progress/kendo-vue-data-tools').GroupState>;
     render: PropType<any>;
+    cells: PropType<import('..').GridCellsSettings>;
 }>> & Readonly<{
     onChange?: (...args: any[] | unknown[]) => any;
     onCellkeydown?: (...args: any[] | unknown[]) => any;

package/cells/GridGroupCell.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"),i=require("@progress/kendo-vue-common"),g=require("@progress/kendo-vue-data-tools"),n=require("../messages/main.js"),y=require("@progress/kendo-vue-intl"),h=require("@progress/kendo-svg-icons"),v=a.defineComponent({name:"KendoGridGroupCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,colSpan:Number,className:String,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,locked:Boolean,expanded:Boolean,editor:String,dataIndex:Number,isSelected:Boolean,isRtl:Boolean,ariaColumnIndex:Number,group:Object,render:[String,Function,Object]},emits:{change:null,cellkeydown:null},inject:{kendo:{default:null},kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:i.noop}},computed:{tdClass(){const{className:e,locked:t}=this.$props;return{"k-table-td":!0,"k-grid-content-sticky":t,[e]:e}},tdStyle(){const{locked:e}=this.$props,t=e?{position:"sticky",zIndex:2}:{};return{...this.$attrs.style,...t}},groupTdClass(){const{className:e,locked:t}=this.$props;return{"k-table-td":!0,"k-group-cell":!0,"k-grid-content-sticky":t,[e]:e}}},methods:{triggerStateChange(){var t;const e=this.kendo;(t=e==null?void 0:e.dispatchGroupExpand)==null||t.call(e,{type:g.GROUP_EXPAND_ACTION.TOGGLE,group:this.$props.group})},triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,field:this.$props.field,expanded:this.$props.expanded}),!e.defaultPrevented&&e.keyCode===i.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,level:this.$props.level,field:void 0,value:!t}),this.triggerStateChange())},clickHandler(e,t,l){e.preventDefault(),this.$emit("change",{dataItem:t,dataIndex:this.$props.dataIndex,event:e,level:this.$props.level,field:void 0,value:!l}),this.triggerStateChange()}},render(){let e=null;const{columnIndex:t,level:l,columnsCount:d,rowType:I,dataItem:o,field:s,expanded:r,render:S,locked:c}=this.$props,p=this.getKeyboardNavigationAttributes(this.$props.id),m=y.provideLocalizationService(this).toLanguageString(n.groupCaretAriaLabelCollapse,n.messages[n.groupCaretAriaLabelCollapse]),k=y.provideLocalizationService(this).toLanguageString(n.groupCaretAriaLabelExpand,n.messages[n.groupCaretAriaLabelExpand]);if(t===void 0||l===void 0||t<l||d===void 0||I!=="groupHeader"||o[s]===void 0)e=a.createVNode("td",{style:this.$attrs.style,key:"g"+t,class:this.groupTdClass},null);else if(t<=l){const f=a.createVNode("td",{style:this.tdStyle,onKeydown:u=>{this.triggerKeydown(u,r)},key:"g-colspan",class:c?"k-table-td":this.tdClass,colspan:c?0:d-t,role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,"aria-selected":this.$props.isSelected,"aria-expanded":r,"data-grid-col-index":this.$props.columnIndex,tabindex:p.tabIndex,"data-keyboardnavlevel":p[g.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":p[g.KEYBOARD_NAV_DATA_ID]},[a.createVNode("p",{class:"k-reset"},[a.createVNode("a",{onClick:u=>{this.clickHandler(u,o,r)},href:"#",tabindex:-1,title:r?m:k,"aria-label":r?m:k},[a.createVNode(i.Icon,{name:r?"caret-alt-down":this.isRtl?"caret-alt-left":"caret-alt-right",icon:r?h.caretAltDownIcon:this.isRtl?h.caretAltLeftIcon:h.caretAltRightIcon},null)]),o[s]?o[s].toString():""])]),C={className:"k-table-td",role:"gridcell",colSpan:d-t,style:{borderLeftWidth:0,borderRightWidth:0}},b=c?a.createVNode("td",C,null):null;e=b?[f,b]:f}return i.getTemplate.call(this,{h:a.h,template:S,defaultRendering:e,additionalProps:this.$props,additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler}})}});exports.GridGroupCell=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),i=require("@progress/kendo-vue-common"),f=require("@progress/kendo-vue-data-tools"),o=require("../messages/main.js"),S=require("@progress/kendo-vue-intl"),k=require("@progress/kendo-svg-icons"),x=e=>{var t,l;return(l=(t=e.cells)==null?void 0:t.groupHeader)==null?void 0:l[e.rowType||"data"]},A=a.defineComponent({name:"KendoGridGroupCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,colSpan:Number,className:String,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,locked:Boolean,expanded:Boolean,editor:String,dataIndex:Number,isSelected:Boolean,isRtl:Boolean,ariaColumnIndex:Number,group:Object,render:[String,Function,Object],cells:Object},emits:{change:null,cellkeydown:null},inject:{kendo:{default:null},kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:i.noop}},computed:{tdClass(){const{className:e,locked:t}=this.$props;return{"k-table-td":!0,"k-grid-content-sticky":t,[e]:e}},tdStyle(){const{locked:e}=this.$props,t=e?{position:"sticky",zIndex:2}:{};return{...this.$attrs.style,...t}},groupTdClass(){const{className:e,locked:t}=this.$props;return{"k-table-td":!0,"k-group-cell":!0,"k-grid-content-sticky":t,[e]:e}}},methods:{triggerStateChange(){var t;const e=this.kendo;(t=e==null?void 0:e.dispatchGroupExpand)==null||t.call(e,{type:f.GROUP_EXPAND_ACTION.TOGGLE,group:this.$props.group})},triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,field:this.$props.field,expanded:this.$props.expanded}),!e.defaultPrevented&&e.keyCode===i.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,level:this.$props.level,field:void 0,value:!t}),this.triggerStateChange())},clickHandler(e,t,l){e.preventDefault(),this.$emit("change",{dataItem:t,dataIndex:this.$props.dataIndex,event:e,level:this.$props.level,field:void 0,value:!l}),this.triggerStateChange()}},render(){let e=null,t,l,s=null;const{columnIndex:n,level:c,columnsCount:p,rowType:v,dataItem:d,field:u,expanded:r,render:$,locked:g}=this.$props,h=this.getKeyboardNavigationAttributes(this.$props.id),b=S.provideLocalizationService(this).toLanguageString(o.groupCaretAriaLabelCollapse,o.messages[o.groupCaretAriaLabelCollapse]),y=S.provideLocalizationService(this).toLanguageString(o.groupCaretAriaLabelExpand,o.messages[o.groupCaretAriaLabelExpand]);if(n===void 0||c===void 0||n<c||p===void 0||v!=="groupHeader"||d[u]===void 0)t={style:this.$attrs.style,key:"g"+n,class:this.groupTdClass},e=a.createVNode("td",t,null);else if(n<=c){t={style:this.tdStyle,key:"g-colspan",class:g?"k-table-td":this.tdClass,colspan:g?0:p-n,role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,"aria-selected":this.$props.isSelected,"aria-expanded":r,"data-grid-col-index":this.$props.columnIndex,tabindex:h.tabIndex,"data-keyboardnavlevel":h[f.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":h[f.KEYBOARD_NAV_DATA_ID]},s=a.createVNode("p",{class:"k-reset"},[a.createVNode("a",{onClick:m=>{this.clickHandler(m,d,r)},href:"#",tabindex:-1,title:r?b:y,"aria-label":r?b:y},[a.createVNode(i.Icon,{name:r?"caret-alt-down":this.isRtl?"caret-alt-left":"caret-alt-right",icon:r?k.caretAltDownIcon:this.isRtl?k.caretAltLeftIcon:k.caretAltRightIcon},null)]),d[u]?d[u].toString():""]);const C=a.createVNode("td",a.mergeProps(t,{onKeydown:m=>{this.triggerKeydown(m,r)}}),[s]);l={className:"k-table-td",role:"gridcell",colSpan:p-n,style:{borderLeftWidth:0,borderRightWidth:0}};const I=g?a.createVNode("td",l,null):null;e=I?[C,I]:C}return i.getTemplate.call(this,{h:a.h,template:$||x(this.$props),defaultRendering:e,additionalProps:{...this.$props,tdProps:t,td2Props:l},additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler},defaultSlots:s,swapDefaultSlots:!0})}});exports.GridGroupCell=A;

package/cells/GridGroupCell.mjs

@@ -5,13 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as S, createVNode as l, h as $ } from "vue";
-import { noop as C, Icon as A, getTemplate as v, Keys as N } from "@progress/kendo-vue-common";
-import { KEYBOARD_NAV_DATA_ID as L, KEYBOARD_NAV_DATA_LEVEL as w, GROUP_EXPAND_ACTION as K } from "@progress/kendo-vue-data-tools";
-import { groupCaretAriaLabelCollapse as m, messages as f, groupCaretAriaLabelExpand as k } from "../messages/main.mjs";
-import { provideLocalizationService as y } from "@progress/kendo-vue-intl";
-import { caretAltDownIcon as R, caretAltRightIcon as D, caretAltLeftIcon as E } from "@progress/kendo-svg-icons";
-const P = /* @__PURE__ */ S({
+import { defineComponent as x, createVNode as n, mergeProps as A, h as v } from "vue";
+import { noop as N, Icon as L, getTemplate as w, Keys as D } from "@progress/kendo-vue-common";
+import { KEYBOARD_NAV_DATA_ID as K, KEYBOARD_NAV_DATA_LEVEL as R, GROUP_EXPAND_ACTION as T } from "@progress/kendo-vue-data-tools";
+import { groupCaretAriaLabelCollapse as y, messages as b, groupCaretAriaLabelExpand as I } from "../messages/main.mjs";
+import { provideLocalizationService as S } from "@progress/kendo-vue-intl";
+import { caretAltDownIcon as E, caretAltRightIcon as O, caretAltLeftIcon as G } from "@progress/kendo-svg-icons";
+const _ = (e) => {
+  var t, l;
+  return (l = (t = e.cells) == null ? void 0 : t.groupHeader) == null ? void 0 : l[e.rowType || "data"];
+}, W = /* @__PURE__ */ x({
   name: "KendoGridGroupCell",
   inheritAttrs: !1,
   props: {
@@ -34,7 +37,8 @@ const P = /* @__PURE__ */ S({
     isRtl: Boolean,
     ariaColumnIndex: Number,
     group: Object,
-    render: [String, Function, Object]
+    render: [String, Function, Object],
+    cells: Object
   },
   emits: {
     change: null,
@@ -51,7 +55,7 @@ const P = /* @__PURE__ */ S({
       default: null
     },
     getKeyboardNavigationAttributes: {
-      default: C
+      default: N
     }
   },
   computed: {
@@ -96,7 +100,7 @@ const P = /* @__PURE__ */ S({
       var t;
       const e = this.kendo;
       (t = e == null ? void 0 : e.dispatchGroupExpand) == null || t.call(e, {
-        type: K.TOGGLE,
+        type: T.TOGGLE,
         group: this.$props.group
       });
     },
@@ -107,7 +111,7 @@ const P = /* @__PURE__ */ S({
         dataIndex: this.$props.dataIndex,
         field: this.$props.field,
         expanded: this.$props.expanded
-      }), !e.defaultPrevented && e.keyCode === N.enter && (e.preventDefault(), this.$emit("change", {
+      }), !e.defaultPrevented && e.keyCode === D.enter && (e.preventDefault(), this.$emit("change", {
         dataItem: this.$props.dataItem,
         dataIndex: this.$props.dataIndex,
         event: e,
@@ -116,89 +120,99 @@ const P = /* @__PURE__ */ S({
         value: !t
       }), this.triggerStateChange());
     },
-    clickHandler(e, t, r) {
+    clickHandler(e, t, l) {
       e.preventDefault(), this.$emit("change", {
         dataItem: t,
         dataIndex: this.$props.dataIndex,
         event: e,
         level: this.$props.level,
         field: void 0,
-        value: !r
+        value: !l
       }), this.triggerStateChange();
     }
   },
   render() {
-    let e = null;
+    let e = null, t, l, o = null;
     const {
-      columnIndex: t,
-      level: r,
-      columnsCount: i,
-      rowType: b,
-      dataItem: n,
-      field: o,
+      columnIndex: r,
+      level: d,
+      columnsCount: s,
+      rowType: C,
+      dataItem: i,
+      field: p,
       expanded: a,
-      render: I,
-      locked: d
-    } = this.$props, s = this.getKeyboardNavigationAttributes(this.$props.id), c = y(this).toLanguageString(m, f[m]), u = y(this).toLanguageString(k, f[k]);
-    if (t === void 0 || r === void 0 || t < r || i === void 0 || b !== "groupHeader" || n[o] === void 0)
-      e = l("td", {
+      render: $,
+      locked: c
+    } = this.$props, u = this.getKeyboardNavigationAttributes(this.$props.id), h = S(this).toLanguageString(y, b[y]), m = S(this).toLanguageString(I, b[I]);
+    if (r === void 0 || d === void 0 || r < d || s === void 0 || C !== "groupHeader" || i[p] === void 0)
+      t = {
         style: this.$attrs.style,
-        key: "g" + t,
+        key: "g" + r,
         class: this.groupTdClass
-      }, null);
-    else if (t <= r) {
-      const g = l("td", {
+      }, e = n("td", t, null);
+    else if (r <= d) {
+      t = {
         style: this.tdStyle,
-        onKeydown: (p) => {
-          this.triggerKeydown(p, a);
-        },
         key: "g-colspan",
-        class: d ? "k-table-td" : this.tdClass,
-        colspan: d ? 0 : i - t,
+        class: c ? "k-table-td" : this.tdClass,
+        colspan: c ? 0 : s - r,
         role: "gridcell",
         "aria-colindex": this.$props.ariaColumnIndex,
         "aria-selected": this.$props.isSelected,
         "aria-expanded": a,
         "data-grid-col-index": this.$props.columnIndex,
-        tabindex: s.tabIndex,
-        "data-keyboardnavlevel": s[w],
-        "data-keyboardnavid": s[L]
-      }, [l("p", {
+        tabindex: u.tabIndex,
+        "data-keyboardnavlevel": u[R],
+        "data-keyboardnavid": u[K]
+      }, o = n("p", {
         class: "k-reset"
-      }, [l("a", {
-        onClick: (p) => {
-          this.clickHandler(p, n, a);
+      }, [n("a", {
+        onClick: (g) => {
+          this.clickHandler(g, i, a);
         },
         href: "#",
         tabindex: -1,
-        title: a ? c : u,
-        "aria-label": a ? c : u
-      }, [l(A, {
+        title: a ? h : m,
+        "aria-label": a ? h : m
+      }, [n(L, {
         name: a ? "caret-alt-down" : this.isRtl ? "caret-alt-left" : "caret-alt-right",
-        icon: a ? R : this.isRtl ? E : D
-      }, null)]), n[o] ? n[o].toString() : ""])]), x = {
+        icon: a ? E : this.isRtl ? G : O
+      }, null)]), i[p] ? i[p].toString() : ""]);
+      const f = n("td", A(t, {
+        onKeydown: (g) => {
+          this.triggerKeydown(g, a);
+        }
+      }), [o]);
+      l = {
         className: "k-table-td",
         role: "gridcell",
-        colSpan: i - t,
+        colSpan: s - r,
         style: {
           borderLeftWidth: 0,
           borderRightWidth: 0
         }
-      }, h = d ? l("td", x, null) : null;
-      e = h ? [g, h] : g;
+      };
+      const k = c ? n("td", l, null) : null;
+      e = k ? [f, k] : f;
     }
-    return v.call(this, {
-      h: $,
-      template: I,
+    return w.call(this, {
+      h: v,
+      template: $ || _(this.$props),
       defaultRendering: e,
-      additionalProps: this.$props,
+      additionalProps: {
+        ...this.$props,
+        tdProps: t,
+        td2Props: l
+      },
       additionalListeners: {
         keydown: this.triggerKeydown,
         click: this.clickHandler
-      }
+      },
+      defaultSlots: o,
+      swapDefaultSlots: !0
     });
   }
 });
 export {
-  P as GridGroupCell
+  W as GridGroupCell
 };

package/cells/GridHierarchyCell.d.ts

@@ -28,6 +28,7 @@ declare const GridHierarchyCell: import('vue').DefineComponent<import('vue').Ext
     ariaColumnIndex: PropType<number>;
     render: PropType<any>;
     isRtl: PropType<boolean>;
+    cells: PropType<import('..').GridCellsSettings>;
 }>, {}, {}, {
     wrapperClass(): {
         [x: number]: any;
@@ -60,6 +61,7 @@ declare const GridHierarchyCell: import('vue').DefineComponent<import('vue').Ext
     ariaColumnIndex: PropType<number>;
     render: PropType<any>;
     isRtl: PropType<boolean>;
+    cells: PropType<import('..').GridCellsSettings>;
 }>> & Readonly<{
     onChange?: (...args: any[] | unknown[]) => any;
     onCellkeydown?: (...args: any[] | unknown[]) => any;

package/cells/GridHierarchyCell.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 i=require("vue"),l=require("@progress/kendo-vue-common"),o=require("@progress/kendo-vue-data-tools"),u=require("@progress/kendo-vue-intl"),r=require("../messages/main.js"),p=require("@progress/kendo-svg-icons"),h=i.defineComponent({name:"KendoGridHierarchyCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,className:String,colSpan:Number,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,editor:String,isSelected:Boolean,dataIndex:Number,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean},emits:{change:null,cellkeydown:null},inject:{kendo:{default:null},kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:l.noop}},methods:{triggerStateChange(){const e=this.kendo;e.dataItemKey&&this.$props.dataItem[e.dataItemKey]!==void 0&&(e==null||e.dispatchDetailExpand({type:o.DETAIL_EXPAND_ACTION.TOGGLE,id:this.$props.dataItem[e.dataItemKey]}))},triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field,expanded:t}),!e.defaultPrevented&&e.keyCode===l.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,field:this.$props.field,value:!t}),this.triggerStateChange())},clickHandler(e,t,n){e.preventDefault(),this.$emit("change",{dataItem:t,event:e,field:void 0,value:!n}),this.triggerStateChange()}},computed:{wrapperClass(){return{"k-table-td":!0,"k-hierarchy-cell":!0,[this.className||""]:this.className}}},render(){let e=null;const t=this.getKeyboardNavigationAttributes(this.$props.id),n=u.provideLocalizationService(this),d=n.toLanguageString(r.collapseDetailAriaLabel,r.messages[r.collapseDetailAriaLabel]),c=n.toLanguageString(r.expandDetailAriaLabel,r.messages[r.expandDetailAriaLabel]);if(this.$props.rowType==="groupFooter")e=i.createVNode("td",{class:this.wrapperClass},null);else if(this.$props.rowType!=="groupHeader"){const a=this.$props.expanded;e=i.createVNode("td",{style:this.$attrs.style,onKeydown:s=>{this.triggerKeydown(s,a)},class:this.wrapperClass,"aria-expanded":a?"true":"false",role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,tabindex:t.tabIndex,"data-keyboardnavlevel":t[o.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[o.KEYBOARD_NAV_DATA_ID]},[i.createVNode("a",{onClick:s=>{this.clickHandler(s,this.$props.dataItem,a)},href:"#",tabindex:-1,title:a?d:c,"aria-label":a?d:c},[i.createVNode(l.Icon,{name:a?"minus":"plus",icon:a?p.minusIcon:p.plusIcon},null)])])}return l.getTemplate.call(this,{h:i.h,template:this.$props.render,defaultRendering:e,additionalProps:this.$props,additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler}})}});exports.GridHierarchyCell=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),l=require("@progress/kendo-vue-common"),d=require("@progress/kendo-vue-data-tools"),g=require("@progress/kendo-vue-intl"),n=require("../messages/main.js"),h=require("@progress/kendo-svg-icons"),m=e=>{var t,a;return(a=(t=e.cells)==null?void 0:t.hierarchy)==null?void 0:a[e.rowType||"data"]},f=i.defineComponent({name:"KendoGridHierarchyCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,className:String,colSpan:Number,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,editor:String,isSelected:Boolean,dataIndex:Number,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean,cells:Object},emits:{change:null,cellkeydown:null},inject:{kendo:{default:null},kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:l.noop}},methods:{triggerStateChange(){const e=this.kendo;e.dataItemKey&&this.$props.dataItem[e.dataItemKey]!==void 0&&(e==null||e.dispatchDetailExpand({type:d.DETAIL_EXPAND_ACTION.TOGGLE,id:this.$props.dataItem[e.dataItemKey]}))},triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field,expanded:t}),!e.defaultPrevented&&e.keyCode===l.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,field:this.$props.field,value:!t}),this.triggerStateChange())},clickHandler(e,t,a){e.preventDefault(),this.$emit("change",{dataItem:t,event:e,field:void 0,value:!a}),this.triggerStateChange()}},computed:{wrapperClass(){return{"k-table-td":!0,"k-hierarchy-cell":!0,[this.className||""]:this.className}}},render(){let e=null,t,a=null;const s=this.getKeyboardNavigationAttributes(this.$props.id),c=g.provideLocalizationService(this),p=c.toLanguageString(n.collapseDetailAriaLabel,n.messages[n.collapseDetailAriaLabel]),u=c.toLanguageString(n.expandDetailAriaLabel,n.messages[n.expandDetailAriaLabel]);if(this.$props.rowType==="groupFooter")t={class:this.wrapperClass},e=i.createVNode("td",t,null);else if(this.$props.rowType!=="groupHeader"){const r=this.$props.expanded;t={style:this.$attrs.style,class:this.wrapperClass,"aria-expanded":r?"true":"false",role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,tabindex:s.tabIndex,"data-keyboardnavlevel":s[d.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":s[d.KEYBOARD_NAV_DATA_ID]},a=i.createVNode("a",{onClick:o=>{this.clickHandler(o,this.$props.dataItem,r)},href:"#",tabindex:-1,title:r?p:u,"aria-label":r?p:u},[i.createVNode(l.Icon,{name:r?"minus":"plus",icon:r?h.minusIcon:h.plusIcon},null)]),e=i.createVNode("td",i.mergeProps(t,{onKeydown:o=>{this.triggerKeydown(o,r)}}),[a])}return l.getTemplate.call(this,{h:i.h,template:this.$props.render||m(this.$props),defaultRendering:e,additionalProps:{...this.$props,tdProps:t},additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler},defaultSlots:a,swapDefaultSlots:!0})}});exports.GridHierarchyCell=f;