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

Merge branch 'master' of https://github.com/cristijora/vue-form-wizard

Browse Source 
# Conflicts:
#	package.json
This commit is contained in:
cristijora
2017-04-26 20:52:11 +03:00
parent e6ef6a1f2a 8729d31fa3
commit 509bda1a57
14 changed files with 280 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/form-wizard/_buttons.scss
+46
View File
@@ -8,6 +8,9 @@
padding: $padding-base-vertical $padding-base-horizontal;
@include btn-styles($default-color, $default-states-color);
@include transition($fast-transition-time, linear);
&:hover,
&:focus{
outline: 0 !important;
@@ -26,14 +29,57 @@
margin-right: 0px;
}
}
[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;
}
// Apply the mixin to the buttons
//.btn-default { @include btn-styles($default-color, $default-states-color); }
.navbar .navbar-nav > li > a.btn.btn-primary, .btn-primary { @include btn-styles($primary-color, $primary-states-color); }
.navbar .navbar-nav > li > a.btn.btn-info, .btn-info { @include btn-styles($info-color, $info-states-color); }
.btn{
&:disabled,
&[disabled],
&.disabled,
&.btn-disabled{
@include opacity(.5);
}
}
.btn-disabled{
cursor: default;
}
.btn-simple{
border: $none;
padding: $padding-base-vertical $padding-base-horizontal;
}
.navbar .navbar-nav > li > a.btn.btn-wd,
.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;
}
src/assets/form-wizard/bs_button.scss
+1 -1
View File
@@ -13,7 +13,7 @@
border: 1px solid transparent;
white-space: nowrap;
@include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
//@include user-select(none);
@include user-select(none);
&,
&:active,
src/assets/wizard.scss
+8 -8
View File
@@ -1,8 +1,8 @@
/*@import "form-wizard/bs_button";
@import "form-wizard/bs_nav_pills";
@import "form-wizard/bs_progress_bar";*/
@import "form-wizard/variables";
@import "form-wizard/mixins";
@import "form-wizard/buttons";
@import "form-wizard/navs-pagination";
@import "form-wizard/wizard-card";
//@import "tab-wizard/bs_button";
//@import "tab-wizard/bs_nav_pills";
//@import "tab-wizard/bs_progress_bar";
@import "tab-wizard/variables";
@import "tab-wizard/mixins";
@import "tab-wizard/buttons";
@import "tab-wizard/navs-pagination";
@import "tab-wizard/wizard-card";
src/components/FormWizard.vue
+66 -35
View File
@@ -43,7 +43,7 @@
<template>
<span @click="prevTab" v-if="displayPrevButton">
<slot name="prev">
<button type="button" class="btn btn-default btn-wd" :style="fillButtonStyle">
<button type="button" class="btn btn-default btn-wd" :style="fillButtonStyle" :disabled="loading">
{{backButtonText}}
</button>
</slot>
@@ -63,7 +63,7 @@
<template>
<span @click="nextTab" class="pull-right" v-if="!isLastStep">
<slot name="next">
<button type="button" class="btn btn-fill btn-wd btn-next" :style="fillButtonStyle">
<button type="button" class="btn btn-fill btn-wd btn-next" :style="fillButtonStyle" :disabled="loading">
{{nextButtonText}}
</button>
</slot>
@@ -130,6 +130,7 @@
isLastStep: false,
currentPercentage: 0,
maxStep: 0,
loading: false,
tabs: []
}
},
@@ -195,26 +196,59 @@
return index <= this.maxStep
},
navigateToTab (index) {
if (index <= this.maxStep && this.beforeTabChange(this.activeTabIndex)) {
this.changeTab(this.activeTabIndex, index)
if (index <= this.maxStep) {
let cb = () => {
this.changeTab(this.activeTabIndex, index)
}
this.beforeTabChange(this.activeTabIndex, cb)
}
},
beforeTabChange (index) {
setLoading (value) {
this.loading = value
this.$emit('on-loading', value)
},
validateBeforeChange (promiseFn, callback) {
// we have a promise
if (promiseFn.then && typeof promiseFn.then === 'function') {
this.setLoading(true)
promiseFn.then((res) => {
this.setLoading(false)
let validationResult = res === true
this.executeBeforeChange(validationResult, callback)
}).catch(() => {
this.setLoading(false)
})
// we have a simple function
} else {
let validationResult = promiseFn === true
this.executeBeforeChange(validationResult, callback)
}
},
executeBeforeChange (validationResult, callback) {
this.$emit('on-validate', validationResult, this.activeTabIndex)
if (validationResult) {
callback()
}
},
beforeTabChange (index, callback) {
if (this.loading) {
return
}
let oldTab = this.tabs[index]
if (oldTab && oldTab.beforeChange !== undefined) {
return oldTab.beforeChange()
let tabChangeRes = oldTab.beforeChange()
this.validateBeforeChange(tabChangeRes, callback)
} else {
callback()
}
return true
},
changeTab (oldIndex, newIndex) {
let oldTab = this.tabs[oldIndex]
let newTab = this.tabs[newIndex]
if (oldTab) {
oldTab.show = false
oldTab.active = false
}
if (newTab) {
newTab.show = true
newTab.active = true
}
this.activeTabIndex = newIndex
@@ -239,58 +273,55 @@
this.maxStep = this.activeTabIndex
}
},
nextTab () {
if (!this.beforeTabChange(this.activeTabIndex)) return
if (this.activeTabIndex < this.tabCount - 1) {
this.activeTabIndex++
this.increaseMaxStep()
this.checkStep()
} else {
this.isLastStep = true
this.$emit('finished')
let cb = () => {
if (this.activeTabIndex < this.tabCount - 1) {
this.changeTab(this.activeTabIndex, this.activeTabIndex + 1)
this.increaseMaxStep()
} else {
this.isLastStep = true
this.$emit('finished')
}
}
this.beforeTabChange(this.activeTabIndex, cb)
},
prevTab () {
if (!this.beforeTabChange(this.activeTabIndex)) return
if (this.activeTabIndex > 0) {
this.activeTabIndex--
this.isLastStep = false
let cb = () => {
if (this.activeTabIndex > 0) {
this.changeTab(this.activeTabIndex, this.activeTabIndex - 1)
this.isLastStep = false
}
}
this.beforeTabChange(this.activeTabIndex, cb)
},
finish () {
this.$emit('on-complete')
let cb = () => {
this.$emit('on-complete')
}
this.beforeTabChange(this.activeTabIndex, cb)
}
},
mounted () {
this.tabs = this.$children.filter((comp) => comp.$options.name === 'tab-content')
if (this.tabs.length > 0) {
if (this.tabs.length > 0 && this.startIndex === 0) {
let firstTab = this.tabs[this.activeTabIndex]
firstTab.show = true
firstTab.active = true
this.tryChangeRoute(firstTab)
}
if (this.startIndex < this.tabs.length) {
let tabToActivate = this.tabs[this.startIndex]
this.activeTabIndex = this.startIndex
tabToActivate.active = true
this.maxStep = this.startIndex
this.tryChangeRoute(this.tabs[this.startIndex])
} else {
console.warn(`Prop startIndex set to ${this.startIndex} is greater than the number of tabs - ${this.tabs.length}. Make sure that the starting index is less than the number of tabs registered`)
}
},
watch: {
activeTabIndex: function (newVal, oldVal) {
if (this.beforeTabChange(oldVal)) {
this.changeTab(oldVal, newVal)
}
}
}
}
</script>
<style>
@import "../assets/form-wizard/bootstrap.min.css";
@import "./../assets/tab-wizard/bootstrap.min.css";
</style>
<style lang="scss">
@import "./../assets/wizard";
src/components/TabContent.vue
+1 -2
View File
@@ -1,5 +1,5 @@
<template>
<div v-show="show" class="tab-container">
<div v-if="active" class="tab-container">
<slot>
</slot>
</div>
@@ -33,7 +33,6 @@
},
data () {
return {
show: false,
active: false
}
}