Skip to content

⬅️ Back to Table of Contents

📄 useStepper

📊 Analysis Summary

Metric Count
🔧 Functions 12
📦 Imports 5
🟢 Vue Composition API 6
📐 Interfaces 1

📚 Table of Contents

🛠️ File Location:

📂 packages/core/useStepper/index.ts

📦 Imports

Name Source
ComputedRef vue
MaybeRef vue
Ref vue
computed vue
deepRef vue

Vue Composition API

Name Type Reactive Variables Composables
computed computed none none
computed computed none none
computed computed none none
computed computed none none
computed computed none none
computed computed none none

Functions

useStepper(steps: MaybeRef<T[]>, initialStep: T): UseStepperReturn<T, T[], T>

Provides helpers for building a multi-step wizard interface.

See: https://vueuse.org/useStepper

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc 
/**
 * Provides helpers for building a multi-step wizard interface.
 *
 * @see https://vueuse.org/useStepper
 *
 * @__NO_SIDE_EFFECTS__
 */
Code 
export function useStepper<T extends string | number>(steps: MaybeRef<T[]>, initialStep?: T): UseStepperReturn<T, T[], T>

Internal helpers

Declared inside another function in this file.

at(index: number): any

Parameters:

  • index number

Returns: any

Calls:

  • Array.isArray
Code 
function at(index: number) {
    if (Array.isArray(stepsRef.value))
      return stepsRef.value[index]

    return stepsRef.value[stepNames.value[index]]
  }

get(step: any): any

Parameters:

  • step any

Returns: any

Calls:

  • stepNames.value.includes
  • at
  • stepNames.value.indexOf
Code 
function get(step: any) {
    if (!stepNames.value.includes(step))
      return

    return at(stepNames.value.indexOf(step))
  }

goTo(step: any): void

Parameters:

  • step any

Returns: void

Calls:

  • stepNames.value.includes
  • stepNames.value.indexOf
Code 
function goTo(step: any) {
    if (stepNames.value.includes(step))
      index.value = stepNames.value.indexOf(step)
  }

goToNext(): void

Returns: void

Code 
function goToNext() {
    if (isLast.value)
      return

    index.value++
  }

goToPrevious(): void

Returns: void

Code 
function goToPrevious() {
    if (isFirst.value)
      return

    index.value--
  }

goBackTo(step: any): void

Parameters:

  • step any

Returns: void

Calls:

  • isAfter
  • goTo
Code 
function goBackTo(step: any) {
    if (isAfter(step))
      goTo(step)
  }

isNext(step: any): boolean

Parameters:

  • step any

Returns: boolean

Calls:

  • stepNames.value.indexOf
Code 
function isNext(step: any) {
    return stepNames.value.indexOf(step) === index.value + 1
  }

isPrevious(step: any): boolean

Parameters:

  • step any

Returns: boolean

Calls:

  • stepNames.value.indexOf
Code 
function isPrevious(step: any) {
    return stepNames.value.indexOf(step) === index.value - 1
  }

isCurrent(step: any): boolean

Parameters:

  • step any

Returns: boolean

Calls:

  • stepNames.value.indexOf
Code 
function isCurrent(step: any) {
    return stepNames.value.indexOf(step) === index.value
  }

isBefore(step: any): boolean

Parameters:

  • step any

Returns: boolean

Calls:

  • stepNames.value.indexOf
Code 
function isBefore(step: any) {
    return index.value < stepNames.value.indexOf(step)
  }

isAfter(step: any): boolean

Parameters:

  • step any

Returns: boolean

Calls:

  • stepNames.value.indexOf
Code 
function isAfter(step: any) {
    return index.value > stepNames.value.indexOf(step)
  }

Interfaces

UseStepperReturn<StepName, Steps, Step>

Interface Code 
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
}

Properties

Name Type Optional Description
steps Readonly<Ref<Steps>> ✗ not shown
stepNames Readonly<Ref<StepName[]>> ✗ not shown
index Ref<number> ✗ not shown
current ComputedRef<Step> ✗ not shown
next ComputedRef<StepName \| undefined> ✗ not shown
previous ComputedRef<StepName \| undefined> ✗ not shown
isFirst ComputedRef<boolean> ✗ not shown
isLast ComputedRef<boolean> ✗ not shown
at (index: number) => Step \| undefined ✗ not shown
get (step: StepName) => Step \| undefined ✗ not shown
goTo (step: StepName) => void ✗ not shown
goToNext () => void ✗ not shown
goToPrevious () => void ✗ not shown
goBackTo (step: StepName) => void ✗ not shown
isNext (step: StepName) => boolean ✗ not shown
isPrevious (step: StepName) => boolean ✗ not shown
isCurrent (step: StepName) => boolean ✗ not shown
isBefore (step: StepName) => boolean ✗ not shown
isAfter (step: StepName) => boolean ✗ not shown

Generated by Syntax Scribe