Merge pull request #93 from alvarosaburido/feature/checkbox--radio

Feature/checkbox  radio

Author: alvarosabu

dev/typescript/App.vue

@@ -35,7 +35,9 @@ import {
   FormValidation,
   PasswordInput,
   TextAreaInput,
-} from '../../dist/as-dynamic-forms.esm';
+  CheckboxInput,
+  RadioInput,
+} from '../../src';
 import { email, pattern } from '@/core/utils';
 
 export default defineComponent({
@@ -88,6 +90,33 @@ export default defineComponent({
           cols: 20,
           rows: 5,
         }),
+        new CheckboxInput({
+          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) {
@@ -99,12 +128,7 @@ export default defineComponent({
     function handleError(errors) {
       console.error(errors);
     }
-    onMounted(() =>
-      setTimeout(() => {
-        form.fields[0].label = 'RockNRoll';
-        form.fields[0].value = 'James Bond';
-      }, 2000),
-    );
+
     return {
       title,
       form,

dev/typescript/main.ts

@@ -3,7 +3,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import './styles/main.scss';
 
-import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
+import { createDynamicForms } from '../../src';
 
 const VueDynamicForms = createDynamicForms({
   theme: 'material',

src/components/checkbox-input/CheckboxInput.vue

@@ -0,0 +1,39 @@
+<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: 'asCheckboxInput',
+  props,
+  setup(props, { emit }) {
+    const { onCheck, onFocus, onBlur } = useInputEvents(props?.control, emit);
+
+    return () => [
+      h('input', {
+        name: props?.control?.name || '',
+        type: props?.control?.type,
+        id: props?.control?.name,
+        disabled: props?.control?.disabled,
+        class: ['checkbox-control'],
+        value: props?.control?.value,
+        onFocus,
+        onBlur,
+        onChange: onCheck,
+      }),
+      h(
+        'label',
+        {
+          class: ['checkbox-label'],
+          for: props?.control?.name,
+        },
+        props?.control?.label,
+      ),
+    ];
+  },
+});
+</script>

src/components/dynamic-input/DynamicInput.vue

@@ -5,6 +5,8 @@ import { defineComponent, PropType, computed, h } from 'vue';
 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';
@@ -13,6 +15,8 @@ const components = {
   TextInput,
   SelectInput,
   TextAreaInput,
+  CheckboxInput,
+  RadioInput,
 };
 
 const props = {
@@ -32,6 +36,9 @@ export default defineComponent({
       return [
         'dynamic-input',
         'form-group',
+        {
+          'form-group--inline': props?.control?.type === 'checkbox',
+        },
         {
           'form-group--error': showErrors.value,
         },
@@ -103,6 +110,9 @@ export default defineComponent({
       };
     });
 
+    const hasLabel = computed(() => props?.control?.type !== 'checkbox');
+    const isFieldSet = computed(() => props?.control?.type === 'radio');
+
     return () => {
       switch (props?.control?.type) {
         case 'text':
@@ -117,24 +127,32 @@ export default defineComponent({
         case 'textarea':
           component = h(TextAreaInput, attributes.value);
           break;
-
+        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: isFieldSet.value ? undefined : 'group',
         },
         [
-          h(
-            'label',
-            {
-              class: 'form-label',
-              for: props?.control?.label,
-            },
-            props?.control?.label,
-          ),
+          hasLabel.value
+            ? h(
+                isFieldSet.value ? 'legend' : 'label',
+                {
+                  class: 'form-label',
+                  for: props?.control?.label,
+                },
+                props?.control?.label,
+              )
+            : null,
           component,
           h(
             'div',

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/components/text-input/TextInput.vue

@@ -2,6 +2,7 @@
 import { defineComponent, h, PropType } from 'vue';
 import { FormControl } from '../../core/models';
 import { useInputEvents } from '../../composables/input-events';
+
 const props = {
   control: Object as PropType<FormControl<any>>,
 };

src/composables/input-events.ts

@@ -8,6 +8,13 @@ export function useInputEvents(control: FormControl<any> | undefined, emit) {
     }
     emit('changed', $event.target.value);
   }
+  function onCheck($event) {
+    if (control) {
+      control.value = $event.target.checked;
+      control.dirty = true;
+    }
+    emit('changed', $event.target.checked);
+  }
   function onFocus() {
     emit('focus');
   }
@@ -21,5 +28,6 @@ export function useInputEvents(control: FormControl<any> | undefined, emit) {
     onFocus,
     onChange,
     onBlur,
+    onCheck,
   };
 }

src/core/models.ts

@@ -83,6 +83,14 @@ export class TextAreaInput extends InputBase<string> {
   type = 'textarea';
 }
 
+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/core/utils/form-control.model.js

@@ -1,10 +1,7 @@
-import formModels from './form-control.model';
 import validators from './validators';
 
-export * from './form-control.model';
 export * from './validators';
 
 export default {
   ...validators,
-  ...formModels,
 };