-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
Tabs.vue
121 lines (116 loc) · 3.7 KB
/
Tabs.vue
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
<template>
<div class="b-tabs" :class="{ 'is-fullwidth': expanded }">
<nav class="tabs" :class="navClasses">
<ul>
<li
v-for="(tabItem, index) in tabItems"
:key="index"
v-show="tabItem.visible"
:class="{ 'is-active': activeTab === index, 'is-disabled': tabItem.disabled }">
<a @click="tabClick(index)">
<template v-if="tabItem.$slots.header">
<b-slot-component
:component="tabItem"
name="header"
tag="span" />
</template>
<template v-else>
<b-icon
v-if="tabItem.icon"
:icon="tabItem.icon"
:pack="tabItem.iconPack"
:size="size"/>
<span>{{ tabItem.label }}</span>
</template>
</a>
</li>
</ul>
</nav>
<section class="tab-content">
<slot/>
</section>
</div>
</template>
<script>
import Icon from '../icon/Icon'
import SlotComponent from '../../utils/SlotComponent'
export default {
name: 'BTabs',
components: {
[Icon.name]: Icon,
[SlotComponent.name]: SlotComponent
},
props: {
value: Number,
expanded: Boolean,
type: String,
size: String,
position: String,
animated: {
type: Boolean,
default: true
}
},
data() {
return {
activeTab: this.value || 0,
tabItems: [],
contentHeight: 0,
_isTabs: true // Used internally by TabItem
}
},
computed: {
navClasses() {
return [
this.type,
this.size,
this.position,
{
'is-fullwidth': this.expanded,
'is-toggle-rounded is-toggle': this.type === 'is-toggle-rounded'
}
]
}
},
watch: {
/**
* When v-model is changed set the new active tab.
*/
value(value) {
this.changeTab(value)
},
/**
* When tab-items are updated, set active one.
*/
tabItems() {
if (this.tabItems.length) {
this.tabItems[this.activeTab].isActive = true
}
}
},
methods: {
/**
* Change the active tab and emit change event.
*/
changeTab(newIndex) {
if (this.activeTab === newIndex) return
this.tabItems[this.activeTab].deactivate(this.activeTab, newIndex)
this.tabItems[newIndex].activate(this.activeTab, newIndex)
this.activeTab = newIndex
this.$emit('change', newIndex)
},
/**
* Tab click listener, emit input event and change active tab.
*/
tabClick(value) {
this.$emit('input', value)
this.changeTab(value)
}
},
mounted() {
if (this.tabItems.length) {
this.tabItems[this.activeTab].isActive = true
}
}
}
</script>