@vaadin/vaadin-dialog - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-dialog",
-  "version": "2.2.1",
+  "version": "2.3.0-alpha1",
   "main": "vaadin-dialog.js",
@@ -34,3 +34,4 @@ "author": "Vaadin Ltd",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-overlay": "^3.2.0",
+    "@polymer/iron-resizable-behavior": "^3.0.0",
+    "@vaadin/vaadin-overlay": "^3.3.0",
     "@vaadin/vaadin-themable-mixin": "^1.3.2",
@@ -42,9 +43,9 @@ "@vaadin/vaadin-lumo-styles": "^1.1.0",
   "devDependencies": {
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-test-helpers": "^3.0.0",
     "@vaadin/vaadin-button": "^2.1.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^2.2.0"
+    "@vaadin/vaadin-demo-helpers": "^3.0.0"
   }
 }

README.md

@@ -33,6 +33,10 @@ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-dialog)](https://www.npmjs.com/package/@vaadin/vaadin-dialog)
 <vaadin-dialog opened>
-  <template>
-    Sample dialog
-  </template>
 </vaadin-dialog>
+
+<script>
+  const dialog = document.querySelector('vaadin-dialog');
+  dialog.renderer = function(root, dialog) {
+    root.textContent = 'Sample dialog';
+  };
+</script>
 ```
@@ -99,16 +103,16 @@
 
-## Running demos and tests in browser
+## Running demos and tests in a browser
 
 1. Fork the `vaadin-dialog` repository and clone it locally.
 
-1. Make sure you have [npm](https://www.npmjs.com/) installed.
+1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
 
 1. When in the `vaadin-dialog` directory, run `npm install` and then `bower install` to install dependencies.
 
-1. Run `polymer serve --open`, browser will automatically open the component API documentation.
+1. Run `npm start`, browser will automatically open the component API documentation.
 
 1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
 
-  - http://127.0.0.1:8080/components/vaadin-dialog/demo
-  - http://127.0.0.1:8080/components/vaadin-dialog/test
+  - http://127.0.0.1:3000/components/vaadin-dialog/demo
+  - http://127.0.0.1:3000/components/vaadin-dialog/test
 
@@ -123,3 +127,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.
 
@@ -126,0 +130,0 @@

src/vaadin-dialog.js

@@ -13,2 +13,6 @@ /**
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
+import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
+import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -32,2 +36,3 @@ const $_documentContainer = document.createElement('template');
 document.head.appendChild($_documentContainer.content);
+let memoizedTemplate;
 
@@ -45,6 +50,28 @@ /**
  */
-class DialogOverlayElement extends OverlayElement {
+class DialogOverlayElement extends mixinBehaviors(IronResizableBehavior, OverlayElement) {
   static get is() {
     return 'vaadin-dialog-overlay';
   }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
+      const overlayPart = memoizedTemplate.content.querySelector('[part="overlay"]');
+      const resizerContainer = document.createElement('div');
+      resizerContainer.id = 'resizerContainer';
+      resizerContainer.classList.add('resizer-container');
+      resizerContainer.appendChild(contentPart);
+      overlayPart.appendChild(resizerContainer);
+    }
+    return memoizedTemplate;
+  }
+
+  static get properties() {
+    return {
+      modeless: Boolean,
+
+      withBackdrop: Boolean
+    };
+  }
 }
@@ -114,3 +141,8 @@
  */
-class DialogElement extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
+class DialogElement extends
+  ThemePropertyMixin(
+    ElementMixin(
+      DialogDraggableMixin(
+        DialogResizableMixin(
+          PolymerElement)))) {
   static get template() {
@@ -124,3 +156,3 @@ return html`
 
-    <vaadin-dialog-overlay id="overlay" on-opened-changed="_onOverlayOpened" with-backdrop="" theme\$="[[theme]]" focus-trap="">
+    <vaadin-dialog-overlay id="overlay" on-opened-changed="_onOverlayOpened" on-mousedown="_bringOverlayToFront" theme\$="[[theme]]" modeless="[[modeless]]" with-backdrop="[[!modeless]]" resizable\$="[[resizable]]" focus-trap="">
     </vaadin-dialog-overlay>
@@ -135,3 +167,3 @@ `;
   static get version() {
-    return '2.2.1';
+    return '2.3.0-alpha1';
   }
@@ -192,2 +224,28 @@
 
+      /**
+       * Set to true to remove backdrop and allow click events on background elements.
+       */
+      modeless: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to enable repositioning the dialog by clicking and dragging.
+       */
+      draggable: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+
+      /**
+       * Set to true to enable resizing the dialog by dragging the corners and edges.
+       */
+      resizable: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+
       _oldTemplate: Object,
@@ -294,2 +352,39 @@
   }
+
+  _setBounds(bounds) {
+    const overlay = this.$.overlay.$.overlay;
+    const parsedBounds = Object.assign({}, bounds);
+
+    if (overlay.style.position !== 'absolute') {
+      overlay.style.position = 'absolute';
+      overlay.style.maxWidth = 'none';
+    }
+
+    for (const arg in parsedBounds) {
+      if (typeof parsedBounds[arg] === 'number') {
+        parsedBounds[arg] = `${parsedBounds[arg]}px`;
+      }
+    }
+
+    Object.assign(overlay.style, parsedBounds);
+  }
+
+  _bringOverlayToFront() {
+    this.$.overlay.bringToFront();
+  }
+
+  _getOverlayBounds() {
+    const overlay = this.$.overlay.$.overlay;
+    const overlayBounds = overlay.getBoundingClientRect();
+    const containerBounds = this.$.overlay.getBoundingClientRect();
+    const top = overlayBounds.top - containerBounds.top;
+    const left = overlayBounds.left - containerBounds.left;
+    const width = overlayBounds.width;
+    const height = overlayBounds.height;
+    return {top, left, width, height};
+  }
+
+  _mouseInWindow(e) {
+    return e.clientX >= 0 && e.clientX <= window.innerWidth && e.clientY >= 0 && e.clientY <= window.innerHeight;
+  }
 }
@@ -296,0 +391,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

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

37563

increased by36.78%

Number of package files

11

increased by22.22%

Lines of code

622

increased by85.67%

Number of lines in readme file

143

increased by2.88%

Worsened metrics

Dependency count

7

increased by16.67%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@polymer/iron-resizable-behavior@^3.0.0

• + Added@polymer/iron-resizable-behavior@3.0.1(transitive)

• Updated@vaadin/vaadin-overlay@^3.3.0