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

package/dist/esm/header/HeaderRow.js

@@ -0,0 +1,517 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { normalize } from '../interfaces/GridSortSettings.js';
+import { ColumnResizer } from '../drag/ColumnResizer.js';
+import { ColumnDraggable } from '../drag/ColumnDraggable.js';
+import { GridHeaderCell } from './GridHeaderCell'; // import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps.js';
+
+import { ColumnMenu } from '../columnMenu/ColumnMenu.js';
+import { templateRendering, hasListener, getListeners, Keys, noop } from '@progress/kendo-vue-common';
+import { HeaderThElement } from '@progress/kendo-vue-data-tools'; // from '../../../datatools/src/main.js';
+
+/**
+ * @hidden
+ */
+
+var ariaSortMap = {
+  'none': 'none',
+  'asc': 'ascending',
+  'desc': 'descending'
+};
+/**
+ * @hidden
+ */
+
+var sortSeqMap = {
+  true: {
+    'asc': 'desc',
+    'desc': '',
+    '': 'asc'
+  },
+  false: {
+    'asc': 'desc',
+    'desc': 'asc',
+    '': 'asc'
+  }
+};
+/**
+ * @hidden
+ */
+
+var HeaderRowVue2 = {
+  name: 'KendoHeaderRow',
+  props: {
+    grid: Object,
+    cellRender: [String, Function, Object],
+    groupable: [Boolean, Object],
+    reorderable: Boolean,
+    sortable: [Boolean, Object],
+    sort: {
+      type: Array
+    },
+    filter: Object,
+    filterable: Boolean,
+    filterOperators: Object,
+    filterChange: Function,
+    filterRow: Object,
+    columns: Array,
+    columnsMap: Array,
+    columnResize: Object,
+    columnMenu: [Boolean, String, Function, Object],
+    columnMenuAnimate: {
+      type: [Boolean, Object],
+      default: function _default() {
+        return true;
+      }
+    },
+    isRtl: Boolean
+  },
+  inject: {
+    onNavFocus: {
+      default: noop
+    }
+  },
+  data: function data() {
+    return {
+      columnMenuOpened: {}
+    };
+  },
+  created: function created() {
+    this.serviceIndex = 0;
+    this.index = -1;
+    this._element = null;
+    this.cellClick = this.cellClick.bind(this);
+  },
+  methods: {
+    pressHandler: function pressHandler(event, element) {
+      this.$emit('pressHandler', event, element);
+    },
+    dragHandler: function dragHandler(event, element) {
+      this.$emit('dragHandler', event, element);
+    },
+    releaseHandler: function releaseHandler(event) {
+      this.$emit('releaseHandler', event);
+    },
+    selectionChangeHandler: function selectionChangeHandler(options) {
+      this.$emit('selectionchange', options);
+    },
+    cellClick: function cellClick(e, column) {
+      e.preventDefault();
+
+      if (!hasListener.call(this, 'sortChange')) {
+        return;
+      }
+
+      var _a = normalize(this.$props.sortable || false, column.sortable || false),
+          allowUnsort = _a.allowUnsort,
+          mode = _a.mode;
+
+      var oldDescriptor = (this.$props.sort || []).filter(function (d) {
+        return d.field === column.field;
+      })[0];
+      var dir = sortSeqMap[allowUnsort][oldDescriptor && oldDescriptor.dir || ''];
+      var newDescriptor = mode === 'single' ? [] : (this.$props.sort || []).filter(function (d) {
+        return d.field !== column.field;
+      });
+
+      if (dir !== '' && column.field) {
+        newDescriptor.push({
+          field: column.field,
+          dir: dir
+        });
+      }
+
+      this.sortChangeHandler(newDescriptor, {
+        event: e,
+        field: column.field
+      });
+    },
+    sortChangeHandler: function sortChangeHandler(newDescriptor, e) {
+      this.$emit('sortChange', newDescriptor, e);
+    },
+    filterChangeHandler: function filterChangeHandler(newDescriptor, e) {
+      this.$emit('filterChange', newDescriptor, e);
+    },
+    cellClass: function cellClass(field, headerClassName, locked) {
+      var customClass = headerClassName ? ' ' + headerClassName : '';
+      var result = "k-header ".concat(locked ? 'k-grid-header-sticky' : '') + customClass;
+
+      if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
+        return descriptor.field === field;
+      }).length > 0) {
+        result += ' k-sorted';
+      }
+
+      return result;
+    },
+    cellKeyDown: function cellKeyDown(event, column) {
+      var _a;
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      if (event.keyCode === Keys.enter) {
+        this.cellClick(event, column);
+      }
+
+      if (event.altKey && event.keyCode === Keys.down) {
+        if (column.field) {
+          event.preventDefault();
+          this.columnMenuOpened = (_a = {}, _a[column.field] = true, _a);
+        }
+      }
+    },
+    getTemplate: function getTemplate(template) {
+      return templateRendering.call(this.$props.grid, template, getListeners.call(this.$props.grid));
+    },
+    columnMenuClose: function columnMenuClose() {
+      this.onNavFocus({});
+      this.columnMenuOpened = {};
+    }
+  },
+  computed: {
+    element: {
+      get: function get() {
+        return this._element;
+      }
+    },
+    theadClasses: {
+      get: function get() {
+        return {
+          'k-grid-header': true
+        };
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    this.serviceIndex = 0;
+    this.index = -1;
+
+    var cells = function cells(rowIndexes) {
+      return rowIndexes.map(function (columnIndex) {
+        var _this2 = this;
+
+        var _this = this;
+
+        var column = this.$props.columns[columnIndex];
+        var sortable = this.$props.sortable && column.sortable;
+        var sortIndex = this.$props.sort ? this.$props.sort.findIndex(function (s) {
+          return s.field === column.field;
+        }) : -1;
+        var sortDir = sortIndex >= 0 ? this.$props.sort[sortIndex].dir || 'none' : 'none';
+
+        var sortIconRenderer = function sortIconRenderer(iconSortIndex) {
+          if (!_this.$props.sort) {
+            return null;
+          }
+
+          return iconSortIndex >= 0 && [h("span", {
+            key: 1,
+            "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-sm'
+          }), _this.$props.sort.length > 1 && h("span", {
+            key: 2,
+            "class": "k-sort-order"
+          }, [iconSortIndex + 1])];
+        };
+
+        var sortIcon = sortIconRenderer(sortIndex);
+        var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
+        var columnMenu = column.columnMenu || column.columnMenu === false ? column.columnMenu : this.$props.columnMenu;
+        var columnMenuRender = !columnMenu || typeof columnMenu === 'boolean' ? !!columnMenu : this.getTemplate(columnMenu);
+        var style = column.left !== undefined ? !this.$props.isRtl ? {
+          left: column.left + 'px',
+          right: column.right + 'px'
+        } : {
+          left: column.right + 'px',
+          right: column.left + 'px'
+        } : {};
+        var ariaAttrs = column.isAccessible ? {
+          ariaSort: ariaSortMap[sortDir],
+          role: 'columnheader',
+          ariaColumnIndex: column.ariaColumnIndex,
+          ariaSelected: false
+        } : {
+          'role': 'presentation'
+        };
+        var key = column.declarationIndex >= 0 ? ++this.index : --this.serviceIndex;
+        return (// @ts-ignore function children
+          h(HeaderThElement, {
+            ariaSort: ariaAttrs.ariaSort,
+            attrs: this.v3 ? undefined : {
+              ariaSort: ariaAttrs.ariaSort,
+              role: ariaAttrs.role,
+              ariaColumnIndex: ariaAttrs.ariaColumnIndex,
+              ariaSelected: ariaAttrs.ariaSelected,
+              colSpan: column.colSpan,
+              rowSpan: column.rowSpan,
+              columnId: column.id,
+              navigatable: column.navigatable
+            },
+            role: ariaAttrs.role,
+            ariaColumnIndex: ariaAttrs.ariaColumnIndex,
+            ariaSelected: ariaAttrs.ariaSelected,
+            key: key,
+            colSpan: column.colSpan,
+            rowSpan: column.rowSpan,
+            "class": className,
+            style: style,
+            columnId: column.id,
+            navigatable: column.navigatable,
+            onKeydown: function onKeydown(e) {
+              return _this.cellKeyDown(e, column);
+            },
+            on: this.v3 ? undefined : {
+              "keydown": function onKeydown(e) {
+                return _this.cellKeyDown(e, column);
+              }
+            }
+          }, this.v3 ? function () {
+            return [[// @ts-ignore
+            column.children.length === 0 && columnMenu && h(ColumnMenu, {
+              key: 0,
+              column: {
+                field: column.field,
+                filter: column.filter
+              },
+              attrs: _this2.v3 ? undefined : {
+                column: {
+                  field: column.field,
+                  filter: column.filter
+                },
+                opened: _this2.columnMenuOpened[column.field],
+                animate: _this2.$props.columnMenuAnimate,
+                sortable: sortable,
+                sort: _this2.$props.sort,
+                filter: _this2.$props.filter,
+                filterable: _this2.$props.filterable && column.filterable,
+                filterOperators: _this2.$props.filterOperators,
+                render: columnMenuRender
+              },
+              opened: _this2.columnMenuOpened[column.field],
+              animate: _this2.$props.columnMenuAnimate,
+              sortable: sortable,
+              sort: _this2.$props.sort,
+              onClose: _this2.columnMenuClose,
+              on: _this2.v3 ? undefined : {
+                "close": _this2.columnMenuClose,
+                "sortchange": _this2.sortChangeHandler,
+                "filterchange": _this2.filterChangeHandler
+              },
+              onSortchange: _this2.sortChangeHandler,
+              filter: _this2.$props.filter,
+              filterable: _this2.$props.filterable && column.filterable,
+              filterOperators: _this2.$props.filterOperators,
+              onFilterchange: _this2.filterChangeHandler,
+              render: columnMenuRender
+            }), column.internalHeaderCell && // @ts-ignore function children
+            h(column.internalHeaderCell, {
+              key: 1,
+              field: column.field,
+              attrs: _this2.v3 ? undefined : {
+                field: column.field,
+                sortable: sortable,
+                selectionValue: column.headerSelectionValue,
+                title: column.title,
+                render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+              },
+              sortable: sortable,
+              onHeadercellclick: function onHeadercellclick(e) {
+                return _this.cellClick(e, column);
+              },
+              on: _this2.v3 ? undefined : {
+                "headercellclick": function onHeadercellclick(e) {
+                  return _this.cellClick(e, column);
+                },
+                "selectionchange": _this2.selectionChangeHandler
+              },
+              onSelectionchange: _this2.selectionChangeHandler,
+              selectionValue: column.headerSelectionValue,
+              title: column.title,
+              render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+            }, _this2.v3 ? function () {
+              return [sortIcon];
+            } : [sortIcon]) || // @ts-ignore function children
+            h(GridHeaderCell, {
+              key: 1,
+              field: column.field,
+              attrs: _this2.v3 ? undefined : {
+                field: column.field,
+                sortable: sortable,
+                selectionValue: column.headerSelectionValue,
+                title: column.title,
+                render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+              },
+              sortable: sortable,
+              onHeadercellclick: function onHeadercellclick(e) {
+                return _this.cellClick(e, column);
+              },
+              on: _this2.v3 ? undefined : {
+                "headercellclick": function onHeadercellclick(e) {
+                  return _this.cellClick(e, column);
+                }
+              },
+              selectionValue: column.headerSelectionValue,
+              title: column.title,
+              render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+            }, _this2.v3 ? function () {
+              return [sortIcon];
+            } : [sortIcon]), _this2.$props.columnResize && _this2.$props.columnResize.resizable // @ts-ignore
+            && column.resizable && h(ColumnResizer, {
+              key: 2,
+              onResize: function onResize(e, element, end) {
+                return _this.$props.columnResize && _this.$props.columnResize.dragHandler(e, column, element, end);
+              },
+              on: _this2.v3 ? undefined : {
+                "resize": function onResize(e, element, end) {
+                  return _this.$props.columnResize && _this.$props.columnResize.dragHandler(e, column, element, end);
+                }
+              }
+            })]];
+          } : [[column.children.length === 0 && columnMenu && h(ColumnMenu, {
+            key: 0,
+            column: {
+              field: column.field,
+              filter: column.filter
+            },
+            attrs: _this2.v3 ? undefined : {
+              column: {
+                field: column.field,
+                filter: column.filter
+              },
+              opened: _this2.columnMenuOpened[column.field],
+              animate: _this2.$props.columnMenuAnimate,
+              sortable: sortable,
+              sort: _this2.$props.sort,
+              filter: _this2.$props.filter,
+              filterable: _this2.$props.filterable && column.filterable,
+              filterOperators: _this2.$props.filterOperators,
+              render: columnMenuRender
+            },
+            opened: _this2.columnMenuOpened[column.field],
+            animate: _this2.$props.columnMenuAnimate,
+            sortable: sortable,
+            sort: _this2.$props.sort,
+            onClose: _this2.columnMenuClose,
+            on: _this2.v3 ? undefined : {
+              "close": _this2.columnMenuClose,
+              "sortchange": _this2.sortChangeHandler,
+              "filterchange": _this2.filterChangeHandler
+            },
+            onSortchange: _this2.sortChangeHandler,
+            filter: _this2.$props.filter,
+            filterable: _this2.$props.filterable && column.filterable,
+            filterOperators: _this2.$props.filterOperators,
+            onFilterchange: _this2.filterChangeHandler,
+            render: columnMenuRender
+          }), column.internalHeaderCell && h(column.internalHeaderCell, {
+            key: 1,
+            field: column.field,
+            attrs: _this2.v3 ? undefined : {
+              field: column.field,
+              sortable: sortable,
+              selectionValue: column.headerSelectionValue,
+              title: column.title,
+              render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+            },
+            sortable: sortable,
+            onHeadercellclick: function onHeadercellclick(e) {
+              return _this.cellClick(e, column);
+            },
+            on: _this2.v3 ? undefined : {
+              "headercellclick": function onHeadercellclick(e) {
+                return _this.cellClick(e, column);
+              },
+              "selectionchange": _this2.selectionChangeHandler
+            },
+            onSelectionchange: _this2.selectionChangeHandler,
+            selectionValue: column.headerSelectionValue,
+            title: column.title,
+            render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+          }, _this2.v3 ? function () {
+            return [sortIcon];
+          } : [sortIcon]) || h(GridHeaderCell, {
+            key: 1,
+            field: column.field,
+            attrs: _this2.v3 ? undefined : {
+              field: column.field,
+              sortable: sortable,
+              selectionValue: column.headerSelectionValue,
+              title: column.title,
+              render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+            },
+            sortable: sortable,
+            onHeadercellclick: function onHeadercellclick(e) {
+              return _this.cellClick(e, column);
+            },
+            on: _this2.v3 ? undefined : {
+              "headercellclick": function onHeadercellclick(e) {
+                return _this.cellClick(e, column);
+              }
+            },
+            selectionValue: column.headerSelectionValue,
+            title: column.title,
+            render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+          }, _this2.v3 ? function () {
+            return [sortIcon];
+          } : [sortIcon]), _this2.$props.columnResize && _this2.$props.columnResize.resizable && column.resizable && h(ColumnResizer, {
+            key: 2,
+            onResize: function onResize(e, element, end) {
+              return _this.$props.columnResize && _this.$props.columnResize.dragHandler(e, column, element, end);
+            },
+            on: _this2.v3 ? undefined : {
+              "resize": function onResize(e, element, end) {
+                return _this.$props.columnResize && _this.$props.columnResize.dragHandler(e, column, element, end);
+              }
+            }
+          })]])
+        );
+      }, this);
+    };
+
+    return h("thead", {
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation",
+        "data-keyboardnavheader": true
+      },
+      "class": this.theadClasses,
+      "data-keyboardnavheader": true
+    }, [this.$props.columnsMap.map(function (rowIndexes, index) {
+      var _this3 = this;
+
+      return (this.$props.groupable || this.$props.reorderable) && // @ts-ignore function children
+      h(ColumnDraggable, {
+        key: index,
+        onPressHandler: this.pressHandler,
+        on: this.v3 ? undefined : {
+          "pressHandler": this.pressHandler,
+          "dragHandler": this.dragHandler,
+          "releaseHandler": this.releaseHandler
+        },
+        onDragHandler: this.dragHandler,
+        onReleaseHandler: this.releaseHandler
+      }, this.v3 ? function () {
+        return [cells.call(_this3, rowIndexes)];
+      } : [cells.call(_this3, rowIndexes)]) || h("tr", [cells.call(this, rowIndexes)]);
+    }, this), this.$props.filterRow]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var HeaderRow = HeaderRowVue2;
+export { HeaderRow, HeaderRowVue2 };

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

@@ -0,0 +1,20 @@
+import { GridColumnProps } from './GridColumnProps';
+/**
+ * @hidden
+ */
+export interface ExtendedColumnProps extends GridColumnProps {
+    id: string;
+    declarationIndex: number;
+    parentIndex: number;
+    colSpan: number;
+    rowSpan: number;
+    depth: number;
+    kFirst?: boolean;
+    index: number;
+    children: ExtendedColumnProps[];
+    left: number;
+    right: number;
+    rightBorder: boolean;
+    ariaColumnIndex: number;
+    isAccessible: boolean;
+}

package/dist/esm/interfaces/ExtendedColumnProps.js

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

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

@@ -0,0 +1,156 @@
+/**
+ * The props of the GridCell component.
+ */
+/**
+ * @hidden
+ */
+export interface GridCellProps {
+    /**
+     * @hidden
+     */
+    id: string;
+    /**
+     * The field to which the cell is bound ([see example]({% slug sorting_grid %})).
+     */
+    key?: number;
+    /**
+     * The field to which the cell is bound ([see example]({% slug sorting_grid %})).
+     */
+    field: string;
+    /**
+     * The data object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     *
+     */
+    dataIndex?: number;
+    /**
+     * The format that is applied to the value before the value is displayed. Takes the `{0:format}`
+     * form where `format` is any of the following:
+     * * A standard number format
+     * * A custom number format
+     * * A standard date format
+     * * A custom date format
+     *
+     * For more information on the supported date and number formats,
+     * refer to the [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
+     */
+    format?: string;
+    /**
+     * The data Item read format.
+     */
+    readFormat?: string;
+    /**
+     * The custom CSS classes of the cells.
+     */
+    className?: string;
+    /**
+     * The index to be applied to the `aria-colindex` attribute.
+     */
+    ariaColumnIndex: number;
+    /**
+     * The index of all rendered columns.
+     */
+    columnIndex?: number;
+    /**
+     * The number of rendered columns in the Grid.
+     */
+    columnsCount?: number;
+    /**
+     * The type of the row.
+     */
+    rowType?: string;
+    /**
+     * @hidden
+     */
+    level?: number;
+    /**
+     * The expanded value of the cell when hierarchy or grouping are used.
+     */
+    expanded?: boolean;
+    /**
+     * The event that is fired when the cell is selected.
+     */
+    selectionchange?: (event: any, dataItem: any) => void;
+    /**
+     * @hidden
+     */
+    style?: any;
+    /**
+     * The column span of the cell.
+     */
+    colSpan?: number;
+    /**
+     * Indicates if the cell is selected.
+     */
+    isSelected: boolean;
+    /**
+     * The event that is fired when the cell value is changed.
+     */
+    onChange?: (event: {
+        dataItem: any;
+        event: any;
+        field?: string;
+        value?: any;
+    }) => void;
+    /**
+     * The event that is fired when the keydown event of the cell is triggered.
+     */
+    onCellkeydown?: (event: {
+        event: any;
+        dataItem: any;
+        field: string;
+    }) => void;
+    /**
+     * The event that is fired when the cell is clicked.
+     */
+    onCellclick?: (event: {
+        dataItem: any;
+        field: string;
+    }) => void;
+    /**
+     * The event that is fired when the cell is about to be added.
+     */
+    onAdd?: (event: {
+        dataItem: any;
+    }) => void;
+    /**
+     * The event that is fired when the cell is about to be edited.
+     */
+    onEdit?: (event: {
+        dataItem: any;
+    }) => void;
+    /**
+     * The event that is fired when the cell is about to be saved.
+     */
+    save?: (event: {
+        dataItem: any;
+    }) => void;
+    /**
+     * The event that is fired when the cell is about to be removed.
+     */
+    remove?: (event: {
+        dataItem: any;
+    }) => void;
+    /**
+     * The event that is fired when the cell is about to be canceled.
+     */
+    onCancel?: (event: {
+        dataItem: any;
+    }) => void;
+    /**
+     * The type of the data which will be used when formatting the cell data.
+     * Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.
+     */
+    type?: string;
+    /**
+     * The type of the editor which will be used when the cell is in edit mode.
+     * Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.
+     */
+    editor?: string;
+    /**
+     * The method for rendering the cell.
+     */
+    render?: any;
+}

package/dist/esm/interfaces/GridCellProps.js

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