@sealcode/sealgen 0.11.7 → 0.12.0

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

@@ -0,0 +1,17 @@
+import { tempstream } from "tempstream";
+import { attribute } from "../../sanitize.js";
+import { FormFieldControl } from "./form-field-control.js";
+class HiddenInput extends FormFieldControl {
+  constructor(field) {
+    super([field]);
+    this.field = field;
+  }
+  async render(fctx) {
+    const { raw } = await this.field.getValue(fctx.ctx, fctx.data);
+    return tempstream`<input type="hidden" name="${this.field.name}" value="${attribute((raw || "").toString())}" form="${fctx.form_id}">`;
+  }
+}
+export {
+  HiddenInput
+};
+//# sourceMappingURL=hidden-input.js.map

package/dist/forms/controls/html.js

@@ -0,0 +1,23 @@
+import { FormControl } from "./form-control.js";
+class HTML extends FormControl {
+  constructor(role_or_renderer, renderer_or_undefined) {
+    super();
+    this.role = "decoration";
+    if (arguments.length == 2) {
+      this.role = role_or_renderer;
+      this.renderer = renderer_or_undefined;
+    } else {
+      this.renderer = role_or_renderer;
+    }
+  }
+  async render(fctx) {
+    if (typeof this.renderer === "string") {
+      return this.renderer;
+    }
+    return typeof this.renderer == "function" ? this.renderer(fctx) : this.renderer;
+  }
+}
+export {
+  HTML
+};
+//# sourceMappingURL=html.js.map

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

@@ -0,0 +1,190 @@
+import Sealious from "sealious";
+import { inputWrapper } from "../../utils/input-wrapper.js";
+import { tempstream } from "tempstream";
+import { FormFieldControl } from "./form-field-control.js";
+import { is, predicates } from "@sealcode/ts-predicates";
+import { renderAttributes } from "../../utils/render-attributes.js";
+class MultipleFiles extends FormFieldControl {
+  constructor(field, options) {
+    super([field]);
+    this.field = field;
+    this.options = { getAdditionalFields: async () => ({}), ...options };
+  }
+  getClassModifiers() {
+    return [];
+  }
+  mount(router) {
+    router.get(this.getFrameRelativeURL(), async (ctx) => {
+      ctx.body = this.renderFrame(
+        ctx,
+        await this.renderFrameContent(ctx)
+      );
+    });
+    router.post(
+      this.getFrameRelativeURL() + "/delete/:file_item_id",
+      async (ctx) => {
+        await this.deleteFileAssociation(ctx, ctx.params.file_item_id);
+        ctx.body = this.renderFrame(
+          ctx,
+          await this.renderFrameContent(ctx)
+        );
+      }
+    );
+    router.post(this.getFrameRelativeURL() + "/add", async (ctx) => {
+      let files = ctx.$body.files;
+      if (!files || !is(files, predicates.object)) {
+        ctx.body = "Missing files";
+        return;
+      }
+      if (!Array.isArray(files)) {
+        files = [files];
+      }
+      await Promise.all(
+        files.map(
+          (file) => this.addFileAssociation(
+            ctx,
+            file
+          )
+        )
+      );
+      ctx.body = this.renderFrame(
+        ctx,
+        await this.renderFrameContent(ctx)
+      );
+    });
+  }
+  async deleteFileAssociation(ctx, file_item_id) {
+    await ctx.$app.collections[this.field.collection_field.referencing_collection].removeByID(ctx.$context, file_item_id);
+  }
+  async addFileAssociation(ctx, file) {
+    const file_field = this.getFileField();
+    if (!file_field) {
+      throw new Error("No file field in referencing collection");
+    }
+    const body = {
+      ...await this.options.getAdditionalFields(ctx, file),
+      [this.field.collection_field.referencing_field]: await this.field.getItemId(ctx),
+      [file_field.name]: file
+    };
+    await ctx.$app.collections[this.field.collection_field.referencing_collection].create(ctx.$context, body);
+  }
+  getFrameRelativeURL() {
+    return `${this.field.name}_files`;
+  }
+  getFrameID() {
+    return `A${this.field.name}__multiple-fields-control`;
+  }
+  renderFrame(ctx, content) {
+    return tempstream`<turbo-frame
+			${content ? "" : `src="./${this.getFrameRelativeURL()}"`}
+			id="${this.getFrameID()}"
+			target="_top"
+		>
+			${content || ""}
+		</turbo-frame>`;
+  }
+  render(fctx) {
+    return this.renderFrame(fctx.ctx, "");
+  }
+  getReferencingCollection() {
+    const result = this.field.collection_field.app.collections[this.field.collection_field.referencing_collection];
+    return result;
+  }
+  getFileField() {
+    for (const [_, field] of Object.entries(
+      this.getReferencingCollection().fields
+    )) {
+      if (field.handles_large_data) {
+        return field;
+      }
+    }
+    return null;
+  }
+  async extractFileFromItem(item) {
+    const sealious_field = this.getFileField();
+    if (!sealious_field) {
+      return null;
+    }
+    return await Sealious.File.fromID(
+      item.collection.app,
+      item.get(sealious_field.name).id
+    );
+  }
+  async renderFileItemPreview(_fileItem, file) {
+    return file.filename || "no filename";
+  }
+  async renderFileItem(fileItem, file) {
+    return tempstream`<li class="file-list-item">
+			<a
+				class="file-list-item__preview"
+				href="${file.getURL()}"
+				data-turbo="false"
+			>
+				${this.renderFileItemPreview(fileItem, file)}
+			</a>
+			${this.renderFileRemoveButton(fileItem)}
+		</li>`;
+  }
+  renderFileRemoveButton(fileItem) {
+    return (
+      /* HTML */
+      ` <form
+			data-turbo-frame="${this.getFrameID()}"
+			action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
+			method="POST"
+		>
+			<input
+				type="submit"
+				value="X"
+				class="file-list-action file-list-item__button file-list-item__button--delete"
+			/>
+		</form>`
+    );
+  }
+  async getFileItems(ctx) {
+    const item_id = await this.field.getItemId(ctx);
+    const {
+      items: [item]
+    } = await this.field.collection_field.collection.list(ctx.$context).ids([item_id]).attach({ [this.field.collection_field.name]: true }).fetch();
+    return item.getAttachments(this.field.collection_field.name).filter((f) => f);
+  }
+  getInputAttributes() {
+    return { type: "file", name: "files", multiple: true };
+  }
+  async renderFrameContent(ctx) {
+    const files = (await Promise.all(
+      (await this.getFileItems(ctx)).filter((item) => item).map(async (item) => [
+        item,
+        await this.extractFileFromItem(item)
+      ])
+    )).filter(([_, f]) => f !== null);
+    return inputWrapper(
+      ["multiple-files", this.field.name, ...this.getClassModifiers()],
+      tempstream`
+				<label>${this.options.label || this.field.name}</label>
+				<ul class="multiple-files__list">
+					${files.map(
+        ([item, file]) => this.renderFileItem(item, file)
+      )}
+				</ul>
+				<form
+					action="${this.getFrameRelativeURL()}/add"
+					method="POST"
+					enctype="multipart/form-data"
+					data-turbo-frame="${this.getFrameID()}"
+				>
+					<input ${renderAttributes(this.getInputAttributes())} />
+					<input
+						type="submit"
+						value="${this.options.uploadLabel || "Upload"}"
+						class="file-list-action"
+					/>
+				</form>
+			`
+    );
+  }
+}
+export {
+  MultipleFiles
+};
+//# sourceMappingURL=multiple-files.js.map

package/dist/forms/controls/multiple-photos.js

@@ -0,0 +1,36 @@
+import { tempstream } from "tempstream";
+import { MultipleFiles } from "./multiple-files.js";
+class MultiplePhotos extends MultipleFiles {
+  constructor(field, imageRouter, options) {
+    super(field, options);
+    this.field = field;
+    this.imageRouter = imageRouter;
+  }
+  getClassModifiers() {
+    return ["multiple-files--photos"];
+  }
+  getInputAttributes() {
+    return { ...super.getInputAttributes(), accept: "image/*" };
+  }
+  async renderFileItem(fileItem, file) {
+    const path = file.getDataPath();
+    if (!path) {
+      return "missing file";
+    }
+    return tempstream`<li>
+			<a href="${file.getURL()}" data-turbo="false">
+				${this.imageRouter.image({
+      path,
+      resolutions: [150, 300],
+      sizes_attr: "150px"
+    })}
+			</a>
+			<span class="filename"> ${file.filename || "no filename"}</span>
+			${this.renderFileRemoveButton(fileItem)}
+		</li>`;
+  }
+}
+export {
+  MultiplePhotos
+};
+//# sourceMappingURL=multiple-photos.js.map

package/dist/forms/controls/number.js

@@ -0,0 +1,24 @@
+import { SimpleInput } from "./simple-input.js";
+class Number extends SimpleInput {
+  constructor(field, options) {
+    super(field, options);
+  }
+  getType() {
+    return "number";
+  }
+  async getInputAttributes(fctx) {
+    const original = await super.getInputAttributes(fctx);
+    return {
+      ...original,
+      ...Object.fromEntries([
+        ...this.field.options.min ? [["min", this.field.options.min]] : [],
+        ...this.field.options.max ? [["max", this.field.options.max]] : [],
+        ...this.options.step ? [["step", this.options.step]] : []
+      ])
+    };
+  }
+}
+export {
+  Number
+};
+//# sourceMappingURL=number.js.map

package/dist/forms/controls/photo.js

@@ -0,0 +1,56 @@
+import { tempstream } from "tempstream";
+import { File } from "./file.js";
+import Sealious from "sealious";
+class Photo extends File {
+  constructor(field, imageRouter, options) {
+    super(field, options);
+    this.field = field;
+    this.imageRouter = imageRouter;
+  }
+  async getImgStyle() {
+    return "width: 100px; height: 100px; object-fit: contain";
+  }
+  async renderFilePreview(ctx, file_data) {
+    const class_name = "file_preview";
+    const empty_container = `<div class="${class_name}"></div>`;
+    if (!file_data) {
+      return empty_container;
+    }
+    const { id } = file_data;
+    if (!id) {
+      return empty_container;
+    }
+    const file = await Sealious.File.fromID(ctx.$app, id);
+    return tempstream`<div class="${class_name}">
+			${this.imageRouter.image({
+      resolutions: [100],
+      sizes_attr: "100px",
+      path: file.getDataPath(),
+      img_style: await this.getImgStyle()
+    })}
+		</div>`;
+  }
+  async getInputAttributes(fctx) {
+    const original = await super.getInputAttributes(fctx);
+    const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
+    return {
+      ...original,
+      accept: "image/*",
+      onchange: (original.onchange || "") + ";" + `
+   const file = this.files[0];
+   const preview_container = this.parentElement.querySelector(".file_preview");
+   const target = this;
+   if (file) {
+	 const fileReader = new FileReader();
+	 fileReader.readAsDataURL(file);
+	 fileReader.addEventListener("load", function () {
+        preview_container.innerHTML = \`<img src="\${this.result}" style="${await this.getImgStyle()}" />\`;
+    });    
+}`.replaceAll("\n", " ").replaceAll(`"`, "'")
+    };
+  }
+}
+export {
+  Photo
+};
+//# sourceMappingURL=photo.js.map

package/dist/forms/controls/radio.js

@@ -0,0 +1,28 @@
+import { Tickable } from "./tickable.js";
+class Radio extends Tickable {
+  constructor(field, value, options) {
+    super(field, options);
+    this.field = field;
+    this.value = value;
+    this.type = "radio";
+  }
+  makeInputID() {
+    return this.field.name + "-" + this.value.replaceAll(/\W/g, "-");
+  }
+  getValueAttribute() {
+    return this.value;
+  }
+  getWrapperClasses(ctx, data, value) {
+    return [
+      ...super.getWrapperClasses(ctx, data, value),
+      this.value.replaceAll(/\W/g, "-")
+    ];
+  }
+  isChecked(_ctx, _data, value) {
+    return this.value === value;
+  }
+}
+export {
+  Radio
+};
+//# sourceMappingURL=radio.js.map

package/dist/forms/controls/reverse-single-reference.js

@@ -0,0 +1 @@
+//# sourceMappingURL=reverse-single-reference.js.map

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

@@ -0,0 +1,85 @@
+import { tempstream } from "tempstream";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
+import { renderAttributes } from "../../utils/render-attributes.js";
+import { FormFieldControl } from "./form-field-control.js";
+class SimpleInput extends FormFieldControl {
+  constructor(field, options) {
+    super([field]);
+    this.field = field;
+    this.options = options || {};
+  }
+  async preInput(_ctx, _data) {
+    return "";
+  }
+  getType() {
+    return this.options.type || "text";
+  }
+  getLabel() {
+    return this.options.label != void 0 ? this.options.label : this.field.name;
+  }
+  getID() {
+    return this.options.id || this.field.name;
+  }
+  getPlaceholder() {
+    return this.options.placeholder === "" ? "" : this.options.placeholder || this.getType();
+  }
+  async getInputAttributes(fctx) {
+    const readonly = this.options.readonly || false;
+    const required = this.field.required;
+    const { parsed, raw, valid } = await this.field.getValue(
+      fctx.ctx,
+      fctx.data
+    );
+    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() || "" : ""
+      ],
+      ...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]] : []
+    ]);
+  }
+  async postInput(_) {
+    return this.options.suffix ? (
+      /* HTML */
+      `<span class="suffix">${this.options.suffix}</span>`
+    ) : "";
+  }
+  async renderInput(_ctx, attributes_str, _data) {
+    return `<input ${attributes_str} />`;
+  }
+  async render(fctx) {
+    const id = this.getID();
+    const label = this.getLabel();
+    const type = this.getType();
+    const { valid, message } = await this.field.getValue(
+      fctx.ctx,
+      fctx.data
+    );
+    return inputWrapper(
+      [id, type, getRequiredClass(this.field.required)],
+      tempstream`
+				${label ? `<label for="${id}">${label}</label>` : ""}
+				${await this.preInput(fctx.ctx, fctx.data)}
+				${this.renderInput(
+        fctx.ctx,
+        renderAttributes(await this.getInputAttributes(fctx)),
+        fctx.data
+      )}
+				${this.postInput(fctx.ctx)}
+				${~valid && !this.options.hide_errors && fctx.validate ? `<div class="input__error">${message}</div>` : ""}
+			`
+    );
+  }
+}
+export {
+  SimpleInput
+};
+//# sourceMappingURL=simple-input.js.map

package/dist/forms/controls/textarea.js

@@ -0,0 +1,40 @@
+import { SimpleInput } from "./simple-input.js";
+class Textarea extends SimpleInput {
+  constructor(field, options = {}) {
+    super(field, options);
+    this.field = field;
+    this.options = options;
+  }
+  renderDescription() {
+    return this.options.description ? (
+      /* HTML */
+      `<div class="form-input__description">
+					${this.options.description}
+			  </div>`
+    ) : "";
+  }
+  async getInputAttributes(fctx) {
+    const original = await super.getInputAttributes(fctx);
+    let onkeydown = original.onkeydown || "";
+    if (this.options.autogrow) {
+      onkeydown += `;this.style.height = '5px';this.style.height = Math.max((this.scrollHeight)+32, ${((this.options.rows || 2) + 1) * 16} )+'px';`;
+    }
+    return {
+      ...original,
+      rows: this.options.rows ? this.options.rows.toString() : false,
+      cols: this.options.cols ? this.options.cols.toString() : false,
+      onkeydown
+    };
+  }
+  async renderInput(ctx, attributes, data) {
+    const { parsed: value } = await this.field.getValue(ctx, data);
+    return (
+      /* HTML */
+      `<textarea ${attributes}>${value}</textarea>`
+    );
+  }
+}
+export {
+  Textarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/forms/controls/tickable.js

@@ -0,0 +1,72 @@
+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 = {}) {
+    super([field]);
+    this.field = field;
+    this.options = options;
+  }
+  makeInputID(ctx, data, value) {
+    const value_attr = this.getValueAttribute(ctx, data, value);
+    return this.options.id || this.field.name + (value_attr ? "--" + value_attr : "");
+  }
+  getWrapperClasses(ctx, data, value) {
+    return [
+      this.makeInputID(ctx, data, value),
+      this.type,
+      this.field.name.replaceAll(/\W/g, "-"),
+      getRequiredClass(this.field.required),
+      ...this.isChecked(ctx, data, value) ? ["checked"] : []
+    ];
+  }
+  async render(fctx) {
+    const { parsed, valid, message } = await this.field.getValue(
+      fctx.ctx,
+      fctx.data
+    );
+    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;
+    const readonly = this.options.readonly || false;
+    const required = this.field.required;
+    return inputWrapper(
+      this.getWrapperClasses(fctx.ctx, fctx.data, parsed),
+      /* HTML */
+      `
+				<input
+					id="${id}"
+					type="${this.type}"
+					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" : ""}
+					${readonly ? "readonly" : ""}
+					${required ? "required" : ""}
+					autocomplete="off"
+					onchange="this.closest('.form-container').querySelectorAll('.form-input__wrapper--${this.field.name}').forEach(e=>e.setAttribute('data-checked','false'));
+				this.closest('.form-input__wrapper').setAttribute('data-checked',this.checked);"
+				/>
+
+				<label for="${id}">${label}</label>
+				<script>
+					(function () {
+						let wrapper = document.currentScript.closest(
+							".form-input__wrapper"
+						);
+						wrapper.setAttribute(
+							"data-checked",
+							wrapper.querySelector("input").checked.toString()
+						);
+					})();
+				</script>
+
+				${~valid && !this.options.hide_errors && fctx.validate ? `<div class="input__error">${message}</div>` : ""}
+			`
+    );
+  }
+}
+export {
+  Tickable
+};
+//# sourceMappingURL=tickable.js.map

package/dist/forms/fields/boolean.js

@@ -0,0 +1,49 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { FormField } from "./field.js";
+const truthy = ["true", "on", "yes", "1"];
+const falsy = ["false", "off", "no", "0"];
+class Boolean extends FormField {
+  constructor(required, error_message = "") {
+    super(required);
+    this.error_message = error_message;
+    this.predicate = predicates.boolean;
+  }
+  async isValueValid(_, value) {
+    if (this.required && !value) {
+      return { valid: false, message: this.error_message };
+    }
+    return { valid: true, message: "" };
+  }
+  async parse(_, value) {
+    if (is(value, predicates.boolean)) {
+      return { parsable: true, parsed_value: value, error: null };
+    } else if (is(value, predicates.string) && [...truthy, ...falsy].includes(value)) {
+      return {
+        parsable: true,
+        parsed_value: truthy.includes(value),
+        error: null
+      };
+    } else if (is(value, predicates.undefined)) {
+      return {
+        parsable: true,
+        parsed_value: false,
+        error: null
+      };
+    } else if (value === null) {
+      return { parsable: true, parsed_value: false, error: null };
+    } else {
+      return {
+        parsable: false,
+        parsed_value: null,
+        error: "Please enter a boolean"
+      };
+    }
+  }
+  getEmptyValue() {
+    return false;
+  }
+}
+export {
+  Boolean
+};
+//# sourceMappingURL=boolean.js.map

package/dist/forms/fields/boolean.test.js

@@ -0,0 +1,33 @@
+import { describe, it } from "vitest";
+import assert from "assert";
+import { Fields } from "../../index.js";
+describe("boolean field", () => {
+  const ctx = {};
+  it("validation logic", async () => {
+    const required = new Fields.Boolean(true);
+    const not_required = new Fields.Boolean(false);
+    assert.strictEqual((await required.isValueValid(ctx, true)).valid, true);
+    assert.strictEqual((await required.isValueValid(ctx, false)).valid, false);
+    assert.strictEqual((await not_required.isValueValid(ctx, true)).valid, true);
+    assert.strictEqual((await not_required.isValueValid(ctx, false)).valid, true);
+  });
+  it("parse function", async () => {
+    const field = new Fields.Boolean(true);
+    const true_response = await field.parse(ctx, true);
+    const null_response = await field.parse(ctx, null);
+    const true_as_string_response = await field.parse(ctx, "true");
+    const undefined_response = await field.parse(ctx, void 0);
+    const number_response = await field.parse(ctx, 42);
+    assert.strictEqual(true_response.parsable, true);
+    assert.strictEqual(true_response.parsed_value, true);
+    assert.strictEqual(null_response.parsable, true);
+    assert.strictEqual(null_response.parsed_value, false);
+    assert.strictEqual(true_as_string_response.parsable, true);
+    assert.strictEqual(true_as_string_response.parsed_value, true);
+    assert.strictEqual(undefined_response.parsable, true);
+    assert.strictEqual(undefined_response.parsed_value, false);
+    assert.strictEqual(number_response.parsable, false);
+    assert.strictEqual(number_response.error, "Please enter a boolean");
+  });
+});
+//# sourceMappingURL=boolean.test.js.map