From 8ea2046a196024f1c57ae3c78f73110436362e2b Mon Sep 17 00:00:00 2001
From: XianQijing <xian@172-0-142-175.lightspeed.cicril.sbcglobal.net>
Date: Thu, 7 Jan 2021 17:37:07 +0800
Subject: [PATCH 1/2] refactor(element3): refactor RadioGroup component

---
 .../packages/radio-group/RadioGroup.vue       | 137 ------------------
 .../element3/packages/radio-group/index.js    |   8 -
 .../packages/theme-chalk/src/radioGroup.scss  |   9 ++
 .../src/components/Radio/tests/Radio.spec.js  |   2 +-
 .../RadioButton/tests/RadioButton.spec.js     |   2 +-
 .../src/components/RadioGroup/index.js        |   7 +
 .../components/RadioGroup/src/RadioGroup.vue  |  45 ++++++
 .../src/components/RadioGroup/src/props.ts    |  21 +++
 .../src/components/RadioGroup/src/types.ts    |   1 +
 .../RadioGroup/tests/RadioGroup.spec.ts       |  54 +++++++
 .../components/RadioGroup/tests/props.spec.ts |  24 +++
 packages/element3/src/index.js                |   2 +-
 12 files changed, 164 insertions(+), 148 deletions(-)
 delete mode 100644 packages/element3/packages/radio-group/RadioGroup.vue
 delete mode 100644 packages/element3/packages/radio-group/index.js
 create mode 100644 packages/element3/packages/theme-chalk/src/radioGroup.scss
 create mode 100644 packages/element3/src/components/RadioGroup/index.js
 create mode 100644 packages/element3/src/components/RadioGroup/src/RadioGroup.vue
 create mode 100644 packages/element3/src/components/RadioGroup/src/props.ts
 create mode 100644 packages/element3/src/components/RadioGroup/src/types.ts
 create mode 100644 packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts
 create mode 100644 packages/element3/src/components/RadioGroup/tests/props.spec.ts

diff --git a/packages/element3/packages/radio-group/RadioGroup.vue b/packages/element3/packages/radio-group/RadioGroup.vue
deleted file mode 100644
index e6bf217f8..000000000
--- a/packages/element3/packages/radio-group/RadioGroup.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template @change="test">
-  <component
-    :is="elTag"
-    class="el-radio-group"
-    role="radiogroup"
-    @keydown="handleKeydown"
-  >
-    <slot></slot>
-  </component>
-</template>
-<script>
-import { useEmitter } from '../../src/use/emitter'
-import {
-  getCurrentInstance,
-  onMounted,
-  watch,
-  toRefs,
-  computed,
-  inject
-} from 'vue'
-const keyCode = Object.freeze({
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40
-})
-
-export default {
-  name: 'ElRadioGroup',
-
-  componentName: 'ElRadioGroup',
-
-  props: {
-    modelValue: [String, Number, Symbol, Boolean],
-    size: String,
-    fill: String,
-    textColor: String,
-    disabled: Boolean
-  },
-
-  emits: ['update:modelValue', 'change'],
-
-  setup(props) {
-    const { modelValue = {}, size = {} } = toRefs(props)
-    const { dispatch } = useEmitter()
-    const { elFormItem } = useInject()
-
-    watch(modelValue, (v) => {
-      dispatch('el.form.change', v)
-    })
-
-    const { handleKeydown } = useKeyDown()
-
-    const { elTag, radioGroupSize } = useStyle({ elFormItem, size })
-
-    return {
-      elTag,
-      radioGroupSize,
-      handleKeydown
-    }
-  }
-}
-
-function useInject() {
-  const elFormItem = inject('elFormItem', {})
-  return {
-    elFormItem
-  }
-}
-
-function useKeyDown() {
-  const { proxy } = getCurrentInstance()
-  onMounted(() => {
-    const radios = proxy.$el.querySelectorAll('[type=radio]')
-    const firstLabel = proxy.$el.querySelectorAll('[role=radio]')[0]
-    if (![].some.call(radios, (radio) => radio.checked) && firstLabel) {
-      firstLabel.tabIndex = 0
-    }
-  })
-
-  function handleKeydown(e) {
-    const target = e.target
-    const className =
-      target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'
-    const radios = proxy.$el.querySelectorAll(className)
-    const length = radios.length
-    const index = [].indexOf.call(radios, target)
-    const roleRadios = proxy.$el.querySelectorAll('[role=radio]')
-    switch (e.keyCode) {
-      case keyCode.LEFT:
-      case keyCode.UP:
-        e.stopPropagation()
-        e.preventDefault()
-        if (index === 0) {
-          roleRadios[length - 1].click()
-          roleRadios[length - 1].focus()
-        } else {
-          roleRadios[index - 1].click()
-          roleRadios[index - 1].focus()
-        }
-        break
-      case keyCode.RIGHT:
-      case keyCode.DOWN:
-        if (index === length - 1) {
-          e.stopPropagation()
-          e.preventDefault()
-          roleRadios[0].click()
-          roleRadios[0].focus()
-        } else {
-          roleRadios[index + 1].click()
-          roleRadios[index + 1].focus()
-        }
-        break
-      default:
-        break
-    }
-  }
-
-  return { handleKeydown }
-}
-
-function useStyle({ elFormItem, size }) {
-  const { proxy, vnode } = getCurrentInstance()
-
-  const radioGroupSize = computed(() => {
-    return (
-      size.value || elFormItem.elFormItemSize || (proxy.$ELEMENT || {}).size
-    )
-  })
-
-  const elTag = computed(() => {
-    return (vnode.data || {}).tag || 'div'
-  })
-
-  return { radioGroupSize, elTag }
-}
-</script>
diff --git a/packages/element3/packages/radio-group/index.js b/packages/element3/packages/radio-group/index.js
deleted file mode 100644
index 8aec4a60d..000000000
--- a/packages/element3/packages/radio-group/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import RadioGroup from './RadioGroup.vue'
-
-/* istanbul ignore next */
-RadioGroup.install = function (app) {
-  app.component(RadioGroup.name, RadioGroup)
-}
-
-export default RadioGroup
diff --git a/packages/element3/packages/theme-chalk/src/radioGroup.scss b/packages/element3/packages/theme-chalk/src/radioGroup.scss
new file mode 100644
index 000000000..86ac150f1
--- /dev/null
+++ b/packages/element3/packages/theme-chalk/src/radioGroup.scss
@@ -0,0 +1,9 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@include b(radio-group) {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
+  font-size: 0;
+}
diff --git a/packages/element3/src/components/Radio/tests/Radio.spec.js b/packages/element3/src/components/Radio/tests/Radio.spec.js
index 85607c853..926861f0b 100644
--- a/packages/element3/src/components/Radio/tests/Radio.spec.js
+++ b/packages/element3/src/components/Radio/tests/Radio.spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { ref, h, reactive } from 'vue'
-import RadioGroup from 'element-ui/packages/radio-group/RadioGroup'
+import RadioGroup from '../../RadioGroup/src/RadioGroup.vue'
 import Radio from '../src/Radio.vue'
 
 describe('Radio.vue', () => {
diff --git a/packages/element3/src/components/RadioButton/tests/RadioButton.spec.js b/packages/element3/src/components/RadioButton/tests/RadioButton.spec.js
index bbc263dd2..c9f632756 100644
--- a/packages/element3/src/components/RadioButton/tests/RadioButton.spec.js
+++ b/packages/element3/src/components/RadioButton/tests/RadioButton.spec.js
@@ -1,5 +1,5 @@
 import RadioButton from '../src/RadioButton.vue'
-import RadioGroup from 'element-ui/packages/radio-group/RadioGroup'
+import RadioGroup from '../../RadioGroup/src/RadioGroup.vue'
 import { mount } from '@vue/test-utils'
 import { ref, h, nextTick, reactive } from 'vue'
 
diff --git a/packages/element3/src/components/RadioGroup/index.js b/packages/element3/src/components/RadioGroup/index.js
new file mode 100644
index 000000000..30a0502c3
--- /dev/null
+++ b/packages/element3/src/components/RadioGroup/index.js
@@ -0,0 +1,7 @@
+import ElRadioGroup from './src/RadioGroup'
+
+ElRadioGroup.install = function (app) {
+  app.component(ElRadioGroup.name, ElRadioGroup)
+}
+
+export { ElRadioGroup }
diff --git a/packages/element3/src/components/RadioGroup/src/RadioGroup.vue b/packages/element3/src/components/RadioGroup/src/RadioGroup.vue
new file mode 100644
index 000000000..5b3061141
--- /dev/null
+++ b/packages/element3/src/components/RadioGroup/src/RadioGroup.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="el-radio-group" role="radiogroup">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { props } from './props'
+import { defineComponent, inject, computed, toRefs, watch } from 'vue'
+import { useGlobalOptions } from '../../../use/globalConfig'
+import { useEmitter } from '../../../use/emitter'
+
+export default defineComponent({
+  name: 'ElRadioGroup',
+
+  props,
+
+  emits: ['update:modelValue', 'change'],
+
+  setup(props) {
+    const { size, modelValue } = toRefs(props)
+    const globalConfig = useGlobalOptions()
+    const elFormItem = inject('elFormItem', {})
+    const { dispatch } = useEmitter()
+
+    watch(modelValue, (v) => {
+      dispatch('el.form.change', v)
+    })
+
+    const radioGroupSize = useRadioGroupSize({ size, elFormItem, globalConfig })
+
+    return {
+      radioGroupSize
+    }
+  }
+})
+
+const useRadioGroupSize = ({ size, elFormItem, globalConfig }) => {
+  return computed(() => {
+    return (
+      size?.value || (elFormItem as any)?.elFormItemSize || globalConfig.size
+    )
+  })
+}
+</script>
diff --git a/packages/element3/src/components/RadioGroup/src/props.ts b/packages/element3/src/components/RadioGroup/src/props.ts
new file mode 100644
index 000000000..8d1295867
--- /dev/null
+++ b/packages/element3/src/components/RadioGroup/src/props.ts
@@ -0,0 +1,21 @@
+import { RadioGroupSize } from './types'
+import { PropType } from 'vue'
+
+export const props = {
+  modelValue: [String, Number, Symbol, Boolean],
+  size: {
+    type: String as PropType<RadioGroupSize>,
+    validator(val: string): boolean {
+      return ['medium', 'small', 'mini', ''].includes(val)
+    }
+  },
+  fill: {
+    type: String,
+    default: '#409EFF'
+  },
+  textColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  disabled: Boolean
+}
diff --git a/packages/element3/src/components/RadioGroup/src/types.ts b/packages/element3/src/components/RadioGroup/src/types.ts
new file mode 100644
index 000000000..447b86fb2
--- /dev/null
+++ b/packages/element3/src/components/RadioGroup/src/types.ts
@@ -0,0 +1 @@
+export type RadioGroupSize = 'medium' | 'small' | 'mini'
diff --git a/packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts b/packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts
new file mode 100644
index 000000000..4ca8c6824
--- /dev/null
+++ b/packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts
@@ -0,0 +1,54 @@
+import RadioGroup from '../src/RadioGroup.vue'
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+
+describe('radioGroup.vue', () => {
+  it('should show content', () => {
+    const wrapper = mount(RadioGroup, {
+      slots: {
+        default: 'radioGroup'
+      }
+    })
+
+    expect(wrapper).toHaveTextContent('radioGroup')
+  })
+
+  it('form-item size', () => {
+    const wrapper = mount(RadioGroup, {
+      global: {
+        provide: {
+          elFormItem: {
+            elFormItemSize: 'small'
+          }
+        }
+      }
+    })
+
+    expect(wrapper.vm.radioGroupSize).toEqual('small')
+  })
+
+  it('size', () => {
+    const wrapper = mount(RadioGroup, {
+      props: {
+        size: 'mini'
+      }
+    })
+
+    expect(wrapper.vm.radioGroupSize).toEqual('mini')
+  })
+
+  it('modelValue', async () => {
+    const modelValue = ref('')
+    const wrapper = mount(RadioGroup, {
+      props: {
+        modelValue,
+        'update:modelValue'(v) {
+          modelValue.value = v
+        }
+      }
+    })
+
+    await wrapper.setProps({ modelValue: '上海' })
+    expect(wrapper.vm.modelValue).toEqual('上海')
+  })
+})
diff --git a/packages/element3/src/components/RadioGroup/tests/props.spec.ts b/packages/element3/src/components/RadioGroup/tests/props.spec.ts
new file mode 100644
index 000000000..e2888c741
--- /dev/null
+++ b/packages/element3/src/components/RadioGroup/tests/props.spec.ts
@@ -0,0 +1,24 @@
+import { props } from '../src/props'
+
+describe('RadioGroup.props', () => {
+  it('size', () => {
+    const { size } = props
+
+    expect(size.validator('medium')).toBe(true)
+    expect(size.validator('small')).toBe(true)
+    expect(size.validator('mini')).toBe(true)
+    expect(size.validator('')).toBe(true)
+  })
+
+  it('fill', () => {
+    const { fill } = props
+
+    expect(fill.default).toBe('#409EFF')
+  })
+
+  it('textColor', () => {
+    const { textColor } = props
+
+    expect(textColor.default).toBe('#ffffff')
+  })
+})
diff --git a/packages/element3/src/index.js b/packages/element3/src/index.js
index d417e6c25..bf16e51c3 100644
--- a/packages/element3/src/index.js
+++ b/packages/element3/src/index.js
@@ -15,7 +15,7 @@ import { ElLink } from './components/Link'
 // Form
 import { ElRadio } from './components/Radio'
 import { ElRadioButton } from './components/RadioButton'
-import ElRadioGroup from '../packages/radio-group'
+import { ElRadioGroup } from './components/RadioGroup'
 import ElCheckbox from '../packages/checkbox'
 import ElCheckboxButton from '../packages/checkbox-button'
 import ElCheckboxGroup from '../packages/checkbox-group'

From 32060df409f3219df0f3fadc7cd2cabab35ff6df Mon Sep 17 00:00:00 2001
From: XianQijing <xian@172-0-142-175.lightspeed.cicril.sbcglobal.net>
Date: Mon, 11 Jan 2021 16:08:45 +0800
Subject: [PATCH 2/2] test: add test cases

---
 .../RadioGroup/tests/RadioGroup.spec.ts         | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts b/packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts
index 4ca8c6824..15801ab55 100644
--- a/packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts
+++ b/packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts
@@ -13,8 +13,11 @@ describe('radioGroup.vue', () => {
     expect(wrapper).toHaveTextContent('radioGroup')
   })
 
-  it('form-item size', () => {
+  it('form-item size', async () => {
     const wrapper = mount(RadioGroup, {
+      props: {
+        size: ''
+      },
       global: {
         provide: {
           elFormItem: {
@@ -25,9 +28,14 @@ describe('radioGroup.vue', () => {
     })
 
     expect(wrapper.vm.radioGroupSize).toEqual('small')
+
+    await wrapper.setProps({
+      size: 'medium'
+    })
+    expect(wrapper.vm.radioGroupSize).toEqual('medium')
   })
 
-  it('size', () => {
+  it('size', async () => {
     const wrapper = mount(RadioGroup, {
       props: {
         size: 'mini'
@@ -35,6 +43,11 @@ describe('radioGroup.vue', () => {
     })
 
     expect(wrapper.vm.radioGroupSize).toEqual('mini')
+
+    await wrapper.setProps({
+      size: 'small'
+    })
+    expect(wrapper.vm.radioGroupSize).toEqual('small')
   })
 
   it('modelValue', async () => {