Workflow
Workflow
The Workflow category provides components for building structured approval and review processes. XAWorkflowApproval renders a complete approver list with status indicators, inline approve/reject/request-changes actions, optional delegation, a comment modal, and a full decision history panel.
Components
<XAWorkflowApproval />
A self-contained approval widget. It accepts an approvers array and manages the interaction flow for whoever is the current approver. In sequential mode, approvers must act in order (a step connector line is rendered between cards); in parallel mode any approver can act independently. A modal collects optional or required comments before submitting a decision.
An overall status badge (pending / approved / rejected / changes_requested) is computed from the approvers array and displayed in the header.
<XAWorkflowApproval
title="Contract Review"
description="Please review and approve the vendor contract."
:approvers="approvers"
mode="sequential"
:current-step="currentStep"
:require-comment="false"
:allow-delegation="true"
:allow-changes-request="true"
:show-history="true"
size="md"
@approve="(approver, index, comment) => submitApproval(approver, comment)"
@reject="(approver, index, comment) => submitRejection(approver, comment)"
@request-changes="(approver, index, comment) => submitChanges(approver, comment)"
@delegate="(approver, index) => openDelegateModal(approver)"
/>
Approver Object Shape
interface Approver {
id?: string | number
name: string
email?: string
avatar?: string
role?: string
status: 'pending' | 'approved' | 'rejected' | 'changes_requested'
decision?: {
action: 'approved' | 'rejected' | 'changes_requested'
comment?: string
timestamp: Date | string
attachments?: Array<{ name: string; url: string }>
}
delegatedTo?: {
name: string
email?: string
}
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
approvers | Approver[] | required | List of approvers with their current status and optional decision. |
mode | String | 'sequential' | Approval mode — 'sequential' (ordered) or 'parallel' (any order). |
title | String | 'Approval Required' | Panel heading. |
description | String | — | Optional subtitle below the heading. |
currentStep | Number | 0 | Zero-based index of the active approver in sequential mode. |
requireComment | Boolean | false | When true, a comment is required before a decision can be submitted. |
allowDelegation | Boolean | true | Show the Delegate button for the current approver. |
allowChangesRequest | Boolean | true | Show the Request Changes button for the current approver. |
showHistory | Boolean | true | Render the decision history section below the approver list. |
showModeIndicator | Boolean | true | Show the sequential/parallel mode indicator banner. |
size | String | 'md' | Component size — 'sm' or 'md'. Affects avatar sizes. |
Events
| Event | Payload | Description |
|---|---|---|
approve | (approver, index, comment?) | Approver clicked Approve. |
reject | (approver, index, comment) | Approver clicked Reject. |
requestChanges | (approver, index, comment) | Approver clicked Request Changes. |
delegate | (approver, index) | Approver clicked Delegate. |
statusChange | (status: string) | Overall approval status changed. |
AI Context
category: Workflow
package: "@xenterprises/nuxt-x-app"
use-when: >
Use XAWorkflowApproval whenever a record (document, request, contract, etc.) requires
sign-off from one or more people. Pass the approvers array with each person's current
status; the component handles the visual state machine, comment collection modal,
and action buttons automatically. Choose mode="sequential" when approvals must happen
in order (e.g. manager then director) and mode="parallel" when any approver can
act independently. Listen to the approve/reject/requestChanges events to persist
decisions to your backend.