Merge pull request #161 from jvb93/more-event-hooks

Added afterTabChange functionality

src/components/FormWizard.vue

@@ -280,6 +280,7 @@
               this.beforeTabChange(this.activeTabIndex, cb)
             } else {
               this.changeTab(this.activeTabIndex, index)
+              this.afterTabChange(this.activeTabIndex)
             }
           }
           if (validate) {
@@ -295,6 +296,7 @@
         let cb = () => {
           if (this.activeTabIndex < this.tabCount - 1) {
             this.changeTab(this.activeTabIndex, this.activeTabIndex + 1)
+            this.afterTabChange(this.activeTabIndex)
           } else {
             this.$emit('on-complete')
           }
@@ -377,6 +379,15 @@
           callback()
         }
       },
+      afterTabChange (index) {
+        if (this.loading) {
+          return
+        }
+        let newTab = this.tabs[index]
+        if (newTab && newTab.afterChange !== undefined) {
+          newTab.afterChange()
+        }
+      },
       changeTab (oldIndex, newIndex, emitChangeEvent = true) {
         let oldTab = this.tabs[oldIndex]
         let newTab = this.tabs[newIndex]

src/components/TabContent.vue

@@ -29,6 +29,13 @@
        */
       beforeChange: {
         type: Function
+      },
+       /***
+       * Function to execute after tab switch. Return void for now.
+       * Safe to assume necessary validation has already occured
+       */
+      afterChange: {
+        type: Function
       },
       route: {
         type: [String, Object]

test/unit/specs/FormWizard.spec.js

@@ -386,6 +386,50 @@ describe('FormWizard.vue', () => {
       })
     })
   })
+  describe('after change', () => {
+    beforeEach(() => {
+      threeStepWizard = {
+        template: `<form-wizard>
+              <tab-content title="Personal details"
+                           
+                           :after-change="validationMethod"
+                           icon="ti-user">
+                My first tab content
+              </tab-content>
+              <tab-content title="Additional Info"
+                           :after-change="validationMethod"
+                           icon="ti-settings">
+                My second tab content
+              </tab-content>
+              <tab-content title="Last step"
+                           icon="ti-settings">
+                My third tab content
+              </tab-content>
+          </form-wizard>`,
+        methods: {
+          validationMethod,
+        }
+      }
+    })
+    it('simple method on after change', () => {
+      threeStepWizard.methods.validationMethod = sinon.stub()
+      threeStepWizard.methods.validationMethod.returns(null)
+      const wizard = mount(threeStepWizard, {localVue})
+      const wizardInstance = wizard.find(FormWizard)
+      wizardInstance.vm.nextTab()
+      expect(threeStepWizard.methods.validationMethod.should.have.been.called)
+      expect(wizardInstance.vm.activeTabIndex).to.equal(1)
+    })
+    it('simple method on back navigation after change', () => {
+      threeStepWizard.methods.validationMethod = sinon.stub()
+      threeStepWizard.methods.validationMethod.returns(null)
+      const wizard = mount(threeStepWizard, {localVue})
+      const wizardInstance = wizard.find(FormWizard)
+      wizardInstance.vm.nextTab()
+      wizardInstance.vm.prevTab()
+      expect(threeStepWizard.methods.validationMethod.should.have.been.called)
+    }) 
+  })
   describe('with vue-router', ()=> {
     it('renders correct tab contents', () => {
       const wizard = mount(routerWizard, {localVue, router})