Merge pull request hug-sun#540 from XianQijing/master

refactor(element3): refactor RadioGroup component

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;
+}

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', () => {

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'
 

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 }

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>

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
+}

packages/element3/src/components/RadioGroup/src/types.ts

@@ -0,0 +1 @@
+export type RadioGroupSize = 'medium' | 'small' | 'mini'

packages/element3/src/components/RadioGroup/tests/RadioGroup.spec.ts

@@ -0,0 +1,67 @@
+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', async () => {
+    const wrapper = mount(RadioGroup, {
+      props: {
+        size: ''
+      },
+      global: {
+        provide: {
+          elFormItem: {
+            elFormItemSize: 'small'
+          }
+        }
+      }
+    })
+
+    expect(wrapper.vm.radioGroupSize).toEqual('small')
+
+    await wrapper.setProps({
+      size: 'medium'
+    })
+    expect(wrapper.vm.radioGroupSize).toEqual('medium')
+  })
+
+  it('size', async () => {
+    const wrapper = mount(RadioGroup, {
+      props: {
+        size: 'mini'
+      }
+    })
+
+    expect(wrapper.vm.radioGroupSize).toEqual('mini')
+
+    await wrapper.setProps({
+      size: 'small'
+    })
+    expect(wrapper.vm.radioGroupSize).toEqual('small')
+  })
+
+  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('上海')
+  })
+})

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')
+  })
+})

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'