@vaadin/grid - npm Package Compare versions

Comparing version 24.4.0-rc1 to 24.5.0-alpha1

package.json

 {
   "name": "@vaadin/grid",
-  "version": "24.4.0-rc1",
+  "version": "24.5.0-alpha1",
   "publishConfig": {
@@ -49,10 +49,10 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-rc1",
-    "@vaadin/checkbox": "24.4.0-rc1",
-    "@vaadin/component-base": "24.4.0-rc1",
-    "@vaadin/lit-renderer": "24.4.0-rc1",
-    "@vaadin/text-field": "24.4.0-rc1",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
-    "@vaadin/vaadin-material-styles": "24.4.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-rc1",
+    "@vaadin/a11y-base": "24.5.0-alpha1",
+    "@vaadin/checkbox": "24.5.0-alpha1",
+    "@vaadin/component-base": "24.5.0-alpha1",
+    "@vaadin/lit-renderer": "24.5.0-alpha1",
+    "@vaadin/text-field": "24.5.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1",
     "lit": "^3.0.0"
@@ -69,3 +69,3 @@ },
   ],
-  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
+  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
 }

README.md

@@ -10,7 +10,7 @@ # @vaadin/grid
 ```html
-<vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>
+<vaadin-grid column-reordering-allowed multi-sort>
   <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
-  <vaadin-grid-sort-column width="9em" path="firstName"></vaadin-grid-sort-column>
-  <vaadin-grid-sort-column width="9em" path="lastName"></vaadin-grid-sort-column>
-  <vaadin-grid-column id="address" width="15em" flex-grow="2" header="Address"></vaadin-grid-column>
+  <vaadin-grid-sort-column width="9rem" path="firstName"></vaadin-grid-sort-column>
+  <vaadin-grid-sort-column width="9rem" path="lastName"></vaadin-grid-sort-column>
+  <vaadin-grid-column id="address" width="15rem" flex-grow="2" header="Address"></vaadin-grid-column>
 </vaadin-grid>
@@ -17,0 +17,0 @@

src/vaadin-grid-active-item-mixin.js

@@ -72,5 +72,27 @@ /**
     /**
-     * We need to listen to click instead of tap because on mobile safari, the
-     * document.activeElement has not been updated (focus has not been shifted)
-     * yet at the point when tap event is being executed.
+     * Checks whether the click event should not activate the cell on which it occurred.
+     *
+     * @protected
+     */
+    _shouldPreventCellActivationOnClick(e) {
+      const { cell } = this._getGridEventLocation(e);
+      return (
+        // Something has handled this click already, e. g., <vaadin-grid-sorter>
+        e.defaultPrevented ||
+        // No clicked cell available
+        !cell ||
+        // Cell is a details cell
+        cell.getAttribute('part').includes('details-cell') ||
+        // Cell is the empty state cell
+        cell === this.$.emptystatecell ||
+        // Cell content is focused
+        cell._content.contains(this.getRootNode().activeElement) ||
+        // Clicked on a focusable element
+        this._isFocusable(e.target) ||
+        // Clicked on a label element
+        e.target instanceof HTMLLabelElement
+      );
+    }
+
+    /**
      * @param {!MouseEvent} e
@@ -80,17 +102,8 @@ * @protected
     _onClick(e) {
-      if (e.defaultPrevented) {
-        // Something has handled this click already, e. g., <vaadin-grid-sorter>
+      if (this._shouldPreventCellActivationOnClick(e)) {
         return;
       }
 
-      const path = e.composedPath();
-      const cell = path[path.indexOf(this.$.table) - 3];
-      if (!cell || cell.getAttribute('part').indexOf('details-cell') > -1) {
-        return;
-      }
-      const cellContent = cell._content;
-
-      const activeElement = this.getRootNode().activeElement;
-      const cellContentHasFocus = cellContent.contains(activeElement);
-      if (!cellContentHasFocus && !this._isFocusable(e.target) && !(e.target instanceof HTMLLabelElement)) {
+      const { cell } = this._getGridEventLocation(e);
+      if (cell) {
         this.dispatchEvent(
@@ -97,0 +110,0 @@ new CustomEvent('cell-activate', {

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

@@ -121,2 +121,7 @@ /**
    * Width of the cells for this column.
+   *
+   * Please note that using the `em` length unit is discouraged as
+   * it might lead to misalignment issues if the header, body, and footer
+   * cells have different font sizes. Instead, use `rem` if you need
+   * a length unit relative to the font size.
    */
@@ -123,0 +128,0 @@ width: string | null | undefined;

src/vaadin-grid-column-mixin.js

@@ -855,2 +855,7 @@ /**
          * Width of the cells for this column.
+         *
+         * Please note that using the `em` length unit is discouraged as
+         * it might lead to misalignment issues if the header, body, and footer
+         * cells have different font sizes. Instead, use `rem` if you need
+         * a length unit relative to the font size.
          */
@@ -857,0 +862,0 @@ width: {

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

@@ -36,6 +36,3 @@ /**
 
-      // Use `composedPath()` stored by vaadin-context-menu gesture
-      // to avoid problem when accessing it after a timeout on iOS
-      const path = event.__composedPath || event.composedPath();
-      const cell = path[path.indexOf(this.$.table) - 3];
+      const { cell } = this._getGridEventLocation(event);
 
@@ -42,0 +39,0 @@ if (!cell) {

src/vaadin-grid-keyboard-navigation-mixin.js

@@ -678,3 +678,3 @@ /**
         this._headerFocusable,
-        this._itemsFocusable,
+        this.__emptyState ? this.$.emptystatecell : this._itemsFocusable,
         this._footerFocusable,
@@ -864,3 +864,3 @@ this.$.focusexit,
           this.__pendingBodyCellFocus = this.loading && context.section === 'body';
-          if (!this.__pendingBodyCellFocus) {
+          if (!this.__pendingBodyCellFocus && cell !== this.$.emptystatecell) {
             // Fire a cell-focus event for the cell
@@ -912,3 +912,3 @@ cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
     _detectInteracting(e) {
-      const isInteracting = e.composedPath().some((el) => el.localName === 'vaadin-grid-cell-content');
+      const isInteracting = e.composedPath().some((el) => el.localName === 'slot' && this.shadowRoot.contains(el));
       this._setInteracting(isInteracting);
@@ -1075,6 +1075,8 @@ this.__updateHorizontalScrollPosition();
      * @returns {GridEventLocation}
-     * @private
+     * @protected
      */
     _getGridEventLocation(e) {
-      const path = e.composedPath();
+      // Use `composedPath()` stored by vaadin-context-menu gesture
+      // to avoid problem when accessing it after a timeout on iOS
+      const path = e.__composedPath || e.composedPath();
       const tableIndex = path.indexOf(this.$.table);
@@ -1081,0 +1083,0 @@ // Assuming ascending path to table is: [...,] th|td, tr, thead|tbody, table [,...]

src/vaadin-grid-mixin.js

@@ -12,2 +12,3 @@ /**
 import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
+import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -160,2 +161,14 @@ import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
         },
+
+        /** @private */
+        __hasEmptyStateContent: {
+          type: Boolean,
+          value: false,
+        },
+
+        /** @private */
+        __emptyState: {
+          type: Boolean,
+          computed: '__computeEmptyState(_flatSize, __hasEmptyStateContent)',
+        },
       };
@@ -266,2 +279,7 @@ }
       this._tooltipController.setManual(true);
+
+      this.__emptyStateContentObserver = new SlotObserver(this.$.emptystateslot, ({ currentNodes }) => {
+        this.$.emptystatecell._content = currentNodes[0];
+        this.__hasEmptyStateContent = !!this.$.emptystatecell._content;
+      });
     }
@@ -870,2 +888,7 @@
 
+    /** @private */
+    __computeEmptyState(flatSize, hasEmptyStateContent) {
+      return flatSize === 0 && hasEmptyStateContent;
+    }
+
     /**
@@ -872,0 +895,0 @@ * @param {!Array<!GridColumn>} columnTree

src/vaadin-grid-styles.js

@@ -192,2 +192,28 @@ /**
 
+  /* Empty state */
+
+  #scroller:not([empty-state]) #emptystatebody,
+  #scroller[empty-state] #items {
+    display: none;
+  }
+
+  #emptystatebody {
+    display: flex;
+    position: sticky;
+    inset: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  #emptystaterow {
+    display: flex;
+    flex: 1;
+  }
+
+  #emptystatecell {
+    display: block;
+    flex: 1;
+    overflow: auto;
+  }
+
   /* Reordering styles */
@@ -194,0 +220,0 @@ :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),

src/vaadin-grid.d.ts

@@ -208,2 +208,3 @@ /**
  * `resize-handle`            | Handle for resizing the columns
+ * `empty-state`              | The container for the content to be displayed when there are no body rows to show
  * `reorder-ghost`            | Ghost element of the header cell being dragged
@@ -210,0 +211,0 @@ *

src/vaadin-grid.js

@@ -208,2 +208,3 @@ /**
  * `resize-handle`            | Handle for resizing the columns
+ * `empty-state`              | The container for the content to be displayed when there are no body rows to show
  * `reorder-ghost`            | Ghost element of the header cell being dragged
@@ -272,2 +273,3 @@ *
         column-reordering-allowed$="[[columnReorderingAllowed]]"
+        empty-state$="[[__emptyState]]"
       >
@@ -278,2 +280,9 @@ <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0">
           <tbody id="items" role="rowgroup"></tbody>
+          <tbody id="emptystatebody">
+            <tr id="emptystaterow">
+              <td part="empty-state" id="emptystatecell" tabindex="0">
+                <slot name="empty-state" id="emptystateslot"></slot>
+              </td>
+            </tr>
+          </tbody>
           <tfoot id="footer" role="rowgroup"></tfoot>
@@ -280,0 +289,0 @@ </table>

src/vaadin-lit-grid.js

@@ -43,2 +43,3 @@ /**
         column-reordering-allowed="${this.columnReorderingAllowed}"
+        ?empty-state="${this.__emptyState}"
       >
@@ -49,2 +50,9 @@ <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0">
           <tbody id="items" role="rowgroup"></tbody>
+          <tbody id="emptystatebody">
+            <tr id="emptystaterow">
+              <td part="empty-state" id="emptystatecell" tabindex="0">
+                <slot name="empty-state" id="emptystateslot"></slot>
+              </td>
+            </tr>
+          </tbody>
           <tfoot id="footer" role="rowgroup"></tfoot>
@@ -51,0 +59,0 @@ </table>

theme/lumo/vaadin-grid-styles.js

@@ -93,2 +93,8 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
+    /* Empty state */
+    [part~='empty-state'] {
+      padding: var(--lumo-space-m);
+      color: var(--lumo-secondary-text-color);
+    }
+
     /* Drag and Drop styles */
@@ -350,2 +356,6 @@ :host([dragover])::after {
 
+    :host([theme~='compact']) [part~='empty-state'] {
+      padding: var(--lumo-space-s);
+    }
+
     /* Wrap cell contents */
@@ -352,0 +362,0 @@

theme/material/vaadin-grid-styles.js

@@ -154,2 +154,8 @@ import '@vaadin/vaadin-material-styles/color.js';
 
+    /* Empty state */
+    [part~='empty-state'] {
+      padding: 16px;
+      color: var(--material-secondary-text-color);
+    }
+
     /* Drag and Drop styles */
@@ -156,0 +162,0 @@ :host([dragover])::after {

No alert changes

Improved metrics

Total package byte prevSize

675004

increased by0.95%

Lines of code

16210

increased by0.58%

Dependency changes

• + Added@vaadin/a11y-base@24.5.0-alpha1(transitive)

• + Added@vaadin/checkbox@24.5.0-alpha1(transitive)

• + Added@vaadin/component-base@24.5.0-alpha1(transitive)

• + Added@vaadin/field-base@24.5.0-alpha1(transitive)

• + Added@vaadin/icon@24.5.0-alpha1(transitive)

• + Added@vaadin/input-container@24.5.0-alpha1(transitive)

• + Added@vaadin/lit-renderer@24.5.0-alpha1(transitive)

• + Added@vaadin/text-field@24.5.0-alpha1(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.5.0-alpha1(transitive)

• + Added@vaadin/vaadin-material-styles@24.5.0-alpha1(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.5.0-alpha1(transitive)

• - Removed@vaadin/a11y-base@24.4.0-rc1(transitive)

• - Removed@vaadin/checkbox@24.4.0-rc1(transitive)

• - Removed@vaadin/component-base@24.4.0-rc1(transitive)

• - Removed@vaadin/field-base@24.4.0-rc1(transitive)

• - Removed@vaadin/icon@24.4.0-rc1(transitive)

• - Removed@vaadin/input-container@24.4.0-rc1(transitive)

• - Removed@vaadin/lit-renderer@24.4.0-rc1(transitive)

• - Removed@vaadin/text-field@24.4.0-rc1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.4.0-rc1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.4.0-rc1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.4.0-rc1(transitive)

• Updated@vaadin/a11y-base@24.5.0-alpha1

• Updated@vaadin/checkbox@24.5.0-alpha1

• Updated@vaadin/component-base@24.5.0-alpha1

• Updated@vaadin/lit-renderer@24.5.0-alpha1

• Updated@vaadin/text-field@24.5.0-alpha1

• Updated@vaadin/vaadin-lumo-styles@24.5.0-alpha1

• Updated@vaadin/vaadin-material-styles@24.5.0-alpha1

• Updated@vaadin/vaadin-themable-mixin@24.5.0-alpha1