@sealcode/sealgen 0.11.8 → 0.12.2

package/dist/find-css-includes.js

@@ -0,0 +1,27 @@
+import { promises as fs } from "fs";
+import _locreq from "locreq";
+import { relative } from "path";
+import { walkDir } from "./utils/walk.js";
+const target_locreq = _locreq(process.cwd());
+async function generate_css_includes() {
+  const files = await Promise.all(
+    (await walkDir(target_locreq.resolve("src/"))).filter(
+      (f) => f.endsWith(".css") && !f.endsWith("/main.css") && !f.endsWith("\\main.css") && !f.endsWith("/includes.css") && !f.endsWith("\\includes.css") && !f.includes(".#")
+    ).map(
+      (fullpath) => relative(target_locreq.resolve("src/"), fullpath)
+    )
+  );
+  await fs.writeFile(
+    target_locreq.resolve("src/includes.css"),
+    `/*  DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-css-includes */
+
+@import "../node_modules/@sealcode/sealgen/src/forms/forms.css";
+${files.map((path) => `@import "${path.replaceAll("\\", "/")}";`).join("\n")}
+`
+  );
+  console.log("Successfuly generated new src/includes.css file");
+}
+export {
+  generate_css_includes
+};
+//# sourceMappingURL=find-css-includes.js.map

package/dist/forms/controls/array.js

@@ -0,0 +1,171 @@
+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";
+function UnboundControl(controlClass, arbitrary_field_name, params) {
+  return [controlClass, arbitrary_field_name, params];
+}
+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: field_name2 }) => (
+          /* HTML */
+          `<input
+					name="${field_name2}"
+					type="hidden"
+					value="${values[field_name2] || ""}"
+					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`<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`<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, {})
+      );
+    });
+  }
+}
+export {
+  StructuredArray,
+  UnboundControl
+};
+//# sourceMappingURL=array.js.map

package/dist/forms/controls/autocomplete.js

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

package/dist/forms/controls/big-radio-group.js

@@ -0,0 +1,38 @@
+import { tempstream } from "tempstream";
+import { FormFieldControl } from "./form-field-control.js";
+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`<div class="bigradios">
+			${Object.entries(this.options).map(([key, { description }]) => {
+      const id = `${this.field.name}-radio-${key}`;
+      return tempstream`<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>`;
+  }
+}
+export {
+  BigRadioGroup
+};
+//# sourceMappingURL=big-radio-group.js.map

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

@@ -0,0 +1,46 @@
+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";
+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);
+  }
+}
+export {
+  CheckboxGroup
+};
+//# sourceMappingURL=checkbox-group.js.map

package/dist/forms/controls/checkbox.js

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

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/{lib → dist}/forms/controls/collapsible-field-group.js

@@ -1,23 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleFieldGroup = void 0;
-const field_group_1 = require("./field-group");
-const crypto_1 = require("crypto");
-class CollapsibleFieldGroup extends field_group_1.FieldGroup {
-    constructor(controls, options = {}) {
-        super([]);
-        this.controls = controls;
-        this.options = options;
-        if (this.options.groupID == undefined) {
-            this.options.groupID = "A" + (0, crypto_1.randomUUID)(); // "A" is needed as ids always have to start with a letter
-        }
-        this.collapseID = this.options.groupID + "collapse";
+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();
     }
-    getGroupLabelProps() {
-        return super.getGroupLabelProps() + ` for="${this.collapseID}"`;
-    }
-    preLabelContainer() {
-        return /* HTML */ `<style>
+    this.collapseID = this.options.groupID + "collapse";
+  }
+  getGroupLabelProps() {
+    return super.getGroupLabelProps() + ` for="${this.collapseID}"`;
+  }
+  preLabelContainer() {
+    return (
+      /* HTML */
+      `<style>
 				input#${this.collapseID} {
 					display: none;
 				}
@@ -58,10 +57,13 @@ class CollapsibleFieldGroup extends field_group_1.FieldGroup {
 				type="checkbox"
 				id="${this.collapseID}"
 				${this.options.openOnStart ? "checked" : ""}
-			/>`;
-    }
-    postLabel() {
-        return /* HTML */ `<label
+			/>`
+    );
+  }
+  postLabel() {
+    return (
+      /* HTML */
+      `<label
 			class="field-group__collapse-label"
 			for="${this.collapseID}"
 		>
@@ -75,8 +77,11 @@ class CollapsibleFieldGroup extends field_group_1.FieldGroup {
 			>
 				${this.options.textWhenClosed || "open"}
 			</span>
-		</label>`;
-    }
+		</label>`
+    );
+  }
 }
-exports.CollapsibleFieldGroup = CollapsibleFieldGroup;
-//# sourceMappingURL=collapsible-field-group.js.map
+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