Use provide/inject to register tabs for layout flexibility

Author: cristijora

dev-example/WizardRoute.vue

@@ -7,8 +7,6 @@
     <form-wizard @on-complete="onComplete"
                  @on-change="handleChange"
                  :start-index.sync="activeIndex"
-                 layout="vertical"
-                 steps-classes="steps-size"
                  color="#e74c3c">
        <tab-content v-for="tab in tabs" :title="tab" :key="tab">{{tab}}</tab-content>
         <transition name="fade" mode="out-in">

src/components/FormWizard.vue

@@ -157,6 +157,12 @@
         }
       }
     },
+    provide () {
+      return {
+        addTab: this.addTab,
+        removeTab: this.removeTab
+      }
+    },
     data () {
       return {
         activeTabIndex: 0,

src/components/TabContent.vue

@@ -38,6 +38,7 @@
         default: () => {}
       }
     },
+    inject: ['addTab', 'removeTab'],
     data () {
       return {
         active: false,
@@ -57,13 +58,13 @@
       }
     },
     mounted () {
-      this.$parent.addTab(this)
+      this.addTab(this)
     },
     destroyed () {
       if (this.$el && this.$el.parentNode) {
         this.$el.parentNode.removeChild(this.$el)
       }
-      this.$parent.removeTab(this)
+      this.removeTab(this)
     }
   }
 </script>

test/unit/specs/FormWizard.spec.js

@@ -1,8 +1,7 @@
-import VueFormWizard from './../../../src/index'
-import {TabContent as WizardTab, WizardStep, FormWizard} from './../../../src/index'
+import VueFormWizard, {TabContent as WizardTab, WizardStep, FormWizard} from './../../../src/index'
 import {mount, createLocalVue} from 'vue-test-utils'
 import sinon from 'sinon'
-import Vue from "vue";
+import Vue from 'vue'
 
 const localVue = createLocalVue()
 localVue.use(VueFormWizard)
@@ -28,14 +27,30 @@ const twoStepWizard = {
     }
   }
 }
+
+const divSlot = `<div>
+                    <tab-content title="Personal details"
+                                 icon="ti-user">
+                      First
+                    </tab-content>
+                    <tab-content title="Additional Info"
+                                 icon="ti-settings">
+                      Second
+                    </tab-content>
+                    <tab-content title="Last step"
+                                 icon="ti-settings">
+                      Third
+                    </tab-content>
+                  </div>`
+
 describe('FormWizard.vue', () => {
   it('contains wizard class', () => {
     const wizard = mount(twoStepWizard, {localVue})
     wizard.hasClass('vue-form-wizard')
   })
-  it('renders steps', () => {
+  it('renders steps', (done) => {
     const wizard = mount(twoStepWizard, {localVue})
-    Vue.nextTick(()=>{
+    Vue.nextTick(() => {
       const steps = wizard.findAll(WizardStep)
       const firsStep = steps.at(0)
       expect(steps.length).to.equal(3)
@@ -44,8 +59,8 @@ describe('FormWizard.vue', () => {
       expect(stepTitle.is('span')).to.equal(true)
       const stepText = stepTitle.text().trim()
       expect(stepText).to.equal('Personal details')
+      done()
     })
-
   })
   it('renders tabs', () => {
     const wizard = mount(twoStepWizard, {localVue})
@@ -81,4 +96,17 @@ describe('FormWizard.vue', () => {
     expect(nextTabHandler.called).to.equal(true)
   })
 
+  it('renders tab wrapped in another element', done => {
+    const wizard = mount(FormWizard, {
+      localVue,
+      slots: {
+        default: divSlot
+      }
+    })
+    Vue.nextTick(() => {
+      const tabs = wizard.findAll(WizardTab)
+      expect(tabs.length).to.equal(3)
+      done()
+    })
+  })
 })