@vaadin/grid 24.2.0-dev.f254716fe → 24.3.0-alpha2

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

@@ -160,7 +160,7 @@ export const ScrollMixin = (superClass) =>
      * @protected
      */
     _scrollToFlatIndex(index) {
-      index = Math.min(this._effectiveSize - 1, Math.max(0, index));
+      index = Math.min(this._flatSize - 1, Math.max(0, index));
       this.__virtualizer.scrollToIndex(index);
       this.__scrollIntoViewport(index);
     }

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-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;
+}

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

@@ -0,0 +1,198 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const template = document.createElement('template');
+
+template.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(template.content);
+
+registerStyles(
+  'vaadin-grid-sorter',
+  css`
+    :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';
+    }
+  `,
+  { moduleId: 'vaadin-grid-sorter-styles' },
+);
+
+/**
+ * A mixin providing common sorter functionality.
+ *
+ * @polymerMixin
+ */
+export const GridSorterMixin = (superClass) =>
+  class GridSorterMixinClass 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,
+          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;
+
+      if (!this.parentNode && this._grid) {
+        this._grid.__removeSorters([this]);
+      }
+    }
+
+    /** @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', {
+          detail: { shiftClick: Boolean(this._shiftClick), fromSorterClick: Boolean(this._fromSorterClick) },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+      // Cleaning up as a programatically sorting can be done after some user interaction
+      this._fromSorterClick = false;
+      this._shiftClick = false;
+    }
+
+    /** @private */
+    _getDisplayOrder(order) {
+      return order === null ? '' : order + 1;
+    }
+
+    /** @private */
+    _onClick(e) {
+      if (e.defaultPrevented) {
+        // Something else has already handled the click event, do nothing.
+        return;
+      }
+
+      const activeElement = this.getRootNode().activeElement;
+      if (this !== activeElement && this.contains(activeElement)) {
+        // Some focusable content inside the sorter was clicked, do nothing.
+        return;
+      }
+
+      e.preventDefault();
+      this._shiftClick = e.shiftKey;
+      this._fromSorterClick = true;
+      if (this.direction === 'asc') {
+        this.direction = 'desc';
+      } else if (this.direction === 'desc') {
+        this.direction = null;
+      } else {
+        this.direction = 'asc';
+      }
+    }
+  };

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

@@ -5,26 +5,9 @@
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { type GridSorterEventMap, GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
 
-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 * from './vaadin-grid-sorter-mixin.js';
 
 /**
  * `<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -65,19 +48,7 @@ export interface GridSorterEventMap extends HTMLElementEventMap, GridSorterCusto
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  * @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.
  */
-declare class GridSorter extends ThemableMixin(DirMixin(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;
-
+declare class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(HTMLElement))) {
   addEventListener<K extends keyof GridSorterEventMap>(
     type: K,
     listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,