2
0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-22 17:00:32 +03:00

Add method to reset wizard

Closes #101
This commit is contained in:
cristijora
2017-11-27 16:55:49 +02:00
parent eeffd4e52c
commit 8fe072fda8
+15 -6
View File
@@ -1,5 +1,6 @@
<template> <template>
<div class="vue-form-wizard" :class="[stepSize, {vertical: isVertical}]" @keyup.right="focusNextTab" @keyup.left="focusPrevTab"> <div class="vue-form-wizard" :class="[stepSize, {vertical: isVertical}]" @keyup.right="focusNextTab"
@keyup.left="focusPrevTab">
<div class="wizard-header"> <div class="wizard-header">
<slot name="title"> <slot name="title">
<h4 class="wizard-title">{{title}}</h4> <h4 class="wizard-title">{{title}}</h4>
@@ -49,8 +50,8 @@
</div> </div>
<div class="wizard-footer-right"> <div class="wizard-footer-right">
<slot name="custom-buttons-right" v-bind="slotProps"></slot> <slot name="custom-buttons-right" v-bind="slotProps"></slot>
<span @click="nextTab" @keyup.enter="nextTab" v-if="isLastStep" role="button" tabindex="0"> <span @click="nextTab" @keyup.enter="nextTab" v-if="isLastStep" role="button" tabindex="0">
<slot name="finish" v-bind="slotProps"> <slot name="finish" v-bind="slotProps">
<wizard-button :style="fillButtonStyle"> <wizard-button :style="fillButtonStyle">
{{finishButtonText}} {{finishButtonText}}
@@ -58,14 +59,14 @@
</slot> </slot>
</span> </span>
<span @click="nextTab" @keyup.enter="nextTab" role="button" tabindex="0" v-else> <span @click="nextTab" @keyup.enter="nextTab" role="button" tabindex="0" v-else>
<slot name="next" v-bind="slotProps" > <slot name="next" v-bind="slotProps">
<wizard-button :style="fillButtonStyle" <wizard-button :style="fillButtonStyle"
:disabled="loading"> :disabled="loading">
{{nextButtonText}} {{nextButtonText}}
</wizard-button> </wizard-button>
</slot> </slot>
</span> </span>
</div> </div>
</slot> </slot>
</div> </div>
@@ -75,7 +76,8 @@
import WizardButton from './WizardButton.vue' import WizardButton from './WizardButton.vue'
import WizardStep from './WizardStep.vue' import WizardStep from './WizardStep.vue'
import {isPromise, findElementAndFocus, getFocusedTabIndex} from './helpers' import {isPromise, findElementAndFocus, getFocusedTabIndex} from './helpers'
export default{
export default {
name: 'form-wizard', name: 'form-wizard',
components: { components: {
WizardButton, WizardButton,
@@ -255,6 +257,13 @@
tabs.splice(index, 1) tabs.splice(index, 1)
} }
}, },
reset () {
this.maxStep = 0
this.tabs.forEach((tab) => {
tab.checked = false
})
this.navigateToTab(0)
},
navigateToTab (index) { navigateToTab (index) {
let validate = index > this.activeTabIndex let validate = index > this.activeTabIndex
if (index <= this.maxStep) { if (index <= this.maxStep) {