diff --git a/dev-example/App.vue b/dev-example/App.vue
index f41f5d6..1eebeb2 100644
--- a/dev-example/App.vue
+++ b/dev-example/App.vue
@@ -16,6 +16,7 @@
My second tab content
Yuhuuu! This seems pretty damn simple
diff --git a/dist/vue-form-wizard.js b/dist/vue-form-wizard.js
index c77df47..beb21a0 100644
--- a/dist/vue-form-wizard.js
+++ b/dist/vue-form-wizard.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e){t.exports=function(t,e,n,i){var a,s=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(a=t,s=t.default);var r="function"==typeof s?s.options:s;if(e&&(r.render=e.render,r.staticRenderFns=e.staticRenderFns),n&&(r._scopeId=n),i){var c=Object.create(r.computed||null);Object.keys(i).forEach(function(t){var e=i[t];c[t]=function(){return e}}),r.computed=c}return{esModule:a,exports:s,options:r}}},function(t,e,n){n(7),n(6);var i=n(0)(n(3),n(8),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){var i=n(0)(n(4),n(9),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={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"},color:{type:String,default:"#e74c3c"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},iconActiveStyle:function(){return{backgroundColor:this.color}},stepCheckedStyle:function(){return{borderColor:this.color}},stepTitleStyle:function(){return{color:this.color}},isStepSquare:function(){return"square"===this.shape},isTabShape:function(){return"tab"===this.shape},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){var t=0;if(this.activeTabIndex>0){t=this.stepPercentage*(2*this.activeTabIndex+1)}else t=this.stepPercentage;return t}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){var e=this;if(t<=this.maxStep){var n=function(){e.changeTab(e.activeTabIndex,t)};this.beforeTabChange(this.activeTabIndex,n)}},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},validateTabChangePromise:function(t,e){var n=this;t.then&&"function"==typeof t.then?(this.setLoading(!0),t.then(function(t){n.setLoading(!1),!0===t?(e(),n.$emit("validated",!0,n.activeTabIndex)):n.$emit("validated",!1,n.activeTabIndex)}).catch(function(){n.setLoading(!1)})):t?(this.$emit("validated",!0,this.activeTabIndex),e()):this.$emit("validated",!1,this.activeTabIndex)},beforeTabChange:function(t,e){if(!this.loading){var n=this.tabs[t];if(n&&void 0!==n.beforeChange){var i=n.beforeChange();this.validateTabChangePromise(i,e)}else e()}},changeTab:function(t,e){var n=this.tabs[t],i=this.tabs[e];return n&&(n.active=!1),i&&(i.active=!0),this.activeTabIndex=e,this.checkStep(),!0},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},nextTab:function(){var t=this,e=function(){t.activeTabIndex0&&(t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.beforeTabChange(this.activeTabIndex,e)},finish:function(){this.$emit("on-complete")}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0&&0===this.startIndex){this.tabs[this.activeTabIndex].active=!0}if(this.startIndex0){t=this.stepPercentage*(2*this.activeTabIndex+1)}else t=this.stepPercentage;return t}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){var e=this;if(t<=this.maxStep){var n=function(){e.changeTab(e.activeTabIndex,t)};this.beforeTabChange(this.activeTabIndex,n)}},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},validateBeforeChange:function(t,e){var n=this;if(t.then&&"function"==typeof t.then)this.setLoading(!0),t.then(function(t){n.setLoading(!1);var i=!0===t;n.executeBeforeChange(i,e)}).catch(function(){n.setLoading(!1)});else{var i=!0===t;this.executeBeforeChange(i,e)}},executeBeforeChange:function(t,e){this.$emit("on-validate",t,this.activeTabIndex),t&&e()},beforeTabChange:function(t,e){if(!this.loading){var n=this.tabs[t];if(n&&void 0!==n.beforeChange){var i=n.beforeChange();this.validateBeforeChange(i,e)}else e()}},changeTab:function(t,e){var n=this.tabs[t],i=this.tabs[e];return n&&(n.active=!1),i&&(i.active=!0),this.activeTabIndex=e,this.checkStep(),!0},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},nextTab:function(){var t=this,e=function(){t.activeTabIndex0&&(t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.beforeTabChange(this.activeTabIndex,e)},finish:function(){var t=this,e=function(){t.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0&&0===this.startIndex){this.tabs[this.activeTabIndex].active=!0}if(this.startIndex {
this.setLoading(false)
- if (res === true) {
- callback()
- this.$emit('validated', true, this.activeTabIndex)
- } else {
- this.$emit('validated', false, this.activeTabIndex)
- }
+ let validationResult = res === true
+ this.executeBeforeChange(validationResult, callback)
}).catch(() => {
this.setLoading(false)
})
// we have a simple function
} else {
- if (promiseFn) {
- this.$emit('validated', true, this.activeTabIndex)
- callback()
- } else {
- this.$emit('validated', false, this.activeTabIndex)
- }
+ let validationResult = promiseFn === true
+ this.executeBeforeChange(validationResult, callback)
+ }
+ },
+ executeBeforeChange (validationResult, callback) {
+ this.$emit('on-validate', validationResult, this.activeTabIndex)
+ if (validationResult) {
+ callback()
}
},
beforeTabChange (index, callback) {
@@ -239,7 +237,7 @@
let oldTab = this.tabs[index]
if (oldTab && oldTab.beforeChange !== undefined) {
let tabChangeRes = oldTab.beforeChange()
- this.validateTabChangePromise(tabChangeRes, callback)
+ this.validateBeforeChange(tabChangeRes, callback)
} else {
callback()
}
@@ -291,7 +289,10 @@
this.beforeTabChange(this.activeTabIndex, cb)
},
finish () {
- this.$emit('on-complete')
+ let cb = () => {
+ this.$emit('on-complete')
+ }
+ this.beforeTabChange(this.activeTabIndex, cb)
}
},
mounted () {