@sealcode/sealgen 0.18.10 → 0.19.0

package/src/forms/controls/editable-collection-subset.ts

@@ -22,9 +22,9 @@ export class EditableCollectionSubset extends FormFieldControl {
 	}
 
 	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
-		const { parsed: values } = await this.field.getValue(
+		const { parsed: values } = await this.field.getParsedValue(
 			fctx.ctx,
-			fctx.data
+			fctx.data.raw_values
 		);
 
 		return tempstream/* HTML */ `<div>

package/src/forms/controls/file.test.ts

@@ -12,6 +12,7 @@ import _locreq from "locreq";
 import { module_dirname } from "../../utils/module-dirname.js";
 import { FileManager, PathFilePointer } from "@sealcode/file-manager";
 import assert from "node:assert";
+
 const locreq = _locreq(module_dirname(import.meta.url));
 
 describe("file-control", () => {
@@ -26,12 +27,12 @@ describe("file-control", () => {
 
 		it("doesn't require image input if it already has old-value", async () => {
 			const port = await getPort();
-			console.log(`Using port ${port} for photo.test.ts`);
+			console.log(`Using port ${port} for image.test.ts`);
 			const app = new Koa();
 			const router = new Router();
 
 			const fields = {
-				file: new Fields.File(true, new FileManager("/tmp", "/uploaded_files")),
+				file: new Fields.File(true),
 			};
 
 			let submit_called = false;
@@ -63,6 +64,7 @@ describe("file-control", () => {
 				})(),
 				true
 			);
+
 			app.use(router.routes()).use(router.allowedMethods());
 			server = app.listen(port);
 

package/src/forms/controls/file.ts

@@ -1,13 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { Context } from "koa";
-import { FilePointer } from "@sealcode/file-manager";
+import { FilePointer, PathFilePointer } from "@sealcode/file-manager";
 import { FlatTemplatable, tempstream } from "tempstream";
-import { FileContainer } from "../fields/file.js";
 import { FormDataValue } from "../form-types.js";
 import { FormControlContext } from "./form-control.js";
 import { SimpleInput } from "./simple-input.js";
 import { htmlEscape } from "escape-goat";
+import { extname } from "node:path";
 
-export class File extends SimpleInput<FileContainer> {
+export class File extends SimpleInput {
 	getType() {
 		return "file";
 	}
@@ -21,6 +25,25 @@ export class File extends SimpleInput<FileContainer> {
 		if (!file) {
 			return empty_container;
 		}
+		if (file instanceof PathFilePointer) {
+			const filename = await file.getOriginalFilename();
+			return tempstream/* HTML */ `<div class="${class_name}">
+				<div class="${class_name}__icon">
+					<picture>
+						<img
+							src="/dist/sealgen/file-icon.svg"
+							width="80"
+							height="80"
+							alt=""
+						/>
+						<span class="${class_name}__icon__extension"
+							>${extname(filename)}</span
+						>
+					</picture>
+					<a href="${file.getURL()}" download>${filename}</a>
+				</div>
+			</div>`;
+		}
 		return tempstream/* HTML */ `<div class="${class_name}">
 			${file.getOriginalFilename()}
 		</div>`;
@@ -30,7 +53,7 @@ export class File extends SimpleInput<FileContainer> {
 		fctx: FormControlContext,
 		data: Record<string, FormDataValue>
 	) {
-		let { parsed } = await this.field.getValue(fctx.ctx, data);
+		let { parsed } = await this.field.getParsedValue(fctx.ctx, data);
 		if (parsed === null) {
 			parsed = { old: null, new: null };
 		}
@@ -52,7 +75,10 @@ export class File extends SimpleInput<FileContainer> {
 		fctx: FormControlContext
 	): Promise<Record<string, string | boolean>> {
 		const original = await super.getInputAttributes(fctx);
-		const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
+		const { parsed } = await this.field.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
 		return {
 			...original,
 			name: this.field.name + "[new]",

package/src/forms/controls/form-control.ts

@@ -1,13 +1,18 @@
 import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
-import { FormDataValue, FormMessage } from "../form-types.js";
+import { FormMessage, FormData } from "../form-types.js";
 import type { Form } from "../form.js";
 
+export type FieldMessages<Fieldnames extends string = string> = Record<
+	Fieldnames,
+	{ type: "error" | "info"; message: string }
+>;
+
 export class FormControlContext {
 	constructor(
 		public ctx: Context,
-		public data: Record<string, FormDataValue>,
+		public data: FormData,
 		public messages: FormMessage[],
 		public field_name_prefix: string,
 		public form_id: string,

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

@@ -10,7 +10,10 @@ export class HiddenInput extends FormFieldControl {
 	}
 
 	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
-		const { raw } = await this.field.getValue(fctx.ctx, fctx.data);
+		const { raw } = await this.field.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
 		return tempstream`<input type="hidden" name="${
 			this.field.name
 		}" value="${attribute((raw || "").toString())}" form="${

package/src/forms/controls/{photo.test.ts → image.test.ts}

@@ -7,8 +7,7 @@ import { mount } from "../../mount.js";
 import { Form } from "../form.js";
 import { getBrowser } from "../../utils/browser-creator.js";
 import { Fields } from "../../index.js";
-import { Photo } from "./photo.js";
-import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
+import { Image } from "./image.js";
 
 import _locreq from "locreq";
 import { module_dirname } from "../../utils/module-dirname.js";
@@ -33,25 +32,17 @@ describe("photo-control", () => {
 			const router = new Router();
 
 			const fields = {
-				photo: new Fields.File(false, new FileManager("/tmp", "/uploaded_files")),
+				photo: new Fields.File(false),
 			};
 
 			let received_photo: unknown;
 
-			const imageRouter = new KoaResponsiveImageRouter({
-				staticPath: "/images",
-				thumbnailSize: 20,
-				cacheManagerResolutionThreshold: 50,
-				imageStoragePath: `/tmp/image-cache-${port}`,
-				smartCropStoragePath: `/tmp/smartcrop-storage-${port}`,
-			});
-
 			mount(
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
 					fields = fields;
-					controls = [new Photo(fields.photo, imageRouter)];
+					controls = [new Image(fields.photo)];
 
 					async onSubmit(ctx: Context) {
 						const data = await this.getParsedValues(ctx);
@@ -92,19 +83,11 @@ describe("photo-control", () => {
 			const router = new Router();
 
 			const fields = {
-				photo: new Fields.File(true, new FileManager("/tmp", "/uploaded_files")),
+				photo: new Fields.File(true),
 			};
 
 			let received_photo: unknown;
 
-			const imageRouter = new KoaResponsiveImageRouter({
-				staticPath: "/images",
-				thumbnailSize: 20,
-				cacheManagerResolutionThreshold: 50,
-				imageStoragePath: `/tmp/image-cache-${port}`,
-				smartCropStoragePath: `/tmp/smartcrop-storage-${port}`,
-			});
-
 			let submit_called = false;
 
 			mount(
@@ -112,7 +95,7 @@ describe("photo-control", () => {
 				"/",
 				new (class extends Form<typeof fields, unknown> {
 					fields = fields;
-					controls = [new Photo(fields.photo, imageRouter)];
+					controls = [new Image(fields.photo)];
 
 					async onSubmit(ctx: Context) {
 						submit_called = true;

package/src/forms/controls/{photo.ts → image.ts}

@@ -5,13 +5,11 @@ import { FormField } from "../fields/field.js";
 import { SimpleInputOptions } from "./simple-input.js";
 import { FormControlContext } from "./form-control.js";
 import { FileContainer } from "../fields/file.js";
-import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
 import { FilePointer } from "@sealcode/file-manager";
 
-export class Photo extends File {
+export class Image extends File {
 	constructor(
 		public field: FormField<boolean, FileContainer>,
-		public imageRouter: KoaResponsiveImageRouter,
 		options?: SimpleInputOptions
 	) {
 		super(field, options);
@@ -22,7 +20,7 @@ export class Photo extends File {
 	}
 
 	async renderFilePreview(
-		_ctx: Context,
+		ctx: Context,
 		file: FilePointer | null
 	): Promise<FlatTemplatable> {
 		const class_name = "file_preview";
@@ -31,7 +29,7 @@ export class Photo extends File {
 			return empty_container;
 		}
 		return tempstream/* HTML */ `<div class="${class_name}">
-			${this.imageRouter.image(await file.getPath(), {
+			${ctx.$app.imageRouter.image(await file.getPath(), {
 				resolutions: [100, 200],
 				sizesAttr: "100px",
 				crop: { width: 100, height: 100 },

package/src/forms/controls/multiple-files.ts

@@ -151,7 +151,7 @@ export class MultipleFiles extends FormFieldControl {
 		if (!token) {
 			return null;
 		}
-		return await item.collection.app.FileManager.fromToken(token);
+		return await item.collection.app.fileManager.fromToken(token);
 	}
 
 	async renderFileItemPreview(
@@ -255,4 +255,21 @@ export class MultipleFiles extends FormFieldControl {
 			`
 		);
 	}
+
+	setLabel(label: string) {
+		this.options.label = label;
+	}
+
+	setUploadLabel(label: string) {
+		this.options.uploadLabel = label;
+	}
+
+	setAdditionalFieldsGetter(
+		fn: (
+			ctx: Context,
+			file: FilePointer
+		) => Promise<Record<string, unknown>>
+	) {
+		this.options.getAdditionalFields = fn;
+	}
 }

package/src/forms/controls/{multiple-photos.ts → multiple-images.ts}

@@ -5,7 +5,7 @@ import { MultipleFiles, MultipleFilesOptions } from "./multiple-files.js";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
 import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
 
-export class MultiplePhotos extends MultipleFiles {
+export class MultipleImages extends MultipleFiles {
 	constructor(
 		public field: MultipleFilesField,
 		public imageRouter: KoaResponsiveImageRouter,

package/src/forms/controls/number.ts

@@ -4,7 +4,7 @@ import { SimpleInput, SimpleInputOptions } from "./simple-input.js";
 
 export type NumberOptions = SimpleInputOptions & Partial<{ step: number }>;
 
-export class Number extends SimpleInput<number | null> {
+export class Number extends SimpleInput {
 	field: NumberField;
 	options: NumberOptions;
 	constructor(field: NumberField, options: NumberOptions) {

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

@@ -12,36 +12,20 @@ export type SimpleInputOptions = {
 	label?: string;
 	autocomplete?: boolean;
 	hide_errors?: boolean;
-	type?:
-		| "color"
-		| "date"
-		| "email"
-		| "file"
-		| "month"
-		| "number"
-		| "password"
-		| "search"
-		| "tel"
-		| "text"
-		| "time"
-		| "url"
-		| "week";
+	type?: string;
 	value?: string;
 	placeholder?: string;
 	readonly?: boolean;
 	step?: number;
 	suffix?: string;
+	pattern?: string;
 };
 
 export class SimpleInput<
-	ParsedValue,
 	Options extends SimpleInputOptions = SimpleInputOptions
 > extends FormFieldControl {
 	options: SimpleInputOptions;
-	constructor(
-		public field: FormField<boolean, ParsedValue>,
-		options?: Options
-	) {
+	constructor(public field: FormField<boolean, any>, options?: Options) {
 		super([field]);
 		this.options = options || {};
 	}
@@ -78,29 +62,23 @@ export class SimpleInput<
 	): Promise<Record<string, string | boolean>> {
 		const readonly = this.options.readonly || false;
 		const required = this.field.required;
-		const { parsed, raw, valid } = await this.field.getValue(
+		const { raw, valid } = await this.field.getParsedValue(
 			fctx.ctx,
-			fctx.data,
+			fctx.data.raw_values,
 			true
 		);
 		return Object.fromEntries([
 			<const>["id", this.getID()],
 			<const>["type", this.getType()],
 			<const>["name", `${fctx.field_name_prefix}${this.field.name}`],
-			<const>[
-				"value",
-				!valid && raw
-					? raw.toString()
-					: parsed !== undefined && parsed !== null
-					? (parsed as string)?.toString() || ""
-					: "",
-			],
+			<const>["value", raw],
 			...(fctx.form_id ? [["form", fctx.form_id]] : []),
 			<const>["placeholder", this.getPlaceholder()],
 			...(readonly ? [["readonly", true]] : []),
 			...(required ? [["required", true]] : []),
 			...(!this.options.autocomplete ? [["autocomplete", "off"]] : []),
 			...(this.options.step ? [["step", this.options.step]] : []),
+			["aria-invalid", String(!valid)],
 		]) as Record<string, string>;
 	}
 
@@ -131,9 +109,9 @@ export class SimpleInput<
 		const id = this.getID();
 		const label = this.getLabel();
 
-		const { valid, message } = await this.field.getValue(
+		const { valid, message } = await this.field.getParsedValue(
 			fctx.ctx,
-			fctx.data,
+			fctx.data.raw_values,
 			true
 		);
 		return inputWrapper(
@@ -141,15 +119,21 @@ export class SimpleInput<
 			this.getWrapperModifiers(),
 			tempstream/* HTML */ `
 				${label ? `<label for="${id}">${label}</label>` : ""}
-				${await this.preInput(fctx, fctx.data)}
+				${await this.preInput(fctx, fctx.data.raw_values)}
 				${this.renderInput(
 					fctx.ctx,
 					renderAttributes(await this.getInputAttributes(fctx)),
-					fctx.data
+					fctx.data.raw_values
 				)}
 				${this.postInput(fctx.ctx)}
 				${~valid && !this.options.hide_errors && fctx.validate
-					? `<div class="input__error">${message}</div>`
+					? `<div class="input__error">${[
+							message,
+							fctx.data.field_messages?.[this.field.name]
+								?.message,
+					  ]
+							.filter((e) => !!e)
+							.join(" · ")}</div>`
 					: ""}
 			`
 		);

package/src/forms/controls/single-reference.ts

@@ -1,10 +1,11 @@
-import SealiousSingleReference from "sealious/@types/app/base-chips/field-types/single-reference.js";
+import { FieldTypes as SealiousFieldTypes } from "sealious";
 import { CollectionField } from "../fields/collection-field.js";
 import { DropdownOptions, FreeformDropdown } from "./dropdown.js";
 import { Collection, CollectionItem } from "sealious";
 
 export class SingleReferenceDropdown<
-	F extends SealiousSingleReference,
+	TargetCollection extends Collection,
+	F extends SealiousFieldTypes.SingleReference,
 	Required extends boolean
 > extends FreeformDropdown {
 	constructor(
@@ -38,4 +39,11 @@ export class SingleReferenceDropdown<
 			options
 		);
 	}
+
+	setOptionLabelGetter(
+		getter: (item: CollectionItem<TargetCollection>) => string
+	): this {
+		this.options.getLabel = getter;
+		return this;
+	}
 }

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
+		>`;
 	}
 }