#24 Add on-change event before any tab change

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"
+                 error-color="#a94442"
-                 @on-error="setError"
+    >
-                 class="card" ref="wizard">
+      <tab-content title="Personal details"
-      <tab-content title="1" icon="ti-settings" :before-change="validateAsync">
+                   icon="ti-user" :before-change="validateFirstTab">
-        First tab
+        <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">
+      <tab-content title="Additional Info"
-        Second tab
+                   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">
+      <tab-content title="Last step"
-        Third tab
+                   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,
+        model:{
-        error: null,
+          firstName:'',
-        count: 0,
+          lastName:'',
-        tabs: ['test','test2','test3']
+          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 () {
+      onComplete: function(){
-        alert('Yay!')
+        alert('Yay. Done!');
       },
-      setLoading (value) {
+      validateFirstTab: function(){
-        this.loadingWizard = value
+        return this.$refs.firstTabForm.validate();
       },
-      setError (error) {
+      validateSecondTab: function(){
-        this.error = error
+        return this.$refs.secondTabForm.validate();
-      },
-      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
       }
     }
   }

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",

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)

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>

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"