@sealcode/sealgen 0.18.10 → 0.19.2

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

@@ -25,15 +25,16 @@ export class DerivedFrame extends Derived<{
 	) {
 		super(
 			fields,
-			async (values, consts) => /* HTML */ `<turbo-frame
-				id="${consts.frame_id}"
-				src="./${consts.frame_id}?${Object.entries({
-					...consts,
-					...(values || {}),
-				})
-					.map(([key, value]) => `${key}=${value}`)
-					.join("&")}"
-			></turbo-frame>`,
+			async (values, consts) =>
+				/* HTML */ `<turbo-frame
+					id="${consts.frame_id}"
+					src="./${consts.frame_id}?${Object.entries({
+						...consts,
+						...(values || {}),
+					})
+						.map(([key, value]) => `${key}=${value}`)
+						.join("&")}"
+				></turbo-frame>`,
 			async (fctx) => ({
 				form_id: fctx.form_id,
 				field_name_prefix: fctx.field_name_prefix,
@@ -44,7 +45,7 @@ export class DerivedFrame extends Derived<{
 	}
 
 	renderBackendResponseFrame(_ctx: Context, content: FlatTemplatable) {
-		return tempstream/* HTML */ `<turbo-frame
+		return tempstream /* HTML */ `<turbo-frame
 			id="${this.frame_id}"
 			target="_top"
 		>
@@ -76,7 +77,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

@@ -1,3 +1,4 @@
+/* eslint @typescript-eslint/no-redundant-type-constituents: off */
 import { randomUUID } from "crypto";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { FormField } from "../fields/field.js";
@@ -5,7 +6,7 @@ import { FormDataValue } from "../form-types.js";
 import { FormControl, FormControlContext } from "./form-control.js";
 
 export class Derived<
-	Consts extends Record<string, unknown | undefined>
+	Consts extends Record<string, unknown | undefined>,
 > extends FormControl {
 	role = <const>"decoration";
 
@@ -17,7 +18,7 @@ export class Derived<
 		) => Promise<FlatTemplatable>,
 		public getConsts: (
 			fctx: FormControlContext
-		) => Promise<Consts> = async () => ({} as Consts)
+		) => Promise<Consts> = async () => ({}) as Consts
 	) {
 		super();
 	}
@@ -27,7 +28,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)
 			)
 		);
@@ -44,7 +45,7 @@ export class Derived<
 			`render(${values_code}, consts)
 .then(result=>document.querySelector("#${id}").innerHTML=result)`;
 
-		return tempstream/* HTML */ `<div>
+		return tempstream /* HTML */ `<div>
 			<script>
 				(function () {
 					const consts = ${"{" +
@@ -54,8 +55,8 @@ export class Derived<
 								typeof value === "object"
 									? JSON.stringify(value)
 									: typeof value == "string"
-									? '"' + value.toString() + '"'
-									: (value as string).toString()
+										? '"' + value.toString() + '"'
+										: (value as string).toString()
 							}`;
 						})
 						.join(",") +

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[]>,
@@ -46,7 +46,7 @@ export class FreeformDropdown extends SimpleInput<string | null> {
 								((original.onchange as string | undefined) ||
 									"") + ";this.form.submit();",
 							],
-					  ]
+						]
 					: []),
 			]),
 		} as Record<string, string>;
@@ -57,19 +57,19 @@ 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
-				Promise.resolve(this.generateOptions(ctx)).then((options) =>
-					options.map(
-						({ value, label }) =>
-							`<option value="${attribute(value)}" ${
-								(value || "") == picked_value ? "selected" : ""
-							}>${label}</option>`
-					)
+			${Promise.resolve(this.generateOptions(ctx)).then((options) =>
+				options.map(
+					({ value, label }) =>
+						`<option value="${attribute(value)}" ${
+							(value || "") == picked_value ? "selected" : ""
+						}>${label}</option>`
 				)
-			}
+			)}
 		</select>`;
 	}
 }

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

@@ -1,3 +1,4 @@
+/* eslint @typescript-eslint/no-base-to-string: off */
 import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize.js";
 import { PickFromListField } from "../fields/pick-from-list.js";
@@ -22,12 +23,12 @@ 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>
+		return tempstream /* HTML */ `<div>
 			<ul>
 				${Promise.resolve(this.field.generateOptions(fctx.ctx)).then(
 					(options) =>

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

@@ -41,7 +41,7 @@ export class FieldGroup extends FormFieldControl {
 	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
 		const { label, classes } = this.options;
 
-		return tempstream/* HTML */ `
+		return tempstream /* HTML */ `
 			<div
 				class="field-group ${(classes || []).join(" ")}"
 				${this.options.containerID

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.info(`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,14 @@
+/* eslint @typescript-eslint/no-unsafe-assignment: off, @typescript-eslint/no-unsafe-argument: off, @typescript-eslint/no-unsafe-member-access: off, @typescript-eslint/no-unsafe-call: off */
 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,7 +22,26 @@ export class File extends SimpleInput<FileContainer> {
 		if (!file) {
 			return empty_container;
 		}
-		return tempstream/* HTML */ `<div class="${class_name}">
+		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,11 +50,11 @@ 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 };
 		}
-		return tempstream/* HTML */ `${this.renderFilePreview(
+		return tempstream /* HTML */ `${this.renderFilePreview(
 				fctx.ctx,
 				parsed.old
 			)}
@@ -52,7 +72,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,
@@ -21,6 +26,6 @@ export abstract class FormControl {
 	): FlatTemplatable | Promise<FlatTemplatable>;
 	abstract role: "input" | "decoration" | "messages" | "submit";
 
-	// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	mount(_router: Router, _form: Form<any, any>) {}
 }

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

@@ -1,3 +1,4 @@
+/* eslint @typescript-eslint/no-base-to-string: off */
 import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize.js";
 import { FormField } from "../fields/field.js";
@@ -10,7 +11,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/html.ts

@@ -12,6 +12,7 @@ export class HTML extends FormControl {
 	constructor(role: "decoration" | "submit", renderer: Renderer);
 	constructor(renderer: Renderer);
 	constructor(
+		// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 		role_or_renderer: "decoration" | "submit" | Renderer,
 		renderer_or_undefined?: Renderer | FlatTemplatable
 	) {

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";
@@ -28,30 +27,22 @@ describe("photo-control", () => {
 
 		it("sends the old photo if it wasn't changed and it has an initial value", async () => {
 			const port = await getPort();
-			console.log(`Using port ${port} for photo.test.ts`);
+			console.info(`Using port ${port} for photo.test.ts`);
 			const app = new Koa();
 			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);
@@ -87,24 +78,16 @@ describe("photo-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.info(`Using port ${port} for photo.test.ts`);
 			const app = new Koa();
 			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";
@@ -30,8 +28,8 @@ export class Photo extends File {
 		if (!file) {
 			return empty_container;
 		}
-		return tempstream/* HTML */ `<div class="${class_name}">
-			${this.imageRouter.image(await file.getPath(), {
+		return tempstream /* HTML */ `<div class="${class_name}">
+			${ctx.$app.imageRouter.image(await file.getPath(), {
 				resolutions: [100, 200],
 				sizesAttr: "100px",
 				crop: { width: 100, height: 100 },

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

@@ -105,7 +105,7 @@ export class MultipleFiles extends FormFieldControl {
 	}
 
 	renderFrame(_ctx: Context, content?: FlatTemplatable) {
-		return tempstream/* HTML */ `<turbo-frame
+		return tempstream /* HTML */ `<turbo-frame
 			${content ? "" : `src="./${this.getFrameRelativeURL()}"`}
 			id="${this.getFrameID()}"
 			target="_top"
@@ -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(
@@ -168,7 +168,7 @@ export class MultipleFiles extends FormFieldControl {
 		if (!(file instanceof PathFilePointer)) {
 			return "";
 		}
-		return tempstream/* HTML */ `<li class="file-list-item">
+		return tempstream /* HTML */ `<li class="file-list-item">
 			<a
 				class="file-list-item__preview"
 				href="${file.getURL()}"
@@ -215,9 +215,7 @@ export class MultipleFiles extends FormFieldControl {
 	async renderFrameContent(ctx: Context): Promise<FlatTemplatable> {
 		const files = (
 			await Promise.all(
-				(
-					await this.getFileItems(ctx)
-				)
+				(await this.getFileItems(ctx))
 					.filter((item) => item) // filter out undefineds
 					.map(async (item: CollectionItem<Collection>) => [
 						item,
@@ -226,13 +224,13 @@ export class MultipleFiles extends FormFieldControl {
 			)
 		).filter(([_, f]) => f !== null) as [
 			CollectionItem<Collection>,
-			FilePointer
+			FilePointer,
 		][];
 
 		return inputWrapper(
 			"multiple-files",
 			["multiple-files", this.field.name, ...this.getClassModifiers()],
-			tempstream/* HTML */ `
+			tempstream /* HTML */ `
 				<label>${this.options.label || this.field.name}</label>
 				<ul class="multiple-files__list">
 					${files.map(([item, file]) =>
@@ -255,4 +253,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,
@@ -33,7 +33,7 @@ export class MultiplePhotos extends MultipleFiles {
 		if (!path) {
 			return "missing file";
 		}
-		return tempstream/* HTML */ `<li>
+		return tempstream /* HTML */ `<li>
 			<a href="${file.getURL()}" data-turbo="false">
 				${this.imageRouter.image(path, {
 					resolutions: [150, 300],

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,34 +12,22 @@ 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
+	Options extends SimpleInputOptions = SimpleInputOptions,
 > extends FormFieldControl {
 	options: SimpleInputOptions;
 	constructor(
-		public field: FormField<boolean, ParsedValue>,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		public field: FormField<boolean, any>,
 		options?: Options
 	) {
 		super([field]);
@@ -78,29 +66,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,25 +113,31 @@ 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(
 			"simple-input",
 			this.getWrapperModifiers(),
-			tempstream/* HTML */ `
+			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>`
 					: ""}
 			`
 		);