vue-cli/packages/@vue/cli-ui/src/components/content/StepWizard.vue at dev · vuejs/vue-cli · 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
124
125
126
127
128
129
130
131
132
<template>
  <div
    class="step-wizard"
    :class="{
      'hide-tabs': hideTabs
    }"
  >
    <div class="shell">
      <div class="header">
        <div class="content">
          <div v-if="title" class="title">{{ title }}</div>
        </div>
      </div>

      <VueTabs
        ref="tabs"
        class="main-tabs"
        group-class="accent"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <slot
          :next="next"
          :previous="previous"
        />
      </VueTabs>
    </div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,

  props: {
    hideTabs: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: null
    }
  },

  methods: {
    next () {
      const tabs = this.$refs.tabs
      tabs.activateChild(tabs.activeChildIndex + 1)
    },
    previous () {
      const tabs = this.$refs.tabs
      tabs.activateChild(tabs.activeChildIndex - 1)
    }
  }
}
</script>

<style lang="stylus" scoped>
.step-wizard
  box-sizing border-box

  .shell
    v-box()
    height 100%

  .header
    .content
      margin 0 auto

  .main-tabs
    height 0
    flex auto 1 1

  >>> .vue-ui-tab
    margin 0 auto
    padding $padding-item $padding-item 0
    box-sizing border-box

  .header,
  >>> .tabs
    background $content-bg-primary-light
    .vue-ui-dark-mode &
      background $content-bg-primary-dark

  >>> .tabs-content
    height 0
    flex auto 1 1

  &,
  >>> .vue-ui-tab,
  >>> .vue-ui-tab-content
    height 100%

  >>> .vue-ui-tab-content
    overflow-y hidden
    v-box()
    margin 0 auto

    > .content
      flex 100% 1 1
      height 0
      overflow-y auto

    > .actions-bar
      justify-content center
      .vue-ui-button:not(.icon-button)
        min-width 190px

  .title
    padding $padding-item
    font-size 24px
    text-align center
    font-weight 300

  &.hide-tabs
    >>> .tabs
      display none

  &.frame
    margin 0 auto
    $max-width = 1200px
    .shell
      background $md-white
      .vue-ui-dark-mode &
        background $vue-ui-color-darker
    .header .content,
    >>> .vue-ui-tab
      max-width $max-width

</style>