@sealcode/sealgen 0.11.7 → 0.12.0

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

@@ -0,0 +1,141 @@
+import { hasShape, predicates } from "@sealcode/ts-predicates";
+import qs from "qs";
+import { tempstream } from "tempstream";
+import { SimpleFormField } from "../fields/simple-form-field.js";
+import { Derived } from "./derived.js";
+import { FormFieldControl } from "./form-field-control.js";
+export function UnboundControl(controlClass, arbitrary_field_name, params) {
+    return [controlClass, arbitrary_field_name, params];
+}
+export class StructuredArray extends FormFieldControl {
+    constructor(field, item_controls) {
+        super([field]);
+        this.field = field;
+        this.item_controls = item_controls;
+    }
+    getFrameID() {
+        return `array-frame-${this.field.name}`;
+    }
+    getInnerFormID() {
+        return this.getFrameID() + "-form";
+    }
+    getActionURL(form_id, action) {
+        return `${this.getFrameID()}${form_id || action ? "?" : ""}${qs.stringify({ form_id, action })}`;
+    }
+    async getDefaultItemBody() {
+        return {};
+    }
+    makeSubfield(_field_name) {
+        const fields = this;
+        return new SimpleFormField(false);
+    }
+    async renderItemControl(ctx, form_id, control, item, index) {
+        const fctx = {
+            ctx,
+            data: {},
+            messages: [],
+            field_name_prefix: "",
+            form_id,
+            validate: false,
+        };
+        if (Array.isArray(control)) {
+            const [constructor, field_name, params] = control;
+            const field = this.makeSubfield(field_name);
+            if (!field) {
+                console.warn(`makeSubfield returned null for field ${field_name}`);
+                return "";
+            }
+            await field.init(`${this.field.name}[data][${index}][${field_name}]`);
+            const hidden_shadow = new Derived([field], async (values, { inner_form_id, field_name }) => /* HTML */ `<input
+					name="${field_name}"
+					type="hidden"
+					value="${values[field_name] || ""}"
+					form="${inner_form_id}"
+				/>`, async () => ({
+                inner_form_id: this.getInnerFormID(),
+                field_name: field.name,
+            }));
+            return tempstream `${new constructor(field, params).render({
+                ...fctx,
+                data: { [field.name]: item[field_name] },
+            })}${hidden_shadow.render({
+                ...fctx,
+                data: { [field.name]: item[field_name] },
+                form_id: this.getInnerFormID(),
+            })}`;
+        }
+        else {
+            return control.render(fctx);
+        }
+    }
+    async renderItem(ctx, form_id, item, index) {
+        return tempstream /* HTML */ `<div>
+			${this.item_controls.map((control) => this.renderItemControl(ctx, form_id, control, item, index))}
+			<input
+				type="submit"
+				value="remove"
+				form="${this.getInnerFormID()}"
+				formaction="${this.getActionURL(form_id, {
+            remove: index,
+        })}"
+			/>
+		</div>`;
+    }
+    async getItems(ctx, raw_values) {
+        return (await this.field.getValue(ctx, raw_values)).parsed;
+    }
+    async _render(ctx, form_id, raw_values) {
+        const items = await this.getItems(ctx, raw_values);
+        return tempstream /* HTML */ `<turbo-frame id="${this.getFrameID()}">
+			Reverse Single Reference
+			${items.map((item, index) => this.renderItem(ctx, form_id, item, index))}
+			<form id="${this.getInnerFormID()}" method="POST"></form>
+			<input
+				type="submit"
+				value="add"
+				form="${this.getInnerFormID()}"
+				formaction="${this.getActionURL(form_id, {
+            insert: { index: items.length, value: {} },
+        })}"
+			/>
+		</turbo-frame>`;
+    }
+    render(fctx) {
+        return this._render(fctx.ctx, fctx.form_id, fctx.data);
+    }
+    async getTargetItemID(ctx) {
+        return ctx.params.id;
+    }
+    mount(router) {
+        console.log("mounting!", this.getActionURL());
+        router.post(this.getActionURL(), async (ctx) => {
+            let form_id = ctx.query.form_id;
+            if (typeof form_id != "string") {
+                throw new Error("Missing form_id query param");
+            }
+            const item = await this.field.sealious_field.collection.getByID(ctx.$context, await this.getTargetItemID(ctx));
+            if (!hasShape({ action: predicates.object }, ctx.$body)) {
+                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(this.field.sealious_field.value_predicate),
+            }, field_data)) {
+                throw new Error("missing data atribute in action description");
+            }
+            item.set(this.field.name, {
+                ...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(ctx, form_id, await item.getDecodedBody(ctx.$context, {}));
+        });
+    }
+}
+//# sourceMappingURL=array.js.map

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

@@ -0,0 +1,23 @@
+import { SimpleInput } from "./simple-input.js";
+export class Autocomplete extends SimpleInput {
+    constructor(field, options) {
+        super(field);
+        this.field = field;
+        this.options = options;
+    }
+    getListID() {
+        return this.getID() + "_list";
+    }
+    async getInputAttributes(fctx) {
+        return {
+            ...(await super.getInputAttributes(fctx)),
+            list: this.getListID(),
+        };
+    }
+    async postInput(ctx) {
+        return /* HTML */ `<datalist id="${this.getListID()}">
+			${(await this.field.generateOptions(ctx)).map(({ value }) => /* HTML */ `<option>${value}</option>`)}
+		</datalist>`;
+    }
+}
+//# sourceMappingURL=autocomplete.js.map

package/lib/src/forms/controls/big-radio-group.js

@@ -0,0 +1,34 @@
+import { tempstream } from "tempstream";
+import { FormFieldControl } from "./form-field-control.js";
+export class BigRadioGroup extends FormFieldControl {
+    constructor(field, options) {
+        super([field]);
+        this.field = field;
+        this.options = options;
+    }
+    async render(fctx) {
+        const { raw: current_value } = await this.field.getValue(fctx.ctx, fctx.data);
+        return tempstream /* HTML */ `<div class="bigradios">
+			${Object.entries(this.options).map(([key, { description }]) => {
+            const id = `${this.field.name}-radio-${key}`;
+            return tempstream /* HTML */ `<input
+						type="radio"
+						name="${this.field.name}"
+						value="${key}"
+						id="${id}"
+						style="display: none"
+						${fctx.form_id ? `form=${fctx.form_id}` : ""}
+						${this.field.required ? "required" : ""}
+						${key == current_value ? "checked" : ""}
+					/>
+					<div class="bigradio">
+						${typeof description == "function"
+                ? description(fctx)
+                : description}
+						<label class="bigradio__cta" for="${id}">Wybierz</label>
+					</div>`;
+        })}
+		</div>`;
+    }
+}
+//# sourceMappingURL=big-radio-group.js.map

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

@@ -0,0 +1,30 @@
+import { ProxyFormField } from "../fields/proxy-field.js";
+import { CheckboxWithValue } from "./checkbox.js";
+import { FieldGroup } from "./field-group.js";
+import { FormFieldControl } from "./form-field-control.js";
+export class CheckboxGroup extends FormFieldControl {
+    constructor(field, options = {}) {
+        super([field]);
+        this.field = field;
+        this.options = options;
+    }
+    wrapGroup(fctx, checkboxes) {
+        return new FieldGroup(checkboxes, {
+            label: this.options.label,
+            classes: [
+                ...(this.options.classes || []),
+                "field-group--checkboxes",
+            ],
+        }).render(fctx);
+    }
+    async render(fctx) {
+        const { parsed: values } = await this.field.getValue(fctx.ctx, fctx.data);
+        const checkboxes = this.field.options.map((option) => new CheckboxWithValue(new ProxyFormField(false, this.field.name, false, values.includes(option)), {
+            id: this.field.name + "__" + option,
+            label: (this.options.checkboxNameToLabel ||
+                ((s) => s))(option),
+        }, option));
+        return this.wrapGroup(fctx, checkboxes);
+    }
+}
+//# sourceMappingURL=checkbox-group.js.map

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

@@ -0,0 +1,24 @@
+import { Tickable } from "./tickable.js";
+export class Checkbox extends Tickable {
+    constructor() {
+        super(...arguments);
+        this.type = "checkbox";
+    }
+    isChecked(_ctx, _data, value) {
+        return value;
+    }
+    getValueAttribute() {
+        return "";
+    }
+}
+export class CheckboxWithValue extends Checkbox {
+    constructor(field, options, value) {
+        super(field, options);
+        this.field = field;
+        this.value = value;
+    }
+    getValueAttribute() {
+        return this.value;
+    }
+}
+//# sourceMappingURL=checkbox.js.map

package/lib/src/forms/controls/checkboxed-list-input.js

@@ -0,0 +1,35 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { tempstream } from "tempstream";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
+import { FormFieldControl } from "./form-field-control.js";
+export class CheckboxedListInput extends FormFieldControl {
+    constructor(field, options = { label: field.name }) {
+        super([field]);
+        this.field = field;
+        this.options = options;
+    }
+    async render(fctx) {
+        const { parsed: pickedValues } = await this.field.getValue(fctx.ctx, fctx.data);
+        if (!is(pickedValues, predicates.array(predicates.string))) {
+            throw new Error("picked values is not an array of strings");
+        }
+        const [options, isVisible] = await Promise.all([
+            this.field.generateOptions(fctx.ctx),
+            this.field.isVisible(fctx.ctx),
+        ]);
+        const { name, required } = this.field;
+        return tempstream /* HTML */ `${isVisible
+            ? Object.entries(options).map(([value, text]) => inputWrapper([name, getRequiredClass(required)], 
+            /* HTML */ `
+							<input
+								type="checkbox"
+								id="${name}.${value}"
+								name="${name}.${value}"
+								${pickedValues.includes(value) ? "checked" : ""}
+							/>
+							<label for="${name}.${value}">${text}</label>
+						`))
+            : ""}`;
+    }
+}
+//# sourceMappingURL=checkboxed-list-input.js.map

package/lib/src/forms/controls/collapsible-checkbox-group.js

@@ -0,0 +1,13 @@
+import { CheckboxGroup } from "./checkbox-group.js";
+import { CollapsibleFieldGroup } from "./collapsible-field-group.js";
+export class CollapsibleCheckboxGroup extends CheckboxGroup {
+    wrapGroup(fctx, checkboxes) {
+        return new CollapsibleFieldGroup(checkboxes, {
+            label: this.options.label,
+            textWhenOpen: this.options.textWhenOpen,
+            textWhenClosed: this.options.textWhenClosed,
+            groupID: this.options.groupID,
+        }).render(fctx);
+    }
+}
+//# sourceMappingURL=collapsible-checkbox-group.js.map

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

@@ -0,0 +1,78 @@
+import { FieldGroup } from "./field-group.js";
+import { randomUUID } from "crypto";
+export class CollapsibleFieldGroup extends FieldGroup {
+    constructor(controls, options = {}) {
+        super([]);
+        this.controls = controls;
+        this.options = options;
+        if (this.options.groupID == undefined) {
+            this.options.groupID = "A" + randomUUID(); // "A" is needed as ids always have to start with a letter
+        }
+        this.collapseID = this.options.groupID + "collapse";
+    }
+    getGroupLabelProps() {
+        return super.getGroupLabelProps() + ` for="${this.collapseID}"`;
+    }
+    preLabelContainer() {
+        return /* HTML */ `<style>
+				input#${this.collapseID} {
+					display: none;
+				}
+
+				input#${this.collapseID} ~ .field-group__fields {
+					display: none;
+				}
+
+				input#${this.collapseID}:checked ~ .field-group__fields {
+					display: block;
+				}
+
+				input#${this.collapseID}
+					~ .field-group__label-container
+					.field-group__collapse-label-text--open {
+					display: none;
+				}
+
+				input#${this.collapseID}:checked
+					~ .field-group__label-container
+					.field-group__collapse-label-text--open {
+					display: inline-block;
+				}
+
+				input#${this.collapseID}
+					~ .field-group__label-container
+					.field-group__collapse-label-text--closed {
+					display: inline-block;
+				}
+
+				input#${this.collapseID}:checked
+					~ .field-group__label-container
+					.field-group__collapse-label-text--closed {
+					display: none;
+				}
+			</style>
+			<input
+				type="checkbox"
+				id="${this.collapseID}"
+				${this.options.openOnStart ? "checked" : ""}
+			/>`;
+    }
+    postLabel() {
+        return /* HTML */ `<label
+			class="field-group__collapse-label"
+			for="${this.collapseID}"
+		>
+			<span
+				class="field-group__collapse-label-text field-group__collapse-label-text--open"
+			>
+				${this.options.textWhenOpen || "close"}
+			</span>
+			<span
+				class="field-group__collapse-label-text field-group__collapse-label-text--closed"
+			>
+				${this.options.textWhenClosed || "open"}
+			</span>
+		</label>`;
+    }
+}
+//# sourceMappingURL=collapsible-field-group.js.map

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

@@ -0,0 +1,31 @@
+export { FormControl } from "./form-control.js";
+export { FormFieldControl } from "./form-field-control.js";
+export { EditableCollectionSubset } from "./editable-collection-subset.js";
+export { Frame } from "./frame.js";
+export { CheckboxedListInput } from "./checkboxed-list-input.js";
+export * from "./dropdown.js";
+export { SimpleInput } from "./simple-input.js";
+export { FormHeader } from "./form-header.js";
+export { FormParagraph } from "./form-paragraph.js";
+export { HTML } from "./html.js";
+export { HiddenInput } from "./hidden-input.js";
+export { Textarea } from "./textarea.js";
+export { FieldGroup } from "./field-group.js";
+export * from "./derived.js";
+export * from "./derived-frame.js";
+export * from "./tickable.js";
+export * from "./checkbox.js";
+export * from "./radio.js";
+export * from "./big-radio-group.js";
+export * from "./checkbox-group.js";
+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 "./multiple-files.js";
+export * from "./number.js";
+export * from "./multiple-photos.js";
+// export * from "./reverse-single-reference";
+export * from "./array.js";
+//# sourceMappingURL=controls.js.map

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

@@ -0,0 +1,52 @@
+import { hasShape, predicates } from "@sealcode/ts-predicates";
+import { tempstream } from "tempstream";
+import { makeSlug } from "../../utils/make-slug.js";
+import { Derived } from "./derived.js";
+import { FormControlContext } from "./form-control.js";
+export class DerivedFrame extends Derived {
+    constructor(frame_name, fields, generateFrameContent, 
+    // "a" is to make it a valid DOM id
+    frame_id = "a" + makeSlug(frame_name)) {
+        super(fields, async (values, consts) => /* HTML */ `<turbo-frame
+				id="${consts.frame_id}"
+				src="./${consts.frame_id}?${Object.entries({
+            ...consts,
+            ...(values || {}),
+        })
+            .map(([key, value]) => `${key}=${value}`)
+            .join("&")}"
+			></turbo-frame>`, async (fctx) => ({
+            form_id: fctx.form_id,
+            field_name_prefix: fctx.field_name_prefix,
+            frame_id,
+            validate: fctx.validate,
+        }));
+        this.frame_name = frame_name;
+        this.generateFrameContent = generateFrameContent;
+        this.frame_id = frame_id;
+    }
+    renderBackendResponseFrame(_ctx, content) {
+        return tempstream /* HTML */ `<turbo-frame
+			id="${this.frame_id}"
+			target="_top"
+		>
+			${content || ""}
+		</turbo-frame>`;
+    }
+    mount(router) {
+        router.get(this.frame_id, async (ctx) => {
+            const query = ctx.query;
+            if (!hasShape({
+                field_name_prefix: predicates.string,
+                form_id: predicates.string,
+                validate: predicates.string,
+            }, query)) {
+                ctx.body = this.renderBackendResponseFrame(ctx, "Missing query params");
+                return;
+            }
+            ctx.body = this.renderBackendResponseFrame(ctx, await this.generateFrameContent(new FormControlContext(ctx, ctx.query, [], query.field_name_prefix, query.form_id, query.validate === "true" ? true : false), ctx.query));
+        });
+        return;
+    }
+}
+//# sourceMappingURL=derived-frame.js.map

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

@@ -0,0 +1,77 @@
+import { randomUUID } from "crypto";
+import { tempstream } from "tempstream";
+import { FormControl } from "./form-control.js";
+export class Derived extends FormControl {
+    constructor(fields, _render, getConsts = async () => ({})) {
+        super();
+        this.fields = fields;
+        this._render = _render;
+        this.getConsts = getConsts;
+        this.role = "decoration";
+    }
+    async getBackendValues(fctx) {
+        const fieldnames = this.fields.map((f) => f.name);
+        const result = Object.fromEntries(Object.entries(fctx.data).filter(([key]) => fieldnames.includes(key)));
+        return result;
+    }
+    async render(fctx) {
+        // the A makes it always a valid id, as it cannot start with a number
+        const id = "A" + randomUUID();
+        const consts = this.getConsts(fctx);
+        const frontend_side_refresh_code = (values_code = "getValues()") => `render(${values_code}, consts)
+.then(result=>document.querySelector("#${id}").innerHTML=result)`;
+        return tempstream /* HTML */ `<div>
+			<script>
+				(function () {
+					const consts = ${"{" +
+            Object.entries((await consts) || {})
+                .map(([key, value]) => {
+                return `"${key}": ${typeof value === "object"
+                    ? JSON.stringify(value)
+                    : typeof value == "string"
+                        ? '"' + value.toString() + '"'
+                        : value.toString()}`;
+            })
+                .join(",") +
+            "}"};
+					const form_container =
+						document.currentScript.closest(".form-container");
+					const render = ${this._render.toString()};
+					function getValues() {
+						return Object.fromEntries(
+							${JSON.stringify(this.fields.map((field) => field.name))}.map((field_name) => {
+								let input = form_container.querySelector(
+									\`input[name="\${field_name}"]\`
+								);
+								if (!input) {
+									return [field_name, ""];
+								}
+								if (input.type === "radio") {
+									input = form_container.querySelector(
+										\`input[name="\${field_name}"]:checked\`
+									);
+								}
+								return [field_name, input.value];
+							})
+						);
+					}
+					function setupWatcher(field_name) {
+						form_container
+							.querySelectorAll(\`input[name="\${field_name}"]\`)
+							.forEach((input) => {
+								input.addEventListener("change", () => {
+									${frontend_side_refresh_code()};
+								});
+							});
+					}
+					${JSON.stringify(this.fields.map((field) => field.name))}.forEach(setupWatcher);
+					setTimeout(() => {
+						${frontend_side_refresh_code(JSON.stringify(await this.getBackendValues(fctx)))};
+					}, 0);
+				})();
+			</script>
+			<div id="${id}">${this._render({}, await consts)}</div>
+		</div>`;
+    }
+}
+//# sourceMappingURL=derived.js.map

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

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

package/lib/src/forms/controls/editable-collection-subset.js

@@ -0,0 +1,68 @@
+import { tempstream } from "tempstream";
+import { attribute } from "../../sanitize.js";
+import { FormFieldControl } from "./form-field-control.js";
+/**
+ * This control has own forms in it so if you want to use it you
+ * probably shouldn't use `await super.render(ctx, data, path)` in
+ * render method of you from implementation and you should write
+ * your own implementation of this method. See forms that uses
+ * this control for reference.
+ */
+export 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 /* HTML */ `<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>`;
+    }
+}
+//# sourceMappingURL=editable-collection-subset.js.map