@vaadin/vaadin-grid 22.0.0-alpha6 → 22.0.0-beta1

package/src/vaadin-grid-array-data-provider-mixin.d.ts

@@ -1,20 +0,0 @@
-import { GridDataProviderCallback, GridDataProviderParams } from './interfaces';
-
-declare function ArrayDataProviderMixin<TItem, T extends new (...args: any[]) => {}>(
-  base: T
-): T & ArrayDataProviderMixinConstructor<TItem>;
-
-interface ArrayDataProviderMixinConstructor<TItem> {
-  new (...args: any[]): ArrayDataProviderMixin<TItem>;
-}
-
-declare interface ArrayDataProviderMixin<TItem> {
-  /**
-   * An array containing the items which will be passed to renderer functions.
-   */
-  items: TItem[] | null | undefined;
-
-  _arrayDataProvider(opts: GridDataProviderParams<TItem> | null, cb: GridDataProviderCallback<TItem> | null): void;
-}
-
-export { ArrayDataProviderMixin, ArrayDataProviderMixinConstructor };

package/src/vaadin-grid-array-data-provider-mixin.js

@@ -1,75 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { createArrayDataProvider } from './array-data-provider.js';
-
-/**
- * @polymerMixin
- */
-export const ArrayDataProviderMixin = (superClass) =>
-  class ArrayDataProviderMixin extends superClass {
-    static get properties() {
-      return {
-        /**
-         * An array containing the items which will be passed to renderer functions.
-         *
-         * @type {Array<!GridItem> | undefined}
-         */
-        items: Array
-      };
-    }
-
-    static get observers() {
-      return ['__dataProviderOrItemsChanged(dataProvider, items, isAttached, items.*, _filters, _sorters)'];
-    }
-
-    /** @private */
-    __setArrayDataProvider(items) {
-      const arrayDataProvider = createArrayDataProvider(this.items, {});
-      arrayDataProvider.__items = items;
-      this.setProperties({
-        _arrayDataProvider: arrayDataProvider,
-        size: items.length,
-        dataProvider: arrayDataProvider
-      });
-    }
-
-    /** @private */
-    __dataProviderOrItemsChanged(dataProvider, items, isAttached) {
-      if (!isAttached) {
-        return;
-      }
-
-      if (this._arrayDataProvider) {
-        // Has an items array data provider beforehand
-
-        if (dataProvider !== this._arrayDataProvider) {
-          // A custom data provider was set externally
-          this.setProperties({
-            _arrayDataProvider: undefined,
-            items: undefined
-          });
-        } else if (!items) {
-          // The items array was unset
-          this.setProperties({
-            _arrayDataProvider: undefined,
-            dataProvider: undefined,
-            size: 0
-          });
-          this.clearCache();
-        } else if (this._arrayDataProvider.__items === items) {
-          // The items array was modified
-          this.clearCache();
-          this.size = this._effectiveSize;
-        } else {
-          // The items array was replaced
-          this.__setArrayDataProvider(items);
-        }
-      } else if (items) {
-        // There was no array data provider before items was set
-        this.__setArrayDataProvider(items);
-      }
-    }
-  };

package/src/vaadin-grid-column-reordering-mixin.d.ts

@@ -1,47 +0,0 @@
-import { GridColumnElement } from './vaadin-grid-column.js';
-
-declare function ColumnReorderingMixin<TItem, T extends new (...args: any[]) => {}>(
-  base: T
-): T & ColumnReorderingMixinConstructor<TItem>;
-
-interface ColumnReorderingMixinConstructor<TItem> {
-  new (...args: any[]): ColumnReorderingMixin<TItem>;
-}
-
-export { ColumnReorderingMixinConstructor };
-
-interface ColumnReorderingMixin<TItem> {
-  /**
-   * Set to true to allow column reordering.
-   * @attr {boolean} column-reordering-allowed
-   */
-  columnReorderingAllowed: boolean;
-
-  _getColumnsInOrder(): GridColumnElement<TItem>[];
-
-  _cellFromPoint(x: number, y: number): HTMLElement | null | undefined;
-
-  _updateGhostPosition(eventClientX: number, eventClientY: number): void;
-
-  _updateGhost(cell: HTMLElement): HTMLElement;
-
-  _setSiblingsReorderStatus(column: GridColumnElement<TItem>, status: string): void;
-
-  _autoScroller(): void;
-
-  _isSwapAllowed(
-    column1: GridColumnElement<TItem> | null | undefined,
-    column2: GridColumnElement<TItem> | null | undefined
-  ): boolean | undefined;
-
-  _isSwappableByPosition(targetColumn: GridColumnElement<TItem>, clientX: number): boolean;
-
-  _swapColumnOrders(column1: GridColumnElement<TItem>, column2: GridColumnElement<TItem>): void;
-
-  _getTargetColumn(
-    targetCell: HTMLElement | null | undefined,
-    draggedColumn: GridColumnElement<TItem> | null
-  ): GridColumnElement<TItem> | null | undefined;
-}
-
-export { ColumnReorderingMixin };

package/src/vaadin-grid-column-reordering-mixin.js

@@ -1,387 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
-import { updateColumnOrders } from './vaadin-grid-helpers.js';
-
-/**
- * @polymerMixin
- */
-export const ColumnReorderingMixin = (superClass) =>
-  class ColumnReorderingMixin extends GestureEventListeners(superClass) {
-    static get properties() {
-      return {
-        /**
-         * Set to true to allow column reordering.
-         * @attr {boolean} column-reordering-allowed
-         * @type {boolean}
-         */
-        columnReorderingAllowed: {
-          type: Boolean,
-          value: false
-        },
-
-        /** @private */
-        _orderBaseScope: {
-          type: Number,
-          value: 10000000
-        }
-      };
-    }
-
-    static get observers() {
-      return ['_updateOrders(_columnTree, _columnTree.*)'];
-    }
-
-    ready() {
-      super.ready();
-      addListener(this, 'track', this._onTrackEvent);
-      this._reorderGhost = this.shadowRoot.querySelector('[part="reorder-ghost"]');
-
-      this.addEventListener('touchstart', this._onTouchStart.bind(this));
-      this.addEventListener('touchmove', this._onTouchMove.bind(this));
-      this.addEventListener('touchend', this._onTouchEnd.bind(this));
-      this.addEventListener('contextmenu', this._onContextMenu.bind(this));
-    }
-
-    /** @private */
-    _onContextMenu(e) {
-      if (this.hasAttribute('reordering')) {
-        e.preventDefault();
-      }
-    }
-
-    /** @private */
-    _onTouchStart(e) {
-      // Touch event, delay activation by 100ms
-      this._startTouchReorderTimeout = setTimeout(() => {
-        this._onTrackStart({
-          detail: {
-            x: e.touches[0].clientX,
-            y: e.touches[0].clientY
-          }
-        });
-      }, 100);
-    }
-
-    /** @private */
-    _onTouchMove(e) {
-      if (this._draggedColumn) {
-        e.preventDefault();
-      }
-      clearTimeout(this._startTouchReorderTimeout);
-    }
-
-    /** @private */
-    _onTouchEnd() {
-      clearTimeout(this._startTouchReorderTimeout);
-      this._onTrackEnd();
-    }
-
-    /** @private */
-    _onTrackEvent(e) {
-      if (e.detail.state === 'start') {
-        const path = e.composedPath();
-        const headerCell = path[path.indexOf(this.$.header) - 2];
-        if (!headerCell || !headerCell._content) {
-          // Not a header column
-          return;
-        }
-
-        if (headerCell._content.contains(this.getRootNode().activeElement)) {
-          // Something was focused inside the cell
-          return;
-        }
-
-        if (this.$.scroller.hasAttribute('column-resizing')) {
-          // Resizing is in progress
-          return;
-        }
-
-        if (!this._touchDevice) {
-          // Not a touch device
-          this._onTrackStart(e);
-        }
-      } else if (e.detail.state === 'track') {
-        this._onTrack(e);
-      } else if (e.detail.state === 'end') {
-        this._onTrackEnd(e);
-      }
-    }
-
-    /** @private */
-    _onTrackStart(e) {
-      if (!this.columnReorderingAllowed) {
-        return;
-      }
-
-      // Cancel reordering if there are draggable nodes on the event path
-      const path = e.composedPath && e.composedPath();
-      if (path && path.filter((node) => node.hasAttribute && node.hasAttribute('draggable'))[0]) {
-        return;
-      }
-
-      const headerCell = this._cellFromPoint(e.detail.x, e.detail.y);
-      if (!headerCell || headerCell.getAttribute('part').indexOf('header-cell') === -1) {
-        return;
-      }
-
-      this._toggleAttribute('reordering', true, this);
-      this._draggedColumn = headerCell._column;
-      while (this._draggedColumn.parentElement.childElementCount === 1) {
-        // This is the only column in the group, drag the whole group instead
-        this._draggedColumn = this._draggedColumn.parentElement;
-      }
-      this._setSiblingsReorderStatus(this._draggedColumn, 'allowed');
-      this._draggedColumn._reorderStatus = 'dragging';
-
-      this._updateGhost(headerCell);
-      this._reorderGhost.style.visibility = 'visible';
-      this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);
-      this._autoScroller();
-    }
-
-    /** @private */
-    _onTrack(e) {
-      if (!this._draggedColumn) {
-        // Reordering didn’t start. Skip this event.
-        return;
-      }
-
-      const targetCell = this._cellFromPoint(e.detail.x, e.detail.y);
-      if (!targetCell) {
-        return;
-      }
-
-      const targetColumn = this._getTargetColumn(targetCell, this._draggedColumn);
-      if (
-        this._isSwapAllowed(this._draggedColumn, targetColumn) &&
-        this._isSwappableByPosition(targetColumn, e.detail.x)
-      ) {
-        this._swapColumnOrders(this._draggedColumn, targetColumn);
-      }
-
-      this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);
-      this._lastDragClientX = e.detail.x;
-    }
-
-    /** @private */
-    _onTrackEnd() {
-      if (!this._draggedColumn) {
-        // Reordering didn’t start. Skip this event.
-        return;
-      }
-
-      this._toggleAttribute('reordering', false, this);
-      this._draggedColumn._reorderStatus = '';
-      this._setSiblingsReorderStatus(this._draggedColumn, '');
-      this._draggedColumn = null;
-      this._lastDragClientX = null;
-      this._reorderGhost.style.visibility = 'hidden';
-
-      this.dispatchEvent(
-        new CustomEvent('column-reorder', {
-          detail: {
-            columns: this._getColumnsInOrder()
-          }
-        })
-      );
-    }
-
-    /**
-     * @return {!Array<!GridColumnElement>}
-     * @protected
-     */
-    _getColumnsInOrder() {
-      return this._columnTree
-        .slice(0)
-        .pop()
-        .filter((c) => !c.hidden)
-        .sort((b, a) => b._order - a._order);
-    }
-
-    /**
-     * @param {number} x
-     * @param {number} y
-     * @return {HTMLElement | undefined}
-     * @protected
-     */
-    _cellFromPoint(x, y) {
-      x = x || 0;
-      y = y || 0;
-      if (!this._draggedColumn) {
-        this._toggleAttribute('no-content-pointer-events', true, this.$.scroller);
-      }
-      const cell = this.shadowRoot.elementFromPoint(x, y);
-      this._toggleAttribute('no-content-pointer-events', false, this.$.scroller);
-
-      // Make sure the element is actually a cell
-      if (cell && cell._column) {
-        return cell;
-      }
-    }
-
-    /**
-     * @param {number} eventClientX
-     * @param {number} eventClientY
-     * @protected
-     */
-    _updateGhostPosition(eventClientX, eventClientY) {
-      const ghostRect = this._reorderGhost.getBoundingClientRect();
-      // // This is where we want to position the ghost
-      const targetLeft = eventClientX - ghostRect.width / 2;
-      const targetTop = eventClientY - ghostRect.height / 2;
-      // Current position
-      const _left = parseInt(this._reorderGhost._left || 0);
-      const _top = parseInt(this._reorderGhost._top || 0);
-      // Reposition the ghost
-      this._reorderGhost._left = _left - (ghostRect.left - targetLeft);
-      this._reorderGhost._top = _top - (ghostRect.top - targetTop);
-      this._reorderGhost.style.transform = `translate(${this._reorderGhost._left}px, ${this._reorderGhost._top}px)`;
-    }
-
-    /**
-     * @param {!HTMLElement} cell
-     * @return {!HTMLElement}
-     * @protected
-     */
-    _updateGhost(cell) {
-      const ghost = this._reorderGhost;
-      ghost.textContent = cell._content.innerText;
-      const style = window.getComputedStyle(cell);
-      [
-        'boxSizing',
-        'display',
-        'width',
-        'height',
-        'background',
-        'alignItems',
-        'padding',
-        'border',
-        'flex-direction',
-        'overflow'
-      ].forEach((propertyName) => (ghost.style[propertyName] = style[propertyName]));
-      return ghost;
-    }
-
-    /** @private */
-    _updateOrders(columnTree, splices) {
-      if (columnTree === undefined || splices === undefined) {
-        return;
-      }
-
-      // Reset all column orders
-      columnTree[0].forEach((column) => (column._order = 0));
-      // Set order numbers to top-level columns
-      updateColumnOrders(columnTree[0], this._orderBaseScope, 0);
-    }
-
-    /**
-     * @param {!GridColumnElement} column
-     * @param {string} status
-     * @protected
-     */
-    _setSiblingsReorderStatus(column, status) {
-      Array.from(column.parentNode.children)
-        .filter((child) => /column/.test(child.localName) && this._isSwapAllowed(child, column))
-        .forEach((sibling) => (sibling._reorderStatus = status));
-    }
-
-    /** @protected */
-    _autoScroller() {
-      if (this._lastDragClientX) {
-        const rightDiff = this._lastDragClientX - this.getBoundingClientRect().right + 50;
-        const leftDiff = this.getBoundingClientRect().left - this._lastDragClientX + 50;
-
-        if (rightDiff > 0) {
-          this.$.table.scrollLeft += rightDiff / 10;
-        } else if (leftDiff > 0) {
-          this.$.table.scrollLeft -= leftDiff / 10;
-        }
-      }
-
-      if (this._draggedColumn) {
-        setTimeout(() => this._autoScroller(), 10);
-      }
-    }
-
-    /**
-     * @param {GridColumnElement | undefined} column1
-     * @param {GridColumnElement | undefined} column2
-     * @return {boolean | undefined}
-     * @protected
-     */
-    _isSwapAllowed(column1, column2) {
-      if (column1 && column2) {
-        const differentColumns = column1 !== column2;
-        const sameParent = column1.parentElement === column2.parentElement;
-        const sameFrozen = column1.frozen === column2.frozen;
-        return differentColumns && sameParent && sameFrozen;
-      }
-    }
-
-    /**
-     * @param {!GridColumnElement} targetColumn
-     * @param {number} clientX
-     * @return {boolean}
-     * @protected
-     */
-    _isSwappableByPosition(targetColumn, clientX) {
-      const targetCell = Array.from(this.$.header.querySelectorAll('tr:not([hidden]) [part~="cell"]')).filter((cell) =>
-        targetColumn.contains(cell._column)
-      )[0];
-      const sourceCellRect = this.$.header
-        .querySelector('tr:not([hidden]) [reorder-status=dragging]')
-        .getBoundingClientRect();
-      const targetRect = targetCell.getBoundingClientRect();
-      if (targetRect.left > sourceCellRect.left) {
-        return clientX > targetRect.right - sourceCellRect.width;
-      } else {
-        return clientX < targetRect.left + sourceCellRect.width;
-      }
-    }
-
-    /**
-     * @param {!GridColumnElement} column1
-     * @param {!GridColumnElement} column2
-     * @protected
-     */
-    _swapColumnOrders(column1, column2) {
-      const _order = column1._order;
-      column1._order = column2._order;
-      column2._order = _order;
-      this._updateLastFrozen();
-      this._updateFirstAndLastColumn();
-    }
-
-    /**
-     * @param {HTMLElement | undefined} targetCell
-     * @param {GridColumnElement} draggedColumn
-     * @return {GridColumnElement | undefined}
-     * @protected
-     */
-    _getTargetColumn(targetCell, draggedColumn) {
-      if (targetCell && draggedColumn) {
-        let candidate = targetCell._column;
-        while (candidate.parentElement !== draggedColumn.parentElement && candidate !== this) {
-          candidate = candidate.parentElement;
-        }
-        if (candidate.parentElement === draggedColumn.parentElement) {
-          return candidate;
-        } else {
-          return targetCell._column;
-        }
-      }
-    }
-
-    /**
-     * Fired when the columns in the grid are reordered.
-     *
-     * @event column-reorder
-     * @param {Object} detail
-     * @param {Object} detail.columns the columns in the new order
-     */
-  };

package/src/vaadin-grid-column-resizing-mixin.d.ts

@@ -1,11 +0,0 @@
-declare function ColumnResizingMixin<T extends new (...args: any[]) => {}>(base: T): T & ColumnResizingMixinConstructor;
-
-interface ColumnResizingMixinConstructor {
-  new (...args: any[]): ColumnResizingMixin;
-}
-
-export { ColumnResizingMixinConstructor };
-
-interface ColumnResizingMixin {}
-
-export { ColumnResizingMixin };

package/src/vaadin-grid-column-resizing-mixin.js

@@ -1,111 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
-
-/**
- * @polymerMixin
- */
-export const ColumnResizingMixin = (superClass) =>
-  class ColumnResizingMixin extends GestureEventListeners(superClass) {
-    ready() {
-      super.ready();
-      const scroller = this.$.scroller;
-      addListener(scroller, 'track', this._onHeaderTrack.bind(this));
-
-      // Disallow scrolling while resizing
-      scroller.addEventListener('touchmove', (e) => scroller.hasAttribute('column-resizing') && e.preventDefault());
-
-      // Disable contextmenu on any resize separator.
-      scroller.addEventListener(
-        'contextmenu',
-        (e) => e.target.getAttribute('part') == 'resize-handle' && e.preventDefault()
-      );
-
-      // Disable native cell focus when resizing
-      scroller.addEventListener(
-        'mousedown',
-        (e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault()
-      );
-    }
-
-    /** @private */
-    _onHeaderTrack(e) {
-      const handle = e.target;
-      if (handle.getAttribute('part') === 'resize-handle') {
-        const cell = handle.parentElement;
-        let column = cell._column;
-
-        this._toggleAttribute('column-resizing', true, this.$.scroller);
-
-        // Get the target column to resize
-        while (column.localName === 'vaadin-grid-column-group') {
-          column = Array.prototype.slice
-            .call(column._childColumns, 0)
-            .sort(function (a, b) {
-              return a._order - b._order;
-            })
-            .filter(function (column) {
-              return !column.hidden;
-            })
-            .pop();
-        }
-
-        const columnRowCells = Array.from(this.$.header.querySelectorAll('[part~="row"]:last-child [part~="cell"]'));
-        const targetCell = columnRowCells.filter((cell) => cell._column === column)[0];
-        // Resize the target column
-        if (targetCell.offsetWidth) {
-          const style = window.getComputedStyle(targetCell);
-          const minWidth =
-            10 +
-            parseInt(style.paddingLeft) +
-            parseInt(style.paddingRight) +
-            parseInt(style.borderLeftWidth) +
-            parseInt(style.borderRightWidth) +
-            parseInt(style.marginLeft) +
-            parseInt(style.marginRight);
-          const maxWidth =
-            targetCell.offsetWidth +
-            (this.__isRTL
-              ? targetCell.getBoundingClientRect().left - e.detail.x
-              : e.detail.x - targetCell.getBoundingClientRect().right);
-          column.width = Math.max(minWidth, maxWidth) + 'px';
-          column.flexGrow = 0;
-        }
-        // Fix width and flex-grow for all preceding columns
-        columnRowCells
-          .sort(function (a, b) {
-            return a._column._order - b._column._order;
-          })
-          .forEach(function (cell, index, array) {
-            if (index < array.indexOf(targetCell)) {
-              cell._column.width = cell.offsetWidth + 'px';
-              cell._column.flexGrow = 0;
-            }
-          });
-
-        if (e.detail.state === 'end') {
-          this._toggleAttribute('column-resizing', false, this.$.scroller);
-          this.dispatchEvent(
-            new CustomEvent('column-resize', {
-              detail: { resizedColumn: column }
-            })
-          );
-        }
-
-        // Notify resize
-        this._resizeHandler();
-      }
-    }
-
-    /**
-     * Fired when a column in the grid is resized by the user.
-     *
-     * @event column-resize
-     * @param {Object} detail
-     * @param {Object} detail.resizedColumn the column that was resized
-     */
-  };