feat(radio): added radio buttons

Author: alvarosabu

dev/typescript/App.vue

@@ -36,6 +36,7 @@ import {
   PasswordInput,
   TextAreaInput,
   CheckboxInput,
+  RadioInput,
 } from '../../src';
 import { email, pattern } from '@/core/utils';
 
@@ -93,6 +94,29 @@ export default defineComponent({
           label: "Check  if you're awesome",
           name: 'awesomness',
         }),
+        new RadioInput({
+          label: 'Select one option',
+          name: 'character',
+          options: [
+            {
+              key: 'mario',
+              value: 'Mario',
+            },
+            {
+              key: 'crash-bandicoot',
+              value: 'Crash Bandicoot',
+            },
+            {
+              key: 'sonic',
+              value: 'Sonic',
+            },
+            {
+              key: 'banjo-kazooie',
+              value: 'Banjo Kazooie',
+              disabled: true,
+            },
+          ],
+        }),
       ],
     });
     function handleSubmit(values) {

src/components/dynamic-input/DynamicInput.vue

@@ -6,6 +6,7 @@ import TextInput from '../text-input/TextInput.vue';
 import SelectInput from '../select-input/SelectInput.vue';
 import TextAreaInput from '../text-area-input/TextAreaInput.vue';
 import CheckboxInput from '../checkbox-input/CheckboxInput.vue';
+import RadioInput from '../radio-input/RadioInput.vue';
 
 import { FormControl } from '../../core/models';
 import { isEmpty, entries, values, keys } from '../../core/utils/helpers';
@@ -15,6 +16,7 @@ const components = {
   SelectInput,
   TextAreaInput,
   CheckboxInput,
+  RadioInput,
 };
 
 const props = {
@@ -109,6 +111,7 @@ export default defineComponent({
     });
 
     const hasLabel = computed(() => props?.control?.type !== 'checkbox');
+    const isFieldSet = computed(() => props?.control?.type === 'radio');
 
     return () => {
       switch (props?.control?.type) {
@@ -127,19 +130,22 @@ export default defineComponent({
         case 'checkbox':
           component = h(CheckboxInput, attributes.value);
           break;
+        case 'radio':
+          component = h(RadioInput, attributes.value);
+          break;
         default:
           break;
       }
       return h(
-        'div',
+        isFieldSet.value ? 'fieldset' : 'div',
         {
           class: getClasses.value,
-          role: 'group',
+          role: isFieldSet.value ? undefined : 'group',
         },
         [
           hasLabel.value
             ? h(
-                'label',
+                isFieldSet.value ? 'legend' : 'label',
                 {
                   class: 'form-label',
                   for: props?.control?.label,

src/components/radio-input/RadioInput.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent, h, PropType } from 'vue';
+import { FormControl } from '../../core/models';
+import { useInputEvents } from '../../composables/input-events';
+
+const props = {
+  control: Object as PropType<FormControl<string>>,
+};
+
+export default defineComponent({
+  name: 'asRadioInput',
+  props,
+  setup(props, { emit }) {
+    const { onChange, onFocus, onBlur } = useInputEvents(props?.control, emit);
+    const renderRadios = props?.control?.options?.map(option => {
+      return h('div', { class: 'radio-input' }, [
+        h('input', {
+          name: props?.control?.name || '',
+          type: props?.control?.type,
+          id: option.key,
+          disabled: option.disabled,
+          class: ['radio-control'],
+          value: option.value,
+          onFocus,
+          onBlur,
+          onChange,
+        }),
+        h(
+          'label',
+          {
+            class: ['radio-label'],
+            for: option.key,
+          },
+          option.value,
+        ),
+      ]);
+    });
+    return () => [
+      h(
+        'div',
+        {
+          class: 'radio-group',
+          tabIndex: -1,
+          role: 'group',
+        },
+        renderRadios,
+      ),
+    ];
+  },
+});
+</script>

src/core/models.ts

@@ -87,6 +87,10 @@ export class CheckboxInput extends InputBase<boolean> {
   type = 'checkbox';
 }
 
+export class RadioInput extends InputBase<boolean> {
+  type = 'radio';
+}
+
 export class FormControl<T> extends InputBase<T> {
   valid = true;
   invalid = false;

src/styles/themes/default.scss

@@ -127,11 +127,13 @@ $input-error-color: #dc3545 !default;
   }
 }
 
-.checkbox-control {
+.checkbox-control,
+.radio-control {
   margin-right: 1rem;
 }
 
-.checkbox-label {
+.checkbox-label,
+.radio-label {
   user-select: none;
   font-size: 0.85rem;
 }