fix(core): update

This commit is contained in:
Philipp Kunz 2021-08-27 13:38:08 +02:00
parent 54ce305cf1
commit 2f52f14cf9
6 changed files with 231 additions and 20 deletions

View File

@ -19,7 +19,17 @@ declare global {
@customElement('dees-button') @customElement('dees-button')
export class DeesButton extends DeesElement { export class DeesButton extends DeesElement {
public static demo = () => html`<dees-button>This is a slotted Text</dees-button>`; public static demo = () => 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>
`;
@property() @property()
public text: string; public text: string;
@ -32,12 +42,21 @@ export class DeesButton extends DeesElement {
}) })
public disabled = false; public disabled = false;
@property() @property({
type: Boolean
})
public isHidden = false; public isHidden = false;
@property() @property({
type: String
})
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal'; public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
@property({
type: String
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
constructor() { constructor() {
super(); super();
} }
@ -54,10 +73,12 @@ export class DeesButton extends DeesElement {
} }
.button { .button {
position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
font-size: 14px; font-size: 14px;
display: block; display: flex;
text-align: center; justify-content: center;
align-items: center;
background: ${cssManager.bdTheme('#eee', '#333')}; background: ${cssManager.bdTheme('#eee', '#333')};
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')}; box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')}; border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
@ -67,6 +88,7 @@ export class DeesButton extends DeesElement {
min-width: 100px; min-width: 100px;
user-select: none; user-select: none;
color: ${cssManager.bdTheme('#333', ' #ccc')}; color: ${cssManager.bdTheme('#333', ' #ccc')};
max-width: 500px;
} }
.button:hover { .button:hover {
@ -91,41 +113,71 @@ export class DeesButton extends DeesElement {
.button.highlighted { .button.highlighted {
background: #e4002b; background: #e4002b;
border: none;
color: #fff;
}
.button.highlighted:hover {
background: #b50021;
border: none;
color: #fff; color: #fff;
} }
.button.discreet { .button.discreet {
background: none; background: none;
border: 1px solid #9b9b9e; border: 1px solid #9b9b9e;
color: #000; color: ${cssManager.bdTheme('#000', '#fff')};
} }
.button.discreet:hover { .button.discreet:hover {
background: rgba(0, 0, 0, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.hidden { .button.hidden {
display: none; display: none;
} }
.big { .button.big {
display: inline-block; width: 300px;
line-height: 48px; line-height: 48px;
font-size: 16px; font-size: 16px;
padding: 0px 48px; padding: 0px 48px;
margin-top: 36px; margin-top: 36px;
} }
.button.pending {
background: #0277bd70;
color: #fff;
}
.button.success {
background: #8BC34A70;
color: #fff;
}
.button.error {
background: #E64A1970;
color: #fff;
}
dees-spinner {
position: absolute;
left: 10px;
}
`, `,
]; ];
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<div <div
class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.disabled class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.status} ${this.disabled
? 'disabled' ? 'disabled'
: null}" : null}"
@click="${this.dispatchClick}" @click="${this.dispatchClick}"
> >
${this.text ? this.text : html`<slot></slot>`} ${this.status === 'normal' ? html``: html`
<dees-spinner status="${this.status}"></dees-spinner>
`}
<div class="textbox">${this.text ? this.text : html`<slot></slot>`}</div>
</div> </div>
`; `;
} }

View File

@ -28,6 +28,11 @@ export class DeesFormSubmit extends DeesElement {
}) })
public text: string; public text: string;
@property({
type: String
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
constructor() { constructor() {
super(); super();
} }
@ -36,7 +41,7 @@ export class DeesFormSubmit extends DeesElement {
public render() { public render() {
return html` return html`
<dees-button @click="${this.submit}" .disabled="${this.disabled}"> <dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled}>
${this.text ? this.text : html`<slot></slot>`} ${this.text ? this.text : html`<slot></slot>`}
</dees-button> </dees-button>
`; `;

View File

@ -20,7 +20,7 @@ export class DeesForm extends DeesElement {
public static demo = () => html` public static demo = () => html`
<dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => { <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
const form: DeesForm = eventArg.currentTarget; const form: DeesForm = eventArg.currentTarget;
form.setStatus('freeze', 'authenticating...'); form.setStatus('pending', 'authenticating...');
await domtools.plugins.smartdelay.delayFor(1000); await domtools.plugins.smartdelay.delayFor(1000);
form.setStatus('success', 'authenticated!'); form.setStatus('success', 'authenticated!');
}}> }}>
@ -116,13 +116,21 @@ export class DeesForm extends DeesElement {
console.log(valueObject); console.log(valueObject);
} }
public setStatus (visualStateArg: 'normal' | 'freeze' | 'error' | 'success', textStateArg: string) { public setStatus (visualStateArg: 'normal' | 'pending' | 'error' | 'success', textStateArg: string) {
const inputChildren = this.getFormChildren(); const inputChildren = this.getFormChildren();
const submitButton = this.getSubmitButton(); const submitButton = this.getSubmitButton();
switch(visualStateArg) { switch(visualStateArg) {
case 'freeze': case 'pending':
submitButton.disabled = true; submitButton.disabled = true;
submitButton.status = 'pending';
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
break;
case 'success':
submitButton.disabled = true;
submitButton.status = 'success';
for (const inputChild of inputChildren) { for (const inputChild of inputChildren) {
inputChild.disabled = true; inputChild.disabled = true;
} }

View File

@ -107,7 +107,7 @@ export class DeesInputCheckbox extends DeesElement {
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')}; border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
} }
.checkmark { .checkbox .checkmark {
display: inline-block; display: inline-block;
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -116,16 +116,16 @@ export class DeesInputCheckbox extends DeesElement {
transform: rotate(45deg); transform: rotate(45deg);
} }
.checkmark_stem { .checkbox .checkmark_stem {
position: absolute; position: absolute;
width: 3px; width: 3px;
height: 9px; height: 9px;
background-color: #ccc; background-color: #fff;
left: 11px; left: 11px;
top: 6px; top: 6px;
} }
.checkmark_kick { .checkbox .checkmark_kick {
position: absolute; position: absolute;
width: 3px; width: 3px;
height: 3px; height: 3px;
@ -134,6 +134,10 @@ export class DeesInputCheckbox extends DeesElement {
top: 12px; top: 12px;
} }
.checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
background-color: ${cssManager.bdTheme('#333', '#fff')};
}
img { img {
padding: 4px; padding: 4px;
} }

View File

@ -0,0 +1,141 @@
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
cssManager,
css,
unsafeCSS,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-spinner': DeesSpinner;
}
}
@customElement('dees-spinner')
export class DeesSpinner extends DeesElement {
public static demo = () => html`
<dees-spinner></dees-spinner>
<dees-spinner status="success"></dees-spinner>
<dees-spinner status="error"></dees-spinner>
`;
@property({
type: Number,
})
public size = 20;
@property()
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
}
#loading {
transition: all 0.3s;
display: flex;
justify-content: center;
align-content: center;
background: #8bc34a00;
border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.3)')};
border-radius: 50%;
border-top-color: ${cssManager.bdTheme('#333', '#fff')};
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
#loading.success {
border: 0px solid rgba(255, 255, 255, 0);
background: #8bc34a;
border-radius: 50%;
animation: none;
-webkit-animation: none;
}
#loading.error {
border: 0px solid rgba(255, 255, 255, 0);
background: #e64a19;
border-radius: 50%;
animation: none;
-webkit-animation: none;
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
#loading .checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
#loading .checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
background-color: #fff;
left: 9px;
top: 5px;
}
#loading .checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
background-color: #fff;
left: 6px;
top: 11px;
}
#loading.disabled .checkmark_stem,
#loading.disabled .checkmark_kick {
background-color: ${cssManager.bdTheme('#333', '#fff')};
}
`,
];
render() {
return html`
<style>
#loading {
width: ${this.size}px;
height: ${this.size}px;
}
</style>
<div class="${this.status}" id="loading">
${this.status === 'success' || this.status === 'error'
? html`
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
`
: null}
</div>
`;
}
}

View File

@ -8,6 +8,7 @@ export * from './dees-input-fileupload';
export * from './dees-input-quantityselector'; export * from './dees-input-quantityselector';
export * from './dees-input-radio'; export * from './dees-input-radio';
export * from './dees-input-text'; export * from './dees-input-text';
export * from './dees-spinner';
export * from './dees-toast'; export * from './dees-toast';
export * from './dees-updater'; export * from './dees-updater';
export * from './dees-windowlayer'; export * from './dees-windowlayer';