/vue-stepper

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

Primary LanguageVueMIT LicenseMIT

Stepper Build Status

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});
            }
        }
    }