@vaadin/grid 22.0.0-alpha7

package/src/vaadin-grid-styles.js

@@ -0,0 +1,297 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+registerStyles(
+  'vaadin-grid',
+  css`
+    @keyframes vaadin-grid-appear {
+      to {
+        opacity: 1;
+      }
+    }
+
+    :host {
+      display: block;
+      animation: 1ms vaadin-grid-appear;
+      height: 400px;
+      flex: 1 1 auto;
+      align-self: stretch;
+      position: relative;
+    }
+
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    #scroller {
+      display: block;
+      transform: translateY(0);
+      width: auto;
+      height: auto;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    :host([all-rows-visible]) {
+      height: auto;
+      align-self: flex-start;
+      flex-grow: 0;
+      width: 100%;
+    }
+
+    :host([all-rows-visible]) #scroller {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+
+    :host([all-rows-visible]) #items {
+      min-height: 1px;
+    }
+
+    #table {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      position: relative;
+      outline: none;
+      /* Workaround for a Desktop Safari bug: new stacking context here prevents the scrollbar from getting hidden */
+      z-index: 0;
+    }
+
+    #header,
+    #footer {
+      transform: translateX(var(--_grid-horizontal-scroll-position));
+      display: block;
+      position: -webkit-sticky;
+      position: sticky;
+      left: 0;
+      overflow: visible;
+      width: 100%;
+      z-index: 1;
+    }
+
+    #header {
+      top: 0;
+    }
+
+    th {
+      text-align: inherit;
+    }
+
+    /* Safari doesn't work with "inherit" */
+    [safari] th {
+      text-align: initial;
+    }
+
+    #footer {
+      bottom: 0;
+    }
+
+    #items {
+      transform: translateX(var(--_grid-horizontal-scroll-position));
+      flex-grow: 1;
+      flex-shrink: 0;
+      display: block;
+      position: -webkit-sticky;
+      position: sticky;
+      width: 100%;
+      left: 0;
+      overflow: visible;
+    }
+
+    [part~='row'] {
+      display: flex;
+      width: 100%;
+      box-sizing: border-box;
+      margin: 0;
+    }
+
+    [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
+      opacity: 0;
+    }
+
+    #items [part~='row'] {
+      position: absolute;
+    }
+
+    #items [part~='row']:empty {
+      height: 100%;
+    }
+
+    [part~='cell']:not([part~='details-cell']) {
+      flex-shrink: 0;
+      flex-grow: 1;
+      box-sizing: border-box;
+      display: flex;
+      width: 100%;
+      position: relative;
+      align-items: center;
+      padding: 0;
+      white-space: nowrap;
+    }
+
+    [part~='details-cell'] {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0;
+    }
+
+    [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    [hidden] {
+      display: none !important;
+    }
+
+    [frozen] {
+      z-index: 2;
+      transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
+      will-change: transform;
+    }
+
+    [no-scrollbars][safari] #table,
+    [no-scrollbars][firefox] #table {
+      overflow: hidden;
+    }
+
+    /* Reordering styles */
+    :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
+    :host([reordering]) [part~='resize-handle'],
+    #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+      pointer-events: none;
+    }
+
+    [part~='reorder-ghost'] {
+      visibility: hidden;
+      position: fixed;
+      pointer-events: none;
+      opacity: 0.5;
+
+      /* Prevent overflowing the grid in Firefox */
+      top: 0;
+      left: 0;
+    }
+
+    :host([reordering]) {
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    /* Resizing styles */
+    [part~='resize-handle'] {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      cursor: col-resize;
+      z-index: 1;
+    }
+
+    [part~='resize-handle']::before {
+      position: absolute;
+      content: '';
+      height: 100%;
+      width: 35px;
+      transform: translateX(-50%);
+    }
+
+    [last-column] [part~='resize-handle']::before,
+    [last-frozen] [part~='resize-handle']::before {
+      width: 18px;
+      transform: none;
+      right: 0;
+    }
+
+    #scroller[column-resizing] {
+      -ms-user-select: none;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    /* Sizer styles */
+    #sizer {
+      display: flex;
+      position: absolute;
+      visibility: hidden;
+    }
+
+    #sizer [part~='details-cell'] {
+      display: none !important;
+    }
+
+    #sizer [part~='cell'][hidden] {
+      display: none !important;
+    }
+
+    #sizer [part~='cell'] {
+      display: block;
+      flex-shrink: 0;
+      line-height: 0;
+      height: 0 !important;
+      min-height: 0 !important;
+      max-height: 0 !important;
+      padding: 0 !important;
+      border: none !important;
+    }
+
+    #sizer [part~='cell']::before {
+      content: '-';
+    }
+
+    #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+      display: none !important;
+    }
+
+    /* RTL specific styles */
+
+    :host([dir='rtl']) *:is(#items, #header, #footer, [frozen]) {
+      transform: none;
+    }
+
+    :host([dir='rtl']) #items,
+    :host([dir='rtl']) #header,
+    :host([dir='rtl']) #footer {
+      left: auto;
+    }
+
+    :host([dir='rtl']) [part~='reorder-ghost'] {
+      left: auto;
+      right: 0;
+    }
+
+    :host([dir='rtl']) [part~='resize-handle'] {
+      left: 0;
+      right: auto;
+    }
+
+    :host([dir='rtl']) [part~='resize-handle']::before {
+      transform: translateX(50%);
+    }
+
+    :host([dir='rtl']) [last-column] [part~='resize-handle']::before,
+    :host([dir='rtl']) [last-frozen] [part~='resize-handle']::before {
+      left: 0;
+      right: auto;
+    }
+  `,
+  { moduleId: 'vaadin-grid-styles' }
+);

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

@@ -0,0 +1,37 @@
+import { GridCellClassNameGenerator } from './interfaces';
+
+declare function StylingMixin<TItem, T extends new (...args: any[]) => {}>(base: T): T & StylingMixinConstructor<TItem>;
+
+interface StylingMixinConstructor<TItem> {
+  new (...args: any[]): StylingMixin<TItem>;
+}
+
+interface StylingMixin<TItem> {
+  /**
+   * A function that allows generating CSS class names for grid cells
+   * based on their row and column. The return value should be the generated
+   * class name as a string, or multiple class names separated by whitespace
+   * characters.
+   *
+   * Receives two arguments:
+   * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
+   * - `model` The object with the properties related with
+   *   the rendered item, contains:
+   *   - `model.index` The index of the item.
+   *   - `model.item` The item.
+   *   - `model.expanded` Sublevel toggle state.
+   *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
+   *   - `model.selected` Selected state.
+   */
+  cellClassNameGenerator: GridCellClassNameGenerator<TItem> | null | undefined;
+
+  /**
+   * Runs the `cellClassNameGenerator` for the visible cells.
+   * If the generator depends on varying conditions, you need to
+   * call this function manually in order to update the styles when
+   * the conditions change.
+   */
+  generateCellClassNames(): void;
+}
+
+export { StylingMixin, StylingMixinConstructor };

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

@@ -0,0 +1,71 @@
+/**
+ * @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 StylingMixin = (superClass) =>
+  class StylingMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * A function that allows generating CSS class names for grid cells
+         * based on their row and column. The return value should be the generated
+         * class name as a string, or multiple class names separated by whitespace
+         * characters.
+         *
+         * Receives two arguments:
+         * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
+         * - `model` The object with the properties related with
+         *   the rendered item, contains:
+         *   - `model.index` The index of the item.
+         *   - `model.item` The item.
+         *   - `model.expanded` Sublevel toggle state.
+         *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
+         *   - `model.selected` Selected state.
+         *
+         * @type {GridCellClassNameGenerator | null | undefined}
+         */
+        cellClassNameGenerator: Function
+      };
+    }
+
+    static get observers() {
+      return ['__cellClassNameGeneratorChanged(cellClassNameGenerator)'];
+    }
+
+    __cellClassNameGeneratorChanged() {
+      this.generateCellClassNames();
+    }
+
+    /**
+     * Runs the `cellClassNameGenerator` for the visible cells.
+     * If the generator depends on varying conditions, you need to
+     * call this function manually in order to update the styles when
+     * the conditions change.
+     */
+    generateCellClassNames() {
+      Array.from(this.$.items.children)
+        .filter((row) => !row.hidden)
+        .forEach((row) => this._generateCellClassNames(row, this.__getRowModel(row)));
+    }
+
+    /** @private */
+    _generateCellClassNames(row, model) {
+      Array.from(row.children).forEach((cell) => {
+        if (cell.__generatedClasses) {
+          cell.__generatedClasses.forEach((className) => cell.classList.remove(className));
+        }
+        if (this.cellClassNameGenerator) {
+          const result = this.cellClassNameGenerator(cell._column, model);
+          cell.__generatedClasses = result && result.split(' ').filter((className) => className.length > 0);
+          if (cell.__generatedClasses) {
+            cell.__generatedClasses.forEach((className) => cell.classList.add(className));
+          }
+        }
+      });
+    }
+  };

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

@@ -0,0 +1,36 @@
+import { GridDefaultItem } from './interfaces';
+import { GridColumn } from './vaadin-grid-column.js';
+
+/**
+ * `<vaadin-grid-tree-column>` is a helper element for the `<vaadin-grid>`
+ * that provides default renderer and functionality for toggling tree/hierarchical items.
+ *
+ * #### Example:
+ * ```html
+ * <vaadin-grid items="[[items]]">
+ *  <vaadin-grid-tree-column path="name.first"></vaadin-grid-tree-column>
+ *
+ *  <vaadin-grid-column>
+ *    ...
+ * ```
+ */
+declare class GridTreeColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
+  /**
+   * JS Path of the property in the item used as text content for the tree toggle.
+   */
+  path: string | null | undefined;
+
+  /**
+   * JS Path of the property in the item that indicates whether the item has child items.
+   * @attr {string} item-has-children-path
+   */
+  itemHasChildrenPath: string | null | undefined;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid-tree-column': GridTreeColumn<GridDefaultItem>;
+  }
+}
+
+export { GridTreeColumn };

package/src/vaadin-grid-tree-column.js

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { GridColumn } from './vaadin-grid-column.js';
+import './vaadin-grid-tree-toggle.js';
+
+/**
+ * `<vaadin-grid-tree-column>` is a helper element for the `<vaadin-grid>`
+ * that provides default renderer and functionality for toggling tree/hierarchical items.
+ *
+ * #### Example:
+ * ```html
+ * <vaadin-grid items="[[items]]">
+ *  <vaadin-grid-tree-column path="name.first"></vaadin-grid-tree-column>
+ *
+ *  <vaadin-grid-column>
+ *    ...
+ * ```
+ */
+class GridTreeColumn extends GridColumn {
+  static get is() {
+    return 'vaadin-grid-tree-column';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * JS Path of the property in the item used as text content for the tree toggle.
+       */
+      path: String,
+
+      /**
+       * JS Path of the property in the item that indicates whether the item has child items.
+       * @attr {string} item-has-children-path
+       */
+      itemHasChildrenPath: {
+        type: String,
+        value: 'children'
+      }
+    };
+  }
+
+  static get observers() {
+    return ['_onRendererOrBindingChanged(_renderer, _cells, _cells.*, path, itemHasChildrenPath)'];
+  }
+
+  constructor() {
+    super();
+
+    this.__boundOnExpandedChanged = this.__onExpandedChanged.bind(this);
+  }
+
+  /**
+   * Renders the grid tree toggle to the body cell
+   *
+   * @private
+   */
+  __defaultRenderer(root, _column, { item, expanded, level }) {
+    let toggle = root.firstElementChild;
+    if (!toggle) {
+      toggle = document.createElement('vaadin-grid-tree-toggle');
+      toggle.addEventListener('expanded-changed', this.__boundOnExpandedChanged);
+      root.appendChild(toggle);
+    }
+
+    toggle.__item = item;
+    toggle.__rendererExpanded = expanded;
+    toggle.expanded = expanded;
+    toggle.leaf = this.__isLeafItem(item, this.itemHasChildrenPath);
+    toggle.textContent = this.__getToggleContent(this.path, item);
+    toggle.level = level;
+  }
+
+  /**
+   * The tree column doesn't allow to use a custom renderer
+   * to override the content of body cells.
+   * It always renders the grid tree toggle to body cells.
+   *
+   * @override
+   */
+  _computeRenderer() {
+    return this.__defaultRenderer;
+  }
+
+  /**
+   * Expands or collapses the row once the tree toggle is switched.
+   * The listener handles only user-fired events.
+   *
+   * @private
+   */
+  __onExpandedChanged(e) {
+    // Skip if the state is changed by the renderer.
+    if (e.detail.value === e.target.__rendererExpanded) {
+      return;
+    }
+
+    if (e.detail.value) {
+      this._grid.expandItem(e.target.__item);
+    } else {
+      this._grid.collapseItem(e.target.__item);
+    }
+  }
+
+  /** @private */
+  __isLeafItem(item, itemHasChildrenPath) {
+    return !item || !item[itemHasChildrenPath];
+  }
+
+  /** @private */
+  __getToggleContent(path, item) {
+    return path && this.get(path, item);
+  }
+}
+
+customElements.define(GridTreeColumn.is, GridTreeColumn);
+
+export { GridTreeColumn };

package/src/vaadin-grid-tree-toggle.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * Fired when the `expanded` property changes.
+ */
+export type GridTreeToggleExpandedChangedEvent = CustomEvent<{ value: boolean }>;
+
+export interface GridTreeToggleCustomEventMap {
+  'expanded-changed': GridTreeToggleExpandedChangedEvent;
+}
+
+export interface GridTreeToggleEventMap extends HTMLElementEventMap, GridTreeToggleCustomEventMap {}
+
+/**
+ * `<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`
+ * that provides toggle and level display functionality for the item tree.
+ *
+ * #### Example:
+ * ```html
+ * <vaadin-grid-column id="column"></vaadin-grid-column>
+ * ```
+ * ```js
+ * const column = document.querySelector('#column');
+ * column.renderer = (root, column, model) => {
+ *   let treeToggle = root.firstElementChild;
+ *   if (!treeToggle) {
+ *     treeToggle = document.createElement('vaadin-grid-tree-toggle');
+ *     treeToggle.addEventListener('expanded-changed', () => { ... });
+ *     root.appendChild(treeToggle);
+ *   }
+ *   treeToggle.leaf = !model.item.hasChildren;
+ *   treeToggle.level = level;
+ *   treeToggle.expanded = expanded;
+ *   treeToggle.textContent = model.item.name;
+ * };
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ---|---
+ * `toggle` | The tree toggle icon
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description | Part name
+ * ---|---|---
+ * `expanded` | When present, the toggle is expanded | :host
+ * `leaf` | When present, the toggle is not expandable, i. e., the current item is a leaf | :host
+ *
+ * The following custom CSS properties are available on
+ * the `<vaadin-grid-tree-toggle>` element:
+ *
+ * Custom CSS property | Description | Default
+ * ---|---|---
+ * `--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`
+ *
+ * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
+ */
+declare class GridTreeToggle extends ThemableMixin(DirMixin(HTMLElement)) {
+  /**
+   * Current level of the tree represented with a horizontal offset
+   * of the toggle button.
+   */
+  level: number;
+
+  /**
+   * Hides the toggle icon and disables toggling a tree sublevel.
+   */
+  leaf: boolean;
+
+  /**
+   * Sublevel toggle state.
+   */
+  expanded: boolean;
+
+  addEventListener<K extends keyof GridTreeToggleEventMap>(
+    type: K,
+    listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof GridTreeToggleEventMap>(
+    type: K,
+    listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid-tree-toggle': GridTreeToggle;
+  }
+}
+
+export { GridTreeToggle };