From f2b6af4eeebfec49d45cfc190abcb99e9953a43c Mon Sep 17 00:00:00 2001
From: cristi <joracristi@gmail.com>
Date: Sun, 23 Apr 2017 22:45:19 +0300
Subject: [PATCH] Move example to dev-example folder Remove watcher from
 FormWizard component to avoid double beforeChange trigger Code cleanup

---
 build/webpack.base.conf.js    |  2 +-
 {src => dev-example}/App.vue  | 14 +++++++++++-
 dev-example/loader.css        | 41 +++++++++++++++++++++++++++++++++++
 {src => dev-example}/main.js  |  2 +-
 dev/App.vue                   | 22 -------------------
 dev/main.js                   | 15 -------------
 dist/vue-form-wizard.js       |  2 +-
 src/components/FormWizard.vue | 25 ++++++++++-----------
 src/components/TabContent.vue |  3 +--
 9 files changed, 69 insertions(+), 57 deletions(-)
 rename {src => dev-example}/App.vue (84%)
 create mode 100644 dev-example/loader.css
 rename {src => dev-example}/main.js (90%)
 delete mode 100644 dev/App.vue
 delete mode 100644 dev/main.js

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index f47b326..edd6120 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -9,7 +9,7 @@ function resolve (dir) {
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './dev-example/main.js'
   },
   output: {
     path: config.build.assetsRoot,
diff --git a/src/App.vue b/dev-example/App.vue
similarity index 84%
rename from src/App.vue
rename to dev-example/App.vue
index d99951c..f41f5d6 100644
--- a/src/App.vue
+++ b/dev-example/App.vue
@@ -3,6 +3,7 @@
     <form-wizard @on-complete="onComplete"
                  shape="circle"
                  color="#e74c3c"
+                 @on-loading="setLoading"
                  class="card">
       <tab-content title="Personal details"
                    :before-change="validateAsync"
@@ -18,7 +19,7 @@
                    icon="ti-check">
         Yuhuuu! This seems pretty damn simple
       </tab-content>
-
+      <div class="loader" v-if="loadingWizard"></div>
     </form-wizard>
   </div>
 </template>
@@ -27,10 +28,18 @@
 
   export default {
     name: 'app',
+    data () {
+      return {
+        loadingWizard: false
+      }
+    },
     methods: {
       onComplete () {
         alert('Yay!')
       },
+      setLoading (value) {
+        this.loadingWizard = value
+      },
       validateAsync () {
         return new Promise((resolve, reject) => {
           setTimeout(() => {
@@ -44,6 +53,9 @@
     }
   }
 </script>
+<style>
+  @import "loader.css";
+</style>
 <style lang="scss">
   $border-radius-extreme: 6px !default;
   $white-color: white;
diff --git a/dev-example/loader.css b/dev-example/loader.css
new file mode 100644
index 0000000..647a7e8
--- /dev/null
+++ b/dev-example/loader.css
@@ -0,0 +1,41 @@
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #e74c3c;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/main.js b/dev-example/main.js
similarity index 90%
rename from src/main.js
rename to dev-example/main.js
index 449c5d1..2efeb59 100644
--- a/src/main.js
+++ b/dev-example/main.js
@@ -2,7 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App.vue'
-import FormWizard from './index'
+import FormWizard from '../src/index'
 Vue.use(FormWizard)
 
 Vue.config.productionTip = false
diff --git a/dev/App.vue b/dev/App.vue
deleted file mode 100644
index c2a823b..0000000
--- a/dev/App.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div id="app">
-    <tab-wizard>
-      <tab-content title="Personal details">
-        My first tab content
-      </tab-content>
-      <tab-content title="Additional Info">
-        My second tab content
-      </tab-content>
-      <tab-content title="Last step">
-        Yuhuuu! This seems pretty damn simple
-      </tab-content>
-    </tab-wizard>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'app',
-}
-</script>
diff --git a/dev/main.js b/dev/main.js
deleted file mode 100644
index 88ef56e..0000000
--- a/dev/main.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App.vue'
-import TabWizard from './../src/index';
-Vue.use(TabWizard);
-
-Vue.config.productionTip = false
-
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  template: '<App/>',
-  components: { App }
-});
diff --git a/dist/vue-form-wizard.js b/dist/vue-form-wizard.js
index c8e4fa3..c77df47 100644
--- a/dist/vue-form-wizard.js
+++ b/dist/vue-form-wizard.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e){t.exports=function(t,e,n,i){var s,a=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(s=t,a=t.default);var r="function"==typeof a?a.options:a;if(e&&(r.render=e.render,r.staticRenderFns=e.staticRenderFns),n&&(r._scopeId=n),i){var c=Object.create(r.computed||null);Object.keys(i).forEach(function(t){var e=i[t];c[t]=function(){return e}}),r.computed=c}return{esModule:s,exports:a,options:r}}},function(t,e,n){n(7),n(6);var i=n(0)(n(3),n(8),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){var i=n(0)(n(4),n(9),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},color:{type:String,default:"#e74c3c"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},iconActiveStyle:function(){return{backgroundColor:this.color}},stepCheckedStyle:function(){return{borderColor:this.color}},stepTitleStyle:function(){return{color:this.color}},isStepSquare:function(){return"square"===this.shape},isTabShape:function(){return"tab"===this.shape},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){var t=0;if(this.activeTabIndex>0){t=this.stepPercentage*(2*this.activeTabIndex+1)}else t=this.stepPercentage;return t}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){var e=this;if(t<=this.maxStep){var n=function(){e.changeTab(e.activeTabIndex,t)};this.beforeTabChange(this.activeTabIndex,n)}},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},validateTabChangePromise:function(t,e){var n=this;t.then&&"function"==typeof t.then?(this.setLoading(!0),t.then(function(t){n.setLoading(!1),t&&e()}).catch(function(){n.setLoading(!1)})):t&&e()},beforeTabChange:function(t,e){if(!this.loading){var n=this.tabs[t];if(n&&void 0!==n.beforeChange){var i=n.beforeChange();this.validateTabChangePromise(i,e)}else e()}},changeTab:function(t,e){var n=this.tabs[t],i=this.tabs[e];return n&&(n.show=!1,n.active=!1),i&&(i.show=!0,i.active=!0),this.activeTabIndex=e,this.checkStep(),!0},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},nextTab:function(){var t=this,e=function(){t.activeTabIndex<t.tabCount-1?(t.changeTab(t.activeTabIndex,t.activeTabIndex+1),t.increaseMaxStep()):(t.isLastStep=!0,t.$emit("finished"))};this.beforeTabChange(this.activeTabIndex,e)},prevTab:function(){var t=this,e=function(){t.activeTabIndex>0&&(t.activeTabIndex--,t.isLastStep=!1)};this.beforeTabChange(this.activeTabIndex,e)},finish:function(){this.$emit("on-complete")}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0){var t=this.tabs[this.activeTabIndex];t.show=!0,t.active=!0}this.startIndex<this.tabs.length?(this.activeTabIndex=this.startIndex,this.maxStep=this.startIndex):console.warn("Prop startIndex set to "+this.startIndex+" is greater than the number of tabs - "+this.tabs.length+". Make sure that the starting index is less than the number of tabs registered")},watch:{activeTabIndex:function(t,e){var n=this,i=function(){n.changeTab(e,t)};this.beforeTabChange(e,i)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function}},data:function(){return{show:!1,active:!1}}}},function(t,e,n){t.exports={FormWizard:n(1),TabContent:n(2),install:function(e){e.component("form-wizard",t.exports.FormWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tab-wizard"},[n("div",{staticClass:"wizard-header"},[t._t("title",[n("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),n("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),n("div",{staticClass:"wizard-navigation"},[n("div",{staticClass:"progress-with-circle"},[n("div",{staticClass:"progress-bar",style:t.progressBarStyle})]),t._v(" "),n("ul",{staticClass:"nav nav-pills"},t._l(t.tabs,function(e,i){return n("li",{class:{active:e.active}},[n("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(i)}}},[n("div",{staticClass:"icon-circle",class:{checked:t.isChecked(i),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:t.isChecked(i)?t.stepCheckedStyle:{}},[n("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?n("div",{staticClass:"icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:e.active?t.iconActiveStyle:{}},[e.icon?n("i",{staticClass:"icon",class:e.icon}):n("i",{staticClass:"icon"},[t._v(t._s(i+1))])]):t._e(),t._v(" "),!e.active&&e.icon?n("i",{staticClass:"icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():n("i",{staticClass:"icon"},[t._v(t._s(i+1))])])],1),t._v(" "),n("span",{staticClass:"stepTitle",style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)]),t._v(" "),n("div",{staticClass:"card-footer"},[[t.displayPrevButton?n("span",{on:{click:t.prevTab}},[t._t("prev",[n("button",{staticClass:"btn btn-default btn-wd",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n            "+t._s(t.backButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?n("span",{staticClass:"pull-right",on:{click:t.finish}},[t._t("finish",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n            "+t._s(t.finishButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?t._e():n("span",{staticClass:"pull-right",on:{click:t.nextTab}},[t._t("next",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)],t._v(" "),n("div",{staticClass:"clearfix"})],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"tab-container"},[t._t("default")],2)},staticRenderFns:[]},t.exports.render._withStripped=!0}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e){t.exports=function(t,e,n,i){var a,s=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(a=t,s=t.default);var r="function"==typeof s?s.options:s;if(e&&(r.render=e.render,r.staticRenderFns=e.staticRenderFns),n&&(r._scopeId=n),i){var c=Object.create(r.computed||null);Object.keys(i).forEach(function(t){var e=i[t];c[t]=function(){return e}}),r.computed=c}return{esModule:a,exports:s,options:r}}},function(t,e,n){n(7),n(6);var i=n(0)(n(3),n(8),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){var i=n(0)(n(4),n(9),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},color:{type:String,default:"#e74c3c"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},iconActiveStyle:function(){return{backgroundColor:this.color}},stepCheckedStyle:function(){return{borderColor:this.color}},stepTitleStyle:function(){return{color:this.color}},isStepSquare:function(){return"square"===this.shape},isTabShape:function(){return"tab"===this.shape},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){var t=0;if(this.activeTabIndex>0){t=this.stepPercentage*(2*this.activeTabIndex+1)}else t=this.stepPercentage;return t}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){var e=this;if(t<=this.maxStep){var n=function(){e.changeTab(e.activeTabIndex,t)};this.beforeTabChange(this.activeTabIndex,n)}},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},validateTabChangePromise:function(t,e){var n=this;t.then&&"function"==typeof t.then?(this.setLoading(!0),t.then(function(t){n.setLoading(!1),!0===t?(e(),n.$emit("validated",!0,n.activeTabIndex)):n.$emit("validated",!1,n.activeTabIndex)}).catch(function(){n.setLoading(!1)})):t?(this.$emit("validated",!0,this.activeTabIndex),e()):this.$emit("validated",!1,this.activeTabIndex)},beforeTabChange:function(t,e){if(!this.loading){var n=this.tabs[t];if(n&&void 0!==n.beforeChange){var i=n.beforeChange();this.validateTabChangePromise(i,e)}else e()}},changeTab:function(t,e){var n=this.tabs[t],i=this.tabs[e];return n&&(n.active=!1),i&&(i.active=!0),this.activeTabIndex=e,this.checkStep(),!0},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},nextTab:function(){var t=this,e=function(){t.activeTabIndex<t.tabCount-1?(t.changeTab(t.activeTabIndex,t.activeTabIndex+1),t.increaseMaxStep()):(t.isLastStep=!0,t.$emit("finished"))};this.beforeTabChange(this.activeTabIndex,e)},prevTab:function(){var t=this,e=function(){t.activeTabIndex>0&&(t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.beforeTabChange(this.activeTabIndex,e)},finish:function(){this.$emit("on-complete")}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0&&0===this.startIndex){this.tabs[this.activeTabIndex].active=!0}if(this.startIndex<this.tabs.length){var t=this.tabs[this.startIndex];this.activeTabIndex=this.startIndex,t.active=!0,this.maxStep=this.startIndex}else console.warn("Prop startIndex set to "+this.startIndex+" is greater than the number of tabs - "+this.tabs.length+". Make sure that the starting index is less than the number of tabs registered")}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function}},data:function(){return{active:!1}}}},function(t,e,n){t.exports={FormWizard:n(1),TabContent:n(2),install:function(e){e.component("form-wizard",t.exports.FormWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tab-wizard"},[n("div",{staticClass:"wizard-header"},[t._t("title",[n("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),n("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),n("div",{staticClass:"wizard-navigation"},[n("div",{staticClass:"progress-with-circle"},[n("div",{staticClass:"progress-bar",style:t.progressBarStyle})]),t._v(" "),n("ul",{staticClass:"nav nav-pills"},t._l(t.tabs,function(e,i){return n("li",{class:{active:e.active}},[n("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(i)}}},[n("div",{staticClass:"icon-circle",class:{checked:t.isChecked(i),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:t.isChecked(i)?t.stepCheckedStyle:{}},[n("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?n("div",{staticClass:"icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:e.active?t.iconActiveStyle:{}},[e.icon?n("i",{staticClass:"icon",class:e.icon}):n("i",{staticClass:"icon"},[t._v(t._s(i+1))])]):t._e(),t._v(" "),!e.active&&e.icon?n("i",{staticClass:"icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():n("i",{staticClass:"icon"},[t._v(t._s(i+1))])])],1),t._v(" "),n("span",{staticClass:"stepTitle",style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)]),t._v(" "),n("div",{staticClass:"card-footer"},[[t.displayPrevButton?n("span",{on:{click:t.prevTab}},[t._t("prev",[n("button",{staticClass:"btn btn-default btn-wd",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n            "+t._s(t.backButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?n("span",{staticClass:"pull-right",on:{click:t.finish}},[t._t("finish",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n            "+t._s(t.finishButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?t._e():n("span",{staticClass:"pull-right",on:{click:t.nextTab}},[t._t("next",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)],t._v(" "),n("div",{staticClass:"clearfix"})],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.active?n("div",{staticClass:"tab-container"},[t._t("default")],2):t._e()},staticRenderFns:[]},t.exports.render._withStripped=!0}])});
\ No newline at end of file
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 89dd90a..18ec3ea 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -213,8 +213,11 @@
           this.setLoading(true)
           promiseFn.then((res) => {
             this.setLoading(false)
-            if (res) {
+            if (res === true) {
               callback()
+              this.$emit('validated', true, this.activeTabIndex)
+            } else {
+              this.$emit('validated', false, this.activeTabIndex)
             }
           }).catch(() => {
             this.setLoading(false)
@@ -222,7 +225,10 @@
           // we have a simple function
         } else {
           if (promiseFn) {
+            this.$emit('validated', true, this.activeTabIndex)
             callback()
+          } else {
+            this.$emit('validated', false, this.activeTabIndex)
           }
         }
       },
@@ -242,11 +248,9 @@
         let oldTab = this.tabs[oldIndex]
         let newTab = this.tabs[newIndex]
         if (oldTab) {
-          oldTab.show = false
           oldTab.active = false
         }
         if (newTab) {
-          newTab.show = true
           newTab.active = true
         }
         this.activeTabIndex = newIndex
@@ -280,7 +284,7 @@
       prevTab () {
         let cb = () => {
           if (this.activeTabIndex > 0) {
-            this.activeTabIndex--
+            this.changeTab(this.activeTabIndex, this.activeTabIndex - 1)
             this.isLastStep = false
           }
         }
@@ -292,25 +296,18 @@
     },
     mounted () {
       this.tabs = this.$children.filter((comp) => comp.$options.name === 'tab-content')
-      if (this.tabs.length > 0) {
+      if (this.tabs.length > 0 && this.startIndex === 0) {
         let firstTab = this.tabs[this.activeTabIndex]
-        firstTab.show = true
         firstTab.active = true
       }
       if (this.startIndex < this.tabs.length) {
+        let tabToActivate = this.tabs[this.startIndex]
         this.activeTabIndex = this.startIndex
+        tabToActivate.active = true
         this.maxStep = this.startIndex
       } else {
         console.warn(`Prop startIndex set to ${this.startIndex} is greater than the number of tabs - ${this.tabs.length}. Make sure that the starting index is less than the number of tabs registered`)
       }
-    },
-    watch: {
-      activeTabIndex: function (newVal, oldVal) {
-        let cb = () => {
-          this.changeTab(oldVal, newVal)
-        }
-        this.beforeTabChange(oldVal, cb)
-      }
     }
   }
 </script>
diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue
index 4f707b1..4c74002 100644
--- a/src/components/TabContent.vue
+++ b/src/components/TabContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="show" class="tab-container">
+  <div v-if="active" class="tab-container">
     <slot>
     </slot>
   </div>
@@ -30,7 +30,6 @@
     },
     data () {
       return {
-        show: false,
         active: false
       }
     }