Tab Wizard Management Component For Vue 3

Install & Download:

Description:

A lightweight, flexible, customizable, and high-performance tab form wizard component for Vue 3.

How to use it:

1. Import and register the component.

// global 
import Vue3FormWizard from 'vue3-form-wizard'
import 'vue3-form-wizard/dist/style.css'
Vue.use(Vue3FormWizard)

// local
import {FormWizard, TabContent} from 'vue3-form-wizard'
import 'vue3-form-wizard/dist/style.css'
components: {
  FormWizard,
  TabContent
}

2. Add tab content to the form wizard.

<form-wizard>
  <tab-content title="Personal details">
    My first tab content
  </tab-content>
  <tab-content title="Additional Info">
      My second tab content
   </tab-content>
   <tab-content title="Last step">
     Yuhuuu! This seems pretty damn simple
   </tab-content>
</form-wizard>

3. Form wizard props.

title: {
  type: String,
  default: 'Awesome Wizard'
},
subtitle: {
  type: String,
  default: 'Split a complicated flow in multiple steps'
},
nextButtonText: {
  type: String,
  default: 'Next'
},
backButtonText: {
  type: String,
  default: 'Back'
},
finishButtonText: {
  type: String,
  default: 'Finish'
},
stepSize: {
  type: String,
  default: 'md',
  validator: (value) => {
    let acceptedValues = ['xs', 'sm', 'md', 'lg']
    return acceptedValues.indexOf(value) !== -1
  }
},
/***
*  Sets validation (on/off) for back button. By default back button ignores validation
*/
validateOnBack: Boolean,
/***
* Applies to text, border and circle
*/
color: {
  type: String,
  default: '#e74c3c' //circle, border and text color
},
/***
*  Is set to current step and text when beforeChange function fails
*/
errorColor: {
  type: String,
  default: '#8b0000'
},
/**
* Can take one of the following values: 'circle|square|tab`
*/
shape: {
  type: String,
  default: 'circle'
},
/**
* name of the transition when transition between steps
*/
transition: {
  type: String,
  default: '' //name of the transition when transition between steps
},
/***
* Index of the initial tab to display
*/
startIndex: {
  type: Number,
  default: 0
}
/*
 * If true, the wizard not back step on click wizard step
 */
disableBackOnClickStep: {
  type: Boolean,
  default: false,
},
/*
 * If true, the wizard not back step on click wizard step and back button
 */
disableBack: {
  type: Boolean,
  default: false,
},

4. Tab content props.

title: {
  type: String,
  default: ''
},
/***
 * Icon name for the upper circle corresponding to the tab
 * Supports themify icons only for now.
 */
icon: {
  type: String,
  default: ''
},
/***
 * Only render the content when the tab is active
 */
lazy: {
  type: Boolean,
  default: false
},
/***
 * Function to execute before tab switch. Return value must be boolean
 * If the return result is false, tab switch is restricted
 */
beforeChange: {
  type: Function
}

5. Available events.