@progress/kendo-vue-grid 5.1.0 → 5.2.0-dev.202406141341

package/dist/es/Grid.js

@@ -154,7 +154,8 @@ var GridVue2 = {
       isRtl: false,
       context: undefined,
       navigation: undefined,
-      showLicenseWatermark: false
+      showLicenseWatermark: false,
+      notHiddenColumns: []
     };
   },
   watch: {
@@ -197,6 +198,10 @@ var GridVue2 = {
     this.isRtl = rtl;
     // @ts-ignore
     this.initialHeight = this._element.style ? this._element.style.height : null;
+    this.resizeObserver = canUseDOM && window.ResizeObserver && new ResizeObserver(this.calculateMedia);
+    if ((document === null || document === void 0 ? void 0 : document.body) && this.resizeObserver) {
+      this.resizeObserver.observe(document.body);
+    }
   },
   updated: function updated() {
     this.setRefs();
@@ -298,6 +303,40 @@ var GridVue2 = {
     }
   },
   methods: {
+    getColumnsEssentialProps: function getColumnsEssentialProps(columns) {
+      return JSON.stringify(columns.map(function (el) {
+        return {
+          id: el.id,
+          field: el.field,
+          title: el.title,
+          children: el.children
+        };
+      }));
+    },
+    calculateMedia: function calculateMedia() {
+      var filteredColumns = this.filterHiddenColumns(this.$props.columns);
+      if (this.getColumnsEssentialProps(this.notHiddenColumns) !== this.getColumnsEssentialProps(filteredColumns)) {
+        this.$forceUpdate();
+      }
+    },
+    filterHiddenColumns: function filterHiddenColumns(columns) {
+      var _this = this;
+      if (!columns || columns.length === 0) {
+        return columns;
+      }
+      var filterNestedColumns = function filterNestedColumns(column) {
+        return __assign(__assign({}, column), {
+          children: column.children && column.children.length > 0 ? _this.filterHiddenColumns(column.children) : column.children
+        });
+      };
+      return __spreadArray([], columns, true).filter(function (col) {
+        return !col.hidden;
+      }).filter(function (col) {
+        return canUseDOM && col && col.media ? window.matchMedia(col.media).matches : col;
+      }).map(function (col) {
+        return filterNestedColumns(col);
+      });
+    },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
      * or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column.
@@ -363,6 +402,9 @@ var GridVue2 = {
       }
       this.currentData = [];
       this._columns = [];
+      if ((document === null || document === void 0 ? void 0 : document.body) && this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
     },
     resetVirtual: function resetVirtual() {
       this.vs.PageChange = this.pageChangeHandler;
@@ -916,10 +958,8 @@ var GridVue2 = {
       index: this.$props.skip || 0
     }, this.$props.group !== undefined, this.$props.expandField);
     var children = defaultSlot || [];
-    var notHiddenColumns = this.$props.columns ? this.$props.columns.filter(function (column) {
-      return !column.hidden;
-    }) : this.$props.columns;
-    this.initColumns(notHiddenColumns, resolvedGroupsCount);
+    this.notHiddenColumns = this.filterHiddenColumns(this.$props.columns);
+    this.initColumns(this.notHiddenColumns, resolvedGroupsCount);
     var toolbar = children.filter(function (child) {
       return child && child.tag && child.tag.toLowerCase().indexOf('toolbar') !== -1 || child.componentOptions && child.componentOptions.tag && child.componentOptions.tag.toLowerCase().indexOf('toolbar') !== -1 || child.type && child.type.name && child.type.name.toLowerCase().indexOf('toolbar') !== -1;
     });

package/dist/es/interfaces/GridColumnProps.d.ts

@@ -102,9 +102,13 @@ export interface GridColumnProps {
      */
     format?: string;
     /**
-     * Indicates whether the column is hidden.
+     * 	Controls the visibility of Grid's column. Defaults to `false`.
      */
     hidden?: boolean;
+    /**
+     * Sets the screen size condition that needs to be satisfied for a column to remain visible. If you set the hidden property, the behavior of media is overridden.
+     */
+    media?: string;
     /**
      * Sets the custom CSS classes to the column header cell.
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-grid',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1718172992,
+    publishDate: 1718372182,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/utils/main.js

@@ -140,9 +140,8 @@ export function mapColumns(columns) {
     for (var q = columns.length - 1; q >= 0; q--) {
         maxDepth = Math.max(maxDepth, columns[q].depth);
         columns[q].colSpan = columns[q].colSpan || 1;
-        if (columns[q].parentIndex !== -1) {
-            columns[columns[q].parentIndex].colSpan =
-                (columns[columns[q].parentIndex].colSpan || 0) + columns[q].colSpan;
+        if (columns[q].children.length > 0) {
+            columns[q].colSpan = columns[q].children.reduce(function (sum, child) { return (!child.hidden ? sum + child.colSpan : sum); }, 0);
         }
     }
     var rowSpan = 1;

package/dist/esm/Grid.js

@@ -154,7 +154,8 @@ var GridVue2 = {
       isRtl: false,
       context: undefined,
       navigation: undefined,
-      showLicenseWatermark: false
+      showLicenseWatermark: false,
+      notHiddenColumns: []
     };
   },
   watch: {
@@ -197,6 +198,10 @@ var GridVue2 = {
     this.isRtl = rtl;
     // @ts-ignore
     this.initialHeight = this._element.style ? this._element.style.height : null;
+    this.resizeObserver = canUseDOM && window.ResizeObserver && new ResizeObserver(this.calculateMedia);
+    if ((document === null || document === void 0 ? void 0 : document.body) && this.resizeObserver) {
+      this.resizeObserver.observe(document.body);
+    }
   },
   updated: function updated() {
     this.setRefs();
@@ -298,6 +303,40 @@ var GridVue2 = {
     }
   },
   methods: {
+    getColumnsEssentialProps: function getColumnsEssentialProps(columns) {
+      return JSON.stringify(columns.map(function (el) {
+        return {
+          id: el.id,
+          field: el.field,
+          title: el.title,
+          children: el.children
+        };
+      }));
+    },
+    calculateMedia: function calculateMedia() {
+      var filteredColumns = this.filterHiddenColumns(this.$props.columns);
+      if (this.getColumnsEssentialProps(this.notHiddenColumns) !== this.getColumnsEssentialProps(filteredColumns)) {
+        this.$forceUpdate();
+      }
+    },
+    filterHiddenColumns: function filterHiddenColumns(columns) {
+      var _this = this;
+      if (!columns || columns.length === 0) {
+        return columns;
+      }
+      var filterNestedColumns = function filterNestedColumns(column) {
+        return __assign(__assign({}, column), {
+          children: column.children && column.children.length > 0 ? _this.filterHiddenColumns(column.children) : column.children
+        });
+      };
+      return __spreadArray([], columns, true).filter(function (col) {
+        return !col.hidden;
+      }).filter(function (col) {
+        return canUseDOM && col && col.media ? window.matchMedia(col.media).matches : col;
+      }).map(function (col) {
+        return filterNestedColumns(col);
+      });
+    },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
      * or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column.
@@ -363,6 +402,9 @@ var GridVue2 = {
       }
       this.currentData = [];
       this._columns = [];
+      if ((document === null || document === void 0 ? void 0 : document.body) && this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
     },
     resetVirtual: function resetVirtual() {
       this.vs.PageChange = this.pageChangeHandler;
@@ -916,10 +958,8 @@ var GridVue2 = {
       index: this.$props.skip || 0
     }, this.$props.group !== undefined, this.$props.expandField);
     var children = defaultSlot || [];
-    var notHiddenColumns = this.$props.columns ? this.$props.columns.filter(function (column) {
-      return !column.hidden;
-    }) : this.$props.columns;
-    this.initColumns(notHiddenColumns, resolvedGroupsCount);
+    this.notHiddenColumns = this.filterHiddenColumns(this.$props.columns);
+    this.initColumns(this.notHiddenColumns, resolvedGroupsCount);
     var toolbar = children.filter(function (child) {
       return child && child.tag && child.tag.toLowerCase().indexOf('toolbar') !== -1 || child.componentOptions && child.componentOptions.tag && child.componentOptions.tag.toLowerCase().indexOf('toolbar') !== -1 || child.type && child.type.name && child.type.name.toLowerCase().indexOf('toolbar') !== -1;
     });

package/dist/esm/interfaces/GridColumnProps.d.ts

@@ -102,9 +102,13 @@ export interface GridColumnProps {
      */
     format?: string;
     /**
-     * Indicates whether the column is hidden.
+     * 	Controls the visibility of Grid's column. Defaults to `false`.
      */
     hidden?: boolean;
+    /**
+     * Sets the screen size condition that needs to be satisfied for a column to remain visible. If you set the hidden property, the behavior of media is overridden.
+     */
+    media?: string;
     /**
      * Sets the custom CSS classes to the column header cell.
      */

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-grid',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1718172992,
+    publishDate: 1718372182,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/utils/main.js

@@ -140,9 +140,8 @@ export function mapColumns(columns) {
     for (var q = columns.length - 1; q >= 0; q--) {
         maxDepth = Math.max(maxDepth, columns[q].depth);
         columns[q].colSpan = columns[q].colSpan || 1;
-        if (columns[q].parentIndex !== -1) {
-            columns[columns[q].parentIndex].colSpan =
-                (columns[columns[q].parentIndex].colSpan || 0) + columns[q].colSpan;
+        if (columns[q].children.length > 0) {
+            columns[q].colSpan = columns[q].children.reduce(function (sum, child) { return (!child.hidden ? sum + child.colSpan : sum); }, 0);
         }
     }
     var rowSpan = 1;

package/dist/npm/Grid.js

@@ -160,7 +160,8 @@ var GridVue2 = {
       isRtl: false,
       context: undefined,
       navigation: undefined,
-      showLicenseWatermark: false
+      showLicenseWatermark: false,
+      notHiddenColumns: []
     };
   },
   watch: {
@@ -203,6 +204,10 @@ var GridVue2 = {
     this.isRtl = rtl;
     // @ts-ignore
     this.initialHeight = this._element.style ? this._element.style.height : null;
+    this.resizeObserver = kendo_vue_common_1.canUseDOM && window.ResizeObserver && new ResizeObserver(this.calculateMedia);
+    if ((document === null || document === void 0 ? void 0 : document.body) && this.resizeObserver) {
+      this.resizeObserver.observe(document.body);
+    }
   },
   updated: function updated() {
     this.setRefs();
@@ -304,6 +309,40 @@ var GridVue2 = {
     }
   },
   methods: {
+    getColumnsEssentialProps: function getColumnsEssentialProps(columns) {
+      return JSON.stringify(columns.map(function (el) {
+        return {
+          id: el.id,
+          field: el.field,
+          title: el.title,
+          children: el.children
+        };
+      }));
+    },
+    calculateMedia: function calculateMedia() {
+      var filteredColumns = this.filterHiddenColumns(this.$props.columns);
+      if (this.getColumnsEssentialProps(this.notHiddenColumns) !== this.getColumnsEssentialProps(filteredColumns)) {
+        this.$forceUpdate();
+      }
+    },
+    filterHiddenColumns: function filterHiddenColumns(columns) {
+      var _this = this;
+      if (!columns || columns.length === 0) {
+        return columns;
+      }
+      var filterNestedColumns = function filterNestedColumns(column) {
+        return __assign(__assign({}, column), {
+          children: column.children && column.children.length > 0 ? _this.filterHiddenColumns(column.children) : column.children
+        });
+      };
+      return __spreadArray([], columns, true).filter(function (col) {
+        return !col.hidden;
+      }).filter(function (col) {
+        return kendo_vue_common_1.canUseDOM && col && col.media ? window.matchMedia(col.media).matches : col;
+      }).map(function (col) {
+        return filterNestedColumns(col);
+      });
+    },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
      * or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column.
@@ -369,6 +408,9 @@ var GridVue2 = {
       }
       this.currentData = [];
       this._columns = [];
+      if ((document === null || document === void 0 ? void 0 : document.body) && this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
     },
     resetVirtual: function resetVirtual() {
       this.vs.PageChange = this.pageChangeHandler;
@@ -922,10 +964,8 @@ var GridVue2 = {
       index: this.$props.skip || 0
     }, this.$props.group !== undefined, this.$props.expandField);
     var children = defaultSlot || [];
-    var notHiddenColumns = this.$props.columns ? this.$props.columns.filter(function (column) {
-      return !column.hidden;
-    }) : this.$props.columns;
-    this.initColumns(notHiddenColumns, resolvedGroupsCount);
+    this.notHiddenColumns = this.filterHiddenColumns(this.$props.columns);
+    this.initColumns(this.notHiddenColumns, resolvedGroupsCount);
     var toolbar = children.filter(function (child) {
       return child && child.tag && child.tag.toLowerCase().indexOf('toolbar') !== -1 || child.componentOptions && child.componentOptions.tag && child.componentOptions.tag.toLowerCase().indexOf('toolbar') !== -1 || child.type && child.type.name && child.type.name.toLowerCase().indexOf('toolbar') !== -1;
     });

package/dist/npm/interfaces/GridColumnProps.d.ts

@@ -102,9 +102,13 @@ export interface GridColumnProps {
      */
     format?: string;
     /**
-     * Indicates whether the column is hidden.
+     * 	Controls the visibility of Grid's column. Defaults to `false`.
      */
     hidden?: boolean;
+    /**
+     * Sets the screen size condition that needs to be satisfied for a column to remain visible. If you set the hidden property, the behavior of media is overridden.
+     */
+    media?: string;
     /**
      * Sets the custom CSS classes to the column header cell.
      */

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-grid',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1718172992,
+    publishDate: 1718372182,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/utils/main.js

@@ -148,9 +148,8 @@ function mapColumns(columns) {
     for (var q = columns.length - 1; q >= 0; q--) {
         maxDepth = Math.max(maxDepth, columns[q].depth);
         columns[q].colSpan = columns[q].colSpan || 1;
-        if (columns[q].parentIndex !== -1) {
-            columns[columns[q].parentIndex].colSpan =
-                (columns[columns[q].parentIndex].colSpan || 0) + columns[q].colSpan;
+        if (columns[q].children.length > 0) {
+            columns[q].colSpan = columns[q].children.reduce(function (sum, child) { return (!child.hidden ? sum + child.colSpan : sum); }, 0);
         }
     }
     var rowSpan = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-grid",
-  "version": "5.1.0",
+  "version": "5.2.0-dev.202406141341",
   "description": "Kendo UI for Vue Grid package",
   "repository": {
     "type": "git",
@@ -44,25 +44,25 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-common": "5.1.0"
+    "@progress/kendo-vue-common": "5.2.0-dev.202406141341"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.7.0",
     "@progress/kendo-drawing": "^1.20.1",
     "@progress/kendo-licensing": "^1.3.0",
     "@progress/kendo-svg-icons": "^3.0.0",
-    "@progress/kendo-vue-animation": "5.1.0",
-    "@progress/kendo-vue-buttons": "5.1.0",
-    "@progress/kendo-vue-charts": "5.1.0",
-    "@progress/kendo-vue-data-tools": "5.1.0",
-    "@progress/kendo-vue-dateinputs": "5.1.0",
-    "@progress/kendo-vue-dropdowns": "5.1.0",
-    "@progress/kendo-vue-excel-export": "5.1.0",
-    "@progress/kendo-vue-indicators": "5.1.0",
-    "@progress/kendo-vue-inputs": "5.1.0",
-    "@progress/kendo-vue-intl": "5.1.0",
-    "@progress/kendo-vue-pdf": "5.1.0",
-    "@progress/kendo-vue-popup": "5.1.0",
+    "@progress/kendo-vue-animation": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-buttons": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-charts": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-data-tools": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-dateinputs": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-dropdowns": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-excel-export": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-indicators": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-inputs": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-intl": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-pdf": "5.2.0-dev.202406141341",
+    "@progress/kendo-vue-popup": "5.2.0-dev.202406141341",
     "cldr-core": "^41.0.0",
     "cldr-dates-full": "^41.0.0",
     "cldr-numbers-full": "^41.0.0"