feat(fields): reactivity is working as expected

Author: alvarosabu

dev/typescript/App.vue

@@ -45,7 +45,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref } from 'vue';
+import { mockAsync } from '@/core/utils/helpers';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import {
   TextInput,
   SelectInput,
@@ -60,16 +61,43 @@ import {
   pattern,
   ColorInput,
   NumberInput,
+  CustomInput,
 } from '../../src';
 /* } from '../../dist/as-dynamic-forms.esm'; */
 export default defineComponent({
   name: 'app',
   setup() {
     const title = ref('Vue Dynamic Forms');
     const formValues = reactive({});
+
+    const emailValidator: FormValidation = {
+      validator: email,
+      text: 'Email format is incorrect',
+    };
+
+    const passwordValidator: FormValidation = {
+      validator: pattern(
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*)(?=.*[#$^+=!*()@%&]).{8,10}$',
+      ),
+      text:
+        'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
+    };
+
     const form = reactive({
       id: 'example-form',
-      fieldOrder: ['name'],
+      fieldOrder: [
+        'name',
+        'email',
+        'password',
+        'console',
+        'games',
+        'stock',
+        'steps',
+        'character',
+        'awesomeness',
+        'color',
+        'customField1',
+      ],
       fields: {
         name: {
           label: 'Name',
@@ -79,36 +107,20 @@ export default defineComponent({
         email: {
           label: 'Email',
           type: 'email',
+          validations: [emailValidator],
         } as EmailInput,
-      },
-      /*  fields: [
-       new TextInput({
-          label: 'Name',
-          value: 'Alvaro',
-        }),
-        new EmailInput({
-          label: 'Email',
-          validations: [new FormValidation(email, 'Email format is incorrect')],
-        }),
-        new PasswordInput({
+        password: {
           label: 'Password',
-          validations: [
-            new FormValidation(
-              pattern(
-                '^(?=.*[a-z])(?=.*[A-Z])(?=.*)(?=.*[#$^+=!*()@%&]).{8,10}$',
-              ),
-              'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
-            ),
-          ],
-        }),
-        new NumberInput({
-          label: 'Number',
-          min: 5,
-          max: 60,
-          step: 5,
-        }),
-        new SelectInput<string>({
+          type: 'password',
+          validations: [passwordValidator],
+        } as PasswordInput,
+        stock: {
+          label: 'Stock',
+          type: 'number',
+        } as NumberInput,
+        games: {
           label: 'Games',
+          type: 'select',
           customClass: 'w-1/2',
           value: 'the-last-of-us',
           options: [
@@ -125,19 +137,28 @@ export default defineComponent({
               value: 'Nier Automata',
             },
           ],
-        }),
-        new TextAreaInput({
-          label: 'Bio',
-          cols: 20,
-          rows: 5,
-        }),
-        new CheckboxInput({
+        } as SelectInput,
+        console: {
+          label: 'Console (Async Options)',
+          type: 'select',
+          customClass: 'w-1/2',
+          options: [],
+        } as SelectInput,
+        steps: {
+          label: 'Number',
+          type: 'number',
+          min: 5,
+          max: 60,
+          step: 5,
+          value: 5,
+        } as NumberInput,
+        awesomeness: {
           label: "Check  if you're awesome",
-          name: 'awesomness',
-        }),
-        new RadioInput({
+          type: 'checkbox',
+        } as CheckboxInput,
+        character: {
           label: 'Select one option',
-          name: 'character',
+          type: 'radio',
           options: [
             {
               key: 'mario',
@@ -157,33 +178,62 @@ export default defineComponent({
               disabled: true,
             },
           ],
-        }),
-        new InputBase<string>({
+        } as RadioInput,
+        customField1: {
           type: 'custom-field',
           label: 'Custom Field',
-          name: 'customField1',
-        }),
-        new ColorInput({
+        } as CustomInput,
+        color: {
           label: 'Color',
-          name: 'color',
+          type: 'color',
           value: '#4DBA87',
-        }),
-      ],
-    */
+        } as ColorInput,
+      },
     });
+
     function handleSubmit(values) {
       console.log('Values Submitted', values);
     }
+
     function valueChanged(values) {
       Object.assign(formValues, values);
-      setTimeout(() => {
-        form.fields.email.value = '[email protected]';
-      }, 2000);
+      console.log('Values', values);
     }
+
     function handleError(errors) {
-      console.error(errors);
+      console.error('Errors', errors);
     }
 
+    onMounted(async () => {
+      setTimeout(() => {
+        form.fields.email.value = '[email protected]';
+      }, 2000);
+
+      try {
+        const consoleOptions = await mockAsync(true, 4000, [
+          {
+            key: 'playstation',
+            value: 'Playstation',
+          },
+          {
+            key: 'nintendo',
+            value: 'Nintendo',
+          },
+          {
+            key: 'xbox',
+            value: 'Xbox',
+          },
+        ]);
+        form.fields.console.options = consoleOptions as {
+          key: string;
+          value: string;
+          disabled?: boolean;
+        }[];
+      } catch (e) {
+        console.error(e);
+      }
+    });
+
     return {
       title,
       form,

src/components/checkbox-input/CheckboxInput.vue

@@ -11,7 +11,7 @@ export default defineComponent({
   name: 'asCheckboxInput',
   props,
   setup(props, { emit }) {
-    const { onCheck, onFocus, onBlur } = useInputEvents(props?.control, emit);
+    const { onCheck, onFocus, onBlur } = useInputEvents(props, emit);
 
     return () => [
       h('input', {

src/components/dynamic-form/DynamicForm.vue

@@ -51,8 +51,7 @@ import DynamicInput from '../dynamic-input/DynamicInput.vue';
 
 import { InputBase, FormControl } from '../../core/models';
 import { dynamicFormsSymbol } from '../../useApi';
-/* import { warn } from '../../core/utils/warning';
- */
+
 const props = {
   form: {
     type: Object as PropType<DynamicForm>,
@@ -153,12 +152,22 @@ export default defineComponent({
 
     function mapControls(empty?) {
       controls.value =
-        Object.entries(
-          props.form?.fields,
-        ).map(([key, field]: [string, InputBase]) =>
-          empty
-            ? ({ ...field, name: key, value: null } as FormControl)
-            : ({ ...field, name: key } as FormControl),
+        Object.entries(props.form?.fields).map(
+          ([key, field]: [string, InputBase]) =>
+            empty
+              ? ({
+                  ...field,
+                  name: key,
+                  value: undefined,
+                  dirty: false,
+                  touched: false,
+                } as FormControl)
+              : ({
+                  ...field,
+                  name: key,
+                  dirty: false,
+                  touched: false,
+                } as FormControl),
         ) || [];
     }
 
@@ -168,6 +177,7 @@ export default defineComponent({
 
     function handleSubmit() {
       submited.value = true;
+
       if (isValid.value) {
         ctx.emit('submited', formValues);
         resetForm();

src/components/dynamic-input/DynamicInput.vue

@@ -220,7 +220,7 @@ export default defineComponent({
             },
             slots.customField({
               control: props.control,
-              onChange: ($event: any) => {
+              onChange: $event => {
                 const newValue = {};
                 const value = $event.target.value;
 

src/components/number-input/NumberInput.vue

@@ -11,7 +11,7 @@ export default defineComponent({
   name: 'asNumberInput',
   props,
   setup(props, { emit }) {
-    const { onChange, onFocus, onBlur } = useInputEvents(props?.control, emit);
+    const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
 
     return () =>
       h('input', {

src/components/radio-input/RadioInput.vue

@@ -11,7 +11,7 @@ export default defineComponent({
   name: 'asRadioInput',
   props,
   setup(props, { emit }) {
-    const { onChange, onFocus, onBlur } = useInputEvents(props?.control, emit);
+    const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
     const renderRadios = props?.control?.options?.map(option => {
       return h('div', { class: 'radio-input' }, [
         h('input', {

src/components/select-input/SelectInput.vue

@@ -12,10 +12,7 @@ export default defineComponent({
   props,
   setup(props, { emit }) {
     return () => {
-      const { onChange, onFocus, onBlur } = useInputEvents(
-        props?.control,
-        emit,
-      );
+      const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
 
       const options = props?.control?.options?.map(({ key, value, disabled }) =>
         h('option', { key, value: key, disabled }, value),

src/components/text-area-input/TextAreaInput.vue

@@ -10,7 +10,7 @@ export default defineComponent({
   name: 'asTextAreaInput',
   props,
   setup(props, { emit }) {
-    const { onChange, onFocus, onBlur } = useInputEvents(props?.control, emit);
+    const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
 
     return () =>
       h('textarea', {

src/composables/input-events.ts

@@ -25,8 +25,11 @@ export function useInputEvents(props: any, emit: any) {
     }
   }
 
-  watch(props, (value: any) => {
-    emit('changed', value.control.value);
+  watch(props, (form: any) => {
+    if (!form.control.dirty) {
+      form.control.dirty = true;
+      emit('changed', form.control.value);
+    }
   });
 
   return {

src/core/models.ts

@@ -8,7 +8,8 @@ export type InputTypeKeys =
   | 'select'
   | 'checkbox'
   | 'radio'
-  | 'color';
+  | 'color'
+  | 'custom-field';
 
 export type InputType =
   | TextInput