diff --git a/package-lock.json b/package-lock.json index eea5a66..d0d8b68 100644 --- 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" + } } } } diff --git a/package.json b/package.json index afd11e4..43905e2 100644 --- 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" } } diff --git a/tp-popup-menu-item.js b/tp-popup-menu-item.js new file mode 100644 index 0000000..b2f1251 --- /dev/null +++ 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` +
+ ${icon ? html` + + ` : null} +
+ +
+
+ `; + } + + static get properties() { + return { + icon: { type: Object }, + }; + } + + +} + +window.customElements.define('tp-popup-menu-item', TpPopupMenuItem); diff --git a/tp-popup-menu.js b/tp-popup-menu.js new file mode 100644 index 0000000..ee64d70 --- /dev/null +++ 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` +
+ +
+ `; + } +} + +window.customElements.define('tp-popup-menu', TpPopupMenu); diff --git a/tp-popup.js b/tp-popup.js index 2eb8954..0a1d0dc 100644 --- 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(); }