@sealcode/sealgen 0.11.7 → 0.12.0

package/lib/src/forms/controls/field-group.js

@@ -0,0 +1,53 @@
+import { tempstream } from "tempstream";
+import { FormFieldControl } from "./form-field-control.js";
+export 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 /* HTML */ `
+			<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>
+		`;
+    }
+}
+//# sourceMappingURL=field-group.js.map

package/lib/src/forms/controls/file.js

@@ -0,0 +1,35 @@
+import { tempstream } from "tempstream";
+import { SimpleInput } from "./simple-input.js";
+export 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 /* HTML */ `${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,
+        };
+    }
+}
+//# sourceMappingURL=file.js.map

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

@@ -0,0 +1,14 @@
+export 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;
+    }
+}
+export class FormControl {
+    mount(router) { }
+}
+//# sourceMappingURL=form-control.js.map

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

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

package/lib/src/forms/controls/form-header.js

@@ -0,0 +1,14 @@
+import { FormControl } from "./form-control.js";
+export 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>` : "";
+    }
+}
+//# sourceMappingURL=form-header.js.map

package/lib/src/forms/controls/form-paragraph.js

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

package/lib/src/forms/controls/frame.js

@@ -0,0 +1,25 @@
+import { FormControl } from "./form-control.js";
+/**
+ * This class will render `turbo-frame` tag so that u can
+ * embed other route inside your form. This will require
+ * to add value to `data: FormData` (inside your master form
+ * render function) with key `Frame.FRAME_PATH_KEY`. Value
+ * needs to be url to route that you want to embed. If you
+ * this value wont be provided frame will redner empty string.
+ * See `src/back/routes/profile/[id].form.ts` for an example.
+ */
+export 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>`;
+    }
+}
+//# sourceMappingURL=frame.js.map

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

@@ -0,0 +1,14 @@
+import { tempstream } from "tempstream";
+import { attribute } from "../../sanitize.js";
+import { FormFieldControl } from "./form-field-control.js";
+export 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}">`;
+    }
+}
+//# sourceMappingURL=hidden-input.js.map

package/lib/src/forms/controls/html.js

@@ -0,0 +1,23 @@
+import { FormControl } from "./form-control.js";
+export 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;
+    }
+}
+//# sourceMappingURL=html.js.map

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

@@ -0,0 +1,160 @@
+import { File as SealiousFile, } 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";
+export 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() {
+        // the "A" is necessary here
+        return `A${this.field.name}__multiple-fields-control`;
+    }
+    renderFrame(ctx, content) {
+        return tempstream /* HTML */ `<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 SealiousFile.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 /* HTML */ `<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) // filter out undefineds
+            .map(async (item) => [
+            item,
+            await this.extractFileFromItem(item),
+        ]))).filter(([_, f]) => f !== null);
+        return inputWrapper(["multiple-files", this.field.name, ...this.getClassModifiers()], tempstream /* HTML */ `
+				<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>
+			`);
+    }
+}
+//# sourceMappingURL=multiple-files.js.map

package/lib/src/forms/controls/multiple-photos.js

@@ -0,0 +1,33 @@
+import { tempstream } from "tempstream";
+import { MultipleFiles } from "./multiple-files.js";
+export 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 /* HTML */ `<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>`;
+    }
+}
+//# sourceMappingURL=multiple-photos.js.map

package/lib/src/forms/controls/number.js

@@ -0,0 +1,25 @@
+import { SimpleInput } from "./simple-input.js";
+export 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]] : []),
+            ]),
+        };
+    }
+}
+//# sourceMappingURL=number.js.map

package/lib/src/forms/controls/photo.js

@@ -0,0 +1,57 @@
+import { tempstream } from "tempstream";
+import { File } from "./file.js";
+import { File as SealiousFile } from "sealious";
+export 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 SealiousFile.fromID(ctx.$app, id);
+        return tempstream /* HTML */ `<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(`"`, "'"),
+        };
+    }
+}
+//# sourceMappingURL=photo.js.map

package/lib/src/forms/controls/radio.js

@@ -0,0 +1,25 @@
+import { Tickable } from "./tickable.js";
+export 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;
+    }
+}
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1,47 @@
+// import { FormControl } from "./form-control";
+// import { FormFieldControl } from "./form-field-control";
+// import { ReverseSingleReference as ReverseSingleReferenceField } from "../fields/field";
+// import { Context } from "koa";
+// import { Fields } from "../..";
+// import { ArrayControl } from "./array";
+export {};
+// export class ReverseSingleReference extends ArrayControl {
+// 	//
+// 	//
+// 	// this isn't finished yet
+// 	//
+// 	//
+// 	constructor(
+// 		public field: ReverseSingleReferenceField,
+// 		public item_controls: Array<FormControl | UnboundControlStorage>
+// 	) {
+// 		super(field, item_controls);
+// 	}
+// 	async getItems(ctx: Context) {
+// 		const target_id = await this.getTargetItemID(ctx);
+// 		const { items } = await this.field.sealious_field
+// 			.getReferencingCollection()
+// 			.list(ctx.$context)
+// 			.filter({
+// 				[this.field.sealious_field.referencing_field]: target_id,
+// 			})
+// 			.fetch();
+// 		return items;
+// 	}
+// 	makeSubfield(fieldname: string) {
+// 		const collection = this.field.sealious_field.getReferencingCollection();
+// 		if (!collection.fields[fieldname]) {
+// 			return null;
+// 		}
+// 		return new Fields.CollectionField(false, collection.fields[fieldname]);
+// 	}
+// 	async add(ctx: Context): Promise<void> {
+// 		const collection = this.field.sealious_field.getReferencingCollection();
+// 		await collection.create(ctx.$context, {
+// 			[this.field.sealious_field.referencing_field]:
+// 				await this.getTargetItemID(ctx),
+// 			...(await this.getDefaultItemBody()),
+// 		});
+// 	}
+// }
+//# sourceMappingURL=reverse-single-reference.js.map

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

@@ -0,0 +1,78 @@
+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";
+export 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 != undefined
+            ? 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 !== undefined && 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 /* HTML */ `
+				${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>`
+            : ""}
+			`);
+    }
+}
+//# sourceMappingURL=simple-input.js.map

package/lib/src/forms/controls/textarea.js

@@ -0,0 +1,33 @@
+import { SimpleInput } from "./simple-input.js";
+export 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>`;
+    }
+}
+//# sourceMappingURL=textarea.js.map