@sealcode/sealgen 0.18.8 → 0.19.0

package/lib/forms/controls/array.js

@@ -1,7 +1,7 @@
 import { hasShape, predicates } from "@sealcode/ts-predicates";
 import qs from "qs";
 import { tempstream } from "tempstream";
-import { SimpleFormField } from "../fields/simple-form-field.js";
+import { TextBasedSimpleField } from "../fields/simple-form-field.js";
 import { Derived } from "./derived.js";
 import { FormFieldControl } from "./form-field-control.js";
 function UnboundControl(controlClass, arbitrary_field_name, params) {
@@ -26,12 +26,12 @@ class StructuredArray extends FormFieldControl {
     return {};
   }
   makeSubfield(_field_name) {
-    return new SimpleFormField(false);
+    return new TextBasedSimpleField(false);
   }
   async renderItemControl(ctx, form_id, control, item, index) {
     const fctx = {
       ctx,
-      data: {},
+      data: { raw_values: {}, messages: [], field_messages: {} },
       messages: [],
       field_name_prefix: "",
       form_id,
@@ -46,9 +46,7 @@ class StructuredArray extends FormFieldControl {
         );
         return "";
       }
-      await field.init(
-        `${this.field.name}[data][${index}][${field_name}]`
-      );
+      field.setName(`${this.field.name}[data][${index}][${field_name}]`);
       const hidden_shadow = new Derived(
         [field],
         async (values, { inner_form_id, field_name: field_name2 }) => (
@@ -67,10 +65,22 @@ class StructuredArray extends FormFieldControl {
       );
       return tempstream`${new constructor(field, params).render({
         ...fctx,
-        data: { [field.name]: item[field_name] }
+        data: {
+          raw_values: {
+            [field.name]: item[field_name]
+          },
+          messages: [],
+          field_messages: {}
+        }
       })}${hidden_shadow.render({
         ...fctx,
-        data: { [field.name]: item[field_name] },
+        data: {
+          raw_values: {
+            [field.name]: item[field_name]
+          },
+          messages: [],
+          field_messages: {}
+        },
         form_id: this.getInnerFormID()
       })}`;
     } else {
@@ -93,7 +103,7 @@ class StructuredArray extends FormFieldControl {
 		</div>`;
   }
   async getItems(ctx, raw_values) {
-    return (await this.field.getValue(ctx, raw_values)).parsed;
+    return (await this.field.getParsedValue(ctx, raw_values)).parsed;
   }
   async _render(ctx, form_id, raw_values) {
     const items = await this.getItems(ctx, raw_values);
@@ -114,13 +124,12 @@ class StructuredArray extends FormFieldControl {
 		</turbo-frame>`;
   }
   render(fctx) {
-    return this._render(fctx.ctx, fctx.form_id, fctx.data);
+    return this._render(fctx.ctx, fctx.form_id, fctx.data.raw_values);
   }
   async getTargetItemID(ctx) {
     return ctx.params.id;
   }
   mount(router) {
-    console.log("mounting!", this.getActionURL());
     router.post(this.getActionURL(), async (ctx) => {
       const form_id = ctx.query.form_id;
       if (typeof form_id != "string") {
@@ -134,7 +143,6 @@ class StructuredArray extends FormFieldControl {
         throw new Error("Missing action param");
       }
       const field_data = ctx.$body[this.field.name] || { data: [] };
-      console.log({ action: field_data });
       if (!hasShape(
         {
           data: predicates.array(
@@ -149,10 +157,6 @@ class StructuredArray extends FormFieldControl {
         ...ctx.$body.action,
         data: field_data.data || []
       });
-      console.log("ACTION", {
-        ...ctx.$body.action,
-        data: field_data.data || []
-      });
       await item.save(ctx.$context);
       console.log(await item.getDecodedBody(ctx.$context, {}));
       ctx.body = this._render(

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,7 +60,9 @@ class CheckboxedListInput extends FormFieldControl {
         ([group_label, options2]) => tempstream` <h3>
 											${group_label}
 										</h3>
-										${options2.map(
+
+										${// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        options2.map(
           ({ value, label }) => this.renderOption({
             name,
             value,
@@ -99,6 +105,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/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

@@ -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,7 +30,10 @@ 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}>

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.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;
       mount(

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";
@@ -26,16 +25,9 @@ describe("photo-control", () => {
       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);
@@ -80,16 +72,9 @@ describe("photo-control", () => {
       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