1
// Styles
2 1
import './VStepper.sass'
3

4
// Components
5
import VStepperStep from './VStepperStep'
6
import VStepperContent from './VStepperContent'
7

8
// Mixins
9 1
import { provide as RegistrableProvide } from '../../mixins/registrable'
10 1
import Proxyable from '../../mixins/proxyable'
11 1
import Themeable from '../../mixins/themeable'
12

13
// Utilities
14 1
import mixins from '../../util/mixins'
15 1
import { breaking } from '../../util/console'
16

17
// Types
18
import { VNode } from 'vue'
19

20 1
const baseMixins = mixins(
21
  RegistrableProvide('stepper'),
22
  Proxyable,
23
  Themeable
24
)
25

26
type VStepperStepInstance = InstanceType<typeof VStepperStep>
27
type VStepperContentInstance = InstanceType<typeof VStepperContent>
28

29
/* @vue/component */
30 1
export default baseMixins.extend({
31
  name: 'v-stepper',
32

33 1
  provide (): object {
34 1
    return {
35
      stepClick: this.stepClick,
36
      isVertical: this.vertical,
37
    }
38
  },
39

40
  props: {
41
    altLabels: Boolean,
42
    nonLinear: Boolean,
43
    vertical: Boolean,
44
  },
45

46 1
  data () {
47 1
    const data: Dictionary<any> = {
48
      isBooted: false,
49
      steps: [] as VStepperStepInstance[],
50
      content: [] as VStepperContentInstance[],
51
      isReverse: false,
52
    }
53

54 1
    data.internalLazyValue = this.value != null
55 1
      ? this.value
56 1
      : (data[0] || {}).step || 1
57

58 1
    return data
59
  },
60

61
  computed: {
62 1
    classes (): object {
63 1
      return {
64
        'v-stepper--is-booted': this.isBooted,
65
        'v-stepper--vertical': this.vertical,
66
        'v-stepper--alt-labels': this.altLabels,
67
        'v-stepper--non-linear': this.nonLinear,
68
        ...this.themeClasses,
69
      }
70
    },
71
  },
72

73
  watch: {
74 0
    internalValue (val, oldVal) {
75 0
      this.isReverse = Number(val) < Number(oldVal)
76

77 1
      oldVal && (this.isBooted = true)
78

79 0
      this.updateView()
80
    },
81
  },
82

83 1
  created () {
84
    /* istanbul ignore next */
85
    if (this.$listeners.input) {
86
      breaking('@input', '@change', this)
87
    }
88
  },
89

90 1
  mounted () {
91 1
    this.updateView()
92
  },
93

94
  methods: {
95 0
    register (item: VStepperStepInstance | VStepperContentInstance) {
96 1
      if (item.$options.name === 'v-stepper-step') {
97 0
        this.steps.push(item as VStepperStepInstance)
98 1
      } else if (item.$options.name === 'v-stepper-content') {
99 0
        (item as VStepperContentInstance).isVertical = this.vertical
100 0
        this.content.push(item as VStepperContentInstance)
101
      }
102
    },
103 0
    unregister (item: VStepperStepInstance | VStepperContentInstance) {
104 1
      if (item.$options.name === 'v-stepper-step') {
105 0
        this.steps = this.steps.filter((i: VStepperStepInstance) => i !== item)
106 1
      } else if (item.$options.name === 'v-stepper-content') {
107 0
        (item as VStepperContentInstance).isVertical = this.vertical
108 0
        this.content = this.content.filter((i: VStepperContentInstance) => i !== item)
109
      }
110
    },
111 0
    stepClick (step: string | number) {
112 0
      this.$nextTick(() => (this.internalValue = step))
113
    },
114 1
    updateView () {
115 1
      for (let index = this.steps.length; --index >= 0;) {
116 0
        this.steps[index].toggle(this.internalValue as any)
117
      }
118 1
      for (let index = this.content.length; --index >= 0;) {
119 0
        this.content[index].toggle(this.internalValue as any, this.isReverse)
120
      }
121
    },
122
  },
123

124 1
  render (h): VNode {
125 1
    return h('div', {
126
      staticClass: 'v-stepper',
127
      class: this.classes,
128
    }, this.$slots.default)
129
  },
130
})

Read our documentation on viewing source code .

Loading