dees-catalog/ts_web/elements/dees-form.ts
2021-02-13 21:52:36 +00:00

59 lines
1.7 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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';
declare global {
interface HTMLElementTagNameMap {
'dees-form': DeesForm;
}
}
@customElement('dees-form')
export class DeesForm extends LitElement {
public static demo = () => html`
<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 key="hello2" label="also a text"></dees-input-text>
<dees-input-checkbox key="hello3" label="another text"></dees-input-checkbox>
<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);
}
}