@vaadin/crud 22.0.0-rc1 → 23.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "22.0.0-rc1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,23 +35,22 @@
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "22.0.0-rc1",
-    "@vaadin/component-base": "22.0.0-rc1",
-    "@vaadin/confirm-dialog": "22.0.0-rc1",
-    "@vaadin/dialog": "22.0.0-rc1",
-    "@vaadin/form-layout": "22.0.0-rc1",
-    "@vaadin/grid": "22.0.0-rc1",
-    "@vaadin/text-field": "22.0.0-rc1",
+    "@vaadin/button": "23.0.0-alpha2",
+    "@vaadin/component-base": "23.0.0-alpha2",
+    "@vaadin/confirm-dialog": "23.0.0-alpha2",
+    "@vaadin/dialog": "23.0.0-alpha2",
+    "@vaadin/form-layout": "23.0.0-alpha2",
+    "@vaadin/grid": "23.0.0-alpha2",
+    "@vaadin/text-field": "23.0.0-alpha2",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-material-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-rc1"
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-rc1",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "7b6f44bcd2c0fd415028ace666feeb0fedb1d540"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

package/src/vaadin-crud-dialog.js

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2021 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ */
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { Dialog, DialogOverlay } from '@vaadin/dialog/src/vaadin-dialog.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-crud-dialog-overlay',
+  css`
+    [part='overlay'] {
+      max-width: 54em;
+      min-width: 20em;
+    }
+
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+    }
+
+    [part='scroller'] {
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      flex: auto;
+    }
+
+    [part='footer'] {
+      display: flex;
+      flex: none;
+      flex-direction: row-reverse;
+    }
+
+    :host([fullscreen]) {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: 0;
+    }
+
+    :host([fullscreen]) [part='overlay'] {
+      height: 100vh;
+      width: 100vw;
+      border-radius: 0 !important;
+    }
+
+    :host([fullscreen]) [part='content'] {
+      flex: 1;
+    }
+  `,
+  { moduleId: 'vaadin-crud-dialog-overlay-styles' }
+);
+
+let memoizedTemplate;
+
+const editorTemplate = html`
+  <div part="scroller" role="group" aria-labelledby="header">
+    <div part="header" id="header">
+      <slot name="header"></slot>
+    </div>
+    <slot name="form"></slot>
+  </div>
+
+  <div part="footer" role="toolbar">
+    <slot name="save-button"></slot>
+    <slot name="cancel-button"></slot>
+    <slot name="delete-button"></slot>
+  </div>
+`;
+
+class CrudDialogOverlay extends DialogOverlay {
+  static get is() {
+    return 'vaadin-crud-dialog-overlay';
+  }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
+      const defaultSlot = contentPart.querySelector('slot:not([name])');
+      contentPart.removeChild(defaultSlot);
+      contentPart.appendChild(editorTemplate.content.cloneNode(true));
+    }
+    return memoizedTemplate;
+  }
+}
+
+customElements.define('vaadin-crud-dialog-overlay', CrudDialogOverlay);
+
+class CrudDialog extends Dialog {
+  /**
+   * Override template to provide custom overlay tag name.
+   */
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: none;
+        }
+      </style>
+
+      <vaadin-crud-dialog-overlay
+        id="overlay"
+        on-opened-changed="_onOverlayOpened"
+        on-mousedown="_bringOverlayToFront"
+        on-touchstart="_bringOverlayToFront"
+        theme$="[[theme]]"
+        modeless="[[modeless]]"
+        with-backdrop="[[!modeless]]"
+        resizable$="[[resizable]]"
+        focus-trap
+      ></vaadin-crud-dialog-overlay>
+    `;
+  }
+}
+
+customElements.define('vaadin-crud-dialog', CrudDialog);

package/src/vaadin-crud-edit.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { Button } from '@vaadin/button/src/vaadin-button.js';
 
 /**
  * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
@@ -13,7 +13,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * Typical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside
  * a `<vaadin-crud>` to enable editing.
  */
-declare class CrudEdit extends ThemableMixin(HTMLElement) {}
+declare class CrudEdit extends Button {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-crud-edit.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2017 - 2021 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { html } from '@polymer/polymer/polymer-element.js';
+import { Button } from '@vaadin/button/src/vaadin-button.js';
 
 /**
  * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
@@ -17,7 +17,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @extends HTMLElement
  * @mixes ThemableMixin
  */
-class CrudEdit extends ThemableMixin(PolymerElement) {
+class CrudEdit extends Button {
   static get template() {
     return html`
       <style>
@@ -25,6 +25,7 @@ class CrudEdit extends ThemableMixin(PolymerElement) {
           display: block;
         }
       </style>
+      <div part="icon"></div>
     `;
   }
 
@@ -37,7 +38,6 @@ class CrudEdit extends ThemableMixin(PolymerElement) {
     super.ready();
     this.addEventListener('click', this.__onClick);
     this.setAttribute('aria-label', 'Edit');
-    this.setAttribute('role', 'button');
   }
 
   /** @private */
@@ -57,4 +57,4 @@ class CrudEdit extends ThemableMixin(PolymerElement) {
    */
 }
 
-window.customElements.define(CrudEdit.is, CrudEdit);
+customElements.define(CrudEdit.is, CrudEdit);

package/src/vaadin-crud-grid.js

@@ -109,10 +109,27 @@ class CrudGrid extends IncludedMixin(Grid) {
    */
   _configure(item) {
     this.innerHTML = '';
-    this.__createColumns(this, item);
+    this.__createColumns(this, item, undefined, this.__getPropertyDepth(item));
     this.__toggleEditColumn();
   }
 
+  /**
+   * Return the deepest property depth of the object
+   * @private
+   */
+  __getPropertyDepth(object) {
+    if (!object || typeof object !== 'object') {
+      return 0;
+    }
+
+    return Object.keys(object).reduce((deepest, prop) => {
+      if (this.exclude && this.exclude.test(prop)) {
+        return deepest;
+      }
+      return Math.max(deepest, 1 + this.__getPropertyDepth(object[prop]));
+    }, 0);
+  }
+
   /**
    * Parse the camelCase column names into sentence case headers.
    * @param {string} path
@@ -130,25 +147,38 @@ class CrudGrid extends IncludedMixin(Grid) {
 
   /** @private */
   __createColumn(parent, path) {
-    const col = document.createElement('vaadin-grid-column');
-
-    col.renderer = (root, column, model) => {
-      root.textContent = path ? this.get(path, model.item) : model.item;
-    };
+    let col;
+    if (!this.noFilter && !this.noSort && !parent.__sortColumnGroup) {
+      // This crud-grid has both a sorter and a filter, but neither has yet been
+      // created => col should become the sorter group column
+      col = this.__createGroup(parent);
+      col.__sortColumnGroup = true;
+      // Create the filter column under this sorter group column
+      this.__createColumn(col, path);
+    } else {
+      // In all other cases, col should be a regular column with a renderer
+      col = document.createElement('vaadin-grid-column');
+      parent.appendChild(col);
+      col.renderer = (root, _column, model) => {
+        root.textContent = path ? this.get(path, model.item) : model.item;
+      };
+    }
 
     if (!this.noHead && path) {
+      // Create a header renderer for the column (or column group)
       col.headerRenderer = (root) => {
         const label = this._generateHeader(path);
 
-        if (!this.noSort) {
-          const sorter = window.document.createElement('vaadin-grid-sorter');
+        if (col.__sortColumnGroup || (this.noFilter && !this.noSort)) {
+          // The column is either the sorter group column or the root level
+          // 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);
           sorter.textContent = label;
           root.appendChild(sorter);
-        }
-
-        if (!this.noFilter) {
-          const filter = window.document.createElement('vaadin-grid-filter');
+        } 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);
           filter.style.display = 'flex';
 
@@ -164,42 +194,63 @@ class CrudGrid extends IncludedMixin(Grid) {
 
           filter.appendChild(textField);
           root.appendChild(filter);
-        }
-
-        if (this.noSort && this.noFilter) {
+        } else if (this.noSort && this.noFilter) {
+          // Neither sorter nor filter are enabled, just add the label
           root.textContent = label;
         }
       };
     }
-
-    parent.appendChild(col);
-    return col;
   }
 
-  /** @private */
-  __createColumns(parent, object, path) {
-    if (typeof object === 'object') {
+  /**
+   * Creates the column structure for the (sub)object.
+   *
+   * @param {HTMLElement} parent May be the crud-grid or a column group.
+   * @param {Object} object The object to create the sub-columns for.
+   * @param {string} path The property path from the root item to the object.
+   * @param {number} depth The depth of the object in the object hierarchy.
+   * @private
+   **/
+  __createColumns(parent, object, path, depth) {
+    if (object && typeof object === 'object') {
+      // Iterate over the object properties
       Object.keys(object).forEach((prop) => {
         if (!this.include && this.exclude && this.exclude.test(prop)) {
           return;
         }
-        const newPath = (path ? `${path}.` : '') + prop;
-        if (object[prop] && typeof object[prop] === 'object') {
-          const group = this.noHead ? parent : this.__createGroup(parent, newPath, object[prop]);
-          this.__createColumns(group, object[prop], newPath);
-        } else {
-          this.__createColumn(parent, newPath);
+        // Sub-object of the current object
+        const subObject = object[prop];
+        // Full path to the sub-object
+        const subObjectPath = path ? `${path}.${prop}` : prop;
+
+        // The column element for the sub-object
+        let subObjectColumn = parent;
+        if (!this.noHead && depth > 1) {
+          const isSubObject = subObject && typeof subObject === 'object';
+          // If the sub-object is an actual object, create a column group with the property
+          // name as the header text, otherwise create a group without a header
+          subObjectColumn = this.__createGroup(parent, isSubObject ? prop : undefined);
         }
+
+        // Run recursively for the sub-object level
+        this.__createColumns(subObjectColumn, subObject, subObjectPath, depth - 1);
       });
+    } else if (depth > 1) {
+      // The object has been fully traversed, but empty wrapping column
+      // groups are still needed to complete the full object depth
+      this.__createColumns(this.__createGroup(parent), undefined, path, depth - 1);
     } else {
-      this.__createColumn(parent, '');
+      // The column group depth is complete, create the actual leaf column
+      this.__createColumn(parent, path);
     }
   }
 
   /** @private */
-  __createGroup(parent, path) {
+  __createGroup(parent, header) {
     const grp = document.createElement('vaadin-grid-column-group');
-    grp.headerRenderer = (root) => (root.textContent = this.__capitalize(path.replace(/^.*\./, '')));
+    if (header) {
+      grp.header = this.__capitalize(header);
+    }
     parent.appendChild(grp);
     return grp;
   }