From 66f3d542a96d2498e354b22fe998ca8f52764e50 Mon Sep 17 00:00:00 2001
From: cristijora <joracristi@gmail.com>
Date: Sun, 2 Jul 2017 10:43:30 +0300
Subject: [PATCH] #24 Add on-change event before any tab change

---
 dev-example/App.vue           | 158 +++++++++++++++++++++++++---------
 dist/vue-form-wizard.js       |   2 +-
 package.json                  |   2 +
 src/components/FormWizard.vue |   3 +
 src/components/TabContent.vue |   2 +-
 yarn.lock                     |  12 +++
 6 files changed, 135 insertions(+), 44 deletions(-)

diff --git a/dev-example/App.vue b/dev-example/App.vue
index 0830080..22e06f8 100644
--- a/dev-example/App.vue
+++ b/dev-example/App.vue
@@ -3,66 +3,140 @@
     <button @click="tabs.shift()">Remove one tab</button>
     <button @click="tabs.push('testt')">Add one tab</button>
     <form-wizard @on-complete="onComplete"
-                 :hide-buttons="false"
-                 shape="square"
                  color="gray"
-                 @on-loading="setLoading"
-                 @on-error="setError"
-                 class="card" ref="wizard">
-      <tab-content title="1" icon="ti-settings" :before-change="validateAsync">
-        First tab
+                 error-color="#a94442"
+    >
+      <tab-content title="Personal details"
+                   icon="ti-user" :before-change="validateFirstTab">
+        <vue-form-generator :model="model"
+                            :schema="firstTabSchema"
+                            :options="formOptions"
+                            ref="firstTabForm">
+
+        </vue-form-generator>
       </tab-content>
-      <tab-content title="2" icon="ti-settings" :before-change="validateAsync">
-        Second tab
+      <tab-content title="Additional Info"
+                   icon="ti-settings" :before-change="validateSecondTab">
+        <vue-form-generator :model="model"
+                            :schema="secondTabSchema"
+                            :options="formOptions"
+                            ref="secondTabForm"
+        >
+        </vue-form-generator>
+
       </tab-content>
-      <tab-content title="3" icon="ti-settings">
-        Third tab
+      <tab-content title="Last step"
+                   icon="ti-check">
+        <h4>Your json is ready!</h4>
       </tab-content>
-      <div class="loader" v-if="loadingWizard"></div>
-      <div v-if="error">
-        {{error}}
-      </div>
     </form-wizard>
   </div>
 </template>
 
 <script>
-
+  import Vue from 'vue'
+  import 'bootstrap/dist/css/bootstrap.css'
+  import VueFormGenerator from 'vue-form-generator'
+  Vue.use(VueFormGenerator)
   export default {
     name: 'app',
     data () {
       return {
-        loadingWizard: false,
-        error: null,
-        count: 0,
-        tabs: ['test','test2','test3']
+        model:{
+          firstName:'',
+          lastName:'',
+          email:'',
+          streetName:'',
+          streetNumber:'',
+          city:'',
+          country:''
+        },
+        formOptions: {
+          validationErrorClass: "has-error",
+          validationSuccessClass: "has-success",
+          validateAfterChanged: true
+        },
+        firstTabSchema:{
+          fields:[{
+            type: "input",
+            inputType: "text",
+            label: "First name",
+            model: "firstName",
+            required:true,
+            validator:VueFormGenerator.validators.string,
+            styleClasses:'col-xs-6'
+          },
+            {
+              type: "input",
+              inputType: "text",
+              label: "Last name",
+              model: "lastName",
+              required:true,
+              validator:VueFormGenerator.validators.string,
+              styleClasses:'col-xs-6'
+            },
+            {
+              type: "input",
+              inputType: "text",
+              label: "Email",
+              model: "email",
+              required:true,
+              validator:VueFormGenerator.validators.email,
+              styleClasses:'col-xs-12'
+            }
+          ]
+        },
+        secondTabSchema:{
+          fields:[
+            {
+              type: "input",
+              inputType: "text",
+              label: "Street name",
+              model: "streetName",
+              required:true,
+              validator:VueFormGenerator.validators.string,
+              styleClasses:'col-xs-9'
+            },
+            {
+              type: "input",
+              inputType: "text",
+              label: "Street number",
+              model: "streetNumber",
+              required:true,
+              validator:VueFormGenerator.validators.string,
+              styleClasses:'col-xs-3'
+            },
+            {
+              type: "input",
+              inputType: "text",
+              label: "City",
+              model: "city",
+              required:true,
+              validator:VueFormGenerator.validators.string,
+              styleClasses:'col-xs-6'
+            },
+            {
+              type: "select",
+              label: "Country",
+              model: "country",
+              required:true,
+              validator:VueFormGenerator.validators.string,
+              values:['United Kingdom','Romania','Germany'],
+              styleClasses:'col-xs-6'
+            },
+          ]
+        }
       }
     },
     methods: {
-      onComplete () {
-        alert('Yay!')
+      onComplete: function(){
+        alert('Yay. Done!');
       },
-      setLoading (value) {
-        this.loadingWizard = value
+      validateFirstTab: function(){
+        return this.$refs.firstTabForm.validate();
       },
-      setError (error) {
-        this.error = error
-      },
-      validateAsync () {
-        //simulating an error for the first time and a success for the second time
-        return new Promise((resolve, reject) => {
-          setTimeout(() => {
-            if (this.count % 2 === 0) {
-              reject('Some custom error')
-            } else {
-              resolve(true)
-            }
-            this.count ++
-          }, 100)
-        })
-      },
-      validate () {
-        return true
+      validateSecondTab: function(){
+        return this.$refs.secondTabForm.validate();
       }
     }
   }
diff --git a/dist/vue-form-wizard.js b/dist/vue-form-wizard.js
index f5e610d..68f231a 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(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},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,i,n){var a,r=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(a=t,r=t.default);var o="function"==typeof r?r.options:r;if(e&&(o.render=e.render,o.staticRenderFns=e.staticRenderFns),i&&(o._scopeId=i),n){var c=Object.create(o.computed||null);Object.keys(n).forEach(function(t){var e=n[t];c[t]=function(){return e}}),o.computed=c}return{esModule:a,exports:r,options:o}}},function(t,e,i){i(6);var n=i(0)(i(3),i(7),null,null);n.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",n.esModule&&Object.keys(n.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),n.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=n.exports},function(t,e,i){var n=i(0)(i(4),i(8),null,null);n.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",n.esModule&&Object.keys(n.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),n.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=n.exports},function(t,e,i){"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"},hideButtons:{type:Boolean,default:!1},validateOnBack:Boolean,color:{type:String,default:"#e74c3c"},errorColor:{type:String,default:"#8b0000"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0,validator:function(t){return t>=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}},errorStyle:function(){return{borderColor:this.errorColor,backgroundColor:this.errorColor}},stepTitleStyle:function(){return{color:this.tabs[this.activeTabIndex].validationError?this.errorColor: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,i=t>this.activeTabIndex;if(t<=this.maxStep){var n=function(){e.changeTab(e.activeTabIndex,t)};i?this.beforeTabChange(this.activeTabIndex,n):(this.setValidationError(null),n())}},nextTab:function(){var t=this,e=function(){t.activeTabIndex<t.tabCount-1?t.changeTab(t.activeTabIndex,t.activeTabIndex+1):(t.isLastStep=!0,t.$emit("finished"))};this.beforeTabChange(this.activeTabIndex,e)},prevTab:function(){var t=this,e=function(){t.activeTabIndex>0&&(t.setValidationError(null),t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.validateOnBack?this.beforeTabChange(this.activeTabIndex,e):e()},finish:function(){var t=this,e=function(){t.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},setValidationError:function(t){this.tabs[this.activeTabIndex].validationError=t,this.$emit("on-error",t)},validateBeforeChange:function(t,e){var i=this;if(this.setValidationError(null),t.then&&"function"==typeof t.then)this.setLoading(!0),t.then(function(t){i.setLoading(!1);var n=!0===t;i.executeBeforeChange(n,e)}).catch(function(t){i.setLoading(!1),i.setValidationError(t)});else{var n=!0===t;this.executeBeforeChange(n,e)}},executeBeforeChange:function(t,e){this.$emit("on-validate",t,this.activeTabIndex),t?e():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange:function(t,e){if(!this.loading){var i=this.tabs[t];if(i&&void 0!==i.beforeChange){var n=i.beforeChange();this.validateBeforeChange(n,e)}else e()}},changeTab:function(t,e){var i=this.tabs[t],n=this.tabs[e];return i&&(i.active=!1),n&&(n.active=!0),this.activeTabIndex=e,this.checkStep(),this.tryChangeRoute(n),this.increaseMaxStep(),!0},tryChangeRoute:function(t){this.$router&&t.route&&this.$router.push(t.route)},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},checkRouteChange:function(t){var e=-1,i=this.tabs.find(function(i,n){var a=i.route===t;return a&&(e=n),a});if(i&&!i.active){var n=e>this.activeTabIndex;this.navigateToTab(e,n)}},getTabs:function(){return this.$children.filter(function(t){return"tab-content"===t.$options.name})},activateTab:function(t){var e=this.tabs[t];e.active=!0,this.tryChangeRoute(e)},activateTabAndCheckStep:function(t){this.activateTab(t),this.checkStep(),this.maxStep=this.startIndex,this.activeTabIndex=this.startIndex},initializeTabs:function(){this.tabs=this.getTabs(),this.tabs.length>0&&0===this.startIndex&&this.activateTab(this.activeTabIndex),this.startIndex<this.tabs.length?this.activateTabAndCheckStep(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")},reinitializeTabs:function(){var t=this.getTabs();if(0!==this.tabs.length&&this.tabs.length!==t.length){this.tabs=t;var e=-1;this.tabs.find(function(t,i){return t.active&&(e=i),t.active}),-1===e&&(e=this.activeTabIndex>0?this.activeTabIndex-1:0),this.tabs.forEach(function(t){t.active=!1}),this.activateTab(e),this.maxStep=e,this.activeTabIndex=e}}},mounted:function(){this.initializeTabs()},updated:function(){this.reinitializeTabs()},watch:{"$route.path":function(t){this.checkRouteChange(t)}}}},function(t,e,i){"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},route:{type:[String,Object]}},data:function(){return{active:!1,validationError:null}}}},function(t,e,i){t.exports={FormWizard:i(1),TabContent:i(2),install:function(e){e.component("form-wizard",t.exports.FormWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e,i){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"vue-form-wizard"},[i("div",{staticClass:"wizard-header"},[t._t("title",[i("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),i("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),i("div",{staticClass:"wizard-navigation"},[i("div",{staticClass:"wizard-progress-with-circle"},[i("div",{staticClass:"wizard-progress-bar",style:t.progressBarStyle})]),t._v(" "),i("ul",{staticClass:"wizard-nav wizard-nav-pills"},t._l(t.tabs,function(e,n){return i("li",{class:{active:e.active}},[i("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(n)}}},[i("div",{staticClass:"wizard-icon-circle",class:{checked:t.isChecked(n),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[t.isChecked(n)?t.stepCheckedStyle:{},e.validationError?t.errorStyle:{}]},[i("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?i("div",{staticClass:"wizard-icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[e.active?t.iconActiveStyle:{},e.validationError?t.errorStyle:{}]},[e.icon?i("i",{staticClass:"wizard-icon",class:e.icon}):i("i",{staticClass:"wizard-icon"},[t._v(t._s(n+1))])]):t._e(),t._v(" "),!e.active&&e.icon?i("i",{staticClass:"wizard-icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():i("i",{staticClass:"wizard-icon"},[t._v(t._s(n+1))])])],1),t._v(" "),i("span",{staticClass:"stepTitle",class:{active:e.active,has_error:e.validationError},style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),i("div",{staticClass:"wizard-tab-content"},[t._t("default")],2)]),t._v(" "),t.hideButtons?t._e():i("div",{staticClass:"wizard-card-footer clearfix"},[[t.displayPrevButton?i("span",{staticClass:"wizard-footer-left",on:{click:t.prevTab}},[t._t("prev",[i("button",{staticClass:"wizard-btn btn-default wizard-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?i("span",{staticClass:"wizard-footer-right",on:{click:t.finish}},[t._t("finish",[i("button",{staticClass:"wizard-btn btn-fill wizard-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():i("span",{staticClass:"wizard-footer-right",on:{click:t.nextTab}},[t._t("next",[i("button",{staticClass:"wizard-btn btn-fill wizard-btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)]],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,i){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.active?i("div",{staticClass:"wizard-tab-container"},[t._t("default")],2):t._e()},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(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},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,i,n){var a,r=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(a=t,r=t.default);var o="function"==typeof r?r.options:r;if(e&&(o.render=e.render,o.staticRenderFns=e.staticRenderFns),i&&(o._scopeId=i),n){var c=Object.create(o.computed||null);Object.keys(n).forEach(function(t){var e=n[t];c[t]=function(){return e}}),o.computed=c}return{esModule:a,exports:r,options:o}}},function(t,e,i){i(6);var n=i(0)(i(3),i(7),null,null);n.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",n.esModule&&Object.keys(n.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),n.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=n.exports},function(t,e,i){var n=i(0)(i(4),i(8),null,null);n.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",n.esModule&&Object.keys(n.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),n.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=n.exports},function(t,e,i){"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"},hideButtons:{type:Boolean,default:!1},validateOnBack:Boolean,color:{type:String,default:"#e74c3c"},errorColor:{type:String,default:"#8b0000"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0,validator:function(t){return t>=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}},errorStyle:function(){return{borderColor:this.errorColor,backgroundColor:this.errorColor}},stepTitleStyle:function(){return{color:this.tabs[this.activeTabIndex].validationError?this.errorColor: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;this.$emit("on-change",this.activeTabIndex,t);var i=t>this.activeTabIndex;if(t<=this.maxStep){var n=function(){e.changeTab(e.activeTabIndex,t)};if(i)for(var a=this.activeTabIndex;a<t;a++)this.beforeTabChange(a,n);else this.setValidationError(null),n()}},nextTab:function(){var t=this;this.$emit("on-change",this.activeTabIndex,this.activeTabIndex+1);var e=function(){t.activeTabIndex<t.tabCount-1?t.changeTab(t.activeTabIndex,t.activeTabIndex+1):(t.isLastStep=!0,t.$emit("finished"))};this.beforeTabChange(this.activeTabIndex,e)},prevTab:function(){var t=this;this.$emit("on-change",this.activeTabIndex,this.activeTabIndex-1);var e=function(){t.activeTabIndex>0&&(t.setValidationError(null),t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.validateOnBack?this.beforeTabChange(this.activeTabIndex,e):e()},finish:function(){var t=this,e=function(){t.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},setValidationError:function(t){this.tabs[this.activeTabIndex].validationError=t,this.$emit("on-error",t)},validateBeforeChange:function(t,e){var i=this;if(this.setValidationError(null),t.then&&"function"==typeof t.then)this.setLoading(!0),t.then(function(t){i.setLoading(!1);var n=!0===t;i.executeBeforeChange(n,e)}).catch(function(t){i.setLoading(!1),i.setValidationError(t)});else{var n=!0===t;this.executeBeforeChange(n,e)}},executeBeforeChange:function(t,e){this.$emit("on-validate",t,this.activeTabIndex),t?e():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange:function(t,e){if(!this.loading){var i=this.tabs[t];if(i&&void 0!==i.beforeChange){var n=i.beforeChange();this.validateBeforeChange(n,e)}else e()}},changeTab:function(t,e){var i=this.tabs[t],n=this.tabs[e];return i&&(i.active=!1),n&&(n.active=!0),this.activeTabIndex=e,this.checkStep(),this.tryChangeRoute(n),this.increaseMaxStep(),!0},tryChangeRoute:function(t){this.$router&&t.route&&this.$router.push(t.route)},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},checkRouteChange:function(t){var e=-1,i=this.tabs.find(function(i,n){var a=i.route===t;return a&&(e=n),a});if(i&&!i.active){var n=e>this.activeTabIndex;this.navigateToTab(e,n)}},getTabs:function(){return this.$children.filter(function(t){return"tab-content"===t.$options.name})},activateTab:function(t){var e=this.tabs[t];e.active=!0,this.tryChangeRoute(e)},activateTabAndCheckStep:function(t){this.activateTab(t),this.checkStep(),this.maxStep=this.startIndex,this.activeTabIndex=this.startIndex},initializeTabs:function(){this.tabs=this.getTabs(),this.tabs.length>0&&0===this.startIndex&&this.activateTab(this.activeTabIndex),this.startIndex<this.tabs.length?this.activateTabAndCheckStep(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")},reinitializeTabs:function(){var t=this.getTabs();if(0!==this.tabs.length&&this.tabs.length!==t.length){this.tabs=t;var e=-1;this.tabs.find(function(t,i){return t.active&&(e=i),t.active}),-1===e&&(e=this.activeTabIndex>0?this.activeTabIndex-1:0),this.tabs.forEach(function(t){t.active=!1}),this.activateTab(e),this.maxStep=e,this.activeTabIndex=e}}},mounted:function(){this.initializeTabs()},updated:function(){this.reinitializeTabs()},watch:{"$route.path":function(t){this.checkRouteChange(t)}}}},function(t,e,i){"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},route:{type:[String,Object]}},data:function(){return{active:!1,validationError:null}}}},function(t,e,i){t.exports={FormWizard:i(1),TabContent:i(2),install:function(e){e.component("form-wizard",t.exports.FormWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e,i){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"vue-form-wizard"},[i("div",{staticClass:"wizard-header"},[t._t("title",[i("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),i("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),i("div",{staticClass:"wizard-navigation"},[i("div",{staticClass:"wizard-progress-with-circle"},[i("div",{staticClass:"wizard-progress-bar",style:t.progressBarStyle})]),t._v(" "),i("ul",{staticClass:"wizard-nav wizard-nav-pills"},t._l(t.tabs,function(e,n){return i("li",{class:{active:e.active}},[i("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(n)}}},[i("div",{staticClass:"wizard-icon-circle",class:{checked:t.isChecked(n),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[t.isChecked(n)?t.stepCheckedStyle:{},e.validationError?t.errorStyle:{}]},[i("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?i("div",{staticClass:"wizard-icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[e.active?t.iconActiveStyle:{},e.validationError?t.errorStyle:{}]},[e.icon?i("i",{staticClass:"wizard-icon",class:e.icon}):i("i",{staticClass:"wizard-icon"},[t._v(t._s(n+1))])]):t._e(),t._v(" "),!e.active&&e.icon?i("i",{staticClass:"wizard-icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():i("i",{staticClass:"wizard-icon"},[t._v(t._s(n+1))])])],1),t._v(" "),i("span",{staticClass:"stepTitle",class:{active:e.active,has_error:e.validationError},style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),i("div",{staticClass:"wizard-tab-content"},[t._t("default")],2)]),t._v(" "),t.hideButtons?t._e():i("div",{staticClass:"wizard-card-footer clearfix"},[[t.displayPrevButton?i("span",{staticClass:"wizard-footer-left",on:{click:t.prevTab}},[t._t("prev",[i("button",{staticClass:"wizard-btn btn-default wizard-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?i("span",{staticClass:"wizard-footer-right",on:{click:t.finish}},[t._t("finish",[i("button",{staticClass:"wizard-btn btn-fill wizard-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():i("span",{staticClass:"wizard-footer-right",on:{click:t.nextTab}},[t._t("next",[i("button",{staticClass:"wizard-btn btn-fill wizard-btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)]],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,i){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{directives:[{name:"show",rawName:"v-show",value:t.active,expression:"active"}],staticClass:"wizard-tab-container"},[t._t("default")],2)},staticRenderFns:[]},t.exports.render._withStripped=!0}])});
\ No newline at end of file
diff --git a/package.json b/package.json
index 23311c6..1ff54b8 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "babel-preset-env": "^1.2.1",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "bootstrap": "^3.3.7",
     "chai": "^3.5.0",
     "chalk": "^1.1.3",
     "chromedriver": "^2.27.2",
@@ -88,6 +89,7 @@
     "stats-webpack-plugin": "^0.6.0",
     "url-loader": "^0.5.8",
     "vue": "^2.2.2",
+    "vue-form-generator": "^2.0.0",
     "vue-loader": "^11.1.4",
     "vue-router": "^2.5.1",
     "vue-style-loader": "^2.0.0",
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 38c43b5..2329afe 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -222,6 +222,7 @@
         return index <= this.maxStep
       },
       navigateToTab (index) {
+        this.$emit('on-change', this.activeTabIndex, index)
         let validate = index > this.activeTabIndex
         if (index <= this.maxStep) {
           let cb = () => {
@@ -236,6 +237,7 @@
         }
       },
       nextTab () {
+        this.$emit('on-change', this.activeTabIndex, this.activeTabIndex + 1)
         let cb = () => {
           if (this.activeTabIndex < this.tabCount - 1) {
             this.changeTab(this.activeTabIndex, this.activeTabIndex + 1)
@@ -247,6 +249,7 @@
         this.beforeTabChange(this.activeTabIndex, cb)
       },
       prevTab () {
+        this.$emit('on-change', this.activeTabIndex, this.activeTabIndex - 1)
         let cb = () => {
           if (this.activeTabIndex > 0) {
             this.setValidationError(null)
diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue
index 813eebe..b440c78 100644
--- a/src/components/TabContent.vue
+++ b/src/components/TabContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="active" class="wizard-tab-container">
+  <div v-show="active" class="wizard-tab-container">
     <slot>
     </slot>
   </div>
diff --git a/yarn.lock b/yarn.lock
index 0b12ce4..f85f481 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -931,6 +931,10 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
+bootstrap@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
+
 brace-expansion@^1.0.0:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.7.tgz#3effc3c50e000531fb720eaff80f0ae8ef23cf59"
@@ -5904,6 +5908,10 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-form-generator@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vue-form-generator/-/vue-form-generator-2.0.0.tgz#c52c2a92d8fbdc85e749044227520125ede7c26b"
+
 vue-hot-reload-api@^2.0.11:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
@@ -5925,6 +5933,10 @@ vue-loader@^11.1.4:
     vue-style-loader "^2.0.0"
     vue-template-es2015-compiler "^1.2.2"
 
+vue-router@^2.5.1:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.7.0.tgz#16d424493aa51c3c8cce8b7c7210ea4c3a89aff1"
+
 vue-style-loader@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-2.0.5.tgz#f0efac992febe3f12e493e334edb13cd235a3d22"