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

package/dist/npm/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 { ColumnMenuProps } from '../interfaces/ColumnMenuProps';
+/**
+ * @hidden
+ */
+export interface ColumnMenuContentProps extends ColumnMenuProps {
+    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/npm/columnmenu/ColumnMenuContent.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnMenuContentVue2 = exports.ColumnMenuContent = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+
+var ColumnMenuSort_1 = require("./ColumnMenuSort");
+
+var ColumnMenuFilter_1 = require("./ColumnMenuFilter");
+
+var kendo_vue_common_1 = require("@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 === kendo_vue_common_1.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(ColumnMenuSort_1.ColumnMenuSort, {
+      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(ColumnMenuFilter_1.ColumnMenuFilter, {
+      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 kendo_vue_common_1.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
+      }
+    });
+  }
+};
+exports.ColumnMenuContentVue2 = ColumnMenuContentVue2;
+/**
+ * @hidden
+ */
+
+var ColumnMenuContent = ColumnMenuContentVue2;
+exports.ColumnMenuContent = ColumnMenuContent;

package/dist/npm/columnmenu/ColumnMenuFilter.d.ts

@@ -0,0 +1,339 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => ColumnMenuFilterData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { ColumnMenuFilterBaseProps } from '../interfaces/ColumnMenuFilterBaseProps';
+/**
+ * @hidden
+ */
+export declare const rootFilterOrDefault: (rootFilter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor;
+/**
+ * Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
+ */
+export declare const filterGroupByField: (field: string, filter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor | null;
+/**
+ * The props of the ColumnMenuFilter component.
+ */
+export interface ColumnMenuFilterProps extends ColumnMenuFilterBaseProps {
+    /**
+     * Controls the expand state of the filter component.
+     */
+    expanded?: boolean;
+    /**
+     * Triggers on each subsequent expand state of the filter component.
+     */
+    onExpandchange?: (nextExpandState: boolean) => void;
+    /**
+     * If set to `false`, the second filter operator and the input will be hidden.
+     */
+    hideSecondFilter?: boolean;
+    filterUI?: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuFilterStateProps {
+    expanded: boolean;
+    filterGroup: CompositeFilterDescriptor;
+}
+/**
+ * @example
+ *  {% meta height:410 %}
+ *  ```html-preview
+ *  <div id="vueapp">
+ *     <Grid :style="{height: '280px'}"
+ *          :data-items="gridData"
+ *          :sortable="true"
+ *          :sort= "sort"
+ *          :filter="filter"
+ *          :expand-field="'Discontinued'"
+ *          @dataStateChange="dataStateChange"
+ *          @expandchange="expandChange"
+ *          :columns="columns">
+ *       </Grid>
+ *  </div>
+ * ```
+ * ```js
+ * import { , ColumnMenuFilter } from '@progress/kendo-vue-grid';
+ * import { process } from '@progress/kendo-data-query';
+ *      const ColumnMenu = {
+ *        props: {
+ *            column: Object,
+ *            sortable: [Boolean, Object],
+ *            sort: {
+ *                type: Array
+ *            },
+ *            filter: Object,
+ *            filterable: Boolean
+ *        },
+ *        components: {
+ *            ColumnMenuFilter
+ *        },
+ *        template: `<div>
+ *            <ColumnMenuFilter
+ *                :column="column"
+ *                :filterable="filterable"
+ *                :filter="filter"
+ *                @closemenu ="closeMenu"
+ *                @expandchange = "expandChange"
+ *                @filterchange = "filterChange"
+ *            />
+ *        </div>`,
+ *        methods: {
+ *            expandChange () {
+ *                this.$emit('expandchange');
+ *            },
+ *            closeMenu () {
+ *                this.$emit('closemenu');
+ *            },
+ *            filterChange (newDescriptor, e) {
+ *                this.$emit('filterchange', newDescriptor, e);
+ *            }
+ *        }
+ *      };
+ *
+ *      Vue.component('Grid', Grid);
+ *      new Vue({
+ *          el: '#vueapp',
+ *          components: {
+ *
+ *          },
+ *          created: function() {
+ *             this.getData();
+ *          },
+ *          methods: {
+ *            getData: function () {
+ *                let dataState = {
+ *                    filter: this.filter,
+ *                    sort: this.sort
+ *                };
+ *                this.gridData = process([{
+ *                    "ProductID": 1,
+ *                    "ProductName": "Chai",
+ *                    "UnitsInStock": 39,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 8, 20)
+ *                },{
+ *                    "ProductID": 2,
+ *                    "ProductName": "Chang",
+ *                    "UnitsInStock": 17,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 7, 12)
+ *                },{
+ *                    "ProductID": 3,
+ *                    "ProductName": "Aniseed Syrup",
+ *                    "UnitsInStock": 13,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 8, 26)
+ *                },{
+ *                    "ProductID": 4,
+ *                    "ProductName": "Chef Anton's Cajun Seasoning",
+ *                    "UnitsInStock": 53,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 9, 19)
+ *                }], dataState);
+ *            },
+ *            createAppState: function(dataState) {
+ *                this.sort = dataState.sort;
+ *                this.filter = dataState.filter;
+ *                this.getData();
+ *            },
+ *            dataStateChange: function (event) {
+ *                this.createAppState(event.data);
+ *            },
+ *            expandChange: function (event) {
+ *                Vue.set(event.dataItem, event.target.$props.expandField, event.value);
+ *            }
+ *          },
+ *          data: function () {
+ *              return {
+ *                 filter: null,
+ *                 sort: [],
+ *                  gridData: [],
+ *                  columns: [
+ *                      { field: 'ProductID'},
+ *                      { field: 'ProductName', title: 'Product Name' },
+ *                      { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
+ *                  ]
+ *              };
+ *          }
+ *       } );
+ * ```
+ */
+/**
+ * @hidden
+ */
+export interface ColumnMenuFilterMethods extends Vue2type {
+    removeGroup: (group: CompositeFilterDescriptor, rootFilter: CompositeFilterDescriptor) => CompositeFilterDescriptor;
+    insertGroup: (group: CompositeFilterDescriptor, rootFilter: CompositeFilterDescriptor) => CompositeFilterDescriptor;
+    isControlled: () => boolean;
+    onFilterExpand: () => void;
+    filterChangeHandler: (e: any, filterIndex?: number) => void;
+    firstFilterChange: (e: any) => void;
+    secondFilterChange: (e: any) => void;
+    filterChange: (filterIndex: number, e: {
+        value: number;
+        operator: string;
+    }) => void;
+    logicChange: (e: any) => void;
+    clear: (e: any) => void;
+    currentFilterGroup: () => CompositeFilterDescriptor;
+    submit: (e: any) => void;
+    handleFocus: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuFilterData {
+    currentExpanded: boolean;
+    filterGroup: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuFilterAll extends ColumnMenuFilterMethods, ColumnMenuFilterData {
+}
+/**
+ * @hidden
+ */
+declare let ColumnMenuFilterVue2: ComponentOptions<Vue2type, DefaultData<ColumnMenuFilterData>, DefaultMethods<ColumnMenuFilterAll>, {}, RecordPropsDefinition<ColumnMenuFilterProps>>;
+/**
+ * Represents the ColumnMenuFilter component.
+ *
+ * {% meta height:410 %}
+ *  ```html-preview
+ *  <div id="vueapp">
+ *     <Grid :style="{height: '280px'}"
+ *          :data-items="gridData"
+ *          :sortable="true"
+ *          :sort= "sort"
+ *          :filter="filter"
+ *          :expand-field="'Discontinued'"
+ *          @datastatechange="dataStateChange"
+ *          @expandchange="expandChange"
+ *          :columns="columns">
+ *       </Grid>
+ *  </div>
+ * ```
+ * ```js
+ * import { , ColumnMenuFilter } from '@progress/kendo-vue-grid';
+ * import { process } from '@progress/kendo-data-query';
+ *      const ColumnMenu = {
+ *        props: {
+ *            column: Object,
+ *            sortable: [Boolean, Object],
+ *            sort: {
+ *                type: Array
+ *            },
+ *            filter: Object,
+ *            filterable: Boolean
+ *        },
+ *        components: {
+ *            ColumnMenuFilter
+ *        },
+ *        template: `<div>
+ *            <ColumnMenuFilter
+ *                :column="column"
+ *                :filterable="filterable"
+ *                :filter="filter"
+ *                @closemenu ="closeMenu"
+ *                @expandchange = "expandChange"
+ *                @filterchange = "filterChange"
+ *            />
+ *        </div>`,
+ *        methods: {
+ *            expandChange () {
+ *                this.$emit('expandchange');
+ *            },
+ *            closeMenu () {
+ *                this.$emit('closemenu');
+ *            },
+ *            filterChange (newDescriptor, e) {
+ *                this.$emit('filterchange', newDescriptor, e);
+ *            }
+ *        }
+ *      };
+ *
+ *      Vue.component('Grid', Grid);
+ *      new Vue({
+ *          el: '#vueapp',
+ *          components: {
+ *
+ *          },
+ *          created: function() {
+ *             this.getData();
+ *          },
+ *          methods: {
+ *            getData: function () {
+ *                let dataState = {
+ *                    filter: this.filter,
+ *                    sort: this.sort
+ *                };
+ *                this.gridData = process([{
+ *                    "ProductID": 1,
+ *                    "ProductName": "Chai",
+ *                    "UnitsInStock": 39,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 8, 20)
+ *                },{
+ *                    "ProductID": 2,
+ *                    "ProductName": "Chang",
+ *                    "UnitsInStock": 17,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 7, 12)
+ *                },{
+ *                    "ProductID": 3,
+ *                    "ProductName": "Aniseed Syrup",
+ *                    "UnitsInStock": 13,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 8, 26)
+ *                },{
+ *                    "ProductID": 4,
+ *                    "ProductName": "Chef Anton's Cajun Seasoning",
+ *                    "UnitsInStock": 53,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 9, 19)
+ *                }], dataState);
+ *            },
+ *            createAppState: function(dataState) {
+ *                this.sort = dataState.sort;
+ *                this.filter = dataState.filter;
+ *                this.getData();
+ *            },
+ *            dataStateChange: function (event) {
+ *                this.createAppState(event.data);
+ *            },
+ *            expandChange: function (event) {
+ *                 event.dataItem[event.target.$props.expandField] = event.value;
+ *                 //
+ *                 // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+ *                 //
+ *                 //   Vue.set(
+ *                 //     event.dataItem,
+ *                 //     event.target.$props.expandField,
+ *                 //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+ *                 //   );
+ *                 //
+ *            }
+ *          },
+ *          data: function () {
+ *              return {
+ *                 filter: null,
+ *                 sort: [],
+ *                  gridData: [],
+ *                  columns: [
+ *                      { field: 'ProductID'},
+ *                      { field: 'ProductName', title: 'Product Name' },
+ *                      { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
+ *                  ]
+ *              };
+ *          }
+ *       } );
+ * ```
+ *
+ * ### props <span class='code'>[ColumnMenuFilterProps]({% slug api_grid_gridcolumnmenufilterprops %})</span>
+ */
+declare const ColumnMenuFilter: DefineComponent<ColumnMenuFilterProps, any, ColumnMenuFilterData, {}, ColumnMenuFilterMethods, {}, {}, {}, string, ColumnMenuFilterProps, ColumnMenuFilterProps, {}>;
+export { ColumnMenuFilter, ColumnMenuFilterVue2 };