@vaadin/grid 24.0.0-alpha1 → 24.0.0-alpha11

package/src/vaadin-grid-data-provider-mixin.js

@@ -1,10 +1,11 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { getBodyRowCells, iterateChildren, updateCellsPart, updateState } from './vaadin-grid-helpers.js';
 
 /**
  * @private
@@ -193,6 +194,7 @@ export const DataProviderMixin = (superClass) =>
         itemHasChildrenPath: {
           type: String,
           value: 'children',
+          observer: '__itemHasChildrenPathChanged',
         },
 
         /**
@@ -236,6 +238,15 @@ export const DataProviderMixin = (superClass) =>
       this._effectiveSize = this._cache.effectiveSize;
     }
 
+    /** @private */
+    __itemHasChildrenPathChanged(value, oldValue) {
+      if (!oldValue && value === 'children') {
+        // Avoid an unnecessary content update on init.
+        return;
+      }
+      this.requestContentUpdate();
+    }
+
     /**
      * @param {number} index
      * @param {HTMLElement} el
@@ -250,17 +261,32 @@ export const DataProviderMixin = (superClass) =>
       const { cache, scaledIndex } = this._cache.getCacheAndIndex(index);
       const item = cache.items[scaledIndex];
       if (item) {
-        el.toggleAttribute('loading', false);
+        this.__updateLoading(el, false);
         this._updateItem(el, item);
         if (this._isExpanded(item)) {
           cache.ensureSubCacheForScaledIndex(scaledIndex);
         }
       } else {
-        el.toggleAttribute('loading', true);
+        this.__updateLoading(el, true);
         this._loadPage(this._getPageForIndex(scaledIndex), cache);
       }
     }
 
+    /**
+     * @param {!HTMLElement} row
+     * @param {boolean} loading
+     * @private
+     */
+    __updateLoading(row, loading) {
+      const cells = getBodyRowCells(row);
+
+      // Row state attribute
+      updateState(row, 'loading', loading);
+
+      // Cells part attribute
+      updateCellsPart(cells, 'loading-row-cell', loading);
+    }
+
     /**
      * Returns a value that identifies the item. Uses `itemIdPath` if available.
      * Can be customized by overriding.
@@ -379,14 +405,14 @@ export const DataProviderMixin = (superClass) =>
             this._cache.updateSize();
             this._effectiveSize = this._cache.effectiveSize;
 
-            Array.from(this.$.items.children)
-              .filter((row) => !row.hidden)
-              .forEach((row) => {
+            iterateChildren(this.$.items, (row) => {
+              if (!row.hidden) {
                 const cachedItem = this._cache.getItemForIndex(row.index);
                 if (cachedItem) {
                   this._getItem(row.index, row);
                 }
-              });
+              }
+            });
 
             this.__scrollToPendingIndex();
           });
@@ -500,6 +526,7 @@ export const DataProviderMixin = (superClass) =>
       }
     }
 
+    /** @private */
     __scrollToPendingIndex() {
       if (this.__pendingScrollToIndex && this.$.items.children.length) {
         const index = this.__pendingScrollToIndex;

package/src/vaadin-grid-drag-and-drop-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * 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';

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -1,8 +1,10 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { iterateChildren, updateRowStates } from './vaadin-grid-helpers.js';
+
 const DropMode = {
   BETWEEN: 'between',
   ON_TOP: 'on-top',
@@ -126,7 +128,7 @@ export const DragAndDropMixin = (superClass) =>
           // Safari doesn't position drag images from transformed
           // elements properly so we need to switch to use top temporarily
           const transform = row.style.transform;
-          row.style.top = /translateY\((.*)\)/.exec(transform)[1];
+          row.style.top = /translateY\((.*)\)/u.exec(transform)[1];
           row.style.transform = 'none';
           requestAnimationFrame(() => {
             row.style.top = '';
@@ -154,13 +156,14 @@ export const DragAndDropMixin = (superClass) =>
         // Set the default transfer data
         e.dataTransfer.setData('text', this.__formatDefaultTransferData(rows));
 
-        row.setAttribute('dragstart', rows.length > 1 ? rows.length : '');
+        updateRowStates(row, { dragstart: rows.length > 1 ? `${rows.length}` : '' });
         this.style.setProperty('--_grid-drag-start-x', `${e.clientX - rowRect.left + 20}px`);
         this.style.setProperty('--_grid-drag-start-y', `${e.clientY - rowRect.top + 10}px`);
 
         requestAnimationFrame(() => {
-          row.removeAttribute('dragstart');
-          this.updateStyles({ '--_grid-drag-start-x': '', '--_grid-drag-start-y': '' });
+          updateRowStates(row, { dragstart: null });
+          this.style.setProperty('--_grid-drag-start-x', '');
+          this.style.setProperty('--_grid-drag-start-y', '');
         });
 
         const event = new CustomEvent('grid-dragstart', {
@@ -252,7 +255,7 @@ export const DragAndDropMixin = (superClass) =>
         } else if (row) {
           this._dragOverItem = row._item;
           if (row.getAttribute('dragover') !== this._dropLocation) {
-            row.setAttribute('dragover', this._dropLocation);
+            updateRowStates(row, { dragover: this._dropLocation }, true);
           }
         } else {
           this._clearDragStyles();
@@ -306,7 +309,9 @@ export const DragAndDropMixin = (superClass) =>
     /** @protected */
     _clearDragStyles() {
       this.removeAttribute('dragover');
-      Array.from(this.$.items.children).forEach((row) => row.removeAttribute('dragover'));
+      iterateChildren(this.$.items, (row) => {
+        updateRowStates(row, { dragover: null }, true);
+      });
     }
 
     /** @private */
@@ -368,11 +373,11 @@ export const DragAndDropMixin = (superClass) =>
      * the conditions change.
      */
     filterDragAndDrop() {
-      Array.from(this.$.items.children)
-        .filter((row) => !row.hidden)
-        .forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
+        if (!row.hidden) {
           this._filterDragAndDrop(row, this.__getRowModel(row));
-        });
+        }
+      });
     }
 
     /**
@@ -385,18 +390,18 @@ export const DragAndDropMixin = (superClass) =>
       const dragDisabled = !this.rowsDraggable || loading || (this.dragFilter && !this.dragFilter(model));
       const dropDisabled = !this.dropMode || loading || (this.dropFilter && !this.dropFilter(model));
 
-      const draggableElements = Array.from(row.children).map((cell) => cell._content);
-
-      draggableElements.forEach((e) => {
+      iterateChildren(row, (cell) => {
         if (dragDisabled) {
-          e.removeAttribute('draggable');
+          cell._content.removeAttribute('draggable');
         } else {
-          e.setAttribute('draggable', true);
+          cell._content.setAttribute('draggable', true);
         }
       });
 
-      row.toggleAttribute('drag-disabled', !!dragDisabled);
-      row.toggleAttribute('drop-disabled', !!dropDisabled);
+      updateRowStates(row, {
+        'drag-disabled': !!dragDisabled,
+        'drop-disabled': !!dropDisabled,
+      });
     }
 
     /**

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -1,12 +1,13 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { updateCellState } from './vaadin-grid-helpers.js';
 
 function arrayEquals(arr1, arr2) {
   if (!arr1 || !arr2 || arr1.length !== arr2.length) {
@@ -160,8 +161,8 @@ export const DynamicColumnsMixin = (superClass) =>
           return a._column._order - b._column._order;
         })
         .forEach((cell, cellIndex, children) => {
-          cell.toggleAttribute('first-column', cellIndex === 0);
-          cell.toggleAttribute('last-column', cellIndex === children.length - 1);
+          updateCellState(cell, 'first-column', cellIndex === 0);
+          updateCellState(cell, 'last-column', cellIndex === children.length - 1);
         });
     }
 
@@ -171,6 +172,6 @@ export const DynamicColumnsMixin = (superClass) =>
      * @protected
      */
     _isColumnElement(node) {
-      return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/.test(node.localName);
+      return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/u.test(node.localName);
     }
   };

package/src/vaadin-grid-event-context-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * 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';

package/src/vaadin-grid-event-context-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-filter.js';
@@ -60,7 +60,6 @@ class GridFilterColumn extends GridColumn {
     if (!filter) {
       filter = document.createElement('vaadin-grid-filter');
       textField = document.createElement('vaadin-text-field');
-      textField.setAttribute('slot', 'filter');
       textField.setAttribute('theme', 'small');
       textField.setAttribute('style', 'max-width: 100%;');
       textField.setAttribute('focus-target', '');

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 
 /**
  * Fired when the `value` property changes.
@@ -40,7 +41,7 @@ export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCusto
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class GridFilter extends HTMLElement {
+declare class GridFilter extends ControllerMixin(HTMLElement) {
   /**
    * JS Path of the property in the item used for filtering the data.
    */

package/src/vaadin-grid-filter.js

@@ -1,12 +1,14 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -35,7 +37,7 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
  *
  * @extends HTMLElement
  */
-class GridFilter extends class extends PolymerElement {} {
+class GridFilter extends ControllerMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
@@ -44,14 +46,12 @@ class GridFilter extends class extends PolymerElement {} {
           max-width: 100%;
         }
 
-        #filter {
+        ::slotted(*) {
           width: 100%;
           box-sizing: border-box;
         }
       </style>
-      <slot name="filter">
-        <vaadin-text-field id="filter" value="{{value}}"></vaadin-text-field>
-      </slot>
+      <slot></slot>
     `;
   }
 
@@ -75,39 +75,42 @@ class GridFilter extends class extends PolymerElement {} {
       },
 
       /** @private */
-      _connected: Boolean,
+      _textField: {
+        type: Object,
+      },
     };
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._connected = true;
-  }
-
   static get observers() {
-    return ['_filterChanged(path, value, _connected)'];
+    return ['_filterChanged(path, value, _textField)'];
   }
 
   /** @protected */
   ready() {
     super.ready();
 
-    const child = this.firstElementChild;
-    if (child && child.getAttribute('slot') !== 'filter') {
-      console.warn('Make sure you have assigned slot="filter" to the child elements of <vaadin-grid-filter>');
-      child.setAttribute('slot', 'filter');
-    }
+    this._filterController = new SlotController(this, '', 'vaadin-text-field', {
+      initializer: (field) => {
+        field.addEventListener('value-changed', (e) => {
+          this.value = e.detail.value;
+        });
+
+        this._textField = field;
+      },
+    });
+    this.addController(this._filterController);
   }
 
   /** @private */
-  _filterChanged(path, value, connected) {
-    if (path === undefined || value === undefined || !connected) {
+  _filterChanged(path, value, textField) {
+    if (path === undefined || value === undefined || !textField) {
       return;
     }
     if (this._previousValue === undefined && value === '') {
       return;
     }
+
+    textField.value = value;
     this._previousValue = value;
 
     this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
@@ -116,7 +119,9 @@ class GridFilter extends class extends PolymerElement {} {
   }
 
   focus() {
-    this.$.filter.focus();
+    if (this._textField) {
+      this._textField.focus();
+    }
   }
 }
 

package/src/vaadin-grid-helpers.js

@@ -1,8 +1,25 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+
+/**
+ * @param {HTMLTableRowElement} row the table row
+ * @return {HTMLTableCellElement[]} array of cells
+ */
+export function getBodyRowCells(row) {
+  return Array.from(row.querySelectorAll('[part~="cell"]:not([part~="details-cell"])'));
+}
+
+/**
+ * @param {HTMLElement} container the DOM element with children
+ * @param {Function} callback function to call on each child
+ */
+export function iterateChildren(container, callback) {
+  [...container.children].forEach(callback);
+}
 
 /**
  * @param {Array<Object>} columns array of columns to be modified
@@ -21,3 +38,89 @@ export function updateColumnOrders(columns, scope, baseOrder) {
     c += 1;
   });
 }
+
+/**
+ * @param {!HTMLElement} element
+ * @param {string} attribute
+ * @param {boolean | string | null | undefined} value
+ */
+export function updateState(element, attribute, value) {
+  switch (typeof value) {
+    case 'boolean':
+      element.toggleAttribute(attribute, value);
+      break;
+    case 'string':
+      element.setAttribute(attribute, value);
+      break;
+    default:
+      // Value set to null / undefined
+      element.removeAttribute(attribute);
+      break;
+  }
+}
+
+/**
+ * @param {!HTMLElement} element
+ * @param {boolean | string | null | undefined} value
+ * @param {string} part
+ */
+export function updatePart(element, value, part) {
+  if (value || value === '') {
+    addValueToAttribute(element, 'part', part);
+  } else {
+    removeValueFromAttribute(element, 'part', part);
+  }
+}
+
+/**
+ * @param {HTMLTableCellElement[]} cells
+ * @param {string} part
+ * @param {boolean | string | null | undefined} value
+ */
+export function updateCellsPart(cells, part, value) {
+  cells.forEach((cell) => {
+    updatePart(cell, value, part);
+  });
+}
+
+/**
+ * @param {!HTMLElement} row
+ * @param {Object} states
+ * @param {boolean} appendValue
+ */
+export function updateRowStates(row, states, appendValue) {
+  const cells = getBodyRowCells(row);
+
+  Object.entries(states).forEach(([state, value]) => {
+    // Row state attribute
+    updateState(row, state, value);
+
+    const rowPart = appendValue ? `${state}-${value}-row` : `${state}-row`;
+
+    // Row part attribute
+    updatePart(row, value, rowPart);
+
+    // Cells part attribute
+    updateCellsPart(cells, `${rowPart}-cell`, value);
+  });
+}
+
+/**
+ * @param {!HTMLElement} cell
+ * @param {string} attribute
+ * @param {boolean | string | null | undefined} value
+ * @param {string} part
+ * @param {?string} oldPart
+ */
+export function updateCellState(cell, attribute, value, part, oldPart) {
+  // Toggle state attribute on the cell
+  updateState(cell, attribute, value);
+
+  // Remove old part from the attribute
+  if (oldPart) {
+    updatePart(cell, false, oldPart);
+  }
+
+  // Add new part to the cell attribute
+  updatePart(cell, value, part || `${attribute}-cell`);
+}