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

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

@@ -0,0 +1,311 @@
+import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
+import { GridGroupableSettings } from './GridGroupableSettings';
+import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridCancelEvent, GridSaveEvent, GridRemoveEvent, GridEditEvent, GridNavigationActionEvent, GridKeyDownEvent } from './events';
+import { GridCellProps } from './GridCellProps';
+import { GridSortSettings } from './GridSortSettings';
+import { GridPagerSettings } from '@progress/kendo-vue-data-tools';
+import { GridColumnProps } from '../interfaces/GridColumnProps';
+import { GridFilterOperators } from './GridFilterOperators';
+import { PopupAnimation } from '@progress/kendo-vue-popup';
+/**
+ * Represents the props of the [native Vue Grid component by Kendo UI]({% slug overview_grid %}).
+ */
+export interface GridProps {
+    /**
+     * Sets the Grid row key prop to the value of this field in the dataItem.
+     * If not set, the dataItem index will be used for the row key, which
+     * might lead to row not updated during paging or scrolling.
+     */
+    dataItemKey?: string;
+    /**
+     * When set to `true` it sets the alternating of the rows per groups so each group could start
+     * with the same color row. There is a known limitation when virtual scrolling with groups and
+     * alternatePerGroup set to `true`- there may be a slight flicker of the alternating rows in
+     * groups with larger amount of items - in this case we would rather recommend
+     * using rowTemplates and set the row alternating based on the data or dataItems.
+     */
+    alternatePerGroup?: boolean;
+    /**
+     * Sets the properties of the columns that are used by the Grid.
+     */
+    columns?: GridColumnProps[] | null;
+    /**
+     * Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging,
+     * the `data` option has to contain only the items for the current page.
+     */
+    dataItems?: any[] | DataResult | null;
+    /**
+     * Enables the sorting for the columns with their `field` option set
+     * ([see example]({% slug sorting_grid %})).
+     */
+    sortable?: GridSortSettings;
+    /**
+     * Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})).
+     * You have to handle the event yourself and sort the data.
+     */
+    onSortchange?: (event: GridSortChangeEvent) => void;
+    /**
+     * The descriptors by which the data is sorted.
+     * Applies the sorting styles and buttons to the affected columns.
+     */
+    sort?: SortDescriptor[];
+    /**
+     * Enables the filtering of the columns with their `field` option set
+     * ([more information and examples]({% slug filtering_grid %})).
+     */
+    filterable?: boolean;
+    /**
+     * The descriptor by which the data is filtered
+     * ([more information and examples]({% slug filtering_grid %})).
+     * Affects the values and buttons in the `FilterRow` of the Grid.
+     */
+    filter?: CompositeFilterDescriptor;
+    /**
+     * The filter operators for the Grid filters.
+     */
+    filterOperators?: GridFilterOperators;
+    /**
+     * Fires when the Grid filter is modified through the UI
+     * ([more information and examples]({% slug filtering_grid %})).
+     * You have to handle the event yourself and filter the data.
+     */
+    onFilterchange?: (event: GridFilterChangeEvent) => void;
+    /**
+     * Defines if the column menu will be shown for the column.
+     * Accepts Boolean, a Vue component, a `render` function, or a slot name
+     */
+    columnMenu?: boolean | any;
+    /**
+     * Controls the ColumnMenu animation. By default, the opening and closing animations are enabled.
+     */
+    columnMenuAnimate?: boolean | PopupAnimation;
+    /**
+     * The descriptors by which the data will be grouped
+     * ([more information and examples]({% slug groupingbasics_grid %})).
+     */
+    group?: GroupDescriptor[];
+    /**
+     * Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data
+     * ([more information and examples]({% slug groupingbasics_grid %})).
+     */
+    onGroupchange?: (event: GridGroupChangeEvent) => void;
+    /**
+     * Configures the pager of the Grid ([see example]({% slug paging_grid %})).
+     *
+     * The available options are:
+     * - `buttonCount: Number`—Sets the maximum numeric buttons count before the buttons are collapsed.
+     * - `info: Boolean`—Toggles the information about the current page and the total number of records.
+     * - `type: PagerType`—Accepts the `numeric` (buttons with numbers)
+     * and `input` (input for typing the page number) values.
+     * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size.
+     * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons.
+     */
+    pageable?: GridPagerSettings | any;
+    /**
+     * Defines the page size that is used by the Grid pager
+     * ([see example]({% slug paging_grid %})). Required by the paging functionality.
+     */
+    pageSize?: number;
+    /**
+     * Alias of the `pageSize` property. If `take` is set, `pageSize` will be ignored.
+     */
+    take?: number;
+    /**
+     * Fires when the page of the Grid is changed ([see example]({% slug paging_grid %})).
+     * You have to handle the event yourself and page the data.
+     */
+    onPagechange?: (event: GridPageChangeEvent) => void;
+    /**
+     * Defines the total number of data items in all pages
+     * ([see example]({% slug paging_grid %})). Required by the paging functionality.
+     */
+    total?: number;
+    /**
+     * Defines the number of records that will be skipped by the pager
+     * ([see example]({% slug paging_grid %})). Required by the paging functionality.
+     */
+    skip?: number;
+    /**
+     * Fires when the user tries to expand or collapse a row.
+     */
+    onExpandchange?: (event: GridExpandChangeEvent) => void;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation
+     * of the expanded state of the item ([see example]({% slug detailrow_grid %}).
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation
+     * of the selected state of the item ([see example]({% slug selection_grid %})).
+     */
+    selectedField?: string;
+    /**
+     * Fires when the user tries to select or deselect a row
+     * ([see example]({% slug selection_grid %})).
+     */
+    onSelectionchange?: (event: GridSelectionChangeEvent) => void;
+    /**
+     * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
+     * ([see example]({% slug selection_grid %})).
+     */
+    onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
+    /**
+     * Fires when the user clicks a row.
+     */
+    onRowclick?: (event: GridRowClickEvent) => void;
+    /**
+     * Fires when the user double clicks a row.
+     */
+    onRowdblclick?: (event: GridRowClickEvent) => void;
+    /**
+     * Fires when the user clicks a cell.
+     */
+    onCellclick?: (event: any) => void;
+    /**
+     * Fires when Grid is scrolled.
+     */
+    onScroll?: (event: any) => void;
+    /**
+     * Fires when the user triggers an edit operation from a cell.
+     */
+    onEdit?: (event: GridEditEvent) => void;
+    /**
+     * Fires when the user triggers a removal operation from a cell.
+     */
+    onRemove?: (event: GridRemoveEvent) => void;
+    /**
+     * Fires when the user triggers a saving operation from a cell.
+     */
+    onSave?: (event: GridSaveEvent) => void;
+    /**
+     * Fires when the user triggers a canceling operation from a cell.
+     */
+    onCancel?: (event: GridCancelEvent) => void;
+    /**
+     * Fires when the user changes the values of the item.
+     * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
+     * ([more information and examples]({% slug editing_inline_grid %})).
+     */
+    onItemchange?: (event: GridItemChangeEvent) => void;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the edit state of the current
+     * item ([more information and examples]({% slug editing_inline_grid %})).
+     */
+    editField?: string;
+    /**
+     * Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmmodes_grid %}).
+     *
+     * The available options are:
+     *  - `none`&mdash;Renders no scrollbar.
+     *  - `scrollable`&mdash;This is the default scroll mode. It requires the setting of the `height` option.
+     *  - `virtual`&mdash;Displays no pager and renders a portion of the data (optimized rendering)
+     * while the user is scrolling the content.
+     */
+    scrollable?: string;
+    /**
+     * Defines the row height and forces an equal height to all rows
+     * ([see example]({% slug scrollmmodes_grid %})).
+     */
+    rowHeight?: number;
+    /**
+     * Specifies a custom rendering that will be cloned and rendered inside the detail rows
+     * of the currently expanded items ([see example]({% slug master_detail_grid %}).
+     * Accepts a Vue component, a `render` function, or a slot name.
+     * An item will be rendered as expanded if the value of its `expandField` is `true`.
+     */
+    detail?: null | any;
+    /**
+     * Represents the `style` HTML attribute.
+     */
+    style?: any;
+    /**
+     * Fires when the data state of the Grid is changed.
+     */
+    onDatastatechange?: (event: GridDataStateChangeEvent) => void;
+    /**
+     * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their
+     * header cells ([see example]({% slug resizing_columns_grid %}).
+     */
+    resizable?: boolean;
+    /**
+     * If set to `true`, the user can reorder columns by dragging their
+     * header cells ([see example]({% slug reordering_columns_grid %}).
+     */
+    reorderable?: boolean;
+    /**
+     * Determines if grouping by dragging and dropping the column headers is allowed
+     * ([more information and examples]({% slug groupingbasics_grid %})).
+     */
+    groupable?: GridGroupableSettings | boolean;
+    /**
+     * Fires when a column is resized
+     */
+    onColumnresize?: (event: GridColumnResizeEvent) => void;
+    /**
+     * Fires when columns are reordered.
+     */
+    onColumnreorder?: (event: GridColumnReorderEvent) => void;
+    /**
+     * Defines the custom rendering of the row. Accepts a Vue component, a `render` function, or a slot name.
+     */
+    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 %})).
+     */
+    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.
+     */
+    filterCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
+    /**
+     * 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 | boolean;
+    /**
+     * Enables virtualization of the columns. If virtualization is
+     *  enabled, the columns outside the view are not rendered.
+     */
+    columnVirtualization?: boolean;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
+     * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
+     */
+    navigatable?: boolean;
+    /**
+     * Passes the number of cached top items needed for the grouping virtualization scenario. Defaults to 4.
+     */
+    topCacheCount?: Number;
+    /**
+     * Passes the calculated height of all the items in the Grid grouped hierarchy.
+     */
+    totalGroupedHeight?: Number;
+    /**
+     * Passes the collection of all grouped items that is needed for the virtualization scenario.
+     */
+    allGroupedItems?: DataResult | null;
+    /**
+     * Passes the collection of all collapsed groups for every grouped level.
+     */
+    collapsedGroups?: any[][];
+    /**
+     * Specifies the name of the field which will provide a unique for every item identifier.
+     */
+    uniqueField?: string;
+    /**
+     * Fires when Grid keyboard navigation position is changed.
+     */
+    onNavigationaction?: (event: GridNavigationActionEvent) => void;
+    /**
+     * Fires when the user press keyboard key.
+     */
+    onKeydown?: (event: GridKeyDownEvent) => void;
+}

package/dist/esm/interfaces/GridProps.js

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

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

@@ -0,0 +1,55 @@
+/**
+ * The props that the Grid passes to the GridRow component when creating it.
+ * Accessible during the `rowRender` callback of the Grid.
+ */
+/**
+ * @hidden
+ */
+export interface GridRowProps {
+    /**
+     * The 'key' prop that may be applied to the row.
+     */
+    key?: number;
+    /**
+     * The `data` object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     * Indicates whether the row is an alternating row.
+     */
+    isAltRow: boolean;
+    /**
+     * Indicates if the row is hidden. The hidden row is rendered above the
+     * visible area of the Grid. Occurs when the Grid uses virtualization and
+     * the row is on the current page. When `rowHeight` is set, `isHidden` is always `true`.
+     */
+    isHidden: boolean;
+    /**
+     * The event that is fired when the row is clicked.
+     */
+    onClick: any;
+    /**
+     * The name of the field which will provide a Boolean representation of the selected state of the item.
+     */
+    selectedField?: string;
+    /**
+     * The row height. Configuring `rowHeight` sets the height to the height of the current Grid row.
+     */
+    rowHeight?: number;
+    /**
+     * The type of the row.
+     */
+    rowType: string;
+    /**
+     * The method for rendering the cell.
+     */
+    render?: any;
+    /**
+     * @hidden
+     */
+    ariaRowIndex?: Number;
+    /**
+     * @hidden
+     */
+    dataIndex?: Number;
+}

package/dist/esm/interfaces/GridRowProps.js

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

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

@@ -0,0 +1,9 @@
+/**
+ * The type of the GridRow component.
+ *
+ * The available values are:
+ * - `groupHeader`—The row is a group header.
+ * - `groupFooter`—The row is a group footer.
+ * - `data`—The row corresponds to an item from the `data` collection which is passed to the Grid.
+ */
+export declare type GridRowType = 'groupFooter' | 'groupHeader' | 'data';

package/dist/esm/interfaces/GridRowType.js

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

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

@@ -0,0 +1,26 @@
+/**
+ * The settings for sorting the Grid columns.
+ */
+export declare type GridColumnSortSettings = boolean | {
+    /**
+     * Enables the removal of the column sorting functionality.
+     */
+    allowUnsort?: boolean;
+};
+/**
+ * The settings for sorting the Grid data.
+ */
+export declare type GridSortSettings = boolean | GridColumnSortSettings & {
+    /**
+     * The sort mode of the Grid.
+     *
+     * The available modes are:
+     * - `single`
+     * - `multiple`
+     */
+    mode?: 'single' | 'multiple';
+};
+/**
+ * @hidden
+ */
+export declare const normalize: (...settings: (GridSortSettings | GridColumnSortSettings)[]) => any;

package/dist/esm/interfaces/GridSortSettings.js

@@ -0,0 +1,20 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/**
+ * @hidden
+ */
+export var normalize = function () {
+    var _a;
+    var settings = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        settings[_i] = arguments[_i];
+    }
+    return (_a = Object).assign.apply(_a, __spreadArray([{ allowUnsort: true, mode: 'single' }], settings, false));
+};

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

@@ -0,0 +1,9 @@
+/**
+ * The props of the GridToolbarProps component.
+ */
+export interface GridToolbarProps {
+    /**
+     * The Vue slot elements that will be rendered inside the toolbar of the Grid.
+     */
+    children?: any;
+}

package/dist/esm/interfaces/GridToolbarProps.js

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

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

@@ -0,0 +1,248 @@
+import { SortDescriptor, CompositeFilterDescriptor, GroupDescriptor, State } from '@progress/kendo-data-query';
+import { GridColumnProps } from './GridColumnProps';
+/**
+ * Represents the base event object of the Grid.
+ */
+/**
+ * @hidden
+ */
+export interface GridEvent {
+    /**
+     * An event target.
+     */
+    target?: any;
+    /**
+     * A specific native DOM event which is fetched by Vue.
+     */
+    event?: any;
+}
+/**
+ * Represents the object of the `onPageChange` event.
+ */
+export interface GridPageChangeEvent extends GridEvent {
+    page: any;
+    /**
+     * A specific native DOM event which is fetched by Vue.
+     */
+    event: any;
+}
+/**
+ * The returned type of the `onDataStateChange` event.
+ */
+export interface GridDataStateChangeEvent extends GridEvent {
+    /**
+     * The state of the Grid based on the user action.
+     */
+    data: State;
+}
+/**
+ * Represents the object of the `onSortChange` event.
+ */
+export interface GridSortChangeEvent extends GridEvent {
+    /**
+     * The new `SortDescriptor` based on the user action.
+     */
+    sort: SortDescriptor[];
+}
+/**
+ * Represents the object of the `onFilterChange` event.
+ */
+export interface GridFilterChangeEvent extends GridEvent {
+    /**
+     * The new `CompositeFilterDescriptor` based on the user action.
+     */
+    filter: CompositeFilterDescriptor;
+}
+/**
+ * Represents the object of the `onGroupChange` event.
+ */
+export interface GridGroupChangeEvent extends GridEvent {
+    /**
+     * An array of `GroupDescriptor` based on the user action.
+     */
+    group: GroupDescriptor[];
+}
+/**
+ * Represents the object of the `onExpandChange` event.
+ */
+export interface GridExpandChangeEvent extends GridEvent {
+    /**
+     * The array with collapsed groups.
+     */
+    collapsed?: string[];
+    /**
+     * The data item that is expanded or collapsed.
+     */
+    dataItem: any;
+    /**
+     * The available values are:
+     * - `true`—If the data item is expanded.
+     * - `false`—If the data item is collapsed.
+     */
+    value: boolean;
+}
+/**
+ * Represents the object of the `onSelectionChange` event.
+ */
+export interface GridSelectionChangeEvent extends GridEvent {
+    /**
+     * The data item which was selected or deselected by the user.
+     */
+    dataItem: any;
+}
+/**
+ * Represents the object of the `onItemChange` event.
+ */
+export interface GridItemChangeEvent extends GridEvent {
+    /**
+     * The data object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     * The field to which the row is bound.
+     */
+    field?: string;
+    /**
+     * The value of the item.
+     */
+    value: any;
+}
+/**
+ * Represents the object of the `onHeaderSelectionChange` event.
+ */
+export interface GridHeaderSelectionChangeEvent extends GridEvent {
+    /**
+     * The field of the column in which the cell is located.
+     */
+    field?: string;
+}
+/**
+ * Represents the object of the `GridKeyDownEvent` Grid event.
+ */
+export interface GridKeyDownEvent extends GridEvent {
+    /**
+     * The current Grid leaf data items.
+     */
+    dataItems: any[];
+    /**
+     * Grid selection mode.
+     */
+    mode: 'single' | 'multiple';
+    /**
+     * Indicates if cell selection mode is enabled.
+     */
+    cell: boolean;
+    /**
+     * The `selectedField` prop of the Grid.
+     */
+    selectedField: string;
+    /**
+     * The component unique identifier.
+     */
+    componentId: string;
+}
+/**
+ * Represents the object of the `GridNavigationActionEvent` Grid event.
+ */
+export interface GridNavigationActionEvent extends GridEvent {
+    /**
+     * The focused element.
+     */
+    focusElement: any;
+}
+/**
+ * Represents the object of the `onRowClick` event.
+ */
+export interface GridRowClickEvent extends GridEvent {
+    /**
+     * The item from the `data` property of the Grid which corresponds to the row that is clicked by the user.
+     */
+    dataItem: any;
+}
+/**
+ * Represents the object of the `cancel` event.
+ */
+export interface GridCancelEvent {
+    /**
+     * The item from the `data` property of the Grid that corresponds to the item that is canceled by the user.
+     */
+    dataItem: any;
+}
+/**
+ * Represents the object of the `edit` event.
+ */
+export interface GridEditEvent {
+    /**
+     * The item from the `data` property of the Grid that corresponds to the item that is edited by the user.
+     */
+    dataItem: any;
+}
+/**
+ * Represents the object of the `remove` event.
+ */
+export interface GridRemoveEvent {
+    /**
+     * The item from the `data` property of the Grid that corresponds to the item that is removed by the user.
+     */
+    dataItem: any;
+}
+/**
+ * Represents the object of the `save` event.
+ */
+export interface GridSaveEvent {
+    /**
+     * The item from the `data` property of the Grid that corresponds to the item that is saved by the user.
+     */
+    dataItem: any;
+}
+/**
+ * Represents the object of the `onColumnResize` event.
+ */
+export interface GridColumnResizeEvent {
+    /**
+     * An event target.
+     */
+    target: any;
+    /**
+     * A native DOM event.
+     */
+    event: any;
+    /**
+     * The current column collection.
+     */
+    columns: GridColumnProps[];
+    /**
+     * The index of the column.
+     */
+    index: number;
+    /**
+     * The new width of the column.
+     */
+    newWidth: number;
+    /**
+     * The actual width of the column prior to resizing.
+     */
+    oldWidth: number;
+    /**
+     * Indicates that resizing is complete and
+     * the user has dropped the resize handler.
+     */
+    end: boolean;
+}
+/**
+ * Represents the object of the `onColumnReorder` event.
+ */
+export interface GridColumnReorderEvent {
+    /**
+     * An event target.
+     */
+    target: any;
+    /**
+     * A native DOM event.
+     */
+    event: any;
+    /**
+     * The current column collection.
+     */
+    columns: GridColumnProps[];
+}

package/dist/esm/interfaces/events.js

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