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);
|
|||
|
|
}
|
|||
|
|
}
|