1 files changed, 50 insertions, 28 deletions
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index c949b458..08d5d08f 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -4,19 +4,19 @@ import './tab_switcher.scss'
 
 export default Vue.component('tab-switcher', {
   name: 'TabSwitcher',
-  props: ['renderOnlyFocused', 'onSwitch'],
+  props: ['renderOnlyFocused', 'onSwitch', 'activeTab'],
   data () {
     return {
       active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
-  methods: {
-    activateTab (index, dataset) {
-      return () => {
-        if (typeof this.onSwitch === 'function') {
-          this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset)
-        }
-        this.active = index
+  computed: {
+    activeIndex () {
+      // In case of controlled component
+      if (this.activeTab) {
+        return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
+      } else {
+        return this.active
       }
     }
   },
@@ -26,32 +26,54 @@ export default Vue.component('tab-switcher', {
       this.active = this.$slots.default.findIndex(_ => _.tag)
     }
   },
+  methods: {
+    activateTab (index) {
+      return () => {
+        if (typeof this.onSwitch === 'function') {
+          this.onSwitch.call(null, this.$slots.default[index].key)
+        }
+        this.active = index
+      }
+    }
+  },
   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')
-            }
+      .map((slot, index) => {
+        if (!slot.tag) return
+        const classesTab = ['tab']
+        const classesWrapper = ['tab-wrapper']
 
-            return (
-              <div class={ classesWrapper.join(' ')}>
-                <button
-                  disabled={slot.data.attrs.disabled}
-                  onClick={this.activateTab(index)}
-                  class={classesTab.join(' ')}>
-                {slot.data.attrs.label}</button>
-              </div>
-            )
-          })
+        if (this.activeIndex === index) {
+          classesTab.push('active')
+          classesWrapper.push('active')
+        }
+        if (slot.data.attrs.image) {
+          return (
+            <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>
+          )
+        }
+        return (
+          <div class={classesWrapper.join(' ')}>
+            <button
+              disabled={slot.data.attrs.disabled}
+              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
+      const active = this.activeIndex === index
       if (this.renderOnlyFocused) {
         return active
           ? <div class="active">{slot}</div>