diff --git a/README.md b/README.md index 1ab27b7..098526a 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# tp-element +# tp-dialog diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..b48bb10 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,82 @@ +{ + "name": "@tp/tp-dialog", + "version": "0.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@lit/reactive-element": { + "version": "1.3.0", + "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.0.tgz", + "integrity": "sha512-0TKSIuJHXNLM0k98fi0AdMIdUoHIYlDHTP+0Vruc2SOs4T6vU1FinXgSvYd8mSrkt+8R+qdRAXvjpqrMXMyBgw==" + }, + "@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.0", + "resolved": "https://verdaccio.codeblob.work/@tp%2ftp-icon/-/tp-icon-1.0.0.tgz", + "integrity": "sha512-/ETh6OPsDmU38niE68ngpZEMc/yaGhbvpuvZW67a1noQHiHOjW+kznhiqNYgV/x4AIxuslgvYquiGfWq+00a4Q==", + "requires": { + "@tp/tp-tooltip": "^1.0.0", + "lit": "^2.2.0" + }, + "dependencies": { + "lit": { + "version": "2.2.0", + "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.0.tgz", + "integrity": "sha512-FDyxUuczo6cJJY/2Bkgfh1872U4ikUvmK1Cb6+lYC1CW+QOo8CaWXCpvPKFzYsz0ojUxoruBLVrECc7VI2f1dQ==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + } + } + }, + "@tp/tp-tooltip": { + "version": "1.0.0", + "resolved": "https://verdaccio.codeblob.work/@tp%2ftp-tooltip/-/tp-tooltip-1.0.0.tgz", + "integrity": "sha512-UtrIK5KWcEiC+HnHOVbgg90j4RjHn3e9ehOBYPZsm6zO+tT7pQJJYFOtJqBW+DDV7jVfH3AvGKCxtzNiJXYvDw==", + "requires": { + "@tp/helpers": "^1.0.0", + "lit": "^2.2.0" + }, + "dependencies": { + "lit": { + "version": "2.2.0", + "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.0.tgz", + "integrity": "sha512-FDyxUuczo6cJJY/2Bkgfh1872U4ikUvmK1Cb6+lYC1CW+QOo8CaWXCpvPKFzYsz0ojUxoruBLVrECc7VI2f1dQ==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + } + } + }, + "@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "lit-element": { + "version": "3.2.0", + "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "lit-html": { + "version": "2.2.0", + "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.0.tgz", + "integrity": "sha512-dJnevgV8VkCuOXLWrjQopDE8nSy8CzipZ/ATfYQv7z7Dct4abblcKecf50gkIScuwCTzKvRLgvTgV0zzagW4gA==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } +} diff --git a/package.json b/package.json index c39fdff..1401b12 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,20 @@ { - "name": "@tp/tp-element", - "version": "0.0.1", + "name": "@tp/tp-dialog", + "version": "1.0.0", "description": "", - "main": "tp-element.js", + "main": "tp-dialog.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-dialog.git" }, "author": "trading_peter", "license": "Apache-2.0", "dependencies": { + "@tp/helpers": "^1.0.1", + "@tp/tp-icon": "^1.0.0", "lit": "^2.2.0" } } diff --git a/tp-dialog.js b/tp-dialog.js new file mode 100644 index 0000000..01d1b7f --- /dev/null +++ b/tp-dialog.js @@ -0,0 +1,129 @@ +/** +@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'; +import { EventHelpers } from '@tp/helpers/event-helpers.js'; +import { closest } from '@tp/helpers/closest.js'; + +class TpDialog extends EventHelpers(LitElement) { + static get styles() { + return [ + css` + :host { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + inset: 0px; + pointer-events: none; + overflow: auto; + } + + :host([open]) { + pointer-events: all; + } + + dialog { + position: relative; + border-radius: var(--tp-dialog-border-radius); + background-color: var(--tp-dialog-bg); + color: var(--text); + border: var(--tp-dialog-border); + padding: var(--tp-dialog-padding); + } + + .close-icon { + position: absolute; + right: 4px; + top: 5px; + --tp-icon-width: 18px; + --tp-icon-height: 18px; + } + ` + ]; + } + + render() { + const { showClose } = this; + return html` + + ${showClose ? html` +
+ +
+ ` : null} + + + `; + } + + static get properties() { + return { + open: { type: Boolean, reflect: true }, + showClose: { type: Boolean }, + icon: { type: Object }, + }; + } + + static get closeIcon() { + return svg``; + } + + get dialog() { + return this.shadowRoot.querySelector('dialog'); + } + + connectedCallback() { + super.connectedCallback(); + this.listen(this, 'click', '_onDialogClick'); + } + + disconnectedCallback() { + super.disconnectedCallback(); + this.unlisten(this, 'click', '_onDialogClick'); + } + + show() { + this.dialog.show(); + this.open = true; + } + + showModal() { + this.dialog.showModal(); + this.open = true; + } + + close() { + this.dialog.close(); + this.open = false; + } + + _onDialogClick(event) { + var rootTarget = event.composedPath()[0]; + var target = closest(rootTarget, '[dialog-dismiss]', true) || closest(rootTarget, '[dialog-confirm]', true); + while (target && target !== this) { + if (target.hasAttribute) { + if (target.hasAttribute('dialog-dismiss')) { + var reason = target.getAttribute('dialog-dismiss'); + this.dispatchEvent(new CustomEvent('dismissed', { detail: reason.length > 0 ? reason : true, bubbles: true, composed: true })); + this.close(); + event.stopPropagation(); + break; + } else if (target.hasAttribute('dialog-confirm')) { + var reason = target.getAttribute('dialog-confirm'); + this.dispatchEvent(new CustomEvent('confirmed', { detail: reason.length > 0 ? reason : true, bubbles: true, composed: true })); + this.close(); + event.stopPropagation(); + break; + } + } + target = target.parentNode; + } + } +} + +window.customElements.define('tp-dialog', TpDialog); 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);