VueUseuseStepper
Provides helpers for building a multi-step wizard interface.
Demo
Form
{
"firstName": "Jon",
"lastName": "",
"billingAddress": "",
"contractAccepted": false,
"carbonOffsetting": false,
"payment": "credit-card"
}Wizard
{
"steps": {
"user-information": {
"title": "User information"
},
"billing-address": {
"title": "Billing address"
},
"terms": {
"title": "Terms"
},
"payment": {
"title": "Payment"
}
},
"stepNames": [
"user-information",
"billing-address",
"terms",
"payment"
],
"index": 0,
"current": {
"title": "User information"
},
"next": "billing-address",
"isFirst": true,
"isLast": false
}Usage
Steps as array
js
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper([
'billing-address',
'terms',
'payment',
])
// Access the step through `current`
console.log(current.value) // 'billing-address'
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper([
'billing-address',
'terms',
'payment',
])
// Access the step through `current`
console.log(current.value) // 'billing-address'
Steps as object
js
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper({
'user-information': {
title: 'User information',
},
'billing-address': {
title: 'Billing address',
},
'terms': {
title: 'Terms',
},
'payment': {
title: 'Payment',
},
})
// Access the step object through `current`
console.log(current.value.title) // 'User information'
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper({
'user-information': {
title: 'User information',
},
'billing-address': {
title: 'Billing address',
},
'terms': {
title: 'Terms',
},
'payment': {
title: 'Payment',
},
})
// Access the step object through `current`
console.log(current.value.title) // 'User information'
Type Declarations
Show Type Declarations
typescript
export interface UseStepperReturn<StepName, Steps, Step> {
/** List of steps. */
steps: Readonly<Ref<Steps>>
/** List of step names. */
stepNames: Readonly<Ref<StepName[]>>
/** Index of the current step. */
index: Ref<number>
/** Current step. */
current: ComputedRef<Step>
/** Next step, or undefined if the current step is the last one. */
next: ComputedRef<StepName | undefined>
/** Previous step, or undefined if the current step is the first one. */
previous: ComputedRef<StepName | undefined>
/** Whether the current step is the first one. */
isFirst: ComputedRef<boolean>
/** Whether the current step is the last one. */
isLast: ComputedRef<boolean>
/** Get the step at the specified index. */
at: (index: number) => Step | undefined
/** Get a step by the specified name. */
get: (step: StepName) => Step | undefined
/** Go to the specified step. */
goTo: (step: StepName) => void
/** Go to the next step. Does nothing if the current step is the last one. */
goToNext: () => void
/** Go to the previous step. Does nothing if the current step is the previous one. */
goToPrevious: () => void
/** Go back to the given step, only if the current step is after. */
goBackTo: (step: StepName) => void
/** Checks whether the given step is the next step. */
isNext: (step: StepName) => boolean
/** Checks whether the given step is the previous step. */
isPrevious: (step: StepName) => boolean
/** Checks whether the given step is the current step. */
isCurrent: (step: StepName) => boolean
/** Checks if the current step is before the given step. */
isBefore: (step: StepName) => boolean
/** Checks if the current step is after the given step. */
isAfter: (step: StepName) => boolean
}
export declare function useStepper<T extends string | number>(
steps: MaybeRef<T[]>,
initialStep?: T
): UseStepperReturn<T, T[], T>
export declare function useStepper<T extends Record<string, any>>(
steps: MaybeRef<T>,
initialStep?: keyof T
): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
export interface UseStepperReturn<StepName, Steps, Step> {
/** List of steps. */
steps: Readonly<Ref<Steps>>
/** List of step names. */
stepNames: Readonly<Ref<StepName[]>>
/** Index of the current step. */
index: Ref<number>
/** Current step. */
current: ComputedRef<Step>
/** Next step, or undefined if the current step is the last one. */
next: ComputedRef<StepName | undefined>
/** Previous step, or undefined if the current step is the first one. */
previous: ComputedRef<StepName | undefined>
/** Whether the current step is the first one. */
isFirst: ComputedRef<boolean>
/** Whether the current step is the last one. */
isLast: ComputedRef<boolean>
/** Get the step at the specified index. */
at: (index: number) => Step | undefined
/** Get a step by the specified name. */
get: (step: StepName) => Step | undefined
/** Go to the specified step. */
goTo: (step: StepName) => void
/** Go to the next step. Does nothing if the current step is the last one. */
goToNext: () => void
/** Go to the previous step. Does nothing if the current step is the previous one. */
goToPrevious: () => void
/** Go back to the given step, only if the current step is after. */
goBackTo: (step: StepName) => void
/** Checks whether the given step is the next step. */
isNext: (step: StepName) => boolean
/** Checks whether the given step is the previous step. */
isPrevious: (step: StepName) => boolean
/** Checks whether the given step is the current step. */
isCurrent: (step: StepName) => boolean
/** Checks if the current step is before the given step. */
isBefore: (step: StepName) => boolean
/** Checks if the current step is after the given step. */
isAfter: (step: StepName) => boolean
}
export declare function useStepper<T extends string | number>(
steps: MaybeRef<T[]>,
initialStep?: T
): UseStepperReturn<T, T[], T>
export declare function useStepper<T extends Record<string, any>>(
steps: MaybeRef<T>,
initialStep?: keyof T
): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
Source
Contributors
Jelle Roorda
Ostap Brehin
sun0day
Enzo Innocenzi