#4 Add support for error messages when doing async before change

Add color styles when before-change fails

README.md

@@ -93,6 +93,13 @@ props: {
     type: String,
     default: '#e74c3c' //circle, border and text color
   },
+  /***
+  *  Is set to current step and text when beforeChange function fails 
+  */
+  errorColor: {
+    type: String,
+    default: '#8b0000'
+  },
   /**
   * Can take one of the following values: 'circle|square|tab`
   */

dev-example/App.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
     <form-wizard @on-complete="onComplete"
-                 shape="circle"
+                 shape="square"
-                 color="#e74c3c"
+                 color="gray"
                  @on-loading="setLoading"
-                 class="card">
+                 @on-error="setError"
+                 class="card" ref="wizard">
       <tab-content title="Personal details"
-                   :before-change="validateAsync"
                    route="/first"
+                   :before-change="validateAsync"
                    icon="ti-user">
       </tab-content>
       <tab-content title="Additional Info"
@@ -16,7 +17,6 @@
                    icon="ti-settings">
       </tab-content>
       <tab-content title="Last step"
-                   :before-change="validateAsync"
                    route="/third"
                    icon="ti-check">
       </tab-content>
@@ -24,6 +24,9 @@
         <router-view></router-view>
       </transition>
       <div class="loader" v-if="loadingWizard"></div>
+      <div v-if="error">
+        {{error}}
+      </div>
     </form-wizard>
   </div>
 </template>
@@ -34,7 +37,9 @@
     name: 'app',
     data () {
       return {
-        loadingWizard: false
+        loadingWizard: false,
+        error: null,
+        count: 0
       }
     },
     methods: {
@@ -44,10 +49,19 @@
       setLoading (value) {
         this.loadingWizard = value
       },
+      setError (error) {
+        this.error = error
+      },
       validateAsync () {
+        //simulating an error for the first time and a success for the second time
         return new Promise((resolve, reject) => {
           setTimeout(() => {
+            if (this.count < 1) {
+              this.count ++
+              reject('Some custom error')
+            } else {
               resolve(true)
+            }
           }, 1000)
         })
       },

src/assets/form-wizard/_wizard-card.scss

@@ -1,5 +1,11 @@
-.vue-tab-wizard{
+.vue-tab-wizard, .vue-form-wizard {
   padding-bottom: 20px;
+  .is_error {
+    border-color: $danger-states-color !important;
+    .icon-container {
+      background: $danger-states-color !important;
+    }
+  }
   .icon-circle {
     font-size: 18px;
     border: 3px solid $gray-input-bg;

src/components/FormWizard.vue

@@ -14,19 +14,25 @@
       <ul class="nav nav-pills">
         <li v-for="(tab, index) in tabs" :class="{active:tab.active}">
           <a href="" @click.prevent="navigateToTab(index)">
-            <div class="icon-circle" :class="{checked:isChecked(index),square_shape:isStepSquare, tab_shape:isTabShape}"
+            <div class="icon-circle"
-                 :style="isChecked(index)? stepCheckedStyle : {}">
+                 :class="{checked:isChecked(index),square_shape:isStepSquare, tab_shape:isTabShape}"
+                 :style="[isChecked(index)? stepCheckedStyle : {}, tab.validationError ? errorStyle : {}]">
+
               <transition :name="transition" mode="out-in">
-                <div v-if="tab.active" class="icon-container" :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
+                <div v-if="tab.active" class="icon-container"
-                     :style="tab.active ? iconActiveStyle: {}">
+                     :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
+                     :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]">
                   <i v-if="tab.icon" :class="tab.icon" class="icon"></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>
               </transition>
+
             </div>
-            <span class="stepTitle" :style="tab.active ? stepTitleStyle : {}">
+            <span class="stepTitle"
+                  :class="{active:tab.active, has_error:tab.validationError}"
+                  :style="tab.active ? stepTitleStyle : {}">
               {{tab.title}}
             </span>
 
@@ -104,6 +110,10 @@
         type: String,
         default: '#e74c3c'
       },
+      errorColor: {
+        type: String,
+        default: '#8b0000'
+      },
       shape: {
         type: String,
         default: 'circle'
@@ -161,9 +171,16 @@
           borderColor: this.color
         }
       },
-      stepTitleStyle () {
+      errorStyle () {
         return {
-          color: this.color
+          borderColor: this.errorColor,
+          backgroundColor: this.errorColor
+        }
+      },
+      stepTitleStyle () {
+        var isError = this.tabs[this.activeTabIndex].validationError
+        return {
+          color: isError ? this.errorColor : this.color
         }
       },
       isStepSquare () {
@@ -207,7 +224,12 @@
         this.loading = value
         this.$emit('on-loading', value)
       },
+      setValidationError (error) {
+        this.tabs[this.activeTabIndex].validationError = error
+        this.$emit('on-error', error)
+      },
       validateBeforeChange (promiseFn, callback) {
+        this.setValidationError(null)
         // we have a promise
         if (promiseFn.then && typeof promiseFn.then === 'function') {
           this.setLoading(true)
@@ -215,8 +237,9 @@
             this.setLoading(false)
             let validationResult = res === true
             this.executeBeforeChange(validationResult, callback)
-          }).catch(() => {
+          }).catch((error) => {
             this.setLoading(false)
+            this.setValidationError(error)
           })
           // we have a simple function
         } else {
@@ -228,6 +251,8 @@
         this.$emit('on-validate', validationResult, this.activeTabIndex)
         if (validationResult) {
           callback()
+        } else {
+          this.tabs[this.activeTabIndex].validationError = 'error'
         }
       },
       beforeTabChange (index, callback) {
@@ -254,6 +279,7 @@
         this.activeTabIndex = newIndex
         this.checkStep()
         this.tryChangeRoute(newTab)
+        this.increaseMaxStep()
         return true
       },
       tryChangeRoute (tab) {
@@ -277,7 +303,6 @@
         let cb = () => {
           if (this.activeTabIndex < this.tabCount - 1) {
             this.changeTab(this.activeTabIndex, this.activeTabIndex + 1)
-            this.increaseMaxStep()
           } else {
             this.isLastStep = true
             this.$emit('finished')

src/components/TabContent.vue

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