From 7be1069a93aa5480c39049d16717361a29604075 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 4 May 2018 15:32:31 +0200
Subject: [PATCH 1/5] Add tab navigation to Tabs

---
 src/components/tabs/tabs.vue    | 70 ++++++++++++++++++++++++++++++---
 src/styles/components/tabs.less | 10 ++++-
 2 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index d51f81ce..5f847ee6 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -2,7 +2,13 @@
     <div :class="classes">
         <div :class="[prefixCls + '-bar']">
             <div :class="[prefixCls + '-nav-right']" v-if="showSlot"><slot name="extra"></slot></div>
-            <div :class="[prefixCls + '-nav-container']">
+            <div
+                :class="[prefixCls + '-nav-container']"
+                tabindex="0"
+                ref="navContainer"
+                @keydown="handleTabKeyNavigation"
+                @keydown.space="handleTabKeyboardSelect"
+            >
                 <div ref="navWrap" :class="[prefixCls + '-nav-wrap', scrollable ? prefixCls + '-nav-scrollable' : '']">
                     <span :class="[prefixCls + '-nav-prev', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollPrev"><Icon type="chevron-left"></Icon></span>
                     <span :class="[prefixCls + '-nav-next', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollNext"><Icon type="chevron-right"></Icon></span>
@@ -20,7 +26,7 @@
                 </div>
             </div>
         </div>
-        <div :class="contentClasses" :style="contentStyle"><slot></slot></div>
+        <div :class="contentClasses" :style="contentStyle" ref="panes"><slot></slot></div>
     </div>
 </template>
 <script>
@@ -31,6 +37,28 @@
     import elementResizeDetectorMaker from 'element-resize-detector';
 
     const prefixCls = 'ivu-tabs';
+    const transitionTime = 300; // from CSS
+
+    const getNextTab = (list, activeKey, direction, countDisabledAlso) => {
+        const currentIndex = list.findIndex(tab => tab.name === activeKey);
+        const nextIndex = (currentIndex + direction + list.length) % list.length;
+        const nextTab = list[nextIndex];
+        if (nextTab.disabled) return getNextTab(list, nextTab, direction, countDisabledAlso);
+        else return nextTab;
+    };
+
+    const focusFirst = (element, root) => {
+        try {element.focus();}
+        catch(err) {}
+
+        if (document.activeElement == element && element !== root) return true;
+
+        const candidates = element.children;
+        for (let candidate of candidates) {
+            if (focusFirst(candidate, root)) return true;
+        }
+        return false;
+    };
 
     export default {
         name: 'Tabs',
@@ -68,11 +96,13 @@
                 barWidth: 0,
                 barOffset: 0,
                 activeKey: this.value,
+                focusedKey: this.value,
                 showSlot: false,
                 navStyle: {
                     transform: ''
                 },
-                scrollable: false
+                scrollable: false,
+                transitioning: false,
             };
         },
         computed: {
@@ -183,17 +213,45 @@
                     `${prefixCls}-tab`,
                     {
                         [`${prefixCls}-tab-disabled`]: item.disabled,
-                        [`${prefixCls}-tab-active`]: item.name === this.activeKey
+                        [`${prefixCls}-tab-active`]: item.name === this.activeKey,
+                        [`${prefixCls}-tab-focused`]: item.name === this.focusedKey,
                     }
                 ];
             },
             handleChange (index) {
+                if (this.transitioning) return;
+
+                this.transitioning = true;
+                setTimeout(() => this.transitioning = false, transitionTime);
+
                 const nav = this.navList[index];
                 if (nav.disabled) return;
                 this.activeKey = nav.name;
                 this.$emit('input', nav.name);
                 this.$emit('on-click', nav.name);
             },
+            handleTabKeyNavigation(e){
+                if (e.keyCode !== 37 && e.keyCode !== 39) return;
+                const direction = e.keyCode === 39 ? 1 : -1;
+                const nextTab = getNextTab(this.navList, this.focusedKey, direction);
+                this.focusedKey = nextTab.name;
+            },
+            handleTabKeyboardSelect(){
+                this.activeKey = this.focusedKey;
+                const nextIndex = this.navList.findIndex(tab => tab.name === this.focusedKey);
+                [...this.$refs.panes.children].forEach((el, i) => {
+                    if (nextIndex === i) {
+                        [...el.children].forEach(child => child.style.display = 'block');
+                        setTimeout(() => {
+                            focusFirst(el, el);
+                        }, transitionTime);
+                    } else {
+                        setTimeout(() => {
+                            [...el.children].forEach(child => child.style.display = 'none');
+                        }, transitionTime);
+                    }
+                });
+            },
             handleRemove (index) {
                 const tabs = this.getTabs();
                 const tab = tabs[index];
@@ -325,8 +383,10 @@
         watch: {
             value (val) {
                 this.activeKey = val;
+                this.focusedKey = val;
             },
-            activeKey () {
+            activeKey (val) {
+                this.focusedKey = val;
                 this.updateBar();
                 this.updateStatus();
                 this.broadcast('Table', 'on-visible-change', true);
diff --git a/src/styles/components/tabs.less b/src/styles/components/tabs.less
index ef813e85..c48ec118 100644
--- a/src/styles/components/tabs.less
+++ b/src/styles/components/tabs.less
@@ -39,6 +39,13 @@
         .clearfix;
     }
 
+    &-nav-container:focus {
+        outline: none;
+        .@{tabs-prefix-cls}-tab-focused {
+            border-color: @link-hover-color !important;
+        }
+    }
+
     &-nav-container-scrolling {
         padding-left: 32px;
         padding-right: 32px;
@@ -158,6 +165,7 @@
             width: 100%;
             transition: opacity .3s;
             opacity: 1;
+            outline: none;
         }
 
         .@{tabs-prefix-cls}-tabpane-inactive {
@@ -228,4 +236,4 @@
             display: none;
         }
     }
-}
\ No newline at end of file
+}

From 58efc281efa24b5381843a20e55ee4d1aadbddcc Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 4 May 2018 15:32:37 +0200
Subject: [PATCH 2/5] update example

---
 examples/routers/tabs.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index dc71d0f4..66d9ff3b 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -158,10 +158,20 @@
 <!--</script>-->
 
 <template>
-    <Tabs type="card">
-        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
+    <div>
+        <i-input></i-input>
         <Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
-    </Tabs>
+
+        <hr style="margin: 10px 0;">
+        <Tabs type="card">
+            <TabPane v-for="tab in tabs" :key="tab" :label="'Tab' + tab">
+                <div>
+                    <h3>Some text...</h3>
+                    <i-button>Some focusable content...{{ tab }}</i-button>
+                </div>
+            </TabPane>
+        </Tabs>
+    </div>
 </template>
 <script>
     export default {

From 2f40e7ea73f17a43ac6f4b1c35f496fe96410b77 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 4 May 2018 15:41:32 +0200
Subject: [PATCH 3/5] add eslint-disable-line

---
 src/components/tabs/tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index 5f847ee6..0cfc3a7a 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -49,7 +49,7 @@
 
     const focusFirst = (element, root) => {
         try {element.focus();}
-        catch(err) {}
+        catch(err) {} // eslint-disable-line no-empty
 
         if (document.activeElement == element && element !== root) return true;
 

From 7fa3f9efcb725e881e1b7821ff80309ec8330230 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Tue, 8 May 2018 11:16:17 +0800
Subject: [PATCH 4/5] prevent space to scroll page

---
 src/components/tabs/tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index 0cfc3a7a..c47ae44a 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -7,7 +7,7 @@
                 tabindex="0"
                 ref="navContainer"
                 @keydown="handleTabKeyNavigation"
-                @keydown.space="handleTabKeyboardSelect"
+                @keydown.space.prevent="handleTabKeyboardSelect"
             >
                 <div ref="navWrap" :class="[prefixCls + '-nav-wrap', scrollable ? prefixCls + '-nav-scrollable' : '']">
                     <span :class="[prefixCls + '-nav-prev', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollPrev"><Icon type="chevron-left"></Icon></span>

From 45dbc6fdea70835d638921e7583c8fcb7829c33e Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Tue, 8 May 2018 12:35:10 +0200
Subject: [PATCH 5/5] Correct disabled forward navigation

---
 examples/routers/tabs.vue    | 5 +++++
 src/components/tabs/tabs.vue | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 66d9ff3b..cb017f63 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -171,6 +171,11 @@
                 </div>
             </TabPane>
         </Tabs>
+        <Tabs type="card">
+            <TabPane label="标签一">标签一的内容</TabPane>
+            <TabPane label="标签二" disabled>标签二的内容</TabPane>
+            <TabPane label="标签三">标签三的内容</TabPane>
+        </Tabs>
     </div>
 </template>
 <script>
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index c47ae44a..243fea2e 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -43,7 +43,7 @@
         const currentIndex = list.findIndex(tab => tab.name === activeKey);
         const nextIndex = (currentIndex + direction + list.length) % list.length;
         const nextTab = list[nextIndex];
-        if (nextTab.disabled) return getNextTab(list, nextTab, direction, countDisabledAlso);
+        if (nextTab.disabled) return getNextTab(list, nextTab.name, direction, countDisabledAlso);
         else return nextTab;
     };
 
@@ -237,8 +237,9 @@
                 this.focusedKey = nextTab.name;
             },
             handleTabKeyboardSelect(){
-                this.activeKey = this.focusedKey;
-                const nextIndex = this.navList.findIndex(tab => tab.name === this.focusedKey);
+                this.activeKey = this.focusedKey || 0;
+                const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
+
                 [...this.$refs.panes.children].forEach((el, i) => {
                     if (nextIndex === i) {
                         [...el.children].forEach(child => child.style.display = 'block');
@@ -411,6 +412,8 @@
 
                 this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
             }
+
+            this.handleTabKeyboardSelect();
         },
         beforeDestroy() {
             this.observer.removeListener(this.$refs.navWrap, this.handleResize);