#4 Support async validation functions

Author: cristijora

dev/App.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <vue-tabs class="card">
+    <vue-tabs class="card" @on-error="handleError">
       <!--<template slot="tab" scope="props">
         <li :class="{active:props.tab.active}" >
           <a href="" @click.prevent="props.clickHandler(props.index)" style="border-radius:50%">
            {{props.tab.title}}
           </a>
         </li>
       </template>-->
-      <v-tab title="First tab" icon="ti-bag">
+      <v-tab title="First tab" icon="ti-bag" :before-change="validateFirstTab">
         <div>adsdaasd</div>
         <div>adsdaasd</div>
         <div>adsdaasd</div>
@@ -24,6 +24,7 @@
         Third tab
       </v-tab>
 
+      <div v-if="error">{{error}}</div>
     </vue-tabs>
   </div>
 </template>
@@ -32,9 +33,19 @@
 
   export default {
     name: 'app',
+    data(){
+      return {
+        error: '',
+      }
+    },
     methods: {
-      onComplete () {
-        alert('Yay!')
+      handleError(error){
+        this.error = error
+      },
+      validateFirstTab(){
+        return new Promise((resolve, reject) => {
+          resolve(true)
+        })
       }
     }
   }

dist/[object Object]

@@ -36,7 +36,8 @@
     },
     data () {
       return {
-        active: false
+        active: false,
+        validationError: null
       }
     }
   }

dist/vue-tabs.js

@@ -110,17 +110,59 @@
     },
     methods: {
       navigateToTab (index) {
-        if (this.beforeTabChange(this.activeTabIndex)) {
+        this.beforeTabChange(this.activeTabIndex, () => {
           this.changeTab(this.activeTabIndex, index)
+        })
+      },
+      setLoading (value) {
+        this.loading = value
+        this.$emit('on-loading', value)
+      },
+      setValidationError (tab, error) {
+        this.tabs[this.activeTabIndex].validationError = error
+        this.$emit('on-error', error)
+        if (error && tab.$emit) {
+          tab.$emit('on-error', error)
         }
       },
-
-      beforeTabChange (index) {
+      validateBeforeChange (promiseFn, tab, callback) {
+        this.setValidationError(tab, null)
+        // we have a promise
+        if (promiseFn.then && typeof promiseFn.then === 'function') {
+          this.setLoading(true)
+          promiseFn.then((res) => {
+            this.setLoading(false)
+            let validationResult = res === true
+            this.executeBeforeChange(validationResult, callback)
+          }).catch((error) => {
+            this.setLoading(false)
+            this.setValidationError(tab, error)
+          })
+          // we have a simple function
+        } else {
+          let validationResult = promiseFn === true
+          this.executeBeforeChange(validationResult, callback)
+        }
+      },
+      executeBeforeChange (validationResult, callback) {
+        this.$emit('on-validate', validationResult, this.activeTabIndex)
+        if (validationResult) {
+          callback()
+        } else {
+          this.tabs[this.activeTabIndex].validationError = 'error'
+        }
+      },
+      beforeTabChange (index, callback) {
+        if (this.loading) {
+          return
+        }
         let oldTab = this.tabs[index]
         if (oldTab && oldTab.beforeChange !== undefined) {
-          return oldTab.beforeChange()
+          let tabChangeRes = oldTab.beforeChange()
+          this.validateBeforeChange(tabChangeRes, oldTab, callback)
+        } else {
+          callback()
         }
-        return true
       },
       changeTab (oldIndex, newIndex) {
         if (newIndex < 0 || newIndex >= this.tabCount) {

src/components/TabContent.vue

@@ -76,10 +76,7 @@ module.exports = [
 				raw: true
 			}),*/
 			new ExtractTextPlugin({filename:"vue-tabs.min.css",  allChunks: true, fallback:"style-loader" }),
-			new StatsPlugin( {filename:"./stats.json",
-				chunkModules: true
-				//exclude: [/node_modules[\\\/]react/]
-			}),
+			new StatsPlugin('stats.json'),
 		],
 
 		module: {