FormSteps
Renders form steps using FormStep components.
Basic Usage
<FormSteps> component can be used in <Vueform> component's #empty slot:
<template>
<Vueform>
<template #empty>
<FormSteps>
<FormStep
name="account"
:elements="['email', 'password']"
>Account</FormStep>
<FormStep
name="personal"
:elements="['name', 'bio']"
>Personal</FormStep>
<FormStep
name="social"
:elements="['facebook', 'twitter']"
>Social</FormStep>
</FormSteps>
<FormElements>
<TextElement
name="email"
label="Email"
/>
<TextElement
input-type="password"
name="password"
label="Password"
/>
<TextElement
name="name"
label="Name"
/>
<TextareaElement
name="bio"
label="bio"
/>
<TextElement
name="facebook"
label="Facebook"
/>
<TextElement
name="twitter"
label="Twitter"
/>
</FormElements>
<FormStepsControls />
</template>
</Vueform>
</template>Options
Find below the list of options that can use to configure FormSteps component. Options can be passed to the component via props.
view
- Type:
string
<FormSteps view="alt" ... />The name of the view to be used for the component and child components (FormStep). If undefined the default view will be used.
Learn more about views here.
Properties
All the data, computed and inject properties of the component. They can be used via Vueform component's steps$ property.
steps
- Type:
object - Group:
computed
The object containing steps defined in Vueform.
steps$Array
- Type:
array - Default:
[] - Group:
data
The child FormStep components.
elements$
- Type:
object - Group:
computed
The form elements' components.
steps$
- Type:
object - Group:
computed
The child FormStep components with indexed keys.
visible$
- Type:
object - Group:
computed
All the visible FormStep components.
first$
- Type:
FormStep|undefined - Group:
computed
The first visible FormStep component.
last$
- Type:
FormStep|undefined - Group:
computed
The last visible FormStep component.
current$
- Type:
FormStep|undefined - Group:
computed
The current FormStep component.
next$
- Type:
FormStep|undefined - Group:
computed
The next visible FormStep component.
previous$
- Type:
FormStep|undefined - Group:
computed
The previous visible FormStep component.
firstInvalid$
- Type:
FormStep|undefined - Group:
computed
The first invalid & visible FormStep component.
firstNonDone$
- Type:
FormStep|undefined - Group:
computed
The first visible FormStep component which is not done yet.
lastEnabled$
- Type:
FormStep|undefined - Group:
computed
The last enabled & visible FormStep component.
isAtLastStep
- Type:
boolean - Group:
computed
Whether is at the last step.
isAtFirstStep
- Type:
boolean - Group:
computed
Whether is at the first step.
done
- Type:
boolean - Group:
computed
Whether all the steps are done.
invalid
- Type:
boolean - Group:
computed
Whether there are any steps in invalid state.
pending
- Type:
boolean - Group:
computed
Whether there are any steps in pending state.
debouncing
- Type:
boolean - Group:
computed
Whether there are any steps in debouncing state.
busy
- Type:
boolean - Group:
computed
Whether there are any steps in busys state.
Size
- Type:
string - Group:
inject
The size of the component.
View
- Type:
string - Group:
computed
The name of the resolved view for the component. This one should be used to determine the component's view in class functions.
template
- Type:
object - Group:
computed
The component's template.
classes
- Type:
object - Group:
computed
The component's classes.
theme
- Type:
object - Group:
inject
The global theme object, which contains all the default templates and classes.
form$
- Type:
Vueform - Group:
inject
The root form's component.
Methods
The methods of the component. They can be used via Vueform component's steps$ property.
step$
- Arguments:
{string} name*- name of the step
- Returns:
FormStep|undefined
Returns a specific FormStep component by index.
next
- Returns:
void
Move to next step and enable it.
previous
- Returns:
void
Move to previous step.
goTo
- Arguments:
{string} name*- name of step to go to{boolean} enableUntil- whether steps should be enabled up to the selected step (default:false)
- Returns:
void
Go to a step and enable it. Optionally enable all steps up to it.
enableAllSteps
- Returns:
void
Enables all steps.
enableUntil
- Arguments:
{number} index*- index of the step
- Returns:
void
Enable steps until a certain index.
enableUntilCurrent
- Returns:
void
Enable all steps up to the current step.
enableUntilLastEnabled
- Returns:
void
Enable all steps up to the last enabled.
complete
- Returns:
void
Mark each FormStep as complete.
submit
- Returns:
Promise
Invokes the form's submit event. If the form has any validation errors it will jump to the first step with error.
reset
- Returns:
void
Jump back to first visible step and disable all others.
on
- Arguments:
{string} event*- name of the event to listen for{function} callback*- callback to run when the event is triggered
- Returns:
void
Adds a listener for an event.
off
- Arguments:
{string} event*- name of the event to remove
- Returns:
void
Removes all listeners for an event.
fire
- Arguments:
{any} args- list of arguments to pass over to the event callback
- Returns:
void
Fires and emits an event.
Events
Events emitted by the component. You can subscribe to them using regular @{eventName} listener in inline components or by using on(event, callback) method.
select
- Params:
{component} activeStep$- the active step{component} previousStep$- the previously active step
Triggered when a step becomes active.
next
- Params:
{component} step$- the nextFormStepcomponent
Triggered before moves to the next step.
previous
- Params:
{component} step$- the previousFormStepcomponent
Triggered before moves to the previous step.
finish
Triggered when finish button is clicked, before validating and submitting the form.
