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

package/dist/es/columnmenu/ColumnMenuSort.js

@@ -0,0 +1,375 @@
+// @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 { ColumnMenuItem } from './ColumnMenuItem';
+import { ColumnMenuItemGroup } from './ColumnMenuItemGroup';
+import { normalize } from '../interfaces/SortSettings';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, columnMenuSortAscending as sortAscending, columnMenuSortDescending as sortDescending } from '../messages/main';
+import { hasListener } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ASC_DIR = 'asc';
+/**
+ * @hidden
+ */
+
+var DESC_DIR = 'desc';
+/**
+ * @hidden
+ */
+
+var sortSeqMap = {
+  true: {
+    'asc': {
+      'asc': '',
+      'desc': 'desc'
+    },
+    'desc': {
+      'asc': 'asc',
+      'desc': ''
+    },
+    '': {
+      'asc': 'asc',
+      'desc': 'desc'
+    }
+  },
+  false: {
+    'asc': {
+      'asc': 'asc',
+      'desc': 'desc'
+    },
+    'desc': {
+      'asc': 'asc',
+      'desc': 'desc'
+    },
+    '': {
+      'asc': 'asc',
+      'desc': 'desc'
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var sortIndex = function sortIndex(field, sort) {
+  if (!sort) {
+    return -1;
+  }
+
+  return sort.findIndex(function (s) {
+    return s.field === field;
+  });
+};
+/**
+ * @hidden
+ */
+
+
+var sortedAsc = function sortedAsc(sortedIndex, sort) {
+  return !!(sort && sortedIndex > -1 && sort[sortedIndex].dir === ASC_DIR);
+};
+/**
+ * @hidden
+ */
+
+
+var sortedDesc = function sortedDesc(sortedIndex, sort) {
+  return !!(sort && sortedIndex > -1 && sort[sortedIndex].dir === DESC_DIR);
+}; // tslint:disable:max-line-length
+
+/**
+ * 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.
+ */
+// tslint:enable:max-line-length
+
+
+export var sortGroupByField = function sortGroupByField(field, sort) {
+  var currentSortIndex = sortIndex(field, sort);
+  return sortedDesc(currentSortIndex, sort) || sortedAsc(currentSortIndex, sort);
+};
+/**
+ * @hidden
+ */
+
+var ColumnMenuSortVue2 = {
+  props: {
+    sortable: [Boolean, Object],
+    sort: {
+      type: Array
+    },
+    column: Object
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  methods: {
+    onAscClick: function onAscClick(e) {
+      this.onSort(e, ASC_DIR);
+      this.$emit('closemenu');
+    },
+    onDescClick: function onDescClick(e) {
+      this.onSort(e, DESC_DIR);
+      this.$emit('closemenu');
+    },
+    onSort: function onSort(e, selectedDir) {
+      e.preventDefault();
+
+      if (!hasListener.call(this, 'sortchange')) {
+        return;
+      }
+
+      var _a = this.$props,
+          column = _a.column,
+          sortable = _a.sortable,
+          sort = _a.sort;
+
+      var _b = normalize(sortable || false, false),
+          allowUnsort = _b.allowUnsort,
+          mode = _b.mode;
+
+      var oldDescriptor = (sort || []).filter(function (d) {
+        return d.field === column.field;
+      })[0];
+      var dir = sortSeqMap[allowUnsort][oldDescriptor && oldDescriptor.dir || ''][selectedDir];
+      var newDescriptor = mode === 'single' ? [] : (this.$props.sort || []).filter(function (d) {
+        return d.field !== column.field;
+      });
+
+      if (dir !== '' && column.field) {
+        newDescriptor.push({
+          field: column.field,
+          dir: dir
+        });
+      }
+
+      this.$emit('sortchange', newDescriptor, {
+        event: e,
+        field: this.$props.column.field
+      });
+    }
+  },
+  // @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 _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        sort = _a.sort,
+        column = _a.column;
+    var currentSortIndex = sortIndex(column.field, sort);
+    var localizationService = provideLocalizationService(this);
+    return (// @ts-ignore function children
+      h(ColumnMenuItemGroup, this.v3 ? function () {
+        return [// @ts-ignore
+        h(ColumnMenuItem, {
+          title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
+          attrs: _this.v3 ? undefined : {
+            title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
+            iconClass: 'k-i-sort-asc-sm',
+            selected: sortedAsc(currentSortIndex, sort)
+          },
+          iconClass: 'k-i-sort-asc-sm',
+          selected: sortedAsc(currentSortIndex, sort),
+          onMenuitemclick: _this.onAscClick,
+          on: _this.v3 ? undefined : {
+            "menuitemclick": _this.onAscClick
+          }
+        }), // @ts-ignore
+        h(ColumnMenuItem, {
+          title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
+          attrs: _this.v3 ? undefined : {
+            title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
+            iconClass: 'k-i-sort-desc-sm',
+            selected: sortedDesc(currentSortIndex, sort)
+          },
+          iconClass: 'k-i-sort-desc-sm',
+          selected: sortedDesc(currentSortIndex, sort),
+          onMenuitemclick: _this.onDescClick,
+          on: _this.v3 ? undefined : {
+            "menuitemclick": _this.onDescClick
+          }
+        })];
+      } : [h(ColumnMenuItem, {
+        title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
+        attrs: _this.v3 ? undefined : {
+          title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
+          iconClass: 'k-i-sort-asc-sm',
+          selected: sortedAsc(currentSortIndex, sort)
+        },
+        iconClass: 'k-i-sort-asc-sm',
+        selected: sortedAsc(currentSortIndex, sort),
+        onMenuitemclick: _this.onAscClick,
+        on: _this.v3 ? undefined : {
+          "menuitemclick": _this.onAscClick
+        }
+      }), h(ColumnMenuItem, {
+        title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
+        attrs: _this.v3 ? undefined : {
+          title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
+          iconClass: 'k-i-sort-desc-sm',
+          selected: sortedDesc(currentSortIndex, sort)
+        },
+        iconClass: 'k-i-sort-desc-sm',
+        selected: sortedDesc(currentSortIndex, sort),
+        onMenuitemclick: _this.onDescClick,
+        on: _this.v3 ? undefined : {
+          "menuitemclick": _this.onDescClick
+        }
+      })])
+    );
+  }
+};
+/**
+ *
+ *
+ * {% 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>
+ */
+
+var ColumnMenuSort = ColumnMenuSortVue2;
+export { ColumnMenuSort, ColumnMenuSortVue2 };

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

@@ -0,0 +1,2 @@
+export * from './ColumnMenu';
+export * from './ColumnMenuOperators';

package/dist/es/columnmenu/main.js

@@ -0,0 +1,6 @@
+export * from './ColumnMenu';
+// export * from './ColumnMenuFilterForm';
+// export * from './ColumnMenuFilterLogic';
+// export * from './ColumnMenuFilters';
+// export * from './ColumnMenuItem';
+export * from './ColumnMenuOperators';

package/dist/es/drag/ColumnDraggable.d.ts

@@ -0,0 +1,43 @@
+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;
+};
+/**
+ * @hidden
+ */
+export interface ColumnDraggableProps {
+    key?: any;
+    onPressHandler?: (draggableEvent: any, element: HTMLElement) => void;
+    onDragHandler?: (draggableEvent: any, element: HTMLElement) => void;
+    onReleaseHandler?: (draggableEvent: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnDraggableMethods extends Vue2type {
+    onPress: (event: any) => void;
+    onDrag: (event: any) => void;
+    onRelease: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnDraggableState {
+    element: any | null;
+    draggable: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnDraggableAll extends ColumnDraggableMethods, ColumnDraggableState {
+}
+/**
+ * @hidden
+ */
+declare let ColumnDraggableVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnDraggableAll>, {}, RecordPropsDefinition<ColumnDraggableProps>>;
+/**
+ * @hidden
+ */
+declare const ColumnDraggable: DefineComponent<ColumnDraggableProps, any, {}, {}, ColumnDraggableMethods, {}, {}, {}, string, ColumnDraggableProps, ColumnDraggableProps, {}>;
+export { ColumnDraggable, ColumnDraggableVue2 };

package/dist/es/drag/ColumnDraggable.js

@@ -0,0 +1,73 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots, Draggable } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ColumnDraggableVue2 = {
+  mounted: function mounted() {
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+    }
+  },
+  methods: {
+    onPress: function onPress(event) {
+      var element = this.draggable && this.draggable.element;
+
+      if (element) {
+        this.$emit('pressHandler', event, element);
+      }
+    },
+    onDrag: function onDrag(event) {
+      var element = this.draggable && this.draggable.element;
+
+      if (element) {
+        this.$emit('dragHandler', event, element);
+      }
+    },
+    onRelease: function onRelease(event) {
+      var element = this.draggable && this.draggable.element;
+
+      if (element) {
+        this.$emit('releaseHandler', event, element);
+      }
+    }
+  },
+  // @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 (// @ts-ignore  function children
+      h(Draggable, {
+        onPress: this.onPress,
+        on: this.v3 ? undefined : {
+          "press": this.onPress,
+          "drag": this.onDrag,
+          "release": this.onRelease
+        },
+        onDrag: this.onDrag,
+        onRelease: this.onRelease,
+        ref: 'draggable'
+      }, this.v3 ? function () {
+        return [h("tr", [defaultSlot])];
+      } : [h("tr", [defaultSlot])])
+    );
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColumnDraggable = ColumnDraggableVue2;
+export { ColumnDraggable, ColumnDraggableVue2 };

package/dist/es/drag/ColumnResize.d.ts

@@ -0,0 +1,31 @@
+import { ExtendedColumnProps } from '../interfaces/ColumnProps';
+/**
+ * @hidden
+ */
+export declare class ColumnResize {
+    /**
+     * The main `colgroup` of the Grid.
+     */
+    colGroupMain: any | null;
+    /**
+     * The header `colgroup` of the Grid, if any.
+     */
+    colGroupHeader: any | null;
+    /**
+     * The footer `colgroup` of the Grid (if any).
+     */
+    colGroupFooter: any | null;
+    columns: ExtendedColumnProps[];
+    /**
+     * The settings for resizing the Grid.
+     */
+    resizable: boolean;
+    onResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void;
+    private isRtl;
+    constructor(triggerResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void);
+    setIsRtl: (isRtl: boolean) => void;
+    dragHandler(event: any, column: ExtendedColumnProps, dragCue: HTMLSpanElement, end: boolean): void;
+    private fixateInitialWidths;
+    private setWidths;
+    private updateColElements;
+}

package/dist/es/drag/ColumnResize.js

@@ -0,0 +1,126 @@
+/**
+ * @hidden
+ */
+var ColumnResize = /** @class */ (function () {
+    function ColumnResize(triggerResize) {
+        var _this = this;
+        /**
+         * The settings for resizing the Grid.
+         */
+        this.resizable = false;
+        this.isRtl = false;
+        this.setIsRtl = function (isRtl) {
+            _this.isRtl = isRtl;
+        };
+        this.onResize = triggerResize;
+        this.dragHandler = this.dragHandler.bind(this);
+    }
+    ColumnResize.prototype.dragHandler = function (event, column, dragCue, end) {
+        var e = event.originalEvent;
+        if (!end) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
+        var tdElement = dragCue.parentElement;
+        if (!tdElement || !tdElement.parentElement) {
+            return;
+        }
+        var oldWidth = tdElement.clientWidth;
+        var newWidth;
+        if (this.isRtl) {
+            newWidth = (dragCue.getBoundingClientRect().right - (dragCue.offsetWidth / 2)) - event.clientX;
+            newWidth += oldWidth;
+        }
+        else {
+            newWidth = oldWidth + event.clientX - dragCue.getBoundingClientRect().left - (dragCue.offsetWidth / 2);
+        }
+        if (!end && Math.abs(newWidth - oldWidth) < 1) {
+            return;
+        }
+        this.fixateInitialWidths(tdElement.parentElement.clientWidth);
+        this.setWidths(column, Math.floor(newWidth) / oldWidth);
+        var index = this.columns.filter(function (c) { return !c.children.length; }).indexOf(column);
+        this.onResize(index, oldWidth, newWidth, e, end);
+    };
+    ColumnResize.prototype.fixateInitialWidths = function (width) {
+        var columns = this.columns.filter(function (c) { return !c.children.length; });
+        var remainingCount = 0;
+        var cols = this.colGroupMain ? this.colGroupMain.children : [];
+        for (var i = 0; i < cols.length; i++) {
+            if (cols[i].width) {
+                width -= parseFloat(cols[i].width);
+            }
+            else {
+                remainingCount++;
+            }
+        }
+        if (remainingCount === 0) {
+            return;
+        }
+        var perCol = Math.floor(width / remainingCount);
+        for (var i = 0; i < cols.length; i++) {
+            var col = cols[i];
+            if (!col.width) {
+                col.width = perCol;
+                columns[i].width = perCol.toString();
+                if (this.colGroupHeader) {
+                    this.colGroupHeader.children[i].width = perCol;
+                }
+                if (this.colGroupFooter) {
+                    this.colGroupFooter.children[i].width = perCol;
+                }
+            }
+        }
+    };
+    ColumnResize.prototype.setWidths = function (column, coef) {
+        var indexInOriginal = this.columns.indexOf(column);
+        var toAdjust = [];
+        var more = column.children.length;
+        for (var i = indexInOriginal + 1; more > 0 && i < this.columns.length; i++, more--) {
+            var cc = this.columns[i];
+            if (!cc.children.length) {
+                toAdjust.push(cc);
+            }
+            else {
+                more += cc.children.length;
+            }
+        }
+        if (toAdjust.length === 0) {
+            toAdjust.push(column);
+        }
+        toAdjust.forEach(function (colToAdjust) {
+            var targetWidth = colToAdjust.width ? parseFloat(colToAdjust.width.toString()) * coef : 0;
+            var min = colToAdjust.minResizableWidth === undefined ? 10 : colToAdjust.minResizableWidth;
+            if (targetWidth < min) {
+                targetWidth = min;
+            }
+            colToAdjust.width = targetWidth;
+        });
+        this.updateColElements(toAdjust);
+    };
+    ColumnResize.prototype.updateColElements = function (affectedColumns) {
+        var columns = this.columns.filter(function (c) { return !c.children.length; });
+        var difference = 1e-10;
+        for (var i = 0; i < affectedColumns.length; i++) {
+            var colIndex = columns.indexOf(affectedColumns[i]);
+            var currentColumnFloatWidth = parseFloat((affectedColumns[i].width || 0).toString());
+            difference += currentColumnFloatWidth - Math.floor(currentColumnFloatWidth);
+            var currentWidth = Math.floor(currentColumnFloatWidth) + Math.floor(difference);
+            difference -= Math.floor(difference);
+            if (this.colGroupMain) {
+                this.colGroupMain.children[colIndex].width = currentWidth + 'px';
+            }
+            if (this.colGroupHeader) {
+                // static headers
+                this.colGroupHeader.children[colIndex].width = currentWidth + 'px';
+            }
+            if (this.colGroupFooter && this.colGroupFooter.children[colIndex]) {
+                // static footers
+                this.colGroupFooter.children[colIndex].width = currentWidth + 'px';
+            }
+        }
+    };
+    return ColumnResize;
+}());
+export { ColumnResize };

package/dist/es/drag/ColumnResizer.d.ts

@@ -0,0 +1,40 @@
+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;
+};
+/**
+ * @hidden
+ */
+export interface ColumnResizerProps {
+    key?: number;
+    resize: (event: any, dragCue: Element, end: boolean) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnResizerMethods extends Vue2type {
+    drag: (event: any) => void;
+    release: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnResizerState {
+    element: any | null;
+    draggable: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnResizerAll extends ColumnResizerMethods, ColumnResizerState {
+}
+/**
+ * @hidden
+ */
+declare let ColumnResizerVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnResizerAll>, {}, RecordPropsDefinition<ColumnResizerProps>>;
+/**
+ * @hidden
+ */
+declare const ColumnResizer: DefineComponent<ColumnResizerProps, any, {}, {}, ColumnResizerMethods, {}, {}, {}, string, ColumnResizerProps, ColumnResizerProps, {}>;
+export { ColumnResizer, ColumnResizerVue2 };