feature(next): achieved reactivity on control mapping

Author: alvarosabu

dev/vue/App.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, reactive, ref, onMounted, Ref } from 'vue';
 import { TextInput, SelectInput, DynamicForm } from '../../src/index';
 
 export default defineComponent({
@@ -27,6 +27,7 @@ export default defineComponent({
       fields: [
         new TextInput({
           label: 'Name',
+          value: 'Awiwi',
         }),
         new SelectInput<string>({
           label: 'Games',
@@ -47,6 +48,14 @@ export default defineComponent({
         }),
       ],
     });
+    onMounted(() =>
+      setTimeout(() => {
+        form.fields[0].label = 'RockNRoll';
+        form.fields[0].value = 'James Bond';
+        form.fields[0].disabled = true;
+        form.id = 'awwiwiwiiwiwiwiw';
+      }, 2000),
+    );
     return {
       title,
       form,

src/components/dynamic-form/DynamicForm.vue

@@ -1,19 +1,24 @@
 <template>
-  <form class="dynamic-form" novalidate>
-    <!-- <li v-for="control in this.form.fields" :key="control.name">
-      {{ control.label }}
-    </li> -->
+  <form class="dynamic-form" novalidate :id="form.id">
     <dynamic-input
       v-for="control in controls"
       :key="control?.name"
       :control="control"
     />
-    <pre>{{ controls }}</pre>
+    <pre>{{ form }}</pre>
   </form>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import {
+  defineComponent,
+  PropType,
+  toRef,
+  reactive,
+  watchEffect,
+  ref,
+  Ref,
+} from 'vue';
 import { DynamicForm } from './form';
 import DynamicInput from '@/components/dynamic-input/DynamicInput.vue';
 import { InputBase, FormControl } from '@/core/models';
@@ -31,12 +36,15 @@ export default defineComponent({
   props,
   components,
   setup(props) {
-    const controls: FormControl<any>[] =
-      props.form?.fields?.map(
-        (field: InputBase<any>) => new FormControl({ ...field }),
-      ) || [];
+    const controls: Ref<FormControl<any>[] | undefined> = ref([]);
+    watchEffect(() => {
+      controls.value =
+        props.form?.fields?.map(
+          (field: InputBase<any>) => new FormControl({ ...field }),
+        ) || [];
+    });
 
-    return { controls };
+    return { controls, form: props.form };
   },
 });
 </script>

src/components/dynamic-input/DynamicInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
+import { defineComponent, h, PropType, ref, toRefs, reactive } from 'vue';
 import TextInput from '@/components/text-input/TextInput.vue';
 import SelectInput from '@/components/select-input/SelectInput.vue';
 
@@ -43,7 +43,17 @@ export default defineComponent({
         {
           class: ['dynamic-input', 'form-group'],
         },
-        component,
+        [
+          component,
+          h(
+            'label',
+            {
+              class: 'form-label',
+              for: props?.control?.label,
+            },
+            props?.control?.label,
+          ),
+        ],
       );
     };
   },

src/components/select-input/SelectInput.vue

@@ -9,7 +9,7 @@ const props = {
 export default defineComponent({
   name: 'asSelectInput',
   props,
-  setup(props) {
+  setup(props, { emit }) {
     return () => {
       const options = props?.control?.options?.map(({ key, value, disabled }) =>
         h('option', { key, value, disabled }, value),
@@ -18,7 +18,6 @@ export default defineComponent({
         'select',
         {
           name: props?.control?.name || '',
-          type: props?.control?.type,
           value: props?.control?.value,
           disabled: props?.control?.disabled,
           placeholder: props?.control?.placeholder,

src/components/text-input/TextInput.vue

@@ -1,23 +1,28 @@
 <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<any>>,
 };
 
 export default defineComponent({
   name: 'asTextInput',
   props,
-  setup(props) {
+  setup(props, { emit }) {
+    const { onChange, onFocus, onBlur } = useInputEvents(props?.control, emit);
+
     return () =>
       h('input', {
         name: props?.control?.name || '',
         type: props?.control?.type,
-        value: props?.control?.value,
         disabled: props?.control?.disabled,
         placeholder: props?.control?.placeholder,
         class: ['form-control'],
+        value: props?.control?.value,
+        onFocus,
+        onBlur,
+        onChange,
       });
   },
 });

src/composables/input-events.ts

@@ -0,0 +1,24 @@
+import { FormControl } from '@/core/models';
+
+export function useInputEvents(control: FormControl<any> | undefined, emit) {
+  function onChange($event) {
+    if (control) {
+      control.value = $event.target.value;
+    }
+    emit('change', control?.value);
+  }
+  function onFocus() {
+    emit('focus');
+  }
+  function onBlur() {
+    emit('blur');
+    if (control) {
+      control.touched = true;
+    }
+  }
+  return {
+    onFocus,
+    onChange,
+    onBlur,
+  };
+}

src/core/models.ts

@@ -27,7 +27,7 @@ export class InputBase<T> {
   type: string;
   placeholder?: string;
   validations?: FormValidation[];
-  options?: { key: string; value: string; disabled: boolean }[];
+  options?: { key: string; value: string; disabled?: boolean }[];
 
   constructor(
     options: {
@@ -39,7 +39,7 @@ export class InputBase<T> {
       type?: string;
       placeholder?: string;
       validations?: FormValidation[];
-      options?: { key: string; value: string; disabled: boolean }[];
+      options?: { key: string; value: string; disabled?: boolean }[];
     } = {},
   ) {
     this.value = options.value;
@@ -76,7 +76,7 @@ export class FormControl<T> extends InputBase<T> {
       disabled?: boolean;
       order?: number;
       type?: string;
-      options?: { key: string; value: string; disabled: boolean }[];
+      options?: { key: string; value: string; disabled?: boolean }[];
     } = {},
   ) {
     super({