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

package/dist/esm/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.js';
+import { tableKeyboardNavigationTools } from '@progress/kendo-vue-data-tools';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, columnMenu } from '../messages.js';
+/**
+ * @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/esm/columnMenu/ColumnMenuContent.d.ts

@@ -0,0 +1,33 @@
+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 { SortDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps';
+/**
+ * @hidden
+ */
+export interface ColumnMenuContentProps extends GridColumnMenuProps {
+    render: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuContentMethods extends Vue2type {
+    handleFocus: (e: any) => void;
+    closeMenu: () => void;
+    contentKeyDown: (e: any) => void;
+    expandChange: () => void;
+    sortChange: (newDescriptor: SortDescriptor[], e: any) => void;
+    filterChange: (newDescriptor: CompositeFilterDescriptor | null, e: any) => void;
+}
+/**
+ * @hidden
+ */
+declare let ColumnMenuContentVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnMenuContentMethods>, {}, RecordPropsDefinition<ColumnMenuContentProps>>;
+/**
+ * @hidden
+ */
+declare const ColumnMenuContent: DefineComponent<ColumnMenuContentProps, any, {}, {}, ColumnMenuContentMethods, {}, {}, {}, string, ColumnMenuContentProps, ColumnMenuContentProps, {}>;
+export { ColumnMenuContent, ColumnMenuContentVue2 };

package/dist/esm/columnMenu/ColumnMenuContent.js

@@ -0,0 +1,123 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { GridColumnMenuSort } from './GridColumnMenuSort.js';
+import { GridColumnMenuFilter } from './GridColumnMenuFilter.js';
+import { getTemplate, Keys } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ColumnMenuContentVue2 = {
+  name: 'KendoColumnMenuContent',
+  props: {
+    column: Object,
+    sortable: [Boolean, Object],
+    sort: {
+      type: Array
+    },
+    filter: Object,
+    filterOperators: Object,
+    filterable: Boolean,
+    render: [Boolean, String, Function, Object]
+  },
+  methods: {
+    handleFocus: function handleFocus(e) {
+      this.$emit('contentfocus', e);
+    },
+    closeMenu: function closeMenu() {
+      this.$emit('closemenu');
+    },
+    expandChange: function expandChange() {
+      this.$emit('expandchange');
+    },
+    sortChange: function sortChange(newDescriptor, e) {
+      this.$emit('sortchange', newDescriptor, e);
+    },
+    filterChange: function filterChange(newDescriptor, e) {
+      this.$emit('filterchange', newDescriptor, e);
+    },
+    contentKeyDown: function contentKeyDown(event) {
+      if (event.keyCode === Keys.esc) {
+        this.$emit('closemenu');
+      }
+    }
+  },
+  // @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("div", {
+      onKeydown: this.contentKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.contentKeyDown
+      }
+    }, [// @ts-ignore
+    h(GridColumnMenuSort, {
+      column: this.$props.column,
+      attrs: this.v3 ? undefined : {
+        column: this.$props.column,
+        sortable: this.$props.sortable,
+        sort: this.$props.sort
+      },
+      sortable: this.$props.sortable,
+      sort: this.$props.sort,
+      onClosemenu: this.closeMenu,
+      on: this.v3 ? undefined : {
+        "closemenu": this.closeMenu,
+        "sortchange": this.sortChange
+      },
+      onSortchange: this.sortChange
+    }), // @ts-ignore
+    h(GridColumnMenuFilter, {
+      column: this.$props.column,
+      attrs: this.v3 ? undefined : {
+        column: this.$props.column,
+        filterable: this.$props.filterable,
+        filter: this.$props.filter,
+        filterOperators: this.$props.filterOperators
+      },
+      filterable: this.$props.filterable,
+      filter: this.$props.filter,
+      filterOperators: this.$props.filterOperators,
+      onFilterfocus: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "filterfocus": this.handleFocus,
+        "closemenu": this.closeMenu,
+        "expandchange": this.expandChange,
+        "filterchange": this.filterChange
+      },
+      onClosemenu: this.closeMenu,
+      onExpandchange: this.expandChange,
+      onFilterchange: this.filterChange
+    })]);
+    return getTemplate.call(this, {
+      h: h,
+      template: typeof renderTemplate !== 'boolean' && renderTemplate,
+      defaultRendering: defaultRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        closemenu: this.closeMenu,
+        filterchange: this.filterChange,
+        sortchange: this.sortChange,
+        expandchange: this.expandChange,
+        contentfocus: this.handleFocus
+      }
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColumnMenuContent = ColumnMenuContentVue2;
+export { ColumnMenuContent, ColumnMenuContentVue2 };

package/dist/esm/columnMenu/GridColumnMenuCheckboxFilter.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 { GridColumnMenuFilterBaseProps } from '../interfaces/GridColumnMenuFilterBaseProps';
+/**
+ * The props of the GridColumnMenuFilter component.
+ */
+export interface GridColumnMenuCheckboxFilterProps extends GridColumnMenuFilterBaseProps {
+    /**
+     * Controls the expand state of the filter component.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the items collection that will be rendered by the GridColumnMenuCheckboxFilter 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 GridColumnMenuFilterStateProps {
+    expanded: boolean;
+    value: string;
+    dataItems: Array<string | object>;
+    dataFromProps: Array<string | object>;
+    currentFilter: CompositeFilterDescriptor;
+}
+/**
+ * @hidden
+ */
+export interface GridColumnMenuCheckboxFilterMethods 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 GridColumnMenuCheckboxFilterState {
+    compositeFilterIndex: number;
+}
+/**
+ * @hidden
+ */
+export interface GridColumnMenuCheckboxFilterData {
+    currentExpanded: boolean;
+    currentValue: any;
+    currentData: any;
+    dataFromProps: any;
+    currentFilter: any;
+}
+/**
+ * @hidden
+ */
+export interface GridColumnMenuCheckboxFilterAll extends GridColumnMenuCheckboxFilterMethods, GridColumnMenuCheckboxFilterData, GridColumnMenuCheckboxFilterState {
+}
+/**
+ * @hidden
+ */
+declare let GridColumnMenuCheckboxFilterVue2: ComponentOptions<Vue2type, DefaultData<GridColumnMenuCheckboxFilterData>, DefaultMethods<GridColumnMenuCheckboxFilterAll>, {}, RecordPropsDefinition<GridColumnMenuCheckboxFilterProps>>;
+/**
+ * @hidden
+ */
+declare const GridColumnMenuCheckboxFilter: DefineComponent<GridColumnMenuCheckboxFilterProps, any, GridColumnMenuCheckboxFilterData, {}, GridColumnMenuCheckboxFilterMethods, {}, {}, {}, string, GridColumnMenuCheckboxFilterProps, GridColumnMenuCheckboxFilterProps, {}>;
+export { GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2 };