diff --git a/context-menu.js b/context-menu.js index eebf2f7..e6f2ab5 100644 --- a/context-menu.js +++ b/context-menu.js @@ -19,7 +19,9 @@ import { html } from 'lit'; * 2. Call `this._openContextMenu(e, actions, context)` from a * `contextmenu` event handler, where: * - e: the original MouseEvent - * - actions: array of { label, action, icon?, disabled? } + * - actions: array of { label, action, icon?, disabled?, toggle?, selected? } + * (`toggle: true` + `selected: boolean` renders the item in the + * shared checkmark style — icon faded unless selected/hovered) * - context: arbitrary data passed through to the event detail * 3. Include `${this._renderCtxMenu()}` somewhere in your render(). * 4. Listen for the `ctx-action` event on the host to handle actions: @@ -27,6 +29,10 @@ import { html } from 'lit'; * * The mixin also dispatches a cancelable `ctx-open` event before showing * the menu. Calling `e.preventDefault()` on it suppresses the menu. + * + * NOTE: name your event handler anything except `_onCtxAction` (or other + * mixin-internal names) — a method by that name on the host would shadow + * the mixin's own internals. */ export const ContextMenu = (superClass) => class ContextMenuHost extends superClass { @@ -116,9 +122,11 @@ export const ContextMenu = (superClass) => class ContextMenuHost extends superCl : html` this._onCtxAction(a, context, e)}> + @click=${(e) => this._ctxItemClicked(a, context, e)}> ${a.label} ` @@ -132,7 +140,7 @@ export const ContextMenu = (superClass) => class ContextMenuHost extends superCl // --------------------------------------------------------------------------- /** @private */ - _onCtxAction(action, context, e) { + _ctxItemClicked(action, context, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('ctx-action', { detail: { action: action.action, context, originalEvent: e }, diff --git a/package.json b/package.json index 7238b72..c04b465 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/helpers", - "version": "2.13.0", + "version": "2.14.0", "description": "", "main": "closest.js", "scripts": {