Computed Values and Transforms

Computed values and transforms let schemas derive values and shape submit payloads.

Computed fields

Use field.computed with registry.computedResolvers.

import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  computedResolvers: {
    "users.displayName": ({ values }) => {
      const first = String(values.firstName ?? "").trim();
      const last = String(values.lastName ?? "").trim();
      return [first, last].filter(Boolean).join(" ");
    }
  }
});

export const usersSchema = {
  resource: "users",
  form: {
    fields: [
      { name: "firstName", type: "text" },
      { name: "lastName", type: "text" },
      {
        name: "displayName",
        type: "text",
        computed: "users.displayName",
        computedFrom: ["firstName", "lastName"]
      }
    ]
  },
  registry: {
    computedResolvers: ["users.displayName"]
  }
} as const;

Computed values are applied before validation and before field rendering receives resolvedValues. When computedFrom is set, VibeFlui reuses the previous computed value until one of the listed source fields changes.

Field transformers

Use field.transformer to transform a single submitted field.

import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  transformers: {
    "users.trimString": (value) => String(value ?? "").trim()
  }
});

{
  name: "name",
  type: "text",
  transformer: "users.trimString"
}

Request transformer

Use transform.request to transform the full submit payload.

export const usersSchema = {
  resource: "users",
  transform: {
    request: "users.requestPayload"
  },
  registry: {
    transformers: ["users.requestPayload"]
  }
} as const;

export const registry = createRegistry({
  transformers: {
    "users.requestPayload": (values) => ({
      profile: {
        firstName: values.firstName,
        lastName: values.lastName
      },
      email: values.email,
      roleId: values.roleId
    })
  }
});

If the request transformer returns an object, VibeFlui uses it as the submitted values.