77 lines
1.7 KiB
JavaScript
77 lines
1.7 KiB
JavaScript
|
/**
|
||
|
|
@license
|
||
|
|
Copyright (c) 2022 trading_peter
|
||
|
|
This program is available under Apache License Version 2.0
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { LitElement, html, css } from 'lit';
|
||
|
|
|
||
|
|
/*
|
||
|
|
Displays a action menu suitable to put into tp-popup.
|
||
|
|
Sub menus can be defined.
|
||
|
|
|
||
|
|
To hide the icons in from of the menu items use something like this in your application styles:
|
||
|
|
tp-cmd-item::part(icon) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
Example:
|
||
|
|
|
||
|
|
<tp-popup>
|
||
|
|
<tp-icon .icon=${icons.dots} slot="toggle"></tp-icon>
|
||
|
|
|
||
|
|
<tp-cmd-menu slot="content">
|
||
|
|
<tp-cmd-item>Pause</tp-cmd-item>
|
||
|
|
|
||
|
|
<tp-cmd-item>
|
||
|
|
More...
|
||
|
|
<tp-cmd-menu slot="sub">
|
||
|
|
<tp-cmd-item>Action 1</tp-cmd-item>
|
||
|
|
|
||
|
|
<tp-cmd-item>
|
||
|
|
Action 2
|
||
|
|
<tp-cmd-menu slot="sub">
|
||
|
|
<tp-cmd-item>Action a</tp-cmd-item>
|
||
|
|
<tp-cmd-item .icon=${icons.error}>
|
||
|
|
Action b
|
||
|
|
</tp-cmd-item>
|
||
|
|
</tp-cmd-menu>
|
||
|
|
</tp-cmd-item>
|
||
|
|
|
||
|
|
</tp-cmd-menu>
|
||
|
|
</tp-cmd-item>
|
||
|
|
|
||
|
|
<tp-cmd-item .icon=${icons.play}>Play</tp-cmd-item>
|
||
|
|
</tp-cmd-menu>
|
||
|
|
</tp-popup>
|
||
|
|
*/
|
||
|
|
class TpCmdMenu extends LitElement {
|
||
|
|
static get styles() {
|
||
|
|
return [
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
border-radius: var(--tp-cmd-menu-border-radius, 4px);
|
||
|
|
background: var(--tp-cmd-menu-background, #ffffff);
|
||
|
|
}
|
||
|
|
|
||
|
|
slot::slotted(:first-child) {
|
||
|
|
border-radius: var(--tp-cmd-menu-border-radius, 4px) var(--tp-cmd-menu-border-radius, 4px) 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
slot::slotted(:last-child) {
|
||
|
|
border-radius: 0 0 var(--tp-cmd-menu-border-radius, 4px) var(--tp-cmd-menu-border-radius, 4px);
|
||
|
|
}
|
||
|
|
`
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<div class="wrap"><slot></slot></div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.customElements.define('tp-cmd-menu', TpCmdMenu);
|