@vaadin/grid 24.1.5 → 24.2.0-alpha10

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

@@ -5,6 +5,7 @@
  */
 import '@vaadin/checkbox/src/vaadin-checkbox.js';
 import { GridColumn } from './vaadin-grid-column.js';
+import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
 
 /**
  * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
@@ -28,74 +29,27 @@ import { GridColumn } from './vaadin-grid-column.js';
  *
  * __The default content can also be overridden__
  *
+ * @mixes GridSelectionColumnBaseMixin
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
-class GridSelectionColumn extends GridColumn {
+class GridSelectionColumn extends GridSelectionColumnBaseMixin(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)',
-    ];
+    return ['__onSelectAllChanged(selectAll)'];
   }
 
   constructor() {
@@ -127,47 +81,6 @@ class GridSelectionColumn extends GridColumn {
     }
   }
 
-  /**
-   * 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) {
@@ -203,45 +116,49 @@ class GridSelectionColumn extends GridColumn {
   }
 
   /**
-   * Enables or disables the Select All mode once the Select All checkbox is switched.
-   * The listener handles only user-fired events.
+   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+   * selecting all items.
    *
-   * @private
+   * @protected
+   * @override
    */
-  __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;
+  _selectAll() {
+    this.selectAll = true;
   }
 
   /**
-   * Selects or deselects the row once the Select Row checkbox is switched.
-   * The listener handles only user-fired events.
+   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+   * deselecting all items.
    *
-   * @private
+   * @protected
+   * @override
    */
-  __onSelectRowCheckedChanged(e) {
-    // Skip if the state is changed by the renderer.
-    if (e.target.checked === e.target.__rendererChecked) {
-      return;
-    }
+  _deselectAll() {
+    this.selectAll = false;
+  }
 
-    if (e.target.checked) {
-      this._grid.selectItem(e.target.__item);
-    } else {
-      this._grid.deselectItem(e.target.__item);
-    }
+  /**
+   * 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);
   }
 
   /**
-   * IOS needs indeterminate + checked at the same time
-   * @private
+   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+   * deselecting an item.
+   *
+   * @param {Object} item the item to deselect
+   * @protected
+   * @override
    */
-  __isChecked(selectAll, indeterminate) {
-    return indeterminate || selectAll;
+  _deselectItem(item) {
+    this._grid.deselectItem(item);
   }
 
   /** @private */
@@ -268,13 +185,13 @@ class GridSelectionColumn extends GridColumn {
       this.__withFilteredItemsArray((items) => {
         if (!this._grid.selectedItems.length) {
           this.selectAll = false;
-          this.__indeterminate = false;
+          this._indeterminate = false;
         } else if (this.__arrayContains(this._grid.selectedItems, items)) {
           this.selectAll = true;
-          this.__indeterminate = false;
+          this._indeterminate = false;
         } else {
           this.selectAll = false;
-          this.__indeterminate = true;
+          this._indeterminate = true;
         }
       });
     }
@@ -283,7 +200,7 @@ class GridSelectionColumn extends GridColumn {
 
   /** @private */
   __onDataProviderChanged() {
-    this.__selectAllHidden = !Array.isArray(this._grid.items);
+    this._selectAllHidden = !Array.isArray(this._grid.items);
   }
 
   /**

package/src/vaadin-grid-styles.js

@@ -40,10 +40,7 @@ registerStyles(
       width: auto;
       height: auto;
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
     }
 
     :host([all-rows-visible]) {
@@ -154,10 +151,7 @@ registerStyles(
       align-items: inherit;
       outline: none;
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
     }
 
     [part~='details-cell'] {

package/src/vaadin-grid-tree-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-tree-toggle.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -101,7 +102,7 @@ class GridTreeColumn extends GridColumn {
 
   /** @private */
   __getToggleContent(path, item) {
-    return path && this.get(path, item);
+    return path && get(path, item);
   }
 }
 

package/src/vaadin-grid.js

@@ -470,12 +470,12 @@ class Grid extends ElementMixin(
 
   /** @private */
   __getFirstVisibleItem() {
-    return this._getVisibleRows().find((row) => this._isInViewport(row));
+    return this._getRenderedRows().find((row) => this._isInViewport(row));
   }
 
   /** @private */
   __getLastVisibleItem() {
-    return this._getVisibleRows()
+    return this._getRenderedRows()
       .reverse()
       .find((row) => this._isInViewport(row));
   }
@@ -492,7 +492,7 @@ class Grid extends ElementMixin(
   }
 
   /** @private */
-  _getVisibleRows() {
+  _getRenderedRows() {
     return Array.from(this.$.items.children)
       .filter((item) => !item.hidden)
       .sort((a, b) => a.index - b.index);
@@ -554,7 +554,7 @@ class Grid extends ElementMixin(
 
   /** @private */
   __focusBodyCell({ item, column }) {
-    const row = this._getVisibleRows().find((row) => row._item === item);
+    const row = this._getRenderedRows().find((row) => row._item === item);
     const cell = row && [...row.children].find((cell) => cell._column === column);
     if (cell) {
       cell.focus();
@@ -666,7 +666,7 @@ class Grid extends ElementMixin(
     // Cache the viewport rows to avoid unnecessary reflows while measuring the column widths
     const fvi = this._firstVisibleIndex;
     const lvi = this._lastVisibleIndex;
-    this.__viewportRowsCache = this._getVisibleRows().filter((row) => row.index >= fvi && row.index <= lvi);
+    this.__viewportRowsCache = this._getRenderedRows().filter((row) => row.index >= fvi && row.index <= lvi);
 
     // Pre-cache the intrinsic width of each column
     this.__calculateAndCacheIntrinsicWidths(cols);

package/theme/lumo/vaadin-grid-styles.js

@@ -77,10 +77,7 @@ registerStyles(
     :host([navigating]) [part~='focused-cell']:focus::before {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       pointer-events: none;
       box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
     }
@@ -95,10 +92,7 @@ registerStyles(
       content: '';
       position: absolute;
       z-index: 100;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       pointer-events: none;
       box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
     }
@@ -114,10 +108,7 @@ registerStyles(
     [part~='row'][dragover] [part~='cell']::after {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       height: calc(var(--_lumo-grid-border-width) + 2px);
       pointer-events: none;
       background: var(--lumo-primary-color-50pct);

package/theme/material/vaadin-grid-styles.js

@@ -76,10 +76,7 @@ registerStyles(
       content: '';
       pointer-events: none;
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       background-color: var(--material-primary-color);
       opacity: 0;
       transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 0.1);
@@ -143,10 +140,7 @@ registerStyles(
     :host([navigating]) [part~='row']:focus::before {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       pointer-events: none;
       transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
       z-index: 3;
@@ -157,10 +151,7 @@ registerStyles(
       content: '';
       position: absolute;
       z-index: 100;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       pointer-events: none;
       box-shadow: inset 0 0 0 2px var(--material-primary-color);
     }
@@ -176,10 +167,7 @@ registerStyles(
     [part~='row'][dragover] [part~='cell']::after {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       height: 3px;
       pointer-events: none;
       background: var(--material-primary-color);