@vaadin/vaadin-dialog - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-dialog",
-  "version": "2.1.0",
+  "version": "2.2.0-alpha1",
   "main": "vaadin-dialog.js",
@@ -25,7 +25,8 @@ "author": "Vaadin Ltd",
     "supports-color": "3.1.2",
-    "type-detect": "1.0.0"
+    "type-detect": "1.0.0",
+    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
   },
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-overlay": "^3.1.1",
+    "@vaadin/vaadin-overlay": "^3.2.0-alpha2",
     "@vaadin/vaadin-themable-mixin": "^1.2.1",
@@ -37,10 +38,10 @@ "@vaadin/vaadin-lumo-styles": "^1.1.0",
   "devDependencies": {
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-component-page": "^3.0.0-pre.15",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.15",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.15",
     "@vaadin/vaadin-button": "^2.1.0",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.1",
+    "@webcomponents/webcomponentsjs": "^2.0.0-beta.2",
+    "wct-browser-legacy": "^0.0.1-pre.11",
     "@vaadin/vaadin-demo-helpers": "^2.0.1"
   }
 }

src/vaadin-dialog.js

@@ -11,4 +11,6 @@ /**
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -52,5 +54,33 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-dialog-overlay-styles" theme-for="vaadin-dialog-overlay">
 /**
- * `<vaadin-dialog>` is a Web Component for customized modal dialogs.
  *
+ * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs. The content of the
+ * dialog can be populated in two ways: imperatively by using renderer callback function and
+ * declaratively by using Polymer's Templates.
+ *
+ * ### Rendering
+ *
+ * By default, the dialog uses the content provided by using the renderer callback function.
+ *
+ * The renderer function provides `root`, `dialog` arguments.
+ * Generate DOM content, append it to the `root` element and control the state
+ * of the host element by accessing `dialog`. Before generating new content,
+ * users are able to check if there is already content in `root` for reusing it.
+ *
  * ```html
+ * <vaadin-dialog id="dialog"></vaadin-dialog>
+ * ```
+ * ```js
+ * const dialog = document.querySelector('#dialog');
+ * dialog.renderer = function(root, dialog) {
+ *   root.textContent = "Sample dialog";
+ * };
+ * ```
+ *
+ * ### Polymer Templates
+ *
+ * Alternatively, the content can be provided with Polymer's Template.
+ * Dialog finds the first child template and uses that in case renderer callback function
+ * is not provided. You can also set a custom template using the `template` property.
+ *
+ * ```html
  * <vaadin-dialog opened>
@@ -93,3 +123,3 @@ *   <template>
   static get version() {
-    return '2.1.0';
+    return '2.2.0-alpha1';
   }
@@ -134,3 +164,18 @@
 
-      _contentTemplate: Object
+      _contentTemplate: Object,
+
+      /**
+       * Custom function for rendering the content of the dialog.
+       * Receives two arguments:
+       *
+       * - `root` The root container DOM element. Append your content to it.
+       * - `dialog` The reference to the `<vaadin-dialog>` element.
+       *
+       * **NOTE:** The renderer callback can be called multiple times with the previous content.
+       */
+      renderer: Function,
+
+      _oldTemplate: Object,
+
+      _oldRenderer: Object
     };
@@ -143,2 +188,3 @@ }
       '_ariaLabelChanged(ariaLabel)',
+      '_templateOrRendererChanged(_contentTemplate, renderer)'
     ];
@@ -152,4 +198,34 @@ }
     this.$.overlay.addEventListener('vaadin-overlay-escape-press', this._handleEscPress.bind(this));
+
+    this._observer = new FlattenedNodesObserver(this, info => {
+      this._setTemplateFromNodes(info.addedNodes);
+    });
   }
 
+  _setTemplateFromNodes(nodes) {
+    this._contentTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._contentTemplate;
+  }
+
+  _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
+    if (template !== oldTemplate) {
+      this._contentTemplate = undefined;
+    } else if (renderer !== oldRenderer) {
+      this.renderer = undefined;
+    }
+  }
+
+  _templateOrRendererChanged(template, renderer) {
+    if (template && renderer) {
+      this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);
+      throw new Error('You should only use either a renderer or a template for dialog content');
+    }
+
+    this._oldTemplate = template;
+    this._oldRenderer = renderer;
+
+    if (renderer) {
+      this.$.overlay.setProperties({owner: this, renderer: renderer});
+    }
+  }
+
   disconnectedCallback() {
@@ -161,3 +237,3 @@ super.disconnectedCallback();
   _openedChanged(opened) {
-    if (opened && !this._instance) {
+    if (opened) {
       this.$.overlay.template = this.querySelector('template');
@@ -164,0 +240,0 @@ }

test/test-suites.js

 window.VaadinDialogSuites = [
-  'vaadin-dialog_test.html'
+  'vaadin-dialog_test.html',
+  'vaadin-dialog_renderer-test.html'
 ];

theme/lumo/vaadin-dialog-styles.js

 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -5,0 +6,0 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-dialog" theme-for="vaadin-dialog-overlay">

theme/material/vaadin-dialog-styles.js

 import '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import '@vaadin/vaadin-material-styles/shadow.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -5,0 +6,0 @@ $_documentContainer.innerHTML = `<dom-module id="material-dialog" theme-for="vaadin-dialog-overlay">

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

73123

increased by8.47%

Number of package files

16

increased by6.67%

Lines of code

337

increased by26.22%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/vaadin-overlay@^3.2.0-alpha2