Vue-Stepper 1.0.0

Fully customizable Stepper component
with Vuex support and Zero dependencies.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod elementum ante ac volutpat. Suspendisse euismod est enim, sit amet vehicula neque feugiat id. Nunc imperdiet convallis placerat. Sed accumsan mauris et magna facilisis gravida. Suspendisse et justo volutpat, congue libero id, vehicula sem. Maecenas nec ex imperdiet, bibendum justo vel, feugiat velit. Vivamus eu maximus mi. Fusce ac metus magna.

Install, Examples & Documentation
Star

Install

$ npm install vue-stepper-component --save

Usage

To use the component in your templates, simply import and register with your component. To control the Stepper state, we use the v-model directive, just like on any other input element with two-way binding. The Stepper acts as a group of radio-buttons.

Template
<v-stepper :steps="steps" v-model="step"></v-stepper>

<template v-if="step === 1"><!-- Step 1 Content --></template>
<template v-if="step === 2"><!-- Step 2 Content --></template>
<template v-if="step === 3"><!-- Step 3 Content --></template>

<!-- etc' -->
Script
import { VStepper } from 'vue-stepper-component'

export default {
  components: {
    VStepper
  },
  data: () => ({ steps: 3, step: undefined })
}

Vuex

A common practice for managing your Stepper state, is through a Store.

Store
// State
const state = { steps: 3, step: undefined }

// Getters...
// Mutations...

// Export
Template
<v-stepper :steps="steps" v-model="step"></v-stepper>

<!-- Change routes by step -->
<router-view></router-view>
Script
import path from 'path'
import router from './router'

import { VStepper } from 'vue-stepper-component'

export default {
  components: {
    VStepper
  },
  watch: {
    $route: { 
      handler(route) {
        this.changeRoute(route)
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters({
      steps: types.STEPS,
      step: types.STEP
    }),
    step: {
      get() {
        return this.step
      },
      set(step: route) {
        this.changeRoute({ name: route })
      }
    }
  },
  methods: {
    changeRoute(route) {
      const basename = route.name || path.basename(route.fullPath)

      router.push(basename)
    }
  }
}

Programmatic

Start off by assigning special Vue property ref to the v-stepper component. Then, assign an API method to an Event listener of your choice. The following example is similar to the Demo above, where we assign previous, next and reset to the click event of a button element. 

<v-stepper ref="stepper" :steps="steps" v-model="step"></v-stepper>

<!-- Stepper Controls -->
<button type="button" @click="$refs.stepper.previous()">Previous</button>
<button type="button" @click="$refs.stepper.next()">Next</button>
<button type="button" @click="$refs.stepper.reset()">Reset</button>

API Props

/**
 * Contains the current step value. Very similar to a
 * `value` attribute on an input. In most cases, you'll want
 * to set this as a two-way binding, using the `v-model` directive.
 * @type {Number||undefined||null}
 */
value: {
  type: Number,
  default: 1
},

/**
 * Contains the steps count.
 * @type {Number}
 */
steps: {
  type: Number,
  default: 0
},

/**
 * Sets up the Stepper in either
 * linear or random mode.
 * @type {Boolean}
 */
linear: {
  type: Boolean,
  default: true
},

/**
 * Sync state with storage?
 * @type {Boolean}
 */
persist: {
  type: Boolean,
  default: false
},

/**
 * Which Storage API to use.
 * Should be used with `persist` prop.
 * @type {String}
 */
storekeeper: {
  type: String,
  default: 'localStorage',
  validator(value) {
    return ['localStorage', 'sessionStorage'].includes(value)
  }
},

/**
 * Add/Remove a divider to/from each Step component.
 * @type {Boolean}
 */
withDivider: {
  type: Boolean,
  default: true
},

/**
 * Steps wrapper component.
 * @type {Object}
 */
rootComponent: {
  type: Object,
  default: () => VStepperRoot
},

/**
 * Sets up debug mode, which reveals
 * the actual radio-button behind each step.
 * @type {Boolean}
 */
debug: {
  type: Boolean,
  default: false
}

Support

Please open an issue for support.

License

Copyright (c) 2018 Adi Sahar by

Github