akkoma-fe/src/components/tab_switcher/tab_switcher.js

134 lines
3.5 KiB
JavaScript
Raw Normal View History

import Vue from 'vue'
import './tab_switcher.scss'
export default Vue.component('tab-switcher', {
name: 'TabSwitcher',
props: {
renderOnlyFocused: {
required: false,
type: Boolean,
default: false
},
onSwitch: {
required: false,
2019-11-08 16:14:01 +00:00
type: Function,
default: undefined
},
activeTab: {
required: false,
2019-11-08 16:14:01 +00:00
type: String,
default: undefined
},
scrollableTabs: {
required: false,
type: Boolean,
default: false
2020-05-03 14:36:12 +00:00
},
sideTabBar: {
required: false,
type: Boolean,
default: false
}
},
data () {
return {
active: this.$slots.default.findIndex(_ => _.tag)
}
},
2019-08-10 18:48:05 +00:00
computed: {
activeIndex () {
// In case of controlled component
if (this.activeTab) {
return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
} else {
return this.active
}
}
},
2019-07-05 07:02:14 +00:00
beforeUpdate () {
const currentSlot = this.$slots.default[this.active]
if (!currentSlot.tag) {
this.active = this.$slots.default.findIndex(_ => _.tag)
}
},
methods: {
2019-08-10 03:48:33 +00:00
activateTab (index) {
return (e) => {
e.preventDefault()
if (typeof this.onSwitch === 'function') {
this.onSwitch.call(null, this.$slots.default[index].key)
}
this.active = index
2020-05-25 11:16:03 +00:00
if (this.scrollableTabs) {
this.$refs.contents.scrollTop = 0
}
}
}
},
render (h) {
const tabs = this.$slots.default
2019-07-05 07:02:14 +00:00
.map((slot, index) => {
if (!slot.tag) return
const classesTab = ['tab']
const classesWrapper = ['tab-wrapper']
2019-08-10 18:48:05 +00:00
if (this.activeIndex === index) {
2019-07-05 07:02:14 +00:00
classesTab.push('active')
classesWrapper.push('active')
}
if (slot.data.attrs.image) {
return (
2019-08-10 04:26:29 +00:00
<div class={classesWrapper.join(' ')}>
<button
disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)}
class={classesTab.join(' ')}>
<img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/>
{slot.data.attrs.label ? '' : slot.data.attrs.label}
</button>
</div>
)
}
2019-07-05 07:02:14 +00:00
return (
2019-08-10 04:26:29 +00:00
<div class={classesWrapper.join(' ')}>
2019-07-05 07:02:14 +00:00
<button
disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)}
2020-05-25 13:10:14 +00:00
class={classesTab.join(' ')}
>
{!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
{slot.data.attrs.label}
</button>
2019-07-05 07:02:14 +00:00
</div>
)
})
const contents = this.$slots.default.map((slot, index) => {
if (!slot.tag) return
2019-08-10 18:48:05 +00:00
const active = this.activeIndex === index
const classes = [ active ? 'active' : 'hidden' ]
if (slot.data.attrs.fullHeight) {
classes.push('full-height')
}
if (this.renderOnlyFocused) {
return active
? <div class={classes.join(' ')}>{slot}</div>
: <div class={classes.join(' ')}></div>
}
return <div class={classes.join(' ')}>{slot}</div>
})
return (
2020-05-03 14:36:12 +00:00
<div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
2019-01-17 20:05:58 +00:00
<div class="tabs">
{tabs}
</div>
2020-05-25 11:16:03 +00:00
<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}>
2019-01-17 20:05:58 +00:00
{contents}
</div>
2018-11-21 19:08:27 +00:00
</div>
)
}
})