diff --git a/dist/example/index.html b/dist/example/index.html index 6aea79c..457b5e1 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -10,16 +10,20 @@
- - - My first tab content - - - My second tab content - - - Yuhuuu! This seems pretty damn simple - + + + + My first tab content + + + My second tab content + + + Yuhuuu! This seems pretty damn simple +
@@ -30,6 +34,11 @@ Vue.use(VueTabWizard) new Vue({ el: '#app', + methods: { + onComplete: function(){ + alert('Yay. Done!'); + } + } }) diff --git a/dist/vue-tab-wizard.js b/dist/vue-tab-wizard.js index eacf7d0..2fb1ae5 100644 --- a/dist/vue-tab-wizard.js +++ b/dist/vue-tab-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.VueTabWizard=e():t.VueTabWizard=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);var i=n(0)(n(3),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){n(6);var i=n(0)(n(4),n(8),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabWizard.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] TabWizard.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={name:"tab-content",props:{title:{type:String,default:""},beforeChange:{type:Function}},data:function(){return{show:!1,active:!1}}}},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"}},data:function(){return{activeTabIndex:0,isLastStep:!1,maxStep:0,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressStyle:function(){var t=0;if(this.activeTabIndex>0){var e=this.activeTabIndex%2==0?3:2;t=this.stepPercentage*(this.activeTabIndex+e)}else t=this.stepPercentage;return"width: "+t+"%;"}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){t<=this.maxStep&&this.beforeTabChange(this.activeTabIndex)&&this.changeTab(this.activeTabIndex,t)},beforeTabChange:function(t){var e=this.tabs[t];return!e||void 0===e.beforeChange||e.beforeChange()},changeTab:function(t,e){var n=this.tabs[t],i=this.tabs[e];return n&&(n.show=!1,n.active=!1),i&&(i.show=!0,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(){this.beforeTabChange(this.activeTabIndex)&&(this.activeTabIndex0&&(this.activeTabIndex--,this.isLastStep=!1)}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0){var t=this.tabs[this.activeTabIndex];t.show=!0,t.active=!0}},watch:{activeTabIndex:function(t,e){this.beforeTabChange(e)&&this.changeTab(e,t)}}}},function(t,e,n){t.exports={TabWizard:n(2),TabContent:n(1),install:function(e){e.component("tab-wizard",t.exports.TabWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tab-wizard",attrs:{"data-color":"orange"}},[n("div",{staticClass:"wizard-header"},[t._t("title",[n("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),n("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),n("div",{staticClass:"wizard-navigation"},[n("div",{staticClass:"progress-with-circle"},[n("div",{staticClass:"progress-bar",style:t.progressStyle,attrs:{role:"progressbar"}})]),t._v(" "),n("ul",{staticClass:"nav nav-pills"},t._l(t.tabs,function(e,i){return n("li",{class:{active:e.active}},[n("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(i)}}},[n("div",{staticClass:"icon-circle",class:{checked:t.isChecked(i)}},[n("i",{staticClass:"ti-user"})]),t._v("\n "+t._s(e.title)+"\n ")])])})),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)]),t._v(" "),n("div",{staticClass:"card-footer"},[t.displayPrevButton?n("button",{staticClass:"btn btn-previous btn-default btn-wd",attrs:{type:"button"},on:{click:t.prevTab}},[t._v("\n "+t._s(t.backButtonText)+"\n ")]):t._e(),t._v(" "),t.isLastStep?n("button",{staticClass:"btn btn-info btn-fill btn-wd btn-next pull-right",attrs:{type:"button"},on:{click:t.nextTab}},[t._v("\n "+t._s(t.finishButtonText)+"\n ")]):n("button",{staticClass:"btn btn-info btn-fill btn-wd btn-next pull-right",attrs:{type:"button"},on:{click:t.nextTab}},[t._v("\n "+t._s(t.nextButtonText)+"\n ")]),t._v(" "),n("div",{staticClass:"clearfix"})])])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.show?n("div",{staticClass:"tab-container"},[t._t("default")],2):t._e()},staticRenderFns:[]},t.exports.render._withStripped=!0}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueTabWizard=e():t.VueTabWizard=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);var i=n(0)(n(3),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){n(6);var i=n(0)(n(4),n(8),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabWizard.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] TabWizard.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={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function}},data:function(){return{show:!1,active:!1}}}},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"}},data:function(){return{activeTabIndex:0,isLastStep:!1,maxStep:0,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressStyle:function(){var t=0;if(this.activeTabIndex>0){var e=this.activeTabIndex%2==0?3:2;t=this.stepPercentage*(this.activeTabIndex+e)}else t=this.stepPercentage;return"width: "+t+"%;"}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){t<=this.maxStep&&this.beforeTabChange(this.activeTabIndex)&&this.changeTab(this.activeTabIndex,t)},beforeTabChange:function(t){var e=this.tabs[t];return!e||void 0===e.beforeChange||e.beforeChange()},changeTab:function(t,e){var n=this.tabs[t],i=this.tabs[e];return n&&(n.show=!1,n.active=!1),i&&(i.show=!0,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(){this.beforeTabChange(this.activeTabIndex)&&(this.activeTabIndex0&&(this.activeTabIndex--,this.isLastStep=!1)},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){var t=this.tabs[this.activeTabIndex];t.show=!0,t.active=!0}},watch:{activeTabIndex:function(t,e){this.beforeTabChange(e)&&this.changeTab(e,t)}}}},function(t,e,n){t.exports={TabWizard:n(2),TabContent:n(1),install:function(e){e.component("tab-wizard",t.exports.TabWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tab-wizard",attrs:{"data-color":"orange"}},[n("div",{staticClass:"wizard-header"},[t._t("title",[n("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),n("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),n("div",{staticClass:"wizard-navigation"},[n("div",{staticClass:"progress-with-circle"},[n("div",{staticClass:"progress-bar",style:t.progressStyle,attrs:{role:"progressbar"}})]),t._v(" "),n("ul",{staticClass:"nav nav-pills"},t._l(t.tabs,function(e,i){return n("li",{class:{active:e.active}},[n("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(i)}}},[n("div",{staticClass:"icon-circle",class:{checked:t.isChecked(i)}},[e.icon?n("i",{class:e.icon}):t._e()]),t._v("\n "+t._s(e.title)+"\n ")])])})),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)]),t._v(" "),n("div",{staticClass:"card-footer"},[t.displayPrevButton?n("button",{staticClass:"btn btn-previous btn-default btn-wd",attrs:{type:"button"},on:{click:t.prevTab}},[t._v("\n "+t._s(t.backButtonText)+"\n ")]):t._e(),t._v(" "),t.isLastStep?n("button",{staticClass:"btn btn-info btn-fill btn-wd btn-next pull-right",attrs:{type:"button"},on:{click:t.finish}},[t._v("\n "+t._s(t.finishButtonText)+"\n ")]):n("button",{staticClass:"btn btn-info btn-fill btn-wd btn-next pull-right",attrs:{type:"button"},on:{click:t.nextTab}},[t._v("\n "+t._s(t.nextButtonText)+"\n ")]),t._v(" "),n("div",{staticClass:"clearfix"})])])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.show?n("div",{staticClass:"tab-container"},[t._t("default")],2):t._e()},staticRenderFns:[]},t.exports.render._withStripped=!0}])}); \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 7159134..dd144ec 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,14 +1,16 @@