field-group.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

field-group.ts
View Options

	import { FlatTemplatable, tempstream } from "tempstream";
	import { FormControl, FormControlContext } from "./form-control.js";
	import { FormFieldControl } from "./form-field-control.js";

	export class FieldGroup extends FormFieldControl {
	constructor(
	public controls: FormControl[],
	public options: {
	label?: string;
	classes?: string[];
	containerID?: string;
	} = {}
	) {
	super([]);
	}

	preLabel(): FlatTemplatable {
	return "";
	}

	preLabelContainer(): FlatTemplatable {
	return "";
	}

	postLabel(): FlatTemplatable {
	return "";
	}

	preFields(): FlatTemplatable {
	return "";
	}

	postFields(): FlatTemplatable {
	return "";
	}

	getGroupLabelProps(): FlatTemplatable {
	return `class="field-group__label"`;
	}

	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
	const { label, classes } = this.options;

	return tempstream/* HTML */ `
	<div
	class="field-group ${(classes \|\| []).join(" ")}"
	${this.options.containerID
	? `id="${this.options.containerID}"`
	: ""}
	>
	${this.preLabelContainer()}
	<div class="field-group__label-container">
	${this.preLabel()}
	${label
	? tempstream`<label ${this.getGroupLabelProps()}>${label}</label>`
	: ""}
	${this.postLabel()}
	</div>
	${this.preFields()}
	<div class="field-group__fields">
	${this.controls.map((control) => control.render(fctx))}
	</div>
	${this.postFields()}
	</div>
	`;
	}
	}