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

package/dist/es/filterCommon.js

@@ -0,0 +1,156 @@
+import { messages } from './messages/main';
+/**
+ * @hidden
+ */
+export var filterLogicList = [
+    { text: 'grid.filterAndLogic', operator: 'and' },
+    { text: 'grid.filterOrLogic', operator: 'or' }
+];
+/**
+ * @hidden
+ */
+export var operators = {
+    'text': [
+        { text: 'grid.filterContainsOperator', operator: 'contains' },
+        { text: 'grid.filterNotContainsOperator', operator: 'doesnotcontain' },
+        { text: 'grid.filterEqOperator', operator: 'eq' },
+        { text: 'grid.filterNotEqOperator', operator: 'neq' },
+        { text: 'grid.filterStartsWithOperator', operator: 'startswith' },
+        { text: 'grid.filterEndsWithOperator', operator: 'endswith' },
+        { text: 'grid.filterIsNullOperator', operator: 'isnull' },
+        { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' },
+        { text: 'grid.filterIsEmptyOperator', operator: 'isempty' },
+        { text: 'grid.filterIsNotEmptyOperator', operator: 'isnotempty' }
+    ],
+    'numeric': [
+        { text: 'grid.filterEqOperator', operator: 'eq' },
+        { text: 'grid.filterNotEqOperator', operator: 'neq' },
+        { text: 'grid.filterGteOperator', operator: 'gte' },
+        { text: 'grid.filterGtOperator', operator: 'gt' },
+        { text: 'grid.filterLteOperator', operator: 'lte' },
+        { text: 'grid.filterLtOperator', operator: 'lt' },
+        { text: 'grid.filterIsNullOperator', operator: 'isnull' },
+        { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' }
+    ],
+    'date': [
+        { text: 'grid.filterEqOperator', operator: 'eq' },
+        { text: 'grid.filterNotEqOperator', operator: 'neq' },
+        { text: 'grid.filterAfterOrEqualOperator', operator: 'gte' },
+        { text: 'grid.filterAfterOperator', operator: 'gt' },
+        { text: 'grid.filterBeforeOperator', operator: 'lt' },
+        { text: 'grid.filterBeforeOrEqualOperator', operator: 'lte' },
+        { text: 'grid.filterIsNullOperator', operator: 'isnull' },
+        { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' }
+    ],
+    'boolean': [
+        { text: 'grid.filterEqOperator', operator: 'eq' }
+    ]
+};
+/**
+ * @hidden
+ */
+export var IsUnaryFilter = function (operator) {
+    return operator === 'isnull' || operator === 'isnotnull' || operator === 'isempty' || operator === 'isnotempty';
+};
+/**
+ * @hidden
+ */
+export var operatorMap = function (iterable, service) { return iterable.map(function (operator) { return ({
+    text: service.toLanguageString(operator.text, messages[operator.text]),
+    operator: operator.operator
+}); }); };
+/**
+ * @hidden
+ */
+export var defaultBooleanOperator = 'eq';
+/**
+ * @hidden
+ */
+export var booleanFilterValues = [
+    { text: 'grid.filterBooleanAll', operator: '' },
+    { text: 'grid.filterIsTrue', operator: true },
+    { text: 'grid.filterIsFalse', operator: false }
+];
+/**
+ * @hidden
+ */
+export var defaultHideSecondFilter = {
+    text: false,
+    numeric: false,
+    date: false,
+    boolean: true
+};
+/**
+ * @hidden
+ */
+export var cellInputChange = function (value, e, props) {
+    var defaultOperator = getDefaultOperator(props.operators);
+    var operator = props.operator;
+    switch (props.filterType) {
+        case 'numeric':
+            if (!operator || IsUnaryFilter(operator)) {
+                // change the operator to default
+                operator = defaultOperator;
+            }
+            if (value === null && operator === defaultOperator) {
+                // clear only the default operator
+                operator = '';
+            }
+            break;
+        case 'date':
+            if (!operator || IsUnaryFilter(operator)) {
+                operator = defaultOperator;
+            }
+            if (value === null && operator === defaultOperator) {
+                operator = '';
+            }
+            break;
+        case 'text':
+            if (!operator || IsUnaryFilter(operator)) {
+                operator = defaultOperator;
+            }
+            if (!value && operator === defaultOperator) {
+                operator = '';
+            }
+            break;
+        default: return;
+    }
+    return { value: value, operator: operator, event: e };
+};
+/**
+ * @hidden
+ */
+export var getDefaultOperator = function (filterOperators, filterType) {
+    if (filterType) {
+        return filterOperators[filterType][0].operator;
+    }
+    else {
+        return filterOperators[0].operator;
+    }
+};
+/**
+ * @hidden
+ */
+export var getFilterType = function (filterType) {
+    return filterType || 'text';
+};
+/**
+ * @hidden
+ */
+export var cellBoolDropdownChange = function (value, e) {
+    return {
+        value: value,
+        operator: value === '' ? '' : defaultBooleanOperator,
+        event: e
+    };
+};
+/**
+ * @hidden
+ */
+export var cellOperatorChange = function (operator, e, value) {
+    if (IsUnaryFilter(operator)) {
+        // clear the value to avoid confusion on what is filtered
+        value = null;
+    }
+    return { value: value, operator: operator, event: e };
+};

package/dist/es/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/ColumnProps';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { FilterOperators } from '../interfaces/FilterOperators';
+/**
+ * @hidden
+ */
+export interface FilterRowProps {
+    grid: any;
+    columns: ExtendedColumnProps[];
+    filter?: CompositeFilterDescriptor | any;
+    filterOperators: FilterOperators;
+    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/es/header/FilterRow.js

@@ -0,0 +1,204 @@
+// @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';
+import { FilterCell } from '../cells/FilterCell';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { filterAriaLabel, messages } from '../messages/main';
+import { tableKeyboardNavigationTools as navigationTools } from '../navigation/utils';
+import { HeaderThElement } from './HeaderThElement';
+/**
+ * @hidden
+ */
+
+var FilterRowVue2 = {
+  name: 'kendoFilterRow',
+  props: {
+    grid: Object,
+    columns: Array,
+    filter: [Object, Array],
+    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 ? this.$props.filter.filters : this.$props.filter.length ? this.$props.filter : [];
+
+    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(FilterCell, {
+        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/es/header/Header.d.ts

@@ -0,0 +1,64 @@
+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 HeaderProps {
+    ref?: string;
+    staticHeaders: boolean;
+    headerRow: any;
+    columnResize: {
+        colGroupHeader: any | null;
+        setIsRtl: (isRtl: boolean) => void;
+    };
+    cols: Element[];
+    draggable: boolean;
+}
+/**
+ * @hidden
+ */
+export interface HeaderMethods extends Vue2type {
+    triggerClick: () => void;
+    triggerEdit: (dataItem: any) => void;
+    triggerAdd: (dataItem: any) => void;
+    triggerCancel: (dataItem: any) => void;
+    triggerSave: (dataItem: any) => void;
+    triggerRemove: (dataItem: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface HeaderData {
+    divStyle: any;
+    element: any | null;
+    headerWrap: any | null;
+    table: any | null;
+    colGroupHeaderRef: any;
+    tableRef: any;
+    headerWrapRef: any;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface HeaderComputed {
+    [key: string]: any;
+    wrapperClass: string;
+}
+/**
+ * @hidden
+ */
+export interface HeaderAll extends HeaderMethods, HeaderData, HeaderComputed {
+}
+/**
+ * @hidden
+ */
+declare let HeaderVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<HeaderAll>, {}, RecordPropsDefinition<HeaderProps>>;
+/**
+ * @hidden
+ */
+declare const Header: DefineComponent<HeaderProps, any, HeaderData, HeaderComputed, HeaderMethods, {}, {}, {}, string, HeaderProps, HeaderProps, {}>;
+export { Header, HeaderVue2 };

package/dist/es/header/Header.js

@@ -0,0 +1,122 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+import { isRtl, getRef, setRef, BrowserSupportService } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var HeaderVue2 = {
+  name: 'KendoHeader',
+  props: {
+    staticHeaders: Boolean,
+    headerRow: Object,
+    columnResize: Object,
+    cols: Array,
+    draggable: Boolean
+  },
+  data: function data() {
+    return {
+      divStyle: {},
+      element: null,
+      headerWrap: null,
+      table: null
+    };
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      return {
+        'k-grid-header': true,
+        'k-grid-draggable-header': this.$props.draggable
+      };
+    }
+  },
+  mounted: function mounted() {
+    this.headerWrap = getRef(this, 'headerWrap');
+    this.table = getRef(this, 'table');
+    this.$props.columnResize.colGroupHeader = getRef(this, 'colGroupHeader');
+    var scrollbarWidth = new BrowserSupportService().scrollbarWidth;
+    var rtl = isRtl(this.$el);
+
+    if (this.$props.columnResize) {
+      this.$props.columnResize.setIsRtl(rtl);
+    }
+
+    var padding = Math.max(0, scrollbarWidth) + 'px';
+    var right = rtl ? 0 : padding;
+    var left = rtl ? padding : 0;
+    this.divStyle = {
+      padding: "0 ".concat(right, " 0 ").concat(left)
+    };
+  },
+  methods: {
+    setScrollLeft: function setScrollLeft(scrollLeft) {
+      if (this.headerWrap) {
+        this.headerWrap.scrollLeft = scrollLeft;
+      }
+    },
+    setWidth: function setWidth(width) {
+      if (this.table) {
+        this.table.style.width = width + 'px';
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var headerWrapRef = ref(null);
+    var tableRef = ref(null);
+    var colGroupHeaderRef = ref(null);
+    return {
+      v3: v3,
+      headerWrapRef: headerWrapRef,
+      tableRef: tableRef,
+      colGroupHeaderRef: colGroupHeaderRef
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+
+    if (!this.$props.staticHeaders) {
+      return this.$props.headerRow;
+    }
+
+    return h("div", {
+      "class": this.wrapperClass,
+      style: this.divStyle,
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
+      }
+    }, [h("div", {
+      ref: setRef(this, 'headerWrap'),
+      "class": "k-grid-header-wrap",
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
+      }
+    }, [h("table", {
+      ref: setRef(this, 'table'),
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
+      }
+    }, [h("colgroup", {
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
+      },
+      ref: setRef(this, 'colGroupHeader')
+    }, [this.$props.cols]), this.$props.headerRow])])]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var Header = HeaderVue2;
+export { Header, HeaderVue2 };

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

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

package/dist/es/header/HeaderCell.js

@@ -0,0 +1,61 @@
+// @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 HeaderCellVue2 = {
+  name: 'KendoHeaderCell',
+  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 HeaderCell = HeaderCellVue2;
+export { HeaderCell, HeaderCellVue2 };