@progress/kendo-vue-grid 8.1.2-develop.1 → 8.2.0-develop.1

package/cells/GridSelectionCell.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as i, createVNode as l, Fragment as d, mergeProps as c, h as p } from "vue";
+import { defineComponent as a, createVNode as o, Fragment as d, mergeProps as p, h as c, inject as u } from "vue";
 import { getNestedValue as h } from "../utils/main.mjs";
-import { noop as u, getTemplate as m, guid as g } from "@progress/kendo-vue-common";
-import { KEYBOARD_NAV_DATA_ID as b, KEYBOARD_NAV_DATA_LEVEL as f } from "@progress/kendo-vue-data-tools";
-const y = (e) => {
+import { noop as g, getTemplate as m, guid as b } from "@progress/kendo-vue-common";
+import { KEYBOARD_NAV_DATA_ID as C, KEYBOARD_NAV_DATA_LEVEL as x } from "@progress/kendo-vue-data-tools";
+const f = (e) => {
   var t, n;
   return (n = (t = e.cells) == null ? void 0 : t.select) == null ? void 0 : n[e.rowType || "data"];
-}, I = /* @__PURE__ */ i({
+}, S = /* @__PURE__ */ a({
   name: "KendoGridSelectionCell",
   inheritAttrs: !1,
   props: {
@@ -44,12 +44,12 @@ const y = (e) => {
       default: null
     },
     getKeyboardNavigationAttributes: {
-      default: u
+      default: g
     }
   },
   data() {
     return {
-      inputId: g()
+      inputId: b()
     };
   },
   computed: {
@@ -76,49 +76,59 @@ const y = (e) => {
         event: e,
         dataItem: this.$props.dataItem
       });
+    },
+    triggerContextMenu(e) {
+      var t, n;
+      (n = (t = this.gridContext) == null ? void 0 : t.onContextMenu) == null || n.call(t, e, this.$props.dataItem, this.$props.field);
     }
   },
+  setup() {
+    return {
+      gridContext: u("gridContext", null)
+    };
+  },
   render() {
     let e, t = null;
-    const n = this.$props.isSelected || h(this.$props.field, this.$props.dataItem), r = typeof n == "boolean" && n, s = this.$props.render, o = this.getKeyboardNavigationAttributes(this.$props.id), a = this.$props.rowType !== "groupHeader" ? (e = {
+    const n = this.$props.isSelected || h(this.$props.field, this.$props.dataItem), i = typeof n == "boolean" && n, l = this.$props.render, r = this.getKeyboardNavigationAttributes(this.$props.id), s = this.$props.rowType !== "groupHeader" ? (e = {
       style: this.$attrs.style,
       colspan: this.$props.colSpan,
       class: this.tdClass,
       "aria-colindex": this.$props.ariaColumnIndex,
       role: "gridcell",
-      tabindex: o.tabIndex,
-      "data-keyboardnavlevel": o[f],
-      "data-keyboardnavid": o[b]
-    }, t = l(d, null, [l("span", {
+      tabindex: r.tabIndex,
+      "data-keyboardnavlevel": r[x],
+      "data-keyboardnavid": r[C]
+    }, t = o(d, null, [o("span", {
       class: "k-checkbox-wrap"
-    }, [l("input", {
-      checked: r,
+    }, [o("input", {
+      checked: i,
       id: this.inputId,
       type: "checkbox",
       class: "k-checkbox k-checkbox-md k-rounded-md",
       onChange: this.handleOnChange
-    }, null)]), l("label", {
+    }, null)]), o("label", {
       class: "k-checkbox-label",
       for: this.inputId
-    }, null)]), l("td", c(e, {
+    }, null)]), o("td", p(e, {
       onKeydown: this.triggerKeydown
     }), [t])) : null;
     return m.call(this, {
-      h: p,
-      template: s || y(this.$props),
-      defaultRendering: a,
+      h: c,
+      template: l || f(this.$props),
+      defaultRendering: s,
       additionalProps: {
         ...this.$props,
         tdProps: e
       },
       additionalListeners: {
         keydown: this.triggerKeydown,
-        change: this.handleOnChange
+        change: this.handleOnChange,
+        contextmenu: this.triggerContextMenu
       },
       defaultSlots: t
     });
   }
 });
 export {
-  I as GridSelectionCell
+  S as GridSelectionCell
 };

package/cells/pincell/GridPinCell.d.ts

@@ -42,8 +42,12 @@ export declare const GridPinCell: import('vue').DefineComponent<import('vue').Ex
     isRtl: PropType<boolean>;
 }>, {
     getKeyboardNavigationAttributes: () => void;
-    triggerCellContextMenu: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    gridContext: any;
+}, {}, {}, {
+    triggerClick(): void;
+    triggerKeydown(e: any): void;
+    triggerContextMenu(e: MouseEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     id: PropType<string>;
     field: PropType<string>;
     dataItem: PropType<any>;

package/cells/pincell/GridPinCell.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 o=require("vue"),i=require("@progress/kendo-vue-data-tools"),r=require("@progress/kendo-vue-common"),p=require("./GridPinDropdownButton.js"),s=e=>{var n,t;return(t=(n=e.cells)==null?void 0:n.pin)==null?void 0:t[e.rowType||"data"]},b=o.defineComponent({name:"GridPinCell",inheritAttrs:!1,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},inject:{getKeyboardNavigationAttributes:{default:r.noop},triggerCellContextMenu:{default:r.noop}},setup(){const e=o.inject("getKeyboardNavigationAttributes",r.noop),n=o.inject("triggerCellContextMenu",r.noop);return{getKeyboardNavigationAttributes:e,triggerCellContextMenu:n}},render(){var l,d;const e=this.$props;let n=null;const t=this.getKeyboardNavigationAttributes(e.id);let a={};if(e.rowType==="groupFooter")a={class:e.className,tabindex:t.tabIndex,"data-keyboardnavlevel":t[i.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[i.KEYBOARD_NAV_DATA_ID]},n=o.createVNode("td",a,null);else if(e.rowType!=="groupHeader"){const c=(d=(l=e.unstyled)==null?void 0:l.uGrid)!=null?d:r.uGrid,g=r.classNames(c.td({selected:e.isSelected,highlighted:e.isHighlighted,sorted:e.isSorted,alt:e.isAlt}),e.className);a={style:this.$attrs.style,colspan:e.colSpan,class:g,role:"gridcell","aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[i.TABLE_COL_INDEX_ATTRIBUTE]:e.columnIndex,tabindex:t.tabIndex,"data-keyboardnavlevel":t[i.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[i.KEYBOARD_NAV_DATA_ID],onContextmenu:m=>{this.triggerCellContextMenu(m,e.dataItem,e.field)}},n=o.createVNode("td",a,[o.createVNode(p.GridPinDropdownButton,{dataItem:e.dataItem},null)])}const u=s(e);return r.getTemplate.call(this,{h:o.h,template:u,defaultRendering:n,additionalProps:{...e,tdProps:a},additionalListeners:{}})}});exports.GridPinCell=b;exports.getCustomCell=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),o=require("@progress/kendo-vue-data-tools"),a=require("@progress/kendo-vue-common"),m=require("./GridPinDropdownButton.js"),s=e=>{var t,i;return(i=(t=e.cells)==null?void 0:t.pin)==null?void 0:i[e.rowType||"data"]},p=n.defineComponent({name:"GridPinCell",inheritAttrs:!1,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},inject:{getKeyboardNavigationAttributes:{default:a.noop}},setup(){const e=n.inject("getKeyboardNavigationAttributes",a.noop),t=n.inject("gridContext",null);return{getKeyboardNavigationAttributes:e,gridContext:t}},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})},triggerContextMenu(e){var t,i;(i=(t=this.gridContext)==null?void 0:t.onContextMenu)==null||i.call(t,e,this.$props.dataItem,this.$props.field)}},render(){var l,d;const e=this.$props;let t=null;const i=this.getKeyboardNavigationAttributes(e.id);let r={};if(e.rowType==="groupFooter")r={class:e.className,tabindex:i.tabIndex,"data-keyboardnavlevel":i[o.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":i[o.KEYBOARD_NAV_DATA_ID]},t=n.createVNode("td",n.mergeProps(r,{onClick:this.triggerClick,onKeydown:this.triggerKeydown,onContextmenu:this.triggerContextMenu}),null);else if(e.rowType!=="groupHeader"){const c=(d=(l=e.unstyled)==null?void 0:l.uGrid)!=null?d:a.uGrid,u=a.classNames(c.td({selected:e.isSelected,highlighted:e.isHighlighted,sorted:e.isSorted,alt:e.isAlt}),e.className);r={style:this.$attrs.style,colspan:e.colSpan,class:u,role:"gridcell","aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[o.TABLE_COL_INDEX_ATTRIBUTE]:e.columnIndex,tabindex:i.tabIndex,"data-keyboardnavlevel":i[o.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":i[o.KEYBOARD_NAV_DATA_ID]},t=n.createVNode("td",n.mergeProps(r,{onClick:this.triggerClick,onKeydown:this.triggerKeydown,onContextmenu:this.triggerContextMenu}),[n.createVNode(m.GridPinDropdownButton,{dataItem:e.dataItem},null)])}const g=s(e);return a.getTemplate.call(this,{h:n.h,template:g,defaultRendering:t,additionalProps:{...e,tdProps:r},additionalListeners:{click:this.triggerClick,keydown:this.triggerKeydown,contextmenu:this.triggerContextMenu}})}});exports.GridPinCell=p;exports.getCustomCell=s;

package/cells/pincell/GridPinCell.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as b, createVNode as i, h as C, inject as d } from "vue";
-import { KEYBOARD_NAV_DATA_ID as s, KEYBOARD_NAV_DATA_LEVEL as u, TABLE_COL_INDEX_ATTRIBUTE as N } from "@progress/kendo-vue-data-tools";
-import { noop as a, uGrid as x, classNames as y, getTemplate as A } from "@progress/kendo-vue-common";
-import { GridPinDropdownButton as S } from "./GridPinDropdownButton.mjs";
-const f = (e) => {
-  var n, t;
-  return (t = (n = e.cells) == null ? void 0 : n.pin) == null ? void 0 : t[e.rowType || "data"];
-}, B = /* @__PURE__ */ b({
+import { defineComponent as h, createVNode as r, mergeProps as l, h as C, inject as d } from "vue";
+import { KEYBOARD_NAV_DATA_ID as s, KEYBOARD_NAV_DATA_LEVEL as g, TABLE_COL_INDEX_ATTRIBUTE as b } from "@progress/kendo-vue-data-tools";
+import { noop as c, uGrid as y, classNames as x, getTemplate as N } from "@progress/kendo-vue-common";
+import { GridPinDropdownButton as f } from "./GridPinDropdownButton.mjs";
+const I = (e) => {
+  var t, i;
+  return (i = (t = e.cells) == null ? void 0 : t.pin) == null ? void 0 : i[e.rowType || "data"];
+}, v = /* @__PURE__ */ h({
   name: "GridPinCell",
   inheritAttrs: !1,
   props: {
@@ -41,71 +41,96 @@ const f = (e) => {
   },
   inject: {
     getKeyboardNavigationAttributes: {
-      default: a
-    },
-    triggerCellContextMenu: {
-      default: a
+      default: c
     }
   },
   setup() {
-    const e = d("getKeyboardNavigationAttributes", a), n = d("triggerCellContextMenu", a);
+    const e = d("getKeyboardNavigationAttributes", c), t = d("gridContext", null);
     return {
       getKeyboardNavigationAttributes: e,
-      triggerCellContextMenu: n
+      gridContext: t
     };
   },
+  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
+      });
+    },
+    triggerContextMenu(e) {
+      var t, i;
+      (i = (t = this.gridContext) == null ? void 0 : t.onContextMenu) == null || i.call(t, e, this.$props.dataItem, this.$props.field);
+    }
+  },
   render() {
-    var l, o;
+    var o, a;
     const e = this.$props;
-    let n = null;
-    const t = this.getKeyboardNavigationAttributes(e.id);
-    let r = {};
+    let t = null;
+    const i = this.getKeyboardNavigationAttributes(e.id);
+    let n = {};
     if (e.rowType === "groupFooter")
-      r = {
+      n = {
         class: e.className,
-        tabindex: t.tabIndex,
-        "data-keyboardnavlevel": t[u],
-        "data-keyboardnavid": t[s]
-      }, n = i("td", r, null);
+        tabindex: i.tabIndex,
+        "data-keyboardnavlevel": i[g],
+        "data-keyboardnavid": i[s]
+      }, t = r("td", l(n, {
+        onClick: this.triggerClick,
+        onKeydown: this.triggerKeydown,
+        onContextmenu: this.triggerContextMenu
+      }), null);
     else if (e.rowType !== "groupHeader") {
-      const c = (o = (l = e.unstyled) == null ? void 0 : l.uGrid) != null ? o : x, m = y(c.td({
+      const u = (a = (o = e.unstyled) == null ? void 0 : o.uGrid) != null ? a : y, p = x(u.td({
         selected: e.isSelected,
         highlighted: e.isHighlighted,
         sorted: e.isSorted,
         alt: e.isAlt
       }), e.className);
-      r = {
+      n = {
         style: this.$attrs.style,
         colspan: e.colSpan,
-        class: m,
+        class: p,
         role: "gridcell",
         "aria-colindex": e.ariaColumnIndex,
         "aria-selected": e.isSelected,
-        [N]: e.columnIndex,
-        tabindex: t.tabIndex,
-        "data-keyboardnavlevel": t[u],
-        "data-keyboardnavid": t[s],
-        onContextmenu: (p) => {
-          this.triggerCellContextMenu(p, e.dataItem, e.field);
-        }
-      }, n = i("td", r, [i(S, {
+        [b]: e.columnIndex,
+        tabindex: i.tabIndex,
+        "data-keyboardnavlevel": i[g],
+        "data-keyboardnavid": i[s]
+      }, t = r("td", l(n, {
+        onClick: this.triggerClick,
+        onKeydown: this.triggerKeydown,
+        onContextmenu: this.triggerContextMenu
+      }), [r(f, {
         dataItem: e.dataItem
       }, null)]);
     }
-    const g = f(e);
-    return A.call(this, {
+    const m = I(e);
+    return N.call(this, {
       h: C,
-      template: g,
-      defaultRendering: n,
+      template: m,
+      defaultRendering: t,
       additionalProps: {
         ...e,
-        tdProps: r
+        tdProps: n
       },
-      additionalListeners: {}
+      additionalListeners: {
+        click: this.triggerClick,
+        keydown: this.triggerKeydown,
+        contextmenu: this.triggerContextMenu
+      }
     });
   }
 });
 export {
-  B as GridPinCell,
-  f as getCustomCell
+  v as GridPinCell,
+  I as getCustomCell
 };

package/cells/pincell/GridPinDropdownButton.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 o=require("vue"),g=require("@progress/kendo-vue-common"),w=require("@progress/kendo-vue-popup"),u=require("@progress/kendo-svg-icons"),t=require("../../messages/main.js"),B=require("@progress/kendo-vue-layout"),V=o.defineComponent({name:"GridPinDropdownButton",props:{dataItem:Object},inject:{kendoLocalizationService:{default:null},kendo:{default:null}},setup(l){const e=o.inject("kendoLocalizationService",{}),s=o.inject("kendo",{}),i=o.ref(!1),T="#",P=g.guid(),a=o.computed(()=>s!=null&&s.getRowPinPosition?s.getRowPinPosition(l.dataItem):"none"),p=o.computed(()=>a.value!=="none"),c=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridPinToTop,t.messages[t.gridPinToTop]))||t.messages[t.gridPinToTop]}),f=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridPinToBottom,t.messages[t.gridPinToBottom]))||t.messages[t.gridPinToBottom]}),r=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridUnpin,t.messages[t.gridUnpin]))||t.messages[t.gridUnpin]}),I=o.computed(()=>{const n=[];return p.value&&n.push({text:r.value,svgIcon:u.unpinOutlineIcon,data:{action:"unpin"}}),a.value!=="top"&&n.push({text:c.value,svgIcon:u.pinOutlineTopIcon,data:{action:"pinTop"}}),a.value!=="bottom"&&n.push({text:f.value,svgIcon:u.pinOutlineBottomIcon,data:{action:"pinBottom"}}),n});return{anchor:P,showPopup:i,hrefValue:T,isPinned:p,pinToTopText:c,unpinText:r,menuItems:I,handleToggle:n=>{n.preventDefault(),i.value=!i.value},handleClose:n=>{n.isAnchorClicked||(i.value=!1)},handleMenuSelect:n=>{var d,h,m;const v=(h=(d=n.item)==null?void 0:d.data)==null?void 0:h.action;(m=s==null?void 0:s.onRowPin)==null||m.call(s,v,l.dataItem),i.value=!1}}},render(){return[o.createVNode("a",{class:"k-pin-cell",ref:this.anchor,href:this.hrefValue,tabindex:-1,onClick:this.handleToggle,"aria-label":this.isPinned?this.unpinText:this.pinToTopText},[o.createVNode(g.Icon,{name:this.isPinned?"unpin":"pin",icon:this.isPinned?u.unpinOutlineIcon:u.pinOutlineIcon},null)]),o.createVNode(w.Popup,{anchor:this.anchor,show:this.showPopup,anchorAlign:{vertical:"bottom",horizontal:"right"},popupClass:"k-menu-popup",onMousedownoutside:this.handleClose},{default:()=>[o.createVNode(B.Menu,{vertical:!0,items:this.menuItems,onSelect:this.handleMenuSelect},null)]})]}});exports.GridPinDropdownButton=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),m=require("@progress/kendo-vue-common"),w=require("@progress/kendo-vue-popup"),u=require("@progress/kendo-svg-icons"),t=require("../../messages/main.js"),B=require("@progress/kendo-vue-layout"),V=o.defineComponent({name:"GridPinDropdownButton",props:{dataItem:Object},inject:{kendoLocalizationService:{default:null},gridContext:{default:null}},setup(l){const e=o.inject("kendoLocalizationService",{}),s=o.inject("gridContext",{}),i=o.ref(!1),T="#",P=m.guid(),a=o.computed(()=>s!=null&&s.getRowPinPosition?s.getRowPinPosition(l.dataItem):"none"),p=o.computed(()=>a.value!=="none"),r=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridPinToTop,t.messages[t.gridPinToTop]))||t.messages[t.gridPinToTop]}),f=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridPinToBottom,t.messages[t.gridPinToBottom]))||t.messages[t.gridPinToBottom]}),c=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridUnpin,t.messages[t.gridUnpin]))||t.messages[t.gridUnpin]}),I=o.computed(()=>{const n=[];return p.value&&n.push({text:c.value,svgIcon:u.unpinOutlineIcon,data:{action:"unpin"}}),a.value!=="top"&&n.push({text:r.value,svgIcon:u.pinOutlineTopIcon,data:{action:"pinTop"}}),a.value!=="bottom"&&n.push({text:f.value,svgIcon:u.pinOutlineBottomIcon,data:{action:"pinBottom"}}),n});return{anchor:P,showPopup:i,hrefValue:T,isPinned:p,pinToTopText:r,unpinText:c,menuItems:I,handleToggle:n=>{n.preventDefault(),i.value=!i.value},handleClose:n=>{n.isAnchorClicked||(i.value=!1)},handleMenuSelect:n=>{var d,h,g;const v=(h=(d=n.item)==null?void 0:d.data)==null?void 0:h.action;(g=s==null?void 0:s.onRowPin)==null||g.call(s,v,l.dataItem),i.value=!1}}},render(){return[o.createVNode("a",{class:"k-pin-cell",ref:this.anchor,href:this.hrefValue,tabindex:-1,onClick:this.handleToggle,"aria-label":this.isPinned?this.unpinText:this.pinToTopText},[o.createVNode(m.Icon,{name:this.isPinned?"unpin":"pin",icon:this.isPinned?u.unpinOutlineIcon:u.pinOutlineIcon},null)]),o.createVNode(w.Popup,{anchor:this.anchor,show:this.showPopup,anchorAlign:{vertical:"bottom",horizontal:"right"},popupClass:"k-menu-popup",onMousedownoutside:this.handleClose},{default:()=>[o.createVNode(B.Menu,{vertical:!0,items:this.menuItems,onSelect:this.handleMenuSelect},null)]})]}});exports.GridPinDropdownButton=V;

package/cells/pincell/GridPinDropdownButton.mjs

@@ -6,10 +6,10 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as M, createVNode as u, inject as P, ref as O, computed as e } from "vue";
-import { Icon as j, guid as D } from "@progress/kendo-vue-common";
-import { Popup as R } from "@progress/kendo-vue-popup";
-import { unpinOutlineIcon as I, pinOutlineIcon as V, pinOutlineTopIcon as A, pinOutlineBottomIcon as C } from "@progress/kendo-svg-icons";
-import { messages as s, gridPinToTop as l, gridPinToBottom as p, gridUnpin as h } from "../../messages/main.mjs";
+import { Icon as C, guid as j } from "@progress/kendo-vue-common";
+import { Popup as D } from "@progress/kendo-vue-popup";
+import { unpinOutlineIcon as I, pinOutlineIcon as R, pinOutlineTopIcon as V, pinOutlineBottomIcon as A } from "@progress/kendo-svg-icons";
+import { messages as i, gridPinToTop as l, gridPinToBottom as p, gridUnpin as r } from "../../messages/main.mjs";
 import { Menu as G } from "@progress/kendo-vue-layout";
 const Q = /* @__PURE__ */ M({
   name: "GridPinDropdownButton",
@@ -20,21 +20,21 @@ const Q = /* @__PURE__ */ M({
     kendoLocalizationService: {
       default: null
     },
-    kendo: {
+    gridContext: {
       default: null
     }
   },
-  setup(r) {
-    const t = P("kendoLocalizationService", {}), o = P("kendo", {}), i = O(!1), w = "#", v = D(), a = e(() => o != null && o.getRowPinPosition ? o.getRowPinPosition(r.dataItem) : "none"), c = e(() => a.value !== "none"), m = e(() => {
+  setup(h) {
+    const t = P("kendoLocalizationService", {}), o = P("gridContext", {}), s = O(!1), w = "#", v = j(), a = e(() => o != null && o.getRowPinPosition ? o.getRowPinPosition(h.dataItem) : "none"), c = e(() => a.value !== "none"), m = e(() => {
       var n;
-      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, l, s[l])) || s[l];
-    }), B = e(() => {
+      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, l, i[l])) || i[l];
+    }), x = e(() => {
       var n;
-      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, p, s[p])) || s[p];
+      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, p, i[p])) || i[p];
     }), d = e(() => {
       var n;
-      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, h, s[h])) || s[h];
-    }), b = e(() => {
+      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, r, i[r])) || i[r];
+    }), B = e(() => {
       const n = [];
       return c.value && n.push({
         text: d.value,
@@ -44,13 +44,13 @@ const Q = /* @__PURE__ */ M({
         }
       }), a.value !== "top" && n.push({
         text: m.value,
-        svgIcon: A,
+        svgIcon: V,
         data: {
           action: "pinTop"
         }
       }), a.value !== "bottom" && n.push({
-        text: B.value,
-        svgIcon: C,
+        text: x.value,
+        svgIcon: A,
         data: {
           action: "pinBottom"
         }
@@ -58,22 +58,22 @@ const Q = /* @__PURE__ */ M({
     });
     return {
       anchor: v,
-      showPopup: i,
+      showPopup: s,
       hrefValue: w,
       isPinned: c,
       pinToTopText: m,
       unpinText: d,
-      menuItems: b,
+      menuItems: B,
       handleToggle: (n) => {
-        n.preventDefault(), i.value = !i.value;
+        n.preventDefault(), s.value = !s.value;
       },
       handleClose: (n) => {
-        n.isAnchorClicked || (i.value = !1);
+        n.isAnchorClicked || (s.value = !1);
       },
       handleMenuSelect: (n) => {
-        var f, g, T;
-        const x = (g = (f = n.item) == null ? void 0 : f.data) == null ? void 0 : g.action;
-        (T = o == null ? void 0 : o.onRowPin) == null || T.call(o, x, r.dataItem), i.value = !1;
+        var g, f, T;
+        const b = (f = (g = n.item) == null ? void 0 : g.data) == null ? void 0 : f.action;
+        (T = o == null ? void 0 : o.onRowPin) == null || T.call(o, b, h.dataItem), s.value = !1;
       }
     };
   },
@@ -85,10 +85,10 @@ const Q = /* @__PURE__ */ M({
       tabindex: -1,
       onClick: this.handleToggle,
       "aria-label": this.isPinned ? this.unpinText : this.pinToTopText
-    }, [u(j, {
+    }, [u(C, {
       name: this.isPinned ? "unpin" : "pin",
-      icon: this.isPinned ? I : V
-    }, null)]), u(R, {
+      icon: this.isPinned ? I : R
+    }, null)]), u(D, {
       anchor: this.anchor,
       show: this.showPopup,
       anchorAlign: {

package/common.d.ts

@@ -33,6 +33,7 @@ declare const gridProps: {
         default: () => any;
     };
     cells: PropType<import('.').GridCellsSettings>;
+    contextMenu: PropType<boolean | import('.').GridContextMenuOptions | ((options: import('.').GridCellBaseOptions) => boolean | import('.').GridContextMenuOptions)>;
     rows: PropType<import('./interfaces/GridRowsSettings').GridRowsSettings>;
     defaultColumnsState: {
         type: PropType<import('.').GridColumnState[]>;
@@ -191,5 +192,7 @@ declare const gridProps: {
     onSearchchange: PropType<(event: import('.').GridSearchChangeEvent) => void>;
     onGroupexpandchange: PropType<(event: import('.').GridGroupExpandChangeEvent) => void>;
     onDetailexpandchange: PropType<(event: import('.').GridDetailExpandChangeEvent) => void>;
+    onContextmenu: PropType<(event: import('.').GridContextMenuEvent) => void>;
+    onContextmenuitemclick: PropType<(event: import('.').GridContextMenuItemClickEvent) => void>;
 };
 export { gridProps };

package/common.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"});require("vue");const t=require("@progress/kendo-vue-common"),n={id:String,autoProcessData:[Boolean,Object],topCacheCount:{type:Number,default:0},collapsedGroups:{type:Array,default:function(){return[]}},uniqueField:String,totalGroupedHeight:Number,allGroupedItems:Object,alternatePerGroup:Boolean,columns:Array,columnsState:{type:Array,default:function(){}},cells:Object,rows:Object,defaultColumnsState:{type:Array,default:function(){}},columnVirtualization:Boolean,dataItems:[Array,Object],sortable:[Boolean,Object],defaultSort:Array,sort:Array,filterable:Boolean,filterOperators:Object,filterCellRender:[String,Function,Object],headerCellRender:[String,Function,Object],showLoader:{type:Boolean,default:void 0},loader:[String,Function,Object],lockGroups:Boolean,pinnable:Boolean,defaultPinnedTopRows:Array,defaultPinnedBottomRows:Array,pinnedTopRows:Array,pinnedBottomRows:Array,defaultFilter:Object,filter:Object,defaultSearch:Object,search:Object,searchFields:Array,highlight:Object,pageable:[Boolean,Object],pageSize:Number,total:Number,fixedScroll:Boolean,skip:Number,defaultSkip:Number,take:Number,defaultTake:Number,expandField:String,expandColumn:Object,selectedField:String,cellRender:[String,Function,Object],rowRender:[String,Function,Object],rowSpannable:[Boolean,Object],resizable:Boolean,reorderable:Boolean,group:Array,defaultGroup:Array,groupable:[Boolean,Object],groupExpand:Array,defaultGroupExpand:Array,detailExpand:Object,defaultDetailExpand:Object,editField:String,rowClass:Function,select:Object,defaultSelect:Object,selectable:[Boolean,Object],scrollable:{type:String,default:"scrollable"},size:{type:String,default:"medium",validator:function(e){return["small","medium"].includes(e)}},pager:[String,Function,Object],rowHeight:Number,detailRowHeight:Number,detail:[String,Function,Object],columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:t.SvgIcon,dataItemKey:String,navigatable:{type:Boolean,default:!1},onItemchange:Function,onExpandchange:Function,onDatastatechange:Function,onPagechange:Function,onSortchange:Function,onFilterchange:Function,onGroupchange:Function,onSearchchange:Function,onGroupexpandchange:Function,onDetailexpandchange:Function};exports.gridProps=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("vue");const t=require("@progress/kendo-vue-common"),n={id:String,autoProcessData:[Boolean,Object],topCacheCount:{type:Number,default:0},collapsedGroups:{type:Array,default:function(){return[]}},uniqueField:String,totalGroupedHeight:Number,allGroupedItems:Object,alternatePerGroup:Boolean,columns:Array,columnsState:{type:Array,default:function(){}},cells:Object,contextMenu:[Boolean,Object,Function],rows:Object,defaultColumnsState:{type:Array,default:function(){}},columnVirtualization:Boolean,dataItems:[Array,Object],sortable:[Boolean,Object],defaultSort:Array,sort:Array,filterable:Boolean,filterOperators:Object,filterCellRender:[String,Function,Object],headerCellRender:[String,Function,Object],showLoader:{type:Boolean,default:void 0},loader:[String,Function,Object],lockGroups:Boolean,pinnable:Boolean,defaultPinnedTopRows:Array,defaultPinnedBottomRows:Array,pinnedTopRows:Array,pinnedBottomRows:Array,defaultFilter:Object,filter:Object,defaultSearch:Object,search:Object,searchFields:Array,highlight:Object,pageable:[Boolean,Object],pageSize:Number,total:Number,fixedScroll:Boolean,skip:Number,defaultSkip:Number,take:Number,defaultTake:Number,expandField:String,expandColumn:Object,selectedField:String,cellRender:[String,Function,Object],rowRender:[String,Function,Object],rowSpannable:[Boolean,Object],resizable:Boolean,reorderable:Boolean,group:Array,defaultGroup:Array,groupable:[Boolean,Object],groupExpand:Array,defaultGroupExpand:Array,detailExpand:Object,defaultDetailExpand:Object,editField:String,rowClass:Function,select:Object,defaultSelect:Object,selectable:[Boolean,Object],scrollable:{type:String,default:"scrollable"},size:{type:String,default:"medium",validator:function(e){return["small","medium"].includes(e)}},pager:[String,Function,Object],rowHeight:Number,detailRowHeight:Number,detail:[String,Function,Object],columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:t.SvgIcon,dataItemKey:String,navigatable:{type:Boolean,default:!1},onItemchange:Function,onExpandchange:Function,onDatastatechange:Function,onPagechange:Function,onSortchange:Function,onFilterchange:Function,onGroupchange:Function,onSearchchange:Function,onGroupexpandchange:Function,onDetailexpandchange:Function,onContextmenu:Function,onContextmenuitemclick:Function};exports.gridProps=n;

package/common.mjs

@@ -31,6 +31,7 @@ const a = {
     }
   },
   cells: Object,
+  contextMenu: [Boolean, Object, Function],
   rows: Object,
   defaultColumnsState: {
     type: Array,
@@ -128,7 +129,9 @@ const a = {
   onGroupchange: Function,
   onSearchchange: Function,
   onGroupexpandchange: Function,
-  onDetailexpandchange: Function
+  onDetailexpandchange: Function,
+  onContextmenu: Function,
+  onContextmenuitemclick: Function
 };
 export {
   a as gridProps

package/components/PinnedRowsTable.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 t=require("vue"),n=require("@progress/kendo-vue-common"),c=require("@progress/kendo-vue-data-tools"),R=require("@progress/kendo-vue-intl"),L=require("../rows/GridRow.js"),I=require("../getRowContents.js"),l=require("../messages/main.js"),C=t.defineComponent({name:"PinnedRowsTable",props:{size:String,cols:Array,dataRowContext:Object,position:String,pinnedItems:Array,rowHeight:Number,rows:Object,selectable:Object},inject:{gridContext:{default:()=>({})},kendoLocalizationService:{default:null}},mounted(){this.tableRef=n.getRef(this,"table"),this.colGroupRefEl=n.getRef(this,"colGroup")},updated(){this.tableRef=n.getRef(this,"table"),this.colGroupRefEl=n.getRef(this,"colGroup")},methods:{setWidth(e){const a=n.getRef(this,"table");a&&(a.style.width=e?e+"px":"")},setScrollLeft(e){const a=n.getRef(this,"pinnedRef");a&&a.scrollLeft!==e&&(a.scrollLeft=e)}},setup(e){const a=t.inject("kendo",{}),d=t.computed(()=>e.position==="top"),m=t.computed(()=>d.value?a.pinnedTopRef:a.pinnedBottomRef),p=t.ref(!1),w=s=>{const o=a.containerElementRef;if(!o||p.value)return;const i=s.currentTarget.scrollLeft;o.scrollLeft!==i&&(o.scrollLeft=i)},g=t.computed(()=>!e.pinnedItems||!e.dataRowContext?[]:e.pinnedItems.map((s,o)=>{var b;const i={dataItem:s,rowType:"data",level:0,expanded:!1,dataIndex:o},r=e.dataRowContext.dataItemKey,u="pinned_"+((r?n.getter(r)(s):void 0)||"ai"+o),f=I.getRowContents(e.dataRowContext,i,u,o),v=(b=e.rows)!=null&&b.pinnedData?{...e.rows,data:e.rows.pinnedData}:e.rows;return t.createVNode(L.GridRow,{key:u,rowType:"data",item:i,dataIndex:o,ariaRowIndex:o+1,absoluteRowIndex:o,isAltRow:o%2!==0,isHidden:!1,rowHeight:e.rowHeight,isSelected:f.isSelected,rows:v},{default:()=>[f.row]})})),h=t.computed(()=>n.classNames("k-grid-pinned-container",{"k-pos-bottom":!d.value})),S=t.computed(()=>n.classNames(n.uGrid.table({size:e.size}))),y=s=>{var i,r;const o=(i=e.pinnedItems)==null?void 0:i[s.startRowIndex];o&&((r=a.pinnedSelectionRelease)==null||r.call(a,s,o))},N=t.computed(()=>e.selectable?{...typeof e.selectable=="object"?e.selectable:{},enabled:!0,drag:!1}:e.selectable),T=t.computed(()=>d.value?c.tableKeyboardNavigationTopPinnedAttributes:c.tableKeyboardNavigationBottomPinnedAttributes);return{isTop:d,pinnedRef:m,handlePinnedScroll:w,pinnedRows:g,containerClassName:h,tableClassName:S,handleSelectionRelease:y,pinnedSelectable:N,pinnedBodyAttributes:T}},render(){return t.createVNode("div",{class:this.containerClassName,role:"presentation",style:{display:this.pinnedRows.length?"":"none"}},[t.createVNode("div",{class:"k-grid-pinned-wrap",ref:n.setRef(this,"pinnedRef"),onScroll:this.handlePinnedScroll},[t.createVNode(c.TableSelection,{selectable:this.pinnedSelectable,onRelease:this.handleSelectionRelease},{default:()=>[t.createVNode("table",{ref:n.setRef(this,"table"),class:this.tableClassName,"aria-label":this.isTop?R.provideLocalizationService(this).toLanguageString(l.pinnedTopRowsAriaLabel,l.messages[l.pinnedTopRowsAriaLabel]):R.provideLocalizationService(this).toLanguageString(l.pinnedBottomRowsAriaLabel,l.messages[l.pinnedBottomRowsAriaLabel])},[t.createVNode("colgroup",{ref:n.setRef(this,"colGroup")},[this.$props.cols]),t.createVNode("tbody",t.mergeProps({class:n.classNames(n.uGrid.tbody({}))},this.pinnedBodyAttributes),[this.pinnedRows])])]})])])}});exports.PinnedRowsTable=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),o=require("@progress/kendo-vue-common"),c=require("@progress/kendo-vue-data-tools"),b=require("@progress/kendo-vue-intl"),T=require("../rows/GridRow.js"),I=require("../getRowContents.js"),l=require("../messages/main.js"),C=t.defineComponent({name:"PinnedRowsTable",props:{size:String,cols:Array,dataRowContext:Object,position:String,pinnedItems:Array,rowHeight:Number,rows:Object,selectable:Object},inject:{gridContext:{default:()=>({})},kendoLocalizationService:{default:null}},mounted(){this.tableRef=o.getRef(this,"table"),this.colGroupRefEl=o.getRef(this,"colGroup")},updated(){this.tableRef=o.getRef(this,"table"),this.colGroupRefEl=o.getRef(this,"colGroup")},methods:{setWidth(e){const a=o.getRef(this,"table");a&&(a.style.width=e?e+"px":"")},setScrollLeft(e){const a=o.getRef(this,"pinnedRef");a&&a.scrollLeft!==e&&(a.scrollLeft=e)}},setup(e){const a=t.inject("gridContext",{}),d=t.computed(()=>e.position==="top"),m=t.computed(()=>d.value?a.pinnedTopRef:a.pinnedBottomRef),w=t.ref(!1),g=i=>{const n=a.containerElementRef;if(!n||w.value)return;const s=i.currentTarget.scrollLeft;n.scrollLeft!==s&&(n.scrollLeft=s)},h=t.computed(()=>{if(!e.rows)return;const{pinnedData:i,...n}=e.rows;return i?{...n,data:i}:e.rows}),p=t.computed(()=>!e.pinnedItems||!e.dataRowContext?[]:e.pinnedItems.map((i,n)=>{var R;const s={dataItem:i,rowType:"data",level:0,expanded:!1,dataIndex:n},r=e.dataRowContext.dataItemKey,u="pinned_"+((r?o.getter(r)(i):void 0)||"ai"+n),f=I.getRowContents(e.dataRowContext,s,u,n);return(R=e.rows)!=null&&R.pinnedData?{...e.rows,data:e.rows.pinnedData}:e.rows,t.createVNode(T.GridRow,{key:u,rowType:"data",isPinned:!0,item:s,dataIndex:n,ariaRowIndex:n+1,absoluteRowIndex:n,isAltRow:n%2!==0,isHidden:!1,rowHeight:e.rowHeight,isSelected:f.isSelected,rows:h.value},{default:()=>[f.row]})})),S=t.computed(()=>o.classNames("k-grid-pinned-container",{"k-pos-bottom":!d.value})),y=t.computed(()=>o.classNames(o.uGrid.table({size:e.size}))),N=i=>{var s,r;const n=(s=e.pinnedItems)==null?void 0:s[i.startRowIndex];n&&((r=a.pinnedSelectionRelease)==null||r.call(a,i,n))},v=t.computed(()=>e.selectable?{...typeof e.selectable=="object"?e.selectable:{},enabled:!0,drag:!1}:e.selectable),L=t.computed(()=>d.value?c.tableKeyboardNavigationTopPinnedAttributes:c.tableKeyboardNavigationBottomPinnedAttributes);return{isTop:d,pinnedRef:m,handlePinnedScroll:g,pinnedRows:p,containerClassName:S,tableClassName:y,handleSelectionRelease:N,pinnedSelectable:v,pinnedBodyAttributes:L}},render(){return t.createVNode("div",{class:this.containerClassName,role:"presentation",style:this.pinnedRows.length?void 0:{display:"none"}},[t.createVNode("div",{class:"k-grid-pinned-wrap",ref:o.setRef(this,"pinnedRef"),onScroll:this.handlePinnedScroll},[t.createVNode(c.TableSelection,{selectable:this.pinnedSelectable,onRelease:this.handleSelectionRelease},{default:()=>[t.createVNode("table",{ref:o.setRef(this,"table"),class:this.tableClassName,"aria-label":this.isTop?b.provideLocalizationService(this).toLanguageString(l.pinnedTopRowsAriaLabel,l.messages[l.pinnedTopRowsAriaLabel]):b.provideLocalizationService(this).toLanguageString(l.pinnedBottomRowsAriaLabel,l.messages[l.pinnedBottomRowsAriaLabel])},[t.createVNode("colgroup",{ref:o.setRef(this,"colGroup")},[this.$props.cols]),t.createVNode("tbody",t.mergeProps({class:o.classNames(o.uGrid.tbody({}))},this.pinnedBodyAttributes),[this.pinnedRows])])]})])])}});exports.PinnedRowsTable=C;