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

package/src/vaadin-grid-sorter.js

@@ -3,228 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
-
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = `
-  <style>
-    @font-face {
-      font-family: 'vaadin-grid-sorter-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAA0AAAAABuwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEFAAAABkAAAAcfep+mUdERUYAAAP4AAAAHAAAAB4AJwAOT1MvMgAAAZgAAAA/AAAAYA8TBPpjbWFwAAAB7AAAAFUAAAFeF1fZ4mdhc3AAAAPwAAAACAAAAAgAAAAQZ2x5ZgAAAlgAAABcAAAAnMvguMloZWFkAAABMAAAAC8AAAA2C5Ap72hoZWEAAAFgAAAAHQAAACQGbQPHaG10eAAAAdgAAAAUAAAAHAoAAABsb2NhAAACRAAAABIAAAASAIwAYG1heHAAAAGAAAAAFgAAACAACwAKbmFtZQAAArQAAAECAAACZxWCgKhwb3N0AAADuAAAADUAAABZCrApUXicY2BkYGAA4rDECVrx/DZfGbhZGEDgyqNPOxH0/wNMq5kPALkcDEwgUQBWRA0dAHicY2BkYGA+8P8AAwMLAwgwrWZgZEAFbABY4QM8AAAAeJxjYGRgYOAAQiYGEICQSAAAAi8AFgAAeJxjYGY6yziBgZWBgWkm0xkGBoZ+CM34msGYkZMBFTAKoAkwODAwvmRiPvD/AIMDMxCD1CDJKjAwAgBktQsXAHicY2GAAMZQCM0EwqshbAALxAEKeJxjYGBgZoBgGQZGBhCIAPIYwXwWBhsgzcXAwcAEhIwMCi+Z/v/9/x+sSuElA4T9/4k4K1gHFwMMMILMY2QDYmaoABOQYGJABUA7WBiGNwAAJd4NIQAAAAAAAAAACAAIABAAGAAmAEAATgAAeJyNjLENgDAMBP9tIURJwQCMQccSZgk2i5fIYBDAidJjycXr7x5EPwE2wY8si7jmyBNXGo/bNBerxJNrpxhbO3/fEFpx8ZICpV+ghxJ74fAMe+h7Ox14AbrsHB14nK2QQWrDMBRER4mTkhQK3ZRQKOgCNk7oGQqhhEIX2WSlWEI1BAlkJ5CDdNsj5Ey9Rncdi38ES+jzNJo/HwTgATcoDEthhY3wBHc4CE+pfwsX5F/hGe7Vo/AcK/UhvMSz+mGXKhZU6pww8ISz3oWn1BvhgnwTnuEJf8Jz1OpFeIlX9YULDLdFi4ASHolkSR0iuYdjLak1vAequBhj21D61Nqyi6l3qWybGPjySbPHGScGJl6dP58MYcQRI0bts7mjebBqrFENH7t3qWtj0OuqHnXcW7b0HOTZFnKryRGW2hFX1m0O2vEM3opNMfTau+CS6Z3Vx6veNnEXY6jwDxhsc2gAAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSrpYEBlIbxjQDrzgsuAAAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKyoz1cD0o087YTQATOcIewAAAA==) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-  </style>
-`;
-
-document.head.appendChild($_documentContainer.content);
+import { GridSorter } from '@vaadin/grid/src/vaadin-grid-sorter.js';
 
 /**
- * `<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
- * visual feedback, and handlers for sorting the grid data.
- *
- * #### Example:
- * ```html
- * <vaadin-grid-column id="column"></vaadin-grid-column>
- * ```
- * ```js
- * const column = document.querySelector('#column');
- * column.renderer = (root, column, model) => {
- *   let sorter = root.firstElementChild;
- *   if (!sorter) {
- *     sorter = document.createElement('vaadin-grid-sorter');
- *     root.appendChild(sorter);
- *   }
- *   sorter.path = 'name.first';
- * };
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ----------------|----------------
- * `content` | The slotted content wrapper
- * `indicators` | The internal sorter indicators.
- * `order` | The internal sorter order
- *
- * The following state attributes are available for styling:
- *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `direction` | Sort direction of a sorter | :host
- *
- * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
- * @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.
- *
- * @extends HTMLElement
+ * @deprecated Import `GridSorter` from `@vaadin/grid/vaadin-grid-sorter` instead.
  */
-class GridSorterElement extends ThemableMixin(DirMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-flex;
-          cursor: pointer;
-          max-width: 100%;
-        }
-
-        [part='content'] {
-          flex: 1 1 auto;
-        }
-
-        [part='indicators'] {
-          position: relative;
-          align-self: center;
-          flex: none;
-        }
-
-        [part='order'] {
-          display: inline;
-          vertical-align: super;
-        }
-
-        [part='indicators']::before {
-          font-family: 'vaadin-grid-sorter-icons';
-          display: inline-block;
-        }
-
-        :host(:not([direction])) [part='indicators']::before {
-          content: '\\e901';
-        }
-
-        :host([direction='asc']) [part='indicators']::before {
-          content: '\\e900';
-        }
-
-        :host([direction='desc']) [part='indicators']::before {
-          content: '\\e902';
-        }
-      </style>
-
-      <div part="content">
-        <slot></slot>
-      </div>
-      <div part="indicators">
-        <span part="order">[[_getDisplayOrder(_order)]]</span>
-      </div>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-grid-sorter';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * JS Path of the property in the item used for sorting the data.
-       */
-      path: String,
-
-      /**
-       * How to sort the data.
-       * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in
-       * descending direction, or `null` for not sorting the data.
-       * @type {GridSorterDirection | undefined}
-       */
-      direction: {
-        type: String,
-        reflectToAttribute: true,
-        notify: true,
-        value: null
-      },
-
-      /**
-       * @type {number | null}
-       * @protected
-       */
-      _order: {
-        type: Number,
-        value: null
-      },
-
-      /** @private */
-      _isConnected: {
-        type: Boolean,
-        observer: '__isConnectedChanged'
-      }
-    };
-  }
-
-  static get observers() {
-    return ['_pathOrDirectionChanged(path, direction)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    this.addEventListener('click', this._onClick.bind(this));
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._isConnected = true;
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._isConnected = false;
-  }
-
-  /** @private */
-  _pathOrDirectionChanged() {
-    this.__dispatchSorterChangedEvenIfPossible();
-  }
-
-  /** @private */
-  __isConnectedChanged(newValue, oldValue) {
-    if (oldValue === false) {
-      return;
-    }
-
-    this.__dispatchSorterChangedEvenIfPossible();
-  }
-
-  /** @private */
-  __dispatchSorterChangedEvenIfPossible() {
-    if (this.path === undefined || this.direction === undefined || !this._isConnected) {
-      return;
-    }
-
-    this.dispatchEvent(new CustomEvent('sorter-changed', { bubbles: true, composed: true }));
-  }
-
-  /** @private */
-  _getDisplayOrder(order) {
-    return order === null ? '' : order + 1;
-  }
-
-  /** @private */
-  _onClick(e) {
-    const activeElement = this.getRootNode().activeElement;
-    if (this !== activeElement && this.contains(activeElement)) {
-      // Some focusable content inside the sorter was clicked, do nothing.
-      return;
-    }
-
-    e.preventDefault();
-    if (this.direction === 'asc') {
-      this.direction = 'desc';
-    } else if (this.direction === 'desc') {
-      this.direction = null;
-    } else {
-      this.direction = 'asc';
-    }
-  }
-}
-
-customElements.define(GridSorterElement.is, GridSorterElement);
+export const GridSorterElement = GridSorter;
 
-export { GridSorterElement };
+export * from '@vaadin/grid/src/vaadin-grid-sorter.js';

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

@@ -1,36 +1,19 @@
-import { GridDefaultItem } from './interfaces';
-import { GridColumnElement } 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>
- *    ...
- * ```
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class GridTreeColumnElement<TItem = GridDefaultItem> extends GridColumnElement<TItem> {
-  /**
-   * JS Path of the property in the item used as text content for the tree toggle.
-   */
-  path: string | null | undefined;
+import { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import { GridTreeColumn } from '@vaadin/grid/src/vaadin-grid-tree-column.js';
 
-  /**
-   * 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;
-}
+/**
+ * @deprecated Import `GridTreeColumn` from `@vaadin/grid/vaadin-grid-tree-column` instead.
+ */
+export type GridTreeColumnElement<TItem = GridDefaultItem> = GridTreeColumn<TItem>;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-tree-column': GridTreeColumnElement<GridDefaultItem>;
-  }
-}
+/**
+ * @deprecated Import `GridTreeColumn` from `@vaadin/grid/vaadin-grid-tree-column` instead.
+ */
+export const GridTreeColumnElement: typeof GridTreeColumn;
 
-export { GridTreeColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-tree-column.js';

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

@@ -3,117 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumnElement } from './vaadin-grid-column.js';
-import './vaadin-grid-tree-toggle.js';
+import { GridTreeColumn } from '@vaadin/grid/src/vaadin-grid-tree-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>
- *    ...
- * ```
+ * @deprecated Import `GridTreeColumn` from `@vaadin/grid/vaadin-grid-tree-column` instead.
  */
-class GridTreeColumnElement extends GridColumnElement {
-  static get is() {
-    return 'vaadin-grid-tree-column';
-  }
+export const GridTreeColumnElement = GridTreeColumn;
 
-  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(GridTreeColumnElement.is, GridTreeColumnElement);
-
-export { GridTreeColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-tree-column.js';

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

@@ -1,98 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
 /**
- * Fired when the `expanded` property changes.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-export type GridTreeToggleExpandedChangedEvent = CustomEvent<{ value: boolean }>;
-
-export interface GridTreeToggleElementEventMap {
-  'expanded-changed': GridTreeToggleExpandedChangedEvent;
-}
-
-export interface GridTreeToggleEventMap extends HTMLElementEventMap, GridTreeToggleElementEventMap {}
+import { GridTreeToggle } from '@vaadin/grid/src/vaadin-grid-tree-toggle.js';
 
 /**
- * `<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.
+ * @deprecated Import `GridTreeToggle` from `@vaadin/grid/vaadin-grid-tree-toggle` instead.
  */
-declare class GridTreeToggleElement extends ThemableMixin(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;
+export type GridTreeToggleElement = GridTreeToggle;
 
-  addEventListener<K extends keyof GridTreeToggleEventMap>(
-    type: K,
-    listener: (this: GridTreeToggleElement, ev: GridTreeToggleEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof GridTreeToggleEventMap>(
-    type: K,
-    listener: (this: GridTreeToggleElement, ev: GridTreeToggleEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-tree-toggle': GridTreeToggleElement;
-  }
-}
+/**
+ * @deprecated Import `GridTreeToggle` from `@vaadin/grid/vaadin-grid-tree-toggle` instead.
+ */
+export const GridTreeToggleElement: typeof GridTreeToggle;
 
-export { GridTreeToggleElement };
+export * from '@vaadin/grid/src/vaadin-grid-tree-toggle.js';