Merge pull request #170 from alvarosaburido/feature/improve-event-handling

feat(inputs): improve event handling

Author: alvarosabu

dev/typescript/App.vue

@@ -7,7 +7,7 @@
           <dynamic-form
             :form="form"
             @submited="handleSubmit"
-            @changed="valueChanged"
+            @change="valueChanged"
             @error="handleError"
           >
             <template
@@ -195,7 +195,7 @@ export default defineComponent({
 
     function valueChanged(values) {
       Object.assign(formValues, values);
-      console.log('Values', values);
+      /* console.log('Values', values); */
     }
 
     function handleError(errors) {

src/components/checkbox-input/CheckboxInput.vue

@@ -11,9 +11,8 @@ export default defineComponent({
   name: 'asCheckboxInput',
   props,
   setup(props, { emit }) {
-    const { onCheck, onFocus, onBlur } = useInputEvents(props, emit);
-
-    return () => [
+    const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
+    const renderCheckbox = [
       h('input', {
         name: props?.control?.name || '',
         type: props?.control?.type,
@@ -24,7 +23,7 @@ export default defineComponent({
         checked: props?.control?.value,
         onFocus,
         onBlur,
-        onChange: onCheck,
+        onChange,
       }),
       h(
         'label',
@@ -35,6 +34,18 @@ export default defineComponent({
         props?.control?.label,
       ),
     ];
+
+    return () => [
+      h(
+        'div',
+        {
+          class: 'checkbox-group',
+          tabIndex: -1,
+          role: 'group',
+        },
+        renderCheckbox,
+      ),
+    ];
   },
 });
 </script>

src/components/dynamic-form/DynamicForm.vue

@@ -12,7 +12,7 @@
       :key="control.name"
       :control="control"
       :submited="submited"
-      @changed="valueChange"
+      @change="valueChange"
     >
       <template v-slot:customField="props">
         <div
@@ -156,7 +156,7 @@ export default defineComponent({
 
     function valueChange(changedValue: Record<string, unknown>) {
       Object.assign(formValues, changedValue);
-      ctx.emit('changed', removeEmpty(formValues));
+      ctx.emit('change', removeEmpty(formValues));
     }
 
     function mapControls(empty?: boolean) {

src/components/dynamic-input/DynamicInput.vue

@@ -24,7 +24,7 @@ import {
   InputType,
 } from '@/core/models';
 
-import { isEmpty, entries, values, keys } from '@/core/utils/helpers';
+import { isEmpty, entries, values, keys, isEvent } from '@/core/utils/helpers';
 import { useInputEvents } from '@/composables/input-events';
 import { dynamicFormsSymbol } from '@/useApi';
 
@@ -50,7 +50,7 @@ const props = {
 
 export type ControlAttribute<T extends InputType> = {
   control: FormControl<T>;
-  onChanged: (value: unknown) => void;
+  onChange: (value: unknown) => void;
 };
 
 export default defineComponent({
@@ -66,7 +66,7 @@ export default defineComponent({
     const attributes = computed(() => {
       return {
         control: props?.control,
-        onChanged: valueChange,
+        onChange: valueChange,
       };
     });
 
@@ -142,12 +142,24 @@ export default defineComponent({
       }
     }
 
-    function valueChange(value) {
+    function valueChange($event) {
+      let value;
       const newValue = {};
+
+      if (isEvent($event)) {
+        $event.stopPropagation();
+        value =
+          props.control.type === 'checkbox'
+            ? $event.target.checked
+            : $event.target.value;
+      } else {
+        value = $event;
+      }
+
       if (props.control) {
         newValue[props.control.name] = value;
         validate();
-        emit('changed', newValue);
+        emit('change', newValue);
       }
     }
 

src/composables/input-events.ts

@@ -3,23 +3,15 @@
 import { watch } from 'vue';
 
 export function useInputEvents(props: any, emit: any) {
-  function onChange($event: any): void {
-    const value =
-      props.control.type === 'number'
-        ? parseFloat(`${$event.target.value}`)
-        : $event.target.value;
+  function onChange($event): void {
     if (props.control) {
-      props.control.value = value;
       props.control.dirty = true;
     }
-    emit('changed', value);
   }
-  function onCheck($event: any): void {
+  function onCheck($event): void {
     if (props.control) {
-      props.control.value = $event.target.checked;
       props.control.dirty = true;
     }
-    emit('changed', $event.target.checked);
   }
   function onFocus(): void {
     emit('focus');
@@ -34,7 +26,7 @@ export function useInputEvents(props: any, emit: any) {
   watch(props, (form: any) => {
     if (form?.control && !form?.control?.dirty) {
       form.control.dirty = true;
-      emit('changed', form.control.value);
+      emit('change', form.control.value);
     }
   });
 

src/core/utils/helpers.ts

@@ -14,6 +14,7 @@ export const slugify = (text: string): string =>
 
 export const isArray = (a: any) => !!a && a.constructor === Array;
 export const isObject = (a: any) => !!a && a.constructor === Object;
+export const isEvent = (e: any) => !!e && e.constructor === Event;
 
 export const isEmpty = (entry: any) => {
   if (isArray(entry)) {