@progress/kendo-vue-grid 8.0.3-develop.4 → 8.1.0-develop.1

package/drag/ColumnDraggable.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("@progress/kendo-vue-common"),n=r.defineComponent({props:{onPressHandler:Function,onDragHandler:Function,onReleaseHandler:Function},mounted(){this.$el&&(this.draggable=this.$refs.draggable)},methods:{onPress(t){const e=this.draggable&&this.draggable.element;e&&this.$emit("pressHandler",t,e)},onDrag(t){const e=this.draggable&&this.draggable.element;e&&this.$emit("dragHandler",t,e)},onRelease(t){const e=this.draggable&&this.draggable.element;e&&this.$emit("releaseHandler",t,e)}},render(){const t=a.getDefaultSlots(this);return r.createVNode(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,ref:"draggable"},{default:()=>[r.createVNode("tr",{class:"k-table-row",role:"row"},[t])]})}});exports.ColumnDraggable=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),a=require("@progress/kendo-vue-common"),n=r.defineComponent({props:{onPressHandler:Function,onDragHandler:Function,onReleaseHandler:Function},mounted(){this.$el&&(this.draggable=this.$refs.draggable)},methods:{onPress(t){const e=this.draggable&&this.draggable.element;e&&this.$emit("pressHandler",t,e)},onDrag(t){const e=this.draggable&&this.draggable.element;e&&this.$emit("dragHandler",t,e)},onRelease(t){const e=this.draggable&&this.draggable.element;e&&this.$emit("releaseHandler",t,e)}},render(){const t=a.getDefaultSlots(this);return r.createVNode(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,ref:"draggable"},{default:()=>[r.createVNode("tr",{class:"k-table-row",role:"row","aria-rowindex":this.$props.key},[t])]})}});exports.ColumnDraggable=n;

package/drag/ColumnDraggable.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as a, createVNode as r } from "vue";
-import { getDefaultSlots as n, Draggable as s } from "@progress/kendo-vue-common";
+import { getDefaultSlots as s, Draggable as n } from "@progress/kendo-vue-common";
 const i = /* @__PURE__ */ a({
   props: {
     onPressHandler: Function,
@@ -31,8 +31,8 @@ const i = /* @__PURE__ */ a({
     }
   },
   render() {
-    const t = n(this);
-    return r(s, {
+    const t = s(this);
+    return r(n, {
       onPress: this.onPress,
       onDrag: this.onDrag,
       onRelease: this.onRelease,
@@ -40,7 +40,8 @@ const i = /* @__PURE__ */ a({
     }, {
       default: () => [r("tr", {
         class: "k-table-row",
-        role: "row"
+        role: "row",
+        "aria-rowindex": this.$props.key
       }, [t])]
     });
   }

package/header/FilterRow.d.ts

@@ -25,6 +25,7 @@ export interface FilterRowProps {
     size?: null | 'small' | 'medium' | 'large';
     cellsToRender?: GridCellRenderModel[];
     columnVirtualization?: boolean;
+    columnsMap?: number[][];
     onFilterchange: (filters: CompositeFilterDescriptor) => void;
 }
 /**
@@ -42,6 +43,7 @@ declare const FilterRow: import('vue').DefineComponent<import('vue').ExtractProp
     size: PropType<"small" | "medium" | "large">;
     cellsToRender: PropType<GridCellRenderModel[]>;
     columnVirtualization: PropType<boolean>;
+    columnsMap: PropType<number[][]>;
     onFilterchange: PropType<(filters: CompositeFilterDescriptor) => void>;
 }>, {
     kendoLocalizationService: {};
@@ -60,6 +62,7 @@ declare const FilterRow: import('vue').DefineComponent<import('vue').ExtractProp
     size: PropType<"small" | "medium" | "large">;
     cellsToRender: PropType<GridCellRenderModel[]>;
     columnVirtualization: PropType<boolean>;
+    columnsMap: PropType<number[][]>;
     onFilterchange: PropType<(filters: CompositeFilterDescriptor) => void>;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { FilterRow };

package/header/FilterRow.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"),p=require("../filterCommon.js"),m=require("../cells/GridFilterCell.js"),V=require("@progress/kendo-vue-intl"),v=require("../messages/main.js"),h=require("@progress/kendo-vue-data-tools"),L=require("../utils/virtualColumns.js");function z(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!o.isVNode(t)}const j=o.defineComponent({name:"kendoFilterRow",props:{grid:Object,columns:Array,filter:Object,filterOperators:Object,sort:[Object,Array],cellRender:[String,Function,Object],isRtl:Boolean,ariaRowIndex:Number,size:String,cellsToRender:Array,columnVirtualization:Boolean,onFilterchange:Function},inject:{kendoLocalizationService:{default:null}},methods:{headerCellClassName(t,r){let l=r?" k-grid-header-sticky":"";return this.$props.sort&&this.$props.sort.filter(d=>d.field===t).length>0&&(l+=" k-sorted"),l},setFilter(t,r,l,d){const n=[];(t!==""&&t!==null||r!=="")&&n.push({field:l,operator:r,value:t}),this.$props.filter&&this.$props.filter.filters&&(this.$props.filter.filters||[]).forEach(c=>{const f=c;f&&f.field!==l&&n.push(f)});const g=n.length>0?{logic:"and",filters:n}:null;this.$emit("filterchange",g,d)}},setup(){return{kendoLocalizationService:o.inject("kendoLocalizationService",{})}},render(){const t=V.provideLocalizationService(this),r=this.$props.filter&&this.$props.filter.filters||[],l=(e,i=null)=>{const a=r.filter(s=>s.field===e)[0];return a?a.value:i},d=e=>{const i=r.filter(a=>a.field===e)[0];return i?i.operator:null};let n=0,g=-1;const u=L.getVirtualHeaderCellsToRender({cellsToRender:this.$props.cellsToRender||[],columns:this.$props.columns,rowIndex:0,enableVirtualization:this.$props.columnVirtualization}),c=u.columnsToRender.length>0,f=this.$props.columns.filter(e=>e.children.length===0),S=c?u.columnsToRender.map(e=>this.$props.columns[e]).filter(e=>e.children.length===0):f,y=c?u.colSpans:[],T=S.map(function(e,i){const a=F=>{this.setFilter(F.value,F.operator,e.field,F)},s=p.getFilterType(e.filter),b=(e.title||e.field)+" "+p.getAriaLabel(s,t),C=o.createVNode(m.GridFilterCell,{grid:this.$props.grid,field:e.field,title:e.filterTitle,value:l(e.field,s==="text"?"":null),operator:d(e.field),operators:p.operatorMap(this.$props.filterOperators[s]||[],t),booleanValues:p.operatorMap(p.booleanFilterValues,t),filterType:s,onChange:a,render:e.filterCell||this.$props.cellRender,"aria-label":b,size:this.$props.size},null),R=e.declarationIndex>=0?++g:--n,k={ariaLabel:e.filterable?t.toLanguageString(v.filterAriaLabel,v.messages[v.filterAriaLabel]):void 0,ariaColumnIndex:e.ariaColumnIndex},$=e.locked&&e.left!==void 0?this.$props.isRtl?{left:e.right+"px",right:e.left+"px"}:{left:e.left+"px",right:e.right+"px"}:void 0,x=c&&y[i]!==void 0?y[i]:void 0,I=o.createVNode(h.HeaderTdElement,{key:R,role:"gridcell",columnId:h.tableKeyboardNavigationTools.getFilterColumnId(e.id),navigatable:e.navigatable,style:$,class:this.headerCellClassName(e.field,e.locked)||void 0,ariaColumnIndex:k.ariaColumnIndex,"aria-label":b,colSpan:x},z(C)?C:{default:()=>[C]});return e.filterable&&I||o.createVNode(h.HeaderTdElement,{key:R,role:"gridcell",columnId:h.tableKeyboardNavigationTools.getFilterColumnId(e.id),navigatable:e.navigatable,style:$,class:this.headerCellClassName(e.field,e.locked)||void 0,ariaColumnIndex:k.ariaColumnIndex,"aria-label":b,colSpan:x},null)},this);return o.createVNode("tr",{class:"k-table-row k-filter-row","aria-rowindex":this.ariaRowIndex,role:"row"},[T])}});exports.FilterRow=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),f=require("../filterCommon.js"),I=require("../cells/GridFilterCell.js"),V=require("@progress/kendo-vue-intl"),v=require("../messages/main.js"),h=require("@progress/kendo-vue-data-tools"),L=require("../utils/virtualColumns.js");function z(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!o.isVNode(t)}const j=o.defineComponent({name:"kendoFilterRow",props:{grid:Object,columns:Array,filter:Object,filterOperators:Object,sort:[Object,Array],cellRender:[String,Function,Object],isRtl:Boolean,ariaRowIndex:Number,size:String,cellsToRender:Array,columnVirtualization:Boolean,columnsMap:Array,onFilterchange:Function},inject:{kendoLocalizationService:{default:null}},methods:{headerCellClassName(t,r){let l=r?" k-grid-header-sticky":"";return this.$props.sort&&this.$props.sort.filter(d=>d.field===t).length>0&&(l+=" k-sorted"),l},setFilter(t,r,l,d){const a=[];(t!==""&&t!==null||r!=="")&&a.push({field:l,operator:r,value:t}),this.$props.filter&&this.$props.filter.filters&&(this.$props.filter.filters||[]).forEach(c=>{const p=c;p&&p.field!==l&&a.push(p)});const g=a.length>0?{logic:"and",filters:a}:null;this.$emit("filterchange",g,d)}},setup(){return{kendoLocalizationService:o.inject("kendoLocalizationService",{})}},render(){const t=V.provideLocalizationService(this),r=this.$props.filter&&this.$props.filter.filters||[],l=(e,i=null)=>{const n=r.filter(s=>s.field===e)[0];return n?n.value:i},d=e=>{const i=r.filter(n=>n.field===e)[0];return i?i.operator:null};let a=0,g=-1;const u=L.getVirtualHeaderCellsToRender({cellsToRender:this.$props.cellsToRender||[],columns:this.$props.columns,rowIndex:0,enableVirtualization:this.$props.columnVirtualization,columnsMap:this.$props.columnsMap}),c=u.columnsToRender.length>0,p=this.$props.columns.filter(e=>e.children.length===0),x=c?u.columnsToRender.map(e=>this.$props.columns[e]).filter(e=>e.children.length===0):p,y=c?u.colSpans:[],S=x.map(function(e,i){const n=F=>{this.setFilter(F.value,F.operator,e.field,F)},s=f.getFilterType(e.filter),b=(e.title||e.field)+" "+f.getAriaLabel(s,t),C=o.createVNode(I.GridFilterCell,{grid:this.$props.grid,field:e.field,title:e.filterTitle,value:l(e.field,s==="text"?"":null),operator:d(e.field),operators:f.operatorMap(this.$props.filterOperators[s]||[],t),booleanValues:f.operatorMap(f.booleanFilterValues,t),filterType:s,onChange:n,render:e.filterCell||this.$props.cellRender,"aria-label":b,size:this.$props.size},null),R=e.declarationIndex>=0?++g:--a,$={ariaLabel:e.filterable?t.toLanguageString(v.filterAriaLabel,v.messages[v.filterAriaLabel]):void 0,ariaColumnIndex:e.ariaColumnIndex},k=e.locked&&e.left!==void 0?this.$props.isRtl?{left:e.right+"px",right:e.left+"px"}:{left:e.left+"px",right:e.right+"px"}:void 0,m=c&&y[i]!==void 0?y[i]:void 0,T=o.createVNode(h.HeaderTdElement,{key:R,role:"gridcell",columnId:h.tableKeyboardNavigationTools.getFilterColumnId(e.id),navigatable:e.navigatable,style:k,class:this.headerCellClassName(e.field,e.locked)||void 0,ariaColumnIndex:$.ariaColumnIndex,"aria-label":b,colSpan:m},z(C)?C:{default:()=>[C]});return e.filterable&&T||o.createVNode(h.HeaderTdElement,{key:R,role:"gridcell",columnId:h.tableKeyboardNavigationTools.getFilterColumnId(e.id),navigatable:e.navigatable,style:k,class:this.headerCellClassName(e.field,e.locked)||void 0,ariaColumnIndex:$.ariaColumnIndex,"aria-label":b,colSpan:m},null)},this);return o.createVNode("tr",{class:"k-table-row k-filter-row","aria-rowindex":this.ariaRowIndex,role:"row"},[S])}});exports.FilterRow=j;

package/header/FilterRow.mjs

@@ -6,13 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as z, createVNode as c, inject as L, isVNode as j } from "vue";
-import { getFilterType as O, getAriaLabel as V, operatorMap as $, booleanFilterValues as w } from "../filterCommon.mjs";
-import { GridFilterCell as N } from "../cells/GridFilterCell.mjs";
-import { provideLocalizationService as A } from "@progress/kendo-vue-intl";
-import { filterAriaLabel as v, messages as B } from "../messages/main.mjs";
-import { HeaderTdElement as k, tableKeyboardNavigationTools as y } from "@progress/kendo-vue-data-tools";
-import { getVirtualHeaderCellsToRender as E } from "../utils/virtualColumns.mjs";
-function H(t) {
+import { getFilterType as O, getAriaLabel as V, operatorMap as R, booleanFilterValues as w } from "../filterCommon.mjs";
+import { GridFilterCell as A } from "../cells/GridFilterCell.mjs";
+import { provideLocalizationService as N } from "@progress/kendo-vue-intl";
+import { filterAriaLabel as v, messages as M } from "../messages/main.mjs";
+import { HeaderTdElement as y, tableKeyboardNavigationTools as k } from "@progress/kendo-vue-data-tools";
+import { getVirtualHeaderCellsToRender as B } from "../utils/virtualColumns.mjs";
+function E(t) {
   return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !j(t);
 }
 const Q = /* @__PURE__ */ z({
@@ -29,6 +29,7 @@ const Q = /* @__PURE__ */ z({
     size: String,
     cellsToRender: Array,
     columnVirtualization: Boolean,
+    columnsMap: Array,
     onFilterchange: Function
   },
   inject: {
@@ -38,24 +39,24 @@ const Q = /* @__PURE__ */ z({
   },
   methods: {
     headerCellClassName(t, r) {
-      let i = r ? " k-grid-header-sticky" : "";
-      return this.$props.sort && this.$props.sort.filter((s) => s.field === t).length > 0 && (i += " k-sorted"), i;
+      let l = r ? " k-grid-header-sticky" : "";
+      return this.$props.sort && this.$props.sort.filter((s) => s.field === t).length > 0 && (l += " k-sorted"), l;
     },
-    setFilter(t, r, i, s) {
+    setFilter(t, r, l, s) {
       const o = [];
       (t !== "" && t !== null || r !== "") && o.push({
-        field: i,
+        field: l,
         operator: r,
         value: t
       }), this.$props.filter && this.$props.filter.filters && (this.$props.filter.filters || []).forEach((d) => {
-        const f = d;
-        f && f.field !== i && o.push(f);
+        const p = d;
+        p && p.field !== l && o.push(p);
       });
-      const h = o.length > 0 ? {
+      const u = o.length > 0 ? {
         logic: "and",
         filters: o
       } : null;
-      this.$emit("filterchange", h, s);
+      this.$emit("filterchange", u, s);
     }
   },
   setup() {
@@ -64,68 +65,69 @@ const Q = /* @__PURE__ */ z({
     };
   },
   render() {
-    const t = A(this), r = this.$props.filter && this.$props.filter.filters || [], i = (e, l = null) => {
+    const t = N(this), r = this.$props.filter && this.$props.filter.filters || [], l = (e, i = null) => {
       const n = r.filter((a) => a.field === e)[0];
-      return n ? n.value : l;
+      return n ? n.value : i;
     }, s = (e) => {
-      const l = r.filter((n) => n.field === e)[0];
-      return l ? l.operator : null;
+      const i = r.filter((n) => n.field === e)[0];
+      return i ? i.operator : null;
     };
-    let o = 0, h = -1;
-    const p = E({
+    let o = 0, u = -1;
+    const f = B({
       cellsToRender: this.$props.cellsToRender || [],
       columns: this.$props.columns,
       rowIndex: 0,
       // FilterRow is always a single row
-      enableVirtualization: this.$props.columnVirtualization
-    }), d = p.columnsToRender.length > 0, f = this.$props.columns.filter((e) => e.children.length === 0), I = d ? p.columnsToRender.map((e) => this.$props.columns[e]).filter((e) => e.children.length === 0) : f, C = d ? p.colSpans : [], S = I.map(function(e, l) {
+      enableVirtualization: this.$props.columnVirtualization,
+      columnsMap: this.$props.columnsMap
+    }), d = f.columnsToRender.length > 0, p = this.$props.columns.filter((e) => e.children.length === 0), I = d ? f.columnsToRender.map((e) => this.$props.columns[e]).filter((e) => e.children.length === 0) : p, m = d ? f.colSpans : [], S = I.map(function(e, i) {
       const n = (b) => {
         this.setFilter(b.value, b.operator, e.field, b);
-      }, a = O(e.filter), u = (e.title || e.field) + " " + V(a, t), g = c(N, {
+      }, a = O(e.filter), h = (e.title || e.field) + " " + V(a, t), g = c(A, {
         grid: this.$props.grid,
         field: e.field,
         title: e.filterTitle,
-        value: i(e.field, a === "text" ? "" : null),
+        value: l(e.field, a === "text" ? "" : null),
         operator: s(e.field),
-        operators: $(this.$props.filterOperators[a] || [], t),
-        booleanValues: $(w, t),
+        operators: R(this.$props.filterOperators[a] || [], t),
+        booleanValues: R(w, t),
         filterType: a,
         onChange: n,
         render: e.filterCell || this.$props.cellRender,
-        "aria-label": u,
+        "aria-label": h,
         size: this.$props.size
-      }, null), m = e.declarationIndex >= 0 ? ++h : --o, F = {
-        ariaLabel: e.filterable ? t.toLanguageString(v, B[v]) : void 0,
+      }, null), C = e.declarationIndex >= 0 ? ++u : --o, F = {
+        ariaLabel: e.filterable ? t.toLanguageString(v, M[v]) : void 0,
         ariaColumnIndex: e.ariaColumnIndex
-      }, x = e.locked && e.left !== void 0 ? this.$props.isRtl ? {
+      }, $ = e.locked && e.left !== void 0 ? this.$props.isRtl ? {
         left: e.right + "px",
         right: e.left + "px"
       } : {
         left: e.left + "px",
         right: e.right + "px"
-      } : void 0, R = d && C[l] !== void 0 ? C[l] : void 0, T = c(k, {
-        key: m,
+      } : void 0, x = d && m[i] !== void 0 ? m[i] : void 0, T = c(y, {
+        key: C,
         role: "gridcell",
-        columnId: y.getFilterColumnId(e.id),
+        columnId: k.getFilterColumnId(e.id),
         navigatable: e.navigatable,
-        style: x,
+        style: $,
         class: this.headerCellClassName(e.field, e.locked) || void 0,
         ariaColumnIndex: F.ariaColumnIndex,
-        "aria-label": u,
-        colSpan: R
-      }, H(g) ? g : {
+        "aria-label": h,
+        colSpan: x
+      }, E(g) ? g : {
         default: () => [g]
       });
-      return e.filterable && T || c(k, {
-        key: m,
+      return e.filterable && T || c(y, {
+        key: C,
         role: "gridcell",
-        columnId: y.getFilterColumnId(e.id),
+        columnId: k.getFilterColumnId(e.id),
         navigatable: e.navigatable,
-        style: x,
+        style: $,
         class: this.headerCellClassName(e.field, e.locked) || void 0,
         ariaColumnIndex: F.ariaColumnIndex,
-        "aria-label": u,
-        colSpan: R
+        "aria-label": h,
+        colSpan: x
       }, null);
     }, this);
     return c("tr", {

package/header/Header.d.ts

@@ -56,7 +56,8 @@ declare const Header: import('vue').DefineComponent<import('vue').ExtractPropTyp
 }, {
     setScrollLeft(scrollLeft: number): void;
     setWidth(width: number): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    handleHeaderScroll(e: Event): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "headerscroll"[], "headerscroll", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     staticHeaders: PropType<boolean>;
     headerRow: PropType<any>;
     columnResize: PropType<{
@@ -66,5 +67,7 @@ declare const Header: import('vue').DefineComponent<import('vue').ExtractPropTyp
     cols: PropType<Element[]>;
     size: PropType<string>;
     draggable: PropType<boolean>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    onHeaderscroll?: (...args: any[]) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { Header };

package/header/Header.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"),l=require("../utils/main.js"),t=require("@progress/kendo-vue-common"),o=r.defineComponent({props:{staticHeaders:Boolean,headerRow:Object,columnResize:Object,cols:Array,size:String,draggable:Boolean},data(){return{divStyle:{},element:null,headerWrap:null,table:null}},computed:{wrapperClass(){return{"k-grid-header":!0,"k-grid-draggable-header":this.$props.draggable}},tableClass(){const{size:e}=this.$props;return{"k-table":!0,"k-grid-header-table":!0,[`k-table-${t.kendoThemeMaps.sizeMap[e]||e}`]:e}}},mounted(){this.headerWrap=t.getRef(this,"headerWrap"),this.table=t.getRef(this,"table"),this.$props.columnResize.colGroupHeader=t.getRef(this,"colGroupHeader");const e=l.isRtl(this.$el);this.$props.columnResize&&this.$props.columnResize.setIsRtl(e)},methods:{setScrollLeft(e){this.headerWrap&&(this.headerWrap.scrollLeft=e)},setWidth(e){this.table&&(this.table.style.width=e+"px")}},setup(){const e=r.ref(null),s=r.ref(null),a=r.ref(null);return{headerWrapRef:e,tableRef:s,colGroupHeaderRef:a}},render(){return this.$props.staticHeaders?r.createVNode("div",{class:this.wrapperClass},[r.createVNode("div",{ref:t.setRef(this,"headerWrap"),class:"k-grid-header-wrap"},[r.createVNode("table",{class:this.tableClass,ref:t.setRef(this,"table"),role:"none"},[r.createVNode("colgroup",{ref:t.setRef(this,"colGroupHeader")},[this.$props.cols]),this.$props.headerRow])])]):this.$props.headerRow}});exports.Header=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),l=require("../utils/main.js"),t=require("@progress/kendo-vue-common"),o=r.defineComponent({props:{staticHeaders:Boolean,headerRow:Object,columnResize:Object,cols:Array,size:String,draggable:Boolean},emits:["headerscroll"],data(){return{divStyle:{},element:null,headerWrap:null,table:null}},computed:{wrapperClass(){return{"k-grid-header":!0,"k-grid-draggable-header":this.$props.draggable}},tableClass(){const{size:e}=this.$props;return{"k-table":!0,"k-grid-header-table":!0,[`k-table-${t.kendoThemeMaps.sizeMap[e]||e}`]:e}}},mounted(){this.headerWrap=t.getRef(this,"headerWrap"),this.table=t.getRef(this,"table"),this.$props.columnResize.colGroupHeader=t.getRef(this,"colGroupHeader");const e=l.isRtl(this.$el);this.$props.columnResize&&this.$props.columnResize.setIsRtl(e)},methods:{setScrollLeft(e){this.headerWrap&&(this.headerWrap.scrollLeft=e)},setWidth(e){this.table&&(this.table.style.width=e+"px")},handleHeaderScroll(e){this.$emit("headerscroll",e)}},setup(){const e=r.ref(null),s=r.ref(null),a=r.ref(null);return{headerWrapRef:e,tableRef:s,colGroupHeaderRef:a}},render(){return this.$props.staticHeaders?r.createVNode("div",{class:this.wrapperClass},[r.createVNode("div",{ref:t.setRef(this,"headerWrap"),class:"k-grid-header-wrap",onScroll:this.handleHeaderScroll},[r.createVNode("table",{class:this.tableClass,ref:t.setRef(this,"table"),role:"none"},[r.createVNode("colgroup",{ref:t.setRef(this,"colGroupHeader")},[this.$props.cols]),this.$props.headerRow])])]):this.$props.headerRow}});exports.Header=o;

package/header/Header.mjs

@@ -6,8 +6,8 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as i, createVNode as r, ref as t } from "vue";
-import { isRtl as p } from "../utils/main.mjs";
-import { setRef as s, getRef as a, kendoThemeMaps as h } from "@progress/kendo-vue-common";
+import { isRtl as h } from "../utils/main.mjs";
+import { setRef as s, getRef as a, kendoThemeMaps as d } from "@progress/kendo-vue-common";
 const u = /* @__PURE__ */ i({
   props: {
     staticHeaders: Boolean,
@@ -17,6 +17,7 @@ const u = /* @__PURE__ */ i({
     size: String,
     draggable: Boolean
   },
+  emits: ["headerscroll"],
   data() {
     return {
       divStyle: {},
@@ -39,13 +40,13 @@ const u = /* @__PURE__ */ i({
       return {
         "k-table": !0,
         "k-grid-header-table": !0,
-        [`k-table-${h.sizeMap[e] || e}`]: e
+        [`k-table-${d.sizeMap[e] || e}`]: e
       };
     }
   },
   mounted() {
     this.headerWrap = a(this, "headerWrap"), this.table = a(this, "table"), this.$props.columnResize.colGroupHeader = a(this, "colGroupHeader");
-    const e = p(this.$el);
+    const e = h(this.$el);
     this.$props.columnResize && this.$props.columnResize.setIsRtl(e);
   },
   methods: {
@@ -54,6 +55,9 @@ const u = /* @__PURE__ */ i({
     },
     setWidth(e) {
       this.table && (this.table.style.width = e + "px");
+    },
+    handleHeaderScroll(e) {
+      this.$emit("headerscroll", e);
     }
   },
   setup() {
@@ -69,7 +73,8 @@ const u = /* @__PURE__ */ i({
       class: this.wrapperClass
     }, [r("div", {
       ref: s(this, "headerWrap"),
-      class: "k-grid-header-wrap"
+      class: "k-grid-header-wrap",
+      onScroll: this.handleHeaderScroll
     }, [r("table", {
       class: this.tableClass,
       ref: s(this, "table"),

package/header/HeaderRow.d.ts

@@ -24,6 +24,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
     sortable?: GridSortSettings;
     groupable?: any;
     reorderable?: boolean;
+    headerSelectionValue?: boolean | any[];
     onSortChange?: (descriptors: SortDescriptor[], e: any) => void;
     sort?: any;
     filter?: CompositeFilterDescriptor;
@@ -76,6 +77,7 @@ declare const HeaderRow: import('vue').DefineComponent<import('vue').ExtractProp
     columnMenuIcon: PropType<SVGIcon>;
     isRtl: PropType<boolean>;
     isColCountDefined: PropType<boolean>;
+    headerSelectionValue: PropType<boolean | any[]>;
     columnsInitial: PropType<ExtendedColumnProps[]>;
     onSortChange: PropType<(descriptors: SortDescriptor[], e: any) => void>;
     onFilterChange: PropType<Function>;
@@ -127,6 +129,7 @@ declare const HeaderRow: import('vue').DefineComponent<import('vue').ExtractProp
     columnMenuIcon: PropType<SVGIcon>;
     isRtl: PropType<boolean>;
     isColCountDefined: PropType<boolean>;
+    headerSelectionValue: PropType<boolean | any[]>;
     columnsInitial: PropType<ExtendedColumnProps[]>;
     onSortChange: PropType<(descriptors: SortDescriptor[], e: any) => void>;
     onFilterChange: PropType<Function>;

package/header/HeaderRow.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"),x=require("../interfaces/GridSortSettings.js"),B=require("../drag/ColumnResizer.js"),K=require("../drag/ColumnDraggable.js"),P=require("./GridHeaderCell.js"),_=require("../columnMenu/ColumnMenu.js"),d=require("@progress/kendo-vue-common"),G=require("@progress/kendo-vue-data-tools"),o=require("../messages/main.js"),E=require("@progress/kendo-vue-intl"),V=require("@progress/kendo-svg-icons"),U=require("../utils/virtualColumns.js");function H(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!r.isVNode(n)}const R={none:"none",asc:"ascending",desc:"descending"},J={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},Q=r.defineComponent({name:"KendoHeaderRow",props:{grid:Object,cellRender:[String,Function,Object],groupable:[Boolean,Object],reorderable:Boolean,sortable:[Boolean,Object],sort:{type:Array},filter:Object,filterable:Boolean,filterOperators:Object,filterChange:Function,filterRow:Object,columns:Array,cellsToRender:Array,columnVirtualization:Boolean,columnsMap:Array,columnResize:Object,columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:Object,isRtl:Boolean,isColCountDefined:Boolean,columnsInitial:Array,onSortChange:Function,onFilterChange:Function,onSelectionchange:Function,onPressHandler:Function,onDragHandler:Function,onReleaseHandler:Function},inject:{onNavFocus:{default:d.noop},kendoLocalizationService:{default:null}},data(){return{columnMenuOpened:{}}},created(){this.serviceIndex=0,this.index=-1,this._element=null,this.cellClick=this.cellClick.bind(this)},methods:{pressHandler(n,t){this.$emit("pressHandler",n,t)},dragHandler(n,t){this.$emit("dragHandler",n,t)},releaseHandler(n){this.$emit("releaseHandler",n)},selectionChangeHandler(n){this.$emit("selectionchange",n)},cellClick(n,t){if(n.preventDefault(),!d.hasListener.call(this,"sortChange"))return;const{allowUnsort:f,mode:m}=x.normalize(this.$props.sortable||!1,t.sortable||!1),i=(this.$props.sort||[]).filter(s=>s.field===t.field)[0],u=J[f][i&&i.dir||""],g=m==="single"?[]:(this.$props.sort||[]).filter(s=>s.field!==t.field);u!==""&&t.field&&g.push({field:t.field,dir:u}),this.sortChangeHandler(g,{event:n,field:t.field})},sortChangeHandler(n,t){this.$emit("sortChange",n,t)},filterChangeHandler(n,t){this.$emit("filterChange",n,t)},cellClass(n,t,f){const m=t?" "+t:"";let i="k-header"+(f?" k-grid-header-sticky":"")+m;return this.$props.sort&&this.$props.sort.filter(u=>u.field===n).length>0&&(i+=" k-sorted"),i},cellKeyDown(n,t){n.defaultPrevented||(n.keyCode===d.Keys.enter&&this.cellClick(n,t),n.altKey&&n.keyCode===d.Keys.down&&t.field&&(n.preventDefault(),this.columnMenuOpened={[t.field]:!0}))},getTemplate(n){return d.templateRendering.call(this.$props.grid,n,d.getListeners.call(this.$props.grid))},columnMenuClose(){this.onNavFocus({}),this.columnMenuOpened={}}},computed:{element(){return this._element},theadClasses(){return{"k-table-thead":!0}}},render(){const n=E.provideLocalizationService(this),t=n.toLanguageString(o.sortableColumnAriaLabel,o.messages[o.sortableColumnAriaLabel]),f=n.toLanguageString(o.sortableColumnAscendingAriaLabel,o.messages[o.sortableColumnAscendingAriaLabel]),m=n.toLanguageString(o.sortableColumnDescendingAriaLabel,o.messages[o.sortableColumnDescendingAriaLabel]);this.serviceIndex=0,this.index=-1;const i=this.$props.columnsMap&&this.$props.columnsMap.length===1,u=this.$props.columnVirtualization&&i,g=function(s,b){const a=U.getVirtualHeaderCellsToRender({cellsToRender:this.$props.cellsToRender||[],columns:this.$props.columns,rowIndex:b,enableVirtualization:u}),y=a.columnsToRender.length>0,O=y?a.columnsToRender:s,I=y?a.colSpans:[];return O.map(function(L,A){var M;const e=this.$props.columns[L],C=this.$props.sortable&&e.sortable,k=this.$props.sort?this.$props.sort.findIndex(l=>l.field===e.field):-1,S=k>=0&&this.$props.sort[k].dir||"none",p=function(l){if(!this.$props.sort)return null;const $=l>=0?this.$props.sort[l].dir:"";return l>=0&&[r.createVNode("span",{key:1,class:"k-sort-icon"},[r.createVNode(d.Icon,{name:"sort-"+$+"-small",icon:$==="asc"?V.sortAscSmallIcon:V.sortDescSmallIcon},null)]),this.$props.sort.length>1&&r.createVNode("span",{key:2,class:"k-sort-icon"},[r.createVNode("span",{class:"k-sort-order"},[l+1])])]}.call(this,k),c=e.columnMenu||e.columnMenu===!1?e.columnMenu:this.$props.columnMenu,z=e.menuIcon||this.$props.columnMenuIcon,D=(e.kFirst?"k-first ":"")+this.cellClass(e.field,e.headerClassName,e.locked)+(c?" k-filterable":""),N=!c||typeof c=="boolean"?!!c:this.getTemplate(c),v=e.locked&&e.left!==void 0?this.$props.isRtl?{left:e.right+"px",right:e.left+"px"}:{left:e.left+"px",right:e.right+"px"}:void 0,w=R[S]==="none"?t:R[S]==="ascending"?f:m;let h=e.isAccessible?{ariaSort:R[S],ariaLabel:w,role:"columnheader",ariaColumnIndex:this.$props.isColCountDefined?this.$props.columnsInitial.findIndex(l=>l.field===e.field)+1:void 0,ariaSelected:!1,ariaHaspopup:c?"menu":this.$props.filterable&&e.filterable?"dialog":void 0}:{role:"columnheader"};const j=e.declarationIndex>=0?++this.index:--this.serviceIndex,F=e.columnMenuOpened!==void 0?e.columnMenuOpened:this.columnMenuOpened[e.field],T=(M=I[A])!=null?M:e.headerColSpan;return r.createVNode(G.HeaderThElement,{ariaSort:C?h.ariaSort:void 0,ariaLabel:C?h.ariaLabel:void 0,role:h.role,ariaColumnIndex:h.ariaColumnIndex,ariaSelected:h.ariaSelected,ariaHaspopup:h.ariaHaspopup,key:j,colSpan:T,rowSpan:e.rowSpan,class:D,style:v,columnId:e.id,navigatable:e.navigatable,onKeydown:l=>this.cellKeyDown(l,e)},{default:()=>[[e.children.length===0&&c&&r.createVNode(_.ColumnMenu,{key:0,column:{field:e.field,filter:e.filter},opened:F,animate:this.$props.columnMenuAnimate,sortable:C,sort:this.$props.sort,onClose:this.columnMenuClose,onSortchange:this.sortChangeHandler,filter:this.$props.filter,filterable:this.$props.filterable&&e.filterable,filterOperators:this.$props.filterOperators,onFilterchange:this.filterChangeHandler,render:N,columnMenuIcon:z},null),e.internalHeaderCell&&r.createVNode("span",{class:"k-cell-inner"},[r.createVNode(e.internalHeaderCell,{key:1,field:e.field,sortable:C,onHeadercellclick:l=>this.cellClick(l,e),onSelectionchange:this.selectionChangeHandler,selectionValue:e.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},H(p)?p:{default:()=>[p]})])||r.createVNode("span",{class:"k-cell-inner"},[r.createVNode(P.GridHeaderCell,{key:1,field:e.field,sortable:C,onHeadercellclick:l=>this.cellClick(l,e),selectionValue:e.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},H(p)?p:{default:()=>[p]})]),this.$props.columnResize&&this.$props.columnResize.resizable&&e.resizable&&r.createVNode(B.ColumnResizer,{key:2,onResize:(l,$,q)=>this.$props.columnResize&&this.$props.columnResize.dragHandler(l,e,$,q)},null)]]})},this)};return r.createVNode("thead",{role:"rowgroup",class:this.theadClasses,"data-keyboardnavheader":!0},[this.$props.columnsMap.map(function(s,b){let a;return(this.$props.groupable||this.$props.reorderable)&&r.createVNode(K.ColumnDraggable,{key:b,onPressHandler:this.pressHandler,onDragHandler:this.dragHandler,onReleaseHandler:this.releaseHandler},H(a=g.call(this,s,b))?a:{default:()=>[a]})||r.createVNode("tr",{class:"k-table-row",role:"row","aria-rowindex":this.columnsMap.length},[g.call(this,s,b)])},this),this.$props.filterRow])}});exports.HeaderRow=Q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),K=require("../interfaces/GridSortSettings.js"),P=require("../drag/ColumnResizer.js"),_=require("../drag/ColumnDraggable.js"),G=require("./GridHeaderCell.js"),E=require("../columnMenu/ColumnMenu.js"),p=require("@progress/kendo-vue-common"),U=require("@progress/kendo-vue-data-tools"),s=require("../messages/main.js"),W=require("@progress/kendo-vue-intl"),O=require("@progress/kendo-svg-icons"),J=require("../utils/virtualColumns.js");function y(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!l.isVNode(n)}const R={none:"none",asc:"ascending",desc:"descending"},Q={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},X=l.defineComponent({name:"KendoHeaderRow",props:{grid:Object,cellRender:[String,Function,Object],groupable:[Boolean,Object],reorderable:Boolean,sortable:[Boolean,Object],sort:{type:Array},filter:Object,filterable:Boolean,filterOperators:Object,filterChange:Function,filterRow:Object,columns:Array,cellsToRender:Array,columnVirtualization:Boolean,columnsMap:Array,columnResize:Object,columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:Object,isRtl:Boolean,isColCountDefined:Boolean,headerSelectionValue:[Boolean,Array],columnsInitial:Array,onSortChange:Function,onFilterChange:Function,onSelectionchange:Function,onPressHandler:Function,onDragHandler:Function,onReleaseHandler:Function},inject:{onNavFocus:{default:p.noop},kendoLocalizationService:{default:null}},data(){return{columnMenuOpened:{}}},created(){this.serviceIndex=0,this.index=-1,this._element=null,this.cellClick=this.cellClick.bind(this)},methods:{pressHandler(n,t){this.$emit("pressHandler",n,t)},dragHandler(n,t){this.$emit("dragHandler",n,t)},releaseHandler(n){this.$emit("releaseHandler",n)},selectionChangeHandler(n){this.$emit("selectionchange",n)},cellClick(n,t){if(n.preventDefault(),!p.hasListener.call(this,"sortChange"))return;const{allowUnsort:m,mode:g}=K.normalize(this.$props.sortable||!1,t.sortable||!1),a=(this.$props.sort||[]).filter(o=>o.field===t.field)[0],c=Q[m][a&&a.dir||""],d=g==="single"?[]:(this.$props.sort||[]).filter(o=>o.field!==t.field);c!==""&&t.field&&d.push({field:t.field,dir:c}),this.sortChangeHandler(d,{event:n,field:t.field})},sortChangeHandler(n,t){this.$emit("sortChange",n,t)},filterChangeHandler(n,t){this.$emit("filterChange",n,t)},cellClass(n,t,m){const g=t?" "+t:"";let a="k-header"+(m?" k-grid-header-sticky":"")+g;return this.$props.sort&&this.$props.sort.filter(c=>c.field===n).length>0&&(a+=" k-sorted"),a},cellKeyDown(n,t){n.defaultPrevented||(n.keyCode===p.Keys.enter&&this.cellClick(n,t),n.altKey&&n.keyCode===p.Keys.down&&t.field&&(n.preventDefault(),this.columnMenuOpened={[t.field]:!0}))},getTemplate(n){return p.templateRendering.call(this.$props.grid,n,p.getListeners.call(this.$props.grid))},columnMenuClose(){this.onNavFocus({}),this.columnMenuOpened={}}},computed:{element(){return this._element},theadClasses(){return{"k-table-thead":!0}}},render(){const n=W.provideLocalizationService(this),t=n.toLanguageString(s.sortableColumnAriaLabel,s.messages[s.sortableColumnAriaLabel]),m=n.toLanguageString(s.sortableColumnAscendingAriaLabel,s.messages[s.sortableColumnAscendingAriaLabel]),g=n.toLanguageString(s.sortableColumnDescendingAriaLabel,s.messages[s.sortableColumnDescendingAriaLabel]);this.serviceIndex=0,this.index=-1;const a=this.$props.columnVirtualization,c=function(d,o){const i=J.getVirtualHeaderCellsToRender({cellsToRender:this.$props.cellsToRender||[],columns:this.$props.columns,rowIndex:o,enableVirtualization:a,columnsMap:this.$props.columnsMap}),M=a;let k=M&&i.columnsToRender?i.columnsToRender:d;const I=M?i.colSpans:[];return!k||k.length===0?[]:k.map(function(A,L){var V;const e=this.$props.columns[A],b=this.$props.sortable&&e.sortable,S=this.$props.sort?this.$props.sort.findIndex(r=>r.field===e.field):-1,H=S>=0&&this.$props.sort[S].dir||"none",h=function(r){if(!this.$props.sort)return null;const C=r>=0?this.$props.sort[r].dir:"";return r>=0&&[l.createVNode("span",{key:1,class:"k-sort-icon"},[l.createVNode(p.Icon,{name:"sort-"+C+"-small",icon:C==="asc"?O.sortAscSmallIcon:O.sortDescSmallIcon},null)]),this.$props.sort.length>1&&l.createVNode("span",{key:2,class:"k-sort-icon"},[l.createVNode("span",{class:"k-sort-order"},[r+1])])]}.call(this,S),u=e.columnMenu||e.columnMenu===!1?e.columnMenu:this.$props.columnMenu,z=e.menuIcon||this.$props.columnMenuIcon,D=(e.kFirst?"k-first ":"")+this.cellClass(e.field,e.headerClassName,e.locked)+(u?" k-filterable":""),N=!u||typeof u=="boolean"?!!u:this.getTemplate(u),v=i.skipOffset?{borderLeftWidth:"1px"}:void 0,w=e.locked&&e.left!==void 0?this.$props.isRtl?{left:e.right+"px",right:e.left+"px"}:{left:e.left+"px",right:e.right+"px"}:v,j=R[H]==="none"?t:R[H]==="ascending"?m:g;let f=e.isAccessible?{ariaSort:R[H],ariaLabel:j,role:"columnheader",ariaColumnIndex:this.$props.isColCountDefined?this.$props.columnsInitial.findIndex(r=>r.field===e.field)+1:void 0,ariaSelected:!1,ariaHaspopup:u?"menu":this.$props.filterable&&e.filterable?"dialog":void 0}:{role:"columnheader"};const F=e.declarationIndex>=0?++this.index:--this.serviceIndex,T=e.columnMenuOpened!==void 0?e.columnMenuOpened:this.columnMenuOpened[e.field],q=(V=I[L])!=null?V:e.headerColSpan;return l.createVNode(U.HeaderThElement,{ariaSort:b?f.ariaSort:void 0,ariaLabel:b?f.ariaLabel:void 0,role:f.role,ariaColumnIndex:f.ariaColumnIndex,ariaSelected:f.ariaSelected,ariaHaspopup:f.ariaHaspopup,key:F,colSpan:q,rowSpan:e.rowSpan,class:D,style:w,columnId:e.id,navigatable:e.navigatable,onKeydown:r=>this.cellKeyDown(r,e)},{default:()=>{var r,C;return[[e.children.length===0&&u&&l.createVNode(E.ColumnMenu,{key:0,column:{field:e.field,filter:e.filter},opened:T,animate:this.$props.columnMenuAnimate,sortable:b,sort:this.$props.sort,onClose:this.columnMenuClose,onSortchange:this.sortChangeHandler,filter:this.$props.filter,filterable:this.$props.filterable&&e.filterable,filterOperators:this.$props.filterOperators,onFilterchange:this.filterChangeHandler,render:N,columnMenuIcon:z},null),e.internalHeaderCell&&l.createVNode("span",{class:"k-cell-inner"},[l.createVNode(e.internalHeaderCell,{key:1,field:e.field,sortable:b,onHeadercellclick:$=>this.cellClick($,e),onSelectionchange:this.selectionChangeHandler,selectionValue:(r=e.headerSelectionValue)!=null?r:this.$props.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},y(h)?h:{default:()=>[h]})])||l.createVNode("span",{class:"k-cell-inner"},[l.createVNode(G.GridHeaderCell,{key:1,field:e.field,sortable:b,onHeadercellclick:$=>this.cellClick($,e),selectionValue:(C=e.headerSelectionValue)!=null?C:this.$props.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},y(h)?h:{default:()=>[h]})]),this.$props.columnResize&&this.$props.columnResize.resizable&&e.resizable&&l.createVNode(P.ColumnResizer,{key:2,onResize:($,x,B)=>this.$props.columnResize&&this.$props.columnResize.dragHandler($,e,x,B)},null)]]}})},this)};return l.createVNode("thead",{role:"rowgroup",class:this.theadClasses,"data-keyboardnavheader":!0},[this.$props.columnsMap.map(function(d,o){let i;return(this.$props.groupable||this.$props.reorderable)&&l.createVNode(_.ColumnDraggable,{key:o,onPressHandler:this.pressHandler,onDragHandler:this.dragHandler,onReleaseHandler:this.releaseHandler},y(i=c.call(this,d,o))?i:{default:()=>[i]})||l.createVNode("tr",{class:"k-table-row",role:"row","aria-rowindex":o+1},[c.call(this,d,o)])},this),this.$props.filterRow])}});exports.HeaderRow=X;