@vaadin/crud 22.0.0-rc1 → 23.0.0-alpha2

package/theme/lumo/vaadin-crud-styles.js

@@ -2,26 +2,24 @@ import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
-import '../vaadin-dialog-layout-overlay-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-crud-edit',
   css`
     :host {
+      min-width: auto;
+      margin: 0;
       font-family: 'lumo-icons', var(--lumo-font-family);
       font-size: var(--lumo-icon-size-m);
       line-height: 1;
-      color: var(--lumo-primary-text-color);
       position: relative;
-      background-color: var(--lumo-contrast-5pct);
-      border-radius: var(--lumo-border-radius-m);
       width: var(--lumo-size-s);
       height: var(--lumo-size-s);
-      cursor: var(--lumo-clickable-cursor);
+      outline: none;
     }
 
-    :host::before {
+    [part='icon']::before {
       content: var(--lumo-icons-edit);
       width: var(--lumo-size-m);
       height: var(--lumo-size-m);
@@ -31,111 +29,102 @@ registerStyles(
       top: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
       left: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
     }
-
-    :host::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-      background-color: currentColor;
-      opacity: 0;
-      transition: opacity 100ms;
-    }
-
-    :host(:hover)::after {
-      opacity: 0.05;
-    }
-
-    :host(:active)::after {
-      opacity: 0.12;
-    }
   `,
   { moduleId: 'lumo-crud-grid-edit' }
 );
 
+/**
+ * Shared styles used for the CRUD editor content and buttons regardless of `editorPosition`.
+ * They are applied to both `vaadin-crud` and `vaadin-crud-dialog-overlay` components.
+ */
+const editorStyles = css`
+  [part='scroller'] {
+    padding: var(--lumo-space-l);
+  }
+
+  ::slotted([slot='header']) {
+    margin-top: var(--lumo-space-s);
+    margin-bottom: var(--lumo-space-s);
+  }
+
+  [part='footer'] {
+    background-color: var(--lumo-contrast-5pct);
+    padding: var(--lumo-space-s);
+  }
+
+  [part='footer'] ::slotted(*) {
+    margin-left: var(--lumo-space-s);
+    margin-right: var(--lumo-space-s);
+  }
+
+  :host(:not([dir='rtl'])) ::slotted([slot='delete-button']) {
+    margin-right: auto;
+  }
+
+  :host([dir='rtl']) ::slotted([slot='delete-button']) {
+    margin-left: auto;
+  }
+`;
+
 registerStyles(
   'vaadin-crud',
-  css`
-    :host {
-      font-family: var(--lumo-font-family);
-    }
-
-    [part='toolbar'] {
-      padding: var(--lumo-space-s) var(--lumo-space-m);
-      background-color: var(--lumo-contrast-5pct);
-      border: 1px solid var(--lumo-contrast-10pct);
-      border-top: none;
-    }
-
-    :host(:not([dir='rtl'])) [part='toolbar'] ::slotted(*:not(:first-child)) {
-      margin-left: var(--lumo-space-s);
-    }
-
-    :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
-      margin-right: var(--lumo-space-s);
-    }
-
-    :host([theme~='no-border']) [part='toolbar'] {
-      border: 0;
-    }
-
-    vaadin-grid-cell-content {
-      text-overflow: ellipsis;
-    }
-  `,
+  [
+    editorStyles,
+    css`
+      :host {
+        font-family: var(--lumo-font-family);
+      }
+
+      [part='toolbar'] {
+        padding: var(--lumo-space-s) var(--lumo-space-m);
+        background-color: var(--lumo-contrast-5pct);
+        border: 1px solid var(--lumo-contrast-10pct);
+        border-top: none;
+      }
+
+      :host(:not([dir='rtl'])) [part='toolbar'] ::slotted(*:not(:first-child)) {
+        margin-left: var(--lumo-space-s);
+      }
+
+      :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
+        margin-right: var(--lumo-space-s);
+      }
+
+      :host([theme~='no-border']) [part='toolbar'] {
+        border: 0;
+      }
+
+      [part='editor'] {
+        background: var(--lumo-base-color);
+        box-sizing: border-box;
+      }
+
+      :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
+        box-shadow: var(--lumo-box-shadow-m);
+      }
+
+      :host(:not([theme~='no-border']):not([editor-position=''])) [part='editor']:not([hidden]) {
+        border: 1px solid var(--lumo-contrast-20pct);
+      }
+
+      :host(:not([theme~='no-border'])[editor-position='bottom']) [part='editor']:not([hidden]) {
+        border-top: 0;
+      }
+
+      :host(:not([dir='rtl'])[editor-position='aside']) [part='editor']:not([hidden]) {
+        border-left: 0;
+      }
+
+      :host([dir='rtl']:not([theme~='no-border'])[editor-position='aside']) [part='editor']:not([hidden]) {
+        border-right: 0;
+      }
+
+      vaadin-grid-cell-content {
+        text-overflow: ellipsis;
+      }
+    `
+  ],
   { moduleId: 'lumo-crud' }
 );
 
-registerStyles(
-  'vaadin-dialog-layout',
-  css`
-    [part='header'] ::slotted(*) {
-      margin-top: var(--lumo-space-s);
-      margin-bottom: var(--lumo-space-s);
-    }
-
-    [part='scroller'] {
-      padding: var(--lumo-space-l);
-    }
-
-    [part='footer'] {
-      background-color: var(--lumo-contrast-5pct);
-      padding: var(--lumo-space-s) var(--lumo-space-s);
-    }
-
-    [part='footer'] ::slotted(*) {
-      margin-left: var(--lumo-space-s);
-      margin-right: var(--lumo-space-s);
-    }
-
-    [part='editor'] {
-      background: var(--lumo-base-color);
-      box-sizing: border-box;
-    }
-
-    :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
-      box-shadow: var(--lumo-box-shadow-m);
-    }
-
-    :host(:not([theme~='no-border']):not([editor-position=''])) [part='editor']:not([hidden]) {
-      border: 1px solid var(--lumo-contrast-20pct);
-    }
-
-    :host(:not([theme~='no-border'])[editor-position='bottom']) [part='editor']:not([hidden]) {
-      border-top: 0;
-    }
-
-    :host(:not([dir='rtl'])[editor-position='aside']) [part='editor']:not([hidden]) {
-      border-left: 0;
-    }
-
-    :host([dir='rtl']:not([theme~='no-border'])[editor-position='aside']) [part='editor']:not([hidden]) {
-      border-right: 0;
-    }
-  `,
-  { moduleId: 'lumo-dialog-layout' }
-);
+registerStyles('vaadin-crud-dialog-overlay', editorStyles, { moduleId: 'lumo-crud-dialog-overlay' });

package/theme/material/vaadin-crud-styles.js

@@ -1,12 +1,13 @@
 import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/vaadin-material-styles/color.js';
-import '../vaadin-dialog-layout-overlay-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-crud-edit',
   css`
     :host {
+      display: block;
+      min-width: auto;
       font-size: var(--material-button-font-size);
       line-height: 1;
       color: var(--material-text-color);
@@ -15,9 +16,14 @@ registerStyles(
       border-radius: 4px;
       width: 2em;
       height: 2em;
+      outline: none;
+      /* Reset button styles */
+      letter-spacing: normal;
+      -webkit-font-smoothing: auto;
+      -moz-font-smoothing: auto;
     }
 
-    :host::before {
+    [part='icon']::before {
       font-family: serif;
       font-size: var(--material-button-font-size);
       color: var(--material-primary-text-color);
@@ -27,102 +33,99 @@ registerStyles(
       line-height: 2em;
       text-align: center;
       position: absolute;
-    }
-
-    :host::after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-      background-color: currentColor;
-      opacity: 0;
-      transition: opacity 100ms;
-    }
-
-    :host(:hover)::after {
-      opacity: 0.05;
-    }
-
-    :host(:active)::after {
-      opacity: 0.12;
+      top: 0;
+      left: 0;
     }
   `,
   { moduleId: 'material-crud-grid-edit' }
 );
 
+/**
+ * Shared styles used for the CRUD editor content and buttons regardless of `editorPosition`.
+ * They are applied to both `vaadin-crud` and `vaadin-crud-dialog-overlay` components.
+ */
+const editorStyles = css`
+  [part='scroller'] {
+    padding: 16px;
+    background: var(--material-background-color);
+  }
+
+  [part='footer'] {
+    background-color: var(--material-secondary-background-color);
+    padding: 8px 4px;
+  }
+
+  [part='footer'] ::slotted(*) {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  :host(:not([dir='rtl'])) ::slotted([slot='delete-button']) {
+    margin-right: auto;
+  }
+
+  :host([dir='rtl']) ::slotted([slot='delete-button']) {
+    margin-left: auto;
+  }
+`;
+
 registerStyles(
   'vaadin-crud',
-  css`
-    :host {
-      font-family: var(--material-font-family);
-    }
-
-    [part='toolbar'] {
-      padding: 8px;
-      background-color: var(--material-secondary-background-color);
-    }
-
-    :host(:not([dir='rtl'])) [part='toolbar'] ::slotted(*:not(:first-child)) {
-      margin-left: 0.5em;
-    }
-
-    :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
-      margin-right: 0.5em;
-    }
+  [
+    editorStyles,
+    css`
+      :host {
+        font-family: var(--material-font-family);
+      }
 
-    vaadin-text-field[theme~='small'] {
-      height: 24px;
-      font-size: var(--material-small-font-size);
-      margin: 0;
-      padding: 0;
-    }
-  `,
-  { moduleId: 'material-crud' }
-);
+      [part='toolbar'] {
+        padding: 8px;
+        background-color: var(--material-secondary-background-color);
+      }
 
-registerStyles(
-  'vaadin-dialog-layout',
-  css`
-    :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
-      box-shadow: var(--material-shadow-elevation-12dp);
-    }
+      :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
+        box-shadow: var(--material-shadow-elevation-12dp);
+      }
 
-    [part='scroller'] {
-      padding: 16px;
-      background: var(--material-background-color);
-    }
+      :host(:not([dir='rtl'])) [part='toolbar'] ::slotted(*:not(:first-child)) {
+        margin-left: 0.5em;
+      }
 
-    [part='footer'] {
-      background-color: var(--material-secondary-background-color);
-      padding: 8px 4px;
-    }
+      :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
+        margin-right: 0.5em;
+      }
 
-    [part='footer'] ::slotted(*) {
-      margin-left: 4px;
-      margin-right: 4px;
-    }
-  `,
-  { moduleId: 'material-dialog-layout' }
+      vaadin-text-field[theme~='small'] {
+        height: 24px;
+        font-size: var(--material-small-font-size);
+        margin: 0;
+        padding: 0;
+      }
+    `
+  ],
+  { moduleId: 'material-crud' }
 );
 
 registerStyles(
-  'vaadin-dialog-overlay',
-  css`
-    @keyframes material-overlay-dummy-animation {
-      0% {
-        opacity: 1;
+  'vaadin-crud-dialog-overlay',
+  [
+    editorStyles,
+    css`
+      @keyframes material-overlay-dummy-animation {
+        0% {
+          opacity: 1;
+        }
+
+        100% {
+          opacity: 1;
+        }
       }
 
-      100% {
-        opacity: 1;
+      :host([opening]),
+      :host([closing]) {
+        animation: 0.25s material-overlay-dummy-animation;
       }
-    }
-
-    :host([opening]),
-    :host([closing]) {
-      animation: 0.25s material-overlay-dummy-animation;
-    }
-  `,
+    `
+  ],
   { moduleId: 'material-crud-dialog-overlay' }
 );

package/src/vaadin-dialog-layout.js

@@ -1,241 +0,0 @@
-/**
- * @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 '@vaadin/dialog/src/vaadin-dialog.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @private
- */
-class DialogLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
-  static get is() {
-    return 'vaadin-dialog-layout';
-  }
-
-  static get template() {
-    return html`
-      <style>
-        :host {
-          z-index: 1;
-        }
-
-        :host(:not([editor-position=''])[opened]:not([mobile])) {
-          flex: 1 0 100%;
-        }
-
-        :host([editor-position='bottom'][opened]:not([mobile])) {
-          max-height: var(--vaadin-crud-editor-max-height);
-        }
-
-        :host([editor-position='aside'][opened]:not([mobile])) {
-          min-width: 300px;
-          max-width: var(--vaadin-crud-editor-max-width);
-        }
-
-        [part='editor'] {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-        }
-
-        [part='editor'][hidden] {
-          display: none;
-        }
-
-        :host([editor-position='bottom']) [part='editor']:not([hidden]) {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-        }
-
-        [part='scroller'] {
-          display: flex;
-          flex-direction: column;
-          overflow: auto;
-          -webkit-overflow-scrolling: touch;
-          flex: auto;
-        }
-
-        [part='footer'] {
-          display: flex;
-          flex: none;
-          flex-direction: row-reverse;
-        }
-      </style>
-
-      <div id="editor" part="editor" hidden$="[[!_computeEditorOpened(opened, mobile, 'bottom','aside')]]">
-        <div part="scroller" id="scroller" role="group" aria-labelledby="header">
-          <div part="header" id="header">
-            <slot name="header"></slot>
-          </div>
-          <slot></slot>
-        </div>
-
-        <div part="footer" role="toolbar">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-
-      <vaadin-dialog
-        id="dialog"
-        opened="[[_computeEditorOpened(opened, mobile, '')]]"
-        aria-label="[[__ariaLabel]]"
-        no-close-on-outside-click="[[noCloseOnOutsideClick]]"
-        no-close-on-esc="[[noCloseOnEsc]]"
-        theme$="[[theme]] layout"
-      ></vaadin-dialog>
-
-      <template id="dialogTemplate"></template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * True if the overlay is currently displayed.
-       */
-      opened: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        reflectToAttribute: true,
-        observer: '_openedChanged'
-      },
-
-      editorPosition: {
-        type: String,
-        reflectToAttribute: true
-      },
-
-      /** Theme to use */
-      theme: String,
-
-      /** Disable closing when user clicks outside */
-      noCloseOnOutsideClick: Boolean,
-
-      /** Disable closing when user presses escape */
-      noCloseOnEsc: Boolean,
-
-      /** Reference to the edit form */
-      form: Object,
-
-      /** Reference to the edit save button */
-      saveButton: Object,
-
-      /** Reference to the edit delete button */
-      deleteButton: Object,
-
-      /** Reference to the edit cancel button */
-      cancelButton: Object,
-
-      mobile: {
-        type: Boolean,
-        observer: '__mobileChanged',
-        reflectToAttribute: true
-      },
-
-      __ariaLabel: String
-    };
-  }
-
-  ready() {
-    super.ready();
-    this._dialogOpenedChangedListener = this._dialogOpenedChangedListener.bind(this);
-    this.$.dialog.addEventListener('opened-changed', this._dialogOpenedChangedListener);
-    this.__header = this.querySelector('[slot=header]');
-    this.__footer = Array.from(this.querySelectorAll('[slot="footer"]'));
-  }
-
-  _dialogOpenedChangedListener() {
-    this.opened = this.$.dialog.opened;
-  }
-
-  _openedChanged(opened) {
-    if (opened) {
-      this._ensureChildren();
-    }
-
-    // TODO: A temporary hack as far as `vaadin-dialog` doesn't support the Polymer Template API anymore.
-    this.$.dialog.$.overlay.template = this.$.dialogTemplate;
-
-    // Make sure to reset scroll position
-    this.$.scroller.scrollTop = 0;
-  }
-
-  __mobileChanged() {
-    this._ensureChildren();
-  }
-
-  __moveChildNodes(target) {
-    // Teleport header node
-    target.appendChild(this.__header);
-
-    // For custom form, remove slot attribute
-    // so that it is properly moved to dialog.
-    if (this.form.hasAttribute('slot')) {
-      this.form.removeAttribute('slot');
-    }
-
-    // Teleport edit form
-    target.appendChild(this.form);
-
-    // This order is important so the spacing (coming from this.__footer) is correctly placed
-    if (this.saveButton) {
-      this.saveButton.setAttribute('slot', 'footer');
-      target.appendChild(this.saveButton);
-    }
-
-    if (this.cancelButton) {
-      this.cancelButton.setAttribute('slot', 'footer');
-      target.appendChild(this.cancelButton);
-    }
-
-    // Teleport footer nodes
-    this.__footer.forEach((node) => target.appendChild(node));
-
-    if (this.deleteButton) {
-      this.deleteButton.setAttribute('slot', 'footer');
-      target.appendChild(this.deleteButton);
-    }
-
-    // Wait to set label until slotted element has been moved.
-    setTimeout(() => {
-      this.__ariaLabel = this.__header.textContent.trim();
-    });
-  }
-
-  _ensureChildren() {
-    const content = this.$.dialog.$.overlay.$.content;
-    if (!this.form || !content.shadowRoot) {
-      return;
-    }
-
-    if (this.editorPosition === '' || this.mobile) {
-      // Move children from editor to dialog
-      Array.from(this.$.editor.childNodes).forEach((node) => content.shadowRoot.appendChild(node));
-      this.__moveChildNodes(content);
-    } else {
-      // Move children from dialog to editor
-      Array.from(content.shadowRoot.childNodes).forEach((c) => this.$.editor.appendChild(c));
-      this.__moveChildNodes(this);
-    }
-  }
-
-  _computeEditorOpened(opened, isMobile, ...editorPositions) {
-    if (isMobile && editorPositions.indexOf('') !== -1) {
-      return opened;
-    }
-    return editorPositions.indexOf(this.editorPosition) !== -1 && opened;
-  }
-}
-
-customElements.define(DialogLayout.is, DialogLayout);