import Vue from 'vue' import { mapState } from 'vuex' import './tab_switcher.scss' export default Vue.component('tab-switcher', { name: 'TabSwitcher', props: { renderOnlyFocused: { required: false, type: Boolean, default: false }, onSwitch: { required: false, type: Function, default: undefined }, activeTab: { required: false, type: String, default: undefined }, scrollableTabs: { required: false, type: Boolean, default: false }, sideTabBar: { required: false, type: Boolean, default: false } }, data () { return { active: this.$slots.default.findIndex(_ => _.tag) } }, computed: { activeIndex () { // In case of controlled component if (this.activeTab) { return this.$slots.default.findIndex(slot => this.activeTab === slot.key) } else { return this.active } }, settingsModalVisible () { return this.settingsModalState === 'visible' }, ...mapState({ settingsModalState: state => state.interface.settingsModalState }) }, beforeUpdate () { const currentSlot = this.$slots.default[this.active] if (!currentSlot.tag) { this.active = this.$slots.default.findIndex(_ => _.tag) } }, methods: { activateTab (index) { return (e) => { e.preventDefault() if (typeof this.onSwitch === 'function') { this.onSwitch.call(null, this.$slots.default[index].key) } this.active = index if (this.scrollableTabs) { this.$refs.contents.scrollTop = 0 } } } }, render (h) { const tabs = this.$slots.default .map((slot, index) => { if (!slot.tag) return const classesTab = ['tab'] const classesWrapper = ['tab-wrapper'] if (this.activeIndex === index) { classesTab.push('active') classesWrapper.push('active') } if (slot.data.attrs.image) { return (
) } return (
) }) const contents = this.$slots.default.map((slot, index) => { if (!slot.tag) return const active = this.activeIndex === index const classes = [ active ? 'active' : 'hidden' ] if (slot.data.attrs.fullHeight) { classes.push('full-height') } const renderSlot = (!this.renderOnlyFocused || active) ? slot : '' return (
{ this.sideTabBar ?

{slot.data.attrs.label}

: '' } {renderSlot}
) }) return (
{tabs}
{contents}
) } })