#1 Modify beforeTabChange to support promises (wip)

src/App.vue

@@ -1,20 +1,36 @@
 <template>
   <div>
     <form-wizard @on-complete="onComplete"
-                shape="circle"
+                 shape="circle"
-                color="#e74c3c"
+                 color="#e74c3c"
-                class="card">
+                 class="card">
       <tab-content title="Personal details"
+                   :before-change="validate"
                    icon="ti-user">
         My first tab content
+
+
+
+
+
       </tab-content>
       <tab-content title="Additional Info"
                    icon="ti-settings">
         My second tab content
+
+
+
+
+
       </tab-content>
       <tab-content title="Last step"
                    icon="ti-check">
         Yuhuuu! This seems pretty damn simple
+
+
+
+
+
       </tab-content>
 
     </form-wizard>
@@ -28,26 +44,33 @@
     methods: {
       onComplete () {
         alert('Yay!')
+      },
+      validate () {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve(true)
+          }, 1000)
+        })
       }
     }
   }
 </script>
 <style lang="scss">
-  $border-radius-extreme:        6px !default;
+  $border-radius-extreme: 6px !default;
   $white-color: white;
-  $gray-input-bg:              #F3F2EE !default;
+  $gray-input-bg: #F3F2EE !default;
-  $card-black-color:          #252422 !default;
+  $card-black-color: #252422 !default;
 
   body {
-    margin-top:20px;
+    margin-top: 20px;
-    background-color:#ecf0f1;
+    background-color: #ecf0f1;
   }
 
-  .card-footer{
+  .card-footer {
-    padding:0px 20px;
+    padding: 0px 20px;
   }
 
-  .card{
+  .card {
     border-radius: $border-radius-extreme;
     box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
     background-color: $white-color;

src/components/FormWizard.vue

@@ -17,12 +17,13 @@
             <div class="icon-circle" :class="{checked:isChecked(index),square_shape:isStepSquare, tab_shape:isTabShape}"
                  :style="isChecked(index)? stepCheckedStyle : {}">
               <transition :name="transition" mode="out-in">
-                <div v-if="tab.active" class="icon-container" :class="{square_shape:isStepSquare, tab_shape:isTabShape}" :style="tab.active ? iconActiveStyle: {}">
+                <div v-if="tab.active" class="icon-container" :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
+                     :style="tab.active ? iconActiveStyle: {}">
                   <i v-if="tab.icon" :class="tab.icon" class="icon"></i>
-                  <i v-else class="icon">{{index+1}}</i>
+                  <i v-else class="icon">{{index + 1}}</i>
                 </div>
                 <i v-if="!tab.active && tab.icon" :class="tab.icon" class="icon"></i>
-                <i v-if="!tab.active && !tab.icon" class="icon">{{index+1}}</i>
+                <i v-if="!tab.active && !tab.icon" class="icon">{{index + 1}}</i>
               </transition>
             </div>
             <span class="stepTitle" :style="tab.active ? stepTitleStyle : {}">
@@ -42,7 +43,7 @@
       <template>
         <span @click="prevTab" v-if="displayPrevButton">
           <slot name="prev">
-            <button type="button" class="btn btn-default btn-wd"  :style="fillButtonStyle">
+            <button type="button" class="btn btn-default btn-wd" :style="fillButtonStyle">
               {{backButtonText}}
             </button>
           </slot>
@@ -194,16 +195,24 @@
         return index <= this.maxStep
       },
       navigateToTab (index) {
-        if (index <= this.maxStep && this.beforeTabChange(this.activeTabIndex)) {
+        if (index <= this.maxStep) {
-          this.changeTab(this.activeTabIndex, index)
+          this.beforeTabChange(this.activeTabIndex).then((res) => {
+            res && this.changeTab(this.activeTabIndex, index)
+          })
         }
       },
       beforeTabChange (index) {
         let oldTab = this.tabs[index]
         if (oldTab && oldTab.beforeChange !== undefined) {
-          return oldTab.beforeChange()
+          let tabChangeRes = oldTab.beforeChange()
+          if (tabChangeRes.then && typeof tabChangeRes.then === 'function') {
+            return tabChangeRes
+          } else {
+            return Promise.resolve(tabChangeRes)
+          }
+        } else {
+          return Promise.resolve(true)
         }
-        return true
       },
       changeTab (oldIndex, newIndex) {
         let oldTab = this.tabs[oldIndex]
@@ -234,24 +243,26 @@
       },
 
       nextTab () {
-        if (!this.beforeTabChange(this.activeTabIndex)) return
+        this.beforeTabChange(this.activeTabIndex).then((res) => {
-
+          if (res) {
-        if (this.activeTabIndex < this.tabCount - 1) {
+            if (this.activeTabIndex < this.tabCount - 1) {
-          this.activeTabIndex++
+              this.activeTabIndex++
-          this.increaseMaxStep()
+              this.increaseMaxStep()
-          this.checkStep()
+              this.checkStep()
-        } else {
+            } else {
-          this.isLastStep = true
+              this.isLastStep = true
-          this.$emit('finished')
+              this.$emit('finished')
-        }
+            }
+          }
+        })
       },
       prevTab () {
-        if (!this.beforeTabChange(this.activeTabIndex)) return
+        this.beforeTabChange(this.activeTabIndex).then((res) => {
-
+          if (res && this.activeTabIndex > 0) {
-        if (this.activeTabIndex > 0) {
+            this.activeTabIndex--
-          this.activeTabIndex--
+            this.isLastStep = false
-          this.isLastStep = false
+          }
-        }
+        })
       },
       finish () {
         this.$emit('on-complete')
@@ -273,9 +284,11 @@
     },
     watch: {
       activeTabIndex: function (newVal, oldVal) {
-        if (this.beforeTabChange(oldVal)) {
+        this.beforeTabChange(oldVal).then((res) => {
-          this.changeTab(oldVal, newVal)
+          if (res) {
-        }
+            this.changeTab(oldVal, newVal)
+          }
+        })
       }
     }
   }