VVibeFlui

Submit Flow

Form submit operations execute create or update flows, then resolve feedback and refresh list data when successful.

Runtime order

  1. FluiKitForm applies computed values.
  2. Built-in field validation runs.
  3. field.validator registry validators run.
  4. Field transformers and transform.request run.
  5. FluiKit emits formSubmitted and runs beforeSubmit.
  6. External onCreate or onUpdate runs when provided.
  7. Otherwise executeOperation() runs the resolved handler, provider, or endpoint path.
  8. Feedback status is resolved from the result.
  9. Successful submit closes the form and reloads the list.

Endpoint submit

TS
export const usersSchema = {
  resource: "users",
  endpoint: {
    create: { url: "/api/users", method: "POST" },
    update: { url: "/api/users/:id", method: "PATCH" }
  },
  form: {
    fields: [
      { name: "name", label: "Name", type: "text", required: true },
      { name: "email", label: "Email", type: "email", required: true }
    ]
  }
} as const;

Provider submit

TS
export const usersSchema = {
  resource: "users",
  provider: {
    type: "custom",
    name: "admin"
  },
  form: {
    fields: [
      { name: "name", type: "text", required: true }
    ]
  }
} as const;
TSX
const providers = {
  admin: {
    create: async ({ values }) => createUser(values),
    update: async ({ params, values }) => updateUser(params.id, values)
  }
};

External submit handlers

When onCreate or onUpdate is passed to FluiKit, the host handler runs instead of VibeFlui's default executeOperation() path for that submit.

TSX
const handleCreateUser = async (values: Record<string, unknown>) => {
  return createUser(values);
};

<FluiKit
  schema={usersSchema}
  onCreate={handleCreateUser}
/>

Feedback behavior

If the result resolves to warning or error, the form stays open and VibeFlui emits failed feedback. If the result resolves to success, the form closes and the list reloads.

Common mistakes

  • Whole-form form.validation is not an active runtime validator. Use field-level built-in rules and field.validator.
  • External submit handlers replace VibeFlui's default executeOperation() path for that submit.
  • Return a clear boolean status and code value when the UI should show warning or error feedback.