v0.6.2

Improvements/Features

• #27 Expose footer content as a scoped slot: 4dae549
• Build: f718fe6
• #29 Extract wizard step into separate component and expose via scoped slot: 79be005
• Add slots to WizardStep: 77a16bb

2 new Exposed components:

• WizardButton
• WizardStep
  Usually you don't/should not care about these 2 components unless you want customized layout for your buttons and steps

WizardButton usage:

Potential usage/example that displays a different button on the last step: https://jsfiddle.net/bt5dhqtf/717/

 <template slot="footer" scope="props">
       <div class=wizard-footer-left>
           <wizard-button  v-if="props.activeTabIndex > 0 && !props.isLastStep" :style="props.fillButtonStyle">Previous</wizard-button>
        </div>
        <div class="wizard-footer-right">
          <wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
          
          <wizard-button v-else @click.native="alert('Done')" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">{{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
        </div>
      </template>

Note: You have to customize the UI and the click events yourself if you go this path and there is more boilerplate code but instead you can have a good control over the layout of the buttons

Exposed props for footer slot:

• nextTab // will go to the next tab/step when called
• prevTab //will got to the prev tab/step when called
• activeTabIndex // current active tab index
• isLastStep // boolean to tell whether it's the last step or not
• fillButtonStyle // object with styles for wizard-buttons (contains background and color passed through wizard props)

WizardStep usage:

The main reason for exposing the wizard step component was #29 and fine control over what actions you can have on a wizard step
If you want the steps to not be clickable you can do that like this:

<template slot="step" scope="props">
        <wizard-step :tab="props.tab"
        :transition="props.transition"
        :index="props.index">
        </wizard-step>
</template>

Fiddle example https://jsfiddle.net/bt5dhqtf/705/

Exposed props for the step slot

• tab (the tab object which contains the tab-content component corresponding to the step) This object contains several fields such as active, checked, shape, color and so on. You can check how these are used here: https://github.com/cristijora/vue-form-wizard/blob/master/src/components/WizardStep.vue
• index (The index of the step)
• transition (Transition prop passed from form-wizard)