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)

v0.6.1

Patches

• Fix start-index issue: 062a69a
• Remove private paths from bundle #28
• Enhancements to support dynamic tab-content #18

v0.5.0

Minor Changes

• #18 Handle dynamic tab updates: 2f8dc61
• #12 Remove validations when going to a previous tab: a67fc7b
• #24 Add on-change event before any tab change: 66f3d54

Patches

• Fix on mounted hook in FormWizard: e2cd7bd
• #12 Do not validate an previous step: 45306e3
• Create LICENCE.md: 99f6d33
• Filter based on slot content rather than children (assures component insertion order): 8eee3e3

v0.4.2

Patches

• HideButtons prop added: 8c712ac
• Merge pull request #14 from WandersonAlves/hideButtons-prop: 2a4456e
• #12 Remove active tab error on back button: a065f91
• #15 Trigger back only on back button: 17cbb17

v0.4.0

Fixes

• #9 #11 Better css naming with wizard- prefix for all internal classes.
  Now, external libraries do not affect the form-wizard style.
• #10 Handle browser back and forward for vue-router integration https://jsfiddle.net/bt5dhqtf/267/
• #12 Do not validate when going back one step. You can still enable this via validate-on-back="true" if you need to.

Improvements

• Added a brand new documentation website generated from readme https://cristijora.github.io/vue-form-wizard/#/
• Added a playground where you can test and edit demos right in the browser: https://cristijora.github.io/vue-form-wizard/#/?id=playground
• Added an Element UI integration demo https://jsfiddle.net/bt5dhqtf/409/
• CDN files:
  • https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.js
  • https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.min.css

0.3.0

Improvements

• #6 No bootstrap dependency inside the code and no global styles affected. Now all form-wizard styles are under the css class .vue-form-wizard
• Css bundle improvements - css bundle size reduced from ~40kb to ~5kb

v0.2.1

New

Async validator support #1

//template
<tab-content  :before-change="validateAsync">
</tab-content>

//js 
validateAsync:function() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(true)
      }, 1000)
    })
},

@on-validate event is emitted now whenever a before-change function is executed
@on-error event is emitted when an an async before-change is rejected with a message

Error state for tabs

Thanks to @femanso for the idea and the #4 PR from which certain things were added.
You can now choose an error color which the tab will have when the beforeChange function fails.
See updated form integration fiddle

<form-wizard error-color="#e74c3c">
</form-wizard>

Fixes

Fix before-change not executing when clicking finish button

0.1.11 Release

• This release contains improvements over the css bundle which reduced the previous bundle from 39kb to 24kb.
• Cleaner dev example
• Full demo with vue-form-generator integration update in README

Initial vue-form-wizard release

Vue tab wizard was created due to the lack of any good form wizard component in the Vue community.
The component aims to make form wizards fun and easy to handle and customize

Features

• 3 form wizard layouts: circle, square and tabs Readme
• Specify the starting step (useful in case you want to save the form-wizard state)
• Pre-validate your tab before switching/going to the next tab before-change prop demo
• Customize title and buttons text
• Customize title and buttons with named slots example