@vaadin/vaadin-confirm-dialog - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-confirm-dialog",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "vaadin-confirm-dialog.js",
@@ -21,2 +21,7 @@ "author": "Vaadin Ltd",
   },
+  "files": [
+    "vaadin-*.js",
+    "src",
+    "theme"
+  ],
   "resolutions": {
@@ -40,9 +45,9 @@ "inherits": "2.0.3",
   "devDependencies": {
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-demo-helpers": "^3.0.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^2.0.1",
+    "@vaadin/vaadin-demo-helpers": "^3.0.0",
     "@vaadin/vaadin-icons": "^4.2.0"
   }
 }

README.md

@@ -14,6 +14,6 @@ [![Build Status](https://travis-ci.org/vaadin/vaadin-confirm-dialog.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-confirm-dialog)
 ```html
-  <vaadin-confirm-dialog header="Unsaved changes" confirm-text="Save" on-confirm="save"
-    cancel on-cancel="cancel" reject reject-text="Discard" on-reject="discard">
-    Do you want to save or discard your changes before navigating away?
-  </vaadin-confirm-dialog>
+<vaadin-confirm-dialog header="Unsaved changes" confirm-text="Save" on-confirm="save"
+  cancel on-cancel="cancel" reject reject-text="Discard" on-reject="discard">
+  Do you want to save or discard your changes before navigating away?
+</vaadin-confirm-dialog>
 ```
@@ -110,3 +110,3 @@
 
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `gulp lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
+We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
 
@@ -113,0 +113,0 @@

src/vaadin-confirm-dialog.js

@@ -64,38 +64,54 @@ /**
         display: none;
+        --_vaadin-confirm-dialog-content-width: auto;
+        --_vaadin-confirm-dialog-content-height: auto;
       }
+
+      [part="content"] {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: var(--_vaadin-confirm-dialog-content-width);
+        height: var(--_vaadin-confirm-dialog-content-height);
+      }
+
+      [part="message"] {
+        flex: 1 0 auto;
+      }
     </style>
     <vaadin-dialog id="dialog" opened="{{opened}}" aria-label="[[_getAriaLabel(header)]]" no-close-on-outside-click="" no-close-on-esc="">
       <template>
-        <div part="header">
-          <slot name="header">
-            <h3 class="header">[[header]]</h3>
-          </slot>
-        </div>
-
-        <div part="message" id="message">
-          <slot></slot>
-          [[message]]
-        </div>
-
-        <div part="footer">
-          <div class="cancel-button">
-            <slot name="cancel-button">
-              <vaadin-button id="cancel" theme\$="[[cancelTheme]]" on-click="_cancel" hidden\$="[[!cancel]]" aria-describedby="message">
-                [[cancelText]]
-              </vaadin-button>
+        <div part="content">
+          <div part="header">
+            <slot name="header">
+              <h3 class="header">[[header]]</h3>
             </slot>
           </div>
-          <div class="reject-button">
-            <slot name="reject-button">
-              <vaadin-button id="reject" theme\$="[[rejectTheme]]" on-click="_reject" hidden\$="[[!reject]]" aria-describedby="message">
-                [[rejectText]]
-              </vaadin-button>
-            </slot>
+
+          <div part="message" id="message">
+            <slot></slot>
+            [[message]]
           </div>
-          <div class="confirm-button">
-            <slot name="confirm-button">
-              <vaadin-button id="confirm" theme\$="[[confirmTheme]]" on-click="_confirm" aria-describedby="message">
-                [[confirmText]]
-              </vaadin-button>
-            </slot>
+
+          <div part="footer">
+            <div class="cancel-button">
+              <slot name="cancel-button">
+                <vaadin-button id="cancel" theme\$="[[cancelTheme]]" on-click="_cancel" hidden\$="[[!cancel]]" aria-describedby="message">
+                  [[cancelText]]
+                </vaadin-button>
+              </slot>
+            </div>
+            <div class="reject-button">
+              <slot name="reject-button">
+                <vaadin-button id="reject" theme\$="[[rejectTheme]]" on-click="_reject" hidden\$="[[!reject]]" aria-describedby="message">
+                  [[rejectText]]
+                </vaadin-button>
+              </slot>
+            </div>
+            <div class="confirm-button">
+              <slot name="confirm-button">
+                <vaadin-button id="confirm" theme\$="[[confirmTheme]]" on-click="_confirm" aria-describedby="message">
+                  [[confirmText]]
+                </vaadin-button>
+              </slot>
+            </div>
           </div>
@@ -112,3 +128,3 @@ </div>
   static get version() {
-    return '1.1.1';
+    return '1.1.2';
   }
@@ -209,2 +225,7 @@
     this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
+    if (this._dimensions) {
+      Object.keys(this._dimensions).forEach(name => {
+        this._setDimension(name, this._dimensions[name]);
+      });
+    }
   }
@@ -268,2 +289,33 @@
   }
+
+  _setWidth(width) {
+    this._setDimensionIfAttached('width', width);
+  }
+
+  _setHeight(height) {
+    this._setDimensionIfAttached('height', height);
+  }
+
+  _setDimensionIfAttached(name, value) {
+    if (this.$ && this.$.dialog) {
+      this._setDimension(name, value);
+    } else {
+      this._dimensions = this._dimensions || {};
+      this._dimensions[name] = value;
+    }
+  }
+
+  _setDimension(name, value) {
+    this._propsToUpdate = this._propsToUpdate || {};
+
+    this._propsToUpdate[`--_vaadin-confirm-dialog-content-${name}`] = value;
+
+    // To prevent multiple calls to update CSS props
+    beforeNextRender(this, () => {
+      if (this._propsToUpdate) {
+        window.ShadyCSS.styleSubtree(this.$.dialog.$.overlay, this._propsToUpdate);
+        this._propsToUpdate = null;
+      }
+    });
+  }
 }
@@ -270,0 +322,0 @@

theme/lumo/vaadin-confirm-dialog-styles.js

@@ -10,4 +10,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     <style>
-      [part="header"],
-      .header {
+      [part="header"] {
         margin-top: var(--lumo-space-s);
@@ -17,2 +16,6 @@ margin-bottom: var(--lumo-space-m);
 
+      .header {
+        margin: 0;
+      }
+
       [part="message"] {
@@ -19,0 +22,0 @@ width: 25em;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

33503

decreased by-37.57%

Number of package files

9

decreased by-62.5%

Lines of code

434

decreased by-31.55%

No dependency changes