diff options
| author | shpuld <shp@cock.li> | 2019-02-03 10:13:09 +0200 |
|---|---|---|
| committer | shpuld <shp@cock.li> | 2019-02-03 10:13:09 +0200 |
| commit | b614cb94e502f3491afd07e5bcb785ad122cf100 (patch) | |
| tree | 289e82bd2f5667ab773bb838a88dd312bba90edf /src/components/tab_switcher/tab_switcher.jsx | |
| parent | dbb16d56e29b8a32fb7c1a7af56a7953f571cdb4 (diff) | |
| parent | c7ee2ed83100e40247fc35be8b138befc44175bc (diff) | |
merge develop in
Diffstat (limited to 'src/components/tab_switcher/tab_switcher.jsx')
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.jsx | 65 |
1 files changed, 0 insertions, 65 deletions
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx deleted file mode 100644 index 9038733c..00000000 --- a/src/components/tab_switcher/tab_switcher.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import Vue from 'vue' - -import './tab_switcher.scss' - -export default Vue.component('tab-switcher', { - name: 'TabSwitcher', - data () { - return { - active: this.$slots.default.findIndex(_ => _.tag) - } - }, - methods: { - 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) { - const tabs = this.$slots.default - .map((slot, index) => { - if (!slot.tag) return - const classesTab = ['tab'] - const classesWrapper = ['tab-wrapper'] - - if (index === this.active) { - classesTab.push('active') - classesWrapper.push('active') - } - - return ( - <div class={ classesWrapper.join(' ')}> - <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> - </div> - ) - }) - - const contents = this.$slots.default.map((slot, index) => { - if (!slot.tag) return - const active = index === this.active - return ( - <div class={active ? 'active' : 'hidden'}> - {slot} - </div> - ) - }) - - return ( - <div class="tab-switcher"> - <div class="tabs"> - {tabs} - </div> - <div class="contents"> - {contents} - </div> - </div> - ) - } -}) |
