@progress/kendo-vue-grid 3.3.2-dev.202205231324 → 3.3.3-dev.202205301219

package/dist/es/Grid.js

@@ -49,8 +49,9 @@ var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
 var markRaw = allVue.markRaw;
-import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, canUseDOM } from '@progress/kendo-vue-common';
+import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, canUseDOM, templateDefinition } from '@progress/kendo-vue-common';
 import { tableColumnsVirtualization, Pager, normalize, tableKeyboardNavigationTools as navigationTools, TableKeyboardNavigationProvider } from '@progress/kendo-vue-data-tools';
+import { Loader } from '@progress/kendo-vue-indicators';
 import { GridNav } from './GridNav';
 import { GridSelectionCell } from './cells/GridSelectionCell';
 import { GridHierarchyCell } from './cells/GridHierarchyCell';
@@ -105,8 +106,9 @@ var GridVue2 = {
     sort: Array,
     filterable: Boolean,
     filterOperators: Object,
-    filterCellRender: [String, Function, Object],
-    headerCellRender: [String, Function, Object],
+    filterCellRender: templateDefinition,
+    headerCellRender: templateDefinition,
+    loader: [String, Function, Object, Boolean],
     filter: Object,
     pageable: [Boolean, Object],
     pageSize: Number,
@@ -115,8 +117,8 @@ var GridVue2 = {
     take: Number,
     expandField: String,
     selectedField: String,
-    cellRender: [String, Function, Object],
-    rowRender: [String, Function, Object],
+    cellRender: templateDefinition,
+    rowRender: templateDefinition,
     resizable: Boolean,
     reorderable: Boolean,
     group: Array,
@@ -126,9 +128,9 @@ var GridVue2 = {
       type: String,
       default: 'scrollable'
     },
-    pager: [String, Function, Object],
+    pager: templateDefinition,
     rowHeight: Number,
-    detail: [String, Function, Object],
+    detail: templateDefinition,
     columnMenu: [Boolean, String, Function, Object],
     columnMenuAnimate: {
       type: [Boolean, Object],
@@ -1796,6 +1798,26 @@ var GridVue2 = {
       );
     }
 
+    var loaderTemplate = templateRendering.call(this, this.$props.loader, getListeners.call(this));
+    var defaultLoaderRendering = this.$props.loader && h("div", {
+      "class": "k-loader-container k-loader-container-md k-loader-top"
+    }, [h("div", {
+      "class": "k-loader-container-overlay k-overlay-light"
+    }), h("div", {
+      "class": "k-loader-container-inner"
+    }, [h(Loader, {
+      size: 'large',
+      attrs: this.v3 ? undefined : {
+        size: 'large',
+        type: 'infinite-spinner'
+      },
+      type: 'infinite-spinner'
+    })])]);
+    var loader = getTemplate.call(this, {
+      h: h,
+      template: loaderTemplate,
+      defaultRendering: defaultLoaderRendering
+    });
     return (// @ts-ignore function children
       h(TableKeyboardNavigationProvider, {
         ref: 'navRef',
@@ -1874,7 +1896,7 @@ var GridVue2 = {
             style: _this3.$props.scrollable === 'virtual' ? {
               'height': _this3.vs.containerHeight + 'px'
             } : {}
-          })])])]), footer, pager, clues];
+          })])]), loader]), footer, pager, clues];
         } : [toolbar, groupingPanel, header, h("div", {
           "class": "k-grid-container",
           role: "presentation",
@@ -1929,7 +1951,7 @@ var GridVue2 = {
           style: _this3.$props.scrollable === 'virtual' ? {
             'height': _this3.vs.containerHeight + 'px'
           } : {}
-        })])])]), footer, pager, clues])];
+        })])]), loader]), footer, pager, clues])];
       } : [h(GridNav, {
         ref: _this3.v3 ? function (el) {
           _this.gridNavRef = el;
@@ -1997,7 +2019,7 @@ var GridVue2 = {
           style: _this3.$props.scrollable === 'virtual' ? {
             'height': _this3.vs.containerHeight + 'px'
           } : {}
-        })])])]), footer, pager, clues];
+        })])]), loader]), footer, pager, clues];
       } : [toolbar, groupingPanel, header, h("div", {
         "class": "k-grid-container",
         role: "presentation",
@@ -2052,7 +2074,7 @@ var GridVue2 = {
         style: _this3.$props.scrollable === 'virtual' ? {
           'height': _this3.vs.containerHeight + 'px'
         } : {}
-      })])])]), footer, pager, clues])])
+      })])]), loader]), footer, pager, clues])])
     );
   }
 };

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

@@ -248,12 +248,12 @@ export interface GridProps {
     /**
      * Defines the custom rendering of the row. Accepts a Vue component, a `render` function, or a slot name.
      */
-    rowRender?: string | ((h: any, defaultRendering: any | null, dafaultSlots: any, props: any, listeners: any) => any);
+    rowRender?: string | boolean | ((h: any, defaultRendering: any | null, dafaultSlots: any, props: any, listeners: any) => any);
     /**
      * Defines the custom rendering of the cell. Accepts a Vue component, a `render` function, or a slot name.
      * ([see example]({% slug groupingaggregates_grid_native %})).
      */
-    cellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | null;
+    cellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | null | boolean;
     /**
      * Defines the custom rendering of the filter cell. Accepts a Vue component, a `render` function, or a slot name.
      */
@@ -262,10 +262,14 @@ export interface GridProps {
      * Defines the custom rendering of the header cell. Accepts a Vue component, a `render` function, or a slot name.
      */
     headerCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
+    /**
+     * Defines if the loader will be shown. Defaults to `false`. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    loader?: boolean | Object | Function | string;
     /**
      * Defines the custom rendering of the pager. Accepts  a slot name, a `render` function, or a Vue component.
      */
-    pager?: Object | Function | string;
+    pager?: Object | Function | string | boolean;
     /**
      * Enables virtualization of the columns. If virtualization is
      *  enabled, the columns outside the view are not rendered.

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: 1653311943,
+    publishDate: 1653912812,
     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/Grid.js

@@ -61,6 +61,8 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
 var kendo_vue_data_tools_1 = require("@progress/kendo-vue-data-tools");
 
+var kendo_vue_indicators_1 = require("@progress/kendo-vue-indicators");
+
 var GridNav_1 = require("./GridNav");
 
 var GridSelectionCell_1 = require("./cells/GridSelectionCell");
@@ -141,8 +143,9 @@ var GridVue2 = {
     sort: Array,
     filterable: Boolean,
     filterOperators: Object,
-    filterCellRender: [String, Function, Object],
-    headerCellRender: [String, Function, Object],
+    filterCellRender: kendo_vue_common_1.templateDefinition,
+    headerCellRender: kendo_vue_common_1.templateDefinition,
+    loader: [String, Function, Object, Boolean],
     filter: Object,
     pageable: [Boolean, Object],
     pageSize: Number,
@@ -151,8 +154,8 @@ var GridVue2 = {
     take: Number,
     expandField: String,
     selectedField: String,
-    cellRender: [String, Function, Object],
-    rowRender: [String, Function, Object],
+    cellRender: kendo_vue_common_1.templateDefinition,
+    rowRender: kendo_vue_common_1.templateDefinition,
     resizable: Boolean,
     reorderable: Boolean,
     group: Array,
@@ -162,9 +165,9 @@ var GridVue2 = {
       type: String,
       default: 'scrollable'
     },
-    pager: [String, Function, Object],
+    pager: kendo_vue_common_1.templateDefinition,
     rowHeight: Number,
-    detail: [String, Function, Object],
+    detail: kendo_vue_common_1.templateDefinition,
     columnMenu: [Boolean, String, Function, Object],
     columnMenuAnimate: {
       type: [Boolean, Object],
@@ -1832,6 +1835,26 @@ var GridVue2 = {
       );
     }
 
+    var loaderTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.loader, kendo_vue_common_1.getListeners.call(this));
+    var defaultLoaderRendering = this.$props.loader && h("div", {
+      "class": "k-loader-container k-loader-container-md k-loader-top"
+    }, [h("div", {
+      "class": "k-loader-container-overlay k-overlay-light"
+    }), h("div", {
+      "class": "k-loader-container-inner"
+    }, [h(kendo_vue_indicators_1.Loader, {
+      size: 'large',
+      attrs: this.v3 ? undefined : {
+        size: 'large',
+        type: 'infinite-spinner'
+      },
+      type: 'infinite-spinner'
+    })])]);
+    var loader = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: loaderTemplate,
+      defaultRendering: defaultLoaderRendering
+    });
     return (// @ts-ignore function children
       h(kendo_vue_data_tools_1.TableKeyboardNavigationProvider, {
         ref: 'navRef',
@@ -1910,7 +1933,7 @@ var GridVue2 = {
             style: _this3.$props.scrollable === 'virtual' ? {
               'height': _this3.vs.containerHeight + 'px'
             } : {}
-          })])])]), footer, pager, clues];
+          })])]), loader]), footer, pager, clues];
         } : [toolbar, groupingPanel, header, h("div", {
           "class": "k-grid-container",
           role: "presentation",
@@ -1965,7 +1988,7 @@ var GridVue2 = {
           style: _this3.$props.scrollable === 'virtual' ? {
             'height': _this3.vs.containerHeight + 'px'
           } : {}
-        })])])]), footer, pager, clues])];
+        })])]), loader]), footer, pager, clues])];
       } : [h(GridNav_1.GridNav, {
         ref: _this3.v3 ? function (el) {
           _this.gridNavRef = el;
@@ -2033,7 +2056,7 @@ var GridVue2 = {
           style: _this3.$props.scrollable === 'virtual' ? {
             'height': _this3.vs.containerHeight + 'px'
           } : {}
-        })])])]), footer, pager, clues];
+        })])]), loader]), footer, pager, clues];
       } : [toolbar, groupingPanel, header, h("div", {
         "class": "k-grid-container",
         role: "presentation",
@@ -2088,7 +2111,7 @@ var GridVue2 = {
         style: _this3.$props.scrollable === 'virtual' ? {
           'height': _this3.vs.containerHeight + 'px'
         } : {}
-      })])])]), footer, pager, clues])])
+      })])]), loader]), footer, pager, clues])])
     );
   }
 };

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

@@ -248,12 +248,12 @@ export interface GridProps {
     /**
      * Defines the custom rendering of the row. Accepts a Vue component, a `render` function, or a slot name.
      */
-    rowRender?: string | ((h: any, defaultRendering: any | null, dafaultSlots: any, props: any, listeners: any) => any);
+    rowRender?: string | boolean | ((h: any, defaultRendering: any | null, dafaultSlots: any, props: any, listeners: any) => any);
     /**
      * Defines the custom rendering of the cell. Accepts a Vue component, a `render` function, or a slot name.
      * ([see example]({% slug groupingaggregates_grid_native %})).
      */
-    cellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | null;
+    cellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | null | boolean;
     /**
      * Defines the custom rendering of the filter cell. Accepts a Vue component, a `render` function, or a slot name.
      */
@@ -262,10 +262,14 @@ export interface GridProps {
      * Defines the custom rendering of the header cell. Accepts a Vue component, a `render` function, or a slot name.
      */
     headerCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
+    /**
+     * Defines if the loader will be shown. Defaults to `false`. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    loader?: boolean | Object | Function | string;
     /**
      * Defines the custom rendering of the pager. Accepts  a slot name, a `render` function, or a Vue component.
      */
-    pager?: Object | Function | string;
+    pager?: Object | Function | string | boolean;
     /**
      * Enables virtualization of the columns. If virtualization is
      *  enabled, the columns outside the view are not rendered.

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: 1653311943,
+    publishDate: 1653912812,
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-grid",
-  "version": "3.3.2-dev.202205231324",
+  "version": "3.3.3-dev.202205301219",
   "description": "Kendo UI for Vue Grid package",
   "repository": {
     "type": "git",
@@ -28,29 +28,31 @@
     "@progress/kendo-vue-data-tools": "^3.2.0",
     "@progress/kendo-vue-dateinputs": "^3.2.0",
     "@progress/kendo-vue-dropdowns": "^3.2.0",
+    "@progress/kendo-vue-indicators": "^3.2.0",
     "@progress/kendo-vue-inputs": "^3.2.0",
     "@progress/kendo-vue-intl": "^3.2.0",
     "@progress/kendo-vue-popup": "^3.2.0",
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-common": "3.3.2-dev.202205231324"
+    "@progress/kendo-vue-common": "3.3.3-dev.202205301219"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.4",
     "@progress/kendo-drawing": "^1.9.3",
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-animation": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-buttons": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-charts": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-data-tools": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-dateinputs": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-dropdowns": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-excel-export": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-inputs": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-intl": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-pdf": "3.3.2-dev.202205231324",
-    "@progress/kendo-vue-popup": "3.3.2-dev.202205231324",
+    "@progress/kendo-vue-animation": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-buttons": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-charts": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-data-tools": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-dateinputs": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-dropdowns": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-excel-export": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-indicators": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-inputs": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-intl": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-pdf": "3.3.3-dev.202205301219",
+    "@progress/kendo-vue-popup": "3.3.3-dev.202205301219",
     "cldr-core": "^34.0.0",
     "cldr-dates-full": "^34.0.0",
     "cldr-numbers-full": "^34.0.0",