@sealcode/sealgen 0.18.10 → 0.19.0

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

package/lib/forms/controls/table.js

@@ -2,7 +2,7 @@ import { hasShape, is, predicates } from "@sealcode/ts-predicates";
 import qs from "qs";
 import { tempstream } from "tempstream";
 import { FormControl } from "./form-control.js";
-const TO_REPLACE = "____$$$$";
+const TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER = "TABLE_ROW_INDEX________________";
 class Table extends FormControl {
   constructor(table_field, options) {
     super();
@@ -11,25 +11,46 @@ class Table extends FormControl {
     this.role = "input";
   }
   async render(fctx) {
-    let { parsed: rows } = await this.table_field.getValue(
-      fctx.ctx,
-      fctx.data
-    );
+    let rows = fctx.data.raw_values?.[this.table_field.name];
     if (!rows) {
       rows = [];
     }
-    const make_row = (row, row_index) => {
+    const get_row_fctx = (row, row_index) => {
+      return typeof row_index == "number" ? {
+        data: {
+          raw_values: Object.fromEntries(
+            Object.entries(
+              row
+            ).map(([key, value]) => [
+              this.table_field.columns[key].name,
+              value
+            ])
+          ) || {},
+          messages: [],
+          field_messages: {}
+        }
+      } : {};
+    };
+    const make_row = async (row, row_index) => {
       return (
         /* HTML */
         tempstream`<tr>
-				 ${Object.entries(this.table_field.columns).map(([key]) => {
-          return tempstream`<td>${this.options.render_fields[key](
-            fctx,
-            `${this.table_field.name}[${row_index}][${key}]`,
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            row?.[key] || ""
-          )}</td>`;
-        })}
+				 ${(await Promise.all(
+          Object.entries(this.table_field.columns).map(
+            ([column_name]) => {
+              const inner_fctx = get_row_fctx(
+                row,
+                row_index
+              );
+              return tempstream`<td>${this.options.subfield_controls[column_name].render({ ...fctx, ...inner_fctx })}</td>`;
+            }
+          )
+        )).map(
+          (html) => html.replaceAll(
+            TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER,
+            row_index.toString()
+          )
+        )}
 				 ${this.options.allow_removing ? (
           /* HTML */
           `<td>
@@ -79,26 +100,25 @@ class Table extends FormControl {
 						${rows?.map((row, index) => make_row(row, index))}
 					</tbody>
 				</table>
-				<template> ${make_row(null, TO_REPLACE)} </template>
+				<template>
+					${make_row(null, TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER)}
+				</template>
 
 				${/* because of https://github.com/ljharb/qs/issues/252 we have to
     put the indexes in the field names */
     this.options.allow_adding ? (
       /* HTML */
       `<button
-									onclick="const template = this.closest('turbo-frame').querySelector('template');
- const tbody = this.closest('turbo-frame').querySelector('tbody');
-const orig_template = template.innerHTML;
-template.innerHTML = orig_template.replaceAll('${TO_REPLACE}', tbody.querySelectorAll('tr').length);
- tbody.appendChild(template.cloneNode(true).content);
-template.innerHTML = orig_template;"
+									data-controller="table-add-button"
+									data-action="click->table-add-button#addRow"
+									data-table-placeholder="${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}"
 								>
-									add
+									${this.options.label_add || "add"}
 								</button>
 								<noscript>
 									<input
 										type="submit"
-										value="${this.options.label_add || "add"}"
+										value="add"
 										form="${fctx.form_id}"
 										formnovalidate
 										formaction="${this.getActionURL(
@@ -177,7 +197,8 @@ template.innerHTML = orig_template;"
           ctx,
           {
             raw_values: await form.extractRawValues(ctx),
-            messages: []
+            messages: [],
+            field_messages: {}
           },
           false
         )
@@ -185,8 +206,29 @@ template.innerHTML = orig_template;"
       await next();
     });
   }
+  setAllowRemoving(value) {
+    this.options.allow_removing = value;
+    return this;
+  }
+  setAllowAdding(value) {
+    this.options.allow_adding = value;
+    return this;
+  }
+  setLabel(value) {
+    this.options.label = value;
+    return this;
+  }
+  setRemoveLabel(value) {
+    this.options.label_remove = value;
+    return this;
+  }
+  setAddLabel(value) {
+    this.options.label_add = value;
+    return this;
+  }
 }
 export {
+  TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER,
   Table
 };
 //# sourceMappingURL=table.js.map

package/lib/forms/controls/textarea.js

@@ -27,10 +27,12 @@ class Textarea extends SimpleInput {
     };
   }
   async renderInput(ctx, attributes, data) {
-    const { parsed: value } = await this.field.getValue(ctx, data);
+    const { parsed: value } = await this.field.getParsedValue(ctx, data);
     return (
       /* HTML */
-      `<textarea ${attributes}>${value || ""}</textarea>`
+      `<textarea ${attributes}>
+${String(value) || ""}</textarea
+		>`
     );
   }
 }

package/lib/forms/controls/tickable.js

@@ -25,16 +25,24 @@ class Tickable extends FormFieldControl {
       parsed: _parsed,
       valid,
       message
-    } = await this.field.getValue(fctx.ctx, fctx.data, true);
+    } = await this.field.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values,
+      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 value = this.getValueAttribute(
+      fctx.ctx,
+      fctx.data.raw_values,
+      parsed
+    );
+    const id = this.makeInputID(fctx.ctx, fctx.data.raw_values, parsed);
     const label = this.options.label != void 0 ? this.options.label : this.field.name;
     const readonly = this.options.readonly || false;
     const required = this.field.required;
     return inputWrapper(
       this.type,
-      this.getWrapperClasses(fctx.ctx, fctx.data, parsed),
+      this.getWrapperClasses(fctx.ctx, fctx.data.raw_values, parsed),
       /* HTML */
       `
 				<input
@@ -43,7 +51,7 @@ class Tickable extends FormFieldControl {
 					name="${fctx.field_name_prefix}${this.options.name || this.field.name}"
 					${value ? `value="${attribute(value)}"` : ""}
 					${fctx.form_id ? `form="${fctx.form_id}"` : ""}
-					${this.isChecked(fctx.ctx, fctx.data, parsed) ? "checked" : ""}
+					${this.isChecked(fctx.ctx, fctx.data.raw_values, parsed) ? "checked" : ""}
 					${readonly ? "readonly" : ""}
 					${required ? "required" : ""}
 					autocomplete="off"

package/lib/forms/fields/boolean.js

@@ -1,4 +1,5 @@
 import { is, predicates } from "@sealcode/ts-predicates";
+import { Checkbox } from "../controls/checkbox.js";
 import { FormField } from "./field.js";
 const truthy = ["true", "on", "yes", "1"];
 const falsy = ["false", "off", "no", "0"];
@@ -42,6 +43,19 @@ class Boolean extends FormField {
   getEmptyValue() {
     return false;
   }
+  getControl() {
+    return new Checkbox(this, { label: this.name });
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return !!parsed;
+  }
+  async sealiousValueToForm(_, value) {
+    return value ? "true" : "false";
+  }
 }
 export {
   Boolean

package/lib/forms/fields/checkboxed-list.js

@@ -1,4 +1,5 @@
 import { is, predicates } from "@sealcode/ts-predicates";
+import { CheckboxedListInput } from "../controls/checkboxed-list-input.js";
 import {
   FormField
 } from "./field.js";
@@ -42,6 +43,9 @@ class CheckboxedListField extends FormField {
   getEmptyValue() {
     return {};
   }
+  getControl() {
+    return new CheckboxedListInput(this, { label: this.name });
+  }
 }
 export {
   CheckboxedListField

package/lib/forms/fields/collection-field.js

@@ -1,4 +1,5 @@
 import { predicates } from "@sealcode/ts-predicates";
+import { SimpleInput } from "../controls/controls.js";
 import {
   FormField
 } from "./field.js";
@@ -40,6 +41,14 @@ class CollectionField extends FormField {
   getEmptyValue() {
     return "";
   }
+  getControl() {
+    return new SimpleInput(this);
+  }
+  generateFieldDeclaration(field_info, vars) {
+    return `new ${vars.form_field_types}.${this.constructor.name}(${String(
+      field_info.is_required
+    )}, ${vars.sealious_field})`;
+  }
 }
 export {
   CollectionField

package/lib/forms/fields/color.js

@@ -0,0 +1,10 @@
+import { TextBasedSimpleField } from "./simple-form-field.js";
+class Color extends TextBasedSimpleField {
+  constructor(required) {
+    super(required, "color");
+  }
+}
+export {
+  Color
+};
+//# sourceMappingURL=color.js.map

package/lib/forms/fields/coordinates.js

@@ -0,0 +1,49 @@
+import { SimpleInput } from "../controls/simple-input.js";
+import { SimpleFormField } from "./simple-form-field.js";
+class Coordinates extends SimpleFormField {
+  async parse(_, raw_value) {
+    if (typeof raw_value == "string") {
+      return {
+        parsed_value: raw_value?.split(",").map((e) => parseFloat(e)),
+        parsable: true,
+        error: null
+      };
+    }
+    if (Array.isArray(raw_value)) {
+      return {
+        parsed_value: raw_value.map((e) => parseFloat(e)),
+        parsable: true,
+        error: null
+      };
+    }
+    return {
+      parsed_value: null,
+      parsable: false,
+      error: "should be an array or string"
+    };
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return parsed || void 0;
+  }
+  async postSealiousCreate() {
+  }
+  async postSealiousEdit() {
+  }
+  getControl() {
+    return new SimpleInput(this, {
+      label: this.name,
+      type: this.type
+    });
+  }
+  getEmptyValue() {
+    return [0, 0];
+  }
+}
+export {
+  Coordinates
+};
+//# sourceMappingURL=coordinates.js.map

package/lib/forms/fields/date.js

@@ -0,0 +1,34 @@
+import { SimpleInput } from "../controls/simple-input.js";
+import { SimpleFormField } from "./simple-form-field.js";
+class DateField extends SimpleFormField {
+  constructor(required) {
+    super(required, "date");
+  }
+  getEmptyValue() {
+    return /* @__PURE__ */ new Date("1970-01-01 00:00");
+  }
+  async parse(ctx, raw_value) {
+    return {
+      error: null,
+      parsable: true,
+      parsed_value: new Date(raw_value)
+    };
+  }
+  getControl() {
+    return new SimpleInput(this, { label: this.name, type: this.type });
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    if (!parsed) {
+      return null;
+    }
+    return `${parsed.getFullYear()}-${(parsed.getMonth() + 1).toString().padStart(2, "0")}-${parsed.getDate().toString().padStart(2, "0")}`;
+  }
+}
+export {
+  DateField
+};
+//# sourceMappingURL=date.js.map

package/lib/forms/fields/datetime.js

@@ -0,0 +1,46 @@
+import { SimpleInput } from "../controls/controls.js";
+import { SimpleFormField } from "./simple-form-field.js";
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+class DateTime extends SimpleFormField {
+  constructor(required) {
+    super(required, "datetime-local");
+  }
+  getEmptyValue() {
+    return null;
+  }
+  async parse(ctx, raw_value) {
+    const parsed_value = new Date(raw_value);
+    return { parsable: true, error: null, parsed_value };
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    if (parsed == null) {
+      return null;
+    }
+    return new Date(parsed).getTime();
+  }
+  getControl() {
+    return new SimpleInput(this, {
+      label: this.name,
+      type: this.type
+    });
+  }
+  async sealiousValueToForm(ctx, value) {
+    if (value == null) {
+      return "";
+    }
+    const d = new Date(value);
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
+      d.getDate()
+    )}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  }
+}
+export {
+  DateTime
+};
+//# sourceMappingURL=datetime.js.map