@vaadin/grid 24.3.0-alpha1 → 24.3.0-alpha3

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

@@ -6,7 +6,7 @@
 import '@vaadin/checkbox/src/vaadin-checkbox.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
-import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
+import { GridSelectionColumnMixin } from './vaadin-grid-selection-column-mixin.js';
 
 /**
  * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
@@ -31,196 +31,14 @@ import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-bas
  * __The default content can also be overridden__
  *
  * @customElement
- * @extends GridColumn
- * @mixes GridSelectionColumnBaseMixin
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
+ * @extends GridColumn
+ * @mixes GridSelectionColumnMixin
  */
-class GridSelectionColumn extends GridSelectionColumnBaseMixin(GridColumn) {
+class GridSelectionColumn extends GridSelectionColumnMixin(GridColumn) {
   static get is() {
     return 'vaadin-grid-selection-column';
   }
-
-  static get properties() {
-    return {
-      /**
-       * The previous state of activeItem. When activeItem turns to `null`,
-       * previousActiveItem will have an Object with just unselected activeItem
-       * @private
-       */
-      __previousActiveItem: Object,
-    };
-  }
-
-  static get observers() {
-    return ['__onSelectAllChanged(selectAll)'];
-  }
-
-  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);
-    }
-  }
-
-  /** @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;
-    }
-
-    if (selectAll && this.__hasArrayDataProvider()) {
-      this.__withFilteredItemsArray((items) => {
-        this._grid.selectedItems = items;
-      });
-    } else {
-      this._grid.selectedItems = [];
-    }
-  }
-
-  /**
-   * 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));
-  }
-
-  /**
-   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
-   * selecting all items.
-   *
-   * @protected
-   * @override
-   */
-  _selectAll() {
-    this.selectAll = true;
-  }
-
-  /**
-   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
-   * deselecting all items.
-   *
-   * @protected
-   * @override
-   */
-  _deselectAll() {
-    this.selectAll = false;
-  }
-
-  /**
-   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
-   * selecting an item.
-   *
-   * @param {Object} item the item to select
-   * @protected
-   * @override
-   */
-  _selectItem(item) {
-    this._grid.selectItem(item);
-  }
-
-  /**
-   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
-   * deselecting an item.
-   *
-   * @param {Object} item the item to deselect
-   * @protected
-   * @override
-   */
-  _deselectItem(item) {
-    this._grid.deselectItem(item);
-  }
-
-  /** @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 */
-  __hasArrayDataProvider() {
-    return Array.isArray(this._grid.items) && !!this._grid.dataProvider;
-  }
-
-  /** @private */
-  __onSelectedItemsChanged() {
-    this._selectAllChangeLock = true;
-    if (this.__hasArrayDataProvider()) {
-      this.__withFilteredItemsArray((items) => {
-        if (!this._grid.selectedItems.length) {
-          this.selectAll = false;
-          this._indeterminate = false;
-        } else if (this.__arrayContains(this._grid.selectedItems, items)) {
-          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);
-  }
-
-  /**
-   * Assuming the grid uses an items array data provider, fetches all the filtered items
-   * from the data provider and invokes the callback with the resulting array.
-   *
-   * @private
-   */
-  __withFilteredItemsArray(callback) {
-    const params = {
-      page: 0,
-      pageSize: Infinity,
-      sortOrders: [],
-      filters: this._grid._mapFilters(),
-    };
-    this._grid.dataProvider(params, (items) => callback(items));
-  }
 }
 
 defineCustomElement(GridSelectionColumn);

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { GridSorterDirection } from './vaadin-grid-sorter.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 {}
+
+export declare function GridSortColumnMixin<T extends Constructor<HTMLElement>>(
+  superclass: T,
+): Constructor<GridSortColumnMixinClass> & T;
+
+export declare class GridSortColumnMixinClass {
+  /**
+   * 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;
+}

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

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const GridSortColumnMixin = (superClass) =>
+  class extends superClass {
+    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);
+      }
+    }
+  };

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

@@ -4,19 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';
-import { GridColumn } from './vaadin-grid-column.js';
-import type { GridSorterDirection } from './vaadin-grid-sorter.js';
+import type { GridColumn, GridColumnMixin } from './vaadin-grid-column.js';
+import type { GridSortColumnEventMap, GridSortColumnMixinClass } from './vaadin-grid-sort-column-mixin.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 {}
+export * from './vaadin-grid-sort-column-mixin.js';
 
 /**
  * `<vaadin-grid-sort-column>` is a helper element for the `<vaadin-grid>`
@@ -30,22 +21,13 @@ export interface GridSortColumnEventMap extends HTMLElementEventMap, GridSortCol
  *  <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;
+declare class GridSortColumn<TItem = GridDefaultItem> extends HTMLElement {}
 
+interface GridSortColumn<TItem = GridDefaultItem>
+  extends GridSortColumnMixinClass,
+    GridColumnMixin<TItem, GridColumn<TItem>>,
+    GridColumn<TItem> {
   addEventListener<K extends keyof GridSortColumnEventMap>(
     type: K,
     listener: (this: GridSortColumn<TItem>, ev: GridSortColumnEventMap[K]) => void,

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

@@ -6,6 +6,7 @@
 import './vaadin-grid-sorter.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
+import { GridSortColumnMixin } from './vaadin-grid-sort-column-mixin.js';
 
 /**
  * `<vaadin-grid-sort-column>` is a helper element for the `<vaadin-grid>`
@@ -24,97 +25,12 @@ import { GridColumn } from './vaadin-grid-column.js';
  *
  * @customElement
  * @extends GridColumn
+ * @mixes GridSortColumnMixin
  */
-class GridSortColumn extends GridColumn {
+class GridSortColumn extends GridSortColumnMixin(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);
-    }
-  }
 }
 
 defineCustomElement(GridSortColumn);

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

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export type GridSorterDirection = 'asc' | 'desc' | null;
+
+/**
+ * Fired when the `path` or `direction` property changes.
+ */
+export type GridSorterChangedEvent = CustomEvent<{ shiftClick: boolean; fromSorterClick: boolean }>;
+
+/**
+ * Fired when the `direction` property changes.
+ */
+export type GridSorterDirectionChangedEvent = CustomEvent<{ value: GridSorterDirection }>;
+
+export interface GridSorterCustomEventMap {
+  'sorter-changed': GridSorterChangedEvent;
+
+  'direction-changed': GridSorterDirectionChangedEvent;
+}
+
+export interface GridSorterEventMap extends HTMLElementEventMap, GridSorterCustomEventMap {}
+
+export declare function GridSorterMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<GridSorterMixinClass> & T;
+
+declare class GridSorterMixinClass {
+  /**
+   * 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;
+}