diff options
author | Phil Hughes <me@iamphill.com> | 2018-05-23 13:44:47 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-05-24 12:38:02 +0300 |
commit | cfe4d2f29dcdcfad96ae7ba5a5eb822fbe46a9a7 (patch) | |
tree | 31136b032823af7453e5fd382ff180a00696d1a8 /app/assets/javascripts/vue_shared/components | |
parent | 32f965b244f38b8f94aff0d0f7bb952de7593127 (diff) |
added tab component
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/tabs/tab.vue | 42 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/tabs/tabs.js | 62 |
2 files changed, 104 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/tabs/tab.vue b/app/assets/javascripts/vue_shared/components/tabs/tab.vue new file mode 100644 index 00000000000..2a35d6bc151 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/tabs/tab.vue @@ -0,0 +1,42 @@ +<script> +export default { + props: { + title: { + type: String, + required: false, + default: '', + }, + active: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + // props can't be updated, so we map it to data where we can + localActive: this.active, + }; + }, + watch: { + active() { + this.localActive = this.active; + }, + }, + created() { + this.isTab = true; + }, +}; +</script> + +<template> + <div + class="tab-pane" + :class="{ + active: localActive + }" + role="tabpanel" + > + <slot></slot> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/tabs/tabs.js b/app/assets/javascripts/vue_shared/components/tabs/tabs.js new file mode 100644 index 00000000000..3dff37b1c84 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/tabs/tabs.js @@ -0,0 +1,62 @@ +export default { + data() { + return { + currentIndex: 0, + tabs: [], + }; + }, + mounted() { + this.updateTabs(); + }, + methods: { + updateTabs() { + this.tabs = this.$children.filter(child => child.isTab); + this.currentIndex = this.tabs.findIndex(tab => tab.localActive); + }, + setTab(index) { + this.tabs[this.currentIndex].localActive = false; + this.tabs[index].localActive = true; + + this.currentIndex = index; + }, + }, + render(h) { + const navItems = this.tabs.map((tab, i) => + h( + 'li', + { + key: i, + class: tab.localActive ? 'active' : null, + }, + [ + h( + 'a', + { + href: '#', + on: { + click: () => this.setTab(i), + }, + }, + tab.$slots.title || tab.title, + ), + ], + ), + ); + const nav = h( + 'ul', + { + class: 'nav-links tab-links', + }, + [navItems], + ); + const content = h( + 'div', + { + class: ['tab-content'], + }, + [this.$slots.default], + ); + + return h('div', {}, [[nav], content]); + }, +}; |