@vaadin/vaadin-dialog - npm Package Compare versions

Comparing version 2.4.4 to 2.4.5

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-dialog",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "main": "vaadin-dialog.js",
@@ -27,2 +27,4 @@ "author": "Vaadin Ltd",
   "resolutions": {
+    "es-abstract": "1.17.6",
+    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
@@ -29,0 +31,0 @@ "samsam": "1.1.3",

src/vaadin-dialog-draggable-mixin.js

@@ -51,4 +51,10 @@ const TOUCH_DEVICE = (() => {
         const isContentPart = e.target === this.$.overlay.$.content;
-        const isDraggable = e.composedPath().some(node => {
-          return node.classList && node.classList.contains(this.__dragHandleClassName || 'draggable');
+
+        const isDraggable = e.composedPath().some((node, index) => {
+          if (node.classList) {
+            const isDraggableNode = node.classList.contains(this.__dragHandleClassName || 'draggable');
+            const isDraggableLeafOnly = node.classList.contains('draggable-leaf-only');
+            const isLeafNode = index === 0;
+            return (isDraggableLeafOnly && isLeafNode) || (isDraggableNode && (!isDraggableLeafOnly || isLeafNode));
+          }
         });
@@ -55,0 +61,0 @@

src/vaadin-dialog-resizable-mixin.js

@@ -145,2 +145,3 @@ const $_documentContainer = document.createElement('template');
         e.preventDefault();
+
         this._originalBounds = this._getOverlayBounds();
@@ -197,2 +198,3 @@ const event = this.__getMouseOrFirstTouchEvent(e);
         });
+
         this.$.overlay.notifyResize();
@@ -211,2 +213,3 @@ }
     _getResizeDimensions() {
+      const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop;
       const {width, height} = getComputedStyle(this.$.overlay.$.overlay);
@@ -217,4 +220,5 @@ const content = this.$.overlay.$.content;
       content.removeAttribute('style');
+      this.$.overlay.$.resizerContainer.scrollTop = scrollPosition;
       return {width, height, contentWidth, contentHeight};
     }
   };

src/vaadin-dialog.js

@@ -30,2 +30,6 @@ /**
       }
+
+      :host([has-bounds-set]) [part="overlay"] {
+        max-width: none;
+      }
     </style>
@@ -163,3 +167,3 @@ </template>
   static get version() {
-    return '2.4.4';
+    return '2.4.5';
   }
@@ -233,3 +237,8 @@
        * a child element can be marked as a draggable area by adding a
-       * "`draggable`" class to it.
+       * "`draggable`" class to it, this will by default make all of its children draggable also.
+       * If you want a child element to be draggable
+       * but still have its children non-draggable (by default), mark it with
+       * "`draggable-leaf-only`" class name.
+       *
+       * @type {boolean}
        */
@@ -359,3 +368,4 @@ draggable: {
       overlay.style.position = 'absolute';
-      overlay.style.maxWidth = 'none';
+      this.$.overlay.setAttribute('has-bounds-set', '');
+      this.__forceSafariReflow();
     }
@@ -396,2 +406,17 @@
   }
+
+  /**
+   * Safari 13 renders overflowing elements incorrectly.
+   * This forces it to recalculate height.
+   * @private
+   */
+  __forceSafariReflow() {
+    const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop;
+    const overlay = this.$.overlay.$.overlay;
+    overlay.style.display = 'block';
+    window.requestAnimationFrame(() => {
+      overlay.style.display = '';
+      this.$.overlay.$.resizerContainer.scrollTop = scrollPosition;
+    });
+  }
 }
@@ -398,0 +423,0 @@

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

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

42220

increased by3.38%

Lines of code

726

increased by4.31%

No dependency changes