Submit Actions

Submit actions send form values through VibeFlui operation execution.

Use submit actions for create and update workflows. The schema describes the UI command; the backend still owns final validation and persistence.

Create submit action

export const createUserSchema = {
  resource: "users",
  form: {
    mode: "modal",
    fields: [
      { name: "name", label: "Name", type: "text", required: true },
      { name: "email", label: "Email", type: "email", required: true }
    ],
    submitLabel: "Create user",
    cancelLabel: "Cancel"
  },
  actions: {
    create: {
      enabled: true,
      label: "Create user",
      icon: "lucide:plus",
      handler: "users.create"
    }
  },
  registry: {
    actionHandlers: ["users.create"]
  }
} as const;

Update submit action

export const updateUserSchema = {
  resource: "users",
  identity: {
    key: "id",
    param: "id"
  },
  endpoint: {
    update: { url: "/api/users/:id", method: "PATCH" }
  },
  form: {
    mode: "modal",
    fields: [
      { name: "name", label: "Name", type: "text", valueFrom: "name" },
      { name: "email", label: "Email", type: "email", valueFrom: "email" }
    ],
    submitLabel: "Save changes"
  },
  actions: {
    edit: {
      enabled: true,
      label: "Save",
      icon: "lucide:save",
      handler: "users.update"
    }
  },
  registry: {
    actionHandlers: ["users.update"]
  }
} as const;

Value pipeline

Before submit, VibeFlui may:

Apply computed values.
Run built-in validation.
Run registry validators.
Apply field transformers.
Apply request transformer.
Run transform.beforeSubmit steps.
Execute a handler, provider, or endpoint.

Runtime registry

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

export const registry = createRegistry({
  actionHandlers: {
    "users.create": async ({ values }) => ({
      status: true,
      code: 200,
      message: "User created",
      data: values
    }),
    "users.update": async ({ values, identityValue }) => ({
      status: true,
      code: 200,
      message: `User ${String(identityValue)} updated`,
      data: values
    })
  }
});

Validation response

JSON

{
  "status": false,
  "code": 422,
  "message": "Email is already used"
}