feat(next): more reactivity improvements

Author: alvarosabu

dev/vue/App.vue

@@ -8,6 +8,7 @@
             :form="form"
             @submited="handleSubmit"
             @changed="valueChanged"
+            @error="handleError"
           />
           <button
             class="btn bg-teal-500 text-white hover:bg-teal-700 mt-4"
@@ -26,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import {
   TextInput,
   SelectInput,
@@ -90,18 +91,23 @@ export default defineComponent({
     function valueChanged(values) {
       Object.assign(formValues, values);
     }
-    /*   onMounted(() =>
+    function handleError(errors) {
+      // eslint-disable-next-line no-undef
+      alert(errors);
+    }
+    onMounted(() =>
       setTimeout(() => {
         form.fields[0].label = 'RockNRoll';
         form.fields[0].value = 'James Bond';
       }, 2000),
-    ); */
+    );
     return {
       title,
       form,
       handleSubmit,
       valueChanged,
       formValues,
+      handleError,
     };
   },
 });

src/components/dynamic-form/DynamicForm.vue

@@ -19,20 +19,23 @@
 import {
   defineComponent,
   PropType,
-  toRef,
   reactive,
-  watchEffect,
   ref,
   Ref,
   computed,
   onMounted,
+  watchEffect,
+  watch,
 } from 'vue';
 import { DynamicForm } from './form';
 import DynamicInput from '@/components/dynamic-input/DynamicInput.vue';
 import { InputBase, FormControl } from '@/core/models';
 
 const props = {
-  form: Object as PropType<DynamicForm>,
+  form: {
+    type: Object as PropType<DynamicForm>,
+    required: true,
+  },
 };
 
 const components = {
@@ -44,10 +47,32 @@ export default defineComponent({
   props,
   components,
   setup(props, { emit }) {
-    const controls: Ref<FormControl<any>[] | undefined> = ref([]);
+    const controls: Ref<FormControl<any>[]> = ref([]);
     const formValues = reactive({});
     const submited = ref(false);
 
+    const isValid = computed(() => {
+      const control = controls?.value?.find(control => !control.valid);
+      return control ? control.valid : true;
+    });
+
+    const errors = computed(() => {
+      return controls.value
+        ? controls.value.reduce((prev, curr) => {
+            const errors = Object.keys(curr.errors || {}) || [];
+            if (errors.length > 0) {
+              const error = {};
+              error[curr.name] = curr.errors;
+              return {
+                ...prev,
+                ...error,
+              };
+            }
+            return prev;
+          }, {})
+        : {};
+    });
+
     function valueChange(changedValue: any) {
       Object.assign(formValues, changedValue);
       emit('changed', formValues);
@@ -60,6 +85,7 @@ export default defineComponent({
             ? new FormControl({ ...field, value: null })
             : new FormControl({ ...field }),
         ) || [];
+      console.log('mapControls', controls.value);
     }
 
     function resetForm() {
@@ -68,8 +94,12 @@ export default defineComponent({
 
     function handleSubmit() {
       submited.value = true;
-      emit('submited', formValues);
-      resetForm();
+      if (isValid.value) {
+        emit('submited', formValues);
+        resetForm();
+      } else {
+        emit('error', formValues);
+      }
     }
 
     function initValues() {
@@ -95,17 +125,18 @@ export default defineComponent({
       initValues();
     });
 
-    /* watchEffect(() => {
+    watch(props, (prev, current) => {
       mapControls();
-      initValues();
-    }); */
+    });
 
     return {
       controls,
       form: props.form,
       valueChange,
       formValues,
       handleSubmit,
+      isValid,
+      errors,
     };
   },
 });

src/components/dynamic-input/DynamicInput.vue

@@ -36,7 +36,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType, computed, ref } from 'vue';
+import { defineComponent, PropType, computed, ref, reactive } from 'vue';
 import TextInput from '@/components/text-input/TextInput.vue';
 import SelectInput from '@/components/select-input/SelectInput.vue';
 
@@ -49,13 +49,42 @@ const components = {
 };
 
 const props = {
-  control: Object as PropType<FormControl<any>>,
+  control: {
+    type: Object as PropType<FormControl<any>>,
+    required: true,
+  },
 };
 export default defineComponent({
   name: 'asDynamicInput',
   components,
   props,
   setup(props, { emit }) {
+    const showErrors = computed(() => {
+      return props?.control?.errors && keys(props?.control?.errors).length > 0;
+      /* props.control.errors &&
+        Object.keys(props.control.errors).length > 0 &&
+        (this.submited || this.autoValidate) */
+    });
+
+    const getClasses = computed(() => {
+      return [
+        'dynamic-input',
+        'form-group',
+        {
+          'form-group--error': showErrors.value,
+        },
+        `${props?.control?.customClass || ''}`,
+      ];
+    });
+
+    const errorMessages = computed(() => {
+      const errors = values(props?.control?.errors || {});
+      if (errors.length > 0) {
+        return errors.map(value => value.text);
+      }
+      return [];
+    });
+
     function validate() {
       if (
         props.control &&
@@ -109,39 +138,11 @@ export default defineComponent({
         },
       };
     }); */
-
-    const showErrors = computed(() => {
-      return props?.control?.errors && keys(props?.control?.errors).length > 0;
-      /* props.control.errors &&
-        Object.keys(props.control.errors).length > 0 &&
-        (this.submited || this.autoValidate) */
-    });
-
-    const getClasses = computed(() => {
-      return [
-        'dynamic-input',
-        'form-group',
-        {
-          'form-group--error': showErrors.value,
-        },
-        `${props?.control?.customClass || ''}`,
-      ];
-    });
-
-    const errorMessages = computed(() => {
-      const errors = values(props?.control?.errors || {});
-      if (errors.length > 0) {
-        return errors.map(value => value.text);
-      }
-      return [];
-    });
-
     return {
       valueChange,
       errorMessages,
       getClasses,
       showErrors,
-      control: ref(props.control),
     };
 
     /* return () => {