File tree Expand file tree Collapse file tree 1 file changed +19
-7
lines changed Expand file tree Collapse file tree 1 file changed +19
-7
lines changed Original file line number Diff line number Diff line change 1
1
<template >
2
- <div class =" tabs" :id =" id" >
2
+ <div : class =" { tabs: true, hide: !hasEnabledTabs} " :id =" id" >
3
3
<div class =" tabsHeader" >
4
4
<button type =" button" v-show =" tab.enabled" :class =" {'tabItem': true, 'tabActive': tab.active }" @click =" selectTab(tab)" v-for =" tab in tabs" :key =" tab.id" >
5
5
<i :class =" ['fas', tab.icon]" ></i > {{ tab.name }}
@@ -25,11 +25,16 @@ export default {
25
25
tabs: []
26
26
};
27
27
},
28
- created () {
29
- this .tabs = this .$children ;
30
- },
31
28
mounted () {
32
- this .resetActiveTab ();
29
+ if (Array .isArray (this .$children )) {
30
+ this .tabs = this .$children ;
31
+ this .resetActiveTab ();
32
+ }
33
+ },
34
+ computed: {
35
+ hasEnabledTabs () {
36
+ return this .tabs .filter (t => t .enabled ).length > 0 ;
37
+ }
33
38
},
34
39
methods: {
35
40
getTab (id ) {
@@ -61,10 +66,14 @@ export default {
61
66
// Get tab by id
62
67
selectedTab = this .getTab (selectedTab);
63
68
}
64
- if (! selectedTab || activeTab === selectedTab) {
69
+ if (activeTab === selectedTab) {
65
70
return ;
66
71
}
67
- if (selectedTab !== null && await selectedTab .show () && activeTab !== null ) {
72
+ if (! selectedTab || typeof selectedTab .show !== ' function' ) {
73
+ console .error (" Invalid tab" , selectedTab);
74
+ return ;
75
+ }
76
+ if (await selectedTab .show () && activeTab !== null ) {
68
77
activeTab .hide ();
69
78
}
70
79
},
@@ -92,6 +101,9 @@ export default {
92
101
border : 1px solid #aaa ;
93
102
margin-bottom : 10px ;
94
103
}
104
+ .tabs.hide {
105
+ display : none ;
106
+ }
95
107
#viewer .tabs {
96
108
height : 97% ;
97
109
}
You can’t perform that action at this time.
0 commit comments