@sealcode/sealgen 0.18.8 → 0.19.0

package/src/forms/controls/checkbox-group.ts

@@ -1,10 +1,10 @@
 import { FlatTemplatable } from "tempstream";
-import { EnumMultipleField } from "../fields/enum-multiple.js";
 import { ProxyFormField } from "../fields/proxy-field.js";
 import { CheckboxWithValue } from "./checkbox.js";
 import { FieldGroup } from "./field-group.js";
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
+import { CheckboxedListField } from "../fields/checkboxed-list.js";
 
 export type DefaultCheckboxOptions = {
 	id?: string;
@@ -20,7 +20,7 @@ export class CheckboxGroup<
 	Options extends DefaultCheckboxOptions = DefaultCheckboxOptions
 > extends FormFieldControl {
 	constructor(
-		public field: EnumMultipleField<readonly string[], boolean>,
+		public field: CheckboxedListField<boolean, string>,
 		public options: Options = {} as Options
 	) {
 		super([field]);
@@ -40,28 +40,28 @@ export class CheckboxGroup<
 	}
 
 	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
 		);
-		const checkboxes = this.field.options.map(
+		const checkboxes = (await this.field.generateOptions(fctx.ctx)).map(
 			(option) =>
 				new CheckboxWithValue(
 					new ProxyFormField(
 						false,
 						this.field.name,
 						false,
-						(values || []).includes(option)
+						Object.keys(values || {}).includes(option.value)
 					),
 					{
-						id: this.field.name + "__" + option,
+						id: this.field.name + "__" + option.value,
 						label: (
 							this.options.checkboxNameToLabel ||
 							((s: string) => s)
-						)(option),
+						)(option.value),
 						default_value: false,
 					},
-					option
+					option.value
 				)
 		);
 		return this.wrapGroup(fctx, checkboxes);

package/src/forms/controls/checkboxed-list-input.ts

@@ -7,9 +7,11 @@ import {
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
 
-export class CheckboxedListInput extends FormFieldControl {
+export class CheckboxedListInput<
+	Values extends string
+> extends FormFieldControl {
 	constructor(
-		public field: CheckboxedListField<boolean>,
+		public field: CheckboxedListField<boolean, Values>,
 		public options: { label: string } = { label: field.name }
 	) {
 		super([field]);
@@ -30,7 +32,11 @@ export class CheckboxedListInput extends FormFieldControl {
 			valid,
 			message,
 			parsed: currentValue,
-		} = await this.field.getValue(fctx.ctx, fctx.data, true);
+		} = await this.field.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values,
+			true
+		);
 		const pickedValues = Object.entries(currentValue || {})
 			.filter(([, is_on]) => is_on)
 			.map(([key]) => key);
@@ -48,6 +54,7 @@ export class CheckboxedListInput extends FormFieldControl {
 				if (!groups[option.group]) {
 					groups[option.group] = [];
 				}
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				groups[option.group]!.push(option);
 			}
 		}
@@ -73,18 +80,22 @@ export class CheckboxedListInput extends FormFieldControl {
 									tempstream/* HTML */ ` <h3>
 											${group_label}
 										</h3>
-										${options!.map(({ value, label }) =>
-											this.renderOption({
-												name,
-												value,
-												label,
-												form_id: fctx.form_id,
-												checked:
-													pickedValues.includes(
-														value
-													),
-											})
-										)}`
+
+										${
+											// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+											options!.map(({ value, label }) =>
+												this.renderOption({
+													name,
+													value,
+													label,
+													form_id: fctx.form_id,
+													checked:
+														pickedValues.includes(
+															value
+														),
+												})
+											)
+										}`
 						  )
 						: ""}
 					${isVisible
@@ -126,6 +137,7 @@ export class CheckboxedListInput extends FormFieldControl {
 						name="${name}.${value}"
 						${checked ? "checked" : ""}
 						form=${form_id}
+						autocomplete="off"
 					/>
 					<label for="${name}.${value}">${label || value}</label>
 				`

package/src/forms/controls/controls.ts

@@ -23,10 +23,10 @@ export * from "./collapsible-field-group.js";
 export * from "./collapsible-checkbox-group.js";
 export * from "./autocomplete.js";
 export * from "./file.js";
-export * from "./photo.js";
+export * from "./image.js";
 export * from "./multiple-files.js";
 export * from "./number.js";
-export * from "./multiple-photos.js";
+export * from "./multiple-images.js";
 // export * from "./reverse-single-reference";
 export * from "./array.js";
 export * from "./table.js";

package/src/forms/controls/derived-frame.ts

@@ -76,7 +76,11 @@ export class DerivedFrame extends Derived<{
 				await this.generateFrameContent(
 					new FormControlContext(
 						ctx,
-						ctx.query,
+						{
+							messages: [],
+							field_messages: {},
+							raw_values: ctx.query,
+						},
 						[],
 						query.field_name_prefix,
 						query.form_id,

package/src/forms/controls/derived.ts

@@ -27,7 +27,7 @@ export class Derived<
 	): Promise<Record<string, FormDataValue>> {
 		const fieldnames = this.fields.map((f) => f.name);
 		const result = Object.fromEntries(
-			Object.entries(fctx.data).filter(([key]) =>
+			Object.entries(fctx.data.raw_values).filter(([key]) =>
 				fieldnames.includes(key)
 			)
 		);

package/src/forms/controls/dropdown.ts

@@ -15,7 +15,7 @@ export type DropdownOptions = {
 
 export type DropdownOption = { value: string; label: string };
 
-export class FreeformDropdown extends SimpleInput<string | null> {
+export class FreeformDropdown extends SimpleInput {
 	constructor(
 		public field: FormField<boolean, string | null>,
 		public _generateOptions: (ctx: Context) => Promise<DropdownOption[]>,
@@ -57,7 +57,10 @@ export class FreeformDropdown extends SimpleInput<string | null> {
 		attributes_str: string,
 		data: Record<string, FormDataValue>
 	): Promise<FlatTemplatable> {
-		const { parsed: picked_value } = await this.field.getValue(ctx, data);
+		const { parsed: picked_value } = await this.field.getParsedValue(
+			ctx,
+			data
+		);
 		return /* HTML */ tempstream`<select ${attributes_str}>
 			${
 				// eslint-disable-next-line @typescript-eslint/restrict-template-expressions

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