VVibeFlui

Submit Flow

Form submission is coordinated by FluiKitForm and the parent FluiKit runtime.

Runtime sequence

  1. The form prevents the default browser submit.
  2. Computed field values are applied.
  3. Built-in validation runs.
  4. Registry validators run.
  5. Field transformers run.
  6. schema.transform.request runs.
  7. The parent runtime executes create or update.
  8. Feedback, events, hooks, and list reloads are handled by FluiKit.

Submit labels

TS
form: {
  submitLabel: "Save user",
  cancelLabel: "Discard"
}

Defaults:

  • Create form: Create
  • Edit form: Update
  • Cancel: Cancel

Create and update handlers

Handlers can be resolved through actions, schema handlers, providers, or endpoints.

TS
export const usersSchema = {
  resource: "users",
  endpoint: {
    create: "/api/users",
    update: {
      url: "/api/users/:id",
      method: "PATCH"
    }
  },
  actions: {
    create: {
      enabled: true,
      label: "Create user"
    },
    edit: {
      enabled: true,
      label: "Edit"
    }
  }
} as const;

Submit feedback

Successful create and update responses show success feedback and close the form.

Warning or error responses show feedback and keep the success close/reload flow from running.

JSON
{
  "status": false,
  "code": 422,
  "message": "Email is already registered."
}

Events

Form flows can emit:

  • formOpened
  • formSubmitted
  • formSubmitSucceeded
  • formSubmitFailed
TS
export const usersSchema = {
  resource: "users",
  events: {
    formSubmitted: "users.formSubmitted",
    formSubmitSucceeded: "users.formSubmitSucceeded",
    formSubmitFailed: "users.formSubmitFailed"
  },
  registry: {
    events: [
      "users.formSubmitted",
      "users.formSubmitSucceeded",
      "users.formSubmitFailed"
    ]
  }
} as const;