From 6e219c2961ddd205d618f2775076c25f49c63ca2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 17 Jan 2019 22:25:50 +0300
Subject: add support for tab-switcher to automatically switch to first tab if
 asked index is invalid

---
 src/components/tab_switcher/tab_switcher.jsx | 45 ++++++++++++++++++----------
 1 file changed, 29 insertions(+), 16 deletions(-)

(limited to 'src/components/tab_switcher')

diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index 2f362c4d..175ae777 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -1,23 +1,32 @@
 import Vue from 'vue'
 
+
 import './tab_switcher.scss'
 
 export default Vue.component('tab-switcher', {
   name: 'TabSwitcher',
   data () {
     return {
-      active: 0
+      active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
   methods: {
-    activateTab(index) {
-      return () => this.active = index;
+    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) {
+  render (h) {
     const tabs = this.$slots.default
-          .filter(slot => slot.data)
           .map((slot, index) => {
+            if (!slot.tag) return
             const classesTab = ['tab']
             const classesWrapper = ['tab-wrapper']
 
@@ -25,28 +34,32 @@ export default Vue.component('tab-switcher', {
               classesTab.push('active')
               classesWrapper.push('active')
             }
+
             return (
               <div class={ classesWrapper.join(' ')}>
-                <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+              <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
               </div>
             )
-          });
-    const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => {
+          })
+
+    const contents = this.$slots.default.map((slot, index) => {
+      if (!slot.tag) return
       const active = index === this.active
       return (
         <div class={active ? 'active' : 'hidden'}>
-          {slot}
+        {slot}
         </div>
       )
-    });
+    })
+
     return (
       <div class="tab-switcher">
-        <div class="tabs">
-          {tabs}
-        </div>
-        <div class="contents">
-          {contents}
-        </div>
+      <div class="tabs">
+      {tabs}
+      </div>
+      <div class="contents">
+      {contents}
+      </div>
       </div>
     )
   }
-- 
cgit v1.2.3-70-g09d2


From 8172eeb1e070c96fd086093088918a6e9abeeb8b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 17 Jan 2019 23:05:58 +0300
Subject: fix indents

---
 src/components/tab_switcher/tab_switcher.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/components/tab_switcher')

diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index 175ae777..2eb30ea6 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -54,12 +54,12 @@ export default Vue.component('tab-switcher', {
 
     return (
       <div class="tab-switcher">
-      <div class="tabs">
-      {tabs}
-      </div>
-      <div class="contents">
-      {contents}
-      </div>
+        <div class="tabs">
+          {tabs}
+        </div>
+        <div class="contents">
+          {contents}
+        </div>
       </div>
     )
   }
-- 
cgit v1.2.3-70-g09d2


From 92dedcd53e56562205e704eea2754f159eb9707d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jan 2019 20:26:06 +0300
Subject: linting

---
 src/components/tab_switcher/tab_switcher.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'src/components/tab_switcher')

diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index 2eb30ea6..9038733c 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -1,6 +1,5 @@
 import Vue from 'vue'
 
-
 import './tab_switcher.scss'
 
 export default Vue.component('tab-switcher', {
@@ -37,7 +36,7 @@ export default Vue.component('tab-switcher', {
 
             return (
               <div class={ classesWrapper.join(' ')}>
-              <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+                <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
               </div>
             )
           })
@@ -47,7 +46,7 @@ export default Vue.component('tab-switcher', {
       const active = index === this.active
       return (
         <div class={active ? 'active' : 'hidden'}>
-        {slot}
+          {slot}
         </div>
       )
     })
-- 
cgit v1.2.3-70-g09d2