mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-15 10:32:23 +03:00
Code Activity

#24 Add on-change event before any tab change

Browse Source
This commit is contained in:
cristijora
2017-07-02 10:43:30 +03:00
parent 45306e301d
commit 66f3d542a9
6 changed files with 135 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev-example/App.vue
+116 -42
View File
@@ -3,66 +3,140 @@
<button @click="tabs.shift()">Remove one tab</button>
<button @click="tabs.push('testt')">Add one tab</button>
<form-wizard @on-complete="onComplete"
:hide-buttons="false"
shape="square"
color="gray"
@on-loading="setLoading"
@on-error="setError"
class="card" ref="wizard">
<tab-content title="1" icon="ti-settings" :before-change="validateAsync">
First tab
error-color="#a94442"
>
<tab-content title="Personal details"
icon="ti-user" :before-change="validateFirstTab">
<vue-form-generator :model="model"
:schema="firstTabSchema"
:options="formOptions"
ref="firstTabForm">
</vue-form-generator>
</tab-content>
<tab-content title="2" icon="ti-settings" :before-change="validateAsync">
Second tab
<tab-content title="Additional Info"
icon="ti-settings" :before-change="validateSecondTab">
<vue-form-generator :model="model"
:schema="secondTabSchema"
:options="formOptions"
ref="secondTabForm"
>
</vue-form-generator>
</tab-content>
<tab-content title="3" icon="ti-settings">
Third tab
<tab-content title="Last step"
icon="ti-check">
<h4>Your json is ready!</h4>
</tab-content>
<div class="loader" v-if="loadingWizard"></div>
<div v-if="error">
{{error}}
</div>
</form-wizard>
</div>
</template>
<script>
import Vue from 'vue'
import 'bootstrap/dist/css/bootstrap.css'
import VueFormGenerator from 'vue-form-generator'
Vue.use(VueFormGenerator)
export default {
name: 'app',
data () {
return {
loadingWizard: false,
error: null,
count: 0,
tabs: ['test','test2','test3']
model:{
firstName:'',
lastName:'',
email:'',
streetName:'',
streetNumber:'',
city:'',
country:''
},
formOptions: {
validationErrorClass: "has-error",
validationSuccessClass: "has-success",
validateAfterChanged: true
},
firstTabSchema:{
fields:[{
type: "input",
inputType: "text",
label: "First name",
model: "firstName",
required:true,
validator:VueFormGenerator.validators.string,
styleClasses:'col-xs-6'
},
{
type: "input",
inputType: "text",
label: "Last name",
model: "lastName",
required:true,
validator:VueFormGenerator.validators.string,
styleClasses:'col-xs-6'
},
{
type: "input",
inputType: "text",
label: "Email",
model: "email",
required:true,
validator:VueFormGenerator.validators.email,
styleClasses:'col-xs-12'
}
]
},
secondTabSchema:{
fields:[
{
type: "input",
inputType: "text",
label: "Street name",
model: "streetName",
required:true,
validator:VueFormGenerator.validators.string,
styleClasses:'col-xs-9'
},
{
type: "input",
inputType: "text",
label: "Street number",
model: "streetNumber",
required:true,
validator:VueFormGenerator.validators.string,
styleClasses:'col-xs-3'
},
{
type: "input",
inputType: "text",
label: "City",
model: "city",
required:true,
validator:VueFormGenerator.validators.string,
styleClasses:'col-xs-6'
},
{
type: "select",
label: "Country",
model: "country",
required:true,
validator:VueFormGenerator.validators.string,
values:['United Kingdom','Romania','Germany'],
styleClasses:'col-xs-6'
},
]
}
}
},
methods: {
onComplete () {
alert('Yay!')
onComplete: function(){
alert('Yay. Done!');
},
setLoading (value) {
this.loadingWizard = value
validateFirstTab: function(){
return this.$refs.firstTabForm.validate();
},
setError (error) {
this.error = error
},
validateAsync () {
//simulating an error for the first time and a success for the second time
return new Promise((resolve, reject) => {
setTimeout(() => {
if (this.count % 2 === 0) {
reject('Some custom error')
} else {
resolve(true)
}
this.count ++
}, 100)
})
},
validate () {
return true
validateSecondTab: function(){
return this.$refs.secondTabForm.validate();
}
}
}
dist/vue-form-wizard.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
package.json
+2
View File
@@ -38,6 +38,7 @@
"babel-preset-env": "^1.2.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"bootstrap": "^3.3.7",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"chromedriver": "^2.27.2",
@@ -88,6 +89,7 @@
"stats-webpack-plugin": "^0.6.0",
"url-loader": "^0.5.8",
"vue": "^2.2.2",
"vue-form-generator": "^2.0.0",
"vue-loader": "^11.1.4",
"vue-router": "^2.5.1",
"vue-style-loader": "^2.0.0",
src/components/FormWizard.vue
+3
View File
@@ -222,6 +222,7 @@
return index <= this.maxStep
},
navigateToTab (index) {
this.$emit('on-change', this.activeTabIndex, index)
let validate = index > this.activeTabIndex
if (index <= this.maxStep) {
let cb = () => {
@@ -236,6 +237,7 @@
}
},
nextTab () {
this.$emit('on-change', this.activeTabIndex, this.activeTabIndex + 1)
let cb = () => {
if (this.activeTabIndex < this.tabCount - 1) {
this.changeTab(this.activeTabIndex, this.activeTabIndex + 1)
@@ -247,6 +249,7 @@
this.beforeTabChange(this.activeTabIndex, cb)
},
prevTab () {
this.$emit('on-change', this.activeTabIndex, this.activeTabIndex - 1)
let cb = () => {
if (this.activeTabIndex > 0) {
this.setValidationError(null)
src/components/TabContent.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div v-if="active" class="wizard-tab-container">
<div v-show="active" class="wizard-tab-container">
<slot>
</slot>
</div>
yarn.lock
+12
View File
@@ -931,6 +931,10 @@ boom@2.x.x:
dependencies:
hoek "2.x.x"
bootstrap@^3.3.7:
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
brace-expansion@^1.0.0:
version "1.1.7"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.7.tgz#3effc3c50e000531fb720eaff80f0ae8ef23cf59"
@@ -5904,6 +5908,10 @@ void-elements@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
vue-form-generator@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/vue-form-generator/-/vue-form-generator-2.0.0.tgz#c52c2a92d8fbdc85e749044227520125ede7c26b"
vue-hot-reload-api@^2.0.11:
version "2.1.0"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
@@ -5925,6 +5933,10 @@ vue-loader@^11.1.4:
vue-style-loader "^2.0.0"
vue-template-es2015-compiler "^1.2.2"
vue-router@^2.5.1:
version "2.7.0"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.7.0.tgz#16d424493aa51c3c8cce8b7c7210ea4c3a89aff1"
vue-style-loader@^2.0.0:
version "2.0.5"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-2.0.5.tgz#f0efac992febe3f12e493e334edb13cd235a3d22"