diff --git a/README.md b/README.md index 1ab27b7..b1fa112 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# tp-element +# tp-cmd-menu diff --git a/package.json b/package.json index c39fdff..677e2ae 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { - "name": "@tp/tp-element", - "version": "0.0.1", + "name": "@tp/tp-cmd-menu", + "version": "1.0.0", "description": "", - "main": "tp-element.js", + "main": "tp-cmd-menu.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "https://gitea.codeblob.work/tp-elements/tp-element.git" + "url": "https://gitea.codeblob.work/tp-elements/tp-cmd-menu.git" }, "author": "trading_peter", "license": "Apache-2.0", diff --git a/tp-cmd-item.js b/tp-cmd-item.js new file mode 100644 index 0000000..6bc3e01 --- /dev/null +++ b/tp-cmd-item.js @@ -0,0 +1,88 @@ +/** +@license +Copyright (c) 2022 trading_peter +This program is available under Apache License Version 2.0 +*/ + +import '@tp/tp-icon/tp-icon.js' +import { LitElement, html, css } from 'lit'; + +class TpCmdItem extends LitElement { + static get styles() { + return [ + css` + :host { + display: block; + cursor: pointer; + position: relative; + } + + :host(:hover) { + background: var(--tp-cmd-item-hover, #c1c1c1); + } + + :host([disabled]) { + opacity: 0.4; + pointer-events: none; + } + + div { + display: flex; + align-items: center; + } + + div[part="wrap"] { + padding: 6px 12px; + } + + div[part="icon"] { + min-width: 20px; + padding-right: 8px; + --tp-icon-width: 18px; + --tp-icon-height: 18px; + } + + div[part="label"] { + text-overflow: ellipsis; + white-space: nowrap; + } + + .sub { + display: none; + position: absolute; + left: 0; + top: 0; + margin-left: calc(100% - 2px); + } + + :host(:hover) .sub { + display: block; + } + ` + ]; + } + + render() { + return html` +
+
+ ${this.icon ? html`` : null} +
+
+ +
+
+
+ `; + } + + static get properties() { + return { + icon: { type: Object }, + }; + } + + +} + +window.customElements.define('tp-cmd-item', TpCmdItem); diff --git a/tp-cmd-menu.js b/tp-cmd-menu.js new file mode 100644 index 0000000..3d36fd0 --- /dev/null +++ b/tp-cmd-menu.js @@ -0,0 +1,76 @@ +/** +@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: + + + + + + Pause + + + More... + + Action 1 + + + Action 2 + + Action a + + Action b + + + + + + + + Play + + +*/ +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` +
+ `; + } +} + +window.customElements.define('tp-cmd-menu', TpCmdMenu); diff --git a/tp-element.js b/tp-element.js deleted file mode 100644 index 6a92a2f..0000000 --- a/tp-element.js +++ /dev/null @@ -1,35 +0,0 @@ -/** -@license -Copyright (c) 2022 trading_peter -This program is available under Apache License Version 2.0 -*/ - -import { LitElement, html, css } from 'lit'; - -class TpElement extends LitElement { - static get styles() { - return [ - css` - :host { - display: block; - } - ` - ]; - } - - render() { - const { } = this; - - return html` - - `; - } - - static get properties() { - return { }; - } - - -} - -window.customElements.define('tp-element', TpElement);