@vaadin/crud 24.8.4 → 25.0.0-alpha10

package/src/vaadin-crud-dialog.js

@@ -8,25 +8,18 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
-import { dialogOverlay, resizableOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-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 { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { crudDialogOverlayStyles } from './vaadin-crud-styles.js';
-
-registerStyles(
-  'vaadin-crud-dialog-overlay',
-  [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles],
-  {
-    moduleId: 'vaadin-crud-dialog-overlay-styles',
-  },
-);
+import { crudDialogOverlayStyles } from './styles/vaadin-crud-dialog-overlay-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
@@ -38,17 +31,33 @@ registerStyles(
  * @mixes ThemableMixin
  * @private
  */
-class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-crud-dialog-overlay';
   }
 
-  static get template() {
+  static get styles() {
+    return crudDialogOverlayStyles;
+  }
+
+  /**
+   * Override method from OverlayFocusMixin to use the owner (CRUD element) as modal root
+   * @protected
+   * @override
+   */
+  get _modalRoot() {
+    return this.owner;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div part="backdrop" id="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <section id="resizerContainer" class="resizer-container">
-          <header part="header"><slot name="header"></slot></header>
+          <header part="header">
+            <slot name="header"></slot>
+          </header>
           <div part="content" id="content">
             <slot name="form"></slot>
           </div>
@@ -81,48 +90,70 @@ defineCustomElement(CrudDialogOverlay);
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  * @private
  */
-class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))) {
+class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-crud-dialog';
   }
 
+  static get styles() {
+    return css`
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: contents !important;
+      }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
   static get properties() {
     return {
-      ariaLabel: {
-        type: String,
-      },
-
       fullscreen: {
         type: Boolean,
       },
+
+      crudElement: {
+        type: Object,
+      },
     };
   }
 
-  static get template() {
+  /** @protected */
+  render() {
     return html`
-      <style>
-        :host {
-          display: none;
-        }
-      </style>
-
       <vaadin-crud-dialog-overlay
         id="overlay"
-        opened="[[opened]]"
-        aria-label$="[[ariaLabel]]"
-        on-opened-changed="_onOverlayOpened"
-        on-mousedown="_bringOverlayToFront"
-        on-touchstart="_bringOverlayToFront"
-        theme$="[[_theme]]"
-        modeless="[[modeless]]"
-        with-backdrop="[[!modeless]]"
-        resizable$="[[resizable]]"
-        fullscreen$="[[fullscreen]]"
-        role="dialog"
+        .owner="${this.crudElement}"
+        .opened="${this.opened}"
+        @opened-changed="${this._onOverlayOpened}"
+        @mousedown="${this._bringOverlayToFront}"
+        @touchstart="${this._bringOverlayToFront}"
+        @vaadin-overlay-outside-click="${this.__cancel}"
+        @vaadin-overlay-escape-press="${this.__cancel}"
+        theme="${ifDefined(this._theme)}"
+        .modeless="${this.modeless}"
+        .withBackdrop="${!this.modeless}"
+        ?fullscreen="${this.fullscreen}"
         focus-trap
-      ></vaadin-crud-dialog-overlay>
+        exportparts="backdrop, overlay, header, content, footer"
+      >
+        <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-overlay>
     `;
   }
+
+  /** @private **/
+  __cancel() {
+    this.dispatchEvent(new CustomEvent('cancel'));
+  }
 }
 
 defineCustomElement(CrudDialog);

package/src/vaadin-crud-edit.js

@@ -8,24 +8,10 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { html } from '@polymer/polymer/polymer-element.js';
+import { html } from 'lit';
 import { Button } from '@vaadin/button/src/vaadin-button.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * Use registerStyles instead of the `<style>` tag to make sure
- * that this CSS will override core styles of `vaadin-button`.
- */
-registerStyles(
-  'vaadin-crud-edit',
-  css`
-    :host {
-      display: block;
-    }
-  `,
-  { moduleId: 'vaadin-crud-edit-styles' },
-);
+import { crudEditStyles } from './styles/vaadin-crud-edit-core-styles.js';
 
 /**
  * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
@@ -40,17 +26,22 @@ registerStyles(
  * @mixes ThemableMixin
  */
 class CrudEdit extends Button {
-  static get template() {
+  static get is() {
+    return 'vaadin-crud-edit';
+  }
+
+  static get styles() {
+    return [super.styles, crudEditStyles];
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div part="icon"></div>
       <slot name="tooltip"></slot>
     `;
   }
 
-  static get is() {
-    return 'vaadin-crud-edit';
-  }
-
   /** @protected */
   ready() {
     super.ready();

package/src/vaadin-crud-form.js

@@ -33,7 +33,10 @@ class CrudForm extends IncludedMixin(FormLayout) {
        * The item being edited.
        * @type {unknown}
        */
-      item: Object,
+      item: {
+        type: Object,
+        sync: true,
+      },
     };
   }
 

package/src/vaadin-crud-grid.js

@@ -15,6 +15,7 @@ import '@vaadin/grid/src/vaadin-grid-sorter.js';
 import './vaadin-crud-edit-column.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
+import { crudGridStyles } from './styles/vaadin-crud-grid-core-styles.js';
 import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
 
 /**
@@ -28,6 +29,10 @@ class CrudGrid extends CrudGridMixin(Grid) {
   static get is() {
     return 'vaadin-crud-grid';
   }
+
+  static get styles() {
+    return crudGridStyles;
+  }
 }
 
 defineCustomElement(CrudGrid);

package/src/vaadin-crud-mixin.js

@@ -377,12 +377,31 @@ 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', null, this._noDefaultButtons);
+      this.addController(this._newButtonController);
 
       this._headerController = new SlotController(this, 'header', 'h3', {
         initializer: (node) => {
@@ -391,19 +410,12 @@ export const CrudMixin = (superClass) =>
       });
       this.addController(this._headerController);
 
-      this._gridController = new GridSlotController(this);
-      this.addController(this._gridController);
-
       this.addController(new FormSlotController(this));
 
-      // Init controllers in `ready()` (not constructor) so that Flow can set `_noDefaultButtons`
-      this._newButtonController = new ButtonSlotController(this, 'new', 'primary', this._noDefaultButtons);
       this._saveButtonController = new ButtonSlotController(this, 'save', 'primary', this._noDefaultButtons);
       this._cancelButtonController = new ButtonSlotController(this, 'cancel', 'tertiary', this._noDefaultButtons);
       this._deleteButtonController = new ButtonSlotController(this, 'delete', 'tertiary error', this._noDefaultButtons);
 
-      this.addController(this._newButtonController);
-
       // NOTE: order in which buttons are added should match the order of slots in template
       this.addController(this._saveButtonController);
       this.addController(this._cancelButtonController);
@@ -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,22 +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();
         }
+
+        // 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 */
@@ -497,8 +532,6 @@ export const CrudMixin = (superClass) =>
       if (fullscreen || oldFullscreen) {
         this.__toggleToolbar();
 
-        this.__ensureChildren();
-
         this.toggleAttribute('fullscreen', fullscreen);
       }
     }
@@ -511,63 +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) => {
-        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();
@@ -611,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);
       }
@@ -780,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) => {
@@ -980,7 +955,7 @@ export const CrudMixin = (superClass) =>
     /** @private */
     __cancel() {
       if (this.__isDirty) {
-        this.$.confirmCancel.opened = true;
+        this._confirmCancelDialog.opened = true;
       } else {
         this.__confirmCancel();
       }
@@ -997,7 +972,7 @@ export const CrudMixin = (superClass) =>
 
     /** @private */
     __delete() {
-      this.$.confirmDelete.opened = true;
+      this._confirmDeleteDialog.opened = true;
     }
 
     /** @private */
@@ -1014,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

@@ -8,7 +8,6 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -133,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:
  *
@@ -172,11 +186,7 @@ declare class Crud<Item = GridDefaultItem> extends HTMLElement {
   ): void;
 }
 
-interface Crud<Item = GridDefaultItem>
-  extends ElementMixinClass,
-    ThemableMixinClass,
-    ControllerMixinClass,
-    CrudMixinClass<Item> {}
+interface Crud<Item = GridDefaultItem> extends ElementMixinClass, ThemableMixinClass, CrudMixinClass<Item> {}
 
 declare global {
   interface HTMLElementTagNameMap {