Build

dev-example/App.vue

@@ -1,142 +1,79 @@
 <template>
   <div>
-    <button @click="tabs.shift()">Remove one tab</button>
+    <button @click="tabs.shift()">Remove one at start</button>
-    <button @click="tabs.push('testt')">Add one tab</button>
+    <button @click="tabs.push('testt')">Add at the end</button>
+    <button @click="tabs.unshift('new start')">Add one at start</button>
     <form-wizard @on-complete="onComplete"
+                 :hide-buttons="false"
+                 shape="square"
                  color="gray"
-                 error-color="#a94442"
+                 @on-loading="setLoading"
-    >
+                 @on-error="setError"
-      <tab-content title="Personal details"
+                 class="card" ref="wizard">
-                   icon="ti-user" :before-change="validateFirstTab">
+       <tab-content title="Personal details" icon="ti-user">
-        <vue-form-generator :model="model"
+         My first tab
-                            :schema="firstTabSchema"
+       </tab-content>
-                            :options="formOptions"
+        <tab-content v-for="tab in tabs" :title="tab" :key="tab" icon="ti-settings">
-                            ref="firstTabForm">
+          {{tab}}
-
+        </tab-content>
-        </vue-form-generator>
+        <tab-content title="Additional Info"
-      </tab-content>
+                     :before-change="validateAsync"
-      <tab-content title="Additional Info"
+                     icon="ti-settings">
-                   icon="ti-settings" :before-change="validateSecondTab">
+          Additional info
-        <vue-form-generator :model="model"
+        </tab-content>
-                            :schema="secondTabSchema"
+        <tab-content title="Last step"
-                            :options="formOptions"
+                     icon="ti-check">
-                            ref="secondTabForm"
+        </tab-content>
-        >
+        <transition name="fade" mode="out-in">
-        </vue-form-generator>
+          <router-view></router-view>
-
+        </transition>
-      </tab-content>
+        <div class="loader" v-if="loadingWizard"></div>
-      <tab-content title="Last step"
+        <div v-if="error">
-                   icon="ti-check">
+          {{error}}
-        <h4>Your json is ready!</h4>
+        </div>
-      </tab-content>
     </form-wizard>
   </div>
 </template>
 
 <script>
-  import Vue from 'vue'
+  import TabContent from "../src/components/TabContent";
-  import 'bootstrap/dist/css/bootstrap.css'
+
-  import VueFormGenerator from 'vue-form-generator'
-  Vue.use(VueFormGenerator)
   export default {
+    components: {TabContent},
     name: 'app',
     data () {
       return {
-        model:{
+        loadingWizard: false,
-          firstName:'',
+        error: null,
-          lastName:'',
+        count: 0,
-          email:'',
+        tabs: ['test', 'test2', 'test3']
-          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: function(){
+      onComplete () {
-        alert('Yay. Done!');
+        alert('Yay!')
       },
-      validateFirstTab: function(){
+      setLoading (value) {
-        return this.$refs.firstTabForm.validate();
+        this.loadingWizard = value
       },
-      validateSecondTab: function(){
+      setError (error) {
-        return this.$refs.secondTabForm.validate();
+        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
       }
     }
   }