VVibeFlui

Action Feedback

Actions show feedback after handler or endpoint execution.

This includes delete actions, row actions, bulk actions, toolbar actions, and custom actions.

Row action example

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

export const registry = createRegistry({
  actionHandlers: {
    "users.invite": async ({ row }) => ({
      status: true,
      code: 200,
      message: `Invitation sent to ${String(row?.email ?? "the user")}.`
    })
  }
});
TS
export const usersSchema = {
  resource: "users",
  actions: {
    row: [
      {
        key: "invite",
        label: "Invite",
        icon: "lucide:send",
        handler: "users.invite",
        refreshOnSuccess: false
      }
    ]
  },
  registry: {
    actionHandlers: ["users.invite"]
  }
} as const;

Bulk action example

TS
export const usersSchema = {
  resource: "users",
  table: {
    rowSelection: true
  },
  actions: {
    bulk: [
      {
        key: "bulk-archive",
        label: "Archive selected",
        variant: "secondary",
        handler: "users.bulkArchive",
        refreshOnSuccess: true
      }
    ]
  },
  registry: {
    actionHandlers: ["users.bulkArchive"]
  }
} as const;

Refresh behavior

Row, bulk, and toolbar actions refresh the list after success unless refreshOnSuccess is false.

TS
{
  key: "invite",
  label: "Invite",
  handler: "users.invite",
  refreshOnSuccess: false
}

Failure behavior

When action execution returns a resolved warning or error response, VibeFlui treats it as failed action feedback instead of a success.

JSON
{
  "status": false,
  "code": 409,
  "message": "This user already has a pending invitation."
}

Action events

Actions can emit:

  • actionClicked
  • actionSucceeded
  • actionFailed
TS
export const usersSchema = {
  resource: "users",
  events: {
    actionSucceeded: "users.actionSucceeded",
    actionFailed: "users.actionFailed"
  },
  registry: {
    events: ["users.actionSucceeded", "users.actionFailed"]
  }
} as const;