feat(checkbox): added simple checkbox

Author: alvarosabu

dev/typescript/App.vue

@@ -35,7 +35,8 @@ import {
   FormValidation,
   PasswordInput,
   TextAreaInput,
-} from '../../dist/as-dynamic-forms.esm';
+  CheckboxInput,
+} from '../../src';
 import { email, pattern } from '@/core/utils';
 
 export default defineComponent({
@@ -88,6 +89,10 @@ export default defineComponent({
           cols: 20,
           rows: 5,
         }),
+        new CheckboxInput({
+          label: "Check  if you're awesome",
+          name: 'awesomness',
+        }),
       ],
     });
     function handleSubmit(values) {
@@ -99,12 +104,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,7 @@ 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 { FormControl } from '../../core/models';
 import { isEmpty, entries, values, keys } from '../../core/utils/helpers';
@@ -13,6 +14,7 @@ const components = {
   TextInput,
   SelectInput,
   TextAreaInput,
+  CheckboxInput,
 };
 
 const props = {
@@ -32,6 +34,9 @@ export default defineComponent({
       return [
         'dynamic-input',
         'form-group',
+        {
+          'form-group--inline': props?.control?.type === 'checkbox',
+        },
         {
           'form-group--error': showErrors.value,
         },
@@ -103,6 +108,8 @@ export default defineComponent({
       };
     });
 
+    const hasLabel = computed(() => props?.control?.type !== 'checkbox');
+
     return () => {
       switch (props?.control?.type) {
         case 'text':
@@ -117,24 +124,29 @@ export default defineComponent({
         case 'textarea':
           component = h(TextAreaInput, attributes.value);
           break;
-
+        case 'checkbox':
+          component = h(CheckboxInput, attributes.value);
+          break;
         default:
           break;
       }
       return h(
         'div',
         {
           class: getClasses.value,
+          role: 'group',
         },
         [
-          h(
-            'label',
-            {
-              class: 'form-label',
-              for: props?.control?.label,
-            },
-            props?.control?.label,
-          ),
+          hasLabel.value
+            ? h(
+                'label',
+                {
+                  class: 'form-label',
+                  for: props?.control?.label,
+                },
+                props?.control?.label,
+              )
+            : null,
           component,
           h(
             'div',

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,10 @@ export class TextAreaInput extends InputBase<string> {
   type = 'textarea';
 }
 
+export class CheckboxInput extends InputBase<boolean> {
+  type = 'checkbox';
+}
+
 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,
 };

src/core/utils/index.ts

@@ -58,6 +58,11 @@ $input-error-color: #dc3545 !default;
     order: 2;
   }
 
+  &--inline {
+    flex-direction: row;
+    align-items: center;
+  }
+
   &--error {
     .form-label {
       color: $input-error-color;
@@ -121,3 +126,12 @@ $input-error-color: #dc3545 !default;
     }
   }
 }
+
+.checkbox-control {
+  margin-right: 1rem;
+}
+
+.checkbox-label {
+  user-select: none;
+  font-size: 0.85rem;
+}