@tsed/schema-formio 8.0.1 → 8.0.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@tsed/schema-formio",
   "description": "Transform Ts.ED Schema & JsonSchema to a valid Formio schema",
   "type": "module",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "source": "./src/index.ts",
   "main": "./lib/esm/index.js",
   "module": "./lib/esm/index.js",
@@ -10,6 +10,7 @@
   "browser": "./lib/browser/schema-formio.umd.min.js",
   "exports": {
     ".": {
+      "@tsed/source": "./src/index.ts",
       "types": "./lib/types/index.d.ts",
       "browser": "./lib/browser/schema-formio.umd.min.js",
       "import": "./lib/esm/index.js",
@@ -38,24 +39,24 @@
     "tsed"
   ],
   "dependencies": {
-    "@tsed/formio-types": "8.0.1",
+    "@tsed/formio-types": "8.0.2",
     "change-case": "^5.4.4",
     "tslib": "2.7.0"
   },
   "devDependencies": {
-    "@tsed/barrels": "8.0.1",
-    "@tsed/core": "8.0.1",
-    "@tsed/openspec": "8.0.1",
-    "@tsed/schema": "8.0.1",
-    "@tsed/typescript": "8.0.1",
+    "@tsed/barrels": "8.0.2",
+    "@tsed/core": "8.0.2",
+    "@tsed/openspec": "8.0.2",
+    "@tsed/schema": "8.0.2",
+    "@tsed/typescript": "8.0.2",
     "eslint": "9.12.0",
     "typescript": "5.4.5",
     "vitest": "2.1.2"
   },
   "peerDependencies": {
-    "@tsed/core": "8.0.1",
-    "@tsed/openspec": "8.0.1",
-    "@tsed/schema": "8.0.1",
+    "@tsed/core": "8.0.2",
+    "@tsed/openspec": "8.0.2",
+    "@tsed/schema": "8.0.2",
     "formiojs": ">=4.0.0",
     "lodash": ">=4.0.0",
     "moment": ">=2.0.0"

package/src/components/anyToComponent.ts

@@ -0,0 +1,28 @@
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+import {getRef} from "../utils/getRef.js";
+
+export function anyToComponent(schema: any, options: any) {
+  schema = getRef(schema, options);
+
+  switch (schema?.type) {
+    case "object":
+      if (!schema.properties && !schema.$ref) {
+        return execMapper("map", schema, options);
+      }
+
+      return execMapper("nested", schema, options);
+    case "array":
+      return execMapper("array", schema, options);
+    case "string":
+      return execMapper("string", schema, options);
+    case "boolean":
+      return execMapper("boolean", schema, options);
+    case "integer":
+    case "number":
+      return execMapper("number", schema, options);
+  }
+
+  return {};
+}
+
+registerFormioMapper("any", anyToComponent);

package/src/components/arrayToComponent.ts

@@ -0,0 +1,43 @@
+import {cleanObject} from "@tsed/core";
+
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+import {getRef} from "../utils/getRef.js";
+
+export function arrayToComponent(schema: any, options: any) {
+  const itemSchema = schema.items.$ref ? getRef(schema.items, options) : schema.items;
+
+  const {type} = itemSchema;
+
+  switch (type) {
+    case "object": // editgrid
+      return {
+        ...execMapper("default", schema, options),
+        ...execMapper("editgrid", itemSchema, options)
+      };
+    case "string": // tag or enum?
+      if (itemSchema.enum) {
+        const component = execMapper("enum", itemSchema, options);
+
+        return {
+          ...component,
+          inline: false,
+          type: "selectboxes"
+        };
+      }
+
+      const component = execMapper(type, itemSchema, options);
+
+      return cleanObject({
+        ...component,
+        multiple: component.type === "tags" ? undefined : true
+      });
+    default:
+    case "number":
+      return {
+        ...execMapper(type, itemSchema, options),
+        multiple: true
+      };
+  }
+}
+
+registerFormioMapper("array", arrayToComponent);

package/src/components/booleanToComponent.ts

@@ -0,0 +1,15 @@
+import {cleanObject} from "@tsed/core";
+
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+function booleanToComponent(schema: any, options: any) {
+  const component = execMapper("default", schema, options);
+
+  return cleanObject({
+    ...component,
+    input: true,
+    type: component.type || "checkbox"
+  });
+}
+
+registerFormioMapper("boolean", booleanToComponent);

package/src/components/dateToComponent.ts

@@ -0,0 +1,66 @@
+import {getValue} from "@tsed/core";
+
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+function dateToComponent(schema: any, options: any) {
+  const component = execMapper("default", schema, options);
+
+  const base = {
+    enableMinDateInput: false,
+    enableMaxDateInput: false,
+    input: true,
+    ...component,
+    type: "datetime",
+    datePicker: {
+      disableWeekends: false,
+      disableWeekdays: false,
+      ...getValue(component, "datePicker")
+    },
+    widget: {
+      type: "calendar",
+      displayInTimezone: "viewer",
+      locale: "en",
+      useLocaleSettings: false,
+      allowInput: true,
+      mode: "single",
+      noCalendar: false,
+      hourIncrement: 1,
+      minuteIncrement: 1,
+      minDate: null,
+      disableWeekends: false,
+      disableWeekdays: false,
+      maxDate: null,
+      ...getValue(component, "widget")
+    }
+  };
+
+  if (schema.format === "date") {
+    return {
+      ...base,
+      format: "yyyy-MM-dd",
+      enableTime: false,
+      widget: {
+        ...base.widget,
+        enableTime: false,
+        format: "yyyy-MM-dd",
+        ...getValue(component, "widget")
+      }
+    };
+  }
+
+  return {
+    ...base,
+    timePicker: {
+      showMeridian: false,
+      ...getValue(component, "timePicker")
+    },
+    widget: {
+      ...base.widget,
+      enableTime: true,
+      time_24hr: true,
+      ...getValue(component, "widget")
+    }
+  };
+}
+
+registerFormioMapper("date", dateToComponent);

package/src/components/defaultToComponent.ts

@@ -0,0 +1,17 @@
+import {cleanObject} from "@tsed/core";
+
+import {registerFormioMapper} from "../registries/FormioMappersContainer.js";
+import {getFormioProps} from "../utils/getFormioProps.js";
+
+export function defaultToComponent(schema: any, options: any): any {
+  const formioProps = getFormioProps(schema);
+
+  return cleanObject({
+    ...formioProps,
+    disabled: !!schema.readOnly,
+    description: schema.description,
+    defaultValue: schema.default
+  });
+}
+
+registerFormioMapper("default", defaultToComponent);

package/src/components/enumToComponent.ts

@@ -0,0 +1,33 @@
+import {cleanObject} from "@tsed/core";
+
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+export function enumToComponent(schema: any, options: any) {
+  const component = execMapper("default", schema, options);
+  const values = schema.enum.map((value: any) => {
+    return {
+      label: value,
+      value
+    };
+  });
+
+  if (component.type === "select") {
+    return cleanObject({
+      ...component,
+      data: {
+        json: component.data?.json || JSON.stringify(values)
+      },
+      dataSrc: "json",
+      idPath: "value",
+      valueProperty: "value",
+      template: component.template || "<span>{{ item.label }}</span>"
+    });
+  }
+
+  return cleanObject({
+    ...component,
+    values: schema["x-values"] || values.map((value: any) => ({...value, shortcut: ""}))
+  });
+}
+
+registerFormioMapper("enum", enumToComponent);

package/src/components/mapToComponent.ts

@@ -0,0 +1,17 @@
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+export function mapToComponent(schema: any, options: any) {
+  return {
+    ...execMapper("default", schema, options),
+    type: "datamap",
+    tableView: false,
+    input: true,
+    valueComponent: {
+      ...(schema.additionalProperties ? execMapper("any", schema.additionalProperties, options) : {}),
+      hideLabel: true,
+      tableView: true
+    }
+  };
+}
+
+registerFormioMapper("map", mapToComponent);

package/src/components/nestedToComponent.ts

@@ -0,0 +1,23 @@
+import {sentenceCase} from "change-case";
+
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+export function nestedToComponent(schema: any, options: any) {
+  return {
+    ...execMapper("default", schema, options),
+    label: false,
+    tableView: false,
+    type: "form",
+    display: "form",
+    input: true,
+    components: [
+      {
+        key: "panel",
+        label: options.parentKey && sentenceCase(options.parentKey),
+        ...execMapper("panel", schema, options)
+      }
+    ]
+  };
+}
+
+registerFormioMapper("nested", nestedToComponent);

package/src/components/numberToComponent.ts

@@ -0,0 +1,20 @@
+import {cleanObject, getValue} from "@tsed/core";
+
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+export function numberToComponent(schema: any, options: any) {
+  const component = execMapper("default", schema, options);
+
+  return cleanObject({
+    ...component,
+    input: true,
+    delimiter: getValue(component, "delimiter", false),
+    inputFormat: getValue(component, "inputFormat", "plain"),
+    mask: getValue(component, "mask", false),
+    requireDecimal: false,
+    type: "number"
+  });
+}
+
+registerFormioMapper("number", numberToComponent);
+registerFormioMapper("integer", numberToComponent);

package/src/components/objectToEditGrid.ts

@@ -0,0 +1,13 @@
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+export function objectToEditGrid(schema: any, options: any) {
+  return {
+    ...execMapper("default", schema, options),
+    rowDrafts: false,
+    type: "editgrid",
+    input: true,
+    components: execMapper("properties", schema, options)
+  };
+}
+
+registerFormioMapper("editgrid", objectToEditGrid);

package/src/components/panelToComponent.ts

@@ -0,0 +1,13 @@
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+export function panelToComponent(schema: any, options: any) {
+  return {
+    ...execMapper("default", schema, options),
+    collapsible: false,
+    input: false,
+    tableView: false,
+    components: execMapper("properties", schema, options)
+  };
+}
+
+registerFormioMapper("panel", panelToComponent);

package/src/components/propertiesToComponents.ts

@@ -0,0 +1,106 @@
+import {cleanObject, isFunction} from "@tsed/core";
+import {FormioComponent, FormioForm} from "@tsed/formio-types";
+import {sentenceCase} from "change-case";
+
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+function bindResolvers(component: FormioComponent, options: any) {
+  if (component.data) {
+    const data = {...component.data};
+
+    Object.entries(data).forEach(([key, resolver]) => {
+      if (isFunction(resolver)) {
+        options.resolvers.push(async (form: FormioForm) => {
+          data[key] = await resolver({...options, component, form});
+        });
+      }
+    });
+
+    return {
+      ...component,
+      data
+    };
+  }
+
+  return component;
+}
+
+function mapValidation(key: string, base: FormioComponent, schema: any, propSchema: any) {
+  const required = (schema.required || []).includes(key);
+  const validate = {
+    ...(base.validate || {}),
+    required,
+    pattern: propSchema.pattern,
+    minLength: !required || (required && propSchema.minLength > 1) ? propSchema.minLength : undefined,
+    maxLength: propSchema.maxLength,
+    min: propSchema.minimum || propSchema.minItems,
+    max: propSchema.maximum || propSchema.maxItems
+  };
+
+  switch (propSchema.type) {
+    case "string":
+      if (propSchema.minLength === 0 && validate.required) {
+        validate.minLength = undefined;
+        validate.required = false;
+      }
+      break;
+    case "boolean":
+      validate.required = false;
+      break;
+  }
+
+  return cleanObject(validate);
+}
+
+export function propertiesToComponents(schema: any, options: any): any[] {
+  const tabs = {
+    label: "Tabs",
+    key: "tabs",
+    type: "tabs",
+    input: false,
+    tableView: false,
+    components: new Map<string, any>(),
+    pushed: false
+  };
+  const components: any[] = [];
+
+  Object.entries(schema.properties).forEach(([key, propSchema]: [string, any]) => {
+    const tabsOptions = propSchema["x-formiotabs"];
+    const base = execMapper("any", propSchema, {...options, parentKey: key});
+
+    let component = cleanObject({
+      key,
+      ...base,
+      label: base.label == false ? undefined : base.label || propSchema.title || sentenceCase(key),
+      validate: mapValidation(key, base, schema, propSchema)
+    });
+
+    component = bindResolvers(component, options);
+
+    if (tabsOptions) {
+      if (!tabs.pushed) {
+        components.push(tabs);
+        tabs.pushed = true;
+      }
+
+      if (!tabs.components.has(tabsOptions.key)) {
+        tabs.components.set(tabsOptions.key, {
+          ...tabsOptions,
+          components: []
+        });
+      }
+
+      tabs.components.get(tabsOptions.key).components.push(component);
+    } else {
+      components.push(component);
+    }
+  });
+
+  if (tabs.components.size) {
+    tabs.components = [...tabs.components.values()] as any;
+  }
+
+  return components;
+}
+
+registerFormioMapper("properties", propertiesToComponents);

package/src/components/stringToComponent.ts

@@ -0,0 +1,44 @@
+import {cleanObject} from "@tsed/core";
+
+import {execMapper, registerFormioMapper} from "../registries/FormioMappersContainer.js";
+
+export function stringToComponent(schema: any, options: any) {
+  if (schema.format) {
+    const component = execMapper("default", schema, options);
+    switch (schema.format) {
+      case "date":
+      case "date-time":
+        return execMapper("date", schema, options);
+      case "uri":
+        return cleanObject({
+          input: true,
+          ...component,
+          type: component.type || "url"
+        });
+      default:
+        return cleanObject({
+          input: true,
+          ...component,
+          type: component.type || schema.format
+        });
+    }
+  }
+
+  if (schema.enum) {
+    const component = execMapper("enum", schema, options);
+
+    return {
+      ...component,
+      type: component.type || "radio"
+    };
+  }
+
+  const component = execMapper("default", schema, options);
+  return cleanObject({
+    input: true,
+    type: component.type || "textfield",
+    ...component
+  });
+}
+
+registerFormioMapper("string", stringToComponent);

package/src/decorators/component.ts

@@ -0,0 +1,34 @@
+import {JsonEntityFn, JsonEntityStore} from "@tsed/schema";
+
+/**
+ * Declare a formio Component schema on the decorated propertyKey.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Component(component: Record<string, any>): PropertyDecorator {
+  component = Object.entries(component).reduce((component: Record<string, any>, [key, value]) => {
+    if (key === "validate") {
+      component["x-formio-validate"] = {
+        ...(component["x-formio-validate"] || {}),
+        ...value
+      };
+    }
+
+    return {
+      ...component,
+      [`x-formio-${key}`]: value
+    };
+  }, {});
+
+  return JsonEntityFn((store: JsonEntityStore) => {
+    Object.entries(component).forEach(([key, value]) => {
+      store.itemSchema.customKey(key, value);
+
+      if (store.isCollection) {
+        store.schema.customKey(key, value);
+      }
+    });
+  });
+}

package/src/decorators/conditional.spec.ts

@@ -0,0 +1,73 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {HideWhen, ShowWhen} from "./conditional.js";
+
+describe("@Conditional", () => {
+  it("should add conditional rule on field (show)", async () => {
+    class Model {
+      @ShowWhen("test2", 1)
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          conditional: {
+            eq: 1,
+            show: true,
+            when: "test2"
+          },
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+  it("should add conditional rule on field (hide)", async () => {
+    class Model {
+      @HideWhen("test2", 1)
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          conditional: {
+            eq: 1,
+            show: false,
+            when: "test2"
+          },
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/conditional.ts

@@ -0,0 +1,49 @@
+import {Component} from "./component.js";
+
+/**
+ * Adds a conditional display rule on the input form.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param conditional
+ */
+export function Conditional(conditional: {show: boolean; when: string; eq: any}) {
+  return Component({
+    conditional
+  });
+}
+
+/**
+ * Adds a conditional display rule on the input form.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param property
+ * @param eq
+ */
+export function ShowWhen(property: string, eq: any) {
+  return Conditional({
+    show: true,
+    when: property,
+    eq
+  });
+}
+
+/**
+ * Adds a conditional display rule on the input form.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param property
+ * @param eq
+ */
+export function HideWhen(property: string, eq: any) {
+  return Conditional({
+    show: false,
+    when: property,
+    eq
+  });
+}