From 03e4c6875b204a193027a94e1a62ebd730527364 Mon Sep 17 00:00:00 2001
From: edujugon <edujugon@gmail.com>
Date: Fri, 28 Sep 2018 11:03:41 +0200
Subject: [PATCH] Adds reset functionality #21

---
 src/HorizontalStepper.vue | 42 ++++++++++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue
index 2d05055..d3beaad 100644
--- a/src/HorizontalStepper.vue
+++ b/src/HorizontalStepper.vue
@@ -29,7 +29,7 @@
         <div class="content">
             <transition :enter-active-class="enterAnimation" :leave-active-class="leaveAnimation" mode="out-in">
                 <!--If keep alive-->
-                <keep-alive v-if="keepAlive">
+                <keep-alive v-if="keepAliveData">
                     <component :is="steps[currentStep.index].component" :clickedNext="nextButton[currentStep.name]" @can-continue="proceed" @change-next="changeNextBtnValue" :current-step="currentStep"></component>
                 </keep-alive>
                 <!--If not show component and destroy it in each step change-->
@@ -90,6 +90,10 @@ export default {
     keepAlive: {
       type: Boolean,
       default: true
+    },
+    reset: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -99,7 +103,8 @@ export default {
       previousStep: {},
       nextButton: {},
       canContinue: false,
-      finalStep: false
+      finalStep: false,
+      keepAliveData: this.keepAlive
     };
   },
 
@@ -194,15 +199,38 @@ export default {
     changeNextBtnValue(payload) {
       this.nextButton[this.currentStep.name] = payload.nextBtnValue;
       this.$forceUpdate();
+    },
+
+    init() {
+      // Initiate stepper
+      this.activateStep(0);
+      this.steps.forEach(step => {
+        this.nextButton[step.name] = false;
+      });
+    }
+  },
+
+  watch: {
+    reset(val) {
+      if(!val) {
+        return;
+      }
+
+      this.keepAliveData = false;
+
+      this.init();
+      this.previousStep = {};
+
+      this.$nextTick(() => {
+        this.keepAliveData = this.keepAlive;
+        this.$emit('reset', true);
+      });
+
     }
   },
 
   created() {
-    // Initiate stepper
-    this.activateStep(0);
-    this.steps.forEach(step => {
-      this.nextButton[step.name] = false;
-    });
+    this.init();
   }
 };
 </script>