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

package/dist/esm/footer/FooterRow.js

@@ -0,0 +1,73 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getTemplate } from '@progress/kendo-vue-common';
+import { footerColumns } from './../utils.js';
+/**
+ * @hidden
+ */
+
+var FooterRowVue2 = {
+  name: 'FooterRow',
+  props: {
+    isRtl: Boolean,
+    columns: Array
+  },
+  methods: {
+    columnStyles: function columnStyles(column) {
+      return column.left !== undefined ? !this.$props.isRtl ? {
+        left: column.left + 'px',
+        right: column.right + 'px'
+      } : {
+        left: column.right + 'px',
+        right: column.left + 'px'
+      } : {};
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+
+    var renderCell = function renderCell(column, index) {
+      var footerCellRendering = null;
+      var stickyClassName = column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : '';
+      var tdClassName = column.footerClassName ? "".concat(column.footerClassName, " ").concat(stickyClassName) : stickyClassName;
+      footerCellRendering = getTemplate.call(this, {
+        h: h,
+        template: column.footerCell,
+        defaultRendering: null,
+        additionalProps: {
+          field: column.field,
+          colSpan: column.colSpan !== 1 ? column.colSpan : undefined,
+          defaultStyle: this.columnStyles(column)
+        }
+      });
+      return h("td", {
+        key: index,
+        colspan: column.colSpan !== 1 ? column.colSpan : undefined,
+        attrs: this.v3 ? undefined : {
+          colspan: column.colSpan !== 1 ? column.colSpan : undefined
+        },
+        style: this.columnStyles(column),
+        "class": tdClassName
+      }, [footerCellRendering]);
+    };
+
+    return h("tr", [footerColumns(this.$props.columns).map(renderCell, this)]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var FooterRow = FooterRowVue2;
+export { FooterRow, FooterRowVue2 };

package/dist/esm/header/FilterRow.d.ts

@@ -0,0 +1,36 @@
+import { CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ExtendedColumnProps } from '../interfaces/ExtendedColumnProps';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { GridFilterOperators } from '../interfaces/GridFilterOperators';
+/**
+ * @hidden
+ */
+export interface FilterRowProps {
+    grid: any;
+    columns: ExtendedColumnProps[];
+    filter?: CompositeFilterDescriptor;
+    filterOperators: GridFilterOperators;
+    sort?: SortDescriptor[];
+    cellRender?: any;
+    isRtl?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface FilterRowMethods extends Vue2type {
+    headerCellClassName: (field?: string, locked?: boolean) => string;
+    setFilter: (value: string | number, operator: string | Function, field: string | undefined, e: any) => void;
+}
+/**
+ * @hidden
+ */
+declare let FilterRowVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<FilterRowMethods>, {}, RecordPropsDefinition<FilterRowProps>>;
+/**
+ * @hidden
+ */
+declare const FilterRow: DefineComponent<FilterRowProps, any, {}, {}, FilterRowMethods, {}, {}, {}, string, FilterRowProps, FilterRowProps, {}>;
+export { FilterRow, FilterRowVue2 };

package/dist/esm/header/FilterRow.js

@@ -0,0 +1,203 @@
+// @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 { operatorMap, booleanFilterValues, getFilterType } from '../filterCommon.js';
+import { GridFilterCell } from '../cells/GridFilterCell.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { filterAriaLabel, messages } from '../messages.js';
+import { tableKeyboardNavigationTools as navigationTools, HeaderThElement } from '@progress/kendo-vue-data-tools';
+/**
+ * @hidden
+ */
+
+var FilterRowVue2 = {
+  name: 'kendoFilterRow',
+  props: {
+    grid: Object,
+    columns: Array,
+    filter: Object,
+    filterOperators: Object,
+    sort: [Object, Array],
+    cellRender: [String, Function, Object],
+    isRtl: Boolean
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  methods: {
+    headerCellClassName: function headerCellClassName(field, locked) {
+      var result = "".concat(locked ? 'k-grid-header-sticky' : '');
+
+      if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
+        return descriptor.field === field;
+      }).length > 0) {
+        result += ' k-sorted';
+      }
+
+      return result;
+    },
+    setFilter: function setFilter(value, operator, field, e) {
+      var filters = [];
+
+      if (value !== '' && value !== null || operator !== '') {
+        filters.push({
+          field: field,
+          operator: operator,
+          value: value
+        });
+      }
+
+      if (this.$props.filter && this.$props.filter.filters) {
+        var oldFilters = this.$props.filter.filters || [];
+        oldFilters.forEach(function (filter) {
+          var descriptor = filter;
+
+          if (descriptor && descriptor.field !== field) {
+            filters.push(descriptor);
+          }
+        });
+      }
+
+      var filtersResult = filters.length > 0 ? {
+        logic: 'and',
+        filters: filters
+      } : null;
+      this.$emit('filterchange', filtersResult, e);
+    }
+  },
+  // @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 intl = provideLocalizationService(this);
+    var oldFilters = this.$props.filter && this.$props.filter.filters || [];
+
+    var activeFilterValueFor = function activeFilterValueFor(field, defaultValue) {
+      if (defaultValue === void 0) {
+        defaultValue = null;
+      }
+
+      var found = oldFilters.filter(function (filter) {
+        return filter.field === field;
+      })[0];
+      return found ? found.value : defaultValue;
+    };
+
+    var activeOperatorFor = function activeOperatorFor(field) {
+      var found = oldFilters.filter(function (filter) {
+        return filter.field === field;
+      })[0];
+      return found ? found.operator : null;
+    };
+
+    var filterCellProps;
+    var serviceIndex = 0,
+        index = -1;
+    var filterCells = this.$props.columns.filter(function (c) {
+      return c.children.length === 0;
+    }).map(function (column) {
+      var _this = this;
+
+      var onChangeFn = function onChangeFn(e) {
+        _this.setFilter(e.value, e.operator, column.field, e);
+      };
+
+      var filterType = getFilterType(column.filter); // @ts-ignore
+
+      var filterRender = h(GridFilterCell, {
+        grid: this.$props.grid,
+        attrs: this.v3 ? undefined : {
+          grid: this.$props.grid,
+          field: column.field,
+          title: column.filterTitle,
+          value: activeFilterValueFor(column.field, filterType === 'text' ? '' : null),
+          operator: activeOperatorFor(column.field),
+          operators: operatorMap(this.$props.filterOperators[filterType] || [], intl),
+          booleanValues: operatorMap(booleanFilterValues, intl),
+          filterType: filterType,
+          render: column.filterCell || this.$props.cellRender
+        },
+        field: column.field,
+        title: column.filterTitle,
+        value: activeFilterValueFor(column.field, filterType === 'text' ? '' : null),
+        operator: activeOperatorFor(column.field),
+        operators: operatorMap(this.$props.filterOperators[filterType] || [], intl),
+        booleanValues: operatorMap(booleanFilterValues, intl),
+        filterType: filterType,
+        onChange: onChangeFn,
+        on: this.v3 ? undefined : {
+          "change": onChangeFn
+        },
+        render: column.filterCell || this.$props.cellRender
+      });
+      var key = column.declarationIndex >= 0 ? ++index : --serviceIndex;
+      var ariaAttrs = {
+        ariaLabel: column.filterable ? intl.toLanguageString(filterAriaLabel, messages[filterAriaLabel]) : undefined,
+        ariaColumnIndex: column.ariaColumnIndex
+      };
+      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 filterCell = // @ts-ignore function children
+      h(HeaderThElement, {
+        key: key,
+        columnId: navigationTools.getFilterColumnId(column.id),
+        attrs: this.v3 ? undefined : {
+          columnId: navigationTools.getFilterColumnId(column.id),
+          navigatable: column.navigatable,
+          ariaLabel: ariaAttrs.ariaLabel,
+          ariaColumnIndex: ariaAttrs.ariaColumnIndex
+        },
+        navigatable: column.navigatable,
+        style: style,
+        "class": this.headerCellClassName(column.field, column.locked) || undefined,
+        ariaLabel: ariaAttrs.ariaLabel,
+        ariaColumnIndex: ariaAttrs.ariaColumnIndex
+      }, this.v3 ? function () {
+        return [filterRender];
+      } : [filterRender]);
+      return column.filterable && filterCell || // @ts-ignore function children
+      h(HeaderThElement, {
+        key: key,
+        columnId: navigationTools.getFilterColumnId(column.id),
+        attrs: this.v3 ? undefined : {
+          columnId: navigationTools.getFilterColumnId(column.id),
+          navigatable: column.navigatable,
+          ariaLabel: ariaAttrs.ariaLabel,
+          ariaColumnIndex: ariaAttrs.ariaColumnIndex
+        },
+        navigatable: column.navigatable,
+        style: style,
+        "class": this.headerCellClassName(column.field, column.locked) || undefined,
+        ariaLabel: ariaAttrs.ariaLabel,
+        ariaColumnIndex: ariaAttrs.ariaColumnIndex
+      });
+    }, this);
+    return h("tr", {
+      "class": "k-filter-row"
+    }, [filterCells]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var FilterRow = FilterRowVue2;
+export { FilterRow, FilterRowVue2 };

package/dist/esm/header/GridHeaderCell.d.ts

@@ -0,0 +1,21 @@
+import { GridHeaderCellProps } from '../interfaces/GridHeaderCellProps';
+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
+ */
+export interface GridHeaderCellMethods extends Vue2type {
+    clickHandler: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+declare let GridHeaderCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridHeaderCellMethods>, {}, RecordPropsDefinition<GridHeaderCellProps>>;
+/**
+ * @hidden
+ */
+declare const GridHeaderCell: DefineComponent<GridHeaderCellProps, any, {}, {}, GridHeaderCellMethods, {}, {}, {}, string, GridHeaderCellProps, GridHeaderCellProps, {}>;
+export { GridHeaderCell, GridHeaderCellVue2 };

package/dist/esm/header/GridHeaderCell.js

@@ -0,0 +1,60 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getTemplate, getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var GridHeaderCellVue2 = {
+  props: {
+    field: String,
+    title: String,
+    sortable: [Boolean, Object],
+    render: [Object, Function, String]
+  },
+  methods: {
+    clickHandler: function clickHandler(event) {
+      this.$emit('headercellclick', event);
+    }
+  },
+  // @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);
+    var renderTemplate = this.$props.render;
+    var textInCell = this.$props.title || this.$props.field || "\xA0";
+    var defaultRendering = this.$props.sortable ? h("span", {
+      "class": "k-link",
+      onClick: this.clickHandler,
+      on: this.v3 ? undefined : {
+        "click": this.clickHandler
+      }
+    }, [textInCell, defaultSlot]) : defaultSlot ? h("span", [textInCell, defaultSlot]) // @ts-ignore
+    : this.v3 ? textInCell : this._v(textInCell);
+    return getTemplate.call(this, {
+      h: h,
+      template: renderTemplate,
+      defaultRendering: defaultRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        click: this.clickHandler
+      }
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var GridHeaderCell = GridHeaderCellVue2;
+export { GridHeaderCell, GridHeaderCellVue2 };

package/dist/esm/header/GridHeaderSelectionCell.d.ts

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

package/dist/esm/header/GridHeaderSelectionCell.js

@@ -0,0 +1,81 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { guid, getTemplate } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var GridHeaderSelectionCellVue2 = {
+  props: {
+    field: String,
+    title: String,
+    selectionValue: Boolean,
+    render: [Object, Function, String]
+  },
+  created: function created() {
+    this.inputId = guid();
+  },
+  methods: {
+    changeHandle: function changeHandle(e) {
+      this.$emit('selectionchange', {
+        field: this.$props.field,
+        event: e
+      });
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var renderTemplate = this.$props.render;
+    var defaultRendering = h("span", [[h("input", {
+      key: 0,
+      checked: this.v3 ? this.$props.selectionValue : null,
+      domProps: this.v3 ? undefined : {
+        "checked": this.$props.selectionValue
+      },
+      id: this.inputId,
+      attrs: this.v3 ? undefined : {
+        id: this.inputId,
+        type: "checkbox"
+      },
+      type: "checkbox",
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
+      onChange: this.changeHandle,
+      on: this.v3 ? undefined : {
+        "change": this.changeHandle
+      }
+    }), h("label", {
+      key: 1,
+      "class": "k-checkbox-label",
+      "for": this.inputId,
+      attrs: this.v3 ? undefined : {
+        "for": this.inputId
+      }
+    })]]);
+    return getTemplate.call(this, {
+      h: h,
+      template: renderTemplate,
+      defaultRendering: defaultRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        selectionchange: this.changeHandle
+      }
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var GridHeaderSelectionCell = GridHeaderSelectionCellVue2;
+export { GridHeaderSelectionCell, GridHeaderSelectionCellVue2 };

package/dist/esm/header/GroupPanel.d.ts

@@ -0,0 +1,38 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { GroupDescriptor } from '@progress/kendo-data-query';
+import { ColumnDraggableProps } from '../drag/ColumnDraggable';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface GroupPanelProps extends ColumnDraggableProps {
+    ref?: any;
+    group: GroupDescriptor[];
+    onGroupChange?: (groups: GroupDescriptor[], event: any) => void;
+    resolveTitle: (field: string) => string;
+    onPressHandler?: (draggableEvent: any, element: HTMLElement) => void;
+    onDragHandler?: (draggableEvent: any, element: HTMLElement) => void;
+    onReleaseHandler?: (draggableEvent: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface GroupPanelMethods extends Vue2type {
+    pressHandler: (event: any, element: HTMLElement) => void;
+    dragHandler: (event: any, element: HTMLElement) => void;
+    releaseHandler: (event: any) => void;
+    onGroupRemove: (event: any, index: number) => void;
+    onGroupSortChange: (event: any, index: number, groupDesc: GroupDescriptor, dir: string) => void;
+}
+/**
+ * @hidden
+ */
+declare let GroupPanelVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GroupPanelMethods>, {}, RecordPropsDefinition<GroupPanelProps>>;
+/**
+ * @hidden
+ */
+declare const GroupPanel: DefineComponent<GroupPanelProps, any, {}, {}, GroupPanelMethods, {}, {}, {}, string, GroupPanelProps, GroupPanelProps, {}>;
+export { GroupPanel, GroupPanelVue2 };

package/dist/esm/header/GroupPanel.js

@@ -0,0 +1,108 @@
+// @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 { GroupingIndicator } from '../drag/GroupingIndicator.js';
+import { messages, groupPanelEmpty as messageKey } from './../messages.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+/**
+ * @hidden
+ */
+
+var GroupPanelVue2 = {
+  props: {
+    group: Array,
+    resolveTitle: Function
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  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);
+    },
+    onGroupRemove: function onGroupRemove(event, index) {
+      var newGroups = this.$props.group.slice();
+      newGroups.splice(index, 1);
+      this.$emit('groupChange', newGroups, event);
+    },
+    onGroupSortChange: function onGroupSortChange(event, index, groupDesc, dir) {
+      var group = Object.assign({}, groupDesc, {
+        dir: dir
+      });
+      var newGroups = this.$props.group.slice();
+      newGroups.splice(index, 1, group);
+      this.$emit('groupChange', newGroups, event);
+    }
+  },
+  // @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 groupsProp = this.$props.group || [];
+    var groups = groupsProp.map(function (groupDesc, index) {
+      var _this = this;
+
+      return (// @ts-ignore
+        h(GroupingIndicator, {
+          key: index,
+          dir: groupDesc.dir || 'asc',
+          attrs: this.v3 ? undefined : {
+            dir: groupDesc.dir || 'asc',
+            title: this.$props.resolveTitle(groupDesc.field)
+          },
+          title: this.$props.resolveTitle(groupDesc.field),
+          onRemove: function onRemove(event) {
+            return _this.onGroupRemove(event, index);
+          },
+          on: this.v3 ? undefined : {
+            "remove": function onRemove(event) {
+              return _this.onGroupRemove(event, index);
+            },
+            "sortChange": function sortChange(event, dir) {
+              _this.onGroupSortChange(event, index, groupDesc, dir);
+            },
+            "press": this.pressHandler,
+            "drag": this.dragHandler,
+            "release": this.releaseHandler
+          },
+          onSortChange: function sortChange(event, dir) {
+            _this.onGroupSortChange(event, index, groupDesc, dir);
+          },
+          onPress: this.pressHandler,
+          onDrag: this.dragHandler,
+          onRelease: this.releaseHandler
+        })
+      );
+    }, this);
+    return h("div", {
+      "class": "k-grouping-header k-grouping-header-flex"
+    }, [groups, h("div", {
+      "class": "k-indicator-container"
+    }, [!groups.length && provideLocalizationService(this).toLanguageString(messageKey, messages[messageKey])])]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var GroupPanel = GroupPanelVue2;
+export { GroupPanel, GroupPanelVue2 };