@tsed/schema-formio 8.0.0 → 8.0.2

package/src/decorators/currency.spec.ts

@@ -0,0 +1,40 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {Currency} from "./currency.js";
+
+describe("Currency", () => {
+  it("should declare currency", async () => {
+    class Model {
+      @Currency()
+      test: number;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          currency: "USD",
+          delimiter: true,
+          disabled: false,
+          input: true,
+          inputFormat: "plain",
+          label: "Test",
+          key: "test",
+          mask: false,
+          requireDecimal: false,
+          spellcheck: true,
+          type: "number",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+});

package/src/decorators/currency.ts

@@ -0,0 +1,19 @@
+import {Component} from "./component.js";
+/**
+ * Configure the property as Currency component.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Currency(props: Record<string, any> = {}): PropertyDecorator {
+  return Component({
+    currency: "USD",
+    inputFormat: "plain",
+    mask: false,
+    spellcheck: true,
+    delimiter: true,
+    ...props,
+    type: "currency"
+  });
+}

package/src/decorators/customClass.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {CustomClass} from "./customClass.js";
+
+describe("@CustomClass", () => {
+  it("should add a custom css class on field", async () => {
+    class Model {
+      @CustomClass("css-class")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          customClass: "css-class",
+          type: "textfield",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/customClass.ts

@@ -0,0 +1,14 @@
+import {Component} from "./component.js";
+
+/**
+ * Add a custom css class.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function CustomClass(customClass: string) {
+  return Component({
+    customClass
+  });
+}

package/src/decorators/customConditional.spec.ts

@@ -0,0 +1,95 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {CustomConditional} from "./customConditional.js";
+
+describe("@CustomConditional", () => {
+  it("should add a custom conditional rule on field (1)", async () => {
+    class Model {
+      @CustomConditional(({value}) => value === 1)
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          customConditional: "show = value === 1",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+  it("should add a custom conditional rule on field (2)", async () => {
+    class Model {
+      @CustomConditional((ctx) => ctx.value === 1)
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          customConditional: "show = value === 1",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+  it("should add a custom conditional rule on field (3)", async () => {
+    class Model {
+      @CustomConditional("show = value === 1")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          customConditional: "show = value === 1",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/customConditional.ts

@@ -0,0 +1,85 @@
+import {isArrowFn} from "@tsed/core";
+import {FormioComponent, FormioForm, FormioSubmission} from "@tsed/formio-types";
+import type {Utils} from "formiojs";
+import type {LoDashStatic} from "lodash";
+import type {Moment} from "moment";
+
+import {Component} from "./component.js";
+
+export interface CustomConditionalCtx<Value = any, Data = any, Row = any> {
+  /**
+   * The complete submission object.
+   */
+  form: FormioForm;
+  /**
+   * The complete submission object.
+   */
+  submission: FormioSubmission<Data>;
+  /**
+   * The complete submission data object.
+   */
+  data: Data;
+  /**
+   * Contextual "row" data, used within DataGrid, EditGrid, and Container components
+   */
+  row: Row;
+  /**
+   * The current component JSON
+   */
+  component: FormioComponent;
+  /**
+   * The current component instance.
+   */
+  instance: any;
+  /**
+   * The current value of the component.
+   */
+  value: Value;
+  /**
+   * The moment.js library for date manipulation.
+   */
+  moment: Moment;
+  /**
+   * An instance of Lodash.
+   */
+  _: LoDashStatic;
+  /**
+   * An instance of the FormioUtils object.
+   */
+  utils: typeof Utils;
+  /**
+   * An alias for "utils".
+   */
+  util: typeof Utils;
+}
+
+function sanitize(customConditional: Function) {
+  const str = customConditional.toString();
+
+  const [signature, ...fn] = str.split("=>");
+  let content = fn.join("=>");
+
+  if (!signature.includes("{")) {
+    content = content.replace(new RegExp(`${signature.trim()}.`, "gi"), "");
+  }
+
+  return `show = ${content.trim()}`;
+}
+
+/**
+ * Adds custom conditional rule to display or not the input form.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param customConditional
+ */
+export function CustomConditional(customConditional: string | ((ctx: CustomConditionalCtx) => any)) {
+  if (isArrowFn(customConditional)) {
+    customConditional = sanitize(customConditional);
+  }
+
+  return Component({
+    customConditional
+  });
+}

package/src/decorators/dataSourceJson.spec.ts

@@ -0,0 +1,88 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {DataSourceJson} from "./dataSourceJson.js";
+import {Select} from "./select.js";
+
+describe("DataSourceJson", () => {
+  it("should declare datasource", async () => {
+    class Model {
+      @Select()
+      @DataSourceJson([
+        {
+          id: "id",
+          value: "value"
+        }
+      ])
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          data: {
+            json: '[{"id":"id","value":"value"}]'
+          },
+          dataSrc: "json",
+          disabled: false,
+          input: true,
+          label: "Test",
+          key: "test",
+          selectThreshold: 0.3,
+          type: "select",
+          validate: {
+            required: false
+          },
+          widget: "choicesjs"
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+  it("should declare datasource from resolver", async () => {
+    class Model {
+      @Select()
+      @DataSourceJson(() => [
+        {
+          id: "id",
+          value: "value"
+        }
+      ])
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          data: {
+            json: '[{"id":"id","value":"value"}]'
+          },
+          dataSrc: "json",
+          disabled: false,
+          input: true,
+          label: "Test",
+          key: "test",
+          selectThreshold: 0.3,
+          type: "select",
+          validate: {
+            required: false
+          },
+          widget: "choicesjs"
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+});

package/src/decorators/dataSourceJson.ts

@@ -0,0 +1,26 @@
+import {isFunction} from "@tsed/core";
+
+import {FormioDataResolver, FormioDataResolverCtx} from "../domain/FormioDataResolver.js";
+import {Component} from "./component.js";
+
+const wrap = (resolver: FormioDataResolver) => async (opts: FormioDataResolverCtx) => {
+  const result = await resolver(opts);
+  return JSON.stringify(result);
+};
+
+/**
+ * Set custom json data source
+ * @param data
+ * @param props
+ * @constructor
+ */
+export function DataSourceJson(data: any | FormioDataResolver, props: Record<string, any> = {}) {
+  return Component({
+    ...props,
+    dataSrc: "json",
+    data: {
+      ...props.data,
+      json: isFunction(data) ? wrap(data) : JSON.stringify(data)
+    }
+  });
+}

package/src/decorators/dataSourceUrl.spec.ts

@@ -0,0 +1,111 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {DataSourceUrl} from "./dataSourceUrl.js";
+import {Select} from "./select.js";
+
+describe("@DataSourceUrl", () => {
+  it("should declare datasource url", async () => {
+    class Model {
+      @Select()
+      @DataSourceUrl("https://domain.com/api/datasource")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          data: {
+            url: "https://domain.com/api/datasource"
+          },
+          dataSrc: "url",
+          disabled: false,
+          input: true,
+          label: "Test",
+          key: "test",
+          selectThreshold: 0.3,
+          type: "select",
+          validate: {
+            required: false
+          },
+          widget: "choicesjs"
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+  it("should declare datasource url with a resolver", async () => {
+    class Model {
+      @Select()
+      @DataSourceUrl(({env}) => `/datasource?env=${env}`)
+      test: string;
+    }
+
+    const schema1 = await getFormioSchema(Model, {env: "integ"});
+
+    expect(schema1).toEqual({
+      components: [
+        {
+          data: {
+            url: "/datasource?env=integ"
+          },
+          dataSrc: "url",
+          disabled: false,
+          input: true,
+          label: "Test",
+          key: "test",
+          selectThreshold: 0.3,
+          type: "select",
+          validate: {
+            required: false
+          },
+          widget: "choicesjs"
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+
+    const schema2 = await getFormioSchema(Model, {env: "staging"});
+
+    expect(schema2).toEqual({
+      components: [
+        {
+          data: {
+            url: "/datasource?env=staging"
+          },
+          dataSrc: "url",
+          disabled: false,
+          input: true,
+          label: "Test",
+          key: "test",
+          selectThreshold: 0.3,
+          type: "select",
+          validate: {
+            required: false
+          },
+          widget: "choicesjs"
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+});

package/src/decorators/dataSourceUrl.ts

@@ -0,0 +1,19 @@
+import {FormioDataResolver} from "../domain/FormioDataResolver.js";
+import {Component} from "./component.js";
+
+/**
+ * Set URL data on the current component.
+ * @param url
+ * @param props
+ * @constructor
+ */
+export function DataSourceUrl(url: string | FormioDataResolver, props: Record<string, any> = {}) {
+  return Component({
+    ...props,
+    dataSrc: "url",
+    data: {
+      ...props.data,
+      url
+    }
+  });
+}

package/src/decorators/errorLabel.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {ErrorLabel} from "./errorLabel.js";
+
+describe("@ErrorLabel", () => {
+  it("should set the error label", async () => {
+    class Model {
+      @ErrorLabel("Error label")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          disabled: false,
+          errorLabel: "Error label",
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+});

package/src/decorators/errorLabel.ts

@@ -0,0 +1,14 @@
+import {Component} from "./component.js";
+
+/**
+ * Set the error label when an error occur.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function ErrorLabel(message: string) {
+  return Component({
+    errorLabel: message
+  });
+}

package/src/decorators/errorMessage.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {ErrorMessage} from "./errorMessage.js";
+
+describe("@ErrorMessage", () => {
+  it("should set a custom error message", async () => {
+    class Model {
+      @ErrorMessage("My message")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          validate: {
+            required: false,
+            customMessage: "My message"
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+});

package/src/decorators/errorMessage.ts

@@ -0,0 +1,13 @@
+import {Validate} from "./validate.js";
+
+/**
+ * Add error message when an error occur.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param message
+ */
+export function ErrorMessage(message: string) {
+  return Validate("customMessage", message);
+}

package/src/decorators/form.ts

@@ -0,0 +1,25 @@
+import {nameOf, StoreSet, useDecorators} from "@tsed/core";
+import {FormioForm} from "@tsed/formio-types";
+import {Name} from "@tsed/schema";
+import {kebabCase} from "change-case";
+
+import {FormsContainer} from "../registries/FormsContainer.js";
+import {Label} from "./label.js";
+
+/**
+ * Expose the model as Formio Form.
+ * @param form
+ */
+export function Form(form: Partial<Omit<FormioForm, "components" | "_id">> = {}): ClassDecorator {
+  return useDecorators(
+    (target: any) => {
+      const name = form.name || nameOf(target);
+      const machineName = kebabCase(name);
+      FormsContainer.set(name, target as any);
+      FormsContainer.set(machineName, target as any);
+    },
+    form.name && Name(form.name),
+    form.label && Label(form.label),
+    form && StoreSet("formio:form", form)
+  );
+}

package/src/decorators/hidden.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {Hidden} from "./hidden.js";
+
+describe("Hidden", () => {
+  it("should declare a model with Hidden field", async () => {
+    class Model {
+      @Hidden()
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          disabled: false,
+          hidden: true,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+});