fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
3.2 KiB
3.2 KiB
category
| category |
|---|
| Utilities |
useStepper
Provides helpers for building a multi-step wizard interface.
Usage
Steps as array
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
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
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]>;