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

package/dist/es/columnmenu/ColumnMenuItemGroup.js

@@ -0,0 +1,33 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ColumnMenuItemGroupVue2 = {
+  // @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);
+    return h("div", {
+      "class": "k-columnmenu-item-wrapper"
+    }, [defaultSlot]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColumnMenuItemGroup = ColumnMenuItemGroupVue2;
+export { ColumnMenuItemGroup, ColumnMenuItemGroupVue2 };

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

@@ -0,0 +1,65 @@
+import { FilterOperator } from '../interfaces/FilterOperator';
+/**
+ * Represents the operators for the ColumnMenuTextFilter, ColumnMenuNumericFilter,
+ * ColumnMenuDateFilter and ColumnMenuBooleanFilter components.
+ *
+ * The text field of each operator object will be resolved according to the
+ * [localization messages]({% slug globalization_datatools %}#toc-messages).
+ */
+export declare class ColumnMenuOperators {
+    /**
+     * An array containing the operators for the ColumnMenuTextFilter component.
+     *
+     * The operators are:
+     *
+     * - { text: 'columnMenu.filterContainsOperator', operator: 'contains' }
+     * - { text: 'columnMenu.filterNotContainsOperator', operator: 'doesnotcontain' }
+     * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
+     * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
+     * - { text: 'columnMenu.filterStartsWithOperator', operator: 'startswith' }
+     * - { text: 'columnMenu.filterEndsWithOperator', operator: 'endswith' }
+     * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
+     * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
+     * - { text: 'columnMenu.filterIsEmptyOperator', operator: 'isempty' }
+     * - { text: 'columnMenu.filterIsNotEmptyOperator', operator: 'isnotempty' }
+     */
+    static get text(): FilterOperator[];
+    /**
+     * An array containing the operators for the ColumnMenuNumericFilter component.
+     *
+     * The operators are:
+     *
+     * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
+     * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
+     * - { text: 'columnMenu.filterGteOperator', operator: 'gte' }
+     * - { text: 'columnMenu.filterGtOperator', operator: 'gt' }
+     * - { text: 'columnMenu.filterLteOperator', operator: 'lte' }
+     * - { text: 'columnMenu.filterLtOperator', operator: 'lt' }
+     * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
+     * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
+     */
+    static get numeric(): FilterOperator[];
+    /**
+     * An array containing the operators for the ColumnMenuDateFilter component.
+     *
+     * The operators are:
+     *
+     * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
+     * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
+     * - { text: 'columnMenu.filterAfterOrEqualOperator', operator: 'gte' }
+     * - { text: 'columnMenu.filterAfterOperator', operator: 'gt' }
+     * - { text: 'columnMenu.filterBeforeOperator', operator: 'lt' }
+     * - { text: 'columnMenu.filterBeforeOrEqualOperator', operator: 'lte' }
+     * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
+     * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
+     */
+    static get date(): FilterOperator[];
+    /**
+     * An array containing the operators for the ColumnMenuBooleanFilter component.
+     *
+     * The operators are:
+     *
+     * - { text: 'columnMenu.filterIsTrue', operator: '' }
+     */
+    static get boolean(): FilterOperator[];
+}

package/dist/es/columnmenu/ColumnMenuOperators.js

@@ -0,0 +1,137 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { columnMenuFilterEqOperator, columnMenuFilterNotEqOperator, columnMenuFilterIsNullOperator, columnMenuFilterIsNotNullOperator, columnMenuFilterIsEmptyOperator, columnMenuFilterIsNotEmptyOperator, columnMenuFilterStartsWithOperator, columnMenuFilterContainsOperator, columnMenuFilterNotContainsOperator, columnMenuFilterEndsWithOperator, columnMenuFilterGteOperator, columnMenuFilterGtOperator, columnMenuFilterLteOperator, columnMenuFilterLtOperator, columnMenuFilterAfterOrEqualOperator, columnMenuFilterAfterOperator, columnMenuFilterBeforeOperator, columnMenuFilterBeforeOrEqualOperator, columnMenuFilterIsTrue } from '../messages/main';
+var textOperators = [
+    { text: columnMenuFilterContainsOperator, operator: 'contains' },
+    { text: columnMenuFilterNotContainsOperator, operator: 'doesnotcontain' },
+    { text: columnMenuFilterEqOperator, operator: 'eq' },
+    { text: columnMenuFilterNotEqOperator, operator: 'neq' },
+    { text: columnMenuFilterStartsWithOperator, operator: 'startswith' },
+    { text: columnMenuFilterEndsWithOperator, operator: 'endswith' },
+    { text: columnMenuFilterIsNullOperator, operator: 'isnull' },
+    { text: columnMenuFilterIsNotNullOperator, operator: 'isnotnull' },
+    { text: columnMenuFilterIsEmptyOperator, operator: 'isempty' },
+    { text: columnMenuFilterIsNotEmptyOperator, operator: 'isnotempty' }
+];
+var numericOperators = [
+    { text: columnMenuFilterEqOperator, operator: 'eq' },
+    { text: columnMenuFilterNotEqOperator, operator: 'neq' },
+    { text: columnMenuFilterGteOperator, operator: 'gte' },
+    { text: columnMenuFilterGtOperator, operator: 'gt' },
+    { text: columnMenuFilterLteOperator, operator: 'lte' },
+    { text: columnMenuFilterLtOperator, operator: 'lt' },
+    { text: columnMenuFilterIsNullOperator, operator: 'isnull' },
+    { text: columnMenuFilterIsNotNullOperator, operator: 'isnotnull' }
+];
+var dateOperators = [
+    { text: columnMenuFilterEqOperator, operator: 'eq' },
+    { text: columnMenuFilterNotEqOperator, operator: 'neq' },
+    { text: columnMenuFilterAfterOrEqualOperator, operator: 'gte' },
+    { text: columnMenuFilterAfterOperator, operator: 'gt' },
+    { text: columnMenuFilterBeforeOperator, operator: 'lt' },
+    { text: columnMenuFilterBeforeOrEqualOperator, operator: 'lte' },
+    { text: columnMenuFilterIsNullOperator, operator: 'isnull' },
+    { text: columnMenuFilterIsNotNullOperator, operator: 'isnotnull' }
+];
+var booleanOperators = [
+    { text: columnMenuFilterIsTrue, operator: '' }
+];
+/**
+ * Represents the operators for the ColumnMenuTextFilter, ColumnMenuNumericFilter,
+ * ColumnMenuDateFilter and ColumnMenuBooleanFilter components.
+ *
+ * The text field of each operator object will be resolved according to the
+ * [localization messages]({% slug globalization_datatools %}#toc-messages).
+ */
+var ColumnMenuOperators = /** @class */ (function () {
+    function ColumnMenuOperators() {
+    }
+    Object.defineProperty(ColumnMenuOperators, "text", {
+        /**
+         * An array containing the operators for the ColumnMenuTextFilter component.
+         *
+         * The operators are:
+         *
+         * - { text: 'columnMenu.filterContainsOperator', operator: 'contains' }
+         * - { text: 'columnMenu.filterNotContainsOperator', operator: 'doesnotcontain' }
+         * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
+         * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
+         * - { text: 'columnMenu.filterStartsWithOperator', operator: 'startswith' }
+         * - { text: 'columnMenu.filterEndsWithOperator', operator: 'endswith' }
+         * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
+         * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
+         * - { text: 'columnMenu.filterIsEmptyOperator', operator: 'isempty' }
+         * - { text: 'columnMenu.filterIsNotEmptyOperator', operator: 'isnotempty' }
+         */
+        get: function () {
+            return __spreadArray([], textOperators, true);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuOperators, "numeric", {
+        /**
+         * An array containing the operators for the ColumnMenuNumericFilter component.
+         *
+         * The operators are:
+         *
+         * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
+         * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
+         * - { text: 'columnMenu.filterGteOperator', operator: 'gte' }
+         * - { text: 'columnMenu.filterGtOperator', operator: 'gt' }
+         * - { text: 'columnMenu.filterLteOperator', operator: 'lte' }
+         * - { text: 'columnMenu.filterLtOperator', operator: 'lt' }
+         * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
+         * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
+         */
+        get: function () {
+            return __spreadArray([], numericOperators, true);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuOperators, "date", {
+        /**
+         * An array containing the operators for the ColumnMenuDateFilter component.
+         *
+         * The operators are:
+         *
+         * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
+         * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
+         * - { text: 'columnMenu.filterAfterOrEqualOperator', operator: 'gte' }
+         * - { text: 'columnMenu.filterAfterOperator', operator: 'gt' }
+         * - { text: 'columnMenu.filterBeforeOperator', operator: 'lt' }
+         * - { text: 'columnMenu.filterBeforeOrEqualOperator', operator: 'lte' }
+         * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
+         * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
+         */
+        get: function () {
+            return __spreadArray([], dateOperators, true);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ColumnMenuOperators, "boolean", {
+        /**
+         * An array containing the operators for the ColumnMenuBooleanFilter component.
+         *
+         * The operators are:
+         *
+         * - { text: 'columnMenu.filterIsTrue', operator: '' }
+         */
+        get: function () {
+            return __spreadArray([], booleanOperators, true);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return ColumnMenuOperators;
+}());
+export { ColumnMenuOperators };

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

@@ -0,0 +1,283 @@
+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 } from '@progress/kendo-data-query';
+import { ColumnMenuSortBaseProps } from '../interfaces/ColumnMenuSortBaseProps';
+/**
+ * Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
+ */
+export declare const sortGroupByField: (field: string, sort?: SortDescriptor[]) => boolean;
+/**
+ * The props of the ColumnMenuSort component.
+ */
+export interface ColumnMenuSortProps extends ColumnMenuSortBaseProps {
+}
+/**
+ * @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 { , ColumnMenuSort } 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: {
+ *            ColumnMenuSort
+ *        },
+ *        template: `<div>
+ *            <GridColumnMenuSort
+ *                :column="column"
+ *                :filterable="filterable"
+ *                :filter="filter"
+ *                @closemenu ="closeMenu"
+ *                @sortchange = "sortChange"
+ *            />
+ *        </div>`,
+ *        methods: {
+ *            closeMenu () {
+ *                this.$emit('closemenu');
+ *            },
+ *            sortChange (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 ColumnMenuSortMethods extends Vue2type {
+    onAscClick: (e: any) => void;
+    onDescClick: (e: any) => void;
+    onSort: (e: any, selectedDir: 'asc' | 'desc') => void;
+}
+/**
+ * @hidden
+ */
+declare let ColumnMenuSortVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnMenuSortMethods>, {}, RecordPropsDefinition<ColumnMenuSortProps>>;
+/**
+ *
+ *
+ * {% 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 { , ColumnMenuSort } 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: {
+ *            ColumnMenuSort
+ *        },
+ *        template: `<div>
+ *            <ColumnMenuSort
+ *                :column="column"
+ *                :filterable="filterable"
+ *                :filter="filter"
+ *                @closemenu ="closeMenu"
+ *                @sortchange = "sortChange"
+ *            />
+ *        </div>`,
+ *        methods: {
+ *            closeMenu () {
+ *                this.$emit('closemenu');
+ *            },
+ *            sortChange (newDescriptor, e) {
+ *                this.$emit('filterchange', newDescriptor, e);
+ *            }
+ *        }
+ *      };
+ *
+ *      Vue.component('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'>[GridColumnMenuSortProps]({% slug api_grid_gridcolumnmenusortprops %})</span>
+ */
+declare const ColumnMenuSort: DefineComponent<ColumnMenuSortProps, any, {}, {}, ColumnMenuSortMethods, {}, {}, {}, string, ColumnMenuSortProps, ColumnMenuSortProps, {}>;
+export { ColumnMenuSort, ColumnMenuSortVue2 };