From 4dae5493cad93ec7bb4b17a57df696002c536c4e Mon Sep 17 00:00:00 2001
From: cristijora <joracristi@gmail.com>
Date: Mon, 31 Jul 2017 20:18:27 +0300
Subject: [PATCH] #27 Expose footer content as a scoped slot

---
 dev-example/App.vue             |  7 ++++++
 src/components/FormWizard.vue   | 38 +++++++++++++++++++++------------
 src/components/WizardButton.vue | 10 +++++++++
 src/index.js                    |  5 ++++-
 4 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 src/components/WizardButton.vue

diff --git a/dev-example/App.vue b/dev-example/App.vue
index 10c088e..911c3ee 100644
--- a/dev-example/App.vue
+++ b/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>
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index c76d43e..501d697 100644
--- a/src/components/FormWizard.vue
+++ b/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,
diff --git a/src/components/WizardButton.vue b/src/components/WizardButton.vue
new file mode 100644
index 0000000..24f4070
--- /dev/null
+++ b/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>
diff --git a/src/index.js b/src/index.js
index 3ad4f9d..71d5a0f 100644
--- a/src/index.js
+++ b/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
 }