@tsed/schema-formio 8.0.0 → 8.0.2

package/src/decorators/hidden.ts

@@ -0,0 +1,18 @@
+import {Component} from "./component.js";
+
+/**
+ * Set hidden field.
+ *
+ * A hidden field is still a part of the form, but is hidden from view.
+ *
+ * @param bool
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Hidden(bool: boolean = true): PropertyDecorator {
+  return Component({
+    hidden: bool
+  });
+}

package/src/decorators/inputTags.spec.ts

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

package/src/decorators/inputTags.ts

@@ -0,0 +1,22 @@
+import {useDecorators} from "@tsed/core";
+import {CollectionOf} from "@tsed/schema";
+
+import {Component} from "./component.js";
+/**
+ * Configure the property as Tags component.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function InputTags(props: Record<string, any> = {}): PropertyDecorator {
+  return useDecorators(
+    CollectionOf(String),
+    Component({
+      ...props,
+      tableView: false,
+      storeas: "array",
+      type: "tags"
+    })
+  );
+}

package/src/decorators/label.spec.ts

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

package/src/decorators/label.ts

@@ -0,0 +1,21 @@
+import {CustomKey, JsonEntityFn} from "@tsed/schema";
+
+import {Component} from "./component.js";
+
+/**
+ * Change the label field
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param label
+ */
+export function Label(label: string) {
+  return JsonEntityFn((entity) => {
+    return entity.decoratorType === "property"
+      ? Component({
+          label
+        })
+      : CustomKey("x-formio-label", label);
+  });
+}

package/src/decorators/mask.spec.ts

@@ -0,0 +1,105 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {Mask, Masks} from "./mask.js";
+
+describe("@Mask", () => {
+  it("should add a mask on field (1)", async () => {
+    class Model {
+      @Mask("(99999)", "____")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          inputMask: "(99999)",
+          inputMaskPlaceholderChar: "____",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+  it("should add a mask on field (2)", async () => {
+    class Model {
+      @Mask("(99999)")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          inputMask: "(99999)",
+          inputMaskPlaceholderChar: "",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});
+
+describe("@Masks", () => {
+  it("should add masks on field", async () => {
+    class Model {
+      @Masks({label: "label", mask: "mask"})
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          inputMasks: [
+            {
+              label: "label",
+              mask: "mask"
+            }
+          ],
+          type: "textfield",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/mask.ts

@@ -0,0 +1,46 @@
+import {Component} from "./component.js";
+
+/**
+ * An input mask helps the user with input by ensuring a predefined format.
+ *
+ * - 9: numeric
+ * - a: alphabetical
+ * - *: alphanumeric
+ *
+ * Example telephone mask: (999) 999-9999
+ *
+ * See the [jquery.inputmask](https://github.com/RobinHerbots/Inputmask) documentation for more information.
+ *
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Mask(inputMask: string, inputMaskPlaceholderChar: string = "") {
+  return Component({
+    inputMask,
+    inputMaskPlaceholderChar
+  });
+}
+
+/**
+ * An input mask helps the user with input by ensuring a predefined format.
+ *
+ * - 9: numeric
+ * - a: alphabetical
+ * - *: alphanumeric
+ *
+ * Example telephone mask: (999) 999-9999
+ *
+ * See the [jquery.inputmask](https://github.com/RobinHerbots/Inputmask) documentation for more information.
+ *
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Masks(...inputMasks: {label: string; mask: string}[]) {
+  return Component({
+    inputMasks
+  });
+}

package/src/decorators/maxWords.spec.ts

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

package/src/decorators/maxWords.ts

@@ -0,0 +1,13 @@
+import {Validate} from "./validate.js";
+
+/**
+ * Add the minimum amount of words that can be added to this field.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param value
+ */
+export function MaxWords(value: number) {
+  return Validate("maxWords", value);
+}

package/src/decorators/minWords.spec.ts

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

package/src/decorators/minWords.ts

@@ -0,0 +1,13 @@
+import {Validate} from "./validate.js";
+
+/**
+ * Add the maximum amount of words that can be added to this field.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param value
+ */
+export function MinWords(value: number) {
+  return Validate("minWords", value);
+}

package/src/decorators/modalEdit.spec.ts

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

package/src/decorators/modalEdit.ts

@@ -0,0 +1,14 @@
+import {Component} from "./component.js";
+
+/**
+ * Opens up a modal to edit the value of this component.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function ModalEdit(modalEdit = true) {
+  return Component({
+    modalEdit
+  });
+}

package/src/decorators/multiple.spec.ts

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

package/src/decorators/multiple.ts

@@ -0,0 +1,14 @@
+import {Component} from "./component.js";
+
+/**
+ * Change the multiple value on the decorated property.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Multiple(multiple = false): PropertyDecorator {
+  return Component({
+    multiple
+  });
+}

package/src/decorators/openWhenEmpty.ts

@@ -0,0 +1,14 @@
+import {Component} from "./component.js";
+
+/**
+ * Open automatically the editgrid when the list is empty.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function OpenWhenEmpty(openWhenEmpty = true): PropertyDecorator {
+  return Component({
+    openWhenEmpty
+  });
+}

package/src/decorators/password.spec.ts

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

package/src/decorators/password.ts

@@ -0,0 +1,20 @@
+import {Component} from "./component.js";
+
+export interface PasswordOpts extends Record<string, any> {
+  showCharCount?: boolean;
+  showWordCount?: boolean;
+}
+/**
+ * Configure the property as Password component.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Password(props: PasswordOpts = {}): PropertyDecorator {
+  return Component({
+    ...props,
+    type: "password",
+    protected: true
+  });
+}

package/src/decorators/placeholder.spec.ts

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

package/src/decorators/placeholder.ts

@@ -0,0 +1,15 @@
+import {Component} from "./component.js";
+
+/**
+ * The placeholder text that will appear when this field is empty.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param placeholder
+ */
+export function Placeholder(placeholder: string) {
+  return Component({
+    placeholder
+  });
+}

package/src/decorators/prefix.spec.ts

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

package/src/decorators/prefix.ts

@@ -0,0 +1,14 @@
+import {Component} from "./component.js";
+
+/**
+ * Add prefix word on the decorated field.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Prefix(prefix: string) {
+  return Component({
+    prefix
+  });
+}