@progress/kendo-vue-grid 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/GridNav.d.ts

@@ -0,0 +1,46 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+interface GridNavState {
+}
+/**
+ * @hidden
+ */
+interface GridNavData {
+}
+/**
+ * @hidden
+ */
+export interface GridNavMethods {
+    [key: string]: any;
+    onKeyDown: (event: any) => any;
+    onFocus: (event: any) => any;
+    onNavMount: (event: any) => any;
+    onNavigationAction: (opitons: any) => any;
+}
+/**
+ * @hidden
+ */
+export interface GridNavComputed {
+    [key: string]: any;
+    wrapperClass: object;
+}
+/**
+ * @hidden
+ */
+export interface GridNavAll extends GridNavMethods, GridNavState, GridNavData, GridNavComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare const GridNavVue2: ComponentOptions<Vue2type, DefaultData<GridNavData>, DefaultMethods<GridNavAll>, GridNavComputed, RecordPropsDefinition<{}>>;
+/**
+ * @hidden
+ */
+declare const GridNav: DefineComponent<{}, any, GridNavData, GridNavComputed, GridNavMethods, {}, {}, {}, string, {}, {}, {}>;
+export { GridNav, GridNavVue2 };

package/dist/esm/GridNav.js

@@ -0,0 +1,112 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots, noop } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var GridNavVue2 = {
+  name: 'KendoGridNav',
+  props: {
+    currentData: Array
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  inject: {
+    onNavKeyDown: {
+      default: noop
+    },
+    onNavFocus: {
+      default: noop
+    },
+    onNavMount: {
+      default: noop
+    },
+    handleDispatchFocus: {
+      default: noop
+    },
+    kbContext: {
+      default: null
+    },
+    navigation: {
+      default: null
+    }
+  },
+  mounted: function mounted() {
+    this.onNavMount({
+      scope: this.$el || undefined
+    });
+  },
+  updated: function updated() {
+    this.onNavMount({
+      scope: this.$el || undefined
+    });
+  },
+  methods: {
+    onKeyDown: function onKeyDown(event) {
+      this.onNavKeyDown(event, {
+        navigation: this.navigation,
+        kbContext: this.kbContext,
+        onNavigationAction: this.onNavigationAction
+      }); //    const {mode, cell} = getSelectionOptions(this.$props.selectable);
+
+      this.$emit('keydown', {
+        dataItems: this.getLeafDataItems(),
+        //     mode,
+        //     cell,
+        componentId: this._gridId,
+        selectedField: this.$props.selectedField,
+        event: event
+      }); // as GridNavigationActionEvent
+    },
+    onFocus: function onFocus(event) {
+      this.onNavFocus(event, {
+        kbContext: this.kbContext
+      });
+    },
+    onNavigationAction: function onNavigationAction(options) {
+      this.$emit('navigationaction', {
+        focusElement: options.focusElement,
+        event: options.event
+      }); // as GridNavigationActionEvent
+    },
+    getLeafDataItems: function getLeafDataItems() {
+      return this.$props.currentData.filter(function (item) {
+        return item.rowType === 'data';
+      }).map(function (item) {
+        return item.dataItem;
+      });
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    return h("div", {
+      onKeydown: this.onKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDown,
+        "focusin": this.onFocus
+      },
+      onFocusin: this.onFocus,
+      "data-keyboardnavscope": true,
+      attrs: this.v3 ? undefined : {
+        "data-keyboardnavscope": true
+      }
+    }, [defaultSlots]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var GridNav = GridNavVue2;
+export { GridNav, GridNavVue2 };

package/dist/esm/GridNoRecords.d.ts

@@ -0,0 +1,51 @@
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+/**
+ * @hidden
+ */
+declare let GridNoRecordsVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
+/**
+ * Represents the GridNoRecords component which is rendered
+ * when the `data` property of the Grid is empty or `null`.
+ *
+ * @example
+ * ```tsx-no-run
+ *   <div id="app">
+ *       <Grid
+ *           :data-items="products"
+ *           :columns="columns">
+ *       <grid-norecords>
+ *        There is no data available custom
+ *        </grid-norecords>
+ *       </Grid>
+ *   </div>
+ * <script>
+ *       Vue.component('Grid', Grid);
+ *       Vue.component('grid-norecords', GridNoRecords);
+ *       new Vue({
+ *           el: '#app',
+ *           data: function () {
+ *               return {
+ *                  products: [
+ *                    { 'foo': 'A1', 'bar': 'B1' },
+ *                       { 'foo': 'A2', 'bar': 'B2' },
+ *                       { 'foo': 'A3', 'bar': 'B2' }
+ *                   ],
+ *                   columns: [
+ *                       { field: 'foo'},
+ *                       { field: 'bar'}
+ *                   ]
+ *               };
+ *           }
+ *       });
+ *   </script>
+ * ```
+ */
+/**
+ * Represents the default `GridNoRecords` component.
+ */
+declare const GridNoRecords: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { GridNoRecords, GridNoRecordsVue2 };

package/dist/esm/GridNoRecords.js

@@ -0,0 +1,83 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, noRecords } from './messages.js';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var GridNoRecordsVue2 = {
+  name: 'GridNoRecords',
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var localizationService = provideLocalizationService(this);
+    var noRecordsMessage = localizationService.toLanguageString(noRecords, messages[noRecords]);
+    return defaultSlot ? h("div", [defaultSlot]) // @ts-ignore
+    : this.v3 ? noRecordsMessage : this._v(noRecordsMessage);
+  }
+};
+/**
+ * Represents the GridNoRecords component which is rendered
+ * when the `data` property of the Grid is empty or `null`.
+ *
+ * @example
+ * ```tsx-no-run
+ *   <div id="app">
+ *       <Grid
+ *           :data-items="products"
+ *           :columns="columns">
+ *       <grid-norecords>
+ *        There is no data available custom
+ *        </grid-norecords>
+ *       </Grid>
+ *   </div>
+ * <script>
+ *       Vue.component('Grid', Grid);
+ *       Vue.component('grid-norecords', GridNoRecords);
+ *       new Vue({
+ *           el: '#app',
+ *           data: function () {
+ *               return {
+ *                  products: [
+ *                    { 'foo': 'A1', 'bar': 'B1' },
+ *                       { 'foo': 'A2', 'bar': 'B2' },
+ *                       { 'foo': 'A3', 'bar': 'B2' }
+ *                   ],
+ *                   columns: [
+ *                       { field: 'foo'},
+ *                       { field: 'bar'}
+ *                   ]
+ *               };
+ *           }
+ *       });
+ *   </script>
+ * ```
+ */
+
+/**
+ * Represents the default `GridNoRecords` component.
+ */
+
+var GridNoRecords = GridNoRecordsVue2;
+export { GridNoRecords, GridNoRecordsVue2 };

package/dist/esm/GridToolbar.d.ts

@@ -0,0 +1,58 @@
+import { GridToolbarProps } from './interfaces/GridToolbarProps';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+/**
+ * @hidden
+ */
+declare let GridToolbarVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GridToolbarProps>>;
+/**
+ * Represents the GridToolbar component.
+ *
+ * ```tsx-no-run
+ *   <div id="app">
+ *       <Grid
+ *           :data-items="products"
+ *           :columns="columns">
+ *       <grid-toolbar >
+ *           <button title="Add new" class="k-button k-primary" @click='insert' >
+ *                   Add new
+ *           </button>
+ *           <button v-if="hasItemsInEdit"
+ *               title="Cancel current changes"
+ *               class="k-button"
+ *               @click="cancelChanges">
+ *               Cancel current changes
+ *           </button>
+ *           </grid-toolbar>
+ *       </Grid>
+ *   </div>
+ * <script>
+ *       Vue.component('Grid', Grid);
+ *       Vue.component('grid-toolbar', GridToolbar);
+ *       new Vue({
+ *           el: '#app',
+ *           data: function () {
+ *               return {
+ *                  products: [
+ *                    { 'foo': 'A1', 'bar': 'B1' },
+ *                       { 'foo': 'A2', 'bar': 'B2' },
+ *                       { 'foo': 'A3', 'bar': 'B2' }
+ *                   ],
+ *                   columns: [
+ *                       { field: 'foo'},
+ *                       { field: 'bar'}
+ *                   ]
+ *               };
+ *           }
+ *       });
+ *   </script>
+ * ```
+ *
+ *
+ * ### props <span class='code'>[GridToolbarProps]({% slug api_grid_toolbarprops %})</span>
+ */
+declare const GridToolbar: DefineComponent<GridToolbarProps, any, {}, {}, {}, {}, {}, {}, string, GridToolbarProps, GridToolbarProps, {}>;
+export { GridToolbar, GridToolbarVue2 };

package/dist/esm/GridToolbar.js

@@ -0,0 +1,77 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var GridToolbarVue2 = {
+  name: 'GridToolbar',
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    return h("div", {
+      "class": "k-toolbar k-grid-toolbar"
+    }, [defaultSlot]);
+  }
+};
+/**
+ * Represents the GridToolbar component.
+ *
+ * ```tsx-no-run
+ *   <div id="app">
+ *       <Grid
+ *           :data-items="products"
+ *           :columns="columns">
+ *       <grid-toolbar >
+ *           <button title="Add new" class="k-button k-primary" @click='insert' >
+ *                   Add new
+ *           </button>
+ *           <button v-if="hasItemsInEdit"
+ *               title="Cancel current changes"
+ *               class="k-button"
+ *               @click="cancelChanges">
+ *               Cancel current changes
+ *           </button>
+ *           </grid-toolbar>
+ *       </Grid>
+ *   </div>
+ * <script>
+ *       Vue.component('Grid', Grid);
+ *       Vue.component('grid-toolbar', GridToolbar);
+ *       new Vue({
+ *           el: '#app',
+ *           data: function () {
+ *               return {
+ *                  products: [
+ *                    { 'foo': 'A1', 'bar': 'B1' },
+ *                       { 'foo': 'A2', 'bar': 'B2' },
+ *                       { 'foo': 'A3', 'bar': 'B2' }
+ *                   ],
+ *                   columns: [
+ *                       { field: 'foo'},
+ *                       { field: 'bar'}
+ *                   ]
+ *               };
+ *           }
+ *       });
+ *   </script>
+ * ```
+ *
+ *
+ * ### props <span class='code'>[GridToolbarProps]({% slug api_grid_toolbarprops %})</span>
+ */
+
+var GridToolbar = GridToolbarVue2;
+export { GridToolbar, GridToolbarVue2 };

package/dist/esm/ScrollMode.d.ts

@@ -0,0 +1 @@
+export declare type ScrollMode = 'none' | 'scrollable' | 'virtual';

package/dist/esm/ScrollMode.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/VirtualScroll.d.ts

@@ -0,0 +1,41 @@
+import { Page } from '@progress/kendo-vue-data-tools';
+/**
+ * @hidden
+ */
+export declare class VirtualScroll {
+    container: any;
+    table: any;
+    containerHeight: number;
+    topCacheCount: number;
+    attendedSkip: number;
+    propsSkip: number;
+    total: number;
+    scrollableVirtual: boolean;
+    realSkip: number;
+    pageSize: number;
+    PageChange: (page: Page, event: any) => void;
+    tableBody: any;
+    heightContainer: any;
+    fixedScroll: boolean;
+    askedSkip: number | undefined;
+    private prevScrollPos;
+    private syncTimeout;
+    private tableTranslate;
+    private scrollSyncing;
+    constructor(cached: boolean, topCacheCount: number);
+    /**
+     * @return - The row heights in an array.
+     */
+    get rowHeights(): Array<{
+        line: number;
+        acc: number;
+    }>;
+    changePage(skip: number, e: any): void;
+    translate(dY: number): void;
+    syncScroll(): void;
+    reset(): void;
+    localScrollUp(e: any): void;
+    localScrollDown(e: any): void;
+    scrollNonStrict(e: any): void;
+    scrollHandler(e: any): void;
+}

package/dist/esm/VirtualScroll.js

@@ -0,0 +1,217 @@
+/**
+ * @hidden
+ */
+var VirtualScroll = /** @class */ (function () {
+    function VirtualScroll(cached, topCacheCount) {
+        this.containerHeight = 0;
+        this.topCacheCount = 0; // 4;
+        this.attendedSkip = 0; // -4;
+        this.propsSkip = 0;
+        this.total = 0;
+        this.scrollableVirtual = false;
+        this.realSkip = 0;
+        this.pageSize = 0;
+        this.heightContainer = null;
+        this.fixedScroll = false;
+        this.askedSkip = undefined;
+        this.prevScrollPos = 0;
+        this.tableTranslate = 0;
+        this.scrollSyncing = false;
+        if (cached) {
+            this.topCacheCount = topCacheCount;
+            this.attendedSkip = -this.topCacheCount;
+        }
+        this.scrollHandler = this.scrollHandler.bind(this);
+    }
+    Object.defineProperty(VirtualScroll.prototype, "rowHeights", {
+        /**
+         * @return - The row heights in an array.
+         */
+        get: function () {
+            var result = [];
+            var allRows = this.tableBody && this.tableBody.children || [];
+            var accumulate = 0;
+            for (var i = 0; i < allRows.length; i++) {
+                if (allRows[i].className.indexOf('k-grouping-row') > -1) {
+                    accumulate += allRows[i].scrollHeight;
+                    continue;
+                }
+                if (allRows[i].className.indexOf('k-detail-row') > -1) {
+                    result[result.length - 1].line += allRows[i].scrollHeight;
+                }
+                else {
+                    result.push({
+                        line: allRows[i].scrollHeight,
+                        acc: accumulate
+                    });
+                    accumulate = 0;
+                }
+            }
+            if (allRows.length && !result.length) {
+                result.push({
+                    line: allRows[0].scrollHeight,
+                    acc: accumulate
+                });
+            }
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    VirtualScroll.prototype.changePage = function (skip, e) {
+        this.attendedSkip = skip - this.topCacheCount;
+        this.PageChange({
+            skip: Math.max(0, skip - this.topCacheCount),
+            take: this.pageSize
+        }, e);
+    };
+    VirtualScroll.prototype.translate = function (dY) {
+        this.tableTranslate = dY;
+        if (this.scrollableVirtual && this.table) {
+            this.table.style.transform = 'translateY(' + dY + 'px)';
+        }
+    };
+    VirtualScroll.prototype.syncScroll = function () {
+        if (!this.scrollableVirtual || !this.container) {
+            return;
+        }
+        this.syncTimeout = null;
+        var scrollTop = this.container.scrollTop;
+        var containerHeight = this.containerHeight; // = this.container.scrollHeight;
+        var rowHeights = this.rowHeights;
+        var percentage = (scrollTop - this.tableTranslate) / rowHeights[0].line;
+        var targetFloorScrollPosition = Math.floor((containerHeight) * (this.propsSkip + percentage) / this.total);
+        if (this.container.scrollTop !== (this.prevScrollPos = targetFloorScrollPosition)) {
+            this.scrollSyncing = true;
+            this.container.scrollTop = (this.prevScrollPos = targetFloorScrollPosition);
+        }
+        this.translate(this.tableTranslate + targetFloorScrollPosition - scrollTop);
+    };
+    VirtualScroll.prototype.reset = function () {
+        this.scrollSyncing = true;
+        if (this.fixedScroll) {
+            return;
+        }
+        if (this.container) {
+            this.container.scrollTop = 0;
+        }
+        this.translate(0);
+    };
+    VirtualScroll.prototype.localScrollUp = function (e) {
+        if (!this.container) {
+            return;
+        }
+        var heights = this.rowHeights;
+        var scrollTop = this.container.scrollTop;
+        var targetTranslate = this.tableTranslate;
+        var rowsCount = 0;
+        var additionalOnTop = scrollTop - targetTranslate;
+        if (additionalOnTop > 0) {
+            return;
+        }
+        while ((rowsCount < this.topCacheCount + this.attendedSkip - this.realSkip)
+            && this.propsSkip - rowsCount > 0 &&
+            !(targetTranslate + (heights[heights.length - 1 - rowsCount].line + heights[heights.length - 1 - rowsCount].acc) + additionalOnTop <= scrollTop)) {
+            targetTranslate -= heights[heights.length - 1 - rowsCount].line +
+                heights[heights.length - 1 - rowsCount].acc;
+            rowsCount++;
+        }
+        if (rowsCount === 0 && this.topCacheCount === 0 && this.attendedSkip > 0) {
+            // allows local scrolling up, when top caching is disabled
+            // for variable heights 'topCacheCount' should be atleast 1 to avoid flickering
+            targetTranslate = Math.max(targetTranslate - heights[0].line, 0);
+            rowsCount = 1;
+        }
+        if (this.propsSkip - rowsCount <= 0 && targetTranslate > scrollTop) {
+            this.translate(0);
+            this.changePage(0, e);
+            this.container.scrollTop = 0;
+            return;
+        }
+        if (targetTranslate > scrollTop) {
+            targetTranslate = scrollTop;
+            // need to handle these cases
+            // if the item height is not available:
+            //    floor the translate to beginning of the item in absolute value
+        }
+        if (targetTranslate !== this.tableTranslate) {
+            this.translate(targetTranslate);
+            this.changePage(this.propsSkip - rowsCount, e);
+        }
+    };
+    VirtualScroll.prototype.localScrollDown = function (e) {
+        if (!this.container) {
+            return;
+        }
+        var heights = this.rowHeights;
+        var scrollTop = this.container.scrollTop;
+        var targetTranslate = this.tableTranslate;
+        var rowsCount = 0;
+        while (rowsCount < heights.length - this.topCacheCount &&
+            !(targetTranslate + heights[rowsCount].line + heights[rowsCount].acc > scrollTop)) {
+            targetTranslate += heights[rowsCount].line + heights[rowsCount].acc;
+            rowsCount++;
+        }
+        if (rowsCount >= heights.length - this.topCacheCount && this.propsSkip + rowsCount >= this.total) {
+            this.translate(targetTranslate);
+            this.changePage(this.total - 1, e);
+        }
+        else if (targetTranslate !== this.tableTranslate) {
+            this.translate(targetTranslate);
+            this.changePage(this.propsSkip + rowsCount, e);
+        }
+    };
+    VirtualScroll.prototype.scrollNonStrict = function (e) {
+        var floatRowIndex = this.total * this.prevScrollPos / (this.containerHeight);
+        var rowIndex = Math.floor(floatRowIndex);
+        if (rowIndex >= this.total) {
+            rowIndex = this.total - 1;
+        }
+        var rowpercentage = Math.min(floatRowIndex - rowIndex, 1);
+        var microAdjust = 0;
+        var rowIndexOffset = rowIndex - this.propsSkip;
+        var heights = this.rowHeights;
+        if (rowIndexOffset >= 0 && rowIndexOffset <= 1) {
+            microAdjust = -((heights[0].line + heights[0].acc) * rowpercentage);
+        }
+        else if (rowIndexOffset === -1) {
+            microAdjust = -((heights[heights.length - 1].line + heights[heights.length - 1].acc) * rowpercentage);
+        }
+        this.translate(microAdjust + this.containerHeight * floatRowIndex / this.total);
+        this.changePage(rowIndex, e);
+    };
+    VirtualScroll.prototype.scrollHandler = function (e) {
+        if (!this.scrollableVirtual) {
+            return;
+        }
+        if (this.scrollSyncing || !this.container || !this.table) {
+            this.scrollSyncing = false;
+            return;
+        }
+        var grid = this;
+        clearTimeout(this.syncTimeout);
+        this.syncTimeout = window.setTimeout(function () { grid.syncScroll(); }, 200);
+        var scrollTop = this.container.scrollTop;
+        var prev = this.prevScrollPos;
+        this.prevScrollPos = scrollTop;
+        if (this.askedSkip !== undefined) {
+            this.translate(this.containerHeight * this.askedSkip / this.total);
+            this.changePage(this.askedSkip, e);
+            this.prevScrollPos = scrollTop;
+            this.askedSkip = undefined;
+            return;
+        }
+        if (scrollTop - prev < 0 && scrollTop > this.tableTranslate - this.table.scrollHeight / 10) {
+            this.localScrollUp(e);
+        }
+        else if (scrollTop - prev > 0 && scrollTop < this.tableTranslate + this.table.scrollHeight * 2 / 3) {
+            this.localScrollDown(e);
+        }
+        else {
+            this.scrollNonStrict(e);
+        }
+        this.prevScrollPos = scrollTop;
+    };
+    return VirtualScroll;
+}());
+export { VirtualScroll };