@vaadin/grid 22.0.0-alpha7

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

@@ -0,0 +1,285 @@
+/**
+ * @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/checkbox/src/vaadin-checkbox.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.
+ */
+class GridSelectionColumn extends GridColumn {
+  static get is() {
+    return 'vaadin-grid-selection-column';
+  }
+
+  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(GridSelectionColumn.is, GridSelectionColumn);
+
+export { GridSelectionColumn };

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

@@ -0,0 +1,30 @@
+declare function SelectionMixin<TItem, T extends new (...args: any[]) => {}>(
+  base: T
+): T & SelectionMixinConstructor<TItem>;
+
+interface SelectionMixinConstructor<TItem> {
+  new (...args: any[]): SelectionMixin<TItem>;
+}
+
+interface SelectionMixin<TItem> {
+  /**
+   * An array that contains the selected items.
+   */
+  selectedItems: Array<TItem>;
+
+  /**
+   * Selects the given item.
+   *
+   * @param item The item object
+   */
+  selectItem(item: TItem): void;
+
+  /**
+   * Deselects the given item if it is already selected.
+   *
+   * @param item The item object
+   */
+  deselectItem(item: TItem): void;
+}
+
+export { SelectionMixin, SelectionMixinConstructor };

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

@@ -0,0 +1,93 @@
+/**
+ * @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 SelectionMixin = (superClass) =>
+  class SelectionMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * An array that contains the selected items.
+         * @type {!Array<!GridItem>}
+         */
+        selectedItems: {
+          type: Object,
+          notify: true,
+          value: () => []
+        }
+      };
+    }
+
+    static get observers() {
+      return ['_selectedItemsChanged(selectedItems.*)'];
+    }
+
+    /**
+     * @param {!GridItem} item
+     * @return {boolean}
+     * @protected
+     */
+    _isSelected(item) {
+      return this.selectedItems && this._getItemIndexInArray(item, this.selectedItems) > -1;
+    }
+
+    /**
+     * Selects the given item.
+     *
+     * @method selectItem
+     * @param {!GridItem} item The item object
+     */
+    selectItem(item) {
+      if (!this._isSelected(item)) {
+        this.selectedItems = [...this.selectedItems, item];
+      }
+    }
+
+    /**
+     * Deselects the given item if it is already selected.
+     *
+     * @method deselect
+     * @param {!GridItem} item The item object
+     */
+    deselectItem(item) {
+      if (this._isSelected(item)) {
+        this.selectedItems = this.selectedItems.filter((i) => !this._itemsEqual(i, item));
+      }
+    }
+
+    /**
+     * Toggles the selected state of the given item.
+     *
+     * @method toggle
+     * @param {!GridItem} item The item object
+     * @protected
+     */
+    _toggleItem(item) {
+      const index = this._getItemIndexInArray(item, this.selectedItems);
+      if (index === -1) {
+        this.selectItem(item);
+      } else {
+        this.deselectItem(item);
+      }
+    }
+
+    /** @private */
+    _selectedItemsChanged(e) {
+      if (this.$.items.children.length && (e.path === 'selectedItems' || e.path === 'selectedItems.splices')) {
+        Array.from(this.$.items.children).forEach((row) => {
+          this._updateItem(row, row._item);
+        });
+      }
+    }
+
+    /**
+     * Fired when the `selectedItems` property changes.
+     *
+     * @event selected-items-changed
+     */
+  };

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

@@ -0,0 +1,63 @@
+import { GridDefaultItem, GridSorterDirection } from './interfaces';
+
+import { GridColumn } from './vaadin-grid-column.js';
+
+/**
+ * Fired when the `direction` property changes.
+ */
+export type GridSortColumnDirectionChangedEvent = CustomEvent<{ value: GridSorterDirection }>;
+
+export interface GridSortColumnCustomEventMap {
+  'direction-changed': GridSortColumnDirectionChangedEvent;
+}
+
+export interface GridSortColumnEventMap extends HTMLElementEventMap, GridSortColumnCustomEventMap {}
+
+/**
+ * `<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.
+ */
+declare class GridSortColumn<TItem = GridDefaultItem> extends GridColumn<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;
+
+  addEventListener<K extends keyof GridSortColumnEventMap>(
+    type: K,
+    listener: (this: GridSortColumn<TItem>, ev: GridSortColumnEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof GridSortColumnEventMap>(
+    type: K,
+    listener: (this: GridSortColumn<TItem>, ev: GridSortColumnEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid-sort-column': GridSortColumn<GridDefaultItem>;
+  }
+}
+
+export { GridSortColumn };

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

@@ -0,0 +1,118 @@
+/**
+ * @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-sorter.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.
+ */
+class GridSortColumn extends GridColumn {
+  static get is() {
+    return 'vaadin-grid-sort-column';
+  }
+
+  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(GridSortColumn.is, GridSortColumn);
+
+export { GridSortColumn };

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

@@ -0,0 +1,15 @@
+declare function SortMixin<T extends new (...args: any[]) => {}>(base: T): T & SortMixinConstructor;
+
+interface SortMixinConstructor {
+  new (...args: any[]): SortMixin;
+}
+
+interface SortMixin {
+  /**
+   * When `true`, all `<vaadin-grid-sorter>` are applied for sorting.
+   * @attr {boolean} multi-sort
+   */
+  multiSort: boolean;
+}
+
+export { SortMixin, SortMixinConstructor };