quasar-framework
Version:
Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
137 lines (131 loc) • 3 kB
JavaScript
import QSlideTransition from '../slide-transition/QSlideTransition.js'
import StepTab from './StepTab.js'
import uid from '../../utils/uid.js'
export default {
name: 'QStep',
inject: {
__stepper: {
default () {
console.error('QStep needs to be child of QStepper')
}
}
},
props: {
name: {
type: [Number, String],
default () {
return uid()
}
},
default: Boolean,
title: {
type: String,
required: true
},
subtitle: String,
icon: String,
order: [Number, String],
error: Boolean,
activeIcon: String,
errorIcon: String,
doneIcon: String,
disable: Boolean
},
watch: {
order () {
this.__stepper.__sortSteps()
}
},
data () {
return {
innerOrder: 0,
first: false,
last: false
}
},
computed: {
stepIcon () {
const data = this.__stepper
if (this.active) {
return this.activeIcon || data.activeIcon || this.$q.icon.stepper.active
}
if (this.error) {
return this.errorIcon || data.errorIcon || this.$q.icon.stepper.error
}
if (this.done && !this.disable) {
return this.doneIcon || data.doneIcon || this.$q.icon.stepper.done
}
return this.icon
},
actualOrder () {
return parseInt(this.order || this.innerOrder, 10)
},
active () {
return this.__stepper.step === this.name
},
done () {
return !this.disable && this.__stepper.currentOrder > this.innerOrder
},
waiting () {
return !this.disable && this.__stepper.currentOrder < this.innerOrder
},
style () {
const ord = this.actualOrder
return {
'-webkit-box-ordinal-group': ord,
'-ms-flex-order': ord,
order: ord
}
},
classes () {
if (!this.__stepper.vertical) {
const cls = []
!this.active && cls.push('hidden')
this.__stepper.animation !== null && cls.push(this.__stepper.animation)
return cls
}
}
},
methods: {
select () {
if (this.done) {
this.__stepper.goToStep(this.name)
}
},
__getContainer (h) {
const content = this.active
? h('div', {
staticClass: 'q-stepper-step-content',
'class': this.classes
}, [
h('div', {
staticClass: 'q-stepper-step-inner'
}, this.$slots.default)
])
: null
return this.__stepper.vertical
? h(QSlideTransition, [ content ])
: content
}
},
mounted () {
this.__stepper.__registerStep(this)
if (this.default) {
this.select()
}
},
beforeDestroy () {
this.__stepper.__unregisterStep(this)
},
render (h) {
return h('div', {
staticClass: 'q-stepper-step',
style: this.style
}, [
this.__stepper.vertical
? h(StepTab, { props: { vm: this } })
: null,
this.__getContainer(h)
])
}
}