VC UI Library

VcWizard

Basic usage:

VcWizard component is an indicator for the steps in a wizard workflow.
Set active-step attribute with Number type, which indicates the index of steps and starts from 0

General Information
(Index: 0 | key: general)

Additional Information
(Index: 1 | key: add-info)

Final Setting
(Index: 2 | key: final)

Expand

Wizard with Summary:

Step 1 of 3

Info

General Information
(Index: 0 | key: general)

First Name

Last Name

Additional Information
(Index: 1 | key: add-info)

Some Text 1

Some Text 2

Some Text 3

Final Setting
(Index: 2 | key: final)

Select Date

1. General Information

First Name:

Last Name:

2. Additional Information

3. Final Setting

Expand

Attributes for Component

Attribute	Description	Type	Accepted Values	Default
activeStep	Current activation step	Number	---	0
dataLoading	Is data loading	Boolean	true \| false	false
showHeader	Is header visible	Boolean	true \| false	true
showSummary	Is Summary visible	Boolean	true \| false	true
height	Height of Wizard	Number \| String	---	100%
steps	Array of steps. Step: { step: string, label: string, icon?: string, attrs?: object \| string }	Array	---	[]
summary	Object for summary info. { [key: string \| number]: { label: string, value: unknown }}	Object	---	{}

Slots

Name	Description
[step.prop]	Name from Step prop attribute (step content). Computed slot with attributes: {step, index}
header-info	Slot on header (right content)
final-actions	Slot on navigation for additional final action

Events

Method	Description	Parameters
update-step	Event on click next / prev / summary item. Return step index and options ({isVisited: boolean})	step, option
cancel	Event on click cancel button
final	Event on click final button