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

Formatting

Browse Source 
Add tests for background style
Use provide/inject to get rid of $parent dependency internally
This commit is contained in:
cristijora
2017-10-18 20:15:49 +03:00
parent d08ebe2af7
commit 39fdde89c7
12 changed files with 166 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.babelrc
+1 -1
View File
@@ -3,7 +3,7 @@
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"],
"plugins": ["transform-runtime", "transform-vue-jsx"],
"comments": false,
"env": {
"test": {
dev-example/App.vue
-1
View File
@@ -1,6 +1,5 @@
<template>
<div>
<router-view></router-view>
</div>
</template>
dev-example/FormGeneratorRoute.vue
+7
View File
@@ -1,6 +1,9 @@
<template>
<div>
<form-wizard @on-complete="onComplete"
shape="tab"
layout="vertical"
steps-classes="steps-size"
color="gray"
error-color="#a94442">
<tab-content title="Personal details"
@@ -159,4 +162,8 @@
}
</script>
<style>
.steps-size{
width: 100vw;
height: 400px;
}
</style>
dev-example/WizardRoute.vue
+15 -6
View File
@@ -7,13 +7,10 @@
<form-wizard @on-complete="onComplete"
@on-change="handleChange"
:start-index.sync="activeIndex"
layout="vertical"
shape="square"
steps-classes="steps-size"
color="#e74c3c">
<tab-content v-for="tab in tabs" :title="tab" :key="tab">{{tab}}</tab-content>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
<tab-content v-for="tab in tabs" :title="tab" :key="tab">{{tab}}</tab-content>
</form-wizard>
</div>
</template>
@@ -68,7 +65,7 @@
</style>
<style lang="scss">
.steps-size{
width: 200px;
width: 100vw;
height: 400px;
}
$border-radius-extreme: 6px !default;
@@ -101,4 +98,16 @@
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
</style>
package.json
+3
View File
@@ -32,9 +32,12 @@
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-helper-vue-jsx-merge-props": "^2.0.2",
"babel-loader": "^6.2.10",
"babel-plugin-istanbul": "^3.1.2",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.2.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
src/components/FormWizard.vue
+34 -7
View File
@@ -1,5 +1,8 @@
<template>
<div class="vue-form-wizard" :class="[stepSize, {vertical: isVertical}]" @keyup.right="focusNextTab" @keyup.left="focusPrevTab">
<div class="vue-form-wizard"
:class="[stepSize, {vertical: isVertical}]"
@keyup.right="focusNextTab"
@keyup.left="focusPrevTab">
<div class="wizard-header">
<slot name="title">
<h4 class="wizard-title">{{title}}</h4>
@@ -7,11 +10,14 @@
</slot>
</div>
<div class="wizard-navigation">
<div class="wizard-progress-with-circle" v-if="!isVertical">
<div v-if="!isVertical"
class="wizard-progress-with-circle">
<div class="wizard-progress-bar"
:style="progressBarStyle"></div>
</div>
<ul class="wizard-nav wizard-nav-pills" role="tablist" :class="stepsClasses">
<ul class="wizard-nav wizard-nav-pills"
:class="stepsClasses"
role="tablist">
<slot name="step" v-for="(tab, index) in tabs"
:tab="tab"
:index="index"
@@ -33,11 +39,15 @@
</div>
</div>
<div class="wizard-card-footer clearfix" v-if="!hideButtons">
<div v-if="!hideButtons" class="wizard-card-footer clearfix">
<slot name="footer"
v-bind="slotProps">
<div class="wizard-footer-left">
<span @click="prevTab" @keyup.enter="prevTab" v-if="displayPrevButton" role="button" tabindex="0">
<span @click="prevTab"
@keyup.enter="prevTab"
v-if="displayPrevButton"
role="button"
tabindex="0">
<slot name="prev" v-bind="slotProps">
<wizard-button :style="fillButtonStyle"
:disabled="loading">
@@ -50,14 +60,22 @@
<div class="wizard-footer-right">
<slot name="custom-buttons-right" v-bind="slotProps"></slot>
<span @click="nextTab" @keyup.enter="nextTab" v-if="isLastStep" role="button" tabindex="0">
<span v-if="isLastStep"
@click="nextTab"
@keyup.enter="nextTab"
role="button"
tabindex="0">
<slot name="finish" v-bind="slotProps">
<wizard-button :style="fillButtonStyle">
{{finishButtonText}}
</wizard-button>
</slot>
</span>
<span @click="nextTab" @keyup.enter="nextTab" role="button" tabindex="0" v-else>
<span v-else
@click="nextTab"
@keyup.enter="nextTab"
role="button"
tabindex="0">
<slot name="next" v-bind="slotProps" >
<wizard-button :style="fillButtonStyle"
:disabled="loading">
@@ -81,6 +99,15 @@
WizardButton,
WizardStep
},
provide () {
return {
addTab: this.addTab,
removeTab: this.removeTab,
shape: this.shape,
color: this.color,
errorColor: this.errorColor
}
},
props: {
title: {
type: String,
src/components/TabContent.vue
+3 -13
View File
@@ -11,6 +11,7 @@
<script>
export default{
name: 'tab-content',
inject: ['addTab', 'removeTab'],
props: {
title: {
type: String,
@@ -42,25 +43,14 @@
checked: false
}
},
computed: {
shape () {
return this.$parent.shape
},
color () {
return this.$parent.color
},
errorColor () {
return this.$parent.errorColor
}
},
mounted () {
this.$parent.addTab(this)
this.addTab(this)
},
destroyed () {
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el)
}
this.$parent.removeTab(this)
this.removeTab(this)
}
}
</script>
src/components/WizardButton.vue
+3 -1
View File
@@ -4,7 +4,9 @@
</button>
</template>
<script>
export default {}
export default {
name: 'wizard-button'
}
</script>
<style>
</style>
src/components/WizardFooter.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<div v-if="!hideButtons"
class="wizard-card-footer clearfix">
<slot name="footer"
v-bind="slotProps">
<div class="wizard-footer-left">
<span @click="prevTab"
@keyup.enter="prevTab"
v-if="displayPrevButton"
role="button"
tabindex="0">
<slot name="prev" v-bind="slotProps">
<wizard-button :style="fillButtonStyle"
:disabled="loading">
{{backButtonText}}
</wizard-button>
</slot>
</span>
<slot name="custom-buttons-left" v-bind="slotProps"></slot>
</div>
<div class="wizard-footer-right">
<slot name="custom-buttons-right" v-bind="slotProps"></slot>
<span v-if="isLastStep"
@click="nextTab"
@keyup.enter="nextTab"
role="button"
tabindex="0">
<slot name="finish" v-bind="slotProps">
<wizard-button :style="fillButtonStyle">
{{finishButtonText}}
</wizard-button>
</slot>
</span>
<span v-else
@click="nextTab"
@keyup.enter="nextTab"
role="button"
tabindex="0">
<slot name="next" v-bind="slotProps" >
<wizard-button :style="fillButtonStyle"
:disabled="loading">
{{nextButtonText}}
</wizard-button>
</slot>
</span>
</div>
</slot>
</div>
</template>
<script>
export default {
props: {
slotProps: {
type: Object,
default: () => {}
}
}
}
</script>
<style>
</style>
src/components/WizardStep.vue
+8 -7
View File
@@ -41,6 +41,7 @@
<script>
export default {
name: 'wizard-step',
inject: ['color', 'shape', 'errorColor'],
props: {
tab: {
type: Object,
@@ -60,31 +61,31 @@
computed: {
iconActiveStyle () {
return {
backgroundColor: this.tab.color
backgroundColor: this.color
}
},
stepCheckedStyle () {
return {
borderColor: this.tab.color
borderColor: this.color
}
},
errorStyle () {
return {
borderColor: this.tab.errorColor,
backgroundColor: this.tab.errorColor
borderColor: this.errorColor,
backgroundColor: this.errorColor
}
},
stepTitleStyle () {
let isError = this.tab.validationError
return {
color: isError ? this.tab.errorColor : this.tab.color
color: isError ? this.errorColor : this.color
}
},
isStepSquare () {
return this.tab.shape === 'square'
return this.shape === 'square'
},
isTabShape () {
return this.tab.shape === 'tab'
return this.shape === 'tab'
}
}
}
test/unit/specs/FormWizard.spec.js
+11
View File
@@ -81,4 +81,15 @@ describe('FormWizard.vue', () => {
expect(nextTabHandler.called).to.equal(true)
})
it('styles step with background color', (done) => {
const wizard = mount(twoStepWizard, {localVue})
const formWizard = wizard.find(FormWizard)
Vue.nextTick(()=>{
const steps = wizard.findAll(WizardStep)
console.log(steps)
var stepContainer = steps.at(0).find('.wizard-icon-container')
expect(stepContainer.hasStyle('background-color', formWizard.vm.color))
done()
})
})
})
yarn.lock
+18 -11
View File
@@ -260,13 +260,6 @@ autoprefixer@^6.3.1, autoprefixer@^6.7.2:
postcss "^5.2.16"
postcss-value-parser "^3.2.3"
avoriaz@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/avoriaz/-/avoriaz-4.1.0.tgz#db49a282f3758dff83578d7536c51a3cefc07615"
dependencies:
lodash "^4.17.4"
vue-add-globals "^2.0.0"
aws-sign2@~0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -440,6 +433,10 @@ babel-helper-replace-supers@^6.24.1:
babel-traverse "^6.24.1"
babel-types "^6.24.1"
babel-helper-vue-jsx-merge-props@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz#aceb1c373588279e2755ea1cfd35c22394fd33f8"
babel-helpers@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
@@ -501,6 +498,10 @@ babel-plugin-syntax-exponentiation-operator@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
babel-plugin-syntax-jsx@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
babel-plugin-syntax-object-rest-spread@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -746,6 +747,12 @@ babel-plugin-transform-strict-mode@^6.24.1:
babel-runtime "^6.22.0"
babel-types "^6.24.1"
babel-plugin-transform-vue-jsx@^3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.5.0.tgz#6b1ad29351ad753919403675f0bf8b2a43e17671"
dependencies:
esutils "^2.0.2"
babel-preset-env@^1.2.1:
version "1.6.0"
resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.0.tgz#2de1c782a780a0a5d605d199c957596da43c44e4"
@@ -4462,6 +4469,10 @@ pluralize@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
portal-vue@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-1.1.1.tgz#8b13e18994c120e21dc5c85f4f5f25ce73dca41d"
postcss-calc@^5.2.0:
version "5.3.1"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -5927,10 +5938,6 @@ void-elements@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
vue-add-globals@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/vue-add-globals/-/vue-add-globals-2.0.1.tgz#c9fba6faac44f679ec15d5a9637f518b181fc44d"
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"