Stepper

Stepper for Vue.

A simple stepper with simple actions such as next, back and finish to perform simple forms.

Live Demo

Installation

npm install vue-stepper --save

Properties

| Properties | Type | Values | | :--------------- | :------- | :--------- | | steps | Array of Objects | Each object is a step that will be included in the stepper | | locale | String | Default: en. Current options: en, es, pt, ja, he, cn, ru , ar. | | top-buttons | Boolean | Default: false. If true buttons on the header, at the start and the end of the steps, will be shown for better user experience. | | keep-alive | Boolean | Default: true. If true step components won't be destroy in each step change, bue if false they will. | | reset | Boolean | Default: false. If true the steps will be reset |

Steps object properties

| Properties | Type | Values | | :--------------- | :------- | :--------- | | icon | String | Ex.: mail. Name of icons that belong to material-icons library | | name | String | Name of the step. Each step name MUST be unique | | title | String | Title that will be displayed below the step, on bold. | | subtitle | String | Subtitle displayed below the title. | | component | Component | Imported component that will be show on the content area of the step. | | completed | Boolean | If step is completed or not. If TRUE a done material icon will replace the one given before. Only mark as completed when you want to let know the user that the previous step has been completed |

Events emitted by stepper

| Event name | When | | :--------------- | :------- | | completed-step | Triggered when a step is completed. Completed meaning that current step has been left behind on the step list. Now you can mark your step object as completed if you desire it.| | active-step | Current active step. It's name and index are exposed on the deployed payload.| | stepper-finished | Event emitted when the user clicks the final button. Now it's time to execute a final callback method| | clicking-back | Triggered when user clicks the back button to return to a previous step| | reset | Triggered when the steps have been reset. So now it's pointing to the first step with cleared fields|

Events that can be emitted by content component

| Event name | When | | :--------------- | :------- | | can-continue | By default the next button will be disabled until the event can-continue is triggered with an object containing the property value. Value accepts a boolean, if true next/finish button will be enabled if false disabled. On each next step canContinue variable will be set to false.| | change-next | With this event you can change de state of the clickedNext prop that each step has. Just emit it with the following payload {nextBtnValue: boolean} |

Exposed props for step component

| Properties | Type | Values | | :--------------- | :------- | :--------- | | currentStep | Object | Exposes current step for step component |

Examples

Template example

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-8 is-offset-2">
                <horizontal-stepper :steps="demoSteps" @completed-step="completeStep"
                                    @active-step="isStepActive" @stepper-finished="alert"
                >                     
                </horizontal-stepper>
            </div>
        </div>
    </div>
</section>

Script example

    import HorizontalStepper from 'vue-stepper';

    // This components will have the content for each stepper step.
    import StepOne from './StepOne.vue';
    import StepTwo from './StepTwo.vue';

    export default {
        components: {
            HorizontalStepper
        },
        data(){
            return {
                demoSteps: [
                    {
                        icon: 'mail',
                        name: 'first',
                        title: 'Sample title 1',
                        subtitle: 'Subtitle sample',
                        component: StepOne,
                        completed: false

                    },
                    {
                        icon: 'report_problem',
                        name: 'second',
                        title: 'Sample title 2',
                        subtitle: 'Subtitle sample',
                        component: StepTwo,
                        completed: false
                    }
                ]
            }
        },
        methods: {
            // Executed when @completed-step event is triggered
            completeStep(payload) {
                this.demoSteps.forEach((step) => {
                    if (step.name === payload.name) {
                        step.completed = true;
                    }
                })
            },
            // Executed when @active-step event is triggered
            isStepActive(payload) {
                this.demoSteps.forEach((step) => {
                    if (step.name === payload.name) {
                        if(step.completed === true) {
                            step.completed = false;
                        }
                    }
                })
            },
            // Executed when @stepper-finished event is triggered
            alert(payload) {
                alert('end')
            }
        }
    }

Example of component content that will be displayed on the first step (vuelidate used to validate form).

Template

    <div style="padding: 2rem 3rem; text-align: left;">
        <div class="field">
            <label class="label">Username</label>
            <div class="control">
                <input :class="['input', ($v.form.username.$error) ? 'is-danger' : '']" type="text" placeholder="Text input"
                       v-model="form.username">
            </div>
            <p v-if="$v.form.username.$error" class="help is-danger">This username is invalid</p>
        </div>
        <div class="field">
            <label class="label">Email</label>
            <div class="control">
                <input :class="['input', ($v.form.demoEmail.$error) ? 'is-danger' : '']"  type="text" placeholder="Email input" v-model="form.demoEmail">
            </div>
            <p v-if="$v.form.demoEmail.$error" class="help is-danger">This email is invalid</p>
        </div>
        <div class="field">
            <label class="label">Message</label>
            <div class="control">
                <textarea :class="['textarea', ($v.form.message.$error) ? 'is-danger' : '']"  placeholder="Textarea" v-model="form.message"></textarea>
            </div>
        </div>
    </div>

Javascript

    import {validationMixin} from 'vuelidate'
    import {required, email} from 'vuelidate/lib/validators'

    export default {
        props: ['clickedNext', 'currentStep'],
        mixins: [validationMixin],
        data() {
            return {
                form: {
                    username: '',
                    demoEmail: '',
                    message: ''
                }
            }
        },
        validations: {
            form: {
                username: {
                    required
                },
                demoEmail: {
                    required,
                    email
                },
                message: {
                    required
                }
            }
        },
        watch: {
            $v: {
                handler: function (val) {
                    if(!val.$invalid) {
                        this.$emit('can-continue', {value: true});
                    } else {
                        this.$emit('can-continue', {value: false});
                    }
                },
                deep: true
            },
            clickedNext(val) {
                if(val === true) {
                    this.$v.form.$touch();
                }
            }
        },
        mounted() {
            if(!this.$v.$invalid) {
                this.$emit('can-continue', {value: true});
            } else {
                this.$emit('can-continue', {value: false});
            }
        }
    }