From 0d07c593fc72ba56afe9245700a29a03aa8c6f41 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Fri, 10 Jun 2022 16:54:29 +0200
Subject: [PATCH 01/12] feat(useWizard): new function

---
 packages/contributors.json            |   6 ++
 packages/core/index.ts                |   1 +
 packages/core/useWizard/demo.vue      | 103 ++++++++++++++++++++++++++
 packages/core/useWizard/index.md      |  15 ++++
 packages/core/useWizard/index.test.ts |  44 +++++++++++
 packages/core/useWizard/index.ts      |  83 +++++++++++++++++++++
 6 files changed, 252 insertions(+)
 create mode 100644 packages/core/useWizard/demo.vue
 create mode 100644 packages/core/useWizard/index.md
 create mode 100644 packages/core/useWizard/index.test.ts
 create mode 100644 packages/core/useWizard/index.ts

diff --git a/packages/contributors.json b/packages/contributors.json
index 3383703c230..1ca00e0e274 100644
--- a/packages/contributors.json
+++ b/packages/contributors.json
@@ -58,6 +58,7 @@
   "lpj145",
   "maxma241",
   "xizher",
+  "nhedger",
   "g-plane",
   "coolhome",
   "herrmannplatz",
@@ -114,6 +115,7 @@
   "Maiquu",
   "Danmer",
   "emilsgulbis",
+  "innocenzi",
   "iendeavor",
   "web2033",
   "sp1ker",
@@ -132,6 +134,7 @@
   "ilkome",
   "iagafonov",
   "ivanq3w",
+  "jd-solanki",
   "jairoblatt",
   "Jamiewarb",
   "itpropro",
@@ -147,6 +150,7 @@
   "joaoeudes7",
   "xvaara",
   "DrJume",
+  "Julien-Martin",
   "kidonng",
   "kirklin",
   "Spice-King",
@@ -192,6 +196,7 @@
   "Atinux",
   "thalesagapito",
   "thierrymichel",
+  "LeSuisse",
   "tmkx",
   "tobyzerner",
   "livthomas",
@@ -204,6 +209,7 @@
   "vhhsyt",
   "chaii3",
   "r1ader",
+  "hsyq",
   "hchlq",
   "iGalaxyz",
   "winter-ice",
diff --git a/packages/core/index.ts b/packages/core/index.ts
index 5707de41c3b..fb68196b030 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -118,6 +118,7 @@ export * from './useWebWorkerFn'
 export * from './useWindowFocus'
 export * from './useWindowScroll'
 export * from './useWindowSize'
+export * from './useWizard'
 export * from './types'
 export * from '@vueuse/shared'
 export * from './ssr-handlers'
diff --git a/packages/core/useWizard/demo.vue b/packages/core/useWizard/demo.vue
new file mode 100644
index 00000000000..ccea757e76e
--- /dev/null
+++ b/packages/core/useWizard/demo.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { useWizard } from '@vueuse/core'
+import { reactive } from 'vue'
+
+const { index, current, next, steps, backTo, currentStepIs, isFirst, isLast, todo } = useWizard([
+  'Billing address',
+  'Terms',
+  'Payment',
+] as const)
+
+const form = reactive({
+  billingAddress: '',
+  contract: false,
+  carbonOffsetting: false,
+  payment: 'credit-card' as 'paypal' | 'credit-card',
+})
+
+const wizard = reactive({
+  index,
+  current,
+  steps,
+  isFirst,
+  isLast,
+})
+
+function canGoNext() {
+  if (currentStepIs('Billing address') && form.billingAddress === '')
+    return false
+
+  if (currentStepIs('Terms') && !form.contract)
+    return false
+
+  return true
+}
+
+function submit() {
+  if (!canGoNext())
+    return
+
+  next()
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex gap-2 justify-center">
+      <div v-for="step in steps" :key="step" class="">
+        <button :disabled="todo(step)" @click="backTo(step)" v-text="step" />
+      </div>
+    </div>
+
+    <form class="mt-10" @submit.prevent="submit">
+      <span class="text-lg font-bold" v-text="current" />
+      <div class="flex gap-4 items-center">
+        <div v-if="currentStepIs('Billing address')">
+          <input v-model="form.billingAddress" type="text">
+        </div>
+
+        <div v-if="currentStepIs('Terms')">
+          <div>
+            <input id="carbon-offsetting" v-model="form.carbonOffsetting" type="checkbox" class="mr-2">
+            <label for="carbon-offsetting">I accept to deposit a carbon offsetting fee</label>
+          </div>
+          <div>
+            <input id="contract" v-model="form.contract" type="checkbox" class="mr-2">
+            <label for="contract">I accept the terms of the contract</label>
+          </div>
+        </div>
+
+        <div v-if="currentStepIs('Payment')">
+          <div>
+            <input id="credit-card" v-model="form.payment" type="radio" class="mr-2" value="credit-card">
+            <label for="credit-card">Credit card</label>
+          </div>
+          <div>
+            <input id="paypal" v-model="form.payment" type="radio" class="mr-2" value="paypal">
+            <label for="paypal">PayPal</label>
+          </div>
+        </div>
+
+        <button v-if="!isLast" :disabled="!canGoNext()">
+          Next
+        </button>
+
+        <button v-if="isLast" :disabled="!canGoNext()">
+          Submit
+        </button>
+      </div>
+    </form>
+
+    <div class="flex gap-4 mt-12">
+      <div class="px-4 py-2 rounded border border-main space-y-2">
+        <span class="font-bold">Form</span>
+        <pre v-text="form" />
+      </div>
+
+      <div class="px-4 py-2 rounded border border-main space-y-2">
+        <span class="font-bold">Wizard</span>
+        <pre v-text="wizard" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/core/useWizard/index.md b/packages/core/useWizard/index.md
new file mode 100644
index 00000000000..728fc5054f8
--- /dev/null
+++ b/packages/core/useWizard/index.md
@@ -0,0 +1,15 @@
+---
+category: Utilities
+---
+
+# useWizard
+
+Provides helpers for building a multi-step wizard interface.
+
+## Usage
+
+```js
+import { useWizard } from '@vueuse/core'
+
+const { current, previous, next, steps, isFirst, isLast } = useWizard()
+```
diff --git a/packages/core/useWizard/index.test.ts b/packages/core/useWizard/index.test.ts
new file mode 100644
index 00000000000..0529ac5c9cb
--- /dev/null
+++ b/packages/core/useWizard/index.test.ts
@@ -0,0 +1,44 @@
+import { useWizard } from '.'
+
+describe('useWizard', () => {
+  it('should be defined', () => {
+    expect(useWizard).toBeDefined()
+  })
+
+  it('can navigate through steps', () => {
+    const { isFirst, isLast, next, previous, current, index, goTo, backTo, isPrevious, isNext, currentStepIs, currentStepIsAfter, currentStepIsBefore } = useWizard([
+      'First step',
+      'Second step',
+      'Last step',
+    ] as const)
+
+    expect(index.value).toBe(0)
+    expect(current.value).toBe('First step')
+    expect(isFirst.value).toBe(true)
+    expect(currentStepIs('First step')).toBe(true)
+    expect(currentStepIs('Second step')).toBe(false)
+    expect(currentStepIsAfter('Second step')).toBe(false)
+
+    next()
+    expect(index.value).toBe(1)
+    expect(current.value).toBe('Second step')
+    expect(isPrevious('First step')).toBe(true)
+    expect(isNext('Last step')).toBe(true)
+    expect(currentStepIsAfter('First step')).toBe(true)
+    expect(currentStepIsBefore('First step')).toBe(false)
+    expect(currentStepIsBefore('Last step')).toBe(true)
+
+    previous()
+    expect(index.value).toBe(0)
+    expect(current.value).toBe('First step')
+
+    backTo('Last step') // we can't go back to a future step
+    expect(index.value).toBe(0)
+    expect(current.value).toBe('First step')
+
+    goTo('Last step') // we can force a step
+    expect(index.value).toBe(2)
+    expect(current.value).toBe('Last step')
+    expect(isLast.value).toBe(true)
+  })
+})
diff --git a/packages/core/useWizard/index.ts b/packages/core/useWizard/index.ts
new file mode 100644
index 00000000000..1ebf44220a6
--- /dev/null
+++ b/packages/core/useWizard/index.ts
@@ -0,0 +1,83 @@
+import { computed, ref } from 'vue-demi'
+
+export function useWizard<T extends string>(steps: readonly T[], initial?: T) {
+  const index = ref(steps.indexOf(initial ?? steps[0]))
+  const current = computed(() => steps[index.value])
+  const isFirst = computed(() => index.value === 0)
+  const isLast = computed(() => index.value === steps.length - 1)
+
+  function backTo(step: T) {
+    if (currentStepIsAfter(step))
+      goTo(step)
+  }
+
+  function goTo(step: T) {
+    index.value = steps.indexOf(step)
+  }
+
+  function next() {
+    if (isLast.value)
+      return
+
+    index.value++
+  }
+
+  function previous() {
+    if (isFirst.value)
+      return
+
+    index.value--
+  }
+
+  function isNext(step: T) {
+    return steps.indexOf(step) === index.value + 1
+  }
+
+  function isPrevious(step: T) {
+    return steps.indexOf(step) === index.value - 1
+  }
+
+  function currentStepIs(step: T) {
+    return steps.indexOf(step) === index.value
+  }
+
+  function currentStepIsAfter(step: T) {
+    return index.value > steps.indexOf(step)
+  }
+
+  function currentStepIsBefore(step: T) {
+    return index.value < steps.indexOf(step)
+  }
+
+  function completed(step: T) {
+    return currentStepIsAfter(step)
+  }
+
+  function active(step: T) {
+    return currentStepIs(step)
+  }
+
+  function todo(step: T) {
+    return currentStepIsBefore(step)
+  }
+
+  return {
+    backTo,
+    goTo,
+    current,
+    index,
+    next,
+    previous,
+    steps,
+    currentStepIs,
+    currentStepIsAfter,
+    currentStepIsBefore,
+    completed,
+    active,
+    todo,
+    isFirst,
+    isLast,
+    isNext,
+    isPrevious,
+  }
+}

From 2b7eeeba386557ab6f161f3b855cb83f1871cd4d Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Mon, 13 Jun 2022 10:20:23 +0200
Subject: [PATCH 02/12] chore: rename to `useStepper`

---
 packages/core/index.ts                            |  2 +-
 packages/core/{useWizard => useStepper}/demo.vue  |  4 ++--
 packages/core/useStepper/index.md                 | 15 +++++++++++++++
 .../core/{useWizard => useStepper}/index.test.ts  |  8 ++++----
 packages/core/{useWizard => useStepper}/index.ts  |  2 +-
 packages/core/useWizard/index.md                  | 15 ---------------
 6 files changed, 23 insertions(+), 23 deletions(-)
 rename packages/core/{useWizard => useStepper}/demo.vue (97%)
 create mode 100644 packages/core/useStepper/index.md
 rename packages/core/{useWizard => useStepper}/index.test.ts (90%)
 rename packages/core/{useWizard => useStepper}/index.ts (94%)
 delete mode 100644 packages/core/useWizard/index.md

diff --git a/packages/core/index.ts b/packages/core/index.ts
index fb68196b030..427e6b42eb2 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -118,7 +118,7 @@ export * from './useWebWorkerFn'
 export * from './useWindowFocus'
 export * from './useWindowScroll'
 export * from './useWindowSize'
-export * from './useWizard'
+export * from './useStepper'
 export * from './types'
 export * from '@vueuse/shared'
 export * from './ssr-handlers'
diff --git a/packages/core/useWizard/demo.vue b/packages/core/useStepper/demo.vue
similarity index 97%
rename from packages/core/useWizard/demo.vue
rename to packages/core/useStepper/demo.vue
index ccea757e76e..f0f2a4108d7 100644
--- a/packages/core/useWizard/demo.vue
+++ b/packages/core/useStepper/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useWizard } from '@vueuse/core'
+import { useStepper } from '@vueuse/core'
 import { reactive } from 'vue'
 
-const { index, current, next, steps, backTo, currentStepIs, isFirst, isLast, todo } = useWizard([
+const { index, current, next, steps, backTo, currentStepIs, isFirst, isLast, todo } = useStepper([
   'Billing address',
   'Terms',
   'Payment',
diff --git a/packages/core/useStepper/index.md b/packages/core/useStepper/index.md
new file mode 100644
index 00000000000..b28f818dc16
--- /dev/null
+++ b/packages/core/useStepper/index.md
@@ -0,0 +1,15 @@
+---
+category: Utilities
+---
+
+# useStepper
+
+Provides helpers for building a multi-step wizard interface.
+
+## Usage
+
+```js
+import { useStepper } from '@vueuse/core'
+
+const { current, previous, next, steps, isFirst, isLast } = useStepper()
+```
diff --git a/packages/core/useWizard/index.test.ts b/packages/core/useStepper/index.test.ts
similarity index 90%
rename from packages/core/useWizard/index.test.ts
rename to packages/core/useStepper/index.test.ts
index 0529ac5c9cb..6ce50f26834 100644
--- a/packages/core/useWizard/index.test.ts
+++ b/packages/core/useStepper/index.test.ts
@@ -1,12 +1,12 @@
-import { useWizard } from '.'
+import { useStepper } from '.'
 
-describe('useWizard', () => {
+describe('useStepper', () => {
   it('should be defined', () => {
-    expect(useWizard).toBeDefined()
+    expect(useStepper).toBeDefined()
   })
 
   it('can navigate through steps', () => {
-    const { isFirst, isLast, next, previous, current, index, goTo, backTo, isPrevious, isNext, currentStepIs, currentStepIsAfter, currentStepIsBefore } = useWizard([
+    const { isFirst, isLast, next, previous, current, index, goTo, backTo, isPrevious, isNext, currentStepIs, currentStepIsAfter, currentStepIsBefore } = useStepper([
       'First step',
       'Second step',
       'Last step',
diff --git a/packages/core/useWizard/index.ts b/packages/core/useStepper/index.ts
similarity index 94%
rename from packages/core/useWizard/index.ts
rename to packages/core/useStepper/index.ts
index 1ebf44220a6..d506312dce8 100644
--- a/packages/core/useWizard/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue-demi'
 
-export function useWizard<T extends string>(steps: readonly T[], initial?: T) {
+export function useStepper<T extends string>(steps: readonly T[], initial?: T) {
   const index = ref(steps.indexOf(initial ?? steps[0]))
   const current = computed(() => steps[index.value])
   const isFirst = computed(() => index.value === 0)
diff --git a/packages/core/useWizard/index.md b/packages/core/useWizard/index.md
deleted file mode 100644
index 728fc5054f8..00000000000
--- a/packages/core/useWizard/index.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-category: Utilities
----
-
-# useWizard
-
-Provides helpers for building a multi-step wizard interface.
-
-## Usage
-
-```js
-import { useWizard } from '@vueuse/core'
-
-const { current, previous, next, steps, isFirst, isLast } = useWizard()
-```

From c0c2437ae40a58e12f757ccd662347e15a94ba79 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Wed, 15 Jun 2022 16:48:48 +0200
Subject: [PATCH 03/12] refactor: remove alias functions

---
 packages/core/useStepper/demo.vue |  2 +-
 packages/core/useStepper/index.ts | 15 ---------------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/packages/core/useStepper/demo.vue b/packages/core/useStepper/demo.vue
index f0f2a4108d7..0634b38060b 100644
--- a/packages/core/useStepper/demo.vue
+++ b/packages/core/useStepper/demo.vue
@@ -2,7 +2,7 @@
 import { useStepper } from '@vueuse/core'
 import { reactive } from 'vue'
 
-const { index, current, next, steps, backTo, currentStepIs, isFirst, isLast, todo } = useStepper([
+const { index, current, next, steps, backTo, currentStepIs, isFirst, isLast, currentStepIsBefore: todo } = useStepper([
   'Billing address',
   'Terms',
   'Payment',
diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index d506312dce8..e7c990a7647 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -49,18 +49,6 @@ export function useStepper<T extends string>(steps: readonly T[], initial?: T) {
     return index.value < steps.indexOf(step)
   }
 
-  function completed(step: T) {
-    return currentStepIsAfter(step)
-  }
-
-  function active(step: T) {
-    return currentStepIs(step)
-  }
-
-  function todo(step: T) {
-    return currentStepIsBefore(step)
-  }
-
   return {
     backTo,
     goTo,
@@ -72,9 +60,6 @@ export function useStepper<T extends string>(steps: readonly T[], initial?: T) {
     currentStepIs,
     currentStepIsAfter,
     currentStepIsBefore,
-    completed,
-    active,
-    todo,
     isFirst,
     isLast,
     isNext,

From 10c39b2db3102c46d67ee840cd10da4cf233b6af Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Wed, 15 Jun 2022 16:55:21 +0200
Subject: [PATCH 04/12] feat: add `nextStep` and `previousStep`

---
 packages/core/useStepper/demo.vue      |  4 ++--
 packages/core/useStepper/index.test.ts | 12 +++++++++---
 packages/core/useStepper/index.ts      | 12 ++++++++----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/core/useStepper/demo.vue b/packages/core/useStepper/demo.vue
index 0634b38060b..374b73347dd 100644
--- a/packages/core/useStepper/demo.vue
+++ b/packages/core/useStepper/demo.vue
@@ -2,7 +2,7 @@
 import { useStepper } from '@vueuse/core'
 import { reactive } from 'vue'
 
-const { index, current, next, steps, backTo, currentStepIs, isFirst, isLast, currentStepIsBefore: todo } = useStepper([
+const { index, current, goToNext, steps, backTo, currentStepIs, isFirst, isLast, currentStepIsBefore: todo } = useStepper([
   'Billing address',
   'Terms',
   'Payment',
@@ -37,7 +37,7 @@ function submit() {
   if (!canGoNext())
     return
 
-  next()
+  goToNext()
 }
 </script>
 
diff --git a/packages/core/useStepper/index.test.ts b/packages/core/useStepper/index.test.ts
index 6ce50f26834..5476b7302e1 100644
--- a/packages/core/useStepper/index.test.ts
+++ b/packages/core/useStepper/index.test.ts
@@ -6,7 +6,7 @@ describe('useStepper', () => {
   })
 
   it('can navigate through steps', () => {
-    const { isFirst, isLast, next, previous, current, index, goTo, backTo, isPrevious, isNext, currentStepIs, currentStepIsAfter, currentStepIsBefore } = useStepper([
+    const { isFirst, isLast, goToNext, goToPrevious, nextStep, previousStep, current, index, goTo, backTo, isPrevious, isNext, currentStepIs, currentStepIsAfter, currentStepIsBefore } = useStepper([
       'First step',
       'Second step',
       'Last step',
@@ -15,20 +15,24 @@ describe('useStepper', () => {
     expect(index.value).toBe(0)
     expect(current.value).toBe('First step')
     expect(isFirst.value).toBe(true)
+    expect(nextStep.value).toBe('Second step')
+    expect(previousStep.value).toBeUndefined()
     expect(currentStepIs('First step')).toBe(true)
     expect(currentStepIs('Second step')).toBe(false)
     expect(currentStepIsAfter('Second step')).toBe(false)
 
-    next()
+    goToNext()
     expect(index.value).toBe(1)
     expect(current.value).toBe('Second step')
+    expect(nextStep.value).toBe('Last step')
+    expect(previousStep.value).toBe('First step')
     expect(isPrevious('First step')).toBe(true)
     expect(isNext('Last step')).toBe(true)
     expect(currentStepIsAfter('First step')).toBe(true)
     expect(currentStepIsBefore('First step')).toBe(false)
     expect(currentStepIsBefore('Last step')).toBe(true)
 
-    previous()
+    goToPrevious()
     expect(index.value).toBe(0)
     expect(current.value).toBe('First step')
 
@@ -37,6 +41,8 @@ describe('useStepper', () => {
     expect(current.value).toBe('First step')
 
     goTo('Last step') // we can force a step
+    expect(nextStep.value).toBeUndefined()
+    expect(previousStep.value).toBe('Second step')
     expect(index.value).toBe(2)
     expect(current.value).toBe('Last step')
     expect(isLast.value).toBe(true)
diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index e7c990a7647..9d0761ea035 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -5,6 +5,8 @@ export function useStepper<T extends string>(steps: readonly T[], initial?: T) {
   const current = computed(() => steps[index.value])
   const isFirst = computed(() => index.value === 0)
   const isLast = computed(() => index.value === steps.length - 1)
+  const nextStep = computed(() => isLast.value ? undefined : steps[index.value + 1])
+  const previousStep = computed(() => isFirst.value ? undefined : steps[index.value - 1])
 
   function backTo(step: T) {
     if (currentStepIsAfter(step))
@@ -15,14 +17,14 @@ export function useStepper<T extends string>(steps: readonly T[], initial?: T) {
     index.value = steps.indexOf(step)
   }
 
-  function next() {
+  function goToNext() {
     if (isLast.value)
       return
 
     index.value++
   }
 
-  function previous() {
+  function goToPrevious() {
     if (isFirst.value)
       return
 
@@ -54,8 +56,8 @@ export function useStepper<T extends string>(steps: readonly T[], initial?: T) {
     goTo,
     current,
     index,
-    next,
-    previous,
+    goToNext,
+    goToPrevious,
     steps,
     currentStepIs,
     currentStepIsAfter,
@@ -64,5 +66,7 @@ export function useStepper<T extends string>(steps: readonly T[], initial?: T) {
     isLast,
     isNext,
     isPrevious,
+    nextStep,
+    previousStep,
   }
 }

From a610322d586da23edab65cbaf417386a5d5911c8 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Wed, 15 Jun 2022 17:00:47 +0200
Subject: [PATCH 05/12] feat: allow arbitrary step types

---
 packages/core/useStepper/index.test.ts | 20 ++++++++++++++++++++
 packages/core/useStepper/index.ts      |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/core/useStepper/index.test.ts b/packages/core/useStepper/index.test.ts
index 5476b7302e1..fecdfaab9c2 100644
--- a/packages/core/useStepper/index.test.ts
+++ b/packages/core/useStepper/index.test.ts
@@ -47,4 +47,24 @@ describe('useStepper', () => {
     expect(current.value).toBe('Last step')
     expect(isLast.value).toBe(true)
   })
+
+  it('can use objects as steps', () => {
+    const { goToNext, index, current } = useStepper([
+      { id: 1, label: 'First step' },
+      { id: 2, label: 'Second step' },
+      { id: 3, label: 'Third step' },
+    ])
+
+    expect(index.value).toBe(0)
+    expect(current.value).toMatchObject({ id: 1, label: 'First step' })
+
+    goToNext()
+    expect(index.value).toBe(1)
+    expect(current.value).toMatchObject({ id: 2, label: 'Second step' })
+
+    goToNext()
+    goToNext()
+    expect(index.value).toBe(2)
+    expect(current.value).toMatchObject({ id: 3, label: 'Third step' })
+  })
 })
diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index 9d0761ea035..eb75a4c246a 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue-demi'
 
-export function useStepper<T extends string>(steps: readonly T[], initial?: T) {
+export function useStepper<T>(steps: readonly T[], initial?: T) {
   const index = ref(steps.indexOf(initial ?? steps[0]))
   const current = computed(() => steps[index.value])
   const isFirst = computed(() => index.value === 0)

From f55a1daa2309c5b4caf01d729bb3d3b19fed084a Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Thu, 16 Jun 2022 11:25:38 +0200
Subject: [PATCH 06/12] refactor: clean up `nextStep` and `previousStep`

---
 packages/core/useStepper/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index eb75a4c246a..288ee2ba7cf 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -5,8 +5,8 @@ export function useStepper<T>(steps: readonly T[], initial?: T) {
   const current = computed(() => steps[index.value])
   const isFirst = computed(() => index.value === 0)
   const isLast = computed(() => index.value === steps.length - 1)
-  const nextStep = computed(() => isLast.value ? undefined : steps[index.value + 1])
-  const previousStep = computed(() => isFirst.value ? undefined : steps[index.value - 1])
+  const nextStep = computed<T | undefined>(() => steps[index.value + 1])
+  const previousStep = computed<T | undefined>(() => steps[index.value - 1])
 
   function backTo(step: T) {
     if (currentStepIsAfter(step))

From febeb2c800ab29185b2102527d540b2ec0ea6db7 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Thu, 16 Jun 2022 11:36:20 +0200
Subject: [PATCH 07/12] refactor: add JSDocs and remove `backTo`

---
 packages/core/useStepper/demo.vue      | 10 ++++++++-
 packages/core/useStepper/index.test.ts | 14 +++++--------
 packages/core/useStepper/index.ts      | 29 +++++++++++++++++---------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/packages/core/useStepper/demo.vue b/packages/core/useStepper/demo.vue
index 374b73347dd..5616d57cbc5 100644
--- a/packages/core/useStepper/demo.vue
+++ b/packages/core/useStepper/demo.vue
@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import { useStepper } from '@vueuse/core'
+import type { UnwrapRef } from 'vue'
 import { reactive } from 'vue'
 
-const { index, current, goToNext, steps, backTo, currentStepIs, isFirst, isLast, currentStepIsBefore: todo } = useStepper([
+const { index, current, goToNext, goTo, steps, currentStepIs, isFirst, isLast, isStepBefore: todo, isStepAfter: completed, nextStep, previousStep } = useStepper([
   'Billing address',
   'Terms',
   'Payment',
 ] as const)
 
+function backTo(step: UnwrapRef<typeof current>) {
+  if (completed(step))
+    goTo(step)
+}
+
 const form = reactive({
   billingAddress: '',
   contract: false,
@@ -21,6 +27,8 @@ const wizard = reactive({
   steps,
   isFirst,
   isLast,
+  nextStep,
+  previousStep,
 })
 
 function canGoNext() {
diff --git a/packages/core/useStepper/index.test.ts b/packages/core/useStepper/index.test.ts
index fecdfaab9c2..09f0c8fe052 100644
--- a/packages/core/useStepper/index.test.ts
+++ b/packages/core/useStepper/index.test.ts
@@ -6,7 +6,7 @@ describe('useStepper', () => {
   })
 
   it('can navigate through steps', () => {
-    const { isFirst, isLast, goToNext, goToPrevious, nextStep, previousStep, current, index, goTo, backTo, isPrevious, isNext, currentStepIs, currentStepIsAfter, currentStepIsBefore } = useStepper([
+    const { isFirst, isLast, goToNext, goToPrevious, nextStep, previousStep, current, index, goTo, isPrevious, isNext, currentStepIs, isStepAfter, isStepBefore } = useStepper([
       'First step',
       'Second step',
       'Last step',
@@ -19,7 +19,7 @@ describe('useStepper', () => {
     expect(previousStep.value).toBeUndefined()
     expect(currentStepIs('First step')).toBe(true)
     expect(currentStepIs('Second step')).toBe(false)
-    expect(currentStepIsAfter('Second step')).toBe(false)
+    expect(isStepAfter('Second step')).toBe(false)
 
     goToNext()
     expect(index.value).toBe(1)
@@ -28,18 +28,14 @@ describe('useStepper', () => {
     expect(previousStep.value).toBe('First step')
     expect(isPrevious('First step')).toBe(true)
     expect(isNext('Last step')).toBe(true)
-    expect(currentStepIsAfter('First step')).toBe(true)
-    expect(currentStepIsBefore('First step')).toBe(false)
-    expect(currentStepIsBefore('Last step')).toBe(true)
+    expect(isStepAfter('First step')).toBe(true)
+    expect(isStepBefore('First step')).toBe(false)
+    expect(isStepBefore('Last step')).toBe(true)
 
     goToPrevious()
     expect(index.value).toBe(0)
     expect(current.value).toBe('First step')
 
-    backTo('Last step') // we can't go back to a future step
-    expect(index.value).toBe(0)
-    expect(current.value).toBe('First step')
-
     goTo('Last step') // we can force a step
     expect(nextStep.value).toBeUndefined()
     expect(previousStep.value).toBe('Second step')
diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index 288ee2ba7cf..63d62ac14b9 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -8,11 +8,6 @@ export function useStepper<T>(steps: readonly T[], initial?: T) {
   const nextStep = computed<T | undefined>(() => steps[index.value + 1])
   const previousStep = computed<T | undefined>(() => steps[index.value - 1])
 
-  function backTo(step: T) {
-    if (currentStepIsAfter(step))
-      goTo(step)
-  }
-
   function goTo(step: T) {
     index.value = steps.indexOf(step)
   }
@@ -31,28 +26,42 @@ export function useStepper<T>(steps: readonly T[], initial?: T) {
     index.value--
   }
 
+  /**
+   * Checks if the given step is the step just after the current step.
+   */
   function isNext(step: T) {
     return steps.indexOf(step) === index.value + 1
   }
 
+  /**
+   * Checks if the given step is the step just before the current step.
+   */
   function isPrevious(step: T) {
     return steps.indexOf(step) === index.value - 1
   }
 
+  /**
+   * Checks if the current step is the same as the given step.
+   */
   function currentStepIs(step: T) {
     return steps.indexOf(step) === index.value
   }
 
-  function currentStepIsAfter(step: T) {
+  /**
+   * Checks if the current step is after given step.
+   */
+  function isStepAfter(step: T) {
     return index.value > steps.indexOf(step)
   }
 
-  function currentStepIsBefore(step: T) {
+  /**
+   * Checks if the current step is before given step.
+   */
+  function isStepBefore(step: T) {
     return index.value < steps.indexOf(step)
   }
 
   return {
-    backTo,
     goTo,
     current,
     index,
@@ -60,8 +69,8 @@ export function useStepper<T>(steps: readonly T[], initial?: T) {
     goToPrevious,
     steps,
     currentStepIs,
-    currentStepIsAfter,
-    currentStepIsBefore,
+    isStepAfter,
+    isStepBefore,
     isFirst,
     isLast,
     isNext,

From 6018732f538d42ce8bd5fcb83a53fda9396bca7b Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Tue, 5 Jul 2022 18:29:37 +0200
Subject: [PATCH 08/12] refactor(useStepper): support objects and arrays

---
 packages/contributors.json             |   7 +-
 packages/core/index.ts                 |   2 +-
 packages/core/useStepper/demo.vue      | 143 +++++++------
 packages/core/useStepper/index.md      |  41 +++-
 packages/core/useStepper/index.test.ts | 280 ++++++++++++++++++++-----
 packages/core/useStepper/index.ts      | 142 +++++++++----
 6 files changed, 448 insertions(+), 167 deletions(-)

diff --git a/packages/contributors.json b/packages/contributors.json
index 6911a183068..89847bc52ea 100644
--- a/packages/contributors.json
+++ b/packages/contributors.json
@@ -155,7 +155,6 @@
   "josephfh",
   "joaoeudes7",
   "xvaara",
-  "DrJume",
   "Julien-Martin",
   "kidonng",
   "kirklin",
@@ -167,6 +166,7 @@
   "phaust",
   "marktnoonan",
   "dm4t2",
+  "melishev",
   "mauriciabad",
   "mxmvshnvsk",
   "AldeonMoriak",
@@ -186,6 +186,7 @@
   "a1xon",
   "octref",
   "praburangki",
+  "preeteshjain",
   "QiroNT",
   "ramonakira",
   "Redemption198",
@@ -222,12 +223,14 @@
   "iGalaxyz",
   "winter-ice",
   "monkeywithacupcake",
-  "katsuyaU",
+  "kagurazaka-0",
   "koheing",
+  "kongmoumou",
   "laozei6401",
   "leovoon",
   "likeswinds",
   "lxhyl",
+  "lxnelyclxud",
   "lzdFeiFei",
   "meteorlxy",
   "odex21",
diff --git a/packages/core/index.ts b/packages/core/index.ts
index 14ef32e43ef..a5e98f35241 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -94,6 +94,7 @@ export * from './useSessionStorage'
 export * from './useShare'
 export * from './useSpeechRecognition'
 export * from './useSpeechSynthesis'
+export * from './useStepper'
 export * from './useStorage'
 export * from './useStorageAsync'
 export * from './useStyleTag'
@@ -120,7 +121,6 @@ export * from './useWebWorkerFn'
 export * from './useWindowFocus'
 export * from './useWindowScroll'
 export * from './useWindowSize'
-export * from './useStepper'
 export * from './types'
 export * from '@vueuse/shared'
 export * from './ssr-handlers'
diff --git a/packages/core/useStepper/demo.vue b/packages/core/useStepper/demo.vue
index 5616d57cbc5..9b7276f5b09 100644
--- a/packages/core/useStepper/demo.vue
+++ b/packages/core/useStepper/demo.vue
@@ -1,110 +1,117 @@
 <script setup lang="ts">
 import { useStepper } from '@vueuse/core'
-import type { UnwrapRef } from 'vue'
 import { reactive } from 'vue'
 
-const { index, current, goToNext, goTo, steps, currentStepIs, isFirst, isLast, isStepBefore: todo, isStepAfter: completed, nextStep, previousStep } = useStepper([
-  'Billing address',
-  'Terms',
-  'Payment',
-] as const)
-
-function backTo(step: UnwrapRef<typeof current>) {
-  if (completed(step))
-    goTo(step)
-}
-
 const form = reactive({
+  firstName: 'Jon',
+  lastName: '',
   billingAddress: '',
-  contract: false,
+  contractAccepted: false,
   carbonOffsetting: false,
   payment: 'credit-card' as 'paypal' | 'credit-card',
 })
 
-const wizard = reactive({
-  index,
-  current,
-  steps,
-  isFirst,
-  isLast,
-  nextStep,
-  previousStep,
+const stepper = useStepper({
+  'user-information': {
+    title: 'User information',
+    isValid: () => form.firstName && form.lastName,
+  },
+  'billing-address': {
+    title: 'Billing address',
+    isValid: () => form.billingAddress?.trim() !== '',
+  },
+  'terms': {
+    title: 'Terms',
+    isValid: () => form.contractAccepted === true,
+  },
+  'payment': {
+    title: 'Payment',
+    isValid: () => ['credit-card', 'paypal'].includes(form.payment),
+  },
 })
 
-function canGoNext() {
-  if (currentStepIs('Billing address') && form.billingAddress === '')
-    return false
-
-  if (currentStepIs('Terms') && !form.contract)
-    return false
-
-  return true
-}
-
 function submit() {
-  if (!canGoNext())
-    return
+  if (stepper.current.value.isValid())
+    stepper.goToNext()
+}
 
-  goToNext()
+function allStepsBeforeAreValid(index: number): boolean {
+  return !Array(index)
+    .fill(null)
+    .some((_, i) => !stepper.at(i)?.isValid())
 }
 </script>
 
 <template>
   <div>
     <div class="flex gap-2 justify-center">
-      <div v-for="step in steps" :key="step" class="">
-        <button :disabled="todo(step)" @click="backTo(step)" v-text="step" />
+      <div v-for="(step, id, i) in stepper.steps" :key="id" class="">
+        <button
+          :disabled="!allStepsBeforeAreValid(i) && stepper.isBefore(id)"
+          @click="stepper.goTo(id)"
+          v-text="step.title"
+        />
       </div>
     </div>
 
     <form class="mt-10" @submit.prevent="submit">
-      <span class="text-lg font-bold" v-text="current" />
-      <div class="flex gap-4 items-center">
-        <div v-if="currentStepIs('Billing address')">
-          <input v-model="form.billingAddress" type="text">
-        </div>
-
-        <div v-if="currentStepIs('Terms')">
-          <div>
-            <input id="carbon-offsetting" v-model="form.carbonOffsetting" type="checkbox" class="mr-2">
-            <label for="carbon-offsetting">I accept to deposit a carbon offsetting fee</label>
+      <span class="text-lg font-bold" v-text="stepper.current.value.title" />
+      <div class="flex flex-col justify-center gap-2 mt-2">
+        <div>
+          <div v-if="stepper.isCurrent('user-information')">
+            <span>First name:</span>
+            <input v-model="form.firstName" class="!mt-0.5" type="text">
+            <span>Last name:</span>
+            <input v-model="form.lastName" class="!mt-0.5" type="text">
           </div>
-          <div>
-            <input id="contract" v-model="form.contract" type="checkbox" class="mr-2">
-            <label for="contract">I accept the terms of the contract</label>
+
+          <div v-if="stepper.isCurrent('billing-address')">
+            <input v-model="form.billingAddress" type="text">
           </div>
-        </div>
 
-        <div v-if="currentStepIs('Payment')">
-          <div>
-            <input id="credit-card" v-model="form.payment" type="radio" class="mr-2" value="credit-card">
-            <label for="credit-card">Credit card</label>
+          <div v-if="stepper.isCurrent('terms')">
+            <div>
+              <input id="carbon-offsetting" v-model="form.carbonOffsetting" type="checkbox" class="mr-2">
+              <label for="carbon-offsetting">I accept to deposit a carbon offsetting fee</label>
+            </div>
+            <div>
+              <input id="contract" v-model="form.contractAccepted" type="checkbox" class="mr-2">
+              <label for="contract">I accept the terms of the contract</label>
+            </div>
           </div>
-          <div>
-            <input id="paypal" v-model="form.payment" type="radio" class="mr-2" value="paypal">
-            <label for="paypal">PayPal</label>
+
+          <div v-if="stepper.isCurrent('payment')">
+            <div>
+              <input id="credit-card" v-model="form.payment" type="radio" class="mr-2" value="credit-card">
+              <label for="credit-card">Credit card</label>
+            </div>
+            <div>
+              <input id="paypal" v-model="form.payment" type="radio" class="mr-2" value="paypal">
+              <label for="paypal">PayPal</label>
+            </div>
           </div>
         </div>
 
-        <button v-if="!isLast" :disabled="!canGoNext()">
-          Next
-        </button>
-
-        <button v-if="isLast" :disabled="!canGoNext()">
-          Submit
-        </button>
+        <div>
+          <button v-if="!stepper.isLast" :disabled="!stepper.current.value.isValid()">
+            Next
+          </button>
+          <button v-if="stepper.isLast" :disabled="!stepper.current.value.isValid()">
+            Submit
+          </button>
+        </div>
       </div>
     </form>
 
-    <div class="flex gap-4 mt-12">
-      <div class="px-4 py-2 rounded border border-main space-y-2">
+    <div class="flex flex-col gap-4 mt-12">
+      <div class="w-full px-4 py-2 rounded border border-main space-y-2 overflow-auto h-full">
         <span class="font-bold">Form</span>
         <pre v-text="form" />
       </div>
 
-      <div class="px-4 py-2 rounded border border-main space-y-2">
+      <div class="w-full px-4 py-2 rounded border border-main space-y-2 overflow-auto h-full">
         <span class="font-bold">Wizard</span>
-        <pre v-text="wizard" />
+        <pre v-text="stepper" />
       </div>
     </div>
   </div>
diff --git a/packages/core/useStepper/index.md b/packages/core/useStepper/index.md
index b28f818dc16..990de4152f9 100644
--- a/packages/core/useStepper/index.md
+++ b/packages/core/useStepper/index.md
@@ -11,5 +11,44 @@ Provides helpers for building a multi-step wizard interface.
 ```js
 import { useStepper } from '@vueuse/core'
 
-const { current, previous, next, steps, isFirst, isLast } = useStepper()
+const {
+  /** List of steps. */
+  steps,
+  /** List of step names. */
+  stepNames,
+  /** Index of the current step. */
+  index,
+  /** Current step. */
+  current,
+  /** Next step, or undefined if the current step is the last one. */
+  next,
+  /** Previous step, or undefined if the current step is the first one. */
+  previous,
+  /** Whether the current step is the first one. */
+  isFirst,
+  /** Whether the current step is the last one. */
+  isLast,
+  /** Go to the specified step. */
+  goTo,
+  /** Go to the next step. Does nothing if the current step is the last one. */
+  goNext,
+  /** Go to the previous step. Does nothing if the current step is the previous one. */
+  goPrevious,
+  /** Go back to the given step, only if the current step is after. */
+  goBackTo,
+  /** Checks whether the given step is the next step. */
+  isNext,
+  /** Checks whether the given step is the previous step. */
+  isPrevious,
+  /** Checks whether the given step is the current step. */
+  isCurrent,
+  /** Checks if the current step is before the given step. */
+  isBefore,
+  /** Checks if the current step is after the given step. */
+  isAfter,
+} = useStepper([
+  'billing-address',
+  'terms',
+  'payment',
+])
 ```
diff --git a/packages/core/useStepper/index.test.ts b/packages/core/useStepper/index.test.ts
index 09f0c8fe052..6810b6c3258 100644
--- a/packages/core/useStepper/index.test.ts
+++ b/packages/core/useStepper/index.test.ts
@@ -5,62 +5,238 @@ describe('useStepper', () => {
     expect(useStepper).toBeDefined()
   })
 
-  it('can navigate through steps', () => {
-    const { isFirst, isLast, goToNext, goToPrevious, nextStep, previousStep, current, index, goTo, isPrevious, isNext, currentStepIs, isStepAfter, isStepBefore } = useStepper([
-      'First step',
-      'Second step',
-      'Last step',
-    ] as const)
-
-    expect(index.value).toBe(0)
-    expect(current.value).toBe('First step')
-    expect(isFirst.value).toBe(true)
-    expect(nextStep.value).toBe('Second step')
-    expect(previousStep.value).toBeUndefined()
-    expect(currentStepIs('First step')).toBe(true)
-    expect(currentStepIs('Second step')).toBe(false)
-    expect(isStepAfter('Second step')).toBe(false)
-
-    goToNext()
-    expect(index.value).toBe(1)
-    expect(current.value).toBe('Second step')
-    expect(nextStep.value).toBe('Last step')
-    expect(previousStep.value).toBe('First step')
-    expect(isPrevious('First step')).toBe(true)
-    expect(isNext('Last step')).toBe(true)
-    expect(isStepAfter('First step')).toBe(true)
-    expect(isStepBefore('First step')).toBe(false)
-    expect(isStepBefore('Last step')).toBe(true)
-
-    goToPrevious()
-    expect(index.value).toBe(0)
-    expect(current.value).toBe('First step')
-
-    goTo('Last step') // we can force a step
-    expect(nextStep.value).toBeUndefined()
-    expect(previousStep.value).toBe('Second step')
-    expect(index.value).toBe(2)
-    expect(current.value).toBe('Last step')
-    expect(isLast.value).toBe(true)
+  describe('common', () => {
+    it('does not navigate to steps that do not exist', () => {
+      const stepper = useStepper({
+        first: 'First',
+        second: 'Second',
+        last: 'Last',
+      })
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      stepper.goTo('unexisting step')
+      expect(stepper.current.value).toBe('First')
+    })
+
+    it('supports navigating through steps', () => {
+      const stepper = useStepper({
+        first: 'First',
+        second: 'Second',
+        last: 'Last',
+      })
+
+      expect(stepper.current.value).toBe('First')
+
+      // Checks that when this is the first step, we can't go back
+      stepper.goToPrevious()
+      expect(stepper.current.value).toBe('First')
+
+      // Checks that we can simply go next
+      stepper.goToNext()
+      expect(stepper.current.value).toBe('Second')
+      stepper.goToNext()
+      expect(stepper.current.value).toBe('Last')
+
+      // Checks that when this is the last step, we can't go next
+      stepper.goToNext()
+      expect(stepper.current.value).toBe('Last')
+
+      // Checks that we can go back to a previous step
+      stepper.goBackTo('second')
+      expect(stepper.current.value).toBe('Second')
+
+      // Checks that we CANNOT go back to a future step
+      stepper.goBackTo('last')
+      expect(stepper.current.value).toBe('Second')
+
+      // Checks that we can go to a any step
+      stepper.goTo('first')
+      expect(stepper.current.value).toBe('First')
+    })
+
+    it('can tell the step position', () => {
+      const stepper = useStepper({
+        first: 'First',
+        second: 'Second',
+        last: 'Last',
+      })
+
+      // First step
+      expect(stepper.isFirst.value).toBe(true)
+      expect(stepper.isLast.value).toBe(false)
+
+      expect(stepper.isAfter('first')).toBe(false)
+      expect(stepper.isAfter('second')).toBe(false)
+      expect(stepper.isAfter('last')).toBe(false)
+
+      expect(stepper.isBefore('first')).toBe(false)
+      expect(stepper.isBefore('second')).toBe(true)
+      expect(stepper.isBefore('last')).toBe(true)
+
+      expect(stepper.isCurrent('first')).toBe(true)
+      expect(stepper.isCurrent('second')).toBe(false)
+      expect(stepper.isCurrent('last')).toBe(false)
+
+      expect(stepper.isPrevious('first')).toBe(false)
+      expect(stepper.isPrevious('second')).toBe(false)
+      expect(stepper.isPrevious('last')).toBe(false)
+
+      expect(stepper.isNext('first')).toBe(false)
+      expect(stepper.isNext('second')).toBe(true)
+      expect(stepper.isNext('last')).toBe(false)
+
+      // Second step
+      stepper.goToNext()
+
+      expect(stepper.isFirst.value).toBe(false)
+      expect(stepper.isLast.value).toBe(false)
+
+      expect(stepper.isAfter('first')).toBe(true)
+      expect(stepper.isAfter('second')).toBe(false)
+      expect(stepper.isAfter('last')).toBe(false)
+
+      expect(stepper.isBefore('first')).toBe(false)
+      expect(stepper.isBefore('second')).toBe(false)
+      expect(stepper.isBefore('last')).toBe(true)
+
+      expect(stepper.isCurrent('first')).toBe(false)
+      expect(stepper.isCurrent('second')).toBe(true)
+      expect(stepper.isCurrent('last')).toBe(false)
+
+      expect(stepper.isPrevious('first')).toBe(true)
+      expect(stepper.isPrevious('second')).toBe(false)
+      expect(stepper.isPrevious('last')).toBe(false)
+
+      expect(stepper.isNext('first')).toBe(false)
+      expect(stepper.isNext('second')).toBe(false)
+      expect(stepper.isNext('last')).toBe(true)
+
+      // Last step
+      stepper.goToNext()
+
+      expect(stepper.isFirst.value).toBe(false)
+      expect(stepper.isLast.value).toBe(true)
+
+      expect(stepper.isAfter('first')).toBe(true)
+      expect(stepper.isAfter('second')).toBe(true)
+      expect(stepper.isAfter('last')).toBe(false)
+
+      expect(stepper.isBefore('first')).toBe(false)
+      expect(stepper.isBefore('second')).toBe(false)
+      expect(stepper.isBefore('last')).toBe(false)
+
+      expect(stepper.isCurrent('first')).toBe(false)
+      expect(stepper.isCurrent('second')).toBe(false)
+      expect(stepper.isCurrent('last')).toBe(true)
+
+      expect(stepper.isPrevious('first')).toBe(false)
+      expect(stepper.isPrevious('second')).toBe(true)
+      expect(stepper.isPrevious('last')).toBe(false)
+
+      expect(stepper.isNext('first')).toBe(false)
+      expect(stepper.isNext('second')).toBe(false)
+      expect(stepper.isNext('last')).toBe(false)
+    })
   })
 
-  it('can use objects as steps', () => {
-    const { goToNext, index, current } = useStepper([
-      { id: 1, label: 'First step' },
-      { id: 2, label: 'Second step' },
-      { id: 3, label: 'Third step' },
-    ])
+  describe('as array', () => {
+    it('supports being initialized with a specific step', () => {
+      const stepper = useStepper([
+        'First step',
+        'Second step',
+        'Last step',
+      ], 'Last step')
+
+      expect(stepper.current.value).toBe('Last step')
+      expect(stepper.isCurrent('Last step')).toBeTruthy()
+    })
+
+    it('support type-specific features', () => {
+      const stepper = useStepper([
+        'First step',
+        'Second step',
+        'Last step',
+      ])
+
+      expect(stepper.stepNames).toEqual(['First step', 'Second step', 'Last step'])
+      expect(stepper.steps).toEqual(['First step', 'Second step', 'Last step'])
+    })
+
+    it('can get a step at a specific index', () => {
+      const stepper = useStepper([
+        'First step',
+        'Second step',
+        'Last step',
+      ])
+
+      expect(stepper.at(0)).toBe('First step')
+      expect(stepper.at(1)).toBe('Second step')
+      expect(stepper.at(2)).toBe('Last step')
+    })
+
+    it('can get a step by its name', () => {
+      const stepper = useStepper([
+        'First step',
+        'Second step',
+        'Last step',
+      ])
+
+      expect(stepper.get('First step')).toBe('First step')
+      expect(stepper.get('Second step')).toBe('Second step')
+      expect(stepper.get('Last step')).toBe('Last step')
+    })
+  })
+
+  describe('as object', () => {
+    it('supports being initialized with a specific step', () => {
+      const stepper = useStepper({
+        first: 'First',
+        second: 'Second',
+        last: 'Last',
+      }, 'second')
+
+      expect(stepper.current.value).toBe('Second')
+      expect(stepper.isCurrent('second')).toBeTruthy()
+    })
+
+    it('support type-specific features', () => {
+      const stepper = useStepper({
+        first: 'First',
+        second: 'Second',
+        last: 'Last',
+      })
+
+      expect(stepper.stepNames).toEqual(['first', 'second', 'last'])
+      expect(stepper.steps).toEqual({
+        first: 'First',
+        second: 'Second',
+        last: 'Last',
+      })
+    })
+
+    it('can get a step at a specific index', () => {
+      const stepper = useStepper({
+        first: 'First',
+        second: 'Second',
+        last: 'Last',
+      })
 
-    expect(index.value).toBe(0)
-    expect(current.value).toMatchObject({ id: 1, label: 'First step' })
+      expect(stepper.at(0)).toBe('First')
+      expect(stepper.at(1)).toBe('Second')
+      expect(stepper.at(2)).toBe('Last')
+    })
 
-    goToNext()
-    expect(index.value).toBe(1)
-    expect(current.value).toMatchObject({ id: 2, label: 'Second step' })
+    it('can get a step by its name', () => {
+      const stepper = useStepper({
+        first: 'First',
+        second: 'Second',
+        last: 'Last',
+      })
 
-    goToNext()
-    goToNext()
-    expect(index.value).toBe(2)
-    expect(current.value).toMatchObject({ id: 3, label: 'Third step' })
+      expect(stepper.get('first')).toBe('First')
+      expect(stepper.get('second')).toBe('Second')
+      expect(stepper.get('last')).toBe('Last')
+    })
   })
 })
diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index 63d62ac14b9..20a848c7b2b 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -1,15 +1,77 @@
+import type { ComputedRef, Ref } from 'vue-demi'
 import { computed, ref } from 'vue-demi'
 
-export function useStepper<T>(steps: readonly T[], initial?: T) {
-  const index = ref(steps.indexOf(initial ?? steps[0]))
-  const current = computed(() => steps[index.value])
+type Primitive = string | number
+
+interface UseStepperReturn<StepName, Steps, Step> {
+  /** List of steps. */
+  steps: Readonly<Steps>
+  /** List of step names. */
+  stepNames: readonly 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 function useStepper<T extends Primitive>(steps: T[], initialStep?: T): UseStepperReturn<T, T[], T>
+export function useStepper<T extends Record<string, any>>(steps: T, initialStep?: keyof T): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
+export function useStepper<T, K>(steps: T, initialStep?: K) {
+  const stepNames: any[] = Array.isArray(steps) ? steps : Object.keys(steps)
+  const index = ref(stepNames.indexOf(initialStep ?? stepNames[0]))
+  const current = computed(() => at(index.value))
   const isFirst = computed(() => index.value === 0)
-  const isLast = computed(() => index.value === steps.length - 1)
-  const nextStep = computed<T | undefined>(() => steps[index.value + 1])
-  const previousStep = computed<T | undefined>(() => steps[index.value - 1])
+  const isLast = computed(() => index.value === stepNames.length - 1)
+  const next = computed(() => stepNames[index.value + 1])
+  const previous = computed(() => stepNames[index.value - 1])
 
-  function goTo(step: T) {
-    index.value = steps.indexOf(step)
+  function at(index: number) {
+    if (Array.isArray(steps))
+      return steps[index]
+
+    return (steps as any)[stepNames[index]]
+  }
+
+  function get(step: any) {
+    if (!stepNames.includes(step))
+      return
+
+    return at(stepNames.indexOf(step))
+  }
+
+  function goTo(step: any) {
+    if (stepNames.includes(step))
+      index.value = stepNames.indexOf(step)
   }
 
   function goToNext() {
@@ -26,56 +88,50 @@ export function useStepper<T>(steps: readonly T[], initial?: T) {
     index.value--
   }
 
-  /**
-   * Checks if the given step is the step just after the current step.
-   */
-  function isNext(step: T) {
-    return steps.indexOf(step) === index.value + 1
+  function goBackTo(step: any) {
+    if (isAfter(step))
+      goTo(step)
+  }
+
+  function isNext(step: any) {
+    return stepNames.indexOf(step) === index.value + 1
   }
 
-  /**
-   * Checks if the given step is the step just before the current step.
-   */
-  function isPrevious(step: T) {
-    return steps.indexOf(step) === index.value - 1
+  function isPrevious(step: any) {
+    return stepNames.indexOf(step) === index.value - 1
   }
 
-  /**
-   * Checks if the current step is the same as the given step.
-   */
-  function currentStepIs(step: T) {
-    return steps.indexOf(step) === index.value
+  function isCurrent(step: any) {
+    return stepNames.indexOf(step) === index.value
   }
 
-  /**
-   * Checks if the current step is after given step.
-   */
-  function isStepAfter(step: T) {
-    return index.value > steps.indexOf(step)
+  function isBefore(step: any) {
+    return index.value < stepNames.indexOf(step)
   }
 
-  /**
-   * Checks if the current step is before given step.
-   */
-  function isStepBefore(step: T) {
-    return index.value < steps.indexOf(step)
+  function isAfter(step: any) {
+    return index.value > stepNames.indexOf(step)
   }
 
   return {
-    goTo,
-    current,
-    index,
-    goToNext,
-    goToPrevious,
     steps,
-    currentStepIs,
-    isStepAfter,
-    isStepBefore,
+    stepNames,
+    index,
+    current,
+    next,
+    previous,
     isFirst,
     isLast,
+    at,
+    get,
+    goTo,
+    goToNext,
+    goToPrevious,
+    goBackTo,
     isNext,
     isPrevious,
-    nextStep,
-    previousStep,
+    isCurrent,
+    isBefore,
+    isAfter,
   }
 }

From 71d8ace4dac3950c660f2a965d8459ded0869746 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Tue, 5 Jul 2022 20:35:54 +0200
Subject: [PATCH 09/12] feat: support reactive steps

---
 packages/core/useStepper/demo.vue      |  2 +-
 packages/core/useStepper/index.test.ts | 29 +++++++++++++---
 packages/core/useStepper/index.ts      | 48 ++++++++++++++------------
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/packages/core/useStepper/demo.vue b/packages/core/useStepper/demo.vue
index 9b7276f5b09..8b1676fa0e0 100644
--- a/packages/core/useStepper/demo.vue
+++ b/packages/core/useStepper/demo.vue
@@ -45,7 +45,7 @@ function allStepsBeforeAreValid(index: number): boolean {
 <template>
   <div>
     <div class="flex gap-2 justify-center">
-      <div v-for="(step, id, i) in stepper.steps" :key="id" class="">
+      <div v-for="(step, id, i) in stepper.steps.value" :key="id" class="">
         <button
           :disabled="!allStepsBeforeAreValid(i) && stepper.isBefore(id)"
           @click="stepper.goTo(id)"
diff --git a/packages/core/useStepper/index.test.ts b/packages/core/useStepper/index.test.ts
index 6810b6c3258..c8ecf6262c3 100644
--- a/packages/core/useStepper/index.test.ts
+++ b/packages/core/useStepper/index.test.ts
@@ -1,3 +1,4 @@
+import { reactive, ref } from 'vue-demi'
 import { useStepper } from '.'
 
 describe('useStepper', () => {
@@ -6,6 +7,26 @@ describe('useStepper', () => {
   })
 
   describe('common', () => {
+    test('steps are reactive', () => {
+      const flag = ref(true)
+      const steps = reactive({
+        first: {
+          title: 'First',
+          enabled: flag,
+        },
+        second: {
+          title: 'Second',
+          enabled: flag,
+        },
+      })
+
+      const stepper = useStepper(steps)
+
+      expect(stepper.current.value.enabled).toBe(true)
+      flag.value = false
+      expect(stepper.current.value.enabled).toBe(false)
+    })
+
     it('does not navigate to steps that do not exist', () => {
       const stepper = useStepper({
         first: 'First',
@@ -159,8 +180,8 @@ describe('useStepper', () => {
         'Last step',
       ])
 
-      expect(stepper.stepNames).toEqual(['First step', 'Second step', 'Last step'])
-      expect(stepper.steps).toEqual(['First step', 'Second step', 'Last step'])
+      expect(stepper.stepNames.value).toEqual(['First step', 'Second step', 'Last step'])
+      expect(stepper.steps.value).toEqual(['First step', 'Second step', 'Last step'])
     })
 
     it('can get a step at a specific index', () => {
@@ -207,8 +228,8 @@ describe('useStepper', () => {
         last: 'Last',
       })
 
-      expect(stepper.stepNames).toEqual(['first', 'second', 'last'])
-      expect(stepper.steps).toEqual({
+      expect(stepper.stepNames.value).toEqual(['first', 'second', 'last'])
+      expect(stepper.steps.value).toEqual({
         first: 'First',
         second: 'Second',
         last: 'Last',
diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index 20a848c7b2b..c198226ac18 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -1,3 +1,4 @@
+import type { MaybeRef } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue-demi'
 import { computed, ref } from 'vue-demi'
 
@@ -5,9 +6,9 @@ type Primitive = string | number
 
 interface UseStepperReturn<StepName, Steps, Step> {
   /** List of steps. */
-  steps: Readonly<Steps>
+  steps: Readonly<Ref<Steps>>
   /** List of step names. */
-  stepNames: readonly StepName[]
+  stepNames: Readonly<Ref<StepName[]>>
   /** Index of the current step. */
   index: Ref<number>
   /** Current step. */
@@ -44,34 +45,35 @@ interface UseStepperReturn<StepName, Steps, Step> {
   isAfter: (step: StepName) => boolean
 }
 
-export function useStepper<T extends Primitive>(steps: T[], initialStep?: T): UseStepperReturn<T, T[], T>
-export function useStepper<T extends Record<string, any>>(steps: T, initialStep?: keyof T): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
-export function useStepper<T, K>(steps: T, initialStep?: K) {
-  const stepNames: any[] = Array.isArray(steps) ? steps : Object.keys(steps)
-  const index = ref(stepNames.indexOf(initialStep ?? stepNames[0]))
+export function useStepper<T extends Primitive>(steps: MaybeRef<T[]>, initialStep?: T): UseStepperReturn<T, T[], T>
+export function useStepper<T extends Record<string, any>>(steps: MaybeRef<T>, initialStep?: keyof T): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
+export function useStepper(steps: any, initialStep?: any): UseStepperReturn<any, any, any> {
+  const stepsRef = ref<any[]>(steps)
+  const stepNames = computed<any[]>(() => Array.isArray(stepsRef.value) ? stepsRef.value : Object.keys(stepsRef.value))
+  const index = ref(stepNames.value.indexOf(initialStep ?? stepNames.value[0]))
   const current = computed(() => at(index.value))
   const isFirst = computed(() => index.value === 0)
-  const isLast = computed(() => index.value === stepNames.length - 1)
-  const next = computed(() => stepNames[index.value + 1])
-  const previous = computed(() => stepNames[index.value - 1])
+  const isLast = computed(() => index.value === stepNames.value.length - 1)
+  const next = computed(() => stepNames.value[index.value + 1])
+  const previous = computed(() => stepNames.value[index.value - 1])
 
   function at(index: number) {
-    if (Array.isArray(steps))
-      return steps[index]
+    if (Array.isArray(stepsRef.value))
+      return stepsRef.value[index]
 
-    return (steps as any)[stepNames[index]]
+    return stepsRef.value[stepNames.value[index]]
   }
 
   function get(step: any) {
-    if (!stepNames.includes(step))
+    if (!stepNames.value.includes(step))
       return
 
-    return at(stepNames.indexOf(step))
+    return at(stepNames.value.indexOf(step))
   }
 
   function goTo(step: any) {
-    if (stepNames.includes(step))
-      index.value = stepNames.indexOf(step)
+    if (stepNames.value.includes(step))
+      index.value = stepNames.value.indexOf(step)
   }
 
   function goToNext() {
@@ -94,27 +96,27 @@ export function useStepper<T, K>(steps: T, initialStep?: K) {
   }
 
   function isNext(step: any) {
-    return stepNames.indexOf(step) === index.value + 1
+    return stepNames.value.indexOf(step) === index.value + 1
   }
 
   function isPrevious(step: any) {
-    return stepNames.indexOf(step) === index.value - 1
+    return stepNames.value.indexOf(step) === index.value - 1
   }
 
   function isCurrent(step: any) {
-    return stepNames.indexOf(step) === index.value
+    return stepNames.value.indexOf(step) === index.value
   }
 
   function isBefore(step: any) {
-    return index.value < stepNames.indexOf(step)
+    return index.value < stepNames.value.indexOf(step)
   }
 
   function isAfter(step: any) {
-    return index.value > stepNames.indexOf(step)
+    return index.value > stepNames.value.indexOf(step)
   }
 
   return {
-    steps,
+    steps: stepsRef,
     stepNames,
     index,
     current,

From ad71d6b3040150983804476fa856172926c5ba57 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Wed, 6 Jul 2022 12:03:01 +0200
Subject: [PATCH 10/12] chore: minor cleanup

---
 packages/core/useStepper/index.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index c198226ac18..fc928544031 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -2,9 +2,7 @@ import type { MaybeRef } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue-demi'
 import { computed, ref } from 'vue-demi'
 
-type Primitive = string | number
-
-interface UseStepperReturn<StepName, Steps, Step> {
+export interface UseStepperReturn<StepName, Steps, Step> {
   /** List of steps. */
   steps: Readonly<Ref<Steps>>
   /** List of step names. */
@@ -45,7 +43,7 @@ interface UseStepperReturn<StepName, Steps, Step> {
   isAfter: (step: StepName) => boolean
 }
 
-export function useStepper<T extends Primitive>(steps: MaybeRef<T[]>, initialStep?: T): UseStepperReturn<T, T[], T>
+export function useStepper<T extends string | number>(steps: MaybeRef<T[]>, initialStep?: T): UseStepperReturn<T, T[], T>
 export function useStepper<T extends Record<string, any>>(steps: MaybeRef<T>, initialStep?: keyof T): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
 export function useStepper(steps: any, initialStep?: any): UseStepperReturn<any, any, any> {
   const stepsRef = ref<any[]>(steps)

From 3fd7bfa64fb7a5d814754ddc35ff70e513c169f3 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Wed, 6 Jul 2022 12:04:06 +0200
Subject: [PATCH 11/12] chore: remove comments on example

---
 packages/core/useStepper/index.md | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/packages/core/useStepper/index.md b/packages/core/useStepper/index.md
index 990de4152f9..ffd4dc7f8fd 100644
--- a/packages/core/useStepper/index.md
+++ b/packages/core/useStepper/index.md
@@ -12,39 +12,22 @@ Provides helpers for building a multi-step wizard interface.
 import { useStepper } from '@vueuse/core'
 
 const {
-  /** List of steps. */
   steps,
-  /** List of step names. */
   stepNames,
-  /** Index of the current step. */
   index,
-  /** Current step. */
   current,
-  /** Next step, or undefined if the current step is the last one. */
   next,
-  /** Previous step, or undefined if the current step is the first one. */
   previous,
-  /** Whether the current step is the first one. */
   isFirst,
-  /** Whether the current step is the last one. */
   isLast,
-  /** Go to the specified step. */
   goTo,
-  /** Go to the next step. Does nothing if the current step is the last one. */
   goNext,
-  /** Go to the previous step. Does nothing if the current step is the previous one. */
   goPrevious,
-  /** Go back to the given step, only if the current step is after. */
   goBackTo,
-  /** Checks whether the given step is the next step. */
   isNext,
-  /** Checks whether the given step is the previous step. */
   isPrevious,
-  /** Checks whether the given step is the current step. */
   isCurrent,
-  /** Checks if the current step is before the given step. */
   isBefore,
-  /** Checks if the current step is after the given step. */
   isAfter,
 } = useStepper([
   'billing-address',

From 5262bd68885aa240db7c8f1798930a566f6a7167 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Wed, 6 Jul 2022 12:26:52 +0200
Subject: [PATCH 12/12] chore: update example with object declaration

---
 packages/core/useStepper/index.md | 47 +++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/core/useStepper/index.md b/packages/core/useStepper/index.md
index ffd4dc7f8fd..a813296b8d3 100644
--- a/packages/core/useStepper/index.md
+++ b/packages/core/useStepper/index.md
@@ -8,6 +8,8 @@ Provides helpers for building a multi-step wizard interface.
 
 ## Usage
 
+### Steps as array
+
 ```js
 import { useStepper } from '@vueuse/core'
 
@@ -34,4 +36,49 @@ const {
   '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,
+  goNext,
+  goPrevious,
+  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'
 ```