@sealcode/sealgen 0.18.10 → 0.19.2

package/lib/forms/controls/big-radio-group.js

@@ -7,9 +7,9 @@ class BigRadioGroup extends FormFieldControl {
     this.options = options;
   }
   async render(fctx) {
-    const { raw: current_value } = await this.field.getValue(
+    const { raw: current_value } = await this.field.getParsedValue(
       fctx.ctx,
-      fctx.data
+      fctx.data.raw_values
     );
     return tempstream`<div class="bigradios">
 			${Object.entries(this.options).map(([key, { description }]) => {

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

@@ -18,24 +18,24 @@ class CheckboxGroup extends FormFieldControl {
     }).render(fctx);
   }
   async render(fctx) {
-    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,
-          label: (this.options.checkboxNameToLabel || ((s) => s))(option),
+          id: this.field.name + "__" + option.value,
+          label: (this.options.checkboxNameToLabel || ((s) => s))(option.value),
           default_value: false
         },
-        option
+        option.value
       )
     );
     return this.wrapGroup(fctx, checkboxes);

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

@@ -21,7 +21,11 @@ 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);
     const [options, isVisible] = await Promise.all([
       this.field.generateOptions(fctx.ctx),
@@ -56,6 +60,7 @@ class CheckboxedListInput extends FormFieldControl {
         ([group_label, options2]) => tempstream` <h3>
 											${group_label}
 										</h3>
+
 										${options2.map(
           ({ value, label }) => this.renderOption({
             name,
@@ -99,6 +104,7 @@ class CheckboxedListInput extends FormFieldControl {
 						name="${name}.${value}"
 						${checked ? "checked" : ""}
 						form=${form_id}
+						autocomplete="off"
 					/>
 					<label for="${name}.${value}">${label || value}</label>
 				`

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

@@ -18,7 +18,7 @@ describe("checkboxed-list", () => {
     });
     it("sends the values", async () => {
       const port = await getPort();
-      console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+      console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
       const app = new Koa();
       const router = new Router();
       const fields = {
@@ -62,7 +62,7 @@ describe("checkboxed-list", () => {
     describe("behavior with (non)required", () => {
       it("allows to send a form when no value is selected and fiels is not required", async () => {
         const port = await getPort();
-        console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+        console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
         const app = new Koa();
         const router = new Router();
         const fields = {
@@ -105,7 +105,7 @@ describe("checkboxed-list", () => {
       });
       it("does not allow to send a form when no value is selected and field IS required", async () => {
         const port = await getPort();
-        console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+        console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
         const app = new Koa();
         const router = new Router();
         const fields = {
@@ -149,7 +149,7 @@ describe("checkboxed-list", () => {
       });
       it("allows to send a form when no value is selected and field IS required", async () => {
         const port = await getPort();
-        console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+        console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
         const app = new Koa();
         const router = new Router();
         const fields = {
@@ -194,7 +194,7 @@ describe("checkboxed-list", () => {
     });
     it("renders the label", async () => {
       const port = await getPort();
-      console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+      console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
       const app = new Koa();
       const router = new Router();
       const fields = {
@@ -233,7 +233,7 @@ describe("checkboxed-list", () => {
     });
     it("groups checkboxes based on the value of the 'group' attribute", async () => {
       const port = await getPort();
-      console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+      console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
       const app = new Koa();
       const router = new Router();
       const fields = {

package/lib/forms/controls/controls.js

@@ -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 "./array.js";
 export * from "./table.js";
 export {

package/lib/forms/controls/derived-frame.js

@@ -10,12 +10,12 @@ class DerivedFrame extends Derived {
       async (values, consts) => (
         /* HTML */
         `<turbo-frame
-				id="${consts.frame_id}"
-				src="./${consts.frame_id}?${Object.entries({
+					id="${consts.frame_id}"
+					src="./${consts.frame_id}?${Object.entries({
           ...consts,
           ...values || {}
         }).map(([key, value]) => `${key}=${value}`).join("&")}"
-			></turbo-frame>`
+				></turbo-frame>`
       ),
       async (fctx) => ({
         form_id: fctx.form_id,
@@ -58,7 +58,11 @@ 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/lib/forms/controls/derived.js

@@ -12,7 +12,7 @@ class Derived extends FormControl {
   async getBackendValues(fctx) {
     const fieldnames = this.fields.map((f) => f.name);
     const result = Object.fromEntries(
-      Object.entries(fctx.data).filter(
+      Object.entries(fctx.data.raw_values).filter(
         ([key]) => fieldnames.includes(key)
       )
     );

package/lib/forms/controls/dropdown.js

@@ -30,12 +30,14 @@ class FreeformDropdown extends SimpleInput {
     };
   }
   async renderInput(ctx, attributes_str, data) {
-    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(
+			${Promise.resolve(this.generateOptions(ctx)).then(
         (options) => options.map(
           ({ value, label }) => `<option value="${attribute(value)}" ${(value || "") == picked_value ? "selected" : ""}>${label}</option>`
         )

package/lib/forms/controls/editable-collection-subset.js

@@ -11,9 +11,9 @@ class EditableCollectionSubset extends FormFieldControl {
     this.role = "input";
   }
   async render(fctx) {
-    const { parsed: values } = await this.field.getValue(
+    const { parsed: values } = await this.field.getParsedValue(
       fctx.ctx,
-      fctx.data
+      fctx.data.raw_values
     );
     return tempstream`<div>
 			<ul>

package/lib/forms/controls/file.js

@@ -1,6 +1,8 @@
+import { PathFilePointer } from "@sealcode/file-manager";
 import { tempstream } from "tempstream";
 import { SimpleInput } from "./simple-input.js";
 import { htmlEscape } from "escape-goat";
+import { extname } from "node:path";
 class File extends SimpleInput {
   getType() {
     return "file";
@@ -11,12 +13,31 @@ class File extends SimpleInput {
     if (!file) {
       return empty_container;
     }
+    if (file instanceof PathFilePointer) {
+      const filename = await file.getOriginalFilename();
+      return tempstream`<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`<div class="${class_name}">
 			${file.getOriginalFilename()}
 		</div>`;
   }
   async preInput(fctx, data) {
-    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 };
     }
@@ -35,7 +56,10 @@ class File extends SimpleInput {
   }
   async getInputAttributes(fctx) {
     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/lib/forms/controls/file.test.js

@@ -20,11 +20,11 @@ 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;
       mount(

package/lib/forms/controls/form-control.js

@@ -9,7 +9,7 @@ class FormControlContext {
   }
 }
 class FormControl {
-  // 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, _form) {
   }
 }

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

@@ -7,7 +7,10 @@ class HiddenInput extends FormFieldControl {
     this.field = field;
   }
   async render(fctx) {
-    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="${fctx.form_id}">`;
   }
 }

package/lib/forms/controls/{photo.js → image.js}

@@ -1,22 +1,21 @@
 import { tempstream } from "tempstream";
 import { File } from "./file.js";
-class Photo extends File {
-  constructor(field, imageRouter, options) {
+class Image extends File {
+  constructor(field, options) {
     super(field, options);
     this.field = field;
-    this.imageRouter = imageRouter;
   }
   async getImgStyle() {
     return "width: 100px; height: 100px; object-fit: contain";
   }
-  async renderFilePreview(_ctx, file) {
+  async renderFilePreview(ctx, file) {
     const class_name = "file_preview";
     const empty_container = `<div class="${class_name}"></div>`;
     if (!file) {
       return empty_container;
     }
     return tempstream`<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 },
@@ -54,6 +53,6 @@ class Photo extends File {
   }
 }
 export {
-  Photo
+  Image
 };
-//# sourceMappingURL=photo.js.map
+//# sourceMappingURL=image.js.map

package/lib/forms/controls/{photo.test.js → image.test.js}

@@ -5,8 +5,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";
 import { FileManager, PathFilePointer } from "@sealcode/file-manager";
@@ -22,20 +21,13 @@ 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;
-      const imageRouter = new KoaResponsiveImageRouter({
-        staticPath: "/images",
-        thumbnailSize: 20,
-        cacheManagerResolutionThreshold: 50,
-        imageStoragePath: `/tmp/image-cache-${port}`,
-        smartCropStoragePath: `/tmp/smartcrop-storage-${port}`
-      });
       mount(
         router,
         "/",
@@ -43,7 +35,7 @@ describe("photo-control", () => {
           constructor() {
             super(...arguments);
             this.fields = fields;
-            this.controls = [new Photo(fields.photo, imageRouter)];
+            this.controls = [new Image(fields.photo)];
           }
           async onSubmit(ctx) {
             const data = await this.getParsedValues(ctx);
@@ -76,20 +68,13 @@ 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;
-      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(
         router,
@@ -98,7 +83,7 @@ describe("photo-control", () => {
           constructor() {
             super(...arguments);
             this.fields = fields;
-            this.controls = [new Photo(fields.photo, imageRouter)];
+            this.controls = [new Image(fields.photo)];
           }
           async onSubmit(ctx) {
             submit_called = true;
@@ -132,4 +117,4 @@ describe("photo-control", () => {
     });
   }).timeout(1e4);
 });
-//# sourceMappingURL=photo.test.js.map
+//# sourceMappingURL=image.test.js.map

package/lib/forms/controls/multiple-files.js

@@ -107,7 +107,7 @@ 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(_fileItem, file) {
     return file.getOriginalFilename();
@@ -186,6 +186,15 @@ class MultipleFiles extends FormFieldControl {
 			`
     );
   }
+  setLabel(label) {
+    this.options.label = label;
+  }
+  setUploadLabel(label) {
+    this.options.uploadLabel = label;
+  }
+  setAdditionalFieldsGetter(fn) {
+    this.options.getAdditionalFields = fn;
+  }
 }
 export {
   MultipleFiles

package/lib/forms/controls/{multiple-photos.js → multiple-images.js}

@@ -1,7 +1,7 @@
 import { PathFilePointer } from "@sealcode/file-manager";
 import { tempstream } from "tempstream";
 import { MultipleFiles } from "./multiple-files.js";
-class MultiplePhotos extends MultipleFiles {
+class MultipleImages extends MultipleFiles {
   constructor(field, imageRouter, options) {
     super(field, options);
     this.field = field;
@@ -37,6 +37,6 @@ class MultiplePhotos extends MultipleFiles {
   }
 }
 export {
-  MultiplePhotos
+  MultipleImages
 };
-//# sourceMappingURL=multiple-photos.js.map
+//# sourceMappingURL=multiple-images.js.map

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

@@ -26,25 +26,23 @@ class SimpleInput extends FormFieldControl {
   async getInputAttributes(fctx) {
     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([
       ["id", this.getID()],
       ["type", this.getType()],
       ["name", `${fctx.field_name_prefix}${this.field.name}`],
-      [
-        "value",
-        !valid && raw ? raw.toString() : parsed !== void 0 && parsed !== null ? parsed?.toString() || "" : ""
-      ],
+      ["value", raw],
       ...fctx.form_id ? [["form", fctx.form_id]] : [],
       ["placeholder", this.getPlaceholder()],
       ...readonly ? [["readonly", true]] : [],
       ...required ? [["required", true]] : [],
       ...!this.options.autocomplete ? [["autocomplete", "off"]] : [],
-      ...this.options.step ? [["step", this.options.step]] : []
+      ...this.options.step ? [["step", this.options.step]] : [],
+      ["aria-invalid", String(!valid)]
     ]);
   }
   async postInput(_) {
@@ -67,9 +65,9 @@ class SimpleInput extends FormFieldControl {
   async render(fctx) {
     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(
@@ -77,14 +75,17 @@ class SimpleInput extends FormFieldControl {
       this.getWrapperModifiers(),
       tempstream`
 				${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>` : ""}
+				${~valid && !this.options.hide_errors && fctx.validate ? `<div class="input__error">${[
+        message,
+        fctx.data.field_messages?.[this.field.name]?.message
+      ].filter((e) => !!e).join(" \xB7 ")}</div>` : ""}
 			`
     );
   }

package/lib/forms/controls/single-reference.js

@@ -22,6 +22,10 @@ class SingleReferenceDropdown extends FreeformDropdown {
     this.field = field;
     this.options = options;
   }
+  setOptionLabelGetter(getter) {
+    this.options.getLabel = getter;
+    return this;
+  }
 }
 export {
   SingleReferenceDropdown

package/lib/forms/controls/single-reference.test.js

@@ -30,7 +30,7 @@ describe("single-reference.test", () => {
     const form_file_path = "src/back/routes/some-form.form.ts";
     await test_app.addFile(
       form_file_path,
-      await formTemplate("SomeForm", form_file_path, {
+      await formTemplate("SomeForm", {
         postimport: `import {Comments} from "../collections/collections.js"; import {Fields} from "@sealcode/sealgen";`,
         fields: `article: new Fields.CollectionField(true, Comments.fields.article),`,
         controls: `new Controls.SingleReferenceDropdown(fields.article, {getLabel: item=>item.get("title")}),`,