1 files changed, 64 insertions, 0 deletions
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..4362264caa5
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/tabs/tabs.js
@@ -0,0 +1,64 @@
+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,
+        },
+        [
+          h(
+            'a',
+            {
+              class: tab.localActive ? 'active' : null,
+              attrs: {
+                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]);
+  },
+};