@sealcode/sealgen 0.18.8 → 0.19.0

package/src/forms/controls/table.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import Router from "@koa/router";
 import { hasShape, is, predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
@@ -10,19 +11,14 @@ import { FormField } from "../fields/field.js";
 import {
 	ExtractFormFieldParsed,
 	Table as TableField,
-	TableFieldParsed,
 } from "../fields/table.js";
 import { FormReaction } from "../form-types.js";
 import { Form } from "../form.js";
 import { FormControl, FormControlContext } from "./form-control.js";
 
 export type TableControlOptions<F extends Record<string, FormField>> = {
-	render_fields: {
-		[field_name in keyof F]: (
-			fctx: FormControlContext,
-			name: string,
-			value: string
-		) => FlatTemplatable | Promise<FlatTemplatable>;
+	subfield_controls: {
+		[field_name in keyof F]: FormControl;
 	};
 	allow_removing?: boolean;
 	label_add?: string;
@@ -38,7 +34,8 @@ export type TableControlOptions<F extends Record<string, FormField>> = {
 	  }
 );
 
-const TO_REPLACE = "____$$$$";
+export const TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER =
+	"TABLE_ROW_INDEX________________";
 
 export class Table<F extends Record<string, FormField>> extends FormControl {
 	role = <const>"input";
@@ -50,15 +47,41 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 	}
 
 	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
-		let { parsed: rows } = await this.table_field.getValue(
-			fctx.ctx,
-			fctx.data
-		);
+		let rows = fctx.data.raw_values?.[this.table_field.name] as any[];
 		if (!rows) {
 			rows = [];
 		}
 
-		const make_row = (
+		const get_row_fctx = (
+			row:
+				| {
+						[field_name in keyof F]: ExtractFormFieldParsed<
+							F[field_name]
+						>;
+				  }
+				| null,
+			row_index: number | string
+		) => {
+			return typeof row_index == "number"
+				? {
+						data: {
+							raw_values:
+								(Object.fromEntries(
+									Object.entries(
+										row as Record<string, unknown>
+									).map(([key, value]) => [
+										this.table_field.columns[key].name,
+										value,
+									])
+								) as any) || {},
+							messages: [],
+							field_messages: {},
+						},
+				  }
+				: {};
+		};
+
+		const make_row = async (
 			row:
 				| {
 						[field_name in keyof F]: ExtractFormFieldParsed<
@@ -69,14 +92,26 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 			row_index: number | string
 		) => {
 			return /* HTML */ tempstream`<tr>
-				 ${Object.entries(this.table_field.columns).map(([key]) => {
-						return tempstream`<td>${this.options.render_fields[key](
-							fctx,
-							`${this.table_field.name}[${row_index}][${key}]`,
-							// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-							(row?.[key] as string) || ""
-						)}</td>`;
-					})}
+				 ${(
+						await Promise.all(
+							Object.entries(this.table_field.columns).map(
+								([column_name]) => {
+									const inner_fctx = get_row_fctx(
+										row,
+										row_index
+									);
+									return tempstream`<td>${this.options.subfield_controls[
+										column_name
+									].render({ ...fctx, ...inner_fctx })}</td>`;
+								}
+							)
+						)
+					).map((html) =>
+						html.replaceAll(
+							TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER,
+							row_index.toString()
+						)
+					)}
 				 ${
 						this.options.allow_removing
 							? /* HTML */ `<td>
@@ -136,27 +171,25 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 						${rows?.map((row, index) => make_row(row, index))}
 					</tbody>
 				</table>
-				<template> ${make_row(null, TO_REPLACE)} </template>
+				<template>
+					${make_row(null, TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER)}
+				</template>
 
 				${
 					/* because of https://github.com/ljharb/qs/issues/252 we have to
 					put the indexes in the field names */
 					this.options.allow_adding
 						? /* HTML */ `<button
-									onclick="const template = this.closest('turbo-frame').querySelector('template');
- const tbody = this.closest('turbo-frame').querySelector('tbody');
-const orig_template = template.innerHTML;
-template.innerHTML = orig_template.replaceAll('${TO_REPLACE}', tbody.querySelectorAll('tr').length);
- tbody.appendChild(template.cloneNode(true).content);
-template.innerHTML = orig_template;"
+									data-controller="table-add-button"
+									data-action="click->table-add-button#addRow"
+									data-table-placeholder="${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}"
 								>
-									add
+									${this.options.label_add || "add"}
 								</button>
 								<noscript>
 									<input
 										type="submit"
-										value="${this.options.label_add ||
-										"add"}"
+										value="add"
 										form="${fctx.form_id}"
 										formnovalidate
 										formaction="${this.getActionURL(
@@ -249,6 +282,7 @@ template.innerHTML = orig_template;"
 					{
 						raw_values: await form.extractRawValues(ctx),
 						messages: [],
+						field_messages: {},
 					},
 					false
 				),
@@ -256,4 +290,29 @@ template.innerHTML = orig_template;"
 			await next();
 		});
 	}
+
+	setAllowRemoving(value: boolean) {
+		this.options.allow_removing = value;
+		return this;
+	}
+
+	setAllowAdding(value: boolean) {
+		this.options.allow_adding = value;
+		return this;
+	}
+
+	setLabel(value: string) {
+		this.options.label = value;
+		return this;
+	}
+
+	setRemoveLabel(value: string) {
+		this.options.label_remove = value;
+		return this;
+	}
+
+	setAddLabel(value: string) {
+		this.options.label_add = value;
+		return this;
+	}
 }

package/src/forms/controls/textarea.ts

@@ -4,9 +4,9 @@ import { FormDataValue } from "../form-types.js";
 import { FormControlContext } from "./form-control.js";
 import { SimpleInput, SimpleInputOptions } from "./simple-input.js";
 
-export class Textarea extends SimpleInput<string | null> {
+export class Textarea extends SimpleInput {
 	constructor(
-		public field: FormField<boolean, string | null>,
+		public field: FormField<boolean>,
 		public options: SimpleInputOptions & {
 			label?: string;
 			rows?: number;
@@ -49,7 +49,9 @@ export class Textarea extends SimpleInput<string | null> {
 		attributes: string,
 		data: Record<string, FormDataValue>
 	) {
-		const { parsed: value } = await this.field.getValue(ctx, data);
-		return /* HTML */ `<textarea ${attributes}>${value || ""}</textarea>`;
+		const { parsed: value } = await this.field.getParsedValue(ctx, data);
+		return /* HTML */ `<textarea ${attributes}>
+${String(value) || ""}</textarea
+		>`;
 	}
 }

package/src/forms/controls/tickable.ts

@@ -70,11 +70,19 @@ export abstract class Tickable<T> extends FormFieldControl {
 			parsed: _parsed,
 			valid,
 			message,
-		} = await this.field.getValue(fctx.ctx, fctx.data, true);
+		} = await this.field.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values,
+			true
+		);
 		const parsed = _parsed === null ? this.options.default_value : _parsed;
 
-		const value = this.getValueAttribute(fctx.ctx, fctx.data, parsed);
-		const id = this.makeInputID(fctx.ctx, fctx.data, parsed);
+		const value = this.getValueAttribute(
+			fctx.ctx,
+			fctx.data.raw_values,
+			parsed
+		);
+		const id = this.makeInputID(fctx.ctx, fctx.data.raw_values, parsed);
 		const label =
 			this.options.label != undefined
 				? this.options.label
@@ -86,7 +94,7 @@ export abstract class Tickable<T> extends FormFieldControl {
 
 		return inputWrapper(
 			this.type,
-			this.getWrapperClasses(fctx.ctx, fctx.data, parsed),
+			this.getWrapperClasses(fctx.ctx, fctx.data.raw_values, parsed),
 
 			/* HTML */ `
 				<input
@@ -96,7 +104,7 @@ export abstract class Tickable<T> extends FormFieldControl {
 					this.field.name}"
 					${value ? `value="${attribute(value)}"` : ""}
 					${fctx.form_id ? `form="${fctx.form_id}"` : ""}
-					${this.isChecked(fctx.ctx, fctx.data, parsed)
+					${this.isChecked(fctx.ctx, fctx.data.raw_values, parsed)
 						? "checked"
 						: ""}
 					${readonly ? "readonly" : ""}

package/src/forms/fields/boolean.ts

@@ -1,14 +1,17 @@
 import { is, predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
+import { Checkbox } from "../controls/checkbox.js";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
+import { FormControlContext } from "../controls/form-control.js";
 
 const truthy = ["true", "on", "yes", "1"];
 const falsy = ["false", "off", "no", "0"];
 
 export class Boolean<Required extends boolean> extends FormField<
 	Required,
-	boolean
+	boolean,
+	Checkbox
 > {
 	predicate = predicates.boolean;
 	constructor(required: Required, public error_message: string = "") {
@@ -60,4 +63,23 @@ export class Boolean<Required extends boolean> extends FormField<
 	public getEmptyValue(): boolean {
 		return false;
 	}
+
+	public getControl(): Checkbox {
+		return new Checkbox(this, { label: this.name });
+	}
+
+	async getSealiousCreateValue(fctx: FormControlContext): Promise<boolean> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		return !!parsed;
+	}
+
+	async sealiousValueToForm(
+		_: Context,
+		value: boolean | null
+	): Promise<FormDataValue> {
+		return value ? "true" : "false";
+	}
 }

package/src/forms/fields/checkboxed-list.ts

@@ -1,5 +1,6 @@
 import { is, predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
+import { CheckboxedListInput } from "../controls/checkboxed-list-input.js";
 import { FormDataValue } from "../form-types.js";
 import {
 	FieldParseResult,
@@ -13,9 +14,13 @@ export type CheckboxedListItem = {
 	group?: string;
 };
 
-export class CheckboxedListField<Required extends boolean> extends FormField<
+export class CheckboxedListField<
+	Required extends boolean,
+	Values extends string
+> extends FormField<
 	Required,
-	Record<string, "on">
+	Record<Values, "on">,
+	CheckboxedListInput<Values>
 > {
 	constructor(
 		public required: Required,
@@ -67,4 +72,8 @@ export class CheckboxedListField<Required extends boolean> extends FormField<
 	public getEmptyValue(): Record<string, "on"> {
 		return {};
 	}
+
+	getControl(): CheckboxedListInput<Values> {
+		return new CheckboxedListInput(this, { label: this.name });
+	}
 }

package/src/forms/fields/collection-field.ts

@@ -1,6 +1,7 @@
 import { predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
 import { Depromisify, ExtractFieldDecoded, Field } from "sealious";
+import { SimpleInput } from "../controls/controls.js";
 import { FormDataValue } from "../form-types.js";
 
 import {
@@ -8,12 +9,13 @@ import {
 	FormField,
 	FormFieldValidationResponse,
 } from "./field.js";
+import { ExtractedFieldInfo } from "../../utils/extract-fields-from-collection.js";
 
 export class CollectionField<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	F extends Field<any>,
 	Required extends boolean
-> extends FormField<Required, ExtractFieldDecoded<F> | null> {
+> extends FormField<Required, ExtractFieldDecoded<F> | null, SimpleInput> {
 	constructor(required: Required, public sealiousField: F) {
 		super(required);
 	}
@@ -62,4 +64,17 @@ export class CollectionField<
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 		return "" as unknown as ExtractFieldDecoded<F>;
 	}
+
+	getControl(): SimpleInput {
+		return new SimpleInput(this);
+	}
+
+	generateFieldDeclaration(
+		field_info: ExtractedFieldInfo,
+		vars: { form_field_types: string; sealious_field: string }
+	): string {
+		return `new ${vars.form_field_types}.${this.constructor.name}(${String(
+			field_info.is_required
+		)}, ${vars.sealious_field})`;
+	}
 }

package/src/forms/fields/color.ts

@@ -0,0 +1,9 @@
+import { TextBasedSimpleField } from "./simple-form-field.js";
+
+export class Color<
+	Required extends boolean
+> extends TextBasedSimpleField<Required> {
+	constructor(required: Required) {
+		super(required, "color");
+	}
+}

package/src/forms/fields/coordinates.ts

@@ -0,0 +1,66 @@
+import { Context } from "koa";
+import { FormControl, FormControlContext } from "../controls/form-control.js";
+import { SimpleInput } from "../controls/simple-input.js";
+import { FormDataValue } from "../form-types.js";
+import { FieldParseResult } from "./field.js";
+import { SimpleFormField } from "./simple-form-field.js";
+
+export class Coordinates<
+	Required extends boolean,
+	DefaultControl extends FormControl = SimpleInput
+> extends SimpleFormField<Required, DefaultControl, [number, number]> {
+	async parse(
+		_: Context,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<[number, number]>> {
+		if (typeof raw_value == "string") {
+			return {
+				parsed_value: raw_value
+					?.split(",")
+					.map((e) => parseFloat(e)) as [number, number],
+				parsable: true,
+				error: null,
+			};
+		}
+		if (Array.isArray(raw_value)) {
+			return {
+				parsed_value: raw_value.map((e) => parseFloat(e)) as [
+					number,
+					number
+				],
+				parsable: true,
+				error: null,
+			};
+		}
+		return {
+			parsed_value: null,
+			parsable: false,
+			error: "should be an array or string",
+		};
+	}
+
+	async getSealiousCreateValue(
+		fctx: FormControlContext
+	): Promise<[number, number] | undefined> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		return parsed || undefined;
+	}
+
+	async postSealiousCreate(): Promise<void> {}
+
+	async postSealiousEdit(): Promise<void> {}
+
+	getControl(): DefaultControl {
+		return new SimpleInput(this, {
+			label: this.name,
+			type: this.type,
+		}) as unknown as DefaultControl;
+	}
+
+	public getEmptyValue(): [number, number] {
+		return [0, 0];
+	}
+}

package/src/forms/fields/date.ts

@@ -0,0 +1,50 @@
+import { Context } from "koa";
+import { FormControlContext } from "../controls/form-control.js";
+import { SimpleInput, SimpleInputOptions } from "../controls/simple-input.js";
+import { FormDataValue } from "../form-types.js";
+import { FieldParseResult } from "./field.js";
+import { SimpleFormField } from "./simple-form-field.js";
+
+export class DateField<Required extends boolean> extends SimpleFormField<
+	Required,
+	SimpleInput,
+	Date
+> {
+	constructor(required: Required) {
+		super(required, "date");
+	}
+
+	public getEmptyValue(): Date {
+		return new Date("1970-01-01 00:00");
+	}
+
+	async parse(
+		ctx: Context,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<Date>> {
+		return {
+			error: null,
+			parsable: true,
+			parsed_value: new Date(raw_value as string),
+		};
+	}
+
+	getControl(): SimpleInput<SimpleInputOptions> {
+		return new SimpleInput(this, { label: this.name, type: this.type });
+	}
+
+	async getSealiousCreateValue(
+		fctx: FormControlContext
+	): Promise<string | null> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		if (!parsed) {
+			return null;
+		}
+		return `${parsed.getFullYear()}-${(parsed.getMonth() + 1)
+			.toString()
+			.padStart(2, "0")}-${parsed.getDate().toString().padStart(2, "0")}`;
+	}
+}

package/src/forms/fields/datetime.ts

@@ -0,0 +1,66 @@
+import { Context } from "koa";
+import { SimpleInput } from "../controls/controls.js";
+import { FormControlContext } from "../controls/form-control.js";
+import { FormDataValue } from "../form-types.js";
+import { FieldParseResult } from "./field.js";
+import { SimpleFormField } from "./simple-form-field.js";
+
+function pad(n: number) {
+	return String(n).padStart(2, "0");
+}
+
+export class DateTime<Required extends boolean> extends SimpleFormField<
+	Required,
+	SimpleInput,
+	Date | null
+> {
+	constructor(required: Required) {
+		super(required, "datetime-local");
+	}
+
+	public getEmptyValue(): Date | null {
+		return null;
+	}
+
+	async parse(
+		ctx: Context,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<Date | null>> {
+		const parsed_value = new Date(raw_value as string);
+		return { parsable: true, error: null, parsed_value };
+	}
+
+	async getSealiousCreateValue(
+		fctx: FormControlContext
+	): Promise<number | null> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		if (parsed == null) {
+			return null;
+		}
+		return new Date(parsed).getTime();
+	}
+
+	getControl(): SimpleInput {
+		return new SimpleInput(this, {
+			label: this.name,
+			type: this.type,
+		});
+	}
+
+	async sealiousValueToForm(
+		ctx: Context,
+		value: number | null
+	): Promise<FormDataValue> {
+		if (value == null) {
+			return "";
+		}
+		const d = new Date(value);
+
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
+			d.getDate()
+		)}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	}
+}