From 36d24701325afe4874af14fc559d0445192dbaf5 Mon Sep 17 00:00:00 2001
From: Graham Fairweather <xotic750@gmail.com>
Date: Fri, 19 Jan 2018 15:16:49 +0100
Subject: [PATCH] Radio w3c keyboard WIP

---
 examples/routers/radio.vue           |  4 ++--
 package.json                         |  2 +-
 src/components/radio/radio-group.vue | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/components/radio/radio.vue       |  3 +--
 src/styles/components/radio.less     |  1 +
 5 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/examples/routers/radio.vue b/examples/routers/radio.vue
index b4e6e21..69fd7b8 100644
--- a/examples/routers/radio.vue
+++ b/examples/routers/radio.vue
@@ -43,9 +43,9 @@
         data () {
             return {
                 single: true,
-                phone: 'apple',
+                phone: '',
                 button2: '北京',
-            }
+            };
         },
         methods: {
 
diff --git a/package.json b/package.json
index d22f448..a9e1e09 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "tinycolor2": "^1.4.1"
   },
   "peerDependencies": {
-    "vue": "^2.5.2"
+    "vue": "^2.5.13"
   },
   "devDependencies": {
     "autoprefixer-loader": "^2.0.0",
diff --git a/src/components/radio/radio-group.vue b/src/components/radio/radio-group.vue
index cf04d1e..4e6715e 100644
--- a/src/components/radio/radio-group.vue
+++ b/src/components/radio/radio-group.vue
@@ -1,5 +1,11 @@
 <template>
-    <div :class="classes">
+    <div
+        :class="classes" tabindex="0"
+        @keydown.left="onLeft"
+        @keydown.right="onRight"
+        @keydown.up="onUp"
+        @keydown.down="onDown"
+        @keydown.tab="onTab">
         <slot></slot>
     </div>
 </template>
@@ -35,7 +41,8 @@
         data () {
             return {
                 currentValue: this.value,
-                childrens: []
+                childrens: [],
+                preventDefaultTab: true
             };
         },
         computed: {
@@ -72,7 +79,52 @@
                 this.$emit('input', data.value);
                 this.$emit('on-change', data.value);
                 this.dispatch('FormItem', 'on-form-change', data.value);
-            }
+            },
+            findRadio(value) {
+                return this.childrens && this.childrens.length ? this.childrens.find((child) => child.value === value) : undefined;
+            },
+            findIndexRadio(value) {
+                return this.childrens && this.childrens.length ? this.childrens.findIndex((child) => child.value === value) : -1;
+            },
+            includesRadio(value) {
+                return this.childrens && this.childrens.length ? this.childrens.includes((child) => child.value === value) : false;
+            },
+            nextRadio() {
+              if (this.includesRadio(this.currentValue)) {
+                console.log('get next');
+              } else {
+                return this.childrens && this.childrens.length ? this.childrens[0] : undefined;
+              }
+            },
+            onLeft() {
+                console.log('left', this.currentValue);
+            },
+            onRight() {
+                console.log('right', this.currentValue);
+            },
+            onUp() {
+                console.log('up', this.currentValue);
+            },
+            onDown() {
+                console.log('down', this.currentValue);
+            },
+            onTab(event) {
+                if (!this.preventDefaultTab) {
+                    return;
+                }
+
+                event.preventDefault();
+                this.preventDefaultTab = false;
+                this.currentValue = this.nextRadio();
+                if (this.currentValue) {
+                    this.change({
+                        value: this.currentValue.label
+                    });
+                }
+
+                console.log('tab', this);
+
+            },
         },
         watch: {
             value () {
diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index 0a6af03..7be686f 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -1,8 +1,7 @@
 <template>
     <label
         :class="wrapClasses"
-        :tabindex="disabled ? -1 : 0"
-        @keyup.space="change">
+        :tabindex="disabled || group ? -1 : 0">
         <span :class="radioClasses">
             <span :class="innerClasses"></span>
             <input
diff --git a/src/styles/components/radio.less b/src/styles/components/radio.less
index 2024908..de53295 100644
--- a/src/styles/components/radio.less
+++ b/src/styles/components/radio.less
@@ -7,6 +7,7 @@
     display: inline-block;
     font-size: @font-size-small;
     vertical-align: middle;
+    //outline: 0;
     &-vertical{
         .@{radio-prefix-cls}-wrapper {
             display: block;
--
libgit2 0.21.4