1
// Components
2 1
import {
3
  VTabTransition,
4
  VTabReverseTransition,
5
} from '../transitions'
6

7
// Mixins
8 1
import { inject as RegistrableInject } from '../../mixins/registrable'
9

10
// Helpers
11 1
import { convertToUnit } from '../../util/helpers'
12

13
// Utilities
14 1
import mixins from '../../util/mixins'
15

16
// Types
17
import { VNode, FunctionalComponentOptions, VNodeData } from 'vue'
18

19 1
const baseMixins = mixins(
20
  RegistrableInject('stepper', 'v-stepper-content', 'v-stepper')
21
)
22

23
interface options extends InstanceType<typeof baseMixins> {
24
  $refs: {
25
    wrapper: HTMLElement
26
  }
27
  isVerticalProvided: boolean
28
}
29

30
/* @vue/component */
31 1
export default baseMixins.extend<options>().extend({
32
  name: 'v-stepper-content',
33

34
  inject: {
35
    isVerticalProvided: {
36
      from: 'isVertical',
37
    },
38
  },
39

40
  props: {
41
    step: {
42
      type: [Number, String],
43
      required: true,
44
    },
45
  },
46

47 1
  data () {
48 1
    return {
49
      height: 0 as number | string,
50
      // Must be null to allow
51
      // previous comparison
52
      isActive: null as boolean | null,
53
      isReverse: false,
54
      isVertical: this.isVerticalProvided,
55
    }
56
  },
57

58
  computed: {
59 1
    computedTransition (): FunctionalComponentOptions {
60
      // Fix for #8978
61 1
      const reverse = this.$vuetify.rtl ? !this.isReverse : this.isReverse
62

63 1
      return reverse
64 1
        ? VTabReverseTransition
65 1
        : VTabTransition
66
    },
67 1
    styles (): object {
68 1
      if (!this.isVertical) return {}
69

70 1
      return {
71
        height: convertToUnit(this.height),
72
      }
73
    },
74
  },
75

76
  watch: {
77 1
    isActive (current, previous) {
78
      // If active and the previous state
79
      // was null, is just booting up
80 1
      if (current && previous == null) {
81 1
        this.height = 'auto'
82 1
        return
83
      }
84

85 1
      if (!this.isVertical) return
86

87 1
      if (this.isActive) this.enter()
88 1
      else this.leave()
89
    },
90
  },
91

92 1
  mounted () {
93 1
    this.$refs.wrapper.addEventListener(
94
      'transitionend',
95
      this.onTransition,
96
      false
97
    )
98 1
    this.stepper && this.stepper.register(this)
99
  },
100

101 1
  beforeDestroy () {
102 1
    this.$refs.wrapper.removeEventListener(
103
      'transitionend',
104
      this.onTransition,
105
      false
106
    )
107 1
    this.stepper && this.stepper.unregister(this)
108
  },
109

110
  methods: {
111 1
    onTransition (e: TransitionEvent) {
112 1
      if (!this.isActive ||
113 1
        e.propertyName !== 'height'
114 1
      ) return
115

116 1
      this.height = 'auto'
117
    },
118 1
    enter () {
119 1
      let scrollHeight = 0
120

121
      // Render bug with height
122 1
      requestAnimationFrame(() => {
123 1
        scrollHeight = this.$refs.wrapper.scrollHeight
124
      })
125

126 1
      this.height = 0
127

128
      // Give the collapsing element time to collapse
129 1
      setTimeout(() => this.isActive && (this.height = (scrollHeight || 'auto')), 450)
130
    },
131 1
    leave () {
132 1
      this.height = this.$refs.wrapper.clientHeight
133 1
      setTimeout(() => (this.height = 0), 10)
134
    },
135 1
    toggle (step: string | number, reverse: boolean) {
136 1
      this.isActive = step.toString() === this.step.toString()
137 1
      this.isReverse = reverse
138
    },
139
  },
140

141 1
  render (h): VNode {
142 1
    const contentData = {
143
      staticClass: 'v-stepper__content',
144
    } as VNodeData
145 1
    const wrapperData = {
146
      staticClass: 'v-stepper__wrapper',
147
      style: this.styles,
148
      ref: 'wrapper',
149
    }
150

151 1
    if (!this.isVertical) {
152 1
      contentData.directives = [{
153
        name: 'show',
154
        value: this.isActive,
155
      }]
156
    }
157

158 1
    const wrapper = h('div', wrapperData, [this.$slots.default])
159 1
    const content = h('div', contentData, [wrapper])
160

161 1
    return h(this.computedTransition, {
162
      on: this.$listeners,
163
    }, [content])
164
  },
165
})

Read our documentation on viewing source code .

Loading