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

src/components/FormWizard.vue

@@ -17,7 +17,8 @@
             <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>
                 </div>
@@ -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,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
+        this.beforeTabChange(this.activeTabIndex).then((res) => {
-
+          if (res && this.activeTabIndex > 0) {
-        if (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)
           }
+        })
       }
     }
   }