@vaadin/vaadin-overlay - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0-alpha1

package.json

@@ -14,3 +14,3 @@ {
   "name": "@vaadin/vaadin-overlay",
-  "version": "3.1.1",
+  "version": "3.2.0-alpha1",
   "main": "vaadin-overlay.js",
@@ -26,3 +26,4 @@ "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"
   },
@@ -34,17 +35,17 @@ "dependencies": {
     "@vaadin/vaadin-material-styles": "^1.1.0-beta1",
-    "@polymer/iron-overlay-behavior": "^3.0.0-pre.18"
+    "@polymer/iron-overlay-behavior": "^3.0.0-pre.15"
   },
   "devDependencies": {
     "@vaadin/vaadin-demo-helpers": "^2.0.1",
-    "@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-beta2",
     "@vaadin/vaadin-text-field": "^2.1.0-beta2",
-    "@polymer/iron-form": "^3.0.0-pre.18",
-    "@polymer/iron-input": "^3.0.0-pre.18",
-    "@polymer/paper-button": "^3.0.0-pre.18",
-    "@polymer/paper-input": "^3.0.0-pre.18",
-    "wct-browser-legacy": "^1.0.1"
+    "@polymer/iron-form": "^3.0.0-pre.15",
+    "@polymer/iron-input": "^3.0.0-pre.15",
+    "@polymer/paper-button": "^3.0.0-pre.15",
+    "@polymer/paper-input": "^3.0.0-pre.15",
+    "wct-browser-legacy": "^0.0.1-pre.11"
   }
 }

src/vaadin-overlay.js

@@ -59,14 +59,33 @@ /**
 /**
- * `<vaadin-overlay>` is a Web Component for creating overlays.
  *
+ * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
+ * can be populated in two ways: imperatively by using renderer callback function and
+ * declaratively by using Polymer's Templates.
+ *
+ * ### Rendering
+ *
+ * By default, the overlay uses the content provided by using the renderer callback function.
+ *
+ * The renderer function provides `root`, `owner`, `model` arguments when applicable.
+ * Generate DOM content by using `model` object properties if needed, append it to the `root`
+ * element and control the state of the host element by accessing `owner`. Before generating new
+ * content, users are able to check if there is already content in `root` for reusing it.
+ *
  * ```html
- * <vaadin-overlay>
- *   <template>Overlay content</template>
- * </vaadin-overlay>
+ * <vaadin-overlay id="overlay"></vaadin-overlay>
  * ```
+ * ```js
+ * const overlay = document.querySelector('#overlay');
+ * overlay.renderer = function(root) {
+ *  root.textContent = "Overlay content";
+ * };
+ * ```
  *
+ * **NOTE:** when the renderer property is defined, the `<template>` content is not used.
+ *
  * ### Templating
  *
- * By default, the overlay finds the child template and uses that.
- * You can also set a custom template using the `template` property.
+ * Alternatively, the content can be provided with Polymer Template.
+ * Overlay 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.
  *
@@ -81,3 +100,9 @@ * After the content from the template is stamped, the `content` property
  *
- * Note when using `instanceProps`: because of the Polymer limitation,
+ * ```html
+ * <vaadin-overlay>
+ *   <template>Overlay content</template>
+ * </vaadin-overlay>
+ * ```
+ *
+ * **NOTE:** when using `instanceProps`: because of the Polymer limitation,
  * every template can only be templatized once, so it is important
@@ -218,2 +243,20 @@ * to set `instanceProps` before the `template` is assigned to the overlay.
       /**
+       * Owner element passed with renderer function
+       */
+      owner: Element,
+
+      /**
+       * Custom function for rendering the content of the overlay.
+       * Receives three arguments:
+       *
+       * - `root` The root container DOM element. Append your content to it.
+       * - `owner` The host element of the renderer function.
+       * - `model` The object with the properties related with rendering.
+       *
+       * **NOTE:** The renderer callback can be called multiple times
+       * with the previous content.
+       */
+      renderer: Function,
+
+      /**
        * The template of the overlay content.
@@ -248,2 +291,7 @@ */
       /**
+       * Object with properties that is passed to `renderer` function
+       */
+      model: Object,
+
+      /**
        * When true the overlay won't disable the main content, showing
@@ -286,3 +334,13 @@ * it doesn’t change the functionality of the user interface.
 
-      _contentNodes: Array
+      _contentNodes: Array,
+
+      _oldOwner: Element,
+
+      _oldModel: Object,
+
+      _oldTemplate: Object,
+
+      _oldInstanceProps: Object,
+
+      _oldRenderer: Object
     };
@@ -294,3 +352,3 @@ }
       '_openedChanged(opened)',
-      '_templateChanged(template)'
+      '_templateOrRendererChanged(template, renderer, owner, model, instanceProps)'
     ];
@@ -647,12 +705,8 @@ }
 
-  _templateChanged(template) {
+  _stampOverlayTemplate(template, instanceProps) {
     this._removeOldContent();
 
-    if (!template) {
-      return;
-    }
-
     if (!template._Templatizer) {
       template._Templatizer = templatize(template, this, {
-        instanceProps: this.instanceProps,
+        instanceProps: instanceProps,
         forwardHostProp: function(prop, value) {
@@ -669,3 +723,3 @@ if (this._instance) {
 
-    const templateRoot = template.getRootNode();
+    const templateRoot = template._templateRoot || (template._templateRoot = template.getRootNode());
     const _isScoped = templateRoot !== document;
@@ -726,2 +780,42 @@
 
+  _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
+    if (template !== oldTemplate) {
+      this.template = undefined;
+    } else if (renderer !== oldRenderer) {
+      this.renderer = undefined;
+    }
+  }
+
+  _templateOrRendererChanged(template, renderer, owner, model, instanceProps) {
+    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 overlay content');
+    }
+
+    const ownerOrModelChanged = (this._oldOwner !== owner || this._oldModel !== model);
+    this._oldModel = model;
+    this._oldOwner = owner;
+
+    const templateOrInstancePropsChanged = (this._oldInstanceProps !== instanceProps || this._oldTemplate !== template);
+    this._oldInstanceProps = instanceProps;
+    this._oldTemplate = template;
+
+    const rendererChanged = this._oldRenderer !== renderer;
+    this._oldRenderer = renderer;
+
+    if (template && !ownerOrModelChanged) {
+      this._stampOverlayTemplate(template, instanceProps);
+    } else if (renderer && !templateOrInstancePropsChanged) {
+      this.content = this;
+
+      if (rendererChanged) {
+        while (this.content.firstChild) {
+          this.content.removeChild(this.content.firstChild);
+        }
+      }
+
+      this.renderer.call(owner, this.content, owner, model);
+    }
+  }
+
   _isFocused(element) {
@@ -728,0 +822,0 @@ return element && element.getRootNode().activeElement === element;

test/test-suites.js

 window.VaadinOverlaySuites = [
   'vaadin-overlay.html',
   'vaadin-overlay.html?wc-shadydom=true',
+  'renderer.html',
+  'renderer.html?wc-shadydom=true',
   'focus-trap.html',
@@ -5,0 +7,0 @@ 'focus-trap.html?wc-shadydom=true',

theme/lumo/vaadin-overlay-styles.js

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

theme/material/vaadin-overlay-styles.js

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

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

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

104498

increased by9.5%

Number of package files

15

increased by7.14%

Lines of code

763

increased by12.21%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-overlay-behavior@^3.0.0-pre.15