diff --git a/README.md b/README.md index d55a19e..b5a3a1a 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# vue-tab-wizard -A dynamic tab wizard to split your forms easier +# vue-form-wizard +A dynamic form wizard to split your forms easier -Vue-tab-wizard is a vue based component with **no external depenendcies** which simplifies tab wizard management and allows you to focus on the functional part of your app rather than +Vue-form-wizard is a vue based component with **no external depenendcies** which simplifies tab wizard management and allows you to focus on the functional part of your app rather than wasting time on details. Just forget about id's, external scripts and jQuery dependencies # Demos @@ -19,34 +19,34 @@ Other demos: # Usage ## NPM -`npm install vue-tab-wizard` +`npm install vue-form-wizard` ## Or alternatively directly include the javascript Download the css and js files from `dist` folder or reference them directly from github (check jsfiddle links) ```html - - + + ``` ## Component registration ```js //global registration -import 'vue-tab-wizard' -import 'vue-tab-wizard/dist/vue-tab-wizard.min.css' +import 'vue-form-wizard' +import 'vue-form-wizard/dist/vue-form-wizard.min.css' Vue.use(VueTabWizard) //local registration -import {TabWizard, TabContent} from 'vue-tab-wizard' -import 'vue-tab-wizard/dist/vue-tab-wizard.min.css' +import {FormWizard, TabContent} from 'vue-form-wizard' +import 'vue-formwizard/dist/vue-form-wizard.min.css' //component code components: { - TabWizard, + FormWizard, TabContent } ``` ## Template usage ```html - + My first tab content @@ -56,11 +56,11 @@ components: { Yuhuuu! This seems pretty damn simple - + ``` # Props -## Tab Wizard props +## Form Wizard props ```js props: { title: { diff --git a/dist/example/index.html b/dist/example/index.html index c0e8a8f..d1accb2 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -10,7 +10,7 @@
- + My first tab content @@ -23,7 +23,7 @@ icon="ti-check"> Yuhuuu! This seems pretty damn simple - +
diff --git a/dist/vue-form-wizard.js b/dist/vue-form-wizard.js new file mode 100644 index 0000000..7aa752e --- /dev/null +++ b/dist/vue-form-wizard.js @@ -0,0 +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(s){if(n[s])return n[s].exports;var i=n[s]={i:s,l:!1,exports:{}};return t[s].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,s){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:s})},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,s){var i,a=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(i=t,a=t.default);var r="function"==typeof a?a.options:a;if(e&&(r.render=e.render,r.staticRenderFns=e.staticRenderFns),n&&(r._scopeId=n),s){var c=Object.create(r.computed||null);Object.keys(s).forEach(function(t){var e=s[t];c[t]=function(){return e}}),r.computed=c}return{esModule:i,exports:a,options:r}}},function(t,e,n){n(7),n(6);var s=n(0)(n(3),n(8),null,null);s.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",s.esModule&&Object.keys(s.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),s.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=s.exports},function(t,e,n){var s=n(0)(n(4),n(9),null,null);s.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",s.esModule&&Object.keys(s.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),s.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=s.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,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){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],s=this.tabs[e];return n&&(n.show=!1,n.active=!1),s&&(s.show=!0,s.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}this.startIndex.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary.active,.btn-primary:active,.btn-primary:hover,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success.active,.btn-success:active,.btn-success:hover,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color:#fff;background-color:#398439;border-color:#255625}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info.active,.btn-info:active,.btn-info:hover,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning.active,.btn-warning:active,.btn-warning:hover,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger.active,.btn-danger:active,.btn-danger:hover,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{color:#337ab7;font-weight:400;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-sm{padding:5px 10px}.btn-sm,.btn-xs{font-size:12px;line-height:1.5;border-radius:3px}.btn-xs{padding:1px 5px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.nav{margin-bottom:0;padding-left:0;list-style:none}.nav>li,.nav>li>a{position:relative;display:block}.nav>li>a{padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;background-color:transparent;cursor:not-allowed}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}@-webkit-keyframes progress-bar-stripes{0%{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{0%{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{0%{background-position:40px 0}to{background-position:0 0}}.progress{overflow:hidden;height:20px;margin-bottom:20px;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-image:-o-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 25%,transparent 50%,hsla(0,0%,100%,.15) 50%,hsla(0,0%,100%,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-image:-o-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 25%,transparent 50%,hsla(0,0%,100%,.15) 50%,hsla(0,0%,100%,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-image:-o-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 25%,transparent 50%,hsla(0,0%,100%,.15) 50%,hsla(0,0%,100%,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-image:-o-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 25%,transparent 50%,hsla(0,0%,100%,.15) 50%,hsla(0,0%,100%,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-image:-o-linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 25%,transparent 50%,hsla(0,0%,100%,.15) 50%,hsla(0,0%,100%,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.clearfix:after,.clearfix:before,.nav:after,.nav:before{content:" ";display:table}.clearfix:after,.nav:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}.btn,.navbar .navbar-nav>li>a.btn{box-sizing:border-box;border-width:2px;background-color:transparent;font-size:14px;font-weight:600;padding:7px 18px;border-color:#66615b;color:#66615b;transition:all .15s linear}.btn.active,.btn:active,.btn:active:focus,.btn:active:hover,.btn:focus,.btn:hover,.navbar .navbar-nav>li>a.btn.active,.navbar .navbar-nav>li>a.btn:active,.navbar .navbar-nav>li>a.btn:active:focus,.navbar .navbar-nav>li>a.btn:active:hover,.navbar .navbar-nav>li>a.btn:focus,.navbar .navbar-nav>li>a.btn:hover,.open>.btn.dropdown-toggle,.open>.btn.dropdown-toggle:focus,.open>.btn.dropdown-toggle:hover,.open>.navbar .navbar-nav>li>a.btn.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.dropdown-toggle:focus,.open>.navbar .navbar-nav>li>a.btn.dropdown-toggle:hover{background-color:#66615b;color:hsla(0,0%,100%,.85);border-color:#66615b}.btn.active .caret,.btn:active .caret,.btn:active:focus .caret,.btn:active:hover .caret,.btn:focus .caret,.btn:hover .caret,.navbar .navbar-nav>li>a.btn.active .caret,.navbar .navbar-nav>li>a.btn:active .caret,.navbar .navbar-nav>li>a.btn:active:focus .caret,.navbar .navbar-nav>li>a.btn:active:hover .caret,.navbar .navbar-nav>li>a.btn:focus .caret,.navbar .navbar-nav>li>a.btn:hover .caret,.open>.btn.dropdown-toggle .caret,.open>.btn.dropdown-toggle:focus .caret,.open>.btn.dropdown-toggle:hover .caret,.open>.navbar .navbar-nav>li>a.btn.dropdown-toggle .caret,.open>.navbar .navbar-nav>li>a.btn.dropdown-toggle:focus .caret,.open>.navbar .navbar-nav>li>a.btn.dropdown-toggle:hover .caret{border-top-color:hsla(0,0%,100%,.85)}.btn.disabled,.btn.disabled.active,.btn.disabled.focus,.btn.disabled:active,.btn.disabled:focus,.btn.disabled:hover,.btn:disabled,.btn:disabled.active,.btn:disabled.focus,.btn:disabled:active,.btn:disabled:focus,.btn:disabled:hover,.btn[disabled],.btn[disabled].active,.btn[disabled].focus,.btn[disabled]:active,.btn[disabled]:focus,.btn[disabled]:hover,.navbar .navbar-nav>li>a.btn.disabled,.navbar .navbar-nav>li>a.btn.disabled.active,.navbar .navbar-nav>li>a.btn.disabled.focus,.navbar .navbar-nav>li>a.btn.disabled:active,.navbar .navbar-nav>li>a.btn.disabled:focus,.navbar .navbar-nav>li>a.btn.disabled:hover,.navbar .navbar-nav>li>a.btn:disabled,.navbar .navbar-nav>li>a.btn:disabled.active,.navbar .navbar-nav>li>a.btn:disabled.focus,.navbar .navbar-nav>li>a.btn:disabled:active,.navbar .navbar-nav>li>a.btn:disabled:focus,.navbar .navbar-nav>li>a.btn:disabled:hover,.navbar .navbar-nav>li>a.btn[disabled],.navbar .navbar-nav>li>a.btn[disabled].active,.navbar .navbar-nav>li>a.btn[disabled].focus,.navbar .navbar-nav>li>a.btn[disabled]:active,.navbar .navbar-nav>li>a.btn[disabled]:focus,.navbar .navbar-nav>li>a.btn[disabled]:hover,fieldset[disabled] .btn,fieldset[disabled] .btn.active,fieldset[disabled] .btn.focus,fieldset[disabled] .btn:active,fieldset[disabled] .btn:focus,fieldset[disabled] .btn:hover,fieldset[disabled] .navbar .navbar-nav>li>a.btn,fieldset[disabled] .navbar .navbar-nav>li>a.btn.active,fieldset[disabled] .navbar .navbar-nav>li>a.btn.focus,fieldset[disabled] .navbar .navbar-nav>li>a.btn:active,fieldset[disabled] .navbar .navbar-nav>li>a.btn:focus,fieldset[disabled] .navbar .navbar-nav>li>a.btn:hover{background-color:transparent;border-color:#66615b}.btn.btn-fill,.navbar .navbar-nav>li>a.btn.btn-fill{color:#fff;background-color:#66615b;opacity:1;filter:alpha(opacity=100)}.btn.btn-fill.active,.btn.btn-fill:active,.btn.btn-fill:focus,.btn.btn-fill:hover,.navbar .navbar-nav>li>a.btn.btn-fill.active,.navbar .navbar-nav>li>a.btn.btn-fill:active,.navbar .navbar-nav>li>a.btn.btn-fill:focus,.navbar .navbar-nav>li>a.btn.btn-fill:hover,.open>.btn.btn-fill.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.btn-fill.dropdown-toggle{background-color:#484541;color:#fff;border-color:#484541}.btn.btn-fill .caret,.navbar .navbar-nav>li>a.btn.btn-fill .caret{border-top-color:#fff}.btn.btn-simple.active,.btn.btn-simple:active,.btn.btn-simple:focus,.btn.btn-simple:hover,.navbar .navbar-nav>li>a.btn.btn-simple.active,.navbar .navbar-nav>li>a.btn.btn-simple:active,.navbar .navbar-nav>li>a.btn.btn-simple:focus,.navbar .navbar-nav>li>a.btn.btn-simple:hover,.open>.btn.btn-simple.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.btn-simple.dropdown-toggle{background-color:transparent;color:#484541}.btn.btn-simple .caret,.navbar .navbar-nav>li>a.btn.btn-simple .caret{border-top-color:#fff}.btn .caret,.navbar .navbar-nav>li>a.btn .caret{border-top-color:#66615b}.btn:focus,.btn:hover,.navbar .navbar-nav>li>a.btn:focus,.navbar .navbar-nav>li>a.btn:hover{outline:0!important}.btn.active,.btn:active,.navbar .navbar-nav>li>a.btn.active,.navbar .navbar-nav>li>a.btn:active,.open>.btn.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.dropdown-toggle{box-shadow:none;outline:0!important}.btn.btn-icon,.navbar .navbar-nav>li>a.btn.btn-icon{border-radius:25px;padding:7px 10px}.btn.btn-icon i,.navbar .navbar-nav>li>a.btn.btn-icon i{margin-right:0}.btn [class*=ti-],.navbar .navbar-nav>li>a.btn [class*=ti-]{vertical-align:middle}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-2px}.btn-primary,.navbar .navbar-nav>li>a.btn.btn-primary{border-color:#7a9e9f;color:#7a9e9f}.btn-primary.active,.btn-primary:active,.btn-primary:active:focus,.btn-primary:active:hover,.btn-primary:focus,.btn-primary:hover,.navbar .navbar-nav>li>a.btn.btn-primary.active,.navbar .navbar-nav>li>a.btn.btn-primary:active,.navbar .navbar-nav>li>a.btn.btn-primary:active:focus,.navbar .navbar-nav>li>a.btn.btn-primary:active:hover,.navbar .navbar-nav>li>a.btn.btn-primary:focus,.navbar .navbar-nav>li>a.btn.btn-primary:hover,.open>.btn-primary.dropdown-toggle,.open>.btn-primary.dropdown-toggle:focus,.open>.btn-primary.dropdown-toggle:hover,.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:focus,.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:hover{background-color:#7a9e9f;color:hsla(0,0%,100%,.85);border-color:#7a9e9f}.btn-primary.active .caret,.btn-primary:active .caret,.btn-primary:active:focus .caret,.btn-primary:active:hover .caret,.btn-primary:focus .caret,.btn-primary:hover .caret,.navbar .navbar-nav>li>a.btn.btn-primary.active .caret,.navbar .navbar-nav>li>a.btn.btn-primary:active .caret,.navbar .navbar-nav>li>a.btn.btn-primary:active:focus .caret,.navbar .navbar-nav>li>a.btn.btn-primary:active:hover .caret,.navbar .navbar-nav>li>a.btn.btn-primary:focus .caret,.navbar .navbar-nav>li>a.btn.btn-primary:hover .caret,.open>.btn-primary.dropdown-toggle .caret,.open>.btn-primary.dropdown-toggle:focus .caret,.open>.btn-primary.dropdown-toggle:hover .caret,.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle .caret,.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:focus .caret,.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:hover .caret{border-top-color:hsla(0,0%,100%,.85)}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary:disabled,.btn-primary:disabled.active,.btn-primary:disabled.focus,.btn-primary:disabled:active,.btn-primary:disabled:focus,.btn-primary:disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,.navbar .navbar-nav>li>a.btn.btn-primary.disabled,.navbar .navbar-nav>li>a.btn.btn-primary.disabled.active,.navbar .navbar-nav>li>a.btn.btn-primary.disabled.focus,.navbar .navbar-nav>li>a.btn.btn-primary.disabled:active,.navbar .navbar-nav>li>a.btn.btn-primary.disabled:focus,.navbar .navbar-nav>li>a.btn.btn-primary.disabled:hover,.navbar .navbar-nav>li>a.btn.btn-primary:disabled,.navbar .navbar-nav>li>a.btn.btn-primary:disabled.active,.navbar .navbar-nav>li>a.btn.btn-primary:disabled.focus,.navbar .navbar-nav>li>a.btn.btn-primary:disabled:active,.navbar .navbar-nav>li>a.btn.btn-primary:disabled:focus,.navbar .navbar-nav>li>a.btn.btn-primary:disabled:hover,.navbar .navbar-nav>li>a.btn.btn-primary[disabled],.navbar .navbar-nav>li>a.btn.btn-primary[disabled].active,.navbar .navbar-nav>li>a.btn.btn-primary[disabled].focus,.navbar .navbar-nav>li>a.btn.btn-primary[disabled]:active,.navbar .navbar-nav>li>a.btn.btn-primary[disabled]:focus,.navbar .navbar-nav>li>a.btn.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-primary,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-primary.active,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-primary.focus,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-primary:active,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-primary:focus,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-primary:hover{background-color:transparent;border-color:#7a9e9f}.btn-primary.btn-fill,.navbar .navbar-nav>li>a.btn.btn-primary.btn-fill{color:#fff;background-color:#7a9e9f;opacity:1;filter:alpha(opacity=100)}.btn-primary.btn-fill.active,.btn-primary.btn-fill:active,.btn-primary.btn-fill:focus,.btn-primary.btn-fill:hover,.navbar .navbar-nav>li>a.btn.btn-primary.btn-fill.active,.navbar .navbar-nav>li>a.btn.btn-primary.btn-fill:active,.navbar .navbar-nav>li>a.btn.btn-primary.btn-fill:focus,.navbar .navbar-nav>li>a.btn.btn-primary.btn-fill:hover,.open>.btn-primary.btn-fill.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.btn-primary.btn-fill.dropdown-toggle{background-color:#5e8283;color:#fff;border-color:#5e8283}.btn-primary.btn-fill .caret,.navbar .navbar-nav>li>a.btn.btn-primary.btn-fill .caret{border-top-color:#fff}.btn-primary.btn-simple.active,.btn-primary.btn-simple:active,.btn-primary.btn-simple:focus,.btn-primary.btn-simple:hover,.navbar .navbar-nav>li>a.btn.btn-primary.btn-simple.active,.navbar .navbar-nav>li>a.btn.btn-primary.btn-simple:active,.navbar .navbar-nav>li>a.btn.btn-primary.btn-simple:focus,.navbar .navbar-nav>li>a.btn.btn-primary.btn-simple:hover,.open>.btn-primary.btn-simple.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.btn-primary.btn-simple.dropdown-toggle{background-color:transparent;color:#5e8283}.btn-primary.btn-simple .caret,.navbar .navbar-nav>li>a.btn.btn-primary.btn-simple .caret{border-top-color:#fff}.btn-primary .caret,.navbar .navbar-nav>li>a.btn.btn-primary .caret{border-top-color:#7a9e9f}.btn-info,.navbar .navbar-nav>li>a.btn.btn-info{border-color:#68b3c8;color:#68b3c8}.btn-info.active,.btn-info:active,.btn-info:active:focus,.btn-info:active:hover,.btn-info:focus,.btn-info:hover,.navbar .navbar-nav>li>a.btn.btn-info.active,.navbar .navbar-nav>li>a.btn.btn-info:active,.navbar .navbar-nav>li>a.btn.btn-info:active:focus,.navbar .navbar-nav>li>a.btn.btn-info:active:hover,.navbar .navbar-nav>li>a.btn.btn-info:focus,.navbar .navbar-nav>li>a.btn.btn-info:hover,.open>.btn-info.dropdown-toggle,.open>.btn-info.dropdown-toggle:focus,.open>.btn-info.dropdown-toggle:hover,.open>.navbar .navbar-nav>li>a.btn.btn-info.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.btn-info.dropdown-toggle:focus,.open>.navbar .navbar-nav>li>a.btn.btn-info.dropdown-toggle:hover{background-color:#68b3c8;color:hsla(0,0%,100%,.85);border-color:#68b3c8}.btn-info.active .caret,.btn-info:active .caret,.btn-info:active:focus .caret,.btn-info:active:hover .caret,.btn-info:focus .caret,.btn-info:hover .caret,.navbar .navbar-nav>li>a.btn.btn-info.active .caret,.navbar .navbar-nav>li>a.btn.btn-info:active .caret,.navbar .navbar-nav>li>a.btn.btn-info:active:focus .caret,.navbar .navbar-nav>li>a.btn.btn-info:active:hover .caret,.navbar .navbar-nav>li>a.btn.btn-info:focus .caret,.navbar .navbar-nav>li>a.btn.btn-info:hover .caret,.open>.btn-info.dropdown-toggle .caret,.open>.btn-info.dropdown-toggle:focus .caret,.open>.btn-info.dropdown-toggle:hover .caret,.open>.navbar .navbar-nav>li>a.btn.btn-info.dropdown-toggle .caret,.open>.navbar .navbar-nav>li>a.btn.btn-info.dropdown-toggle:focus .caret,.open>.navbar .navbar-nav>li>a.btn.btn-info.dropdown-toggle:hover .caret{border-top-color:hsla(0,0%,100%,.85)}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info:disabled,.btn-info:disabled.active,.btn-info:disabled.focus,.btn-info:disabled:active,.btn-info:disabled:focus,.btn-info:disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,.navbar .navbar-nav>li>a.btn.btn-info.disabled,.navbar .navbar-nav>li>a.btn.btn-info.disabled.active,.navbar .navbar-nav>li>a.btn.btn-info.disabled.focus,.navbar .navbar-nav>li>a.btn.btn-info.disabled:active,.navbar .navbar-nav>li>a.btn.btn-info.disabled:focus,.navbar .navbar-nav>li>a.btn.btn-info.disabled:hover,.navbar .navbar-nav>li>a.btn.btn-info:disabled,.navbar .navbar-nav>li>a.btn.btn-info:disabled.active,.navbar .navbar-nav>li>a.btn.btn-info:disabled.focus,.navbar .navbar-nav>li>a.btn.btn-info:disabled:active,.navbar .navbar-nav>li>a.btn.btn-info:disabled:focus,.navbar .navbar-nav>li>a.btn.btn-info:disabled:hover,.navbar .navbar-nav>li>a.btn.btn-info[disabled],.navbar .navbar-nav>li>a.btn.btn-info[disabled].active,.navbar .navbar-nav>li>a.btn.btn-info[disabled].focus,.navbar .navbar-nav>li>a.btn.btn-info[disabled]:active,.navbar .navbar-nav>li>a.btn.btn-info[disabled]:focus,.navbar .navbar-nav>li>a.btn.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-info,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-info.active,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-info.focus,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-info:active,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-info:focus,fieldset[disabled] .navbar .navbar-nav>li>a.btn.btn-info:hover{background-color:transparent;border-color:#68b3c8}.btn-info.btn-fill,.navbar .navbar-nav>li>a.btn.btn-info.btn-fill{color:#fff;background-color:#68b3c8;opacity:1;filter:alpha(opacity=100)}.btn-info.btn-fill.active,.btn-info.btn-fill:active,.btn-info.btn-fill:focus,.btn-info.btn-fill:hover,.navbar .navbar-nav>li>a.btn.btn-info.btn-fill.active,.navbar .navbar-nav>li>a.btn.btn-info.btn-fill:active,.navbar .navbar-nav>li>a.btn.btn-info.btn-fill:focus,.navbar .navbar-nav>li>a.btn.btn-info.btn-fill:hover,.open>.btn-info.btn-fill.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.btn-info.btn-fill.dropdown-toggle{background-color:#429cb6;color:#fff;border-color:#429cb6}.btn-info.btn-fill .caret,.navbar .navbar-nav>li>a.btn.btn-info.btn-fill .caret{border-top-color:#fff}.btn-info.btn-simple.active,.btn-info.btn-simple:active,.btn-info.btn-simple:focus,.btn-info.btn-simple:hover,.navbar .navbar-nav>li>a.btn.btn-info.btn-simple.active,.navbar .navbar-nav>li>a.btn.btn-info.btn-simple:active,.navbar .navbar-nav>li>a.btn.btn-info.btn-simple:focus,.navbar .navbar-nav>li>a.btn.btn-info.btn-simple:hover,.open>.btn-info.btn-simple.dropdown-toggle,.open>.navbar .navbar-nav>li>a.btn.btn-info.btn-simple.dropdown-toggle{background-color:transparent;color:#429cb6}.btn-info.btn-simple .caret,.navbar .navbar-nav>li>a.btn.btn-info.btn-simple .caret{border-top-color:#fff}.btn-info .caret,.navbar .navbar-nav>li>a.btn.btn-info .caret{border-top-color:#68b3c8}.btn.btn-disabled,.btn.disabled,.btn:disabled,.btn[disabled]{opacity:.5;filter:alpha(opacity=50)}.btn-disabled{cursor:default}.btn-simple{border:0;padding:7px 18px}.btn-wd,.navbar .navbar-nav>li>a.btn.btn-wd{min-width:140px}.btn-group.select{width:100%}.btn-group.select .btn{text-align:left}.btn-group.select .caret{position:absolute;top:50%;margin-top:-1px;right:8px}.vue-tab-wizard .nav-pills{margin-top:0;position:relative;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.vue-tab-wizard .nav-pills a,.vue-tab-wizard .nav-pills li{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1}.vue-tab-wizard .nav-pills a{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-tab-wizard .nav-pills>li+li{margin-left:0}.vue-tab-wizard .nav-pills>li>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0 auto;color:rgba(0,0,0,.2);position:relative;top:3px;z-index:100}.vue-tab-wizard .nav-pills>li>a:focus,.vue-tab-wizard .nav-pills>li>a:hover{background-color:transparent;color:rgba(0,0,0,.2);outline:0!important;cursor:pointer}.vue-tab-wizard .nav-pills>li.active>a,.vue-tab-wizard .nav-pills>li.active>a:focus,.vue-tab-wizard .nav-pills>li.active>a:hover{background-color:transparent;transition:font-size .2s linear}.vue-tab-wizard .nav-pills>li.active>a .icon,.vue-tab-wizard .nav-pills>li.active>a:focus .icon,.vue-tab-wizard .nav-pills>li.active>a:hover .icon{color:#fff;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;transition:all .2s linear}.vue-tab-wizard{padding-bottom:20px}.vue-tab-wizard .icon-circle{font-size:18px;border:3px solid #f3f2ee;border-radius:50%;font-weight:600;width:70px;height:70px;background-color:#fff;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center}.vue-tab-wizard .icon-circle.square_shape{border-radius:0}.vue-tab-wizard .icon-circle.tab_shape{width:100%;min-width:100px;height:40px;border:none;background-color:#f3f2ee;border-radius:0}.vue-tab-wizard .icon-circle .icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:40%}.vue-tab-wizard .icon-circle .icon-container.square_shape,.vue-tab-wizard .icon-circle .icon-container.tab_shape{border-radius:0}.vue-tab-wizard .icon-circle .icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vue-tab-wizard .tab-content{min-height:100px;padding:30px 20px 10px}.vue-tab-wizard .card-footer{padding:0 20px}.vue-tab-wizard .wizard-header{padding:15px;position:relative;border-radius:3px 3px 0 0;z-index:3;text-align:center}.vue-tab-wizard .wizard-title{color:#252422;font-weight:300;margin:0;text-align:center}.vue-tab-wizard .category{font-size:14px;font-weight:400;color:#9a9a9a;margin-bottom:0;text-align:center}.vue-tab-wizard .wizard-navigation .progress-with-circle{position:relative;top:40px;z-index:50;height:4px}.vue-tab-wizard .wizard-navigation .progress-with-circle .progress-bar{box-shadow:none;transition:width .3s ease}.fade-enter-active,.fade-leave-active{transition:opacity .15s}.fade-enter,.fade-leave-to{opacity:0} \ No newline at end of file diff --git a/dist/vue-tab-wizard.js b/dist/vue-tab-wizard.js index 9104cac..ab6c96d 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(s){if(n[s])return n[s].exports;var i=n[s]={i:s,l:!1,exports:{}};return t[s].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,s){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:s})},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,s){var i,a=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(i=t,a=t.default);var r="function"==typeof a?a.options:a;if(e&&(r.render=e.render,r.staticRenderFns=e.staticRenderFns),n&&(r._scopeId=n),s){var c=Object.create(r.computed||null);Object.keys(s).forEach(function(t){var e=s[t];c[t]=function(){return e}}),r.computed=c}return{esModule:i,exports:a,options:r}}},function(t,e,n){var s=n(0)(n(3),n(9),null,null);s.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",s.esModule&&Object.keys(s.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),s.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=s.exports},function(t,e,n){n(7),n(6);var s=n(0)(n(4),n(8),null,null);s.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabWizard.vue",s.esModule&&Object.keys(s.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),s.options.functional&&console.error("[vue-loader] TabWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=s.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"},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,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){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],s=this.tabs[e];return n&&(n.show=!1,n.active=!1),s&&(s.show=!0,s.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}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){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],s=this.tabs[e];return n&&(n.show=!1,n.active=!1),s&&(s.show=!0,s.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}this.startIndex
- @@ -17,7 +17,7 @@ Yuhuuu! This seems pretty damn simple - +
diff --git a/src/components/TabWizard.vue b/src/components/FormWizard.vue similarity index 100% rename from src/components/TabWizard.vue rename to src/components/FormWizard.vue diff --git a/src/index.js b/src/index.js index be2775c..636476f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ module.exports = { - TabWizard: require('./components/TabWizard.vue'), + FormWizard: require('./components/FormWizard.vue'), TabContent: require('./components/TabContent.vue'), install (Vue) { - Vue.component('tab-wizard', module.exports.TabWizard) + Vue.component('form-wizard', module.exports.FormWizard) Vue.component('tab-content', module.exports.TabContent) } } diff --git a/src/main.js b/src/main.js index d7b458c..449c5d1 100644 --- a/src/main.js +++ b/src/main.js @@ -2,8 +2,8 @@ // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App.vue' -import TabWizard from './index' -Vue.use(TabWizard) +import FormWizard from './index' +Vue.use(FormWizard) Vue.config.productionTip = false diff --git a/webpack.build.config.js b/webpack.build.config.js index 1b4e4fa..a262974 100644 --- a/webpack.build.config.js +++ b/webpack.build.config.js @@ -56,8 +56,8 @@ module.exports = [ entry: "./src/index.js", output: { path: path.resolve(__dirname, './dist'), - filename: "vue-tab-wizard.js", - library: "VueTabWizard", + filename: "vue-form-wizard.js", + library: "VueFormWizard", libraryTarget: "umd" }, @@ -75,7 +75,7 @@ module.exports = [ /* new webpack.BannerPlugin(banner, { raw: true }),*/ - new ExtractTextPlugin({filename:"vue-tab-wizard.min.css", allChunks: true, fallback:"style-loader" }), + new ExtractTextPlugin({filename:"vue-form-wizard.min.css", allChunks: true, fallback:"style-loader" }), new StatsPlugin( {filename:"./stats.json", chunkModules: true //exclude: [/node_modules[\\\/]react/]