#27 Expose footer content as a scoped slot

dev-example/App.vue

@@ -20,6 +20,13 @@
         <div v-if="error">
           {{error}}
         </div>
+      <template slot="footer" scope="props">
+        <div class="wizard-footer-right">
+          <wizard-button :style="props.fillButtonStyle">Cancel</wizard-button>
+          <wizard-button @click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
+        </div>
+
+      </template>
     </form-wizard>
   </div>
 </template>

src/components/FormWizard.vue

@@ -35,7 +35,6 @@
                   :style="tab.active ? stepTitleStyle : {}">
               {{tab.title}}
             </span>
-
           </a>
         </li>
       </ul>
@@ -46,44 +45,55 @@
     </div>
 
     <div class="wizard-card-footer clearfix" v-if="!hideButtons">
-      <template>
+      <slot name="footer"
+            :next-tab="nextTab"
+            :prev-tab="prevTab"
+            :active-tab-index="activeTabIndex"
+            :is-last-step="isLastStep"
+            :fill-button-style="fillButtonStyle">
+
+        <template>
         <span @click="prevTab" v-if="displayPrevButton" class="wizard-footer-left">
           <slot name="prev">
-            <button type="button" class="wizard-btn btn-default wizard-btn-wd" :style="fillButtonStyle"
+            <wizard-button :style="fillButtonStyle"
                     :disabled="loading">
               {{backButtonText}}
-            </button>
+            </wizard-button>
           </slot>
         </span>
-      </template>
+        </template>
 
-      <template>
+        <template>
          <span @click="finish" class="wizard-footer-right" v-if="isLastStep">
            <slot name="finish">
-             <button type="button" class="wizard-btn btn-fill wizard-btn-wd btn-next" :style="fillButtonStyle">
+             <wizard-button :style="fillButtonStyle">
               {{finishButtonText}}
-            </button>
+            </wizard-button>
           </slot>
         </span>
-      </template>
+        </template>
 
-      <template>
+        <template>
         <span @click="nextTab" class="wizard-footer-right" v-if="!isLastStep">
          <slot name="next">
-           <button type="button" class="wizard-btn btn-fill wizard-btn-wd btn-next" :style="fillButtonStyle"
+           <wizard-button :style="fillButtonStyle"
                    :disabled="loading">
             {{nextButtonText}}
-           </button>
+           </wizard-button>
          </slot>
        </span>
-      </template>
-
+        </template>
+      </slot>
     </div>
   </div>
 </template>
 <script>
+  import WizardButton from './WizardButton.vue'
   export default{
     name: 'form-wizard',
+    components: {
+      WizardButton
+    },
     props: {
       title: {
         type: String,

src/components/WizardButton.vue

@@ -0,0 +1,10 @@
+<template>
+  <button type="button" class="wizard-btn btn-fill wizard-btn-wd">
+    <slot></slot>
+  </button>
+</template>
+<script>
+    export default {}
+</script>
+<style>
+</style>

src/index.js

@@ -1,9 +1,11 @@
 import FormWizard from './components/FormWizard.vue'
 import TabContent from './components/TabContent.vue'
+import WizardButton from './components/WizardButton.vue'
 const VueFormWizard = {
   install (Vue) {
     Vue.component('form-wizard', FormWizard)
     Vue.component('tab-content', TabContent)
+    Vue.component('wizard-button', WizardButton)
   }
 }
 // Automatic installation if Vue has been added to the global scope.
@@ -14,5 +16,6 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default VueFormWizard
 export {
   FormWizard,
-  TabContent
+  TabContent,
+  WizardButton
 }