51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { customElement, html, TemplateResult, LitElement } from 'lit-element';
|
||
|
||
import { DeesInputCheckbox } from './dees-input-checkbox';
|
||
import { DeesInputText } from './dees-input-text';
|
||
import { DeesInputQuantitySelector } from './dees-input-quantityselector';
|
||
import { DeesInputRadio } from './dees-input-radio';
|
||
|
||
@customElement('dees-form')
|
||
export class DeesForm extends LitElement {
|
||
public static demo = () => html`
|
||
<dees-form style="display: block; margin:auto; width: 500px; padding: 20px; background: #111;">
|
||
<dees-input-text key="hello1"></dees-input-text>
|
||
<dees-input-text key="hello2"></dees-input-text>
|
||
<dees-form-submit>Submit</dees-form-submit>
|
||
</dees-form>`;
|
||
|
||
public name: string = 'myform';
|
||
|
||
public render(): TemplateResult {
|
||
return html`
|
||
<style>
|
||
:host {
|
||
display: contents;
|
||
}
|
||
</style>
|
||
<slot></slot>
|
||
`;
|
||
}
|
||
|
||
public async gatherAndDispatch() {
|
||
|
||
const children: Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio> = this.children as any;
|
||
const valueObject: { [key: string]: string | number | boolean} = {};
|
||
for (const child of children) {
|
||
if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
|
||
valueObject[child.key] = child.value;
|
||
}
|
||
}
|
||
|
||
|
||
console.log(valueObject);
|
||
const formDataEvent = new CustomEvent('formData', {
|
||
detail: {
|
||
data: valueObject
|
||
},
|
||
bubbles: true
|
||
});
|
||
this.dispatchEvent(formDataEvent);
|
||
}
|
||
}
|