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

package/components/PinnedRowsTable.mjs

@@ -0,0 +1,141 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as k, createVNode as s, mergeProps as G, inject as P, computed as a, ref as j } from "vue";
+import { setRef as c, classNames as f, uGrid as u, getter as x, getRef as l } from "@progress/kendo-vue-common";
+import { TableSelection as K, tableKeyboardNavigationTopPinnedAttributes as z, tableKeyboardNavigationBottomPinnedAttributes as B } from "@progress/kendo-vue-data-tools";
+import { provideLocalizationService as R } from "@progress/kendo-vue-intl";
+import { GridRow as E } from "../rows/GridRow.mjs";
+import { getRowContents as H } from "../getRowContents.mjs";
+import { pinnedTopRowsAriaLabel as p, messages as h, pinnedBottomRowsAriaLabel as w } from "../messages/main.mjs";
+const J = /* @__PURE__ */ k({
+  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 = l(this, "table"), this.colGroupRefEl = l(this, "colGroup");
+  },
+  updated() {
+    this.tableRef = l(this, "table"), this.colGroupRefEl = l(this, "colGroup");
+  },
+  methods: {
+    setWidth(e) {
+      const n = l(this, "table");
+      n && (n.style.width = e ? e + "px" : "");
+    },
+    setScrollLeft(e) {
+      const n = l(this, "pinnedRef");
+      n && n.scrollLeft !== e && (n.scrollLeft = e);
+    }
+  },
+  setup(e) {
+    const n = P("kendo", {}), d = a(() => e.position === "top"), g = a(() => d.value ? n.pinnedTopRef : n.pinnedBottomRef), S = j(!1), y = (o) => {
+      const t = n.containerElementRef;
+      if (!t || S.value)
+        return;
+      const i = o.currentTarget.scrollLeft;
+      t.scrollLeft !== i && (t.scrollLeft = i);
+    }, I = a(() => {
+      var o;
+      return (o = e.rows) != null && o.pinnedData ? {
+        ...e.rows,
+        data: e.rows.pinnedData
+      } : e.rows;
+    }), L = a(() => !e.pinnedItems || !e.dataRowContext ? [] : e.pinnedItems.map((o, t) => {
+      const i = {
+        dataItem: o,
+        rowType: "data",
+        level: 0,
+        expanded: !1,
+        dataIndex: t
+      }, r = e.dataRowContext.dataItemKey, b = "pinned_" + ((r ? x(r)(o) : void 0) || "ai" + t), m = H(e.dataRowContext, i, b, t);
+      return s(E, {
+        key: b,
+        rowType: "data",
+        item: i,
+        dataIndex: t,
+        ariaRowIndex: t + 1,
+        absoluteRowIndex: t,
+        isAltRow: t % 2 !== 0,
+        isHidden: !1,
+        rowHeight: e.rowHeight,
+        isSelected: m.isSelected
+      }, {
+        default: () => [m.row]
+      });
+    })), T = a(() => f("k-grid-pinned-container", {
+      "k-pos-bottom": !d.value
+    })), v = a(() => f(u.table({
+      size: e.size
+    }))), C = (o) => {
+      var i, r;
+      const t = (i = e.pinnedItems) == null ? void 0 : i[o.startRowIndex];
+      t && ((r = n.pinnedSelectionRelease) == null || r.call(n, o, t));
+    }, A = a(() => e.selectable ? {
+      ...typeof e.selectable == "object" ? e.selectable : {},
+      enabled: !0,
+      drag: !1
+    } : e.selectable), N = a(() => d.value ? z : B);
+    return {
+      isTop: d,
+      pinnedRef: g,
+      handlePinnedScroll: y,
+      rowTemplateSettings: I,
+      pinnedRows: L,
+      containerClassName: T,
+      tableClassName: v,
+      handleSelectionRelease: C,
+      pinnedSelectable: A,
+      pinnedBodyAttributes: N
+    };
+  },
+  render() {
+    return s("div", {
+      class: this.containerClassName,
+      role: "presentation",
+      style: {
+        display: this.pinnedRows.length ? "" : "none"
+      }
+    }, [s("div", {
+      class: "k-grid-pinned-wrap",
+      ref: c(this, "pinnedRef"),
+      onScroll: this.handlePinnedScroll
+    }, [s(K, {
+      selectable: this.pinnedSelectable,
+      onRelease: this.handleSelectionRelease
+    }, {
+      default: () => [s("table", {
+        ref: c(this, "table"),
+        class: this.tableClassName,
+        "aria-label": this.isTop ? R(this).toLanguageString(p, h[p]) : R(this).toLanguageString(w, h[w])
+      }, [s("colgroup", {
+        ref: c(this, "colGroup")
+      }, [this.$props.cols]), s("tbody", G({
+        class: f(u.tbody({}))
+      }, this.pinnedBodyAttributes), [this.pinnedRows])])]
+    })])]);
+  }
+});
+export {
+  J as PinnedRowsTable
+};

package/components/StickyGroupTable.d.ts

@@ -64,7 +64,6 @@ export declare const StickyGroupTable: import('vue').DefineComponent<import('vue
 }, {
     setWidth(width: number): void;
     setScrollLeft(scrollLeft: number): void;
-    renderRows(): any;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     size: StringConstructor;
     items: ArrayConstructor;

package/components/StickyGroupTable.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"),e=require("@progress/kendo-vue-common"),d=require("../rows/GridRow.js"),c=require("../getRowContents.js"),u=o.defineComponent({name:"StickyGroupTable",props:{size:String,items:Array,cols:Array,dataRowContext:{type:Object,required:!0},position:{type:String,required:!0},isStackedMode:Boolean,groupLevelCount:Number,rowHeight:Number},inject:{sticky:{default:null}},mounted(){this.tableRef=e.getRef(this,"table"),this.colGroupRef=e.getRef(this,"colGroup")},updated(){this.tableRef=e.getRef(this,"table"),this.colGroupRef=e.getRef(this,"colGroup")},computed:{isTop(){return this.position==="top"},stickyItems(){return this.isTop?this.sticky.headerItems||[]:this.sticky.footerItems||[]},hasContent(){return this.stickyItems.length>0},containerClassName(){return e.classNames(e.uGrid.stickyContainer({bottom:!this.isTop}))},tableClassName(){return e.classNames(e.uGrid.table({size:this.size}))}},methods:{setWidth(s){const t=e.getRef(this,"tableRef");t&&(t.style.width=s?s+"px":"")},setScrollLeft(s){const t=this.$el;t&&t.scrollLeft!==s&&(t.scrollLeft=s)},renderRows(){return this.stickyItems.map((s,t)=>{const{item:r,flatIndex:i}=s,a=this.dataRowContext.dataItemKey&&e.getter(this.dataRowContext.dataItemKey)(r.dataItem)||"ai"+i,n=c.getRowContents(this.dataRowContext,r,a,t),l=this.isTop?"groupHeader":"groupFooter";return o.createVNode(d.GridRow,{key:a,rowType:l,item:r,dataIndex:-1,ariaRowIndex:t,absoluteRowIndex:i,isAltRow:!1,isHidden:!1,rowHeight:this.$props.rowHeight,isSelected:!1,isInEdit:!1},{default:()=>[n.row]})})}},render(){return o.createVNode("div",{class:this.containerClassName,style:{display:this.hasContent?"":"none"}},[o.createVNode("table",{ref:e.setRef(this,"table"),class:this.tableClassName},[o.createVNode("colgroup",{ref:e.setRef(this,"colGroup")},[this.$props.cols]),o.createVNode("tbody",{class:e.classNames(e.uGrid.tbody({}))},[this.renderRows()])])])}});exports.StickyGroupTable=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),e=require("@progress/kendo-vue-common"),c=require("../rows/GridRow.js"),d=require("../getRowContents.js"),u=o.defineComponent({name:"StickyGroupTable",props:{size:String,items:Array,cols:Array,dataRowContext:{type:Object,required:!0},position:{type:String,required:!0},isStackedMode:Boolean,groupLevelCount:Number,rowHeight:Number},inject:{sticky:{default:null}},mounted(){this.tableRef=e.getRef(this,"table"),this.colGroupRef=e.getRef(this,"colGroup")},updated(){this.tableRef=e.getRef(this,"table"),this.colGroupRef=e.getRef(this,"colGroup")},computed:{isTop(){return this.position==="top"},stickyItems(){return this.isTop?this.sticky.headerItems||[]:this.sticky.footerItems||[]},hasContent(){return this.stickyItems.length>0},containerClassName(){return e.classNames(e.uGrid.stickyContainer({bottom:!this.isTop}))},tableClassName(){return e.classNames(e.uGrid.table({size:this.size}))}},methods:{setWidth(s){const t=e.getRef(this,"tableRef");t&&(t.style.width=s?s+"px":"")},setScrollLeft(s){const t=this.$el;t&&t.scrollLeft!==s&&(t.scrollLeft=s)}},render(){return o.createVNode("div",{class:this.containerClassName},[o.createVNode("table",{ref:e.setRef(this,"table"),class:this.tableClassName},[o.createVNode("colgroup",{ref:e.setRef(this,"colGroup")},[this.$props.cols]),o.createVNode("tbody",{class:e.classNames(e.uGrid.tbody({}))},[this.stickyItems.map((s,t)=>{const{item:i,flatIndex:r}=s,a=this.dataRowContext.dataItemKey&&e.getter(this.dataRowContext.dataItemKey)(i.dataItem)||"ai"+r,n=d.getRowContents(this.dataRowContext,i,a,t),l=this.isTop?"groupHeader":"groupFooter";return o.createVNode(c.GridRow,{key:a,rowType:l,item:i,dataIndex:-1,ariaRowIndex:t,absoluteRowIndex:r,isAltRow:!1,isHidden:!1,rowHeight:this.$props.rowHeight,isSelected:!1,isInEdit:!1},{default:()=>[n.row]})})])])])}});exports.StickyGroupTable=u;

package/components/StickyGroupTable.mjs

@@ -5,11 +5,11 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as p, createVNode as s } from "vue";
+import { defineComponent as h, createVNode as s } from "vue";
 import { setRef as d, classNames as r, uGrid as a, getter as m, getRef as o } from "@progress/kendo-vue-common";
 import { GridRow as u } from "../rows/GridRow.mjs";
 import { getRowContents as f } from "../getRowContents.mjs";
-const g = /* @__PURE__ */ p({
+const g = /* @__PURE__ */ h({
   name: "StickyGroupTable",
   props: {
     size: String,
@@ -67,37 +67,11 @@ const g = /* @__PURE__ */ p({
     setScrollLeft(e) {
       const t = this.$el;
       t && t.scrollLeft !== e && (t.scrollLeft = e);
-    },
-    renderRows() {
-      return this.stickyItems.map((e, t) => {
-        const {
-          item: i,
-          flatIndex: n
-        } = e, l = this.dataRowContext.dataItemKey && m(this.dataRowContext.dataItemKey)(i.dataItem) || "ai" + n, c = f(this.dataRowContext, i, l, t), h = this.isTop ? "groupHeader" : "groupFooter";
-        return s(u, {
-          key: l,
-          rowType: h,
-          item: i,
-          dataIndex: -1,
-          ariaRowIndex: t,
-          absoluteRowIndex: n,
-          isAltRow: !1,
-          isHidden: !1,
-          rowHeight: this.$props.rowHeight,
-          isSelected: !1,
-          isInEdit: !1
-        }, {
-          default: () => [c.row]
-        });
-      });
     }
   },
   render() {
     return s("div", {
-      class: this.containerClassName,
-      style: {
-        display: this.hasContent ? "" : "none"
-      }
+      class: this.containerClassName
     }, [s("table", {
       ref: d(this, "table"),
       class: this.tableClassName
@@ -105,7 +79,27 @@ const g = /* @__PURE__ */ p({
       ref: d(this, "colGroup")
     }, [this.$props.cols]), s("tbody", {
       class: r(a.tbody({}))
-    }, [this.renderRows()])])]);
+    }, [this.stickyItems.map((e, t) => {
+      const {
+        item: i,
+        flatIndex: n
+      } = e, l = this.dataRowContext.dataItemKey && m(this.dataRowContext.dataItemKey)(i.dataItem) || "ai" + n, c = f(this.dataRowContext, i, l, t), p = this.isTop ? "groupHeader" : "groupFooter";
+      return s(u, {
+        key: l,
+        rowType: p,
+        item: i,
+        dataIndex: -1,
+        ariaRowIndex: t,
+        absoluteRowIndex: n,
+        isAltRow: !1,
+        isHidden: !1,
+        rowHeight: this.$props.rowHeight,
+        isSelected: !1,
+        isInEdit: !1
+      }, {
+        default: () => [c.row]
+      });
+    })])])]);
   }
 });
 export {

package/constants/main.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/** The attribute required by the Grid selection on Grid `tr` elements. */
+export { TABLE_ROW_INDEX_ATTRIBUTE as GRID_ROW_INDEX_ATTRIBUTE } from '@progress/kendo-vue-data-tools';
+/** The attribute required by the Grid selection on Grid `td` elements. */
+export { TABLE_COL_INDEX_ATTRIBUTE as GRID_COL_INDEX_ATTRIBUTE } from '@progress/kendo-vue-data-tools';
+/** Attribute which disable selection start from this element. */
+export { TABLE_PREVENT_SELECTION_ELEMENT as GRID_PREVENT_SELECTION_ELEMENT } from '@progress/kendo-vue-data-tools';
+/** @hidden */
+export declare const SAFARI_REGEX: RegExp;