fix(core): update

This commit is contained in:
Philipp Kunz 2023-09-13 01:37:02 +02:00
parent c76d364071
commit 494e8b7e26
11 changed files with 215 additions and 18 deletions

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '1.0.191', version: '1.0.192',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -0,0 +1,15 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<dees-button>This is a slotted Text</dees-button>
<p>
<dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button>
</p>
<p><dees-button type="discreet">This is discreete button</dees-button></p>
<p><dees-button disabled>This is a disabled button</dees-button></p>
<p><dees-button type="big">This is a slotted Text</dees-button></p>
<p><dees-button status="normal">Normal Status</dees-button></p>
<p><dees-button disabled status="pending">Pending Status</dees-button></p>
<p><dees-button disabled status="success">Success Status</dees-button></p>
<p><dees-button disabled status="error">Error Status</dees-button></p>
`;

View File

@ -1,3 +1,4 @@
import { demoFunc } from './dees-button.demo.js';
import { import {
customElement, customElement,
html, html,
@ -20,17 +21,7 @@ declare global {
@customElement('dees-button') @customElement('dees-button')
export class DeesButton extends DeesElement { export class DeesButton extends DeesElement {
public static demo = () => html` public static demo = demoFunc;
<dees-button>This is a slotted Text</dees-button>
<p><dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button></p>
<p><dees-button type="discreet">This is discreete button</dees-button></p>
<p><dees-button disabled>This is a disabled button</dees-button></p>
<p><dees-button type="big">This is a slotted Text</dees-button></p>
<p><dees-button status="normal">Normal Status</dees-button></p>
<p><dees-button disabled status="pending">Pending Status</dees-button></p>
<p><dees-button disabled status="success">Success Status</dees-button></p>
<p><dees-button disabled status="error">Error Status</dees-button></p>
`;
@property({ @property({
reflect: true, reflect: true,

View File

@ -33,7 +33,7 @@ export const demoFunc = () => html`
}, },
}, },
]); ]);
}}>Hello</dees-button> }}>Right-Click for contextmenu</dees-button>
<dees-contextmenu class="withMargin"></dees-contextmenu> <dees-contextmenu class="withMargin"></dees-contextmenu>
<dees-contextmenu <dees-contextmenu
class="withMargin" class="withMargin"

View File

@ -31,7 +31,7 @@ export class DeesContextmenu extends DeesElement {
eventArg.preventDefault(); eventArg.preventDefault();
eventArg.stopPropagation(); eventArg.stopPropagation();
const contextMenu = new DeesContextmenu(); const contextMenu = new DeesContextmenu();
contextMenu.style.position = 'absolute'; contextMenu.style.position = 'fixed';
contextMenu.style.zIndex = '2000'; contextMenu.style.zIndex = '2000';
contextMenu.style.top = `${eventArg.clientY.toString()}px`; contextMenu.style.top = `${eventArg.clientY.toString()}px`;
contextMenu.style.left = `${eventArg.clientX.toString()}px`; contextMenu.style.left = `${eventArg.clientX.toString()}px`;

View File

@ -0,0 +1,22 @@
import { html } from '@design.estate/dees-element';
import { DeesModal } from './dees-modal.js';
export const demoFunc = () => html`
<dees-button @click=${() => {
DeesModal.createAndShow({
heading: 'This is a heading',
content: html`
<dees-form>
<dees-input-text
.label=${'Username'}
>
</dees-input-text>
<dees-input-text
.label=${'Password'}
>
</dees-input-text>
</dees-form>
`
});
}}>open modal</dees-button>
`

View File

@ -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`
<div class="modalContainer" @click=${this.handleOutsideClick}>
<div class="modal">
<div class="heading">${this.heading}</div>
<div class="content">${this.content}</div>
<div class="bottomButtons">
<div class="bottomButton">Cancel</div>
<div class="bottomButton">OK</div>
</div>
</div>
</div>
`;
}
private windowLayer: DeesWindowLayer;
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
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();
}
}

View File

@ -25,7 +25,7 @@ export class DeesSimpleAppDash extends DeesElement {
// INSTANCE // INSTANCE
@property() @property()
public title = 'Dees Simple Login'; public name = 'Dees Simple Login';
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,

View File

@ -1,3 +1,3 @@
import { html } from '@design.estate/dees-element'; import { html } from '@design.estate/dees-element';
export const demoFunc = () => html` <dees-simple-login> Hello there </dees-simple-login> `; export const demoFunc = () => html` <dees-simple-login name="someapp"> Hello there </dees-simple-login> `;

View File

@ -26,7 +26,7 @@ export class DeesSimpleLogin extends DeesElement {
// INSTANCE // INSTANCE
@property() @property()
public title = 'Dees Simple Login'; public name = 'Dees Simple Login';
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,
@ -69,7 +69,7 @@ export class DeesSimpleLogin extends DeesElement {
<div class="loginContainer"> <div class="loginContainer">
<div class="login"> <div class="login">
<dees-form> <dees-form>
<div class="header">Login to ${this.title}</div> <div class="header">Login to ${this.name}</div>
<dees-input-text key="username" label="username" required></dees-input-text> <dees-input-text key="username" label="username" required></dees-input-text>
<dees-input-text key="password" label="password" isPasswordBool required></dees-input-text> <dees-input-text key="password" label="password" isPasswordBool required></dees-input-text>
<dees-form-submit disabled>login</dees-form-submit> <dees-form-submit disabled>login</dees-form-submit>

View File

@ -14,6 +14,7 @@ export * from './dees-input-quantityselector.js';
export * from './dees-input-radio.js'; export * from './dees-input-radio.js';
export * from './dees-input-text.js'; export * from './dees-input-text.js';
export * from './dees-mobilenavigation.js'; export * from './dees-mobilenavigation.js';
export * from './dees-modal.js';
export * from './dees-pdf.js'; export * from './dees-pdf.js';
export * from './dees-simple-appdash.js'; export * from './dees-simple-appdash.js';
export * from './dees-simple-login.js'; export * from './dees-simple-login.js';