From 494e8b7e260a239ad75e266f8dfbd825eb00547d Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Wed, 13 Sep 2023 01:37:02 +0200 Subject: [PATCH] fix(core): update --- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/dees-button.demo.ts | 15 ++ ts_web/elements/dees-button.ts | 13 +- ts_web/elements/dees-contextmenu.demo.ts | 2 +- ts_web/elements/dees-contextmenu.ts | 2 +- ts_web/elements/dees-modal.demo.ts | 22 +++ ts_web/elements/dees-modal.ts | 168 ++++++++++++++++++++++ ts_web/elements/dees-simple-appdash.ts | 2 +- ts_web/elements/dees-simple-login.demo.ts | 2 +- ts_web/elements/dees-simple-login.ts | 4 +- ts_web/elements/index.ts | 1 + 11 files changed, 215 insertions(+), 18 deletions(-) create mode 100644 ts_web/elements/dees-button.demo.ts create mode 100644 ts_web/elements/dees-modal.demo.ts create mode 100644 ts_web/elements/dees-modal.ts diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 1b05d4f..4beed21 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '1.0.191', + version: '1.0.192', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-button.demo.ts b/ts_web/elements/dees-button.demo.ts new file mode 100644 index 0000000..8732eba --- /dev/null +++ b/ts_web/elements/dees-button.demo.ts @@ -0,0 +1,15 @@ +import { html } from '@design.estate/dees-element'; + +export const demoFunc = () => html` + This is a slotted Text +

+ Highlighted +

+

This is discreete button

+

This is a disabled button

+

This is a slotted Text

+

Normal Status

+

Pending Status

+

Success Status

+

Error Status

+`; diff --git a/ts_web/elements/dees-button.ts b/ts_web/elements/dees-button.ts index 3c1871d..86a840e 100644 --- a/ts_web/elements/dees-button.ts +++ b/ts_web/elements/dees-button.ts @@ -1,3 +1,4 @@ +import { demoFunc } from './dees-button.demo.js'; import { customElement, html, @@ -20,17 +21,7 @@ declare global { @customElement('dees-button') export class DeesButton extends DeesElement { - public static demo = () => html` - This is a slotted Text -

Highlighted

-

This is discreete button

-

This is a disabled button

-

This is a slotted Text

-

Normal Status

-

Pending Status

-

Success Status

-

Error Status

- `; + public static demo = demoFunc; @property({ reflect: true, diff --git a/ts_web/elements/dees-contextmenu.demo.ts b/ts_web/elements/dees-contextmenu.demo.ts index 8449f57..5fb976c 100644 --- a/ts_web/elements/dees-contextmenu.demo.ts +++ b/ts_web/elements/dees-contextmenu.demo.ts @@ -33,7 +33,7 @@ export const demoFunc = () => html` }, }, ]); -}}>Hello +}}>Right-Click for contextmenu html` + { + DeesModal.createAndShow({ + heading: 'This is a heading', + content: html` + + + + + + + ` + }); + }}>open modal +` \ No newline at end of file diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts new file mode 100644 index 0000000..b577bae --- /dev/null +++ b/ts_web/elements/dees-modal.ts @@ -0,0 +1,168 @@ +import { demoFunc } from './dees-modal.demo.js'; +import { + customElement, + html, + DeesElement, + property, + type TemplateResult, + cssManager, + css, + type CSSResult, + unsafeCSS, + unsafeHTML, + state, +} from '@design.estate/dees-element'; + +import * as domtools from '@design.estate/dees-domtools'; +import { DeesWindowLayer } from './dees-windowlayer.js'; + +declare global { + interface HTMLElementTagNameMap { + 'dees-modal': DeesModal; + } +} + +@customElement('dees-modal') +export class DeesModal extends DeesElement { + // STATIC + public static demo = demoFunc; + + public static async createAndShow(optionsArg: { heading: string; content: TemplateResult }) { + const body = document.body; + const modal = new DeesModal(); + modal.heading = optionsArg.heading; + modal.content = optionsArg.content; + modal.windowLayer = await DeesWindowLayer.createAndShow(); + modal.windowLayer.addEventListener('click', async () => { + await modal.destroy(); + }); + body.append(modal.windowLayer); + body.append(modal); + } + + // INSTANCE + + @property({ + type: String, + }) + public heading = ''; + + @state({}) + public content: TemplateResult; + + constructor() { + super(); + } + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + font-family: 'Mona Sans', 'Inter', sans-serif; + color: ${cssManager.bdTheme('#333', '#fff')}; + } + .modalContainer { + display: flex; + position: fixed; + width: 100vw; + height: 100vh; + box-sizing: border-box; + align-items: center; + justify-content: center; + z-index: 2000; + } + .modal { + will-change: transform; + transform: translateY(10px); + opacity: 0; + width: 480px; + min-height: 120px; + background: #111; + border-radius: 8px; + border: 1px solid #222; + transition: all 0.2s; + overflow: hidden; + } + + .modal.show { + opacity: 1; + transform: translateY(0px); + } + + .modal .heading { + height: 32px; + font-family: 'Hubot Sans', 'Inter', sans-serif; + line-height: 32px; + text-align: center; + font-weight: 600; + font-size: 12px; + border-bottom: 1px solid #222; + } + + .modal .content { + padding: 16px; + } + .modal .bottomButtons { + display: grid; + grid-template-columns: 1fr 1fr; + border-top: 1px solid #222; + } + + .modal .bottomButtons .bottomButton { + height: 40px; + line-height: 40px; + text-align: center; + font-size: 14px; + border-right: 1px solid #222; + cursor: pointer; + } + .modal .bottomButtons .bottomButton:hover { + background: #222; + } + .modal .bottomButtons .bottomButton:last-child { + border-right: none; + } + `, + ]; + + public render(): TemplateResult { + return html` +
+
+
${this.heading}
+
${this.content}
+
+
Cancel
+
OK
+
+
+
+ `; + } + + private windowLayer: DeesWindowLayer; + public async firstUpdated(_changedProperties: Map) { + super.firstUpdated(_changedProperties); + const domtools = await this.domtoolsPromise; + await domtools.convenience.smartdelay.delayFor(30); + const modal = this.shadowRoot.querySelector('.modal'); + modal.classList.add('show'); + } + + public async handleOutsideClick(eventArg: MouseEvent) { + eventArg.stopPropagation(); + const modalContainer = this.shadowRoot.querySelector('.modalContainer'); + if (eventArg.target === modalContainer) { + await this.destroy(); + } + } + + public async destroy() { + const domtools = await this.domtoolsPromise; + const modal = this.shadowRoot.querySelector('.modal'); + modal.classList.remove('show'); + await domtools.convenience.smartdelay.delayFor(200); + document.body.removeChild(this); + await this.windowLayer.destroy(); + } +} diff --git a/ts_web/elements/dees-simple-appdash.ts b/ts_web/elements/dees-simple-appdash.ts index d80a3e6..1c8c5c7 100644 --- a/ts_web/elements/dees-simple-appdash.ts +++ b/ts_web/elements/dees-simple-appdash.ts @@ -25,7 +25,7 @@ export class DeesSimpleAppDash extends DeesElement { // INSTANCE @property() - public title = 'Dees Simple Login'; + public name = 'Dees Simple Login'; public static styles = [ cssManager.defaultStyles, diff --git a/ts_web/elements/dees-simple-login.demo.ts b/ts_web/elements/dees-simple-login.demo.ts index 621bfe9..27e7aac 100644 --- a/ts_web/elements/dees-simple-login.demo.ts +++ b/ts_web/elements/dees-simple-login.demo.ts @@ -1,3 +1,3 @@ import { html } from '@design.estate/dees-element'; -export const demoFunc = () => html` Hello there `; +export const demoFunc = () => html` Hello there `; diff --git a/ts_web/elements/dees-simple-login.ts b/ts_web/elements/dees-simple-login.ts index dca7f2a..02ce5aa 100644 --- a/ts_web/elements/dees-simple-login.ts +++ b/ts_web/elements/dees-simple-login.ts @@ -26,7 +26,7 @@ export class DeesSimpleLogin extends DeesElement { // INSTANCE @property() - public title = 'Dees Simple Login'; + public name = 'Dees Simple Login'; public static styles = [ cssManager.defaultStyles, @@ -69,7 +69,7 @@ export class DeesSimpleLogin extends DeesElement {