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