feat(forms): intercept change event and pass control name up

Author: alvarosabu

src/components/dynamic-form/DynamicForm.vue

@@ -82,12 +82,10 @@ export default defineComponent({
     const { options } = inject(dynamicFormsSymbol);
 
     const controls: Ref<FormControl<InputType>[]> = ref([]);
-    const formValues = reactive({});
     const submited = ref(false);
 
     onMounted(() => {
       mapControls();
-      initValues();
     });
     //  TODO: enable again when plugin theme option is available
 
@@ -120,6 +118,22 @@ export default defineComponent({
       return !hasInvalidControls;
     });
 
+    const formValues = computed(() => {
+      return removeEmpty(
+        controls.value.reduce((prev, curr) => {
+          const obj = {};
+          obj[curr.name] =
+            curr.type === FieldTypes.NUMBER
+              ? parseFloat(`${curr.value}`)
+              : curr.value;
+          return {
+            ...prev,
+            ...obj,
+          };
+        }, {}),
+      );
+    });
+
     const errors = computed(() => {
       return controls.value
         ? controls.value.reduce((prev, curr) => {
@@ -160,9 +174,18 @@ export default defineComponent({
       }
     });
 
-    function valueChange(changedValue: Record<string, unknown>) {
-      Object.assign(formValues, changedValue);
-      ctx.emit('change', removeEmpty(formValues));
+    function valueChange(event: Record<string, unknown>) {
+      if (event) {
+        const newControl = controls.value.find(
+          control => control.name === event.name,
+        );
+        if (newControl) {
+          newControl.value = event.value as string;
+          newControl.dirty = event.value !== null;
+        }
+        console.log('DynamicForms:controls', controls.value);
+        ctx.emit('change', formValues.value);
+      }
     }
 
     function mapControls(empty?: boolean) {
@@ -208,26 +231,6 @@ export default defineComponent({
       }
     }
 
-    function initValues() {
-      Object.assign(
-        formValues,
-        controls.value
-          ? controls.value.reduce((prev, curr) => {
-              const obj = {};
-              obj[curr.name] =
-                curr.type === FieldTypes.NUMBER
-                  ? parseFloat(`${curr.value}`)
-                  : curr.value;
-              return {
-                ...prev,
-                ...obj,
-              };
-            }, {})
-          : {},
-      );
-      ctx.emit('changed', formValues);
-    }
-
     watch(props.form.fields, () => {
       mapControls();
     });

src/components/dynamic-input/DynamicInput.vue

@@ -131,7 +131,7 @@ export default defineComponent({
       return [];
     });
 
-    function validate() {
+    /* function validate() {
       if (
         props.control &&
         props.control.validations &&
@@ -161,12 +161,16 @@ export default defineComponent({
         props.control.errors = validation;
         props.control.valid = Object.keys(validation).length === 0;
       }
-    }
+    } */
 
     function valueChange($event) {
-      let value;
+      console.log('DynamicInput:change', $event);
+      emit('change', $event);
+      /* let value;
       const newValue = {};
 
+      console.log('DynamicInput:change', $event);
+
       if (isEvent($event)) {
         $event.stopPropagation();
         value =
@@ -181,7 +185,7 @@ export default defineComponent({
         newValue[props.control.name] = value;
         validate();
         emit('change', newValue);
-      }
+      } */
     }
 
     return () => {

src/components/text-input/TextInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
+import { defineComponent, h, PropType, ref } from 'vue';
 import {
   ColorInput,
   EmailInput,
@@ -21,14 +21,13 @@ export default defineComponent({
   props,
   setup(props, { emit }) {
     const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
-
     return () =>
       h('input', {
         id: props.control.name,
         name: props.control.name || '',
         type: props.control.type,
         class: ['form-control'],
-        value: props?.control?.value,
+        value: props.control.value,
         disabled: props.control.disabled,
         placeholder: props.control.placeholder,
         required: props.control.required,

src/composables/input-events.ts

@@ -5,12 +5,24 @@ import { watch } from 'vue';
 export function useInputEvents(props: any, emit: any) {
   function onChange($event): void {
     if (props.control) {
-      props.control.dirty = true;
+      $event.stopImmediatePropagation();
+
+      emit('change', {
+        name: props.control.name,
+        value: props.control.type === 'checkbox'
+        ? $event.target.checked
+        : $event.target.value,
+      });
     }
   }
   function onCheck($event): void {
     if (props.control) {
-      props.control.dirty = true;
+      $event.stopImmediatePropagation();
+
+      emit('change', {
+        name: props.control.name,
+        value: $event.target.checked,
+      });
     }
   }
   function onFocus(): void {