@sealcode/sealgen 0.8.31 → 0.8.32

package/src/forms/controls/simple-input.ts

@@ -3,8 +3,9 @@ import { FlatTemplatable, tempstream } from "tempstream";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { renderAttributes } from "../../utils/render-attributes";
 import { FormField } from "../fields/field";
-import { FormDataValue, FormMessage } from "../form";
+import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
+import { FormControlContext } from "./form-control";
 
 export type SimpleInputOptions = {
 	id?: string;
@@ -73,18 +74,18 @@ export class SimpleInput<
 	}
 
 	async getInputAttributes(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		field_prefix: string,
-		form_id: string
+		fctx: FormControlContext
 	): Promise<Record<string, string | boolean>> {
 		const readonly = this.options.readonly || false;
 		const required = this.field.required;
-		const { parsed, raw, valid } = await this.field.getValue(ctx, data);
+		const { parsed, raw, valid } = await this.field.getValue(
+			fctx.ctx,
+			fctx.data
+		);
 		return Object.fromEntries([
 			<const>["id", this.getID()],
 			<const>["type", this.getType()],
-			<const>["name", `${field_prefix}${this.field.name}`],
+			<const>["name", `${fctx.field_name_prefix}${this.field.name}`],
 			<const>[
 				"value",
 				!valid && raw
@@ -93,7 +94,7 @@ export class SimpleInput<
 					? ((parsed as any)?.toString() as string) || ""
 					: "",
 			],
-			...(form_id ? [["form", form_id]] : []),
+			...(fctx.form_id ? [["form", fctx.form_id]] : []),
 			<const>["placeholder", this.getPlaceholder()],
 			...(readonly ? [["readonly", true]] : []),
 			...(required ? [["required", true]] : []),
@@ -109,50 +110,36 @@ export class SimpleInput<
 	}
 
 	async renderInput(
-		ctx: Context,
+		_ctx: Context,
 		attributes_str: string,
-		data: Record<string, FormDataValue>
+		_data: Record<string, FormDataValue>
 	): Promise<FlatTemplatable> {
 		return `<input ${attributes_str} />`;
 	}
 
 	async render<Fields extends Record<string, FormField>>(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		_messages: FormMessage[],
-		field_prefix: string,
-		form_id: string,
-		show_errors: boolean
+		fctx: FormControlContext
 	): Promise<FlatTemplatable> {
 		const id = this.getID();
 		const label = this.getLabel();
 		const type = this.getType();
 
-		const { parsed, raw, valid, message } = await this.field.getValue(
-			ctx,
-			data
+		const { valid, message } = await this.field.getValue(
+			fctx.ctx,
+			fctx.data
 		);
-		const placeholder = this.getPlaceholder();
-
 		return inputWrapper(
 			[id, type, getRequiredClass(this.field.required)],
 			tempstream/* HTML */ `
 				${label ? `<label for="${id}">${label}</label>` : ""}
-				${await this.preInput(ctx, data)}
+				${await this.preInput(fctx.ctx, fctx.data)}
 				${this.renderInput(
-					ctx,
-					renderAttributes(
-						await this.getInputAttributes(
-							ctx,
-							data,
-							field_prefix,
-							form_id
-						)
-					),
-					data
+					fctx.ctx,
+					renderAttributes(await this.getInputAttributes(fctx)),
+					fctx.data
 				)}
-				${this.postInput(ctx)}
-				${~valid && !this.options.hide_errors && show_errors
+				${this.postInput(fctx.ctx)}
+				${~valid && !this.options.hide_errors && fctx.validate
 					? `<div class="input__error">${message}</div>`
 					: ""}
 			`

package/src/forms/controls/textarea.ts

@@ -1,10 +1,7 @@
 import { Context } from "koa";
-import { FlatTemplatable, tempstream } from "tempstream";
-import { attribute } from "../../sanitize";
-import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
-import { FormFieldControl } from "./form-field-control";
+import { FormControlContext } from "./form-control";
 import { SimpleInput, SimpleInputOptions } from "./simple-input";
 
 export class Textarea<Required extends boolean> extends SimpleInput<
@@ -32,17 +29,12 @@ export class Textarea<Required extends boolean> extends SimpleInput<
 	}
 
 	async getInputAttributes(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		field_prefix: string,
-		form_id: string
+		fctx: FormControlContext
 	): Promise<Record<string, string | boolean>> {
-		const original = (await super.getInputAttributes(
-			ctx,
-			data,
-			field_prefix,
-			form_id
-		)) as Record<string, string | boolean>;
+		const original = (await super.getInputAttributes(fctx)) as Record<
+			string,
+			string | boolean
+		>;
 		let onkeydown = original.onkeydown || "";
 		if (this.options.autogrow) {
 			onkeydown += `;this.style.height = '5px';this.style.height = Math.max((this.scrollHeight)+32, ${

package/src/forms/controls/tickable.ts

@@ -5,6 +5,7 @@ import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
+import { FormControlContext } from "./form-control";
 
 export type TickableOptions = {
 	id?: string;
@@ -63,17 +64,15 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
 	}
 
 	async render<Fields extends Record<string, FormField>>(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		_: unknown[],
-		field_prefix: string,
-		form_id: string,
-		show_field_errors: boolean
+		fctx: FormControlContext
 	): Promise<FlatTemplatable> {
 		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const { parsed, valid, message } = await this.field.getValue(ctx, data);
-		const value = this.getValueAttribute(ctx, data, parsed);
-		const id = this.makeInputID(ctx, data, parsed);
+		const { parsed, valid, message } = await this.field.getValue(
+			fctx.ctx,
+			fctx.data
+		);
+		const value = this.getValueAttribute(fctx.ctx, fctx.data, parsed);
+		const id = this.makeInputID(fctx.ctx, fctx.data, parsed);
 		const label =
 			this.options.label != undefined
 				? this.options.label
@@ -84,17 +83,19 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
 		const required = this.field.required;
 
 		return inputWrapper(
-			this.getWrapperClasses(ctx, data, parsed),
+			this.getWrapperClasses(fctx.ctx, fctx.data, parsed),
 
 			/* HTML */ `
 				<input
 					id="${id}"
 					type="${this.type}"
-					name="${field_prefix}${this.options.name ||
+					name="${fctx.field_name_prefix}${this.options.name ||
 					this.field.name}"
 					${value ? `value="${attribute(value)}"` : ""}
-					${form_id ? `form="${form_id}"` : ""}
-					${this.isChecked(ctx, data, parsed) ? "checked" : ""}
+					${fctx.form_id ? `form="${fctx.form_id}"` : ""}
+					${this.isChecked(fctx.ctx, fctx.data, parsed)
+						? "checked"
+						: ""}
 					${readonly ? "readonly" : ""}
 					${required ? "required" : ""}
 					autocomplete="off"
@@ -117,7 +118,7 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
 					})();
 				</script>
 
-				${~valid && !this.options.hide_errors && show_field_errors
+				${~valid && !this.options.hide_errors && fctx.validate
 					? `<div class="input__error">${message}</div>`
 					: ""}
 			`

package/src/forms/fields/field.ts

@@ -105,7 +105,7 @@ export abstract class FormField<
 		parsed: ParsedValue;
 		raw: FormDataValue;
 	}> {
-		if (Object.keys(all_form_values).length === 0) {
+		if (Object.keys(all_form_values || {}).length === 0) {
 			// don't validate on virgin form
 			return {
 				parsed: this.getEmptyValue(),

package/src/forms/fields/pick-from-list.ts

@@ -1,5 +1,6 @@
 import { is, predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
+import { DropdownOption } from "../controls/dropdown";
 import { FormFieldValidationResponse } from "./field";
 import { SimpleFormField } from "./simple-form-field";
 
@@ -8,9 +9,7 @@ export class PickFromListField<
 > extends SimpleFormField<Required> {
 	constructor(
 		public required: Required,
-		public generateOptions: (
-			ctx: Context
-		) => Promise<Record<string, string> | { [i: string]: string }>,
+		public generateOptions: (ctx: Context) => Promise<DropdownOption[]>,
 		public customValidation: (
 			ctx: Context,
 			value: unknown,
@@ -38,7 +37,7 @@ export class PickFromListField<
 		if (!is(value, predicates.string)) {
 			return { valid: false, message: "not a string" };
 		}
-		if (this.required && !Object.keys(options).includes(value)) {
+		if (this.required && !options.map((o) => o.value).includes(value)) {
 			return {
 				valid: false,
 				message: `"${value}" is not one of the options`,

package/src/forms/form.ts

@@ -86,7 +86,9 @@ export abstract class Form<
 			${!this.controls.some((control) => control.role == "messages")
 				? this.renderMessages(ctx, data)
 				: ""}
-			${this.renderControls(ctx, data, show_field_errors)}
+			${this.renderControls(
+				this.makeFormControlContext(ctx, data, show_field_errors)
+			)}
 			${this.controls.some((control) => control.role == "submit")
 				? ""
 				: this.makeSubmitButton()}

package/src/page/list.ts

@@ -155,7 +155,13 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 			])}
 			${this.filterControls.map((control) => {
 				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-				return control.render(ctx, values, [], "", "", false);
+				return control.render(
+					this.makeFormControlContext(
+						ctx,
+						{ raw_values: values, messages: [] },
+						false
+					)
+				);
 			})}
 		</form>`;
 	}

package/src/page/mountable-with-fields.ts

@@ -1,7 +1,10 @@
 import { ShapeToType } from "@sealcode/ts-predicates";
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
-import { FormControl } from "../forms/controls/form-control";
+import {
+	FormControl,
+	FormControlContext,
+} from "../forms/controls/form-control";
 import { FieldsToShape, FormField } from "../forms/fields/field";
 import { FormData, FormDataValue, FormMessage } from "../forms/form";
 import { Mountable } from "./mountable";
@@ -29,6 +32,23 @@ export abstract class MountableWithFields<
 		}
 	}
 
+	makeFormControlContext(
+		ctx: Context,
+		data: FormData,
+		validate: boolean,
+		field_name_prefix = this.field_names_prefix,
+		form_id = this.form_id
+	) {
+		return new FormControlContext(
+			ctx,
+			data.raw_values,
+			data.messages,
+			field_name_prefix,
+			form_id,
+			validate
+		);
+	}
+
 	// this one is meant to be overwritten
 	async validateValues(
 		ctx: Context,
@@ -75,20 +95,9 @@ export abstract class MountableWithFields<
 		return { valid, field_errors, form_messages };
 	}
 
-	public renderControls(
-		ctx: Context,
-		data: FormData<keyof Fields>,
-		validate: boolean
-	): FlatTemplatable {
+	public renderControls(fctx: FormControlContext): FlatTemplatable {
 		return tempstream/* HTML */ `${this.controls.map((control) =>
-			control.render(
-				ctx,
-				data.raw_values,
-				data.messages,
-				this.field_names_prefix,
-				this.form_id,
-				validate
-			)
+			control.render(fctx)
 		)}`;
 	}