@vaadin/dialog - npm Package Compare versions

Comparing version 23.0.4 to 23.1.0-alpha1

package.json

 {
   "name": "@vaadin/dialog",
-  "version": "23.0.4",
+  "version": "23.1.0-alpha1",
   "publishConfig": {
@@ -38,16 +38,16 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.0.4",
-    "@vaadin/vaadin-lumo-styles": "^23.0.4",
-    "@vaadin/vaadin-material-styles": "^23.0.4",
-    "@vaadin/vaadin-overlay": "^23.0.4",
-    "@vaadin/vaadin-themable-mixin": "^23.0.4"
+    "@vaadin/component-base": "23.1.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha1",
+    "@vaadin/vaadin-overlay": "23.1.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.0.4",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-area": "^23.0.4",
+    "@vaadin/text-area": "23.1.0-alpha1",
     "sinon": "^9.2.1"
   },
-  "gitHead": "d8db2046661c42fb5aac09ed683b500bf4613b26"
+  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
 }

src/vaadin-dialog.d.ts

@@ -97,2 +97,19 @@ /**
  *
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `header`         | Element wrapping title and header content
+ * `header-content` | Element wrapping the header content slot
+ * `title`          | Element wrapping the title slot
+ * `footer`         | Element wrapping the footer slot
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute        | Description
+ * -----------------|--------------------------------------------
+ * `has-title`      | Set when the element has a title
+ * `has-header`     | Set when the element has header renderer
+ * `has-footer`     | Set when the element has footer renderer
+ *
  * Note: the `theme` attribute value set on `<vaadin-dialog>` is
@@ -141,2 +158,40 @@ * propagated to the internal `<vaadin-dialog-overlay>` component.
   /**
+   * String used for rendering a dialog title.
+   *
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
+   *
+   * When `headerTitle` is set, the attribute `has-title` is added to the overlay element.
+   * @attr {string} header-title
+   */
+  headerTitle: string | null | undefined;
+
+  /**
+   * Custom function for rendering the dialog header.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
+   *
+   * When `headerRenderer` is set, the attribute `has-header` is added to the overlay element.
+   */
+  headerRenderer: DialogRenderer | null | undefined;
+
+  /**
+   * Custom function for rendering the dialog footer.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * When `footerRenderer` is set, the attribute `has-footer` is added to the overlay element.
+   */
+  footerRenderer: DialogRenderer | null | undefined;
+
+  /**
    * Set to true to remove backdrop and allow click events on background elements.
@@ -147,4 +202,4 @@ */
   /**
-   * Requests an update for the content of the dialog.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   * While performing the update, it invokes the renderer passed in the `renderer` property,
+   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
    *
@@ -151,0 +206,0 @@ * It is not guaranteed that the update happens immediately (synchronously) after it is requested.

src/vaadin-dialog.js

@@ -18,2 +18,46 @@ /**
   css`
+    /* prefixing with the element tag to avoid styling confirm-dialog header part */
+    header[part='header'] {
+      display: flex;
+    }
+
+    [part='header-content'] {
+      flex: 1;
+    }
+
+    /* prefixing with the element tag to avoid styling confirm-dialog footer part */
+    footer[part='footer'] {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    :host(:not([has-title]):not([has-header])) header[part='header'],
+    :host(:not([has-title])) [part='title'] {
+      display: none;
+    }
+
+    :host(:not([has-footer])) footer[part='footer'] {
+      display: none;
+    }
+
+    :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
+      min-height: 100%;
+      height: auto;
+    }
+
+    @media (min-height: 320px) {
+      :host(:is([has-title], [has-header], [has-footer])) .resizer-container {
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
+        flex: 1;
+        overflow: auto;
+        min-height: auto;
+        height: 100%;
+      }
+    }
+
     /*
@@ -57,2 +101,30 @@ NOTE(platosha): Make some min-width to prevent collapsing of the content
       overlayPart.appendChild(resizerContainer);
+
+      const headerContainer = document.createElement('header');
+      headerContainer.setAttribute('part', 'header');
+      resizerContainer.insertBefore(headerContainer, contentPart);
+
+      const titleContainer = document.createElement('div');
+      titleContainer.setAttribute('part', 'title');
+      headerContainer.appendChild(titleContainer);
+
+      const titleSlot = document.createElement('slot');
+      titleSlot.setAttribute('name', 'title');
+      titleContainer.appendChild(titleSlot);
+
+      const headerContentContainer = document.createElement('div');
+      headerContentContainer.setAttribute('part', 'header-content');
+      headerContainer.appendChild(headerContentContainer);
+
+      const headerSlot = document.createElement('slot');
+      headerSlot.setAttribute('name', 'header-content');
+      headerContentContainer.appendChild(headerSlot);
+
+      const footerContainer = document.createElement('footer');
+      footerContainer.setAttribute('part', 'footer');
+      resizerContainer.appendChild(footerContainer);
+
+      const footerSlot = document.createElement('slot');
+      footerSlot.setAttribute('name', 'footer');
+      footerContainer.appendChild(footerSlot);
     }
@@ -62,2 +134,9 @@ return memoizedTemplate;
 
+  static get observers() {
+    return [
+      '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
+      '_headerTitleChanged(headerTitle, opened)'
+    ];
+  }
+
   static get properties() {
@@ -67,6 +146,141 @@ return {
 
-      withBackdrop: Boolean
+      withBackdrop: Boolean,
+
+      headerTitle: String,
+
+      headerRenderer: Function,
+
+      footerRenderer: Function
     };
   }
 
+  ready() {
+    super.ready();
+
+    const uniqueId = (DialogOverlay._uniqueId = 1 + DialogOverlay._uniqueId || 0);
+    this._titleId = `${this.constructor.is}-title-${uniqueId}`;
+  }
+
+  /** @private */
+  __createContainer(slot) {
+    const container = document.createElement('div');
+    container.setAttribute('slot', slot);
+    return container;
+  }
+
+  /** @private */
+  __clearContainer(container) {
+    container.innerHTML = '';
+    // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
+    // When clearing the rendered content, this part needs to be manually disposed of.
+    // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
+    delete container._$litPart$;
+  }
+
+  /** @private */
+  __initContainer(container, slot) {
+    if (container) {
+      // Reset existing container in case if a new renderer is set.
+      this.__clearContainer(container);
+    } else {
+      // Create the container, but wait to append it until requestContentUpdate is called.
+      container = this.__createContainer(slot);
+    }
+    return container;
+  }
+
+  /** @private */
+  _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
+    const headerRendererChanged = this.__oldHeaderRenderer !== headerRenderer;
+    this.__oldHeaderRenderer = headerRenderer;
+
+    const footerRendererChanged = this.__oldFooterRenderer !== footerRenderer;
+    this.__oldFooterRenderer = footerRenderer;
+
+    const openedChanged = this._oldOpenedFooterHeader !== opened;
+    this._oldOpenedFooterHeader = opened;
+
+    if (headerRendererChanged) {
+      if (headerRenderer) {
+        this.headerContainer = this.__initContainer(this.headerContainer, 'header-content');
+      } else if (this.headerContainer) {
+        this.headerContainer.remove();
+        this.headerContainer = null;
+      }
+    }
+
+    if (footerRendererChanged) {
+      if (footerRenderer) {
+        this.footerContainer = this.__initContainer(this.footerContainer, 'footer');
+      } else if (this.footerContainer) {
+        this.footerContainer.remove();
+        this.footerContainer = null;
+      }
+    }
+
+    if (
+      (headerRenderer && (headerRendererChanged || openedChanged)) ||
+      (footerRenderer && (footerRendererChanged || openedChanged))
+    ) {
+      if (opened) {
+        this.requestContentUpdate();
+      }
+    }
+
+    this.toggleAttribute('has-header', !!headerRenderer);
+    this.toggleAttribute('has-footer', !!footerRenderer);
+  }
+
+  /** @private */
+  _headerTitleChanged(headerTitle, opened) {
+    if (opened && (headerTitle || this._oldHeaderTitle)) {
+      this.requestContentUpdate();
+    }
+    this._oldHeaderTitle = headerTitle;
+    this.toggleAttribute('has-title', !!headerTitle);
+  }
+
+  /** @private */
+  _headerTitleRenderer() {
+    if (this.headerTitle) {
+      if (!this.headerTitleElement) {
+        this.headerTitleElement = document.createElement('span');
+        this.headerTitleElement.id = this._titleId;
+        this.headerTitleElement.setAttribute('slot', 'title');
+        this.headerTitleElement.classList.add('draggable');
+
+        this.setAttribute('aria-labelledby', this._titleId);
+      }
+      this.appendChild(this.headerTitleElement);
+      this.headerTitleElement.textContent = this.headerTitle;
+    } else if (this.headerTitleElement) {
+      this.headerTitleElement.remove();
+      this.headerTitleElement = null;
+      this.removeAttribute('aria-labelledby');
+    }
+  }
+
+  requestContentUpdate() {
+    super.requestContentUpdate();
+
+    // If a new renderer has been set, make sure to reattach the header/footer roots
+    if (this.headerContainer && !this.headerContainer.parentElement) {
+      this.appendChild(this.headerContainer);
+    }
+
+    if (this.footerContainer && !this.footerContainer.parentElement) {
+      this.appendChild(this.footerContainer);
+    }
+
+    if (this.headerRenderer) {
+      this.headerRenderer.call(this.owner, this.headerContainer, this.owner);
+    }
+
+    if (this.footerRenderer) {
+      this.footerRenderer.call(this.owner, this.footerContainer, this.owner);
+    }
+
+    this._headerTitleRenderer();
+  }
+
   /**
@@ -163,2 +377,19 @@ * Updates the coordinates of the overlay.
  *
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `header`         | Element wrapping title and header content
+ * `header-content` | Element wrapping the header content slot
+ * `title`          | Element wrapping the title slot
+ * `footer`         | Element wrapping the footer slot
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute        | Description
+ * -----------------|--------------------------------------------
+ * `has-title`      | Set when the element has a title
+ * `has-header`     | Set when the element has header renderer
+ * `has-footer`     | Set when the element has footer renderer
+ *
  * Note: the `theme` attribute value set on `<vaadin-dialog>` is
@@ -183,3 +414,3 @@ * propagated to the internal `<vaadin-dialog-overlay>` component.
         :host {
-          display: none;
+          display: none !important;
         }
@@ -190,6 +421,7 @@ </style>
         id="overlay"
+        header-title="[[headerTitle]]"
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"
         on-touchstart="_bringOverlayToFront"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         modeless="[[modeless]]"
@@ -260,2 +492,42 @@ with-backdrop="[[!modeless]]"
       /**
+       * String used for rendering a dialog title.
+       *
+       * If both `headerTitle` and `headerRenderer` are defined, the title
+       * and the elements created by the renderer will be placed next to
+       * each other, with the title coming first.
+       *
+       * When `headerTitle` is set, the attribute `has-title` is added to the overlay element.
+       * @attr {string} header-title
+       */
+      headerTitle: String,
+
+      /**
+       * Custom function for rendering the dialog header.
+       * Receives two arguments:
+       *
+       * - `root` The root container DOM element. Append your content to it.
+       * - `dialog` The reference to the `<vaadin-dialog>` element.
+       *
+       * If both `headerTitle` and `headerRenderer` are defined, the title
+       * and the elements created by the renderer will be placed next to
+       * each other, with the title coming first.
+       *
+       * When `headerRenderer` is set, the attribute `has-header` is added to the overlay element.
+       * @type {DialogRenderer | undefined}
+       */
+      headerRenderer: Function,
+
+      /**
+       * Custom function for rendering the dialog footer.
+       * Receives two arguments:
+       *
+       * - `root` The root container DOM element. Append your content to it.
+       * - `dialog` The reference to the `<vaadin-dialog>` element.
+       *
+       * When `footerRenderer` is set, the attribute `has-footer` is added to the overlay element.
+       * @type {DialogRenderer | undefined}
+       */
+      footerRenderer: Function,
+
+      /**
        * Set to true to remove backdrop and allow click events on background elements.
@@ -272,3 +544,7 @@ * @type {boolean}
   static get observers() {
-    return ['_openedChanged(opened)', '_ariaLabelChanged(ariaLabel)', '_rendererChanged(renderer)'];
+    return [
+      '_openedChanged(opened)',
+      '_ariaLabelChanged(ariaLabel)',
+      '_rendererChanged(renderer, headerRenderer, footerRenderer)'
+    ];
   }
@@ -288,3 +564,4 @@
    * Requests an update for the content of the dialog.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   * While performing the update, it invokes the renderer passed in the `renderer` property,
+   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
    *
@@ -298,4 +575,4 @@ * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
   /** @private */
-  _rendererChanged(renderer) {
-    this.$.overlay.setProperties({ owner: this, renderer });
+  _rendererChanged(renderer, headerRenderer, footerRenderer) {
+    this.$.overlay.setProperties({ owner: this, renderer, headerRenderer, footerRenderer });
   }
@@ -302,0 +579,0 @@

theme/lumo/vaadin-dialog-styles.js

@@ -30,2 +30,17 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 
+  [part='header'] {
+    gap: var(--lumo-space-s);
+  }
+
+  :host([has-header]) [part='header'],
+  :host([has-title]) [part='header'] {
+    padding: var(--lumo-space-m) var(--lumo-space-l);
+    border-bottom: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host([has-footer]) [part='footer'] {
+    padding: var(--lumo-space-s) var(--lumo-space-m);
+    border-top: 1px solid var(--lumo-contrast-10pct);
+  }
+
   /* No padding */
@@ -36,2 +51,11 @@ :host([theme~='no-padding']) [part='content'] {
 
+  :host([theme~='no-padding'][has-header]) [part='header'],
+  :host([theme~='no-padding'][has-title]) [part='header'] {
+    padding: 0;
+  }
+
+  :host([theme~='no-padding'][has-footer]) [part='footer'] {
+    padding: 0;
+  }
+
   /* Animations */
@@ -38,0 +62,0 @@

theme/material/vaadin-dialog-styles.js

 import '@vaadin/vaadin-material-styles/shadow.js';
+import '@vaadin/vaadin-material-styles/color.js';
 import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
@@ -18,2 +19,15 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+  :host([has-header]) [part='header'],
+  :host([has-title]) [part='header'] {
+    padding: 9px 24px;
+    font-weight: 500;
+    gap: 8px;
+    border-bottom: 1px solid var(--material-divider-color);
+  }
+
+  :host([has-footer]) [part='footer'] {
+    padding: 8px;
+    border-top: 1px solid var(--material-divider-color);
+  }
+
   /* No padding */
@@ -20,0 +34,0 @@ :host([theme~='no-padding']) [part='content'] {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59236

increased by26.89%

Lines of code

1277

increased by33.02%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/component-base@23.1.0-alpha1(transitive)

• + Added@vaadin/icon@23.1.0-alpha1(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.1.0-alpha1(transitive)

• + Added@vaadin/vaadin-material-styles@23.1.0-alpha1(transitive)

• + Added@vaadin/vaadin-overlay@23.1.0-alpha1(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.1.0-alpha1(transitive)

• - Removed@vaadin/component-base@23.5.11(transitive)

• - Removed@vaadin/icon@23.5.11(transitive)

• - Removed@vaadin/overlay@23.5.11(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.5.11(transitive)

• - Removed@vaadin/vaadin-material-styles@23.5.11(transitive)

• - Removed@vaadin/vaadin-overlay@23.5.11(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.5.11(transitive)

• Updated@vaadin/component-base@23.1.0-alpha1

• Updated@vaadin/vaadin-lumo-styles@23.1.0-alpha1

• Updated@vaadin/vaadin-material-styles@23.1.0-alpha1

• Updated@vaadin/vaadin-overlay@23.1.0-alpha1

• Updated@vaadin/vaadin-themable-mixin@23.1.0-alpha1