@vaadin/crud 25.0.0-alpha2 → 25.0.0-alpha21

package/src/vaadin-crud-mixin.js

@@ -307,7 +307,7 @@ export const CrudMixin = (superClass) =>
      *
      * The object has the following JSON structure and default values:
      *
-     * ```
+     * ```js
      * {
      *   newItem: 'New item',
      *   editItem: 'Edit item',
@@ -377,18 +377,30 @@ export const CrudMixin = (superClass) =>
       return this.__fields;
     }
 
+    /** @private */
+    get _editor() {
+      return this.shadowRoot.querySelector('#editor');
+    }
+
+    /** @private */
+    get _scroller() {
+      return this.shadowRoot.querySelector('#scroller');
+    }
+
+    /** @private */
+    get _dialogMode() {
+      return this.editorPosition === '' || this._fullscreen;
+    }
+
     /** @protected */
     ready() {
       super.ready();
 
-      this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancel);
-      this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
-
       this._gridController = new GridSlotController(this);
       this.addController(this._gridController);
 
       // Init button controllers in `ready()` (not constructor) so that Flow can set `_noDefaultButtons`
-      this._newButtonController = new ButtonSlotController(this, 'new', 'primary', this._noDefaultButtons);
+      this._newButtonController = new ButtonSlotController(this, 'new', null, this._noDefaultButtons);
       this.addController(this._newButtonController);
 
       this._headerController = new SlotController(this, 'header', 'h3', {
@@ -416,6 +428,27 @@ export const CrudMixin = (superClass) =>
       );
 
       this.addController(this.__focusRestorationController);
+
+      this._confirmCancelDialog = this.querySelector('vaadin-confirm-dialog[slot="confirm-cancel"]');
+      this._confirmDeleteDialog = this.querySelector('vaadin-confirm-dialog[slot="confirm-delete"]');
+    }
+
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      // When using dialog mode, hide elements not slotted into the dialog from accessibility tree
+      if (
+        props.has('_grid') ||
+        props.has('_newButton') ||
+        props.has('editorOpened') ||
+        props.has('editorPosition') ||
+        props.has('_fullscreen')
+      ) {
+        const hide = this.editorOpened && this._dialogMode;
+        this.__hideElement(this._grid, hide);
+        this.__hideElement(this._newButton, hide);
+      }
     }
 
     /**
@@ -474,25 +507,24 @@ export const CrudMixin = (superClass) =>
       }
 
       if (opened) {
-        this.__ensureChildren();
-
         // When using bottom / aside editor position,
         // auto-focus the editor element on open.
-        if (this._form.parentElement === this) {
-          this.$.editor.setAttribute('tabindex', '0');
-          this.$.editor.focus();
-        } else {
-          this.$.editor.removeAttribute('tabindex');
+        if (this._editor) {
+          this._editor.focus();
         }
-      } else if (oldOpened) {
-        // Teleport form and buttons back to light DOM when closing overlay
-        this.__moveChildNodes(this);
+
+        // Wait to set label until header node has updated (observer seems to run after this one)
+        setTimeout(() => {
+          this.__dialogAriaLabel = this._headerNode.textContent.trim();
+        });
       }
 
       this.__toggleToolbar();
 
       // Make sure to reset scroll position
-      this.$.scroller.scrollTop = 0;
+      if (this._scroller) {
+        this._scroller.scrollTop = 0;
+      }
     }
 
     /** @private */
@@ -500,8 +532,6 @@ export const CrudMixin = (superClass) =>
       if (fullscreen || oldFullscreen) {
         this.__toggleToolbar();
 
-        this.__ensureChildren();
-
         this.toggleAttribute('fullscreen', fullscreen);
       }
     }
@@ -514,66 +544,6 @@ export const CrudMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __moveChildNodes(target) {
-      const nodes = [this._headerNode, this._form];
-      const buttons = [this._saveButton, this._cancelButton, this._deleteButton].filter(Boolean);
-      if (!nodes.every((node) => node instanceof HTMLElement)) {
-        return;
-      }
-
-      // Teleport header node, form, and the buttons to corresponding slots.
-      // NOTE: order in which buttons are moved matches the order of slots.
-      [...nodes, ...buttons].forEach((node) => {
-        // Do not move nodes if the editor position has not changed
-        if (node.parentNode !== target) {
-          target.appendChild(node);
-        }
-      });
-
-      // Wait to set label until slotted element has been moved.
-      setTimeout(() => {
-        this.__dialogAriaLabel = this._headerNode.textContent.trim();
-      });
-    }
-
-    /** @private */
-    __shouldOpenDialog(fullscreen, editorPosition) {
-      return editorPosition === '' || fullscreen;
-    }
-
-    /** @private */
-    __ensureChildren() {
-      if (this.__shouldOpenDialog(this._fullscreen, this.editorPosition)) {
-        // Move form to dialog
-        this.__moveChildNodes(this.$.dialog.$.overlay);
-      } else {
-        // Move form to crud
-        this.__moveChildNodes(this);
-      }
-    }
-
-    /** @private */
-    __computeDialogOpened(opened, fullscreen, editorPosition) {
-      // Only open dialog when editorPosition is "" or fullscreen is set
-      return this.__shouldOpenDialog(fullscreen, editorPosition) ? opened : false;
-    }
-
-    /** @private */
-    __computeEditorHidden(opened, fullscreen, editorPosition) {
-      // Only show editor when editorPosition is "bottom" or "aside"
-      if (['aside', 'bottom'].includes(editorPosition) && !fullscreen) {
-        return !opened;
-      }
-
-      return true;
-    }
-
-    /** @private */
-    __onDialogOpened(event) {
-      this.editorOpened = event.detail.value;
-    }
-
     /** @private */
     __onGridEdit(event) {
       event.stopPropagation();
@@ -617,8 +587,7 @@ export const CrudMixin = (superClass) =>
      * @private
      */
     __formChanged(form, oldForm) {
-      if (oldForm && oldForm.parentElement) {
-        oldForm.parentElement.removeChild(oldForm);
+      if (oldForm) {
         oldForm.removeEventListener('change', this.__onFormChange);
         oldForm.removeEventListener('input', this.__onFormChange);
       }
@@ -786,7 +755,7 @@ export const CrudMixin = (superClass) =>
         this.__isDirty && // Form change has been made
         this.editedItem !== item // Item is different
       ) {
-        this.$.confirmCancel.opened = true;
+        this._confirmCancelDialog.opened = true;
         this.addEventListener(
           'cancel',
           (event) => {
@@ -986,7 +955,7 @@ export const CrudMixin = (superClass) =>
     /** @private */
     __cancel() {
       if (this.__isDirty) {
-        this.$.confirmCancel.opened = true;
+        this._confirmCancelDialog.opened = true;
       } else {
         this.__confirmCancel();
       }
@@ -1003,7 +972,7 @@ export const CrudMixin = (superClass) =>
 
     /** @private */
     __delete() {
-      this.$.confirmDelete.opened = true;
+      this._confirmDeleteDialog.opened = true;
     }
 
     /** @private */
@@ -1020,6 +989,17 @@ export const CrudMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __hideElement(element, value) {
+      if (!element) return;
+
+      if (value) {
+        element.setAttribute('aria-hidden', 'true');
+      } else {
+        element.removeAttribute('aria-hidden');
+      }
+    }
+
     /**
      * Fired when user wants to edit an existing item. If the default is prevented, then
      * a new item is not assigned to the form, giving that responsibility to the app, though

package/src/vaadin-crud.d.ts

@@ -132,11 +132,26 @@ export * from './vaadin-crud-mixin.js';
  *
  * ### Styling
  *
- * The following shadow DOM parts are available for styling:
+ * The following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:
  *
  * Part name | Description
  * ----------------|----------------
- * `toolbar` | Toolbar container at the bottom. By default it contains the the `new` button
+ * `toolbar`  | Toolbar container at the bottom of the grid. By default, it contains the `new` button
+ * `editor`   | The editor container
+ * `scroller` | The wrapper for the header and the form
+ * `header`   | The header of the editor
+ * `footer`   | The footer of the editor
+ *
+ * The following shadow DOM parts are available for styling when the editor renders as a dialog:
+ *
+ * Part name | Description
+ * ----------------|----------------
+ * `toolbar`  | Toolbar container at the bottom of the grid. By default, it contains the `new` button
+ * `overlay`  | The dialog overlay
+ * `backdrop` | The dialog backdrop
+ * `header`   | The header of the dialog
+ * `footer`   | The footer of the dialog
+ * `content`  | The wrapper for the form
  *
  * The following custom properties are available:
  *

package/src/vaadin-crud.js

@@ -13,14 +13,15 @@ import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
 import './vaadin-crud-dialog.js';
 import './vaadin-crud-grid.js';
 import './vaadin-crud-form.js';
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing, render } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { crudStyles } from './styles/vaadin-crud-base-styles.js';
 import { CrudMixin } from './vaadin-crud-mixin.js';
-import { crudStyles } from './vaadin-crud-styles.js';
 
 /**
  * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
@@ -139,11 +140,26 @@ import { crudStyles } from './vaadin-crud-styles.js';
  *
  * ### Styling
  *
- * The following shadow DOM parts are available for styling:
+ * The following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:
  *
  * Part name | Description
  * ----------------|----------------
- * `toolbar` | Toolbar container at the bottom. By default it contains the the `new` button
+ * `toolbar`  | Toolbar container at the bottom of the grid. By default, it contains the `new` button
+ * `editor`   | The editor container
+ * `scroller` | The wrapper for the header and the form
+ * `header`   | The header of the editor
+ * `footer`   | The footer of the editor
+ *
+ * The following shadow DOM parts are available for styling when the editor renders as a dialog:
+ *
+ * Part name | Description
+ * ----------------|----------------
+ * `toolbar`  | Toolbar container at the bottom of the grid. By default, it contains the `new` button
+ * `overlay`  | The dialog overlay
+ * `backdrop` | The dialog backdrop
+ * `header`   | The header of the dialog
+ * `footer`   | The footer of the dialog
+ * `content`  | The wrapper for the form
  *
  * The following custom properties are available:
  *
@@ -170,7 +186,15 @@ import { crudStyles } from './vaadin-crud-styles.js';
  * @mixes ThemableMixin
  * @mixes CrudMixin
  */
-class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-crud';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-crud';
+  }
+
   static get styles() {
     return crudStyles;
   }
@@ -188,71 +212,104 @@ class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)
           </div>
         </div>
 
-        <div
-          part="editor"
-          id="editor"
-          role="group"
-          aria-labelledby="header"
-          ?hidden="${this.__computeEditorHidden(this.editorOpened, this._fullscreen, this.editorPosition)}"
-        >
-          <div part="scroller" id="scroller">
-            <div part="header" id="header">
-              <slot name="header"></slot>
-            </div>
-            <slot name="form"></slot>
-          </div>
+        ${!this._dialogMode
+          ? html`
+              <div
+                part="editor"
+                id="editor"
+                role="group"
+                aria-labelledby="header"
+                tabindex="0"
+                ?hidden="${!this.editorOpened}"
+              >
+                <div part="scroller" id="scroller">
+                  <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>
-        </div>
+                <div part="footer" role="toolbar">
+                  <slot name="save-button"></slot>
+                  <slot name="cancel-button"></slot>
+                  <slot name="delete-button"></slot>
+                </div>
+              </div>
+            `
+          : nothing}
       </div>
 
-      <vaadin-crud-dialog
-        id="dialog"
-        .opened="${this.__computeDialogOpened(this.editorOpened, this._fullscreen, this.editorPosition)}"
-        .fullscreen="${this._fullscreen}"
-        .ariaLabel="${this.__dialogAriaLabel}"
-        .noCloseOnOutsideClick="${this.__isDirty}"
-        .noCloseOnEsc="${this.__isDirty}"
-        theme="${ifDefined(this._theme)}"
-        @opened-changed="${this.__onDialogOpened}"
-      ></vaadin-crud-dialog>
+      ${this._dialogMode
+        ? html`
+            <vaadin-crud-dialog
+              id="dialog"
+              aria-label="${ifDefined(this.__dialogAriaLabel)}"
+              theme="${ifDefined(this._theme)}"
+              exportparts="backdrop, overlay, header, content, footer"
+              .crudElement="${this}"
+              .opened="${this.editorOpened}"
+              .fullscreen="${this._fullscreen}"
+              .noCloseOnOutsideClick="${this.__isDirty}"
+              .noCloseOnEsc="${this.__isDirty}"
+              @cancel="${this.__cancel}"
+            >
+              <slot name="header" slot="header"></slot>
+              <slot name="form" slot="form"></slot>
+              <slot name="save-button" slot="save-button"></slot>
+              <slot name="cancel-button" slot="cancel-button"></slot>
+              <slot name="delete-button" slot="delete-button"></slot>
+            </vaadin-crud-dialog>
+          `
+        : nothing}
 
-      <vaadin-confirm-dialog
-        theme="${ifDefined(this._theme)}"
-        id="confirmCancel"
-        @confirm="${this.__confirmCancel}"
-        cancel-button-visible
-        .confirmText="${this.__effectiveI18n.confirm.cancel.button.confirm}"
-        .cancelText="${this.__effectiveI18n.confirm.cancel.button.dismiss}"
-        .header="${this.__effectiveI18n.confirm.cancel.title}"
-        .message="${this.__effectiveI18n.confirm.cancel.content}"
-        confirm-theme="primary"
-      ></vaadin-confirm-dialog>
+      <slot name="confirm-cancel"></slot>
 
-      <vaadin-confirm-dialog
-        theme="${ifDefined(this._theme)}"
-        id="confirmDelete"
-        @confirm="${this.__confirmDelete}"
-        cancel-button-visible
-        .confirmText="${this.__effectiveI18n.confirm.delete.button.confirm}"
-        .cancelText="${this.__effectiveI18n.confirm.delete.button.dismiss}"
-        .header="${this.__effectiveI18n.confirm.delete.title}"
-        .message="${this.__effectiveI18n.confirm.delete.content}"
-        confirm-theme="primary error"
-      ></vaadin-confirm-dialog>
+      <slot name="confirm-delete"></slot>
     `;
   }
 
-  static get is() {
-    return 'vaadin-crud';
+  /**
+   * Override update to render slotted overlays into light DOM after rendering shadow DOM.
+   * @param changedProperties
+   * @protected
+   */
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    this.__renderSlottedOverlays();
   }
 
-  static get cvdlName() {
-    return 'vaadin-crud';
+  /** @private */
+  __renderSlottedOverlays() {
+    render(
+      html`
+        <vaadin-confirm-dialog
+          theme="${ifDefined(this._theme)}"
+          slot="confirm-cancel"
+          @confirm="${this.__confirmCancel}"
+          cancel-button-visible
+          .confirmText="${this.__effectiveI18n.confirm.cancel.button.confirm}"
+          .cancelText="${this.__effectiveI18n.confirm.cancel.button.dismiss}"
+          .header="${this.__effectiveI18n.confirm.cancel.title}"
+          .message="${this.__effectiveI18n.confirm.cancel.content}"
+          confirm-theme="primary"
+        ></vaadin-confirm-dialog>
+
+        <vaadin-confirm-dialog
+          theme="${ifDefined(this._theme)}"
+          slot="confirm-delete"
+          @confirm="${this.__confirmDelete}"
+          cancel-button-visible
+          .confirmText="${this.__effectiveI18n.confirm.delete.button.confirm}"
+          .cancelText="${this.__effectiveI18n.confirm.delete.button.dismiss}"
+          .header="${this.__effectiveI18n.confirm.delete.title}"
+          .message="${this.__effectiveI18n.confirm.delete.content}"
+          confirm-theme="primary error"
+        ></vaadin-confirm-dialog>
+      `,
+      this,
+      { host: this },
+    );
   }
 }
 

package/vaadin-crud.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-crud.js';
+import './src/vaadin-crud.js';
 export * from './src/vaadin-crud.js';