context-menu: render toggle/selected menu items, rename internal dispatcher
- actions gain optional toggle + selected fields: items render in the shared tp-popup-menu-item checkmark style (icon faded unless selected/hovered) - rename the private _onCtxAction dispatcher to _ctxItemClicked so a host method named _onCtxAction (the natural name for a ctx-action listener) no longer shadows it and breaks item clicks
This commit is contained in:
+11
-3
@@ -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`
|
||||
<tp-popup-menu-item
|
||||
part="ctx-menu-item"
|
||||
class=${a.toggle ? 'toggle' : ''}
|
||||
.icon=${a.icon || null}
|
||||
?selected=${!!a.selected}
|
||||
?disabled=${a.disabled}
|
||||
@click=${(e) => this._onCtxAction(a, context, e)}>
|
||||
@click=${(e) => this._ctxItemClicked(a, context, e)}>
|
||||
${a.label}
|
||||
</tp-popup-menu-item>
|
||||
`
|
||||
@@ -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 },
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tp/helpers",
|
||||
"version": "2.13.0",
|
||||
"version": "2.14.0",
|
||||
"description": "",
|
||||
"main": "closest.js",
|
||||
"scripts": {
|
||||
|
||||
Reference in New Issue
Block a user