129 lines
3 KiB
JavaScript
129 lines
3 KiB
JavaScript
|
// Components
|
||
|
|
import { VTabTransition, VTabReverseTransition } from '../transitions'; // Mixins
|
||
|
|
|
||
|
|
import { inject as RegistrableInject } from '../../mixins/registrable'; // Helpers
|
||
|
|
|
||
|
|
import { convertToUnit } from '../../util/helpers'; // Utilities
|
||
|
|
|
||
|
|
import mixins from '../../util/mixins';
|
||
|
|
const baseMixins = mixins(RegistrableInject('stepper', 'v-stepper-content', 'v-stepper'));
|
||
|
|
/* @vue/component */
|
||
|
|
|
||
|
|
export default baseMixins.extend().extend({
|
||
|
|
name: 'v-stepper-content',
|
||
|
|
inject: {
|
||
|
|
isVerticalProvided: {
|
||
|
|
from: 'isVertical'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
step: {
|
||
|
|
type: [Number, String],
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
height: 0,
|
||
|
|
// Must be null to allow
|
||
|
|
// previous comparison
|
||
|
|
isActive: null,
|
||
|
|
isReverse: false,
|
||
|
|
isVertical: this.isVerticalProvided
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
computedTransition() {
|
||
|
|
return this.isReverse ? VTabReverseTransition : VTabTransition;
|
||
|
|
},
|
||
|
|
|
||
|
|
styles() {
|
||
|
|
if (!this.isVertical) return {};
|
||
|
|
return {
|
||
|
|
height: convertToUnit(this.height)
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
isActive(current, previous) {
|
||
|
|
// If active and the previous state
|
||
|
|
// was null, is just booting up
|
||
|
|
if (current && previous == null) {
|
||
|
|
this.height = 'auto';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.isVertical) return;
|
||
|
|
if (this.isActive) this.enter();else this.leave();
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.$refs.wrapper.addEventListener('transitionend', this.onTransition, false);
|
||
|
|
this.stepper && this.stepper.register(this);
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeDestroy() {
|
||
|
|
this.$refs.wrapper.removeEventListener('transitionend', this.onTransition, false);
|
||
|
|
this.stepper && this.stepper.unregister(this);
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
onTransition(e) {
|
||
|
|
if (!this.isActive || e.propertyName !== 'height') return;
|
||
|
|
this.height = 'auto';
|
||
|
|
},
|
||
|
|
|
||
|
|
enter() {
|
||
|
|
let scrollHeight = 0; // Render bug with height
|
||
|
|
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
scrollHeight = this.$refs.wrapper.scrollHeight;
|
||
|
|
});
|
||
|
|
this.height = 0; // Give the collapsing element time to collapse
|
||
|
|
|
||
|
|
setTimeout(() => this.isActive && (this.height = scrollHeight || 'auto'), 450);
|
||
|
|
},
|
||
|
|
|
||
|
|
leave() {
|
||
|
|
this.height = this.$refs.wrapper.clientHeight;
|
||
|
|
setTimeout(() => this.height = 0, 10);
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle(step, reverse) {
|
||
|
|
this.isActive = step.toString() === this.step.toString();
|
||
|
|
this.isReverse = reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
render(h) {
|
||
|
|
const contentData = {
|
||
|
|
staticClass: 'v-stepper__content'
|
||
|
|
};
|
||
|
|
const wrapperData = {
|
||
|
|
staticClass: 'v-stepper__wrapper',
|
||
|
|
style: this.styles,
|
||
|
|
ref: 'wrapper'
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!this.isVertical) {
|
||
|
|
contentData.directives = [{
|
||
|
|
name: 'show',
|
||
|
|
value: this.isActive
|
||
|
|
}];
|
||
|
|
}
|
||
|
|
|
||
|
|
const wrapper = h('div', wrapperData, [this.$slots.default]);
|
||
|
|
const content = h('div', contentData, [wrapper]);
|
||
|
|
return h(this.computedTransition, {
|
||
|
|
on: this.$listeners
|
||
|
|
}, [content]);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VStepperContent.js.map
|