Add basic list menu elements and fix alwaysToggle to only trigger if the popup is open.

2024-05-21 12:31:25 +02:00 · 2024-05-21 12:31:25 +02:00 · a548ed8591
commit a548ed8591
parent 7420945748
5 changed files with 248 additions and 4 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,13 +1,160 @@
 {
  "name": "@tp/tp-popup",
-  "version": "0.0.1",
-  "lockfileVersion": 1,
+  "version": "1.0.6",
+  "lockfileVersion": 2,
  "requires": true,
+  "packages": {
+    "": {
+      "name": "@tp/tp-popup",
+      "version": "1.0.6",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@tp/helpers": "^1.0.1",
+        "@tp/tp-icon": "^1.0.1",
+        "lit": "^2.2.0"
+      }
+    },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "node_modules/@tp/helpers": {
+      "version": "1.0.1",
+      "resolved": "https://verdaccio.codeblob.work/@tp%2fhelpers/-/helpers-1.0.1.tgz",
+      "integrity": "sha512-f6pDPw4QpjWnmVkYgOHjMXQXtGB4vbA45eZV9DjCF9OoCXsa+Pz32H2rLQRKbdpsfFllywOBI+GMGPYDJyrG/Q=="
+    },
+    "node_modules/@tp/tp-icon": {
+      "version": "1.0.1",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-icon/-/1.0.1/tp-icon-1.0.1.tgz",
+      "integrity": "sha512-rBbQoXZ5t35F7yIbPAEGAlDscZhxLZ5/o229kyiBBrXvCrc+aVOsetSwF1jPeBSmb57h2PfinIvQhtMARwWHoA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@tp/tp-tooltip": "^1.0.0",
+        "lit": "^2.2.0"
+      }
+    },
+    "node_modules/@tp/tp-tooltip": {
+      "version": "1.0.0",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-tooltip/-/1.0.0/tp-tooltip-1.0.0.tgz",
+      "integrity": "sha512-wal/DPJH73rz9RbHg66ZciZUyjqfeTKMSImEVWczwjXGoPTG9n5FL5+tPyikpgFr5KDhDKlW8/Q0niBbGnc5KA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@tp/helpers": "^1.0.0",
+        "lit": "^2.2.0"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
+    },
+    "node_modules/lit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    }
+  },
  "dependencies": {
+    "@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+    },
+    "@lit/reactive-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "requires": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
    "@tp/helpers": {
      "version": "1.0.1",
      "resolved": "https://verdaccio.codeblob.work/@tp%2fhelpers/-/helpers-1.0.1.tgz",
      "integrity": "sha512-f6pDPw4QpjWnmVkYgOHjMXQXtGB4vbA45eZV9DjCF9OoCXsa+Pz32H2rLQRKbdpsfFllywOBI+GMGPYDJyrG/Q=="
+    },
+    "@tp/tp-icon": {
+      "version": "1.0.1",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-icon/-/1.0.1/tp-icon-1.0.1.tgz",
+      "integrity": "sha512-rBbQoXZ5t35F7yIbPAEGAlDscZhxLZ5/o229kyiBBrXvCrc+aVOsetSwF1jPeBSmb57h2PfinIvQhtMARwWHoA==",
+      "requires": {
+        "@tp/tp-tooltip": "^1.0.0",
+        "lit": "^2.2.0"
+      }
+    },
+    "@tp/tp-tooltip": {
+      "version": "1.0.0",
+      "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-tooltip/-/1.0.0/tp-tooltip-1.0.0.tgz",
+      "integrity": "sha512-wal/DPJH73rz9RbHg66ZciZUyjqfeTKMSImEVWczwjXGoPTG9n5FL5+tPyikpgFr5KDhDKlW8/Q0niBbGnc5KA==",
+      "requires": {
+        "@tp/helpers": "^1.0.0",
+        "lit": "^2.2.0"
+      }
+    },
+    "@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
+    },
+    "lit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
+      "requires": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "lit-element": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
+      "requires": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@tp/tp-popup",
-  "version": "1.0.6",
+  "version": "1.0.7",
  "description": "",
  "main": "tp-popup.js",
  "scripts": {
@ -14,6 +14,7 @@
  "license": "Apache-2.0",
  "dependencies": {
    "@tp/helpers": "^1.0.1",
+    "@tp/tp-icon": "^1.0.1",
    "lit": "^2.2.0"
  }
 }
--- a/tp-popup-menu-item.js
+++ b/tp-popup-menu-item.js
@ -0,0 +1,61 @@
+/**
+@license
+Copyright (c) 2024 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 TpPopupMenuItem extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: default;
+          pointer-events: none;
+        }
+
+        .wrap {
+          display: grid;
+          grid-template-columns: auto 1fr;
+          grid-column-gap: 10px;
+          align-items: center;
+          padding: 6px 12px;
+          color: var(--tp-popup-menu-item-color, #000);
+          background: var(--tp-popup-menu-item-bg, transparent);
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { icon } = this;
+
+    return html`
+      <div class="wrap" ?noicon=${!icon}>
+        ${icon ? html`
+        <tp-icon .icon=${icon}></tp-icon>
+        ` : null}
+        <div class="label">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      icon: { type: Object },
+    };
+  }
+
+
+}
+
+window.customElements.define('tp-popup-menu-item', TpPopupMenuItem);
--- a/tp-popup-menu.js
+++ b/tp-popup-menu.js
@ -0,0 +1,35 @@
+/**
+@license
+Copyright (c) 2024 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+
+class TpPopupMenu extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+        }
+
+        .wrap {
+          min-width: 120px;
+          padding: 6px 0;
+          border-radius: 2px;
+        }
+      `
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="wrap">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define('tp-popup-menu', TpPopupMenu);
--- a/tp-popup.js
+++ b/tp-popup.js
@ -182,7 +182,7 @@ class TpPopup extends EventHelpers(Position(DomQuery(LitElement))) {

    if (toggle && this.toggleEl.hasAttribute('disabled')) return;

-    if (toggle || this.alwaysToggle) {
+    if (toggle || this.alwaysToggle && this.isOpen) {
      this.toggle();
    }