quasar/src/components/stepper/QStep.js at v0.16 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { QSlideTransition } from '../slide-transition'
import StepTab from './StepTab'
import uid from '../../utils/uid'

export default {
  name: 'QStep',
  inject: {
    __stepper: {
      default () {
        console.error('QStep needs to be child of QStepper')
      }
    }
  },
  props: {
    name: {
      type: [Number, String],
      default () {
        return uid()
      }
    },
    default: Boolean,
    title: {
      type: String,
      required: true
    },
    subtitle: String,
    icon: String,
    order: [Number, String],
    error: Boolean,
    activeIcon: String,
    errorIcon: String,
    doneIcon: String,
    disable: Boolean
  },
  watch: {
    order () {
      this.__stepper.__sortSteps()
    }
  },
  data () {
    return {
      innerOrder: 0,
      first: false,
      last: false
    }
  },
  computed: {
    stepIcon () {
      const data = this.__stepper

      if (this.active) {
        return this.activeIcon || data.activeIcon || this.$q.icon.stepper.active
      }
      if (this.error) {
        return this.errorIcon || data.errorIcon || this.$q.icon.stepper.error
      }
      if (this.done && !this.disable) {
        return this.doneIcon || data.doneIcon || this.$q.icon.stepper.done
      }

      return this.icon
    },
    actualOrder () {
      return parseInt(this.order || this.innerOrder, 10)
    },
    active () {
      return this.__stepper.step === this.name
    },
    done () {
      return !this.disable && this.__stepper.currentOrder > this.innerOrder
    },
    waiting () {
      return !this.disable && this.__stepper.currentOrder < this.innerOrder
    },
    style () {
      const ord = this.actualOrder
      return {
        '-webkit-box-ordinal-group': ord,
        '-ms-flex-order': ord,
        order: ord
      }
    }
  },
  methods: {
    select () {
      if (this.done) {
        this.__stepper.goToStep(this.name)
      }
    }
  },
  mounted () {
    this.__stepper.__registerStep(this)
    if (this.default) {
      this.select()
    }
  },
  beforeDestroy () {
    this.__stepper.__unregisterStep(this)
  },
  render (h) {
    return h('div', {
      staticClass: 'q-stepper-step',
      style: this.style
    }, [
      this.__stepper.vertical
        ? h(StepTab, { props: { vm: this } })
        : null,
      h(QSlideTransition, [
        this.active
          ? h('div', {
            staticClass: 'q-stepper-step-content'
          }, [
            h('div', { staticClass: 'q-stepper-step-inner' }, [
              this.$slots.default
            ])
          ])
          : null
      ])
    ])
  }
}