fix(core): update

This commit is contained in:
Philipp Kunz 2021-08-26 21:30:35 +02:00
parent c1594736ec
commit 9d5f0b5ff8
9 changed files with 109 additions and 22 deletions

14
package-lock.json generated
View File

@ -9,7 +9,7 @@
"version": "1.0.41", "version": "1.0.41",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@designestate/dees-domtools": "^1.0.88", "@designestate/dees-domtools": "^1.0.89",
"@designestate/dees-element": "^1.0.19", "@designestate/dees-element": "^1.0.19",
"@designestate/dees-wcctools": "^1.0.57", "@designestate/dees-wcctools": "^1.0.57",
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/fontawesome-svg-core": "^1.2.36",
@ -1893,9 +1893,9 @@
} }
}, },
"node_modules/@designestate/dees-domtools": { "node_modules/@designestate/dees-domtools": {
"version": "1.0.88", "version": "1.0.89",
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.88.tgz", "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
"integrity": "sha512-OTcZtJFPe5iQhASkX+ccvbX2IJssImzsbd6jVMw9x/NTRgffjdNFw2aGo+8AYjyMEoxSJ0Th+uPAy2dyCcOmYw==", "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@apiglobal/typedrequest": "^1.0.56", "@apiglobal/typedrequest": "^1.0.56",
@ -17435,9 +17435,9 @@
} }
}, },
"@designestate/dees-domtools": { "@designestate/dees-domtools": {
"version": "1.0.88", "version": "1.0.89",
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.88.tgz", "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
"integrity": "sha512-OTcZtJFPe5iQhASkX+ccvbX2IJssImzsbd6jVMw9x/NTRgffjdNFw2aGo+8AYjyMEoxSJ0Th+uPAy2dyCcOmYw==", "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
"requires": { "requires": {
"@apiglobal/typedrequest": "^1.0.56", "@apiglobal/typedrequest": "^1.0.56",
"@designestate/dees-comms": "^1.0.9", "@designestate/dees-comms": "^1.0.9",

View File

@ -13,7 +13,7 @@
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@designestate/dees-domtools": "^1.0.88", "@designestate/dees-domtools": "^1.0.89",
"@designestate/dees-element": "^1.0.19", "@designestate/dees-element": "^1.0.19",
"@designestate/dees-wcctools": "^1.0.57", "@designestate/dees-wcctools": "^1.0.57",
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/fontawesome-svg-core": "^1.2.36",

View File

@ -18,7 +18,12 @@ declare global {
@customElement('dees-form') @customElement('dees-form')
export class DeesForm extends DeesElement { 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"> <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
const form: DeesForm = eventArg.currentTarget;
form.setStatus('freeze', 'authenticating...');
await domtools.plugins.smartdelay.delayFor(1000);
form.setStatus('success', 'authenticated!');
}}>
<dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text> <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
<dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text> <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
<dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox> <dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
@ -65,8 +70,7 @@ export class DeesForm extends DeesElement {
return formChildren; return formChildren;
} }
public async checkRequiredStatus() { public getSubmitButton() {
console.log('checking the required status.')
const children: Array<DeesElement> = this.children as any; const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit; let submitButton: DeesFormSubmit;
for (const childArg of children) { for (const childArg of children) {
@ -74,6 +78,12 @@ export class DeesForm extends DeesElement {
submitButton = childArg; submitButton = childArg;
} }
} }
return submitButton;
}
public async checkRequiredStatus() {
console.log('checking the required status.')
let requiredOK = true; let requiredOK = true;
for (const childArg of this.getFormChildren()) { for (const childArg of this.getFormChildren()) {
@ -81,8 +91,7 @@ export class DeesForm extends DeesElement {
requiredOK = false; requiredOK = false;
} }
} }
submitButton.disabled = !requiredOK; this.getSubmitButton().disabled = !requiredOK;
console.log(submitButton);
} }
public async gatherData() { public async gatherData() {
@ -106,4 +115,21 @@ export class DeesForm extends DeesElement {
console.log('dispatched data:') console.log('dispatched data:')
console.log(valueObject); console.log(valueObject);
} }
}
public setStatus (visualStateArg: 'normal' | 'freeze' | 'error' | 'success', textStateArg: string) {
const inputChildren = this.getFormChildren();
const submitButton = this.getSubmitButton();
switch(visualStateArg) {
case 'freeze':
submitButton.disabled = true;
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
break;
}
submitButton.text = textStateArg;
}
}

View File

@ -4,6 +4,8 @@ import {
TemplateResult, TemplateResult,
property, property,
html, html,
css,
cssManager
} from '@designestate/dees-element'; } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@ -41,6 +43,11 @@ export class DeesInputCheckbox extends DeesElement {
}) })
public required: boolean = false; public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
${domtools.elementBasic.styles} ${domtools.elementBasic.styles}
@ -95,6 +102,11 @@ export class DeesInputCheckbox extends DeesElement {
border: 1px solid #039BE5; border: 1px solid #039BE5;
} }
.checkbox.disabled {
background: none;
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
}
.checkmark { .checkmark {
display: inline-block; display: inline-block;
width: 22px; width: 22px;
@ -127,7 +139,7 @@ export class DeesInputCheckbox extends DeesElement {
} }
</style> </style>
<div class="maincontainer" @click="${this.toggleSelected}"> <div class="maincontainer" @click="${this.toggleSelected}">
<div class="checkbox ${this.value ? 'selected' : ''}"> <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
${this.value ${this.value
? html` ? html`
<span class="checkmark"> <span class="checkmark">
@ -143,6 +155,9 @@ export class DeesInputCheckbox extends DeesElement {
} }
public async toggleSelected() { public async toggleSelected() {
if (this.disabled) {
return;
}
this.value = !this.value; this.value = !this.value;
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('newValue', { new CustomEvent('newValue', {

View File

@ -35,6 +35,11 @@ export class DeesInputDropdown extends LitElement {
}) })
public required: boolean = false; public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
${domtools.elementBasic.styles} ${domtools.elementBasic.styles}

View File

@ -47,8 +47,13 @@ export class DeesInputFileupload extends DeesElement {
}) })
public required: boolean = false; public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
constructor() { constructor() {
super(); super()
} }
public static styles = [ public static styles = [

View File

@ -27,6 +27,11 @@ export class DeesInputQuantitySelector extends DeesElement {
}) })
public required: boolean = false; public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
constructor() { constructor() {
super(); super();
} }

View File

@ -28,6 +28,11 @@ export class DeesInputRadio extends LitElement {
}) })
public required: boolean = false; public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
constructor() { constructor() {
super(); super();
} }

View File

@ -1,4 +1,4 @@
import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element'; import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
declare global { declare global {
@ -14,13 +14,19 @@ export class DeesInputText extends DeesElement {
// INSTANCE // INSTANCE
public changeSubject = new domtools.rxjs.Subject(); public changeSubject = new domtools.rxjs.Subject();
@property() @property({
type: String
})
public label: string = 'Label'; public label: string = 'Label';
@property() @property({
type: String
})
public key: string; public key: string;
@property() @property({
type: String
})
public value: string; public value: string;
@property({ @property({
@ -28,6 +34,11 @@ export class DeesInputText extends DeesElement {
}) })
public required: boolean = false; public required: boolean = false;
@property({
type: Boolean
})
public disabled: boolean = false;
public render(): TemplateResult { public render(): TemplateResult {
return html ` return html `
<style> <style>
@ -65,8 +76,15 @@ export class DeesInputText extends DeesElement {
line-height: 48px; line-height: 48px;
transition: all 0.2s; transition: all 0.2s;
outline: none; outline: none;
color: #ccc;
font-size: 16px; font-size: 16px;
color: ${this.goBright ? '#333' : '#ccc'};
}
input:disabled {
background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
color: #9b9b9e;
cursor: default;
} }
input:focus { input:focus {
@ -76,7 +94,7 @@ export class DeesInputText extends DeesElement {
</style> </style>
<div class="maincontainer"> <div class="maincontainer">
<div class="label">${this.label}</div> <div class="label">${this.label}</div>
<input type="text" @input="${this.updateValue}" /> <input type="text" @input="${this.updateValue}" .disabled=${this.disabled} />
</div> </div>
`; `;
} }
@ -86,4 +104,12 @@ export class DeesInputText extends DeesElement {
this.value = target.value; this.value = target.value;
this.changeSubject.next(this); this.changeSubject.next(this);
} }
public async freeze() {
this.disabled = true;
}
public async unfreeze() {
this.disabled = false;
}
} }