vuetify/src/components/VStepper/VStepperContent.js

Vue.js 2 Semantic Component Framework

import {
  VTabTransition,
  VTabReverseTransition
} from '../transitions'

export default {
  name: 'v-stepper-content',

  components: {
    VTabTransition,
    VTabReverseTransition
  },

  data () {
    return {
      height: 0,
      // Must be null to allow
      // previous comparison
      isActive: null,
      isReverse: false,
      isVertical: false
    }
  },

  props: {
    step: {
      type: [Number, String],
      required: true
    }
  },

  computed: {
    classes () {
      return {
        'stepper__content': true
      }
    },
    computedTransition () {
      return this.isReverse
        ? 'v-tab-reverse-transition'
        : 'v-tab-transition'
    },
    styles () {
      if (!this.isVertical) return {}

      return {
        height: !isNaN(this.height) ? `${this.height}px` : this.height
      }
    },
    wrapperClasses () {
      return {
        'stepper__wrapper': true
      }
    }
  },

  watch: {
    isActive (current, previous) {
      // If active and the previous state
      // was null, is just booting up
      if (current && previous == null) {
        return (this.height = 'auto')
      }

      if (!this.isVertical) return

      if (this.isActive) this.enter()
      else this.leave()
    }
  },

  mounted () {
    this.$refs.wrapper.addEventListener(
      'transitionend',
      this.onTransition,
      false
    )
  },

  beforeDestroy () {
    this.$refs.wrapper.removeEventListener(
      'transitionend',
      this.onTransition,
      false
    )
  },

  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.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 = {
      'class': this.classes
    }
    const wrapperData = {
      'class': this.wrapperClasses,
      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])
  }
}