Move example to dev-example folder

Remove watcher from FormWizard component to avoid double beforeChange trigger
Code cleanup

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,

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;

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);
+  }
+}

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

dev/App.vue

@@ -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>

dev/main.js

@@ -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 }
-});

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>

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
       }
     }