diff --git a/src/declaform/declaform.ts b/src/declaform/declaform.ts index 77fe085..34ea9ce 100644 --- a/src/declaform/declaform.ts +++ b/src/declaform/declaform.ts @@ -21,9 +21,13 @@ export class Declaform extends HTMLElement { const customInputs = this.getAttribute('customInputs')?.split(',').map(x => x.trim()) ?? []; const selectors = ['input', 'select'].concat(customInputs).map(x => `${x}[name]`).join(','); const inputs = Array.from(this.querySelectorAll(selectors)); + // group inputs by name - const inputGroups = new Map(); + const inputGroups = new Map(); for (const input of inputs) { + if (!isFieldElement(input)) { + throw new Error(`[Declaform] Error: input does not have all fields: ["name", "type", "value"].`); + } const name = input.getAttribute('name'); if (name) { const group = inputGroups.get(name); @@ -47,22 +51,64 @@ export class Declaform extends HTMLElement { get fields() { return this._fields; } + + toJSON() {} } customElements.define('decla-form', Declaform); +interface FieldElement { + name: string; + type: string; + value: any; +} + +function isFieldElement(x: unknown): x is FieldElement { + if (typeof x !== 'object' || !x) { + return false; + } + + if (!('name' in x) || !('type' in x) || !('value' in x)) { + return false; + } + + return true; +} + +/** + * This is the object that ties a group of inputs to a name. + * It assumes that every input in the group is of the same type. + */ class Field { - constructor(private name: string, private _inputs: Element[]) { + + /* The character that gets used to join multiple field values */ + static joining_char = ','; + + private _type: string; + + constructor(private name: string, private _inputs: FieldElement[]) { + if (this._inputs.length === 0) { + throw new Error("[Declaform] Error: cannot construct Field with empty inputs array.") + } + this._type = this._inputs[0]!.type; } get value() { - return ''; + switch(this._type) { + default: + case 'date': + case 'datatime-local': + case 'email': + case 'number': + case 'text': + return this._inputs.map(x => x.value); + } } set value(x: any) { } get type() { - return ''; + return this._type; } } \ No newline at end of file