@vaadin/grid 24.2.0-dev.f254716fe → 24.2.0

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

@@ -35,6 +35,12 @@ export declare class GridSelectionColumnBaseMixinClass<TItem> {
    */
   autoSelect: boolean;
 
+  /**
+   * When true, rows can be selected by dragging over the selection column.
+   * @attr {boolean} drag-select
+   */
+  dragSelect: boolean;
+
   /**
    * Override to handle the user selecting all items.
    */

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { addListener } from '@vaadin/component-base/src/gestures.js';
 
 /**
  * A mixin that provides basic functionality for the
@@ -60,6 +61,16 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
           value: false,
         },
 
+        /**
+         * When true, rows can be selected by dragging over the selection column.
+         * @attr {boolean} drag-select
+         * @type {boolean}
+         */
+        dragSelect: {
+          type: Boolean,
+          value: false,
+        },
+
         /** @protected */
         _indeterminate: Boolean,
 
@@ -110,6 +121,9 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         root.appendChild(checkbox);
         // Add listener after appending, so we can skip the initial change event
         checkbox.addEventListener('checked-changed', this.__onSelectRowCheckedChanged.bind(this));
+        addListener(root, 'track', this.__onCellTrack.bind(this));
+        root.addEventListener('mousedown', this.__onCellMouseDown.bind(this));
+        root.addEventListener('click', this.__onCellClick.bind(this));
       }
 
       checkbox.__item = item;
@@ -155,6 +169,143 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __onCellTrack(event) {
+      if (!this.dragSelect) {
+        return;
+      }
+      this.__dragCurrentY = event.detail.y;
+      this.__dragDy = event.detail.dy;
+      if (event.detail.state === 'start') {
+        const renderedRows = this._grid._getRenderedRows();
+        // Get the row where the drag started
+        const dragStartRow = renderedRows.find((row) => row.contains(event.currentTarget.assignedSlot));
+        // Whether to select or deselect the items on drag
+        this.__dragSelect = !this._grid._isSelected(dragStartRow._item);
+        // Store the index of the row where the drag started
+        this.__dragStartIndex = dragStartRow.index;
+        // Store the item of the row where the drag started
+        this.__dragStartItem = dragStartRow._item;
+        // Start the auto scroller
+        this.__dragAutoScroller();
+      } else if (event.detail.state === 'end') {
+        // if drag start and end stays within the same item, then toggle its state
+        if (this.__dragStartItem) {
+          if (this.__dragSelect) {
+            this._selectItem(this.__dragStartItem);
+          } else {
+            this._deselectItem(this.__dragStartItem);
+          }
+        }
+        // clear drag state after timeout, which allows preventing the
+        // subsequent click event if drag started and ended on the same item
+        setTimeout(() => {
+          this.__dragStartIndex = undefined;
+        });
+      }
+    }
+
+    /** @private */
+    __onCellMouseDown(e) {
+      if (this.dragSelect) {
+        // Prevent text selection when starting to drag
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    __onCellClick(e) {
+      if (this.__dragStartIndex !== undefined) {
+        // Stop the click event if drag was enabled. This click event should
+        // only occur if drag started and stopped on the same item. In that case
+        // the selection state has already been toggled on drag end, and we
+        // don't  want to toggle it again from clicking the checkbox or changing
+        // the active item.
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    __dragAutoScroller() {
+      if (this.__dragStartIndex === undefined) {
+        return;
+      }
+      // Get the row being hovered over
+      const renderedRows = this._grid._getRenderedRows();
+      const hoveredRow = renderedRows.find((row) => {
+        const rowRect = row.getBoundingClientRect();
+        return this.__dragCurrentY >= rowRect.top && this.__dragCurrentY <= rowRect.bottom;
+      });
+
+      // Get the index of the row being hovered over or the first/last
+      // visible row if hovering outside the grid
+      let hoveredIndex = hoveredRow ? hoveredRow.index : undefined;
+      const scrollableArea = this.__getScrollableArea();
+      if (this.__dragCurrentY < scrollableArea.top) {
+        hoveredIndex = this._grid._firstVisibleIndex;
+      } else if (this.__dragCurrentY > scrollableArea.bottom) {
+        hoveredIndex = this._grid._lastVisibleIndex;
+      }
+
+      if (hoveredIndex !== undefined) {
+        // Select all items between the start and the current row
+        renderedRows.forEach((row) => {
+          if (
+            (hoveredIndex > this.__dragStartIndex && row.index >= this.__dragStartIndex && row.index <= hoveredIndex) ||
+            (hoveredIndex < this.__dragStartIndex && row.index <= this.__dragStartIndex && row.index >= hoveredIndex)
+          ) {
+            if (this.__dragSelect) {
+              this._selectItem(row._item);
+            } else {
+              this._deselectItem(row._item);
+            }
+            this.__dragStartItem = undefined;
+          }
+        });
+      }
+
+      // Start scrolling in the top/bottom 15% of the scrollable area
+      const scrollTriggerArea = scrollableArea.height * 0.15;
+      // Maximum number of pixels to scroll per iteration
+      const maxScrollAmount = 10;
+
+      if (this.__dragDy < 0 && this.__dragCurrentY < scrollableArea.top + scrollTriggerArea) {
+        const dy = scrollableArea.top + scrollTriggerArea - this.__dragCurrentY;
+        const percentage = Math.min(1, dy / scrollTriggerArea);
+        this._grid.$.table.scrollTop -= percentage * maxScrollAmount;
+      }
+      if (this.__dragDy > 0 && this.__dragCurrentY > scrollableArea.bottom - scrollTriggerArea) {
+        const dy = this.__dragCurrentY - (scrollableArea.bottom - scrollTriggerArea);
+        const percentage = Math.min(1, dy / scrollTriggerArea);
+        this._grid.$.table.scrollTop += percentage * maxScrollAmount;
+      }
+
+      // Schedule the next auto scroll
+      setTimeout(() => this.__dragAutoScroller(), 10);
+    }
+
+    /**
+     * Gets the scrollable area of the grid as a bounding client rect. The
+     * scrollable area is the bounding rect of the grid minus the header and
+     * footer.
+     *
+     * @private
+     */
+    __getScrollableArea() {
+      const gridRect = this._grid.$.table.getBoundingClientRect();
+      const headerRect = this._grid.$.header.getBoundingClientRect();
+      const footerRect = this._grid.$.footer.getBoundingClientRect();
+
+      return {
+        top: gridRect.top + headerRect.height,
+        bottom: gridRect.bottom - footerRect.height,
+        left: gridRect.left,
+        right: gridRect.right,
+        height: gridRect.height - headerRect.height - footerRect.height,
+        width: gridRect.width,
+      };
+    }
+
     /**
      * Override to handle the user selecting all items.
      * @protected

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 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';
 
@@ -29,6 +30,8 @@ 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.
  */
@@ -220,6 +223,6 @@ class GridSelectionColumn extends GridSelectionColumnBaseMixin(GridColumn) {
   }
 }
 
-customElements.define(GridSelectionColumn.is, GridSelectionColumn);
+defineCustomElement(GridSelectionColumn);
 
 export { GridSelectionColumn };

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-sorter.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -20,6 +21,9 @@ import { GridColumn } from './vaadin-grid-column.js';
  * ```
  *
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
+ *
+ * @customElement
+ * @extends GridColumn
  */
 class GridSortColumn extends GridColumn {
   static get is() {
@@ -113,6 +117,6 @@ class GridSortColumn extends GridColumn {
   }
 }
 
-customElements.define(GridSortColumn.is, GridSortColumn);
+defineCustomElement(GridSortColumn);
 
 export { GridSortColumn };

package/src/vaadin-grid-sorter.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -61,6 +62,7 @@ document.head.appendChild(template.content);
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  * @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  */
 class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
@@ -245,6 +247,6 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(GridSorter.is, GridSorter);
+defineCustomElement(GridSorter);
 
 export { GridSorter };

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

@@ -4,6 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-tree-toggle.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -18,6 +20,8 @@ import { GridColumn } from './vaadin-grid-column.js';
  *  <vaadin-grid-column>
  *    ...
  * ```
+ * @customElement
+ * @extends GridColumn
  */
 class GridTreeColumn extends GridColumn {
   static get is() {
@@ -101,10 +105,10 @@ class GridTreeColumn extends GridColumn {
 
   /** @private */
   __getToggleContent(path, item) {
-    return path && this.get(path, item);
+    return path && get(path, item);
   }
 }
 
-customElements.define(GridTreeColumn.is, GridTreeColumn);
+defineCustomElement(GridTreeColumn);
 
 export { GridTreeColumn };

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { isFocusable } from './vaadin-grid-active-item-mixin.js';
@@ -71,6 +72,7 @@ document.head.appendChild(template.content);
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
  */
@@ -207,6 +209,6 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(GridTreeToggle.is, GridTreeToggle);
+defineCustomElement(GridTreeToggle);
 
 export { GridTreeToggle };

package/src/vaadin-grid.d.ts

@@ -4,165 +4,16 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
-import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
-import type { GridColumn } from './vaadin-grid-column.js';
-import { GridBodyRenderer, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
-import type { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
-import type { DataProviderMixinClass } from './vaadin-grid-data-provider-mixin.js';
-import {
-  GridDataProvider,
-  GridDataProviderCallback,
-  GridDataProviderParams,
-  GridFilterDefinition,
-  GridSorterDefinition,
-  GridSorterDirection,
-} from './vaadin-grid-data-provider-mixin.js';
-import type { DragAndDropMixinClass } from './vaadin-grid-drag-and-drop-mixin.js';
-import { GridDragAndDropFilter, GridDropLocation, GridDropMode } from './vaadin-grid-drag-and-drop-mixin.js';
-import type { EventContextMixinClass } from './vaadin-grid-event-context-mixin.js';
-import { GridEventContext } from './vaadin-grid-event-context-mixin.js';
-import type { RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
-import { GridRowDetailsRenderer } from './vaadin-grid-row-details-mixin.js';
-import type { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
-import type { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
-import type { SortMixinClass } from './vaadin-grid-sort-mixin.js';
-import type {
-  GridCellClassNameGenerator,
-  GridCellPartNameGenerator,
-  StylingMixinClass,
-} from './vaadin-grid-styling-mixin.js';
+import type { GridEventMap, GridMixinClass } from './vaadin-grid-mixin.js';
 
-export {
-  GridBodyRenderer,
-  GridCellClassNameGenerator,
-  GridCellPartNameGenerator,
-  GridDataProvider,
-  GridDataProviderCallback,
-  GridDataProviderParams,
-  GridDragAndDropFilter,
-  GridDropLocation,
-  GridDropMode,
-  GridEventContext,
-  GridFilterDefinition,
-  GridHeaderFooterRenderer,
-  GridRowDetailsRenderer,
-  GridSorterDefinition,
-  GridSorterDirection,
-};
+export * from './vaadin-grid-mixin.js';
 
 export type GridDefaultItem = any;
 
-export interface GridItemModel<TItem> {
-  index: number;
-  item: TItem;
-  selected?: boolean;
-  expanded?: boolean;
-  level?: number;
-  detailsOpened?: boolean;
-}
-
-/**
- * Fired when the `activeItem` property changes.
- */
-export type GridActiveItemChangedEvent<TItem> = CustomEvent<{ value: TItem | null | undefined }>;
-
-/**
- * Fired when the cell is activated with click or keyboard.
- */
-export type GridCellActivateEvent<TItem> = CustomEvent<{ model: GridItemModel<TItem> }>;
-
-/**
- * Fired when a cell is focused with click or keyboard navigation.
- */
-export type GridCellFocusEvent<TItem> = CustomEvent<{ context: GridEventContext<TItem> }>;
-
-/**
- * Fired when the columns in the grid are reordered.
- */
-export type GridColumnReorderEvent<TItem> = CustomEvent<{ columns: Array<GridColumn<TItem>> }>;
-
-/**
- * Fired when the grid column resize is finished.
- */
-export type GridColumnResizeEvent<TItem> = CustomEvent<{ resizedColumn: GridColumn<TItem> }>;
-
-/**
- * Fired when the `dataProvider` property changes.
- */
-export type GridDataProviderChangedEvent<TItem> = CustomEvent<{ value: GridDataProvider<TItem> }>;
-
-/**
- * Fired when the `expandedItems` property changes.
- */
-export type GridExpandedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
-
-/**
- * Fired when starting to drag grid rows.
- */
-export type GridDragStartEvent<TItem> = CustomEvent<{
-  draggedItems: TItem[];
-  setDraggedItemsCount(count: number): void;
-  setDragData(type: string, data: string): void;
-}>;
-
-/**
- * Fired when a drop occurs on top of the grid.
- */
-export type GridDropEvent<TItem> = CustomEvent<{
-  dropTargetItem: TItem;
-  dropLocation: GridDropLocation;
-  dragData: Array<{ type: string; data: string }>;
-}>;
-
-/**
- * Fired when the `loading` property changes.
- */
-export type GridLoadingChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when the `selectedItems` property changes.
- */
-export type GridSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
-
-/**
- * Fired when the `size` property changes.
- */
-export type GridSizeChangedEvent = CustomEvent<{ value: number }>;
-
-export interface GridCustomEventMap<TItem> {
-  'active-item-changed': GridActiveItemChangedEvent<TItem>;
-
-  'cell-activate': GridCellActivateEvent<TItem>;
-
-  'cell-focus': GridCellFocusEvent<TItem>;
-
-  'column-reorder': GridColumnReorderEvent<TItem>;
-
-  'column-resize': GridColumnResizeEvent<TItem>;
-
-  'data-provider-changed': GridDataProviderChangedEvent<TItem>;
-
-  'expanded-items-changed': GridExpandedItemsChangedEvent<TItem>;
-
-  'grid-dragstart': GridDragStartEvent<TItem>;
-
-  'grid-dragend': Event;
-
-  'grid-drop': GridDropEvent<TItem>;
-
-  'loading-changed': GridLoadingChangedEvent;
-
-  'selected-items-changed': GridSelectedItemsChangedEvent<TItem>;
-
-  'size-changed': GridSizeChangedEvent;
-}
-
-export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEventMap<TItem> {}
-
 /**
  * `<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the
  * the grid can be populated by using renderer callback function.
@@ -400,33 +251,6 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * @fires {CustomEvent} size-changed - Fired when the `size` property changes.
  */
 declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
-  /**
-   * If true, the grid's height is defined by its rows.
-   *
-   * Effectively, this disables the grid's virtual scrolling so that all the rows are rendered in the DOM at once.
-   * If the grid has a large number of items, using the feature is discouraged to avoid performance issues.
-   * @attr {boolean} all-rows-visible
-   */
-  allRowsVisible: boolean;
-
-  /**
-   * Updates the `width` of all columns which have `autoWidth` set to `true`.
-   */
-  recalculateColumnWidths(): void;
-
-  /**
-   * Requests an update for the content of cells.
-   *
-   * While performing the update, the following renderers are invoked:
-   * - `Grid.rowDetailsRenderer`
-   * - `GridColumn.renderer`
-   * - `GridColumn.headerRenderer`
-   * - `GridColumn.footerRenderer`
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate(): void;
-
   addEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
@@ -445,17 +269,8 @@ interface Grid<TItem = GridDefaultItem>
     ElementMixinClass,
     ThemableMixinClass,
     ThemePropertyMixinClass,
-    ActiveItemMixinClass<TItem>,
-    ArrayDataProviderMixinClass<TItem>,
-    DataProviderMixinClass<TItem>,
-    RowDetailsMixinClass<TItem>,
-    ScrollMixinClass,
-    SelectionMixinClass<TItem>,
-    SortMixinClass,
-    ColumnReorderingMixinClass,
-    EventContextMixinClass<TItem>,
-    StylingMixinClass<TItem>,
-    DragAndDropMixinClass<TItem> {}
+    ControllerMixinClass,
+    GridMixinClass<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {