@sealcode/sealgen 0.11.8 → 0.12.0

package/dist/forms/controls/checkboxed-list-input.js

@@ -0,0 +1,44 @@
+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";
+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`${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>
+						`
+      )
+    ) : ""}`;
+  }
+}
+export {
+  CheckboxedListInput
+};
+//# sourceMappingURL=checkboxed-list-input.js.map

package/dist/forms/controls/collapsible-checkbox-group.js

@@ -0,0 +1,16 @@
+import { CheckboxGroup } from "./checkbox-group.js";
+import { CollapsibleFieldGroup } from "./collapsible-field-group.js";
+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);
+  }
+}
+export {
+  CollapsibleCheckboxGroup
+};
+//# sourceMappingURL=collapsible-checkbox-group.js.map

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

@@ -0,0 +1,87 @@
+import { FieldGroup } from "./field-group.js";
+import { randomUUID } from "crypto";
+class CollapsibleFieldGroup extends FieldGroup {
+  constructor(controls, options = {}) {
+    super([]);
+    this.controls = controls;
+    this.options = options;
+    if (this.options.groupID == void 0) {
+      this.options.groupID = "A" + randomUUID();
+    }
+    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>`
+    );
+  }
+}
+export {
+  CollapsibleFieldGroup
+};
+//# sourceMappingURL=collapsible-field-group.js.map

package/dist/forms/controls/controls.js

@@ -0,0 +1,44 @@
+import { FormControl } from "./form-control.js";
+import { FormFieldControl } from "./form-field-control.js";
+import { EditableCollectionSubset } from "./editable-collection-subset.js";
+import { Frame } from "./frame.js";
+import { CheckboxedListInput } from "./checkboxed-list-input.js";
+export * from "./dropdown.js";
+import { SimpleInput } from "./simple-input.js";
+import { FormHeader } from "./form-header.js";
+import { FormParagraph } from "./form-paragraph.js";
+import { HTML } from "./html.js";
+import { HiddenInput } from "./hidden-input.js";
+import { Textarea } from "./textarea.js";
+import { 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 "./array.js";
+export {
+  CheckboxedListInput,
+  EditableCollectionSubset,
+  FieldGroup,
+  FormControl,
+  FormFieldControl,
+  FormHeader,
+  FormParagraph,
+  Frame,
+  HTML,
+  HiddenInput,
+  SimpleInput,
+  Textarea
+};
+//# sourceMappingURL=controls.js.map

package/dist/forms/controls/derived-frame.js

@@ -0,0 +1,77 @@
+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";
+class DerivedFrame extends Derived {
+  constructor(frame_name, fields, generateFrameContent, 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`<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;
+  }
+}
+export {
+  DerivedFrame
+};
+//# sourceMappingURL=derived-frame.js.map

package/dist/forms/controls/derived.js

@@ -0,0 +1,81 @@
+import { randomUUID } from "crypto";
+import { tempstream } from "tempstream";
+import { FormControl } from "./form-control.js";
+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) {
+    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`<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>`;
+  }
+}
+export {
+  Derived
+};
+//# sourceMappingURL=derived.js.map

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