@sealcode/sealgen 0.15.17 → 0.15.19

package/@types/src/forms/controls/checkbox.d.ts

@@ -10,6 +10,6 @@ export declare class Checkbox extends Tickable<boolean> {
 export declare class CheckboxWithValue extends Checkbox {
     field: FormField<boolean, boolean>;
     value: string;
-    constructor(field: FormField<boolean, boolean>, options: TickableOptions, value: string);
+    constructor(field: FormField<boolean, boolean>, options: TickableOptions<boolean>, value: string);
     getValueAttribute(): string;
 }

package/@types/src/forms/controls/tickable.d.ts

@@ -4,17 +4,18 @@ import { FormField } from "../fields/field.js";
 import { FormDataValue } from "../form-types.js";
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
-export type TickableOptions = {
+export type TickableOptions<T> = {
     id?: string;
     name?: string;
     label?: string;
     hide_errors?: boolean;
     readonly?: boolean;
+    default_value: T;
 };
 export declare abstract class Tickable<T> extends FormFieldControl {
     field: FormField<boolean, T>;
-    options: TickableOptions;
-    constructor(field: FormField<boolean, T>, options?: TickableOptions);
+    options: TickableOptions<T>;
+    constructor(field: FormField<boolean, T>, options: TickableOptions<T>);
     type: "checkbox" | "radio";
     abstract getValueAttribute(ctx: Context, data: Record<string, FormDataValue>, value: T): string;
     abstract isChecked(ctx: Context, data: Record<string, FormDataValue>, value: T): boolean;

package/@types/src/forms/fields/field.d.ts

@@ -32,10 +32,15 @@ export declare abstract class FormField<Required extends boolean = boolean, Pars
     abstract getEmptyValue(): ParsedValue;
     isValueValid(_ctx: Context, _value: ParsedValue): Promise<FormFieldValidationResponse>;
     abstract parse(ctx: Context, raw_value: FormDataValue): Promise<FieldParseResult<ParsedValue>>;
-    getValue(ctx: Context, all_form_values: Record<string, FormDataValue>): Promise<{
+    getValue(ctx: Context, all_form_values: Record<string, FormDataValue>, validate: true): Promise<{
         valid: boolean;
         message: string;
-        parsed: ParsedValue;
+        parsed: ParsedValue | null;
+        raw: FormDataValue;
+    }>;
+    getValue(ctx: Context, all_form_values: Record<string, FormDataValue>, validate?: false): Promise<{
+        message: string;
+        parsed: ParsedValue | null;
         raw: FormDataValue;
     }>;
     setMapToFilter(fn: (parsed: ParsedValue) => unknown): this;

package/@types/src/page/list.d.ts

@@ -19,7 +19,7 @@ export type ListSort = {
     order: "asc" | "desc";
 };
 export declare abstract class ListPage<ItemType, F extends typeof BaseListPageFields> extends Page<F> {
-    abstract getItems(ctx: Context, page: number, itemsPerPage: number, values: Record<string, FormDataValue>): Promise<ItemType[]>;
+    abstract getItems(ctx: Context, page: number, itemsPerPage: number | null, values: Record<string, FormDataValue>): Promise<ItemType[]>;
     abstract getTotalPages(ctx: Context, itemsPerPage: number, values: Record<string, FormDataValue>): Promise<number>;
     abstract renderItem(ctx: Context, item: ItemType, index: number): Promise<FlatTemplatable>;
     filterFields: Record<string, FormField>;
@@ -28,7 +28,7 @@ export declare abstract class ListPage<ItemType, F extends typeof BaseListPageFi
     renderListContainer(_: Context, content: Templatable): FlatTemplatable;
     getPaginationConfig(ctx: Context): Promise<{
         page: number;
-        itemsPerPage: number;
+        itemsPerPage: number | null;
     }>;
     renderItems(ctx: Context, values?: Record<string, FormDataValue>, items?: ItemType[]): Promise<FlatTemplatable>;
     render(ctx: Context): Promise<FlatTemplatable>;

package/lib/forms/controls/checkbox-group.js

@@ -28,11 +28,12 @@ class CheckboxGroup extends FormFieldControl {
           false,
           this.field.name,
           false,
-          values.includes(option)
+          (values || []).includes(option)
         ),
         {
           id: this.field.name + "__" + option,
-          label: (this.options.checkboxNameToLabel || ((s) => s))(option)
+          label: (this.options.checkboxNameToLabel || ((s) => s))(option),
+          default_value: false
         },
         option
       )

package/lib/forms/controls/checkboxed-list-input.js

@@ -12,7 +12,7 @@ class CheckboxedListInput extends FormFieldControl {
       fctx.ctx,
       fctx.data
     );
-    const pickedValues = Object.entries(currentValue).filter(([, is_on]) => is_on).map(([key]) => key);
+    const pickedValues = Object.entries(currentValue || {}).filter(([, is_on]) => is_on).map(([key]) => key);
     const [options, isVisible] = await Promise.all([
       this.field.generateOptions(fctx.ctx),
       this.field.isVisible(fctx.ctx)

package/lib/forms/controls/file.js

@@ -16,7 +16,10 @@ class File extends SimpleInput {
 		</div>`;
   }
   async preInput(fctx, data) {
-    const { parsed } = await this.field.getValue(fctx.ctx, data);
+    let { parsed } = await this.field.getValue(fctx.ctx, data);
+    if (parsed === null) {
+      parsed = { old: null, new: null };
+    }
     return tempstream`${this.renderFilePreview(
       fctx.ctx,
       parsed.old
@@ -36,7 +39,7 @@ class File extends SimpleInput {
     return {
       ...original,
       name: this.field.name + "[new]",
-      required: original.required && !parsed.old,
+      required: original.required && !parsed?.old,
       value: false
     };
   }

package/lib/forms/controls/radio.js

@@ -1,7 +1,7 @@
 import { Tickable } from "./tickable.js";
 class Radio extends Tickable {
   constructor(field, value, options) {
-    super(field, options);
+    super(field, { default_value: "", ...options });
     this.field = field;
     this.value = value;
     this.type = "radio";

package/lib/forms/controls/simple-input.js

@@ -28,7 +28,8 @@ class SimpleInput extends FormFieldControl {
     const required = this.field.required;
     const { parsed, raw, valid } = await this.field.getValue(
       fctx.ctx,
-      fctx.data
+      fctx.data,
+      true
     );
     return Object.fromEntries([
       ["id", this.getID()],
@@ -68,7 +69,8 @@ class SimpleInput extends FormFieldControl {
     const label = this.getLabel();
     const { valid, message } = await this.field.getValue(
       fctx.ctx,
-      fctx.data
+      fctx.data,
+      true
     );
     return inputWrapper(
       this.getWrapperModifiers(),

package/lib/forms/controls/tickable.js

@@ -2,7 +2,7 @@ import { attribute } from "../../sanitize.js";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
 import { FormFieldControl } from "./form-field-control.js";
 class Tickable extends FormFieldControl {
-  constructor(field, options = {}) {
+  constructor(field, options) {
     super([field]);
     this.field = field;
     this.options = options;
@@ -21,10 +21,12 @@ class Tickable extends FormFieldControl {
     ];
   }
   async render(fctx) {
-    const { parsed, valid, message } = await this.field.getValue(
-      fctx.ctx,
-      fctx.data
-    );
+    const {
+      parsed: _parsed,
+      valid,
+      message
+    } = await this.field.getValue(fctx.ctx, fctx.data, 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 label = this.options.label != void 0 ? this.options.label : this.field.name;

package/lib/forms/fields/field.js

@@ -15,32 +15,36 @@ class FormField {
     this.name = fieldname;
   }
   async _validate(ctx, value) {
-    if (this.required && (value === "" || value === null || value === void 0)) {
-      return {
-        valid: false,
-        message: t(
-          ctx,
-          "field_is_required",
-          [],
-          "This field is required"
-        )
-      };
+    if (value === "" || value === null || value === void 0) {
+      if (this.required) {
+        return {
+          valid: false,
+          message: t(
+            ctx,
+            "field_is_required",
+            [],
+            "This field is required"
+          )
+        };
+      } else {
+        return { valid: true, message: "Empty, but not required" };
+      }
     }
     return this.isValueValid(ctx, value);
   }
   async isValueValid(_ctx, _value) {
     return { valid: true, message: "" };
   }
-  async getValue(ctx, all_form_values) {
-    if (Object.keys(all_form_values || {}).length === 0) {
+  async getValue(ctx, all_form_values, validate = false) {
+    const raw = all_form_values[this.name];
+    if (raw == void 0 || raw == null || raw == "") {
       return {
-        parsed: this.getEmptyValue(),
-        valid: true,
-        message: "",
-        raw: ""
+        parsed: null,
+        message: "empty value",
+        raw,
+        ...validate ? { valid: !this.required } : {}
       };
     }
-    const raw = all_form_values[this.name];
     const {
       parsable,
       parsed_value,
@@ -48,19 +52,23 @@ class FormField {
     } = await this.parse(ctx, raw);
     if (!parsable) {
       return {
-        valid: false,
+        ...validate ? { valid: false } : {},
         parsed: this.getEmptyValue(),
         raw,
         message: parse_error || "Error"
       };
     }
-    const { valid, message } = await this._validate(ctx, parsed_value);
-    return {
-      parsed: parsed_value,
-      valid,
-      message,
-      raw: all_form_values[this.name]
-    };
+    if (validate) {
+      const { valid, message } = await this._validate(ctx, parsed_value);
+      return {
+        parsed: parsed_value,
+        ...validate ? { valid } : {},
+        message,
+        raw: all_form_values[this.name]
+      };
+    } else {
+      return { parsed: parsed_value, raw, message: "parsed" };
+    }
   }
   setMapToFilter(fn) {
     this.mapToFilter = fn;

package/lib/forms/fields/field.test.js

@@ -4,6 +4,7 @@ import Koa from "koa";
 import { mount } from "../../mount.js";
 import { Form } from "../form.js";
 import { getBrowser } from "../../utils/browser-creator.js";
+import assert from "assert";
 import { SimpleFormField } from "./simple-form-field.js";
 import { SimpleInput } from "../controls/simple-input.js";
 describe("basic field", () => {
@@ -53,6 +54,52 @@ describe("basic field", () => {
       page = await context.newPage();
       await page.goto(`http://localhost:${port}`);
     });
+    it("Doesn't call `isValueValid` and `parse` if the value is empty", async () => {
+      const port = await getPort();
+      console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+      const app = new Koa();
+      const router = new Router();
+      let is_value_valid_called = false;
+      let parse_called = false;
+      const fields = {
+        text: new class MockField extends SimpleFormField {
+          async isValueValid() {
+            is_value_valid_called = true;
+            return true;
+          }
+          async parse() {
+            parse_called = true;
+            return true;
+          }
+        }(false)
+      };
+      mount(
+        router,
+        "/",
+        new class extends Form {
+          constructor() {
+            super(...arguments);
+            this.fields = fields;
+            this.controls = [new SimpleInput(fields.text)];
+          }
+          async onSubmit() {
+          }
+          async canAccess(_) {
+            return { canAccess: true, message: "" };
+          }
+        }(),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(port);
+      browser = await getBrowser();
+      const context = await browser.newContext();
+      page = await context.newPage();
+      await page.goto(`http://localhost:${port}`);
+      await page.getByRole("button", { name: "Wy\u015Blij" }).click();
+      assert(is_value_valid_called == false);
+      assert(parse_called == false);
+    });
   });
 });
 //# sourceMappingURL=field.test.js.map

package/lib/forms/fields/file.js

@@ -50,7 +50,7 @@ class File extends FormField {
   }
   async getDatabaseValue(ctx, data) {
     const { parsed } = await this.getValue(ctx, data);
-    return parsed.new || void 0;
+    return parsed?.new || void 0;
   }
   getEmptyValue() {
     return { old: null, new: null };

package/lib/forms/form.test.js

@@ -81,6 +81,7 @@ describe("form test", () => {
           }
         }
       );
+      console.log(res_axios.data);
       if (!res_axios.data.includes("Some fields are invalid")) {
         throw new Error("when sending a empty request with axios, the error didnt appear");
       }

package/lib/page/list.js

@@ -6,9 +6,10 @@ import qs from "qs";
 import { NumberField } from "../forms/fields/number.js";
 import { SimpleFormField } from "../forms/fields/simple-form-field.js";
 const BasePagePropsShape = {};
+const DEFAULT_ITEMS_PER_PAGE = 12;
 const BaseListPageFields = {
   page: new NumberField(false, 1),
-  itemsPerPage: new NumberField(false, 12),
+  itemsPerPage: new NumberField(false, DEFAULT_ITEMS_PER_PAGE),
   sort: new SimpleFormField(false)
 };
 const SORT_SEPARATOR = ":";
@@ -48,7 +49,10 @@ class ListPage extends Page {
   }
   async getPaginationConfig(ctx) {
     const values = await this.extractRawValues(ctx);
-    const { parsed: page } = await this.fields.page.getValue(ctx, values);
+    let { parsed: page } = await this.fields.page.getValue(ctx, values);
+    if (!page) {
+      page = 1;
+    }
     const { parsed: itemsPerPage } = await this.fields.itemsPerPage.getValue(ctx, values);
     return { page, itemsPerPage };
   }
@@ -70,7 +74,11 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
   }
   async renderPagination(ctx, values) {
     const { itemsPerPage, page } = await this.getPaginationConfig(ctx);
-    const totalIems = await this.getTotalPages(ctx, itemsPerPage, values);
+    const totalIems = await this.getTotalPages(
+      ctx,
+      itemsPerPage || DEFAULT_ITEMS_PER_PAGE,
+      values
+    );
     return tempstream`<div class="list-pagination">
 			<div class="list-pagination__left">
 				${page > 1 ? this.renderPageButton(ctx, 1, "Pierwsza strona") : ""}

package/lib/page/mountable-with-fields.js

@@ -42,9 +42,9 @@ class MountableWithFields extends Mountable {
     let valid = true;
     const form_messages = [];
     await Promise.all(
-      Object.entries(values).filter(([fieldname]) => fieldname in this.fields).map(async ([key]) => {
+      Object.keys(this.fields).map(async (key) => {
         const field = this.fields[key];
-        const { valid: fieldvalid, message: fieldmessage } = await field.getValue(ctx, values);
+        const { valid: fieldvalid, message: fieldmessage } = await field.getValue(ctx, values, true);
         if (!fieldvalid) {
           valid = false;
           field_errors[field.name] = fieldmessage;
@@ -81,7 +81,7 @@ class MountableWithFields extends Mountable {
     const result = {};
     const promises = Object.entries(this.fields).map(
       async ([key, field]) => {
-        const { parsed } = await field.getValue(ctx, raw_values);
+        const { parsed } = await field.getValue(ctx, raw_values, false);
         result[key] = parsed;
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.15.17",
+	"version": "0.15.19",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

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

@@ -51,7 +51,7 @@ export class CheckboxGroup<
 						false,
 						this.field.name,
 						false,
-						values.includes(option)
+						(values || []).includes(option)
 					),
 					{
 						id: this.field.name + "__" + option,
@@ -59,6 +59,7 @@ export class CheckboxGroup<
 							this.options.checkboxNameToLabel ||
 							((s: string) => s)
 						)(option),
+						default_value: false,
 					},
 					option
 				)

package/src/forms/controls/checkbox.ts

@@ -22,7 +22,7 @@ export class Checkbox extends Tickable<boolean> {
 export class CheckboxWithValue extends Checkbox {
 	constructor(
 		public field: FormField<boolean, boolean>,
-		options: TickableOptions,
+		options: TickableOptions<boolean>,
 		public value: string
 	) {
 		super(field, options);

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

@@ -17,7 +17,7 @@ export class CheckboxedListInput extends FormFieldControl {
 			fctx.ctx,
 			fctx.data
 		);
-		const pickedValues = Object.entries(currentValue)
+		const pickedValues = Object.entries(currentValue || {})
 			.filter(([, is_on]) => is_on)
 			.map(([key]) => key);
 		const [options, isVisible] = await Promise.all([

package/src/forms/controls/file.ts

@@ -30,7 +30,10 @@ export class File extends SimpleInput<FileContainer> {
 		fctx: FormControlContext,
 		data: Record<string, FormDataValue>
 	) {
-		const { parsed } = await this.field.getValue(fctx.ctx, data);
+		let { parsed } = await this.field.getValue(fctx.ctx, data);
+		if (parsed === null) {
+			parsed = { old: null, new: null };
+		}
 		return tempstream/* HTML */ `${this.renderFilePreview(
 				fctx.ctx,
 				parsed.old
@@ -53,7 +56,7 @@ export class File extends SimpleInput<FileContainer> {
 		return {
 			...original,
 			name: this.field.name + "[new]",
-			required: original.required && !parsed.old,
+			required: original.required && !parsed?.old,
 			value: false,
 		};
 	}

package/src/forms/controls/radio.ts

@@ -11,7 +11,7 @@ export class Radio extends Tickable<string> {
 		public value: string,
 		options: { label?: string }
 	) {
-		super(field, options);
+		super(field, { default_value: "", ...options });
 	}
 
 	makeInputID(): string {

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

@@ -80,7 +80,8 @@ export class SimpleInput<
 		const required = this.field.required;
 		const { parsed, raw, valid } = await this.field.getValue(
 			fctx.ctx,
-			fctx.data
+			fctx.data,
+			true
 		);
 		return Object.fromEntries([
 			<const>["id", this.getID()],
@@ -132,7 +133,8 @@ export class SimpleInput<
 
 		const { valid, message } = await this.field.getValue(
 			fctx.ctx,
-			fctx.data
+			fctx.data,
+			true
 		);
 		return inputWrapper(
 			this.getWrapperModifiers(),

package/src/forms/controls/tickable.ts

@@ -7,18 +7,19 @@ import { FormDataValue } from "../form-types.js";
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
 
-export type TickableOptions = {
+export type TickableOptions<T> = {
 	id?: string;
 	name?: string;
 	label?: string;
 	hide_errors?: boolean;
 	readonly?: boolean;
+	default_value: T;
 };
 
 export abstract class Tickable<T> extends FormFieldControl {
 	constructor(
 		public field: FormField<boolean, T>,
-		public options: TickableOptions = {}
+		public options: TickableOptions<T>
 	) {
 		super([field]);
 	}
@@ -65,10 +66,13 @@ export abstract class Tickable<T> extends FormFieldControl {
 
 	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
 		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const { parsed, valid, message } = await this.field.getValue(
-			fctx.ctx,
-			fctx.data
-		);
+		const {
+			parsed: _parsed,
+			valid,
+			message,
+		} = await this.field.getValue(fctx.ctx, fctx.data, 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 label =

package/src/forms/fields/field.test.ts

@@ -10,6 +10,7 @@ import assert from "assert";
 import { SimpleFormField } from "./simple-form-field.js";
 import { SimpleInput } from "../controls/simple-input.js";
 import { FormData } from "../form-types.js";
+import { Field } from "sealious";
 
 describe("basic field", () => {
 	describe("basic tests", async () => {
@@ -63,5 +64,57 @@ describe("basic field", () => {
 			page = await context.newPage();
 			await page.goto(`http://localhost:${port}`);
 		});
+
+		it("Doesn't call `isValueValid` and `parse` if the value is empty", async () => {
+			const port = await getPort();
+			console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+			const app = new Koa();
+			const router = new Router();
+
+			let is_value_valid_called = false;
+			let parse_called = false;
+
+			const fields = {
+				text: new (class MockField extends SimpleFormField<false> {
+					public async isValueValid() {
+						is_value_valid_called = true;
+						return true as any;
+					}
+
+					public async parse() {
+						parse_called = true;
+						return true as any;
+					}
+				})(false),
+			};
+
+			mount(
+				router,
+				"/",
+				new (class extends Form<typeof fields, unknown> {
+					fields = fields;
+					controls = [new SimpleInput(fields.text)];
+
+					async onSubmit() {
+						//noop
+					}
+
+					async canAccess(_: Context) {
+						return { canAccess: true, message: "" };
+					}
+				})(),
+				true
+			);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(port);
+
+			browser = await getBrowser();
+			const context = await browser.newContext();
+			page = await context.newPage();
+			await page.goto(`http://localhost:${port}`);
+			await page.getByRole("button", { name: "Wyślij" }).click();
+			assert(is_value_valid_called == false);
+			assert(parse_called == false);
+		});
 	});
 });

package/src/forms/fields/field.ts

@@ -64,20 +64,21 @@ export abstract class FormField<
 		ctx: Context,
 		value: ParsedValue
 	): Promise<FormFieldValidationResponse> {
-		if (
-			this.required &&
-			(value === "" || value === null || value === undefined)
-		) {
-			return {
-				valid: false,
-
-				message: t(
-					ctx,
-					"field_is_required",
-					[],
-					"This field is required"
-				),
-			};
+		if (value === "" || value === null || value === undefined) {
+			if (this.required) {
+				return {
+					valid: false,
+
+					message: t(
+						ctx,
+						"field_is_required",
+						[],
+						"This field is required"
+					),
+				};
+			} else {
+				return { valid: true, message: "Empty, but not required" };
+			}
 		}
 		return this.isValueValid(ctx, value);
 	}
@@ -98,23 +99,42 @@ export abstract class FormField<
 
 	async getValue(
 		ctx: Context,
-		all_form_values: Record<string, FormDataValue>
+		all_form_values: Record<string, FormDataValue>,
+		validate: true
 	): Promise<{
 		valid: boolean;
 		message: string;
-		parsed: ParsedValue;
+		parsed: ParsedValue | null;
+		raw: FormDataValue;
+	}>;
+	async getValue(
+		ctx: Context,
+		all_form_values: Record<string, FormDataValue>,
+		validate?: false
+	): Promise<{
+		message: string;
+		parsed: ParsedValue | null;
+		raw: FormDataValue;
+	}>;
+	async getValue(
+		ctx: Context,
+		all_form_values: Record<string, FormDataValue>,
+		validate = false
+	): Promise<{
+		valid?: boolean;
+		message: string;
+		parsed: ParsedValue | null;
 		raw: FormDataValue;
 	}> {
-		if (Object.keys(all_form_values || {}).length === 0) {
-			// don't validate on virgin form
+		const raw = all_form_values[this.name];
+		if (raw == undefined || raw == null || raw == "") {
 			return {
-				parsed: this.getEmptyValue(),
-				valid: true,
-				message: "",
-				raw: "",
+				parsed: null,
+				message: "empty value",
+				raw,
+				...(validate ? { valid: !this.required } : {}),
 			};
 		}
-		const raw = all_form_values[this.name];
 		const {
 			parsable,
 			parsed_value,
@@ -122,19 +142,23 @@ export abstract class FormField<
 		} = await this.parse(ctx, raw);
 		if (!parsable) {
 			return {
-				valid: false,
+				...(validate ? { valid: false } : {}),
 				parsed: this.getEmptyValue(),
 				raw,
 				message: parse_error || "Error",
 			};
 		}
-		const { valid, message } = await this._validate(ctx, parsed_value);
-		return {
-			parsed: parsed_value,
-			valid,
-			message,
-			raw: all_form_values[this.name],
-		};
+		if (validate) {
+			const { valid, message } = await this._validate(ctx, parsed_value);
+			return {
+				parsed: parsed_value,
+				...(validate ? { valid } : {}),
+				message,
+				raw: all_form_values[this.name],
+			};
+		} else {
+			return { parsed: parsed_value, raw, message: "parsed" };
+		}
 	}
 
 	setMapToFilter(fn: (parsed: ParsedValue) => unknown) {

package/src/forms/fields/file.ts

@@ -76,7 +76,7 @@ export class File<Required extends boolean> extends FormField<
 
 	async getDatabaseValue(ctx: Context, data: Record<string, FormDataValue>) {
 		const { parsed } = await this.getValue(ctx, data);
-		return parsed.new || undefined;
+		return parsed?.new || undefined;
 	}
 
 	getEmptyValue() {

package/src/forms/form.test.ts

@@ -91,6 +91,7 @@ describe("form test", () => {
 					},
 				}
 			);
+			console.log(res_axios.data);
 			if (!res_axios.data.includes("Some fields are invalid")) {
 				throw new Error("when sending a empty request with axios, the error didnt appear");
 			}

package/src/page/list.ts

@@ -14,9 +14,11 @@ import { FormDataValue } from "../forms/form-types.js";
 export const BasePagePropsShape = <const>{};
 export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
 
+const DEFAULT_ITEMS_PER_PAGE = 12;
+
 export const BaseListPageFields = <const>{
 	page: new NumberField(false, 1),
-	itemsPerPage: new NumberField(false, 12),
+	itemsPerPage: new NumberField(false, DEFAULT_ITEMS_PER_PAGE),
 	sort: new SimpleFormField(false),
 };
 
@@ -51,7 +53,7 @@ export abstract class ListPage<
 	abstract getItems(
 		ctx: Context,
 		page: number,
-		itemsPerPage: number,
+		itemsPerPage: number | null,
 		values: Record<string, FormDataValue>
 	): Promise<ItemType[]>;
 
@@ -83,7 +85,10 @@ export abstract class ListPage<
 
 	async getPaginationConfig(ctx: Context) {
 		const values = await this.extractRawValues(ctx);
-		const { parsed: page } = await this.fields.page.getValue(ctx, values);
+		let { parsed: page } = await this.fields.page.getValue(ctx, values);
+		if (!page) {
+			page = 1;
+		}
 		const { parsed: itemsPerPage } =
 			await this.fields.itemsPerPage.getValue(ctx, values);
 		return { page, itemsPerPage };
@@ -120,7 +125,11 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 		values: Record<string, FormDataValue>
 	): Promise<FlatTemplatable> {
 		const { itemsPerPage, page } = await this.getPaginationConfig(ctx);
-		const totalIems = await this.getTotalPages(ctx, itemsPerPage, values);
+		const totalIems = await this.getTotalPages(
+			ctx,
+			itemsPerPage || DEFAULT_ITEMS_PER_PAGE,
+			values
+		);
 
 		return tempstream/* HTML */ `<div class="list-pagination">
 			<div class="list-pagination__left">

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

@@ -82,18 +82,17 @@ export abstract class MountableWithFields<
 		const field_errors = {} as Record<keyof Fields, string>;
 		let valid = true;
 		const form_messages = [] as FormMessage[];
+
 		await Promise.all(
-			Object.entries(values)
-				.filter(([fieldname]) => fieldname in this.fields)
-				.map(async ([key]: [keyof F, FormDataValue]) => {
-					const field = this.fields[key];
-					const { valid: fieldvalid, message: fieldmessage } =
-						await field.getValue(ctx, values);
-					if (!fieldvalid) {
-						valid = false;
-						field_errors[field.name] = fieldmessage;
-					}
-				})
+			Object.keys(this.fields).map(async (key: keyof F) => {
+				const field = this.fields[key];
+				const { valid: fieldvalid, message: fieldmessage } =
+					await field.getValue(ctx, values, true);
+				if (!fieldvalid) {
+					valid = false;
+					field_errors[field.name] = fieldmessage;
+				}
+			})
 		);
 		const formValidationResult = await this.validateValues(ctx, values);
 		if (!formValidationResult.valid) {
@@ -143,7 +142,7 @@ export abstract class MountableWithFields<
 		const promises = Object.entries(this.fields).map(
 			async ([key, field]) => {
 				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-				const { parsed } = await field.getValue(ctx, raw_values);
+				const { parsed } = await field.getValue(ctx, raw_values, false);
 				result[key] = parsed;
 			}
 		);