diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.jsx | 45 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.vue | 2 |
2 files changed, 30 insertions, 17 deletions
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 2f362c4d..175ae777 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -1,23 +1,32 @@ import Vue from 'vue' + import './tab_switcher.scss' export default Vue.component('tab-switcher', { name: 'TabSwitcher', data () { return { - active: 0 + active: this.$slots.default.findIndex(_ => _.tag) } }, methods: { - activateTab(index) { - return () => this.active = index; + activateTab (index) { + return () => { + this.active = index + } + } + }, + beforeUpdate () { + const currentSlot = this.$slots.default[this.active] + if (!currentSlot.tag) { + this.active = this.$slots.default.findIndex(_ => _.tag) } }, - render(h) { + render (h) { const tabs = this.$slots.default - .filter(slot => slot.data) .map((slot, index) => { + if (!slot.tag) return const classesTab = ['tab'] const classesWrapper = ['tab-wrapper'] @@ -25,28 +34,32 @@ export default Vue.component('tab-switcher', { classesTab.push('active') classesWrapper.push('active') } + return ( <div class={ classesWrapper.join(' ')}> - <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> + <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> </div> ) - }); - const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => { + }) + + const contents = this.$slots.default.map((slot, index) => { + if (!slot.tag) return const active = index === this.active return ( <div class={active ? 'active' : 'hidden'}> - {slot} + {slot} </div> ) - }); + }) + return ( <div class="tab-switcher"> - <div class="tabs"> - {tabs} - </div> - <div class="contents"> - {contents} - </div> + <div class="tabs"> + {tabs} + </div> + <div class="contents"> + {contents} + </div> </div> ) } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index e53727ff..d64ce277 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -20,7 +20,7 @@ <i class="icon-spin3 animate-spin"></i> </div> </div> - <Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_profile.favorites_title')" :timeline="favorites"/> + <Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_profile.favorites_title')" timeline-name="favorites" :timeline="favorites"/> </tab-switcher> </div> <div v-else class="panel user-profile-placeholder"> |