Support vue-router integration

dev/App.vue

@@ -5,18 +5,18 @@
                 color="#e74c3c"
                 class="card">
       <tab-content title="Personal details"
+                   route="first"
                    icon="ti-user">
-        My first tab content
       </tab-content>
       <tab-content title="Additional Info"
+                   route="second"
                    icon="ti-settings">
-        My second tab content
       </tab-content>
       <tab-content title="Last step"
+                   route="third"
                    icon="ti-check">
-        Yuhuuu! This seems pretty damn simple
       </tab-content>
-
+      <router-view></router-view>
     </form-wizard>
   </div>
 </template>

dev/main.js

@@ -1,12 +1,27 @@
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import App from './App.vue'
 import FormWizard from './../src/index'
+const First = { template: '<div>First</div>' }
+const Second = { template: '<div>Second</div>' }
+const Third = { template: '<div>Third</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  routes: [
+    { path: '/first', component: First },
+    { path: '/second', component: Second },
+    { path: '/third', component: Third }
+  ]
+})
+Vue.use(VueRouter)
 Vue.use(FormWizard)
 
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
+  router,
   el: '#app',
   template: '<App/>',
   components: {App}

package.json

@@ -25,7 +25,6 @@
     "url": "https://github.com/cristijora/vue-form-wizard"
   },
   "devDependencies": {
-    "vue": "^2.2.2",
     "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
@@ -84,7 +83,9 @@
     "sinon-chai": "^2.8.0",
     "stats-webpack-plugin": "^0.6.0",
     "url-loader": "^0.5.8",
+    "vue": "^2.2.2",
     "vue-loader": "^11.1.4",
+    "vue-router": "^2.4.0",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.2.4",
     "webpack": "^2.2.1",

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>
@@ -218,8 +219,14 @@
         }
         this.activeTabIndex = newIndex
         this.checkStep()
+        this.tryChangeRoute(newTab)
         return true
       },
+      tryChangeRoute (tab) {
+        if (this.$router && tab.route) {
+          this.$router.push(tab.route)
+        }
+      },
       checkStep () {
         if (this.activeTabIndex === this.tabCount - 1) {
           this.isLastStep = true
@@ -263,10 +270,12 @@
         let firstTab = this.tabs[this.activeTabIndex]
         firstTab.show = true
         firstTab.active = true
+        this.tryChangeRoute(firstTab)
       }
       if (this.startIndex < this.tabs.length) {
         this.activeTabIndex = this.startIndex
         this.maxStep = this.startIndex
+        this.tryChangeRoute(this.tabs[this.startIndex])
       } else {
         console.warn(`Prop startIndex set to ${this.startIndex} is greater than the number of tabs - ${this.tabs.length}. Make sure that the starting index is less than the number of tabs registered`)
       }

src/components/TabContent.vue

@@ -26,6 +26,9 @@
        */
       beforeChange: {
         type: Function
+      },
+      route: {
+        type: [String, Object]
       }
     },
     data () {