Initial version
This commit is contained in:
parent
71a6055d03
commit
fefa2fa99b
82
package-lock.json
generated
Normal file
82
package-lock.json
generated
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
10
package.json
10
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"
|
||||
}
|
||||
}
|
||||
|
||||
129
tp-dialog.js
Normal file
129
tp-dialog.js
Normal file
@ -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`
|
||||
<dialog>
|
||||
${showClose ? html`
|
||||
<div class="close-icon">
|
||||
<tp-icon .icon=${this.icon ? this.icon : TpDialog.closeIcon} dialog-dismiss></tp-icon>
|
||||
</div>
|
||||
` : null}
|
||||
<slot></slot>
|
||||
</dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
open: { type: Boolean, reflect: true },
|
||||
showClose: { type: Boolean },
|
||||
icon: { type: Object },
|
||||
};
|
||||
}
|
||||
|
||||
static get closeIcon() {
|
||||
return svg`<path fill="var(--tp-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
|
||||
}
|
||||
|
||||
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);
|
||||
@ -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);
|
||||
Loading…
Reference in New Issue
Block a user