From 080a77b15c4c27c080808129ceb0beb3bc6638fd Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Fri, 12 Apr 2024 18:09:03 -0400
Subject: [PATCH 1/7] Click previous step headers to go directly to that step.

---
 src/components/Wizard/PWizardHeaders.vue    | 18 ++++++++++++++++--
 src/components/Wizard/PWizardStepHeader.vue |  4 ++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/Wizard/PWizardHeaders.vue b/src/components/Wizard/PWizardHeaders.vue
index c82798c42..edacce2e3 100644
--- a/src/components/Wizard/PWizardHeaders.vue
+++ b/src/components/Wizard/PWizardHeaders.vue
@@ -8,6 +8,7 @@
           :current="index === currentStepIndex"
           :loading="loading && index === currentStepIndex"
           :complete="index < currentStepIndex"
+          @click="handleStepHeaderClick(index)"
         >
           <template #default="data">
             <slot :name="`${getStepKey(step)}-heading`" v-bind="data" />
@@ -20,12 +21,13 @@
 
 <script lang="ts" setup>
   import { useChildrenAreWrapped } from '@prefecthq/vue-compositions'
-  import { computed, ref } from 'vue'
+  import { computed, ref, inject } from 'vue'
   import PWizardStepHeader from '@/components/Wizard/PWizardStepHeader.vue'
+  import { useWizardKey } from '@/compositions'
   import { WizardStep } from '@/types/wizard'
   import { getStepKey } from '@/utilities/wizard'
 
-  defineProps<{
+  const props = defineProps<{
     steps: WizardStep[],
     currentStepIndex: number,
     loading: boolean,
@@ -35,6 +37,18 @@
   const children = ref<HTMLSpanElement[]>([])
   const wrapped = useChildrenAreWrapped(children, container)
 
+  const wizard = inject(useWizardKey)
+  if (!wizard) {
+    throw new Error('PWizardHeaders must be used within a PWizard')
+  }
+
+  function handleStepHeaderClick(index: number): void {
+    if (index >= props.currentStepIndex) {
+      return
+    }
+    wizard?.goto(index + 1)
+  }
+
   const classes = computed(() => ({
     container: {
       'p-wizard-headers--wrapped': wrapped.value,
diff --git a/src/components/Wizard/PWizardStepHeader.vue b/src/components/Wizard/PWizardStepHeader.vue
index 0997aedc2..dd7922450 100644
--- a/src/components/Wizard/PWizardStepHeader.vue
+++ b/src/components/Wizard/PWizardStepHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-wizard-step-header" :class="classes">
+  <button class="p-wizard-step-header" :class="classes" type="button">
     <div class="p-wizard-step-header__index">
       <template v-if="complete">
         <PIcon icon="CheckIcon" />
@@ -16,7 +16,7 @@
         {{ step.title }}
       </slot>
     </div>
-  </div>
+  </button>
 </template>
 
 <script lang="ts" setup>

From 5f625d4c90abf81dbf3d9ecfde8de9dc860fad5b Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Fri, 12 Apr 2024 18:09:49 -0400
Subject: [PATCH 2/7] Add nonlinear prop.

---
 demo/sections/components/Wizard.vue      | 8 +++++++-
 src/components/Wizard/PWizard.vue        | 2 ++
 src/components/Wizard/PWizardHeaders.vue | 3 ++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/demo/sections/components/Wizard.vue b/demo/sections/components/Wizard.vue
index 13baa044d..852148279 100644
--- a/demo/sections/components/Wizard.vue
+++ b/demo/sections/components/Wizard.vue
@@ -1,7 +1,11 @@
 <template>
   <ComponentPage title="Wizard" :demos="[{ title: 'Wizard' }]">
+    <template #description>
+      <p-checkbox v-model="nonlinear" label="Nonlinear" />
+    </template>
+
     <template #wizard>
-      <p-wizard :steps="steps" @next="next" @submit="submit">
+      <p-wizard :steps="steps" :nonlinear @next="next" @submit="submit">
         <template #basic-information>
           <StepOne v-model="formData.favoriteColor" />
         </template>
@@ -24,6 +28,8 @@
   import StepThree from '@/demo/components/wizard/StepThree.vue'
   import StepTwo from '@/demo/components/wizard/StepTwo.vue'
 
+  const nonlinear = ref(false)
+
   const steps: WizardStep[] = [
     { title: 'Basic Information' },
     { title: 'Terms and Conditions' },
diff --git a/src/components/Wizard/PWizard.vue b/src/components/Wizard/PWizard.vue
index b008d1f14..096fcf659 100644
--- a/src/components/Wizard/PWizard.vue
+++ b/src/components/Wizard/PWizard.vue
@@ -5,6 +5,7 @@
         :steps="steps"
         :loading="loading"
         :current-step-index="currentStepIndex"
+        :nonlinear
       />
     </PCard>
 
@@ -55,6 +56,7 @@
     steps: WizardStep[],
     showCancel?: boolean,
     lastStepText?: string,
+    nonlinear?: boolean,
   }>(), {
     lastStepText: 'Submit',
   })
diff --git a/src/components/Wizard/PWizardHeaders.vue b/src/components/Wizard/PWizardHeaders.vue
index edacce2e3..7de9ab165 100644
--- a/src/components/Wizard/PWizardHeaders.vue
+++ b/src/components/Wizard/PWizardHeaders.vue
@@ -31,6 +31,7 @@
     steps: WizardStep[],
     currentStepIndex: number,
     loading: boolean,
+    nonlinear?: boolean,
   }>()
 
   const container = ref<HTMLDivElement>()
@@ -43,7 +44,7 @@
   }
 
   function handleStepHeaderClick(index: number): void {
-    if (index >= props.currentStepIndex) {
+    if (!props.nonlinear && index >= props.currentStepIndex) {
       return
     }
     wizard?.goto(index + 1)

From 82e3b53afc7029a9e58c03fe69ff3c012c942b2e Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Mon, 15 Apr 2024 12:45:58 -0400
Subject: [PATCH 3/7] Add save and exit button to wizard.

---
 demo/sections/components/Wizard.vue |  4 +++-
 src/components/Wizard/PWizard.vue   | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/demo/sections/components/Wizard.vue b/demo/sections/components/Wizard.vue
index 852148279..23d6902de 100644
--- a/demo/sections/components/Wizard.vue
+++ b/demo/sections/components/Wizard.vue
@@ -2,10 +2,11 @@
   <ComponentPage title="Wizard" :demos="[{ title: 'Wizard' }]">
     <template #description>
       <p-checkbox v-model="nonlinear" label="Nonlinear" />
+      <p-checkbox v-model="showSaveAndExit" label="Show Save & Exit" />
     </template>
 
     <template #wizard>
-      <p-wizard :steps="steps" :nonlinear @next="next" @submit="submit">
+      <p-wizard :steps :nonlinear :show-save-and-exit @next="next" @submit="submit">
         <template #basic-information>
           <StepOne v-model="formData.favoriteColor" />
         </template>
@@ -29,6 +30,7 @@
   import StepTwo from '@/demo/components/wizard/StepTwo.vue'
 
   const nonlinear = ref(false)
+  const showSaveAndExit = ref(false)
 
   const steps: WizardStep[] = [
     { title: 'Basic Information' },
diff --git a/src/components/Wizard/PWizard.vue b/src/components/Wizard/PWizard.vue
index 096fcf659..ad523f326 100644
--- a/src/components/Wizard/PWizard.vue
+++ b/src/components/Wizard/PWizard.vue
@@ -35,6 +35,13 @@
           <p-button primary :loading="loading" @click="handleNextButtonClick">
             {{ nextButtonText }}
           </p-button>
+
+          <template v-if="showSaveAndExit && !isOnLastStep">
+            <span class="border-l border-divider mx-2" />
+            <p-button @click="saveAndExit">
+              Save & Exit
+            </p-button>
+          </template>
         </slot>
       </div>
       <slot name="footer" />
@@ -57,6 +64,7 @@
     showCancel?: boolean,
     lastStepText?: string,
     nonlinear?: boolean,
+    showSaveAndExit?: boolean,
   }>(), {
     lastStepText: 'Submit',
   })
@@ -124,6 +132,15 @@
     }
   }
 
+  async function saveAndExit(): Promise<void> {
+    const { success } = await next()
+
+    if (success) {
+      emit('next')
+      emit('submit')
+    }
+  }
+
   function setLoading(value: boolean): void {
     loading.value = value
   }

From d8224a1ad8e67b1b971b111c3d790afc88b86a68 Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Mon, 15 Apr 2024 12:49:48 -0400
Subject: [PATCH 4/7] Change primary button to save & exit if visible.

---
 src/components/Wizard/PWizard.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Wizard/PWizard.vue b/src/components/Wizard/PWizard.vue
index ad523f326..b81f71b80 100644
--- a/src/components/Wizard/PWizard.vue
+++ b/src/components/Wizard/PWizard.vue
@@ -32,13 +32,13 @@
           <p-button :disabled="isOnFirstStep" @click="handlePreviousButtonClick">
             Previous
           </p-button>
-          <p-button primary :loading="loading" @click="handleNextButtonClick">
+          <p-button :primary="!showingExtraActions" :loading="loading" @click="handleNextButtonClick">
             {{ nextButtonText }}
           </p-button>
 
-          <template v-if="showSaveAndExit && !isOnLastStep">
+          <template v-if="showingExtraActions">
             <span class="border-l border-divider mx-2" />
-            <p-button @click="saveAndExit">
+            <p-button primary @click="saveAndExit">
               Save & Exit
             </p-button>
           </template>
@@ -108,6 +108,8 @@
 
   const nextButtonText = computed(() => isOnLastStep.value ? props.lastStepText : 'Next')
 
+  const showingExtraActions = computed(() => props.showSaveAndExit && !isOnLastStep.value)
+
   async function handlePreviousButtonClick(): Promise<void> {
     const { success } = await previous()
 

From 3ef1b27b4deb738eaeffd6bb0660aa87a9a24f71 Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Tue, 16 Apr 2024 09:53:40 -0400
Subject: [PATCH 5/7] Renaming - breakout composition for useWizard.

---
 src/components/Wizard/PWizard.vue        |  4 ++--
 src/components/Wizard/PWizardHeaders.vue | 11 ++++-------
 src/compositions/wizard/useWizard.ts     | 13 +++++++++++--
 src/compositions/wizard/useWizardStep.ts | 18 ++++--------------
 src/models/wizard/wizardNotFound.ts      |  2 +-
 5 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/components/Wizard/PWizard.vue b/src/components/Wizard/PWizard.vue
index b81f71b80..9a29e6e71 100644
--- a/src/components/Wizard/PWizard.vue
+++ b/src/components/Wizard/PWizard.vue
@@ -55,7 +55,7 @@
   import PCard from '@/components/Card/PCard.vue'
   import PWizardHeaders from '@/components/Wizard/PWizardHeaders.vue'
   import PWizardStep from '@/components/Wizard/PWizardStep.vue'
-  import { useWizard } from '@/compositions/wizard'
+  import { createWizard } from '@/compositions/wizard'
   import { WizardStep } from '@/types/wizard'
   import { getStepKey } from '@/utilities/wizard'
 
@@ -86,7 +86,7 @@
     getStep,
     setStep,
     isValid,
-  } = useWizard(props.steps)
+  } = createWizard(props.steps)
 
   defineExpose({
     steps,
diff --git a/src/components/Wizard/PWizardHeaders.vue b/src/components/Wizard/PWizardHeaders.vue
index 7de9ab165..078f0967f 100644
--- a/src/components/Wizard/PWizardHeaders.vue
+++ b/src/components/Wizard/PWizardHeaders.vue
@@ -21,9 +21,9 @@
 
 <script lang="ts" setup>
   import { useChildrenAreWrapped } from '@prefecthq/vue-compositions'
-  import { computed, ref, inject } from 'vue'
+  import { computed, ref } from 'vue'
   import PWizardStepHeader from '@/components/Wizard/PWizardStepHeader.vue'
-  import { useWizardKey } from '@/compositions'
+  import { useWizard } from '@/compositions'
   import { WizardStep } from '@/types/wizard'
   import { getStepKey } from '@/utilities/wizard'
 
@@ -38,16 +38,13 @@
   const children = ref<HTMLSpanElement[]>([])
   const wrapped = useChildrenAreWrapped(children, container)
 
-  const wizard = inject(useWizardKey)
-  if (!wizard) {
-    throw new Error('PWizardHeaders must be used within a PWizard')
-  }
+  const wizard = useWizard()
 
   function handleStepHeaderClick(index: number): void {
     if (!props.nonlinear && index >= props.currentStepIndex) {
       return
     }
-    wizard?.goto(index + 1)
+    wizard.goto(index + 1)
   }
 
   const classes = computed(() => ({
diff --git a/src/compositions/wizard/useWizard.ts b/src/compositions/wizard/useWizard.ts
index 4cc85a3a6..321b5d15a 100644
--- a/src/compositions/wizard/useWizard.ts
+++ b/src/compositions/wizard/useWizard.ts
@@ -1,11 +1,12 @@
 /* eslint-disable no-redeclare */
-import { computed, InjectionKey, provide, Ref, ref } from 'vue'
+import { computed, inject, InjectionKey, provide, Ref, ref } from 'vue'
+import { WizardNotFound } from '@/models'
 import { WizardStep, UseWizard, ValidationState, WizardNavigation } from '@/types/wizard'
 import { getStepKey } from '@/utilities/wizard'
 
 export const useWizardKey: InjectionKey<UseWizard> = Symbol('UseWizard')
 
-export function useWizard(steps: WizardStep[] | Ref<WizardStep[]>): UseWizard {
+export function createWizard(steps: WizardStep[] | Ref<WizardStep[]>): UseWizard {
   const loading = ref(false)
   const stepsRef = ref(steps)
   const currentStepIndex = ref(0)
@@ -150,5 +151,13 @@ export function useWizard(steps: WizardStep[] | Ref<WizardStep[]>): UseWizard {
 
   provide(useWizardKey, wizard)
 
+  return wizard
+}
+
+export function useWizard(): UseWizard {
+  const wizard = inject(useWizardKey)
+  if (!wizard) {
+    throw new WizardNotFound()
+  }
   return wizard
 }
\ No newline at end of file
diff --git a/src/compositions/wizard/useWizardStep.ts b/src/compositions/wizard/useWizardStep.ts
index 1e4c2b18b..b6607d7b5 100644
--- a/src/compositions/wizard/useWizardStep.ts
+++ b/src/compositions/wizard/useWizardStep.ts
@@ -1,8 +1,8 @@
 /* eslint-disable no-redeclare */
 import { inject, InjectionKey, ref, Ref, computed } from 'vue'
-import { useWizardKey } from '@/compositions/wizard/useWizard'
-import { WizardNotFound, WizardStepNotFound } from '@/models/wizard'
-import { UseWizard, UseWizardStep, WizardStepValidator } from '@/types/wizard'
+import { useWizard } from '@/compositions/wizard/useWizard'
+import { WizardStepNotFound } from '@/models/wizard'
+import { UseWizardStep, WizardStepValidator } from '@/types/wizard'
 
 export const useWizardStepKey: InjectionKey<UseWizardStep> = Symbol('UseWizardStep')
 
@@ -17,19 +17,9 @@ export function useWizardStep(key?: string | Ref<string>): UseWizardStep {
     return step
   }
 
-  const wizard = getWizard()
+  const wizard = useWizard()
   const keyRef = ref(key)
 
-  function getWizard(): UseWizard {
-    const wizardOrUndefined = inject(useWizardKey)
-
-    if (!wizardOrUndefined) {
-      throw new WizardNotFound()
-    }
-
-    return wizardOrUndefined
-  }
-
   const step = computed(() => {
     const value = wizard.getStep(keyRef.value)
 
diff --git a/src/models/wizard/wizardNotFound.ts b/src/models/wizard/wizardNotFound.ts
index e9bac111f..eda967e2f 100644
--- a/src/models/wizard/wizardNotFound.ts
+++ b/src/models/wizard/wizardNotFound.ts
@@ -1,5 +1,5 @@
 export class WizardNotFound extends Error {
   public constructor() {
-    super('Wizard not found. Are you sure the component calling useWizardStep() exists within a <p-wizard>?')
+    super('Wizard not found. Are you sure the component calling useWizard() exists within a <p-wizard>?')
   }
 }
\ No newline at end of file

From 0bfbed07c160013d46166c0513bdaa861ea3e7e5 Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Tue, 16 Apr 2024 10:09:15 -0400
Subject: [PATCH 6/7] Add furthest step for easier backtracking through
 previously completed steps.

---
 src/components/Wizard/PWizardHeaders.vue |  2 +-
 src/compositions/wizard/useWizard.ts     | 12 +++++++-----
 src/types/wizard.ts                      |  1 +
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Wizard/PWizardHeaders.vue b/src/components/Wizard/PWizardHeaders.vue
index 078f0967f..c93d01ac1 100644
--- a/src/components/Wizard/PWizardHeaders.vue
+++ b/src/components/Wizard/PWizardHeaders.vue
@@ -41,7 +41,7 @@
   const wizard = useWizard()
 
   function handleStepHeaderClick(index: number): void {
-    if (!props.nonlinear && index >= props.currentStepIndex) {
+    if (!props.nonlinear && index > wizard.furthestStepIndex.value) {
       return
     }
     wizard.goto(index + 1)
diff --git a/src/compositions/wizard/useWizard.ts b/src/compositions/wizard/useWizard.ts
index 321b5d15a..c6e76e2a8 100644
--- a/src/compositions/wizard/useWizard.ts
+++ b/src/compositions/wizard/useWizard.ts
@@ -10,6 +10,7 @@ export function createWizard(steps: WizardStep[] | Ref<WizardStep[]>): UseWizard
   const loading = ref(false)
   const stepsRef = ref(steps)
   const currentStepIndex = ref(0)
+  const furthestStepIndex = ref(0)
   const currentStep = computed(() => stepsRef.value[currentStepIndex.value])
 
   function next(): Promise<WizardNavigation> {
@@ -58,17 +59,17 @@ export function createWizard(steps: WizardStep[] | Ref<WizardStep[]>): UseWizard
   }
 
   function setCurrentStepIndex(index: number): void {
+    let newIndex = index
     if (index < 0) {
-      currentStepIndex.value = 0
-      return
+      newIndex = 0
     }
 
     if (index >= stepsRef.value.length) {
-      currentStepIndex.value = stepsRef.value.length - 1
-      return
+      newIndex = stepsRef.value.length - 1
     }
 
-    currentStepIndex.value = index
+    currentStepIndex.value = newIndex
+    furthestStepIndex.value = Math.max(furthestStepIndex.value, newIndex)
   }
 
   function getZeroBasedIndex(index: number): number {
@@ -139,6 +140,7 @@ export function createWizard(steps: WizardStep[] | Ref<WizardStep[]>): UseWizard
     steps: stepsRef,
     currentStepIndex,
     currentStep,
+    furthestStepIndex,
     loading,
     next,
     previous,
diff --git a/src/types/wizard.ts b/src/types/wizard.ts
index b2ecaf8f3..8e19919a4 100644
--- a/src/types/wizard.ts
+++ b/src/types/wizard.ts
@@ -18,6 +18,7 @@ export type UseWizard = {
   steps: Ref<WizardStep[]>,
   currentStepIndex: Ref<number>,
   currentStep: Ref<WizardStep | undefined>,
+  furthestStepIndex: Ref<number>,
   loading: Ref<boolean>,
   next: () => Promise<WizardNavigation>,
   previous: () => Promise<WizardNavigation>,

From 3ae1a70d9ae4b83d4608e5150bf4bbb33c25a961 Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Tue, 16 Apr 2024 10:12:40 -0400
Subject: [PATCH 7/7] When backtracking through completed steps, keep completed
 step headers.

---
 src/components/Wizard/PWizardHeaders.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Wizard/PWizardHeaders.vue b/src/components/Wizard/PWizardHeaders.vue
index c93d01ac1..640d604c1 100644
--- a/src/components/Wizard/PWizardHeaders.vue
+++ b/src/components/Wizard/PWizardHeaders.vue
@@ -7,7 +7,7 @@
           :index="index"
           :current="index === currentStepIndex"
           :loading="loading && index === currentStepIndex"
-          :complete="index < currentStepIndex"
+          :complete="index < wizard.furthestStepIndex.value"
           @click="handleStepHeaderClick(index)"
         >
           <template #default="data">