#1 Modify beforeTabChange to support promises (wip)

src/App.vue

@@ -5,16 +5,32 @@
                  color="#e74c3c"
                  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,6 +44,13 @@
     methods: {
       onComplete () {
         alert('Yay!')
+      },
+      validate () {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve(true)
+          }, 1000)
+        })
       }
     }
   }
@@ -39,15 +62,15 @@
   $card-black-color: #252422 !default;
 
   body {
-    margin-top:20px;
-    background-color:#ecf0f1;
+    margin-top: 20px;
+    background-color: #ecf0f1;
   }
 
-  .card-footer{
-    padding:0px 20px;
+  .card-footer {
+    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 : {}">
@@ -194,16 +195,24 @@
         return index <= this.maxStep
       },
       navigateToTab (index) {
-        if (index <= this.maxStep && this.beforeTabChange(this.activeTabIndex)) {
-          this.changeTab(this.activeTabIndex, index)
+        if (index <= this.maxStep) {
+          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,8 +243,8 @@
       },
 
       nextTab () {
-        if (!this.beforeTabChange(this.activeTabIndex)) return
-
+        this.beforeTabChange(this.activeTabIndex).then((res) => {
+          if (res) {
             if (this.activeTabIndex < this.tabCount - 1) {
               this.activeTabIndex++
               this.increaseMaxStep()
@@ -244,14 +253,16 @@
               this.isLastStep = true
               this.$emit('finished')
             }
+          }
+        })
       },
       prevTab () {
-        if (!this.beforeTabChange(this.activeTabIndex)) return
-
-        if (this.activeTabIndex > 0) {
+        this.beforeTabChange(this.activeTabIndex).then((res) => {
+          if (res && this.activeTabIndex > 0) {
             this.activeTabIndex--
             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) => {
+          if (res) {
             this.changeTab(oldVal, newVal)
           }
+        })
       }
     }
   }