Initial version.

README.md

@@ -1 +1 @@
-# tp-element
+# tp-cmd-menu

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",

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`
+      <div part="wrap">
+        <div part="icon">
+          ${this.icon ? html`<tp-icon .icon=${this.icon}></tp-icon>` : null}
+        </div>
+        <div part="label">
+          <slot></slot>
+        </div>
+        <div class="sub"><slot name="sub"></slot></div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      icon: { type: Object },
+    };
+  }
+
+
+}
+
+window.customElements.define('tp-cmd-item', TpCmdItem);

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:
+
+<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);

tp-element.js

@@ -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);