@vaadin/grid 22.0.0-alpha7

package/src/vaadin-grid-row-details-mixin.d.ts

@@ -0,0 +1,44 @@
+import { GridRowDetailsRenderer } from './interfaces';
+
+declare function RowDetailsMixin<TItem, T extends new (...args: any[]) => {}>(
+  base: T
+): T & RowDetailsMixinConstructor<TItem>;
+
+interface RowDetailsMixinConstructor<TItem> {
+  new (...args: any[]): RowDetailsMixin<TItem>;
+}
+
+interface RowDetailsMixin<TItem> {
+  /**
+   * An array containing references to items with open row details.
+   */
+  detailsOpenedItems: Array<TItem>;
+
+  /**
+   * Custom function for rendering the content of the row details.
+   * Receives three arguments:
+   *
+   * - `root` The row details content DOM element. Append your content to it.
+   * - `grid` The `<vaadin-grid>` element.
+   * - `model` The object with the properties related with
+   *   the rendered item, contains:
+   *   - `model.index` The index of the item.
+   *   - `model.item` The item.
+   *   - `model.level` The number of the item's tree sublevel, starts from 0.
+   *   - `model.expanded` True if the item's tree sublevel is expanded.
+   *   - `model.selected` True if the item is selected.
+   */
+  rowDetailsRenderer: GridRowDetailsRenderer<TItem> | null | undefined;
+
+  /**
+   * Open the details row of a given item.
+   */
+  openItemDetails(item: TItem): void;
+
+  /**
+   * Close the details row of a given item.
+   */
+  closeItemDetails(item: TItem): void;
+}
+
+export { RowDetailsMixin, RowDetailsMixinConstructor };

package/src/vaadin-grid-row-details-mixin.js

@@ -0,0 +1,200 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const RowDetailsMixin = (superClass) =>
+  class RowDetailsMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * An array containing references to items with open row details.
+         * @type {!Array<!GridItem>}
+         */
+        detailsOpenedItems: {
+          type: Array,
+          value: function () {
+            return [];
+          }
+        },
+
+        /**
+         * Custom function for rendering the content of the row details.
+         * Receives three arguments:
+         *
+         * - `root` The row details content DOM element. Append your content to it.
+         * - `grid` The `<vaadin-grid>` element.
+         * - `model` The object with the properties related with
+         *   the rendered item, contains:
+         *   - `model.index` The index of the item.
+         *   - `model.item` The item.
+         *   - `model.level` The number of the item's tree sublevel, starts from 0.
+         *   - `model.expanded` True if the item's tree sublevel is expanded.
+         *   - `model.selected` True if the item is selected.
+         *
+         * @type {GridRowDetailsRenderer | null | undefined}
+         */
+        rowDetailsRenderer: Function,
+
+        /**
+         * @type {!Array<!HTMLElement> | undefined}
+         * @protected
+         */
+        _detailsCells: {
+          type: Array
+        }
+      };
+    }
+
+    static get observers() {
+      return [
+        '_detailsOpenedItemsChanged(detailsOpenedItems.*, rowDetailsRenderer)',
+        '_rowDetailsRendererChanged(rowDetailsRenderer)'
+      ];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._detailsCellResizeObserver = new ResizeObserver((entries) => {
+        entries.forEach(({ target: cell }) => {
+          this._updateDetailsCellHeight(cell.parentElement);
+        });
+
+        // This workaround is needed until Safari also supports
+        // ResizeObserver.observe with {box: 'border-box'}
+        this.__virtualizer.__adapter._resizeHandler();
+      });
+    }
+
+    /** @private */
+    _rowDetailsRendererChanged(rowDetailsRenderer) {
+      if (!rowDetailsRenderer) {
+        return;
+      }
+
+      if (this._columnTree) {
+        // Only update the rows if the column tree has already been initialized
+        Array.from(this.$.items.children).forEach((row) => {
+          if (!row.querySelector('[part~=details-cell]')) {
+            this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
+            this._a11yUpdateRowDetailsOpened(row, false);
+          }
+        });
+      }
+    }
+
+    /** @private */
+    _detailsOpenedItemsChanged(changeRecord, rowDetailsRenderer) {
+      // Skip to avoid duplicate work of both “.splices” and “.length” updates.
+      if (changeRecord.path === 'detailsOpenedItems.length' || !changeRecord.value) {
+        return;
+      }
+
+      [...this.$.items.children].forEach((row) => {
+        // Re-renders the row to possibly close the previously opened details.
+        if (row.hasAttribute('details-opened')) {
+          this._updateItem(row, row._item);
+          return;
+        }
+
+        // Re-renders the row to open the details when a row details renderer is provided.
+        if (rowDetailsRenderer && this._isDetailsOpened(row._item)) {
+          this._updateItem(row, row._item);
+          return;
+        }
+      });
+    }
+
+    /**
+     * @param {!HTMLElement} cell
+     * @protected
+     */
+    _configureDetailsCell(cell) {
+      cell.setAttribute('part', 'cell details-cell');
+      // Freeze the details cell, so that it does not scroll horizontally
+      // with the normal cells. This way it looks less weird.
+      cell.toggleAttribute('frozen', true);
+
+      this._detailsCellResizeObserver.observe(cell);
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @param {!GridItem} item
+     * @protected
+     */
+    _toggleDetailsCell(row, detailsOpened) {
+      const cell = row.querySelector('[part~="details-cell"]');
+      if (!cell) {
+        return;
+      }
+
+      cell.hidden = !detailsOpened;
+
+      if (cell.hidden) {
+        return;
+      }
+
+      // Assigns a renderer when the details cell is opened.
+      // The details cell content is rendered later in the `_updateItem` method.
+      if (this.rowDetailsRenderer) {
+        cell._renderer = this.rowDetailsRenderer;
+      }
+    }
+
+    /** @protected */
+    _updateDetailsCellHeight(row) {
+      const cell = row.querySelector('[part~="details-cell"]');
+      if (!cell) {
+        return;
+      }
+
+      if (cell.hidden) {
+        row.style.removeProperty('padding-bottom');
+      } else {
+        row.style.setProperty('padding-bottom', `${cell.offsetHeight}px`);
+      }
+    }
+
+    /** @protected */
+    _updateDetailsCellHeights() {
+      [...this.$.items.children].forEach((row) => {
+        this._updateDetailsCellHeight(row);
+      });
+    }
+
+    /**
+     * @param {!GridItem} item
+     * @return {boolean}
+     * @protected
+     */
+    _isDetailsOpened(item) {
+      return this.detailsOpenedItems && this._getItemIndexInArray(item, this.detailsOpenedItems) !== -1;
+    }
+
+    /**
+     * Open the details row of a given item.
+     * @param {!GridItem} item
+     */
+    openItemDetails(item) {
+      if (!this._isDetailsOpened(item)) {
+        this.detailsOpenedItems = [...this.detailsOpenedItems, item];
+      }
+    }
+
+    /**
+     * Close the details row of a given item.
+     * @param {!GridItem} item
+     */
+    closeItemDetails(item) {
+      if (this._isDetailsOpened(item)) {
+        this.detailsOpenedItems = this.detailsOpenedItems.filter((i) => !this._itemsEqual(i, item));
+      }
+    }
+  };

package/src/vaadin-grid-scroll-mixin.d.ts

@@ -0,0 +1,18 @@
+declare function ScrollMixin<T extends new (...args: any[]) => {}>(base: T): T & ScrollMixinConstructor;
+
+interface ScrollMixinConstructor {
+  new (...args: any[]): ScrollMixin;
+}
+
+interface ScrollMixin {
+  /**
+   * Scroll to a specific row index in the virtual list. Note that the row index is
+   * not always the same for any particular item. For example, sorting/filtering/expanding
+   * or collapsing hierarchical items can affect the row index related to an item.
+   *
+   * @param index Row index to scroll to
+   */
+  scrollToIndex(index: number): void;
+}
+
+export { ScrollMixin, ScrollMixinConstructor };

package/src/vaadin-grid-scroll-mixin.js

@@ -0,0 +1,202 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { animationFrame, timeOut, microTask } from '@vaadin/component-base/src/async.js';
+
+const timeouts = {
+  SCROLLING: 500
+};
+
+/**
+ * @polymerMixin
+ */
+export const ScrollMixin = (superClass) =>
+  class ScrollMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Cached array of frozen cells
+         * @private
+         */
+        _frozenCells: {
+          type: Array,
+          value: () => []
+        },
+
+        /** @private */
+        _rowWithFocusedElement: Element
+      };
+    }
+
+    /**
+     * Override (from iron-scroll-target-behavior) to avoid document scroll
+     * @private
+     */
+    set _scrollTop(top) {
+      this.$.table.scrollTop = top;
+    }
+
+    /** @private */
+    get _scrollTop() {
+      return this.$.table.scrollTop;
+    }
+
+    /** @private */
+    get _scrollLeft() {
+      return this.$.table.scrollLeft;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      // Preserve accessor to the legacy scrolling functionality
+      this.$.outerscroller = document.createElement('div');
+
+      this.scrollTarget = this.$.table;
+
+      this.$.items.addEventListener('focusin', (e) => {
+        const itemsIndex = e.composedPath().indexOf(this.$.items);
+        this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];
+      });
+      this.$.items.addEventListener('focusout', () => (this._rowWithFocusedElement = undefined));
+
+      this.$.table.addEventListener('scroll', () => this._afterScroll());
+    }
+
+    /**
+     * Scroll to a specific row index in the virtual list. Note that the row index is
+     * not always the same for any particular item. For example, sorting/filtering/expanding
+     * or collapsing hierarchical items can affect the row index related to an item.
+     *
+     * @param {number} index Row index to scroll to
+     */
+    scrollToIndex(index) {
+      index = Math.min(this._effectiveSize - 1, Math.max(0, index));
+      this.__virtualizer.scrollToIndex(index);
+      this.__scrollIntoViewport(index);
+    }
+
+    /**
+     * Makes sure the row with the given index (if found in the DOM) is fully
+     * inside the visible viewport, taking header/footer into account.
+     * @private
+     */
+    __scrollIntoViewport(index) {
+      const rowElement = [...this.$.items.children].find((child) => child.index === index);
+      if (rowElement) {
+        const dstRect = rowElement.getBoundingClientRect();
+        const footerTop = this.$.footer.getBoundingClientRect().top;
+        const headerBottom = this.$.header.getBoundingClientRect().bottom;
+        if (dstRect.bottom > footerTop) {
+          this.$.table.scrollTop += dstRect.bottom - footerTop;
+        } else if (dstRect.top < headerBottom) {
+          this.$.table.scrollTop -= headerBottom - dstRect.top;
+        }
+      }
+    }
+
+    /** @private */
+    _scheduleScrolling() {
+      if (!this._scrollingFrame) {
+        // Defer setting state attributes to avoid Edge hiccups
+        this._scrollingFrame = requestAnimationFrame(() => this.$.scroller.toggleAttribute('scrolling', true));
+      }
+      this._debounceScrolling = Debouncer.debounce(this._debounceScrolling, timeOut.after(timeouts.SCROLLING), () => {
+        cancelAnimationFrame(this._scrollingFrame);
+        delete this._scrollingFrame;
+        this.$.scroller.toggleAttribute('scrolling', false);
+      });
+    }
+
+    /** @private */
+    _afterScroll() {
+      this.__updateHorizontalScrollPosition();
+
+      if (!this.hasAttribute('reordering')) {
+        this._scheduleScrolling();
+      }
+
+      this._updateOverflow();
+    }
+
+    /** @private */
+    _updateOverflow() {
+      // Set overflow styling attributes
+      let overflow = '';
+      const table = this.$.table;
+      if (table.scrollTop < table.scrollHeight - table.clientHeight) {
+        overflow += ' bottom';
+      }
+
+      if (table.scrollTop > 0) {
+        overflow += ' top';
+      }
+
+      if (table.scrollLeft < table.scrollWidth - table.clientWidth) {
+        overflow += ' right';
+      }
+
+      if (table.scrollLeft > 0) {
+        overflow += ' left';
+      }
+
+      this._debounceOverflow = Debouncer.debounce(this._debounceOverflow, animationFrame, () => {
+        const value = overflow.trim();
+        if (value.length > 0 && this.getAttribute('overflow') !== value) {
+          this.setAttribute('overflow', value);
+        } else if (value.length == 0 && this.hasAttribute('overflow')) {
+          this.removeAttribute('overflow');
+        }
+      });
+    }
+
+    /** @protected */
+    _frozenCellsChanged() {
+      this._debouncerCacheElements = Debouncer.debounce(this._debouncerCacheElements, microTask, () => {
+        Array.from(this.shadowRoot.querySelectorAll('[part~="cell"]')).forEach(function (cell) {
+          cell.style.transform = '';
+        });
+        this._frozenCells = Array.prototype.slice.call(this.$.table.querySelectorAll('[frozen]'));
+        this.__updateHorizontalScrollPosition();
+      });
+      this._updateLastFrozen();
+    }
+
+    /** @protected */
+    _updateLastFrozen() {
+      if (!this._columnTree) {
+        return;
+      }
+
+      const columnsRow = this._columnTree[this._columnTree.length - 1].slice(0);
+      columnsRow.sort((a, b) => {
+        return a._order - b._order;
+      });
+      const lastFrozen = columnsRow.reduce((prev, col, index) => {
+        col._lastFrozen = false;
+        return col.frozen && !col.hidden ? index : prev;
+      }, undefined);
+      if (lastFrozen !== undefined) {
+        columnsRow[lastFrozen]._lastFrozen = true;
+      }
+    }
+
+    /** @private */
+    __updateHorizontalScrollPosition() {
+      this.$.table.style.setProperty('--_grid-horizontal-scroll-position', -this._scrollLeft + 'px');
+
+      if (this.__isRTL) {
+        // Translating the sticky sections using a CSS variable works nicely on LTR.
+        // On RTL, it causes jumpy behavior (on Desktop Safari) so we need to translate manually.
+        const x = this.__getNormalizedScrollLeft(this.$.table) + this.$.table.clientWidth - this.$.table.scrollWidth;
+        const transform = `translate(${x}px, 0)`;
+        for (let i = 0; i < this._frozenCells.length; i++) {
+          this._frozenCells[i].style.transform = transform;
+        }
+      }
+    }
+  };

package/src/vaadin-grid-selection-column.d.ts

@@ -0,0 +1,71 @@
+import { GridDefaultItem } from './interfaces';
+import { GridColumn } from './vaadin-grid-column.js';
+
+/**
+ * Fired when the `selectAll` property changes.
+ */
+export type GridSelectionColumnSelectAllChangedEvent = CustomEvent<{ value: boolean }>;
+
+export interface GridSelectionColumnCustomEventMap {
+  'select-all-changed': GridSelectionColumnSelectAllChangedEvent;
+}
+
+export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSelectionColumnCustomEventMap {}
+
+/**
+ * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
+ * that provides default renderers and functionality for item selection.
+ *
+ * #### Example:
+ * ```html
+ * <vaadin-grid items="[[items]]">
+ *  <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>
+ *
+ *  <vaadin-grid-column>
+ *    ...
+ * ```
+ *
+ * By default the selection column displays `<vaadin-checkbox>` elements in the
+ * column cells. The checkboxes in the body rows toggle selection of the corresponding row items.
+ *
+ * When the grid data is provided as an array of [`items`](#/elements/vaadin-grid#property-items),
+ * the column header gets an additional checkbox that can be used for toggling
+ * selection for all the items at once.
+ *
+ * __The default content can also be overridden__
+ *
+ * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
+ */
+declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
+  /**
+   * When true, all the items are selected.
+   * @attr {boolean} select-all
+   */
+  selectAll: boolean;
+
+  /**
+   * When true, the active gets automatically selected.
+   * @attr {boolean} auto-select
+   */
+  autoSelect: boolean;
+
+  addEventListener<K extends keyof GridSelectionColumnEventMap>(
+    type: K,
+    listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof GridSelectionColumnEventMap>(
+    type: K,
+    listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid-selection-column': GridSelectionColumn<GridDefaultItem>;
+  }
+}
+
+export { GridSelectionColumn };