New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stepper components - event 'step' proposal #315

Merged
merged 20 commits into from Jan 11, 2017
Commits
Jump to file or symbol
Failed to load files and symbols.
+35 −3
Diff settings

Always

Just for now

@@ -2,7 +2,7 @@
<div>
<div class="layout-padding">
<q-transition name="slide">
<q-stepper @finish="finish()" ref="stepper" v-show="!finished" color="green">
<q-stepper @finish="finish()" @step="onStep" ref="stepper" v-show="!finished" color="green">
<q-step title="Select campaign settings">
For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.
</q-step>
@@ -26,7 +26,12 @@
<span>Finished. Well done!</span>
</p>
<button class="primary" @click="reset()">Reset</button>
</p>
</div>
<span class="label bg-amber fixed-bottom-left" style="left: 18px; bottom: 18px;">
<span class="left-detail">Step</span> {{ currentStep }} {{ stepMessage }}
</span>
</div>
</div>
</template>
@@ -36,13 +41,35 @@ export default {
data () {
return {
ready: false,
finished: false
finished: false,
currentStep: 0,
stepMessage: ''
}
},
methods: {
finish () {
this.finished = true
},
onStep (currentStep) {
this.currentStep = currentStep
switch (this.currentStep) {
case 1:
this.stepMessage = 'started'
break
case 2:
this.stepMessage = 'second step'
break
case 3:
this.stepMessage = 'next to finish'
break
case 4:
this.stepMessage = 'done!'
break
default:
this.stepMessage = ''
break
}
},
reset () {
this.$refs.stepper.reset()
this.finished = false
@@ -35,25 +35,30 @@ export default {
methods: {
reset () {
this.config.currentStep = 1
this.$emit('step', this.config.currentStep)
},
nextStep () {
this.config.currentStep++
this.$emit('step', this.config.currentStep)
if (this.config.currentStep > this.config.steps) {
this.$emit('finish')
}
},
previousStep () {
this.config.currentStep--
this.$emit('step', this.config.currentStep)
},
finish () {
this.config.currentStep = this.config.steps + 1
this.$emit('step', this.config.currentStep)
this.$emit('finish')
}
},
mounted () {
let step = 1
this.config.currentStep = this.config.currentStep || 1
this.config.steps = this.$children.length
this.$emit('step', this.config.currentStep)
this.$children.forEach(child => {
child.step = step
step++
ProTip! Use n and p to navigate between commits in a pull request.