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

package/dist/es/cells/FilterCell.d.ts

@@ -0,0 +1,26 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { FilterCellProps } from '../interfaces/FilterCellProps';
+/**
+ * @hidden
+ */
+export interface FilterCellMethods extends Vue2type {
+    triggerClick: () => void;
+    inputChange: (value: any, e: any) => void;
+    operatorChange: (operatorValue: any, e: any) => void;
+    boolDropdownChange: (value: any, e: any) => void;
+    clear: (e: any) => void;
+    triggerChange: (filter: any) => void;
+}
+/**
+ * @hidden
+ */
+declare let FilterCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<FilterCellMethods>, {}, RecordPropsDefinition<FilterCellProps>>;
+/**
+ * @hidden
+ */
+declare const FilterCell: DefineComponent<FilterCellProps, any, {}, {}, FilterCellMethods, {}, {}, {}, string, FilterCellProps, FilterCellProps, {}>;
+export { FilterCell, FilterCellVue2 };

package/dist/es/cells/FilterCell.js

@@ -0,0 +1,263 @@
+// @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 { Button } from '@progress/kendo-vue-buttons';
+import { messages, columnMenuFilterClearButton as filterClearButton, columnMenuFilterChooseOperator as filterChooseOperator } from '../messages/main';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { cellBoolDropdownChange, cellInputChange, cellOperatorChange } from '../filterCommon';
+import { templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var FilterCellVue2 = {
+  name: 'KendoFilterCell',
+  // @ts-ignore
+  emits: {
+    'change': null
+  },
+  props: {
+    id: String,
+    grid: Object,
+    field: String,
+    filterType: String,
+    colSpan: Number,
+    title: String,
+    value: [String, Number, Boolean, Date],
+    operator: [String, Function],
+    operators: Array,
+    booleanValues: Array,
+    onChange: Function,
+    render: [String, Function, Object]
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    }
+  },
+  methods: {
+    inputChange: function inputChange(value, e) {
+      var filter = cellInputChange(value, e, this.$props);
+      this.triggerChange(filter);
+    },
+    operatorChange: function operatorChange(operatorValue, e) {
+      var filter = cellOperatorChange(operatorValue.value.operator, e, this.$props.value);
+      this.triggerChange(filter);
+    },
+    boolDropdownChange: function boolDropdownChange(value, e) {
+      var filter = cellBoolDropdownChange(value.value.operator, e);
+      this.triggerChange(filter);
+    },
+    clear: function clear(e) {
+      e.preventDefault();
+      this.triggerChange({
+        value: '',
+        operator: '',
+        event: e
+      });
+    },
+    triggerChange: function triggerChange(filter) {
+      filter.field = this.$props.field;
+      this.$emit('change', filter);
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var localizationService = provideLocalizationService(this);
+    var selectedOperator = this.$props.operators.find(function (item) {
+      return item.operator === _this.$props.operator;
+    }) || null;
+
+    var renderOperatorEditor = function renderOperatorEditor() {
+      if (this.$props.filterType === 'boolean') {
+        return;
+      }
+
+      return (// @ts-ignore
+        h(DropDownList, {
+          onChange: this.operatorChange,
+          on: this.v3 ? undefined : {
+            "change": this.operatorChange
+          },
+          value: selectedOperator,
+          attrs: this.v3 ? undefined : {
+            value: selectedOperator,
+            iconClassName: "k-i-filter k-icon",
+            "data-items": this.$props.operators,
+            textField: "text",
+            title: localizationService.toLanguageString(filterChooseOperator, messages[filterChooseOperator]),
+            popupSettings: {
+              width: ''
+            }
+          },
+          "class": "k-dropdown-operator",
+          iconClassName: "k-i-filter k-icon",
+          "data-items": this.$props.operators,
+          textField: "text",
+          title: localizationService.toLanguageString(filterChooseOperator, messages[filterChooseOperator]),
+          popupSettings: {
+            width: ''
+          }
+        })
+      );
+    };
+
+    var filterComponent = function filterComponent(filterType, value) {
+      var _this = this;
+
+      switch (filterType) {
+        case 'numeric':
+          return (// @ts-ignore
+            h(NumericTextBox, {
+              value: value,
+              attrs: this.v3 ? undefined : {
+                value: value,
+                title: this.$props.title
+              },
+              onChange: function onChange(e) {
+                _this.inputChange(e.value, e.event);
+              },
+              on: this.v3 ? undefined : {
+                "change": function onChange(e) {
+                  _this.inputChange(e.value, e.event);
+                }
+              },
+              title: this.$props.title
+            })
+          );
+
+        case 'date':
+          return (// @ts-ignore
+            h(DatePicker, {
+              value: value,
+              attrs: this.v3 ? undefined : {
+                value: value,
+                title: this.$props.title
+              },
+              onChange: function onChange(e) {
+                _this.inputChange(e.value, e);
+              },
+              on: this.v3 ? undefined : {
+                "change": function onChange(e) {
+                  _this.inputChange(e.value, e);
+                }
+              },
+              title: this.$props.title
+            })
+          );
+
+        case 'boolean':
+          var booleanValues = this.$props.booleanValues;
+          return (// @ts-ignore
+            h(DropDownList, {
+              onChange: this.boolDropdownChange,
+              on: this.v3 ? undefined : {
+                "change": this.boolDropdownChange
+              },
+              value: booleanValues.find(function (item) {
+                return item.operator === (value !== null ? value : '');
+              }),
+              attrs: this.v3 ? undefined : {
+                value: booleanValues.find(function (item) {
+                  return item.operator === (value !== null ? value : '');
+                }),
+                "data-items": booleanValues,
+                textField: "text",
+                title: this.$props.title
+              },
+              "data-items": booleanValues,
+              textField: "text",
+              title: this.$props.title
+            })
+          );
+
+        default:
+          return h("span", {
+            "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+          }, [h("input", {
+            "class": "k-input-inner",
+            value: this.v3 ? value || '' : null,
+            domProps: this.v3 ? undefined : {
+              "value": value || ''
+            },
+            onInput: function onInput(e) {
+              _this.inputChange(e.target.value, e);
+            },
+            on: this.v3 ? undefined : {
+              "input": function onInput(e) {
+                _this.inputChange(e.target.value, e);
+              }
+            },
+            title: this.$props.title,
+            attrs: this.v3 ? undefined : {
+              title: this.$props.title
+            }
+          })]);
+      }
+    };
+
+    var defaultRendering = h("div", {
+      "class": "k-filtercell"
+    }, [h("div", {
+      "class": "k-filtercell-wrapper"
+    }, [filterComponent.call(this, this.$props.filterType, this.$props.value), renderOperatorEditor.call(this), // @ts-ignore function children 
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        icon: 'filter-clear',
+        title: localizationService.toLanguageString(filterClearButton, messages[filterClearButton])
+      },
+      icon: 'filter-clear',
+      "class": {
+        /* button is always visible if there is either value or operator */
+        'k-disabled': !(!(this.$props.value === null || this.$props.value === '') || this.$props.operator)
+      },
+      title: localizationService.toLanguageString(filterClearButton, messages[filterClearButton]),
+      onClick: this.clear,
+      on: this.v3 ? undefined : {
+        "click": this.clear
+      }
+    })])]);
+    var gridListeners = this.$props.grid ? getListeners.call(this.$props.grid) : null;
+    var cellRenderFunction = templateRendering.call(this.$props.grid, this.$props.render, gridListeners);
+    return getTemplate.call(this, {
+      h: h,
+      template: cellRenderFunction,
+      defaultRendering: defaultRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        change: this.triggerChange
+      }
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var FilterCell = FilterCellVue2;
+export { FilterCell, FilterCellVue2 };

package/dist/es/columnmenu/ColumnMenu.d.ts

@@ -0,0 +1,56 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => ColumnMenuData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ColumnMenuProps } from '../interfaces/ColumnMenuProps';
+import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
+/**
+ * @hidden
+ */
+export interface ColumnMenuMethods extends Vue2type {
+    blur: () => void;
+    focus: () => void;
+    handleFocus: (_: any) => void;
+    anchorClick: () => void;
+    closeMenu: () => void;
+    sortChange: () => void;
+    filterChange: (newDescriptor: CompositeFilterDescriptor | null, e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuData {
+    show: boolean;
+    blurTimeout: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuComputed {
+    [key: string]: any;
+    currentOpen: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuState {
+    _anchor: string;
+    _content: any;
+    kendoAnchorRef: any;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuAll extends ColumnMenuMethods, ColumnMenuData, ColumnMenuState, ColumnMenuComputed {
+}
+/**
+ * @hidden
+ */
+declare let ColumnMenuVue2: ComponentOptions<Vue2type, DefaultData<ColumnMenuData>, DefaultMethods<ColumnMenuAll>, {}, RecordPropsDefinition<ColumnMenuProps>>;
+/**
+ * @hidden
+ */
+declare const ColumnMenu: DefineComponent<ColumnMenuProps, any, ColumnMenuData, ColumnMenuComputed, ColumnMenuMethods, {}, {}, {}, string, ColumnMenuProps, ColumnMenuProps, {}>;
+export { ColumnMenu, ColumnMenuVue2 };

package/dist/es/columnmenu/ColumnMenu.js

@@ -0,0 +1,252 @@
+// @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 { guid, setRef } from '@progress/kendo-vue-common';
+import { Popup } from '@progress/kendo-vue-popup';
+import { ColumnMenuContent } from './ColumnMenuContent';
+import { tableKeyboardNavigationTools } from '../navigation/utils';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, columnMenu } from '../messages/main';
+/**
+ * @hidden
+ */
+
+var ColumnMenuVue2 = {
+  name: 'KendoColumnMenu',
+  props: {
+    animate: {
+      type: [Boolean, Object],
+      default: function _default() {
+        return true;
+      }
+    },
+    column: Object,
+    sortable: [Boolean, Object],
+    sort: {
+      type: Array
+    },
+    opened: Boolean,
+    filter: Object,
+    filterable: Boolean,
+    filterOperators: Object,
+    render: [Boolean, String, Function, Object]
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      show: false,
+      blurTimeout: undefined
+    };
+  },
+  created: function created() {
+    this._anchor = guid();
+  },
+  computed: {
+    currentOpen: function currentOpen() {
+      return this.show || this.$props.opened;
+    }
+  },
+  watch: {
+    currentOpen: function currentOpen(newOpened) {
+      this.$nextTick(function () {
+        this._content = this.$refs.content;
+
+        if (newOpened && this._content) {
+          var focusableElements = tableKeyboardNavigationTools.getFocusableElements(this._content, {
+            focusable: true
+          });
+
+          if (focusableElements.length) {
+            focusableElements[0].focus();
+          } else {
+            this._content.focus();
+          }
+        }
+      });
+    }
+  },
+  methods: {
+    blur: function blur() {
+      var _this = this;
+
+      clearTimeout(this.blurTimeout);
+      this.blurTimeout = setTimeout(function () {
+        _this.closeMenu();
+      }, 200);
+    },
+    focus: function focus() {
+      clearTimeout(this.blurTimeout);
+    },
+    handleFocus: function handleFocus(_) {
+      clearTimeout(this.blurTimeout);
+    },
+    anchorClick: function anchorClick() {
+      var that = this;
+      this.show = !this.show;
+    },
+    closeMenu: function closeMenu() {
+      this.$emit('close');
+      this.show = false;
+    },
+    sortChange: function sortChange(newDescriptor, e) {
+      this.$emit('sortchange', newDescriptor, e);
+    },
+    filterChange: function filterChange(newDescriptor, e) {
+      this.$emit('filterchange', newDescriptor, 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 _this2 = this;
+
+    var h = gh || createElement;
+    var renderTemplate = this.$props.render;
+    var ls = provideLocalizationService(this);
+    return h("div", {
+      style: {
+        display: 'inline'
+      }
+    }, [h("div", {
+      "class": 'k-grid-column-menu k-grid-filter',
+      tabindex: 0,
+      attrs: this.v3 ? undefined : {
+        tabindex: 0,
+        title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(columnMenu, messages[columnMenu]))
+      },
+      title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(columnMenu, messages[columnMenu])),
+      ref: setRef(this, 'kendoAnchor', this._anchor),
+      onClick: this.anchorClick,
+      on: this.v3 ? undefined : {
+        "click": this.anchorClick
+      }
+    }, [h("span", {
+      "class": 'k-icon k-i-more-vertical'
+    })]), // @ts-ignore function children
+    h(Popup, {
+      animate: this.$props.animate,
+      attrs: this.v3 ? undefined : {
+        animate: this.$props.animate,
+        anchor: this._anchor,
+        show: this.currentOpen
+      },
+      anchor: this._anchor,
+      show: this.currentOpen
+    }, this.v3 ? function () {
+      return [h("div", {
+        ref: 'content',
+        "class": 'k-grid-columnmenu-popup',
+        tabindex: 0,
+        attrs: _this2.v3 ? undefined : {
+          tabindex: 0
+        },
+        onFocusout: _this2.blur,
+        on: _this2.v3 ? undefined : {
+          "focusout": _this2.blur,
+          "focusin": _this2.focus
+        },
+        onFocusin: _this2.focus,
+        style: {
+          outline: 'none',
+          width: '230px'
+        }
+      }, [// @ts-ignore
+      h(ColumnMenuContent, {
+        column: _this2.$props.column,
+        attrs: _this2.v3 ? undefined : {
+          column: _this2.$props.column,
+          sortable: _this2.$props.sortable,
+          sort: _this2.$props.sort,
+          filter: _this2.$props.filter,
+          filterable: _this2.$props.filterable,
+          filterOperators: _this2.$props.filterOperators,
+          render: renderTemplate
+        },
+        sortable: _this2.$props.sortable,
+        sort: _this2.$props.sort,
+        filter: _this2.$props.filter,
+        filterable: _this2.$props.filterable,
+        filterOperators: _this2.$props.filterOperators,
+        render: renderTemplate,
+        onContentfocus: _this2.handleFocus,
+        on: _this2.v3 ? undefined : {
+          "contentfocus": _this2.handleFocus,
+          "closemenu": _this2.closeMenu,
+          "sortchange": _this2.sortChange,
+          "filterchange": _this2.filterChange
+        },
+        onClosemenu: _this2.closeMenu,
+        onSortchange: _this2.sortChange,
+        onFilterchange: _this2.filterChange
+      })])];
+    } : [h("div", {
+      ref: 'content',
+      "class": 'k-grid-columnmenu-popup',
+      tabindex: 0,
+      attrs: _this2.v3 ? undefined : {
+        tabindex: 0
+      },
+      onFocusout: _this2.blur,
+      on: _this2.v3 ? undefined : {
+        "focusout": _this2.blur,
+        "focusin": _this2.focus
+      },
+      onFocusin: _this2.focus,
+      style: {
+        outline: 'none',
+        width: '230px'
+      }
+    }, [h(ColumnMenuContent, {
+      column: _this2.$props.column,
+      attrs: _this2.v3 ? undefined : {
+        column: _this2.$props.column,
+        sortable: _this2.$props.sortable,
+        sort: _this2.$props.sort,
+        filter: _this2.$props.filter,
+        filterable: _this2.$props.filterable,
+        filterOperators: _this2.$props.filterOperators,
+        render: renderTemplate
+      },
+      sortable: _this2.$props.sortable,
+      sort: _this2.$props.sort,
+      filter: _this2.$props.filter,
+      filterable: _this2.$props.filterable,
+      filterOperators: _this2.$props.filterOperators,
+      render: renderTemplate,
+      onContentfocus: _this2.handleFocus,
+      on: _this2.v3 ? undefined : {
+        "contentfocus": _this2.handleFocus,
+        "closemenu": _this2.closeMenu,
+        "sortchange": _this2.sortChange,
+        "filterchange": _this2.filterChange
+      },
+      onClosemenu: _this2.closeMenu,
+      onSortchange: _this2.sortChange,
+      onFilterchange: _this2.filterChange
+    })])])]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColumnMenu = ColumnMenuVue2;
+export { ColumnMenu, ColumnMenuVue2 };

package/dist/es/columnmenu/ColumnMenuCheckboxFilter.d.ts

@@ -0,0 +1,86 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { ColumnMenuFilterBaseProps } from '../interfaces/ColumnMenuFilterBaseProps';
+/**
+ * The props of the ColumnMenuFilter component.
+ */
+export interface ColumnMenuCheckboxFilterProps extends ColumnMenuFilterBaseProps {
+    /**
+     * Controls the expand state of the filter component.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the items collection that will be rendered by the ColumnMenuCheckboxFilter component.
+     */
+    dataItems: Array<string | object>;
+    /**
+     * Triggered on each subsequent expand state of the filter component.
+     */
+    expandchange?: (nextExpandState: boolean) => void;
+    /**
+     * Defines the component that will be rendered as a search box.
+     */
+    searchBox?: any;
+    /**
+     * Determines if the data in the component will be unique. By default the property is set to true.
+     */
+    uniqueData?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuFilterStateProps {
+    expanded: boolean;
+    value: string;
+    dataItems: Array<string | object>;
+    dataFromProps: Array<string | object>;
+    currentFilter: CompositeFilterDescriptor;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuCheckboxFilterMethods extends Vue2type {
+    defaultFilter: () => CompositeFilterDescriptor;
+    parseData: (originalData: any, isUnique: any) => any;
+    getFilterIndex: () => number;
+    onFilterExpand: () => void;
+    handleSearchChange: (e: any) => void;
+    clear: (e: any) => void;
+    submit: (e: any) => void;
+    handleCheckBoxChange: (e: any, value: any) => void;
+    isAllSelected: () => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuCheckboxFilterState {
+    compositeFilterIndex: number;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuCheckboxFilterData {
+    currentExpanded: boolean;
+    currentValue: any;
+    currentData: any;
+    dataFromProps: any;
+    currentFilter: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuCheckboxFilterAll extends ColumnMenuCheckboxFilterMethods, ColumnMenuCheckboxFilterData, ColumnMenuCheckboxFilterState {
+}
+/**
+ * @hidden
+ */
+declare let ColumnMenuCheckboxFilterVue2: ComponentOptions<Vue2type, DefaultData<ColumnMenuCheckboxFilterData>, DefaultMethods<ColumnMenuCheckboxFilterAll>, {}, RecordPropsDefinition<ColumnMenuCheckboxFilterProps>>;
+/**
+ * @hidden
+ */
+declare const ColumnMenuCheckboxFilter: DefineComponent<ColumnMenuCheckboxFilterProps, any, ColumnMenuCheckboxFilterData, {}, ColumnMenuCheckboxFilterMethods, {}, {}, {}, string, ColumnMenuCheckboxFilterProps, ColumnMenuCheckboxFilterProps, {}>;
+export { ColumnMenuCheckboxFilter, ColumnMenuCheckboxFilterVue2 };