|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- // Components
- import { VTabTransition, VTabReverseTransition } from '../transitions';
- // Mixins
- import { inject as RegistrableInject } from '../../mixins/registrable';
- // Helpers
- import { convertToUnit } from '../../util/helpers';
- // Util
- import mixins from '../../util/mixins';
- export default mixins(RegistrableInject('stepper', 'v-stepper-content', 'v-stepper')
- /* @vue/component */
- ).extend({
- name: 'v-stepper-content',
- inject: {
- isVerticalProvided: {
- from: 'isVertical'
- }
- },
- props: {
- step: {
- type: [Number, String],
- required: true
- }
- },
- data: function data() {
- return {
- height: 0,
- // Must be null to allow
- // previous comparison
- isActive: null,
- isReverse: false,
- isVertical: this.isVerticalProvided
- };
- },
-
- computed: {
- classes: function classes() {
- return {
- 'v-stepper__content': true
- };
- },
- computedTransition: function computedTransition() {
- return this.isReverse ? VTabReverseTransition : VTabTransition;
- },
- styles: function styles() {
- if (!this.isVertical) return {};
- return {
- height: convertToUnit(this.height)
- };
- },
- wrapperClasses: function wrapperClasses() {
- return {
- 'v-stepper__wrapper': true
- };
- }
- },
- watch: {
- isActive: function 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: function mounted() {
- this.$refs.wrapper.addEventListener('transitionend', this.onTransition, false);
- this.stepper && this.stepper.register(this);
- },
- beforeDestroy: function beforeDestroy() {
- this.$refs.wrapper.removeEventListener('transitionend', this.onTransition, false);
- this.stepper && this.stepper.unregister(this);
- },
-
- methods: {
- onTransition: function onTransition(e) {
- if (!this.isActive || e.propertyName !== 'height') return;
- this.height = 'auto';
- },
- enter: function enter() {
- var _this = this;
-
- var scrollHeight = 0;
- // Render bug with height
- requestAnimationFrame(function () {
- scrollHeight = _this.$refs.wrapper.scrollHeight;
- });
- this.height = 0;
- // Give the collapsing element time to collapse
- setTimeout(function () {
- return _this.isActive && (_this.height = scrollHeight || 'auto');
- }, 450);
- },
- leave: function leave() {
- var _this2 = this;
-
- this.height = this.$refs.wrapper.clientHeight;
- setTimeout(function () {
- return _this2.height = 0;
- }, 10);
- },
- toggle: function toggle(step, reverse) {
- this.isActive = step.toString() === this.step.toString();
- this.isReverse = reverse;
- }
- },
- render: function render(h) {
- var contentData = {
- 'class': this.classes
- };
- var wrapperData = {
- 'class': this.wrapperClasses,
- style: this.styles,
- ref: 'wrapper'
- };
- if (!this.isVertical) {
- contentData.directives = [{
- name: 'show',
- value: this.isActive
- }];
- }
- var wrapper = h('div', wrapperData, [this.$slots.default]);
- var content = h('div', contentData, [wrapper]);
- return h(this.computedTransition, {
- on: this.$listeners
- }, [content]);
- }
- });
- //# sourceMappingURL=VStepperContent.js.map
|