feat: add CInputRadioGroup component

Author: woothu

src/components/form/CInputRadioGroup.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <CInputRadio
+      v-for="({value, label, props}, key) in computedOptions"
+      :key="key"
+      :label="label"
+      :name="groupName"
+      :value="value"
+      :checked="checked === value"
+      @change="change($event, value)"
+      :custom="custom"
+      v-bind="props"
+    />
+  </div>
+</template>
+
+<script>
+import CInputRadio from './CInputRadio'
+export default {
+  name: 'CInputRadioGroup',
+  components: {
+    CInputRadio
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    checked: String,
+    name: String,
+    custom: Boolean
+  },
+  computed: {
+    computedOptions () {
+      return this.options.map(option => {
+        if (typeof option !== 'object') {
+          return {
+            label: option,
+            value: option
+          }
+        }
+        return option
+      })
+    },
+    groupName () {
+      return this.name || 'radio' + this._uid
+    }
+  },
+  methods: {
+    change (e, option) {
+      this.$emit('update:checked', option, e)
+    }
+  }
+}
+</script>

src/components/form/index.js

@@ -4,6 +4,7 @@ import CInput from './CInput'
 import CInputCheckbox from './CInputCheckbox'
 import CInputFile from './CInputFile'
 import CInputRadio from './CInputRadio'
+import CInputRadioGroup from './CInputRadioGroup'
 import CSelect from './CSelect'
 import CTextarea from './CTextarea'
 
@@ -14,6 +15,7 @@ export {
   CInputCheckbox,
   CInputFile,
   CInputRadio,
+  CInputRadioGroup,
   CSelect,
   CTextarea
 }

src/components/form/tests/CInputRadioGroup.spec.js

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import Component from '../CInputRadioGroup'
+
+const ComponentName = 'CInputRadio'
+const customWrapper = mount(Component, {
+  propsData: {
+    name: 'custom',
+    options: [
+      { value: 'option 1', label: 'label1', props: { id: 'id1' }},
+      { value: 'option 2', label: 'label2', props: { description: 'description', id: 'id2' }}
+    ],
+    checked: 'option 2',
+    custom: true
+  },
+  atts: {
+    class: 'add-class'
+  }
+})
+
+describe(ComponentName, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(customWrapper.element).toMatchSnapshot()
+  })
+  it('assigns name automatically when not passed', () => {
+    customWrapper.setProps({
+      name: ''
+    })
+    expect(customWrapper.findAll('input').at(0).attributes().name).not.toBe('')
+  })
+  it('properly renders input radio from string', () => {
+    const currentOptions = customWrapper.vm.options
+    customWrapper.setProps({ options: [...currentOptions, 'option 3']})
+    expect(customWrapper.findAll('label').at(2).text()).toBe('option 3')
+    expect(customWrapper.findAll('input').at(2).attributes().value).toBe('option 3')
+  })
+  it('renders correctly', () => {
+    customWrapper.find('input').setChecked(true)
+    expect(customWrapper.emitted()['update:checked']).toBeTruthy()
+    expect(customWrapper.emitted()['update:checked'][0][1] instanceof Event).toBeTruthy()
+  })
+})

src/components/form/tests/__snapshots__/CInputRadioGroup.spec.js.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CInputRadio renders correctly 1`] = `
+<div>
+  <div
+    class="custom-control custom-radio"
+    role="group"
+  >
+     
+    <!---->
+     
+    <input
+      class="custom-control-input"
+      id="id1"
+      name="custom"
+      type="radio"
+      value="option 1"
+    />
+     
+    <label
+      class="custom-control-label"
+      for="id1"
+    >
+      
+        label1
+      
+    </label>
+     
+    <!---->
+     
+    <!---->
+     
+    <!---->
+     
+    <!---->
+  </div>
+  <div
+    class="custom-control custom-radio"
+    role="group"
+  >
+     
+    <!---->
+     
+    <input
+      class="custom-control-input"
+      id="id2"
+      name="custom"
+      type="radio"
+      value="option 2"
+    />
+     
+    <label
+      class="custom-control-label"
+      for="id2"
+    >
+      
+        label2
+      
+    </label>
+     
+    <!---->
+     
+    <!---->
+     
+    <!---->
+     
+    <small
+      class="form-text text-muted w-100"
+    >
+      description
+    </small>
+  </div>
+</div>
+`;

src/components/index.d.ts

@@ -228,6 +228,13 @@ export declare class CInputRadio extends formSharedProps {
   inline: boolean
 }
 
+export declare class CInputRadioGroup {
+  name?: string
+  options: [string | { label: string, value: string, props?: object }]
+  checked?: string
+  custom?: boolean
+}
+
 export declare class CInputCheckbox extends CInputRadio {}
 
 export declare class CSelect extends formSharedProps {