fix(core): update

This commit is contained in:
Philipp Kunz 2021-08-25 13:51:55 +02:00
parent 0adb319616
commit 486b8cb6a6
9 changed files with 104 additions and 15 deletions

View File

@ -22,18 +22,18 @@ export class DeesButton extends DeesElement {
public static demo = () => html`<dees-button></dees-button>`; public static demo = () => html`<dees-button></dees-button>`;
@property() @property()
text: string; public text: string;
@property() @property()
eventDetailData: string; public eventDetailData: string;
@property({ @property({
type: Boolean type: Boolean
}) })
disabled = false; public disabled = false;
@property() @property()
isHidden = false; public isHidden = false;
@property() @property()
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal'; public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
@ -59,6 +59,7 @@ export class DeesButton extends DeesElement {
display: block; display: block;
text-align: center; text-align: 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')};
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')}; border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
border-radius: 2px; border-radius: 2px;
line-height: 40px; line-height: 40px;

View File

@ -1,4 +1,4 @@
import { customElement, html, DeesElement, css, cssManager } from '@designestate/dees-element'; import { customElement, html, DeesElement, css, cssManager, property } from '@designestate/dees-element';
import { DeesForm } from './dees-form'; import { DeesForm } from './dees-form';
declare global { declare global {
@ -9,6 +9,13 @@ declare global {
@customElement('dees-form-submit') @customElement('dees-form-submit')
export class DeesFormSubmit extends DeesElement { export class DeesFormSubmit extends DeesElement {
public static demo = () => html`<dees-form-submit></dees-form-submit>`;
@property({
type: Boolean
})
public disabled = false;
constructor() { constructor() {
super(); super();
} }
@ -16,10 +23,13 @@ export class DeesFormSubmit extends DeesElement {
public static styles = [cssManager.defaultStyles, css``]; public static styles = [cssManager.defaultStyles, css``];
public render() { public render() {
return html` <dees-button @click="${this.submit}">${this.textContent}</dees-button> `; return html`<dees-button @click="${this.submit}" .disabled="${this.disabled}">${this.textContent}</dees-button> `;
} }
public async submit() { public async submit() {
if(this.disabled) {
return;
}
const parentElement: DeesForm = this.parentElement as DeesForm; const parentElement: DeesForm = this.parentElement as DeesForm;
parentElement.gatherAndDispatch(); parentElement.gatherAndDispatch();
} }

View File

@ -5,6 +5,7 @@ import { DeesInputText } from './dees-input-text';
import { DeesInputQuantitySelector } from './dees-input-quantityselector'; import { DeesInputQuantitySelector } from './dees-input-quantityselector';
import { DeesInputRadio } from './dees-input-radio'; import { DeesInputRadio } from './dees-input-radio';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
import { DeesFormSubmit } from './dees-form-submit';
export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>; export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>;
@ -18,9 +19,9 @@ declare global {
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">
<dees-input-text key="hello1" label="a text"></dees-input-text> <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
<dees-input-text 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 key="hello3" label="another text"></dees-input-checkbox> <dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
<dees-form-submit>Submit</dees-form-submit> <dees-form-submit>Submit</dees-form-submit>
</dees-form> </dees-form>
`; `;
@ -41,12 +42,14 @@ export class DeesForm extends DeesElement {
public firstUpdated() { public firstUpdated() {
const formChildren = this.getFormChildren(); const formChildren = this.getFormChildren();
this.checkRequiredStatus();
for (const child of formChildren) { for (const child of formChildren) {
child.changeSubject.subscribe(async (elementArg: TFormElement) => { child.changeSubject.subscribe(async (elementArg: TFormElement) => {
const valueObject = await this.gatherData(); const valueObject = await this.gatherData();
this.changeSubject.next(valueObject); this.changeSubject.next(valueObject);
console.log(valueObject); console.log(valueObject);
}) this.checkRequiredStatus();
});
} }
} }
@ -62,6 +65,26 @@ export class DeesForm extends DeesElement {
return formChildren; return formChildren;
} }
public async checkRequiredStatus() {
console.log('checking the required status.')
const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit;
for (const childArg of children) {
if(childArg instanceof DeesFormSubmit) {
submitButton = childArg;
}
}
let requiredOK = true;
for (const childArg of this.getFormChildren()) {
if (childArg.required && !childArg.value) {
requiredOK = false;
}
}
submitButton.disabled = !requiredOK;
console.log(submitButton);
}
public async gatherData() { public async gatherData() {
const children = this.getFormChildren(); const children = this.getFormChildren();
const valueObject: { [key: string]: string | number | boolean} = {}; const valueObject: { [key: string]: string | number | boolean} = {};
@ -80,5 +103,7 @@ export class DeesForm extends DeesElement {
bubbles: true bubbles: true
}); });
this.dispatchEvent(formDataEvent); this.dispatchEvent(formDataEvent);
console.log('dispatched data:')
console.log(valueObject);
} }
} }

View File

@ -1,4 +1,10 @@
import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element'; import {
customElement,
DeesElement,
TemplateResult,
property,
html,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
declare global { declare global {
@ -15,15 +21,25 @@ export class DeesInputCheckbox extends DeesElement {
// INSTANCE // INSTANCE
public changeSubject = new domtools.rxjs.Subject(); public changeSubject = new domtools.rxjs.Subject();
@property() @property({
type: String,
})
public key: string; public key: string;
@property() @property({
type: String,
})
public label: string = 'Label'; public label: string = 'Label';
@property() @property({
type: Boolean,
})
public value: boolean = false; public value: boolean = false;
@property({
type: Boolean,
})
public required: boolean = false;
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`

View File

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

View File

@ -42,6 +42,15 @@ export class DeesInputFileupload extends DeesElement {
@property() @property()
public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle'; public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
@property({
type: Boolean,
})
public required: boolean = false;
constructor() {
super();
}
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`

View File

@ -22,6 +22,15 @@ export class DeesInputQuantitySelector extends DeesElement {
}) })
public value: number = 1; public value: number = 1;
@property({
type: Boolean,
})
public required: boolean = false;
constructor() {
super();
}
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
${domtools.elementBasic.styles} ${domtools.elementBasic.styles}

View File

@ -23,6 +23,15 @@ export class DeesInputRadio extends LitElement {
@property() @property()
public value: boolean = false; public value: boolean = false;
@property({
type: Boolean,
})
public required: boolean = false;
constructor() {
super();
}
public render(): TemplateResult { public render(): TemplateResult {
return html ` return html `
<style> <style>

View File

@ -23,6 +23,11 @@ export class DeesInputText extends DeesElement {
@property() @property()
public value: string; public value: string;
@property({
type: Boolean
})
public required: boolean = false;
public render(): TemplateResult { public render(): TemplateResult {
return html ` return html `
<style> <style>