@sealcode/sealgen 0.11.8 → 0.12.2

package/dist/forms/controls/dropdown.js

@@ -0,0 +1,62 @@
+import { tempstream } from "tempstream";
+import { attribute } from "../../sanitize.js";
+import { SimpleInput } from "./simple-input.js";
+class FreeformDropdown extends SimpleInput {
+  constructor(field, _generateOptions, options = {
+    label: field.name,
+    autosubmit: false,
+    autocomplete: true
+  }) {
+    super(field, options);
+    this.field = field;
+    this._generateOptions = _generateOptions;
+    this.options = options;
+  }
+  async generateOptions(ctx) {
+    return this._generateOptions(ctx);
+  }
+  async getInputAttributes(fctx) {
+    const original = await super.getInputAttributes(fctx);
+    return {
+      ...original,
+      ...Object.fromEntries([
+        ...this.options.autosubmit ? [
+          [
+            "onchange",
+            (original.onchange || "") + ";this.form.submit();"
+          ]
+        ] : []
+      ])
+    };
+  }
+  async renderInput(ctx, attributes_str, data) {
+    const { parsed: picked_value } = await this.field.getValue(ctx, data);
+    return (
+      /* HTML */
+      tempstream`<select ${attributes_str}>
+			${// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      Promise.resolve(this.generateOptions(ctx)).then(
+        (options) => options.map(
+          ({ value, label }) => `<option value="${attribute(value)}" ${(value || "") == picked_value ? "selected" : ""}>${label}</option>`
+        )
+      )}
+		</select>`
+    );
+  }
+}
+class Dropdown extends FreeformDropdown {
+  constructor(field, options = {
+    label: field.name,
+    autosubmit: false,
+    autocomplete: true
+  }) {
+    super(field, (ctx) => field.generateOptions(ctx), options);
+    this.field = field;
+    this.options = options;
+  }
+}
+export {
+  Dropdown,
+  FreeformDropdown
+};
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +1,82 @@
+import { tempstream } from "tempstream";
+import { attribute } from "../../sanitize.js";
+import { FormFieldControl } from "./form-field-control.js";
+class EditableCollectionSubset extends FormFieldControl {
+  constructor(field, actionname, listLabel, selectLabel) {
+    super([field]);
+    this.field = field;
+    this.actionname = actionname;
+    this.listLabel = listLabel;
+    this.selectLabel = selectLabel;
+    this.role = "input";
+  }
+  async render(fctx) {
+    const { parsed: values } = await this.field.getValue(
+      fctx.ctx,
+      fctx.data
+    );
+    return tempstream`<div>
+			<ul>
+				${Promise.resolve(this.field.generateOptions(fctx.ctx)).then(
+      (options) => Object.entries(options).filter(
+        ([value]) => (values || []).includes(value)
+      ).map(
+        ([value, text]) => (
+          /* HTML */
+          `
+									<li>
+										<form
+											method="POST"
+											action="${fctx.ctx.path}"
+										>
+											<span>${text}</span>
+											<input
+												type="hidden"
+												name="${this.field.name}"
+												value="${attribute(value)}"
+											/>
+											<input
+												type="hidden"
+												name="${this.actionname}"
+												value="list"
+											/>
+											<input
+												type="submit"
+												${this.listLabel ? `value="${this.listLabel}"` : ""}
+											/>
+										</form>
+									</li>
+								`
+        )
+      )
+    )}
+			</ul>
+			<form method="POST" action="${fctx.ctx.path}">
+				<select name="${this.field.name}">
+					${Promise.resolve(
+      this.field.generateOptions(fctx.ctx)
+    ).then(
+      (options) => Object.entries(options).filter(
+        ([value]) => !(values || []).includes(
+          value
+        )
+      ).map(
+        ([value, text]) => `<option value="${attribute(
+          value
+        )}">${text}</option>`
+      )
+    )}
+				</select>
+				<input type="hidden" name="${this.actionname}" value="select" />
+				<input
+					type="submit"
+					${this.selectLabel ? `value="${this.selectLabel}"` : ""}
+				/>
+			</form>
+		</div>`;
+  }
+}
+export {
+  EditableCollectionSubset
+};
+//# sourceMappingURL=editable-collection-subset.js.map

package/dist/forms/controls/field-group.js

@@ -0,0 +1,52 @@
+import { tempstream } from "tempstream";
+import { FormFieldControl } from "./form-field-control.js";
+class FieldGroup extends FormFieldControl {
+  constructor(controls, options = {}) {
+    super([]);
+    this.controls = controls;
+    this.options = options;
+  }
+  preLabel() {
+    return "";
+  }
+  preLabelContainer() {
+    return "";
+  }
+  postLabel() {
+    return "";
+  }
+  preFields() {
+    return "";
+  }
+  postFields() {
+    return "";
+  }
+  getGroupLabelProps() {
+    return `class="field-group__label"`;
+  }
+  async render(fctx) {
+    const { label, classes } = this.options;
+    return tempstream`
+			<div
+				class="field-group ${(classes || []).join(" ")}"
+				${this.options.containerID ? `id="${this.options.containerID}"` : ""}
+			>
+				${this.preLabelContainer()}
+				<div class="field-group__label-container">
+					${this.preLabel()}
+					${label ? `<label ${this.getGroupLabelProps()}>${label}</label>` : ""}
+					${this.postLabel()}
+				</div>
+				${this.preFields()}
+				<div class="field-group__fields">
+					${this.controls.map((control) => control.render(fctx))}
+				</div>
+				${this.postFields()}
+			</div>
+		`;
+  }
+}
+export {
+  FieldGroup
+};
+//# sourceMappingURL=field-group.js.map

package/dist/forms/controls/file.js

@@ -0,0 +1,38 @@
+import { tempstream } from "tempstream";
+import { SimpleInput } from "./simple-input.js";
+class File extends SimpleInput {
+  getType() {
+    return "file";
+  }
+  async renderFilePreview(_ctx, file_data) {
+    return file_data?.filename || "";
+  }
+  async preInput(ctx, data) {
+    const { parsed } = await this.field.getValue(ctx, data);
+    return tempstream`${this.renderFilePreview(ctx, parsed.old)}
+			<input
+				type="hidden"
+				name="${this.field.name}[old][id]"
+				value="${parsed.old?.id || ""}"
+			/>
+			<input
+				type="hidden"
+				name="${this.field.name}[old][filename]"
+				value="${parsed.old?.filename || ""}"
+			/>`;
+  }
+  async getInputAttributes(fctx) {
+    const original = await super.getInputAttributes(fctx);
+    const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
+    return {
+      ...original,
+      name: this.field.name + "[new]",
+      required: original.required && !parsed.old,
+      value: false
+    };
+  }
+}
+export {
+  File
+};
+//# sourceMappingURL=file.js.map

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

@@ -0,0 +1,19 @@
+class FormControlContext {
+  constructor(ctx, data, messages, field_name_prefix, form_id, validate) {
+    this.ctx = ctx;
+    this.data = data;
+    this.messages = messages;
+    this.field_name_prefix = field_name_prefix;
+    this.form_id = form_id;
+    this.validate = validate;
+  }
+}
+class FormControl {
+  mount(router) {
+  }
+}
+export {
+  FormControl,
+  FormControlContext
+};
+//# sourceMappingURL=form-control.js.map

package/dist/forms/controls/form-field-control.js

@@ -0,0 +1,12 @@
+import { FormControl } from "./form-control.js";
+class FormFieldControl extends FormControl {
+  constructor(fields) {
+    super();
+    this.fields = fields;
+    this.role = "input";
+  }
+}
+export {
+  FormFieldControl
+};
+//# sourceMappingURL=form-field-control.js.map

package/dist/forms/controls/form-header.js

@@ -0,0 +1,17 @@
+import { FormControl } from "./form-control.js";
+class FormHeader extends FormControl {
+  constructor(text, isVisible = async () => true) {
+    super();
+    this.text = text;
+    this.isVisible = isVisible;
+    this.role = "decoration";
+  }
+  async render(fctx) {
+    const isVsbl = await this.isVisible(fctx);
+    return isVsbl ? `<h2>${this.text}</h2>` : "";
+  }
+}
+export {
+  FormHeader
+};
+//# sourceMappingURL=form-header.js.map

package/dist/forms/controls/form-paragraph.js

@@ -0,0 +1,15 @@
+import { FormControl } from "./form-control.js";
+class FormParagraph extends FormControl {
+  constructor(text) {
+    super();
+    this.text = text;
+    this.role = "decoration";
+  }
+  render() {
+    return `<p>${this.text}</p>`;
+  }
+}
+export {
+  FormParagraph
+};
+//# sourceMappingURL=form-paragraph.js.map

package/dist/forms/controls/frame.js

@@ -0,0 +1,22 @@
+import { FormControl } from "./form-control.js";
+class Frame extends FormControl {
+  constructor(src) {
+    super();
+    this.src = src;
+    this.role = "decoration";
+  }
+  render() {
+    return (
+      /* HTML */
+      `<turbo-frame
+			id="contrahents"
+			loading="lazy"
+			src="${this.src}"
+		></turbo-frame>`
+    );
+  }
+}
+export {
+  Frame
+};
+//# sourceMappingURL=frame.js.map

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