quasar/ui/src/components/stepper/QStep.js at v1 · 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
122
123
import Vue from 'vue'

import QSlideTransition from '../slide-transition/QSlideTransition.js'
import StepHeader from './StepHeader.js'

import { PanelChildMixin } from '../../mixins/panel.js'

import { slot } from '../../utils/slot.js'

const StepWrapper = Vue.extend({
  name: 'QStepWrapper',

  render (h) {
    return h('div', {
      staticClass: 'q-stepper__step-content'
    }, [
      h('div', {
        staticClass: 'q-stepper__step-inner'
      }, slot(this, 'default'))
    ])
  }
})

export default Vue.extend({
  name: 'QStep',

  inject: {
    stepper: {
      default () {
        console.error('QStep needs to be child of QStepper')
      }
    }
  },

  mixins: [ PanelChildMixin ],

  props: {
    icon: String,
    color: String,
    title: {
      type: String,
      required: true
    },
    caption: String,
    prefix: [ String, Number ],

    doneIcon: String,
    doneColor: String,
    activeIcon: String,
    activeColor: String,
    errorIcon: String,
    errorColor: String,

    headerNav: {
      type: Boolean,
      default: true
    },
    done: Boolean,
    error: Boolean
  },

  computed: {
    isActive () {
      return this.stepper.value === this.name
    },

    onEvents () {
      return this.isActive !== true ||
        this.stepper.vertical !== true ||
        (this.$q.platform.is.ios !== true && this.$q.platform.is.chrome === true)
        ? { ...this.qListeners }
        : { ...this.qListeners, scroll: this.__keepScroll }
    }
  },

  methods: {
    __keepScroll (ev) {
      const { target } = ev
      if (target.scrollTop > 0) {
        target.scrollTop = 0
      }
      this.qListeners.scroll !== void 0 && this.qListeners.scroll(ev)
    }
  },

  render (h) {
    const vertical = this.stepper.vertical
    const content = vertical === true && this.stepper.keepAlive === true
      ? h(
        'keep-alive',
        this.isActive === true
          ? [ h(StepWrapper, { key: this.name }, slot(this, 'default')) ]
          : void 0
      )
      : (
        vertical !== true || this.isActive === true
          ? StepWrapper.options.render.call(this, h)
          : void 0
      )

    return h(
      'div',
      {
        staticClass: 'q-stepper__step',
        on: this.onEvents
      },
      vertical === true
        ? [
          h(StepHeader, {
            props: {
              stepper: this.stepper,
              step: this
            }
          }),

          this.stepper.animated === true
            ? h(QSlideTransition, [ content ])
            : content
        ]
        : [ content ]
    )
  }
})