@progress/kendo-vue-data-tools 3.5.1-dev.202208150613 → 3.5.2-dev.202209011849

package/dist/es/header/HeaderRow.d.ts

@@ -0,0 +1,86 @@
+import { SortSettings } from '../interfaces/SortSettings';
+import { SortDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { ColumnDraggableProps } from '../drag/ColumnDraggable';
+import { ExtendedColumnProps } from '../interfaces/ColumnProps';
+import { ColumnBaseProps } from '../interfaces/ColumnProps';
+import { HeaderCellProps } from '../interfaces/HeaderCellProps';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { FilterOperators } from '../interfaces/FilterOperators';
+import { PopupAnimation } from '@progress/kendo-vue-popup';
+/**
+ * @hidden
+ */
+export interface HeaderRowProps extends ColumnDraggableProps {
+    grid: any;
+    sortable?: SortSettings;
+    groupable?: any;
+    reorderable?: boolean;
+    onSortChange?: (descriptors: SortDescriptor[], e: any) => void;
+    sort?: any;
+    filter?: CompositeFilterDescriptor;
+    filterOperators: FilterOperators;
+    filterable?: boolean | undefined;
+    filterChange?: any;
+    filterRow?: any;
+    columns: ExtendedColumnProps[];
+    columnResize?: any;
+    columnsMap: number[][];
+    onSelectionchange?: any;
+    cellRender?: ((h: any, defaultRendering: any | null, props: HeaderCellProps) => any) | string | null;
+    columnMenu?: any;
+    columnMenuAnimate?: boolean | PopupAnimation;
+    onFilterChange?: Function;
+    isRtl?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface HeaderRowMethods extends Vue2type {
+    pressHandler: (event: any, element: HTMLElement) => void;
+    dragHandler: (event: any, element: HTMLElement) => void;
+    releaseHandler: (event: any) => void;
+    selectionChangeHandler: (options: any) => void;
+    cellClick: (e: any, column: ColumnBaseProps) => void;
+    sortChangeHandler: (newDescriptor: SortDescriptor[], e: any) => void;
+    filterChangeHandler: (newDescriptor: CompositeFilterDescriptor | null, e: any) => void;
+    cellClass: (field: string | undefined, headerClassName: string | undefined, locked: boolean) => string;
+    getTemplate: (template: any) => any;
+    cellKeyDown: (event: any, column: ColumnBaseProps) => void;
+    columnMenuClose: () => void;
+    onNavFocus: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface HeaderRowState {
+    columnMenuOpened?: object;
+    serviceIndex: number;
+    index: number;
+    _element: any | null;
+}
+/**
+ * @hidden
+ */
+export interface HeaderRowComputed {
+    [key: string]: any;
+    element: any;
+    theadClasses: any;
+}
+/**
+ * @hidden
+ */
+export interface HeaderRowAll extends HeaderRowMethods, HeaderRowState, HeaderRowComputed {
+}
+/**
+ * @hidden
+ */
+declare let HeaderRowVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<HeaderRowAll>, HeaderRowComputed, RecordPropsDefinition<HeaderRowProps>>;
+/**
+ * @hidden
+ */
+declare const HeaderRow: DefineComponent<HeaderRowProps, any, {}, HeaderRowComputed, HeaderRowMethods, {}, {}, {}, string, HeaderRowProps, HeaderRowProps, {}>;
+export { HeaderRow, HeaderRowVue2 };

package/dist/es/header/HeaderRow.js

@@ -0,0 +1,516 @@
+// @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/SortSettings';
+import { ColumnResizer } from '../drag/ColumnResizer';
+import { ColumnDraggable } from '../drag/ColumnDraggable';
+import { HeaderCell } from './HeaderCell'; // import { ColumnMenuProps } from '../interfaces/GridColumnMenuProps';
+
+import { ColumnMenu } from '../columnmenu/ColumnMenu';
+import { templateRendering, hasListener, getListeners, Keys, noop } from '@progress/kendo-vue-common';
+import { HeaderThElement } from './HeaderThElement';
+/**
+ * @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(HeaderCell, {
+              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(HeaderCell, {
+            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/es/header/HeaderSelectionCell.d.ts

@@ -0,0 +1,32 @@
+import { HeaderSelectionCellProps } from '../interfaces/HeaderSelectionCellProps';
+declare type DefaultData<V> = object | ((this: V) => HeaderSelectionCellData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+/**
+ * @hidden
+ */
+export interface HeaderSelectionCellMethods extends Vue2type {
+    changeHandle: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface HeaderSelectionCellData {
+    inputId: string;
+}
+/**
+ * @hidden
+ */
+export interface HeaderSelectionCellAll extends HeaderSelectionCellMethods, HeaderSelectionCellData {
+}
+/**
+ * @hidden
+ */
+declare let HeaderSelectionCellVue2: ComponentOptions<Vue2type, DefaultData<HeaderSelectionCellData>, DefaultMethods<HeaderSelectionCellAll>, {}, RecordPropsDefinition<HeaderSelectionCellProps>>;
+/**
+ * @hidden
+ */
+declare const HeaderSelectionCell: DefineComponent<HeaderSelectionCellProps, any, HeaderSelectionCellData, {}, HeaderSelectionCellMethods, {}, {}, {}, string, HeaderSelectionCellProps, HeaderSelectionCellProps, {}>;
+export { HeaderSelectionCell, HeaderSelectionCellVue2 };