Add Connected <RadioGroup />

Author: isnifer

VueForm/ConnectedRadioGroup.js

@@ -0,0 +1,131 @@
+import { Radio, RadioGroup } from 'element-ui'
+import noop from 'lodash/noop'
+import isNil from 'lodash/isNil'
+import resolveRegisterFormComponent from './utils/resolveRegisterFormComponent'
+import FormItem from './ConnectedFormItem'
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    options: {
+      type: Array,
+      required: true,
+    },
+
+    value: [String, Number],
+
+    valueKey: {
+      type: String,
+      default: () => 'id',
+    },
+
+    labelKey: {
+      type: String,
+      default: () => 'name',
+    },
+
+    disabledKey: {
+      type: String,
+      default: () => 'disabled',
+    },
+
+    size: String,
+    disabled: Boolean,
+    border: Boolean,
+
+    validate: {
+      type: Function,
+      default: noop,
+    },
+
+    handleFocus: {
+      type: Function,
+      default: noop,
+    },
+
+    handleBlur: {
+      type: Function,
+      default: noop,
+    },
+
+    handleChange: {
+      type: Function,
+      default: noop,
+    },
+
+    /* FormItem Props */
+    label: String,
+    formItem: Boolean,
+    labelWidth: String,
+  },
+
+  data() {
+    const $registerFormComponent = resolveRegisterFormComponent(this)
+
+    return $registerFormComponent(this.name, this.value, this.validate)
+  },
+
+  destroyed() {
+    this.cleanFormValue()
+  },
+
+  methods: {
+    generateOptions(option) {
+      let { [this.valueKey]: optionValue, [this.labelKey]: optionLabel } = option
+      const { [this.disabledKey]: optionDisabled } = option
+
+      if (isNil(optionLabel)) {
+        optionValue = option
+        optionLabel = option
+      }
+
+      return (
+        <Radio key={optionValue} label={optionValue} disabled={optionDisabled} border={this.border}>
+          {optionLabel || optionValue}
+        </Radio>
+      )
+    },
+
+    handleFieldBlur(...args) {
+      this.touched = true
+
+      this.handleBlur(...args)
+    },
+
+    renderRadioGroup(value, setValue) {
+      return (
+        <RadioGroup
+          class={this.class}
+          name={this.name}
+          value={value}
+          size={this.size}
+          disabled={this.disabled}
+          on-input={setValue}
+          on-focus={this.handleFocus}
+          on-blur={this.handleFieldBlur}
+          on-change={setValue}>
+          {this.options.map(this.generateOptions)}
+        </RadioGroup>
+      )
+    },
+  },
+
+  render() {
+    const [value, setValue, error] = this.useState()
+    const fieldError = this.touched ? error : undefined
+
+    if (this.formItem) {
+      return (
+        <FormItem label={this.label || this.name} label-width={this.labelWidth} error={fieldError}>
+          {this.renderRadioGroup(value, setValue)}
+        </FormItem>
+      )
+    }
+
+    return this.renderRadioGroup(value, setValue)
+  },
+}

VueForm/index.js

@@ -1,5 +1,6 @@
 import Form from './Form'
 import Radio from './ConnectedRadio'
+import RadioGroup from './ConnectedRadioGroup'
 import Checkbox from './ConnectedCheckbox'
 import CheckboxGroup from './ConnectedCheckboxGroup'
 import Input from './ConnectedInput'
@@ -14,6 +15,7 @@ import validations from './validations'
 
 export {
   Radio,
+  RadioGroup,
   Checkbox,
   CheckboxGroup,
   Input,

example/src/App.vue

@@ -3,16 +3,22 @@ import BasicForm from './BasicForm'
 import InlineValidationsForm from './InlineValidationsForm'
 import AsyncValidationForm from './AsyncValidationForm'
 
+const Divider = {
+  render() {
+    return (
+      <div class="divider" />
+    )
+  },
+}
+
 export default {
   render() {
     return (
       <div class="forms">
         <BasicForm />
-        <br />
-        <hr />
+        <Divider />
         <InlineValidationsForm />
-        <br />
-        <hr />
+        <Divider />
         <AsyncValidationForm />
       </div>
     )
@@ -25,4 +31,10 @@ export default {
   max-width: 1000px;
   padding: 0 20px;
 }
+
+.divider {
+  height: 2px;
+  background-color: #757575;
+  margin: 50px 0;
+}
 </style>

example/src/BasicForm/BasicForm.vue

@@ -5,6 +5,7 @@ import Form, {
   CheckboxGroup,
   InputNumber,
   Radio,
+  RadioGroup,
   Select,
   Slider,
   Switch,
@@ -27,6 +28,7 @@ export default {
         'Ebony Maw',
       ],
       companiesOptions: ['Apple', 'Google', 'Amazon', 'Microsoft'],
+      browsersOptions: ['Chrome', 'Safari', 'Firefox', 'Edge', 'Opera'],
     }
   },
 
@@ -58,6 +60,12 @@ export default {
                 <Radio name="word" value="B">B</Radio>
               </div>
               <br />
+              <RadioGroup
+                formItem
+                name="browser"
+                label="Which browser do you use?"
+                options={this.browsersOptions}
+              />
               <Select
                 formItem
                 name="superhero"