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 nextFormStep
component
Triggered before moves to the next step.
previous โ
- Params:
{component} step$
- the previousFormStep
component
Triggered before moves to the previous step.
finish โ
Triggered when finish button is clicked, before validating and submitting the form.