@vaadin/crud 23.0.0-alpha4 → 23.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "23.0.0-alpha4",
+  "version": "23.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -34,24 +34,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.0.0-alpha4",
-    "@vaadin/component-base": "23.0.0-alpha4",
-    "@vaadin/confirm-dialog": "23.0.0-alpha4",
-    "@vaadin/dialog": "23.0.0-alpha4",
-    "@vaadin/form-layout": "23.0.0-alpha4",
-    "@vaadin/grid": "23.0.0-alpha4",
-    "@vaadin/text-field": "23.0.0-alpha4",
+    "@vaadin/button": "23.0.0-beta3",
+    "@vaadin/component-base": "23.0.0-beta3",
+    "@vaadin/confirm-dialog": "23.0.0-beta3",
+    "@vaadin/dialog": "23.0.0-beta3",
+    "@vaadin/form-layout": "23.0.0-beta3",
+    "@vaadin/grid": "23.0.0-beta3",
+    "@vaadin/text-field": "23.0.0-beta3",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha4"
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
+  "gitHead": "4c87216666541f9eb58f56c475964727822aad53"
 }

package/src/vaadin-crud-grid.js

@@ -167,6 +167,10 @@ class CrudGrid extends IncludedMixin(Grid) {
     if (!this.noHead && path) {
       // Create a header renderer for the column (or column group)
       col.headerRenderer = (root) => {
+        if (root.firstElementChild) {
+          return;
+        }
+
         const label = this._generateHeader(path);
 
         if (col.__sortColumnGroup || (this.noFilter && !this.noSort)) {
@@ -174,12 +178,16 @@ class CrudGrid extends IncludedMixin(Grid) {
           // sort column (in case a filter isn't used at all) => add the sort indicator
           const sorter = document.createElement('vaadin-grid-sorter');
           sorter.setAttribute('path', path);
+          // TODO: Localize aria labels
+          sorter.setAttribute('aria-label', `Sort by ${label}`);
           sorter.textContent = label;
           root.appendChild(sorter);
         } else if (!this.noFilter) {
           // Filtering is enabled in this crud-grid, create the filter element
           const filter = document.createElement('vaadin-grid-filter');
           filter.setAttribute('path', path);
+          // TODO: Localize aria labels
+          filter.setAttribute('aria-label', `Filter by ${label}`);
           filter.style.display = 'flex';
 
           const textField = window.document.createElement('vaadin-text-field');

package/src/vaadin-crud.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2018 - 2022 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';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { GridFilterDefinition, GridSorterDefinition } from '@vaadin/grid/src/vaadin-grid.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -237,7 +238,7 @@ export type CrudEventMap<T> = HTMLElementEventMap & CrudCustomEventMap<T>;
  * @fires {CustomEvent} save - Fired when user wants to save a new or an existing item.
  * @fires {CustomEvent} cancel - Fired when user discards edition.
  */
-declare class Crud<Item> extends ElementMixin(ThemableMixin(HTMLElement)) {
+declare class Crud<Item> extends ControllerMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   /**
    * A reference to all fields inside the [`_form`](#/elements/vaadin-crud#property-_form) element
    */

package/src/vaadin-crud.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/dialog/src/vaadin-dialog.js';
 import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
@@ -14,7 +13,9 @@ import './vaadin-crud-form.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -148,15 +149,18 @@ const HOST_PROPS = {
  * @fires {CustomEvent} cancel - Fired when user discards edition.
  *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes SlotMixin
  * @mixes ThemableMixin
  */
-class Crud extends SlotMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
         :host {
+          width: 100%;
+          height: 400px;
           --vaadin-crud-editor-max-height: 40%;
           --vaadin-crud-editor-max-width: 40%;
         }
@@ -165,14 +169,13 @@ class Crud extends SlotMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         #main {
           display: flex;
           flex-direction: column;
-          height: 400px;
-          flex: 1 1 100%;
           align-self: stretch;
           position: relative;
           overflow: hidden;
         }
 
         #main {
+          flex: 1 1 100%;
           height: 100%;
         }
 
@@ -306,8 +309,6 @@ class Crud extends SlotMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         message="[[i18n.confirm.delete.content]]"
         confirm-theme="primary error"
       ></vaadin-confirm-dialog>
-
-      <iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}"></iron-media-query>
     `;
   }
 
@@ -685,6 +686,12 @@ class Crud extends SlotMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancelBound);
     // Initialize the default buttons
     this.__propagateHostAttributes();
+
+    this.addController(
+      new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
+        this._fullscreen = matches;
+      })
+    );
   }
 
   /** @private */