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

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

@@ -3,283 +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/checkbox/src/vaadin-checkbox.js';
+import { GridSelectionColumn } from '@vaadin/grid/src/vaadin-grid-selection-column.js';
 
 /**
- * `<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.
+ * @deprecated Import `GridSelectionColumn` from `@vaadin/grid/vaadin-grid-selection-column` instead.
  */
-class GridSelectionColumnElement extends GridColumnElement {
-  static get is() {
-    return 'vaadin-grid-selection-column';
-  }
+export const GridSelectionColumnElement = GridSelectionColumn;
 
-  static get properties() {
-    return {
-      /**
-       * Width of the cells for this column.
-       */
-      width: {
-        type: String,
-        value: '58px'
-      },
-
-      /**
-       * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
-       * @attr {number} flex-grow
-       * @type {number}
-       */
-      flexGrow: {
-        type: Number,
-        value: 0
-      },
-
-      /**
-       * When true, all the items are selected.
-       * @attr {boolean} select-all
-       * @type {boolean}
-       */
-      selectAll: {
-        type: Boolean,
-        value: false,
-        notify: true
-      },
-
-      /**
-       * When true, the active gets automatically selected.
-       * @attr {boolean} auto-select
-       * @type {boolean}
-       */
-      autoSelect: {
-        type: Boolean,
-        value: false
-      },
-
-      /** @private */
-      __indeterminate: Boolean,
-
-      /**
-       * The previous state of activeItem. When activeItem turns to `null`,
-       * previousActiveItem will have an Object with just unselected activeItem
-       * @private
-       */
-      __previousActiveItem: Object,
-
-      /** @private */
-      __selectAllHidden: Boolean
-    };
-  }
-
-  static get observers() {
-    return [
-      '__onSelectAllChanged(selectAll)',
-      '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, selectAll, __indeterminate, __selectAllHidden)'
-    ];
-  }
-
-  constructor() {
-    super();
-
-    this.__boundOnActiveItemChanged = this.__onActiveItemChanged.bind(this);
-    this.__boundOnDataProviderChanged = this.__onDataProviderChanged.bind(this);
-    this.__boundOnSelectedItemsChanged = this.__onSelectedItemsChanged.bind(this);
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    this._grid.removeEventListener('active-item-changed', this.__boundOnActiveItemChanged);
-    this._grid.removeEventListener('data-provider-changed', this.__boundOnDataProviderChanged);
-    this._grid.removeEventListener('filter-changed', this.__boundOnSelectedItemsChanged);
-    this._grid.removeEventListener('selected-items-changed', this.__boundOnSelectedItemsChanged);
-
-    super.disconnectedCallback();
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    if (this._grid) {
-      this._grid.addEventListener('active-item-changed', this.__boundOnActiveItemChanged);
-      this._grid.addEventListener('data-provider-changed', this.__boundOnDataProviderChanged);
-      this._grid.addEventListener('filter-changed', this.__boundOnSelectedItemsChanged);
-      this._grid.addEventListener('selected-items-changed', this.__boundOnSelectedItemsChanged);
-    }
-  }
-
-  /**
-   * Renders the Select All checkbox to the header cell.
-   *
-   * @override
-   */
-  _defaultHeaderRenderer(root, _column) {
-    let checkbox = root.firstElementChild;
-    if (!checkbox) {
-      checkbox = document.createElement('vaadin-checkbox');
-      checkbox.setAttribute('aria-label', 'Select All');
-      checkbox.classList.add('vaadin-grid-select-all-checkbox');
-      checkbox.addEventListener('checked-changed', this.__onSelectAllCheckedChanged.bind(this));
-      root.appendChild(checkbox);
-    }
-
-    const checked = this.__isChecked(this.selectAll, this.__indeterminate);
-    checkbox.__rendererChecked = checked;
-    checkbox.checked = checked;
-    checkbox.hidden = this.__selectAllHidden;
-    checkbox.indeterminate = this.__indeterminate;
-  }
-
-  /**
-   * Renders the Select Row checkbox to the body cell.
-   *
-   * @override
-   */
-  _defaultRenderer(root, _column, { item, selected }) {
-    let checkbox = root.firstElementChild;
-    if (!checkbox) {
-      checkbox = document.createElement('vaadin-checkbox');
-      checkbox.setAttribute('aria-label', 'Select Row');
-      checkbox.addEventListener('checked-changed', this.__onSelectRowCheckedChanged.bind(this));
-      root.appendChild(checkbox);
-    }
-
-    checkbox.__item = item;
-    checkbox.__rendererChecked = selected;
-    checkbox.checked = selected;
-  }
-
-  /** @private */
-  __onSelectAllChanged(selectAll) {
-    if (selectAll === undefined || !this._grid) {
-      return;
-    }
-
-    if (!this.__selectAllInitialized) {
-      // The initial value for selectAll property was applied, avoid clearing pre-selected items
-      this.__selectAllInitialized = true;
-      return;
-    }
-
-    if (this._selectAllChangeLock) {
-      return;
-    }
-
-    this._grid.selectedItems = selectAll && Array.isArray(this._grid.items) ? this.__getRootLevelItems() : [];
-  }
-
-  /**
-   * Return true if array `a` contains all the items in `b`
-   * We need this when sorting or to preserve selection after filtering.
-   * @private
-   */
-  __arrayContains(a, b) {
-    return Array.isArray(a) && Array.isArray(b) && b.every((i) => a.includes(i));
-  }
-
-  /**
-   * Enables or disables the Select All mode once the Select All checkbox is switched.
-   * The listener handles only user-fired events.
-   *
-   * @private
-   */
-  __onSelectAllCheckedChanged(e) {
-    // Skip if the state is changed by the renderer.
-    if (e.target.checked === e.target.__rendererChecked) {
-      return;
-    }
-
-    this.selectAll = this.__indeterminate || e.target.checked;
-  }
-
-  /**
-   * Selects or deselects the row once the Select Row checkbox is switched.
-   * The listener handles only user-fired events.
-   *
-   * @private
-   */
-  __onSelectRowCheckedChanged(e) {
-    // Skip if the state is changed by the renderer.
-    if (e.target.checked === e.target.__rendererChecked) {
-      return;
-    }
-
-    if (e.target.checked) {
-      this._grid.selectItem(e.target.__item);
-    } else {
-      this._grid.deselectItem(e.target.__item);
-    }
-  }
-
-  /**
-   * iOS needs indeterminated + checked at the same time
-   * @private
-   */
-  __isChecked(selectAll, indeterminate) {
-    return indeterminate || selectAll;
-  }
-
-  /** @private */
-  __onActiveItemChanged(e) {
-    const activeItem = e.detail.value;
-    if (this.autoSelect) {
-      const item = activeItem || this.__previousActiveItem;
-      if (item) {
-        this._grid._toggleItem(item);
-      }
-    }
-    this.__previousActiveItem = activeItem;
-  }
-
-  /** @private */
-  __getRootLevelItems() {
-    const rootCache = this._grid._cache;
-    return [...Array(rootCache.size)].map((_, idx) => rootCache.items[idx]);
-  }
-
-  /** @private */
-  __onSelectedItemsChanged() {
-    this._selectAllChangeLock = true;
-    if (Array.isArray(this._grid.items)) {
-      if (!this._grid.selectedItems.length) {
-        this.selectAll = false;
-        this.__indeterminate = false;
-      } else if (this.__arrayContains(this._grid.selectedItems, this.__getRootLevelItems())) {
-        this.selectAll = true;
-        this.__indeterminate = false;
-      } else {
-        this.selectAll = false;
-        this.__indeterminate = true;
-      }
-    }
-    this._selectAllChangeLock = false;
-  }
-
-  /** @private */
-  __onDataProviderChanged() {
-    this.__selectAllHidden = !Array.isArray(this._grid.items);
-  }
-}
-
-customElements.define(GridSelectionColumnElement.is, GridSelectionColumnElement);
-
-export { GridSelectionColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-selection-column.js';

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

@@ -1,63 +1,19 @@
-import { GridDefaultItem, GridSorterDirection } from './interfaces';
-
-import { GridColumnElement } from './vaadin-grid-column.js';
-
 /**
- * Fired when the `direction` 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 GridSortColumnDirectionChangedEvent = CustomEvent<{ value: GridSorterDirection }>;
-
-export interface GridSortColumnElementEventMap {
-  'direction-changed': GridSortColumnDirectionChangedEvent;
-}
-
-export interface GridSortColumnEventMap extends HTMLElementEventMap, GridSortColumnElementEventMap {}
+import { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import { GridSortColumn } from '@vaadin/grid/src/vaadin-grid-sort-column.js';
 
 /**
- * `<vaadin-grid-sort-column>` is a helper element for the `<vaadin-grid>`
- * that provides default header renderer and functionality for sorting.
- *
- * #### Example:
- * ```html
- * <vaadin-grid items="[[items]]">
- *  <vaadin-grid-sort-column path="name.first" direction="asc"></vaadin-grid-sort-column>
- *
- *  <vaadin-grid-column>
- *    ...
- * ```
- *
- * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
+ * @deprecated Import `GridSortColumn` from `@vaadin/grid/vaadin-grid-sort-column` instead.
  */
-declare class GridSortColumnElement<TItem = GridDefaultItem> extends GridColumnElement<TItem> {
-  /**
-   * JS Path of the property in the item used for sorting the data.
-   */
-  path: string | null | undefined;
-
-  /**
-   * 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.
-   */
-  direction: GridSorterDirection | null | undefined;
+export type GridSortColumnElement<TItem = GridDefaultItem> = GridSortColumn<TItem>;
 
-  addEventListener<K extends keyof GridSortColumnEventMap>(
-    type: K,
-    listener: (this: GridSortColumnElement<TItem>, ev: GridSortColumnEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof GridSortColumnEventMap>(
-    type: K,
-    listener: (this: GridSortColumnElement<TItem>, ev: GridSortColumnEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-sort-column': GridSortColumnElement<GridDefaultItem>;
-  }
-}
+/**
+ * @deprecated Import `GridSortColumn` from `@vaadin/grid/vaadin-grid-sort-column` instead.
+ */
+export const GridSortColumnElement: typeof GridSortColumn;
 
-export { GridSortColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-sort-column.js';

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

@@ -3,116 +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-sorter.js';
+import { GridSortColumn } from '@vaadin/grid/src/vaadin-grid-sort-column.js';
 
 /**
- * `<vaadin-grid-sort-column>` is a helper element for the `<vaadin-grid>`
- * that provides default header renderer and functionality for sorting.
- *
- * #### Example:
- * ```html
- * <vaadin-grid items="[[items]]">
- *  <vaadin-grid-sort-column path="name.first" direction="asc"></vaadin-grid-sort-column>
- *
- *  <vaadin-grid-column>
- *    ...
- * ```
- *
- * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
+ * @deprecated Import `GridSortColumn` from `@vaadin/grid/vaadin-grid-sort-column` instead.
  */
-class GridSortColumnElement extends GridColumnElement {
-  static get is() {
-    return 'vaadin-grid-sort-column';
-  }
+export const GridSortColumnElement = GridSortColumn;
 
-  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,
-        notify: true
-      }
-    };
-  }
-
-  static get observers() {
-    return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, direction)'];
-  }
-
-  constructor() {
-    super();
-
-    this.__boundOnDirectionChanged = this.__onDirectionChanged.bind(this);
-  }
-
-  /**
-   * Renders the grid sorter to the header cell.
-   *
-   * @override
-   */
-  _defaultHeaderRenderer(root, _column) {
-    let sorter = root.firstElementChild;
-    if (!sorter) {
-      sorter = document.createElement('vaadin-grid-sorter');
-      sorter.addEventListener('direction-changed', this.__boundOnDirectionChanged);
-      root.appendChild(sorter);
-    }
-
-    sorter.path = this.path;
-    sorter.__rendererDirection = this.direction;
-    sorter.direction = this.direction;
-    sorter.textContent = this.__getHeader(this.header, this.path);
-  }
-
-  /**
-   * The sort column doesn't allow to use a custom header renderer
-   * to override the header cell content.
-   * It always renders the grid sorter to the header cell.
-   *
-   * @override
-   */
-  _computeHeaderRenderer() {
-    return this._defaultHeaderRenderer;
-  }
-
-  /**
-   * Updates the sorting direction once the grid sorter's direction is changed.
-   * The listener handles only user-fired events.
-   *
-   * @private
-   */
-  __onDirectionChanged(e) {
-    // Skip if the direction is changed by the renderer.
-    if (e.detail.value === e.target.__rendererDirection) {
-      return;
-    }
-
-    this.direction = e.detail.value;
-  }
-
-  /** @private */
-  __getHeader(header, path) {
-    if (header) {
-      return header;
-    }
-
-    if (path) {
-      return this._generateHeader(path);
-    }
-  }
-}
-
-customElements.define(GridSortColumnElement.is, GridSortColumnElement);
-
-export { GridSortColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-sort-column.js';

package/src/vaadin-grid-sorter.d.ts

@@ -1,89 +1,18 @@
-import { GridSorterDirection } from './interfaces';
-
 /**
- * Fired when the `direction` 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 GridSorterDirectionChangedEvent = CustomEvent<{ value: GridSorterDirection }>;
-
-export interface GridSorterElementEventMap {
-  'sorter-changed': Event;
-
-  'direction-changed': GridSorterDirectionChangedEvent;
-}
-
-export interface GridSorterEventMap extends HTMLElementEventMap, GridSorterElementEventMap {}
+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.
+ * @deprecated Import `GridSorter` from `@vaadin/grid/vaadin-grid-sorter` instead.
  */
-declare class GridSorterElement extends HTMLElement {
-  /**
-   * JS Path of the property in the item used for sorting the data.
-   */
-  path: string | null | undefined;
-
-  /**
-   * 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.
-   */
-  direction: GridSorterDirection | null | undefined;
+export type GridSorterElement = GridSorter;
 
-  _order: number | null;
-
-  addEventListener<K extends keyof GridSorterEventMap>(
-    type: K,
-    listener: (this: GridSorterElement, ev: GridSorterEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof GridSorterEventMap>(
-    type: K,
-    listener: (this: GridSorterElement, ev: GridSorterEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-sorter': GridSorterElement;
-  }
-}
+/**
+ * @deprecated Import `GridSorter` from `@vaadin/grid/vaadin-grid-sorter` instead.
+ */
+export const GridSorterElement: typeof GridSorter;
 
-export { GridSorterElement };
+export * from '@vaadin/grid/src/vaadin-grid-sorter.js';