@vaadin/vaadin-context-menu - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-context-menu",
-  "version": "4.1.0",
+  "version": "4.2.0-alpha1",
   "main": "vaadin-context-menu.js",
@@ -25,9 +25,10 @@ "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",
-    "@polymer/iron-media-query": "^3.0.0-pre.18",
+    "@polymer/iron-media-query": "^3.0.0-pre.15",
     "@vaadin/vaadin-themable-mixin": "^1.2.1",
-    "@vaadin/vaadin-overlay": "^3.1.1",
+    "@vaadin/vaadin-overlay": "^3.2.0-alpha2",
     "@vaadin/vaadin-lumo-styles": "^1.1.1",
@@ -38,14 +39,14 @@ "@vaadin/vaadin-material-styles": "^1.1.1",
   "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/test-fixture": "^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",
+    "@polymer/test-fixture": "^3.0.0-pre.15",
     "@vaadin/vaadin-button": "^2.1.0",
-    "@vaadin/vaadin-grid": "^5.1.0",
+    "@vaadin/vaadin-grid": "^5.2.0-alpha1",
     "@vaadin/vaadin-item": "^2.1.0",
     "@vaadin/vaadin-list-box": "^1.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-context-menu-overlay.js

@@ -10,2 +10,3 @@ /**
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -12,0 +13,0 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-context-menu-overlay-styles" theme-for="vaadin-context-menu-overlay">

src/vaadin-context-menu.js

@@ -9,2 +9,3 @@ /**
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import './vaadin-contextmenu-event.js';
@@ -17,3 +18,51 @@ import './vaadin-device-detector.js';
 /**
+ *
+ * `<vaadin-context-menu>` is a Web Component for creating context menus. The content of the
+ * menu can be populated in two ways: imperatively by using renderer callback function and
+ * declaratively by using Polymer's Templates.
+ *
+ * ### Rendering
+ *
+ * By default, the context menu uses the content provided using the renderer callback function.
+ *
+ * The renderer function provides `root`, `contextMenu`, `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 `contextMenu`. Before generating
+ * new content, users are able to check if there is already content in `root` for reusing it.
+ *
  * ```html
+ * <vaadin-context-menu id="contextMenu">
+ *  <p>This paragraph has a context menu.</p>
+ * </vaadin-context-menu>
+ * ```
+ * ```js
+ * const contextMenu = document.querySelector('#contextMenu');
+ * contextMenu.renderer = (root, contextMenu, context) => {
+ *   let listBox = root.firstElementChild;
+ *   if (!listBox) {
+ *     listBox = document.createElement('vaadin-list-box');
+ *     root.appendChild(listBox);
+ *   }
+ *
+ *   let item = listBox.querySelector('vaadin-item');
+ *   if (!item) {
+ *     item = document.createElement('vaadin-item');
+ *     listBox.appendChild(item);
+ *   }
+ *   item.textContent = 'Content of the selector: ' + context.target.textContent;
+ * };
+ * ```
+ *
+ * You can access the menu context inside the renderer using
+ * `context.target` and `context.detail`.
+ *
+ * **NOTE:** when the `renderer` function is defined, the template content
+ * is not in use.
+ *
+ * ### Polymer Templates
+ *
+ * Alternatively to using the `renderer`, you are able to populate
+ * the menu content using Polymer's Templates:
+ *
+ * ```html
  * <vaadin-context-menu>
@@ -154,3 +203,3 @@ *   <template>
 
-    <vaadin-context-menu-overlay id="overlay" on-opened-changed="_onOverlayOpened" on-vaadin-overlay-open="_onVaadinOverlayOpen" with-backdrop="[[_phone]]" phone\$="[[_phone]]">
+    <vaadin-context-menu-overlay id="overlay" on-opened-changed="_onOverlayOpened" on-vaadin-overlay-open="_onVaadinOverlayOpen" with-backdrop="[[_phone]]" phone\$="[[_phone]]" model="[[_context]]">
     </vaadin-context-menu-overlay>
@@ -165,3 +214,3 @@ `;
   static get version() {
-    return '4.1.0';
+    return '4.2.0-alpha1';
   }
@@ -221,2 +270,19 @@
 
+      /**
+       * Custom function for rendering the content of the menu overlay.
+       * Receives three arguments:
+       *
+       * - `root` The root container DOM element. Append your content to it.
+       * - `contextMenu` The reference to the `<vaadin-context-menu>` element.
+       * - `context` The object with the menu context, contains:
+       *   - `context.target`  the target of the menu opening event,
+       *   - `context.detail` the menu opening event detail.
+       *
+       * **NOTE:** The renderer callback can be called multiple times
+       * with the previous content.
+       */
+      renderer: {
+        type: Function
+      },
+
       _context: Object,
@@ -228,3 +294,7 @@
 
-      _templateClass: Object
+      _contentTemplate: Object,
+
+      _oldTemplate: Object,
+
+      _oldRenderer: Object
     };
@@ -237,3 +307,4 @@ }
       '_contextChanged(_context, _instance)',
-      '_targetOrOpenOnChanged(listenOn, openOn)'
+      '_targetOrOpenOnChanged(listenOn, openOn)',
+      '_templateOrRendererChanged(_contentTemplate, renderer, _context)'
     ];
@@ -249,2 +320,13 @@ }
 
+  ready() {
+    super.ready();
+    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;
+  }
+
   // Runs before overlay is fully rendered
@@ -330,2 +412,24 @@ _onOverlayOpened(e) {
 
+  _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
+    if (template !== oldTemplate) {
+      this._contentTemplate = undefined;
+    } else if (renderer !== oldRenderer) {
+      this.renderer = undefined;
+    }
+  }
+
+  _templateOrRendererChanged(template, renderer, context) {
+    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 context-menu content');
+    }
+
+    this._oldTemplate = template;
+    this._oldRenderer = renderer;
+
+    if (renderer && context) {
+      this.$.overlay.setProperties({owner: this, renderer: renderer});
+    }
+  }
+
   _contextChanged(context, instance) {
@@ -332,0 +436,0 @@ if (context === undefined || instance === undefined) {

test/not-animated-styles.js

 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -3,0 +4,0 @@ $_documentContainer.innerHTML = `<dom-module id="not-animated-context-menu-overlay" theme-for="vaadin-context-menu-overlay">

test/test-suites.js

@@ -8,4 +8,5 @@ window.VaadinContextMenuSuites = [
   'overlay.html',
+  'renderer.html',
   'template.html',
   'touch.html'
 ];

theme/lumo/vaadin-context-menu-styles.js

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

theme/material/vaadin-context-menu-styles.js

@@ -7,2 +7,3 @@ import '@vaadin/vaadin-material-styles/font-icons.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -9,0 +10,0 @@ $_documentContainer.innerHTML = `<dom-module id="material-context-menu-overlay" theme-for="vaadin-context-menu-overlay">

New alerts

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

Improved metrics

Total package byte prevSize

212567

increased by4.43%

Number of package files

34

increased by3.03%

Lines of code

834

increased by13.62%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-media-query@^3.0.0-pre.15

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