@vaadin/dialog 24.9.11 → 24.10.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "24.9.11",
+  "version": "24.10.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -39,18 +39,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.9.11",
-    "@vaadin/lit-renderer": "~24.9.11",
-    "@vaadin/overlay": "~24.9.11",
-    "@vaadin/vaadin-lumo-styles": "~24.9.11",
-    "@vaadin/vaadin-material-styles": "~24.9.11",
-    "@vaadin/vaadin-themable-mixin": "~24.9.11",
+    "@vaadin/component-base": "24.10.0-alpha2",
+    "@vaadin/lit-renderer": "24.10.0-alpha2",
+    "@vaadin/overlay": "24.10.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.10.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.10.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.10.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "~24.9.11",
-    "@vaadin/chai-plugins": "~24.9.11",
-    "@vaadin/test-runner-commands": "~24.9.11",
+    "@vaadin/a11y-base": "24.10.0-alpha2",
+    "@vaadin/chai-plugins": "24.10.0-alpha2",
+    "@vaadin/test-runner-commands": "24.10.0-alpha2",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "235991ba683038cc6556b3551c7763d8b538120f"
+  "gitHead": "43abf4293381464fe47f5339b0ee64caf8867cfa"
 }

package/src/vaadin-dialog-base-mixin.d.ts

@@ -70,4 +70,14 @@ export declare class DialogBaseMixinClass {
    * If a unitless number is provided, pixels are assumed.
    */
   height: string;
+
+  /**
+   * Set to true to prevent the dialog from moving outside the viewport bounds.
+   * When enabled, all four edges of the dialog will remain visible, for example
+   * when dragging the dialog or when the viewport is resized. Note that the
+   * dialog will also adjust any programmatically configured size and position
+   * so that it stays within the viewport.
+   * @attr {boolean} keep-in-viewport
+   */
+  keepInViewport: boolean;
 }

package/src/vaadin-dialog-base-mixin.js

@@ -100,6 +100,21 @@ export const DialogBaseMixin = (superClass) =>
           type: String,
           value: 'dialog',
         },
+
+        /**
+         * Set to true to prevent the dialog from moving outside the viewport bounds.
+         * When enabled, all four edges of the dialog will remain visible, for example
+         * when dragging the dialog or when the viewport is resized. Note that the
+         * dialog will also adjust any programmatically configured size and position
+         * so that it stays within the viewport.
+         * @attr {boolean} keep-in-viewport
+         * @type {boolean}
+         */
+        keepInViewport: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
       };
     }
 

package/src/vaadin-dialog-draggable-mixin.js

@@ -106,8 +106,20 @@ export const DialogDraggableMixin = (superClass) =>
     _drag(e) {
       const event = getMouseOrFirstTouchEvent(e);
       if (eventInWindow(event)) {
-        const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
-        const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
+        let top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
+        let left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
+
+        if (this.keepInViewport) {
+          // Constrain the dialog position so that it stays within the overlay host bounds,
+          // respecting the `--vaadin-overlay-viewport-inset` (offset from the viewport edges).
+          const { width, height } = this._originalBounds;
+          const overlayHostBounds = this.$.overlay.getBoundingClientRect();
+          const maxLeft = overlayHostBounds.right - overlayHostBounds.left - width;
+          const maxTop = overlayHostBounds.bottom - overlayHostBounds.top - height;
+          left = Math.max(0, Math.min(left, maxLeft));
+          top = Math.max(0, Math.min(top, maxTop));
+        }
+
         this.top = top;
         this.left = left;
       }

package/src/vaadin-dialog-overlay-mixin.d.ts

@@ -34,6 +34,11 @@ export declare class DialogOverlayMixinClass {
    */
   headerTitle: string;
 
+  /**
+   * Whether to keep the overlay within the viewport.
+   */
+  keepInViewport: boolean;
+
   /**
    * Custom function for rendering the dialog header.
    */

package/src/vaadin-dialog-overlay-mixin.js

@@ -33,6 +33,14 @@ export const DialogOverlayMixin = (superClass) =>
         footerRenderer: {
           type: Object,
         },
+
+        /**
+         * Whether to keep the overlay within the viewport.
+         */
+        keepInViewport: {
+          type: Boolean,
+          reflectToAttribute: true,
+        },
       };
     }
 
@@ -40,6 +48,7 @@ export const DialogOverlayMixin = (superClass) =>
       return [
         '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
         '_headerTitleChanged(headerTitle, opened)',
+        '__keepInViewportChanged(keepInViewport, opened)',
       ];
     }
 
@@ -50,6 +59,7 @@ export const DialogOverlayMixin = (superClass) =>
       // Update overflow attribute on resize
       this.__resizeObserver = new ResizeObserver(() => {
         this.__updateOverflow();
+        this.__adjustPosition();
       });
       this.__resizeObserver.observe(this.$.resizerContainer);
 
@@ -57,6 +67,8 @@ export const DialogOverlayMixin = (superClass) =>
       this.$.content.addEventListener('scroll', () => {
         this.__updateOverflow();
       });
+
+      this.__handleWindowResize = this.__handleWindowResize.bind(this);
     }
 
     /** @private */
@@ -214,6 +226,8 @@ export const DialogOverlayMixin = (superClass) =>
       });
 
       Object.assign(overlay.style, parsedBounds);
+
+      this.__adjustPosition();
     }
 
     /**
@@ -255,4 +269,54 @@ export const DialogOverlayMixin = (superClass) =>
         this.removeAttribute('overflow');
       }
     }
+
+    /** @private */
+    __keepInViewportChanged(keepInViewport, opened) {
+      if (opened && keepInViewport) {
+        window.addEventListener('resize', this.__handleWindowResize);
+      } else {
+        window.removeEventListener('resize', this.__handleWindowResize);
+      }
+    }
+
+    /** @private */
+    __handleWindowResize() {
+      this.__adjustPosition();
+    }
+
+    /**
+     * Adjusts the position of the overlay to keep it within the viewport if `keepInViewport` is true.
+     * @private
+     */
+    __adjustPosition() {
+      if (!this.opened || !this.keepInViewport) {
+        return;
+      }
+
+      // Centered dialogs do not use absolute positioning and automatically adjust their position / size to fit the viewport
+      const style = getComputedStyle(this.$.overlay);
+      if (style.position !== 'absolute') {
+        return;
+      }
+
+      const overlayHostBounds = this.getBoundingClientRect();
+      const bounds = this.getBounds();
+      // Prefer dimensions from getComputedStyle, as bounding rect is affected
+      // by scale transform applied by opening animation in Lumo
+      const width = parseFloat(style.width) || bounds.width;
+      const height = parseFloat(style.height) || bounds.height;
+
+      const maxLeft = overlayHostBounds.right - overlayHostBounds.left - width;
+      const maxTop = overlayHostBounds.bottom - overlayHostBounds.top - height;
+
+      if (bounds.left > maxLeft || bounds.top > maxTop) {
+        const left = Math.max(0, Math.min(bounds.left, maxLeft));
+        const top = Math.max(0, Math.min(bounds.top, maxTop));
+
+        Object.assign(this.$.overlay.style, {
+          left: `${left}px`,
+          top: `${top}px`,
+        });
+      }
+    }
   };

package/src/vaadin-dialog-styles.js

@@ -74,7 +74,7 @@ export const dialogOverlay = css`
     min-width: 12em; /* matches the default <vaadin-text-field> width */
   }
 
-  :host([has-bounds-set]) [part='overlay'] {
+  :host([has-bounds-set]:not([keep-in-viewport])) [part='overlay'] {
     max-width: none;
   }
 

package/src/vaadin-dialog.js

@@ -115,6 +115,7 @@ class Dialog extends DialogDraggableMixin(
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"
         draggable$="[[draggable]]"
+        keep-in-viewport="[[keepInViewport]]"
         restore-focus-on-close
         focus-trap
       ></vaadin-dialog-overlay>

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "24.9.11",
+  "version": "24.10.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-dialog",
-          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.9.11/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.10.0-alpha2/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "opened",
@@ -101,6 +101,15 @@
                 ]
               }
             },
+            {
+              "name": "keep-in-viewport",
+              "description": "Set to true to prevent the dialog from moving outside the viewport bounds.\nWhen enabled, all four edges of the dialog will remain visible, for example\nwhen dragging the dialog or when the viewport is resized. Note that the\ndialog will also adjust any programmatically configured size and position\nso that it stays within the viewport.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "draggable",
               "description": "Set to true to enable repositioning the dialog by clicking and dragging.\n\nBy default, only the overlay area can be used to drag the element. But,\na child element can be marked as a draggable area by adding a\n\"`draggable`\" class to it, this will by default make all of its children draggable also.\nIf you want a child element to be draggable\nbut still have its children non-draggable (by default), mark it with\n\"`draggable-leaf-only`\" class name.",
@@ -257,6 +266,15 @@
                   ]
                 }
               },
+              {
+                "name": "keepInViewport",
+                "description": "Set to true to prevent the dialog from moving outside the viewport bounds.\nWhen enabled, all four edges of the dialog will remain visible, for example\nwhen dragging the dialog or when the viewport is resized. Note that the\ndialog will also adjust any programmatically configured size and position\nso that it stays within the viewport.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
               {
                 "name": "draggable",
                 "description": "Set to true to enable repositioning the dialog by clicking and dragging.\n\nBy default, only the overlay area can be used to drag the element. But,\na child element can be marked as a draggable area by adding a\n\"`draggable`\" class to it, this will by default make all of its children draggable also.\nIf you want a child element to be draggable\nbut still have its children non-draggable (by default), mark it with\n\"`draggable-leaf-only`\" class name.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "24.9.11",
+  "version": "24.10.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-dialog",
-          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.9.11/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.10.0-alpha2/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -47,6 +47,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?keepInViewport",
+              "description": "Set to true to prevent the dialog from moving outside the viewport bounds.\nWhen enabled, all four edges of the dialog will remain visible, for example\nwhen dragging the dialog or when the viewport is resized. Note that the\ndialog will also adjust any programmatically configured size and position\nso that it stays within the viewport.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?draggable",
               "description": "Set to true to enable repositioning the dialog by clicking and dragging.\n\nBy default, only the overlay area can be used to drag the element. But,\na child element can be marked as a draggable area by adding a\n\"`draggable`\" class to it, this will by default make all of its children draggable also.\nIf you want a child element to be draggable\nbut still have its children non-draggable (by default), mark it with\n\"`draggable-leaf-only`\" class name.",