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

Comparing version 4.2.1 to 4.3.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-context-menu",
-  "version": "4.2.1",
+  "version": "4.3.0-alpha1",
   "main": "vaadin-context-menu.js",
@@ -39,3 +39,5 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-material-styles": "^1.1.1",
-    "@vaadin/vaadin-element-mixin": "^2.1.1"
+    "@vaadin/vaadin-element-mixin": "^2.1.1",
+    "@vaadin/vaadin-item": "^2.1.0",
+    "@vaadin/vaadin-list-box": "^1.1.0"
   },
@@ -48,4 +50,2 @@ "devDependencies": {
     "@vaadin/vaadin-grid": "^5.2.0",
-    "@vaadin/vaadin-item": "^2.1.0",
-    "@vaadin/vaadin-list-box": "^1.1.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
@@ -52,0 +52,0 @@ "wct-browser-legacy": "^1.0.1",

README.md

@@ -125,3 +125,3 @@ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-context-menu)](https://www.npmjs.com/package/@vaadin/vaadin-context-menu)
 
-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.
 
@@ -128,0 +128,0 @@ 1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:

src/vaadin-context-menu.js

@@ -12,2 +12,3 @@ /**
 import './vaadin-device-detector.js';
+import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
@@ -21,13 +22,38 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.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
+ * menu can be populated in three ways: imperatively by using the items API or a renderer callback function and
  * declaratively by using Polymer's Templates.
  *
+ * ### Items
+ *
+ * Items is a higher level convenience API for defining a (hierarchical) menu structure for the component.
+ * If a menu item has a non-empty `children` set, a sub-menu with the child items is opened
+ * next to the parent menu on mouseover, tap or a right arrow keypress.
+ *
+ * ```javascript
+ * contextMenu.items = [
+ *   {text: 'Menu Item 1', children:
+ *     [
+ *       {text: 'Menu Item 1-1', checked: true},
+ *       {text: 'Menu Item 1-2'}
+ *     ]
+ *   },
+ *   {component: 'hr'},
+ *   {text: 'Menu Item 2', children:
+ *     [
+ *       {text: 'Menu Item 2-1'},
+ *       {text: 'Menu Item 2-2', disabled: true}
+ *     ]
+ *   },
+ *   {text: 'Menu Item 3', disabled: true}
+ * ];
+ * ```
+ *
+ * **NOTE:** when the `items` array is defined, the renderer or a template cannot be used.
+ *
  * ### 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.
+ * new content, the renderer function should check if there is already content in `root` for reusing it.
  *
@@ -70,3 +96,3 @@ * ```html
  *
- * Alternatively to using the `renderer`, you are able to populate
+ * Alternatively to using the `renderer`, you can populate
  * the menu content using Polymer's Templates:
@@ -87,3 +113,3 @@ *
  *
- * `vaadin-contextmenu` is a gesture event (a custom event fired by Polymer),
+ * `vaadin-contextmenu` is a gesture event (a custom event),
  * which is dispatched after either `contextmenu` and long touch events.
@@ -200,2 +226,3 @@ * This enables support for both mouse and touch environments in a uniform way.
  * @mixes Vaadin.ThemePropertyMixin
+ * @mixes Vaadin.ContextMenu.ItemsMixin
  * @mixes Polymer.GestureEventListeners
@@ -207,3 +234,4 @@ * @demo demo/index.html
     ThemePropertyMixin(
-      GestureEventListeners(PolymerElement))) {
+      ItemsMixin(
+        GestureEventListeners(PolymerElement)))) {
   static get template() {
@@ -223,3 +251,3 @@ return html`
 
-    <vaadin-device-detector phone="{{_phone}}"></vaadin-device-detector>
+    <vaadin-device-detector phone="{{_phone}}" touch="{{_touch}}"></vaadin-device-detector>
 
@@ -236,3 +264,3 @@ <vaadin-context-menu-overlay id="overlay" on-opened-changed="_onOverlayOpened" on-vaadin-overlay-open="_onVaadinOverlayOpen" with-backdrop="[[_phone]]" phone\$="[[_phone]]" model="[[_context]]" theme\$="[[theme]]">
   static get version() {
-    return '4.2.1';
+    return '4.3.0-alpha1';
   }
@@ -316,3 +344,5 @@
 
-      _oldRenderer: Object
+      _oldRenderer: Object,
+
+      _touch: Boolean
     };
@@ -326,3 +356,3 @@ }
       '_targetOrOpenOnChanged(listenOn, openOn)',
-      '_templateOrRendererChanged(_contentTemplate, renderer, _context)'
+      '_templateOrRendererChanged(_contentTemplate, renderer, _context, items)'
     ];
@@ -356,6 +386,4 @@ }
   _onVaadinOverlayOpen(e) {
-    // Phone alignment is done in CSS
-    if (!this._phone) {
-      this.__alignOverlayPosition();
-    }
+    this.__alignOverlayPosition();
+    this.$.overlay.style.opacity = '';
 
@@ -445,3 +473,3 @@ const child = this.$.overlay.content.querySelector(':not(style):not(slot)');
 
-  _templateOrRendererChanged(template, renderer, context) {
+  _templateOrRendererChanged(template, renderer, context, items) {
     if (template && renderer) {
@@ -455,2 +483,12 @@ this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);
 
+    if (items) {
+      if (template || renderer) {
+        throw new Error('The items API cannot be used together with a template/renderer');
+      }
+      if (this.closeOn === 'click') {
+        this.closeOn = '';
+      }
+
+      renderer = this.__itemsRenderer;
+    }
     if (renderer && context) {
@@ -506,2 +544,3 @@ this.$.overlay.setProperties({owner: this, renderer: renderer});
         this.__y = this._getEventCoordinate(e, 'y');
+        this.$.overlay.style.opacity = '0';
         this._setOpened(true);
@@ -588,2 +627,10 @@ }
   }
+
+  /**
+   * Fired when an item is selected when the context menu is populated using the `items` API.
+   *
+   * @event item-selected
+   * @param {Object} detail
+   * @param {Object} detail.value the selected menu item
+   */
 }
@@ -590,0 +637,0 @@

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

 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -30,6 +31,37 @@
       }
+
     </style>
   </template>
+</dom-module><dom-module id="lumo-context-menu-list-box" theme-for="vaadin-list-box">
+  <template>
+    <style>
+      :host(.vaadin-menu-list-box) {
+        --_lumo-list-box-item-selected-icon-display: block;
+      }
+
+      :host(.vaadin-menu-list-box) [part="items"] ::slotted(vaadin-item.vaadin-menu-item) {
+        padding-left: calc(var(--lumo-border-radius) / 4);
+        padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      }
+    </style>
+  </template>
+</dom-module><dom-module id="lumo-context-menu-item" theme-for="vaadin-item">
+  <template>
+    <style>
+      :host(.vaadin-menu-item[menu-item-checked])::before {
+        opacity: 1;
+      }
+
+      :host(.vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+        font-family: lumo-icons;
+        font-size: var(--lumo-icon-size-xs);
+        content: var(--lumo-icons-angle-right);
+        color: var(--lumo-tertiary-text-color);
+        margin-right: calc(var(--lumo-space-m) * -1);
+        padding-left: var(--lumo-space-m);
+      }
+    </style>
+  </template>
 </dom-module>`;
 
 document.head.appendChild($_documentContainer.content);

theme/lumo/vaadin-context-menu.js

 import './vaadin-context-menu-styles.js';
+import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';
+import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js';
 import '../../src/vaadin-context-menu.js';

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

@@ -11,4 +11,24 @@ import '@vaadin/vaadin-material-styles/font-icons.js';
   </template>
+</dom-module><dom-module id="material-context-menu-item" theme-for="vaadin-item">
+  <template>
+    <style>
+      :host(.vaadin-menu-item.vaadin-context-menu-parent-item)::after {
+        font-family: material-icons;
+        content: var(--material-icons-chevron-right);
+        font-size: var(--material-icon-font-size);
+        padding-left: 9px;
+        margin-right: -9px;
+      }
+
+      :host(.vaadin-menu-item)::before {
+        display: block;
+      }
+
+      :host(.vaadin-menu-item[menu-item-checked])::before {
+        content: var(--material-icons-check);
+      }
+    </style>
+  </template>
 </dom-module>`;
 
 document.head.appendChild($_documentContainer.content);

theme/material/vaadin-context-menu.js

 import './vaadin-context-menu-styles.js';
+import '@vaadin/vaadin-item/theme/material/vaadin-item.js';
+import '@vaadin/vaadin-list-box/theme/material/vaadin-list-box.js';
 import '../../src/vaadin-context-menu.js';

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

55445

increased by26.54%

Dev dependency count

8

decreased by-20%

Number of downloads

13832

increased by4.1%

Number of package files

13

increased by8.33%

Lines of code

1075

increased by39.25%

Published versions last year

22

increased by4.76%

Worsened metrics

Dependency count

9

increased by28.57%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/vaadin-item@^2.1.0

• + Added@vaadin/vaadin-list-box@^1.1.0

• + Added@vaadin/vaadin-item@2.3.0(transitive)

• + Added@vaadin/vaadin-list-box@1.4.0(transitive)

• + Added@vaadin/vaadin-list-mixin@2.5.3(transitive)