feature(next): added custom-class and value changed event

Author: alvarosabu

dev/vue/App.vue

@@ -16,7 +16,12 @@
 
 <script lang="ts">
 import { defineComponent, reactive, ref, onMounted, Ref } from 'vue';
-import { TextInput, SelectInput, DynamicForm } from '../../src/index';
+import {
+  TextInput,
+  SelectInput,
+  DynamicForm,
+  EmailInput,
+} from '../../src/index';
 
 export default defineComponent({
   name: 'app',
@@ -29,8 +34,12 @@ export default defineComponent({
           label: 'Name',
           value: 'Awiwi',
         }),
+        new EmailInput({
+          label: 'Email',
+        }),
         new SelectInput<string>({
           label: 'Games',
+          customClass: 'w-1/2',
           options: [
             {
               key: 'the-last-of-us',
@@ -52,8 +61,6 @@ export default defineComponent({
       setTimeout(() => {
         form.fields[0].label = 'RockNRoll';
         form.fields[0].value = 'James Bond';
-        form.fields[0].disabled = true;
-        form.id = 'awwiwiwiiwiwiwiw';
       }, 2000),
     );
     return {

src/components/dynamic-form/DynamicForm.vue

@@ -4,8 +4,9 @@
       v-for="control in controls"
       :key="control?.name"
       :control="control"
+      @changed="valueChanged"
     />
-    <pre>{{ form }}</pre>
+    <pre>{{ formValues }}</pre>
   </form>
 </template>
 
@@ -18,6 +19,7 @@ import {
   watchEffect,
   ref,
   Ref,
+  computed,
 } from 'vue';
 import { DynamicForm } from './form';
 import DynamicInput from '@/components/dynamic-input/DynamicInput.vue';
@@ -35,16 +37,48 @@ export default defineComponent({
   name: 'asDynamicForm',
   props,
   components,
-  setup(props) {
+  setup(props, { emit }) {
     const controls: Ref<FormControl<any>[] | undefined> = ref([]);
+    const formValues = reactive({});
     watchEffect(() => {
       controls.value =
         props.form?.fields?.map(
           (field: InputBase<any>) => new FormControl({ ...field }),
         ) || [];
+      Object.assign(
+        formValues,
+        controls.value
+          ? controls.value.reduce((prev, curr) => {
+              const obj = {};
+              obj[curr.name] =
+                curr.type === 'number' ? parseFloat(curr.value) : curr.value;
+              return {
+                ...prev,
+                ...obj,
+              };
+            }, {})
+          : {},
+      );
     });
 
-    return { controls, form: props.form };
+    function valueChanged(changedValue: any) {
+      Object.assign(formValues, changedValue);
+    }
+    /* const formValues = computed(() => {
+      return controls.value
+        ? controls.value.reduce((prev, curr) => {
+            const obj = {};
+            obj[curr.name] =
+              curr.type === 'number' ? parseFloat(curr.value) : curr.value;
+            return {
+              ...prev,
+              ...obj,
+            };
+          }, {})
+        : {};
+    }); */
+
+    return { controls, form: props.form, valueChanged, formValues };
   },
 });
 </script>

src/components/dynamic-input/DynamicInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, PropType, ref, toRefs, reactive } from 'vue';
+import { defineComponent, h, PropType, computed } from 'vue';
 import TextInput from '@/components/text-input/TextInput.vue';
 import SelectInput from '@/components/select-input/SelectInput.vue';
 
@@ -17,22 +17,29 @@ export default defineComponent({
   name: 'asDynamicInput',
   components,
   props,
-  setup(props) {
+  setup(props, { emit }) {
     let component;
+    const attributes = computed(() => {
+      return {
+        control: props.control,
+        onChange: function ($event) {
+          const value = {};
+          value[$event.target.name] = $event.target.value;
+          emit('changed', value);
+        },
+      };
+    });
+
     return () => {
       switch (props?.control?.type) {
         case 'text':
         case 'email':
         case 'password':
         case 'url':
-          component = h(TextInput, {
-            control: props.control,
-          });
+          component = h(TextInput, attributes.value);
           break;
         case 'select':
-          component = h(SelectInput, {
-            control: props.control,
-          });
+          component = h(SelectInput, attributes.value);
           break;
 
         default:
@@ -41,7 +48,7 @@ export default defineComponent({
       return h(
         'div',
         {
-          class: ['dynamic-input', 'form-group'],
+          class: ['dynamic-input', 'form-group', props?.control?.customClass],
         },
         [
           component,

src/components_old/dynamic-form/DynamicForm.js

@@ -125,7 +125,7 @@ const computed = {
     return Object.keys(this.$scopedSlots);
   },
   normalizedControls() {
-    let controls = {};
+    const controls = {};
     this.controls.forEach(element => {
       controls[element.name] = element;
     });

src/composables/input-events.ts

@@ -5,7 +5,7 @@ export function useInputEvents(control: FormControl<any> | undefined, emit) {
     if (control) {
       control.value = $event.target.value;
     }
-    emit('change', control?.value);
+    emit('changed', $event.target.value);
   }
   function onFocus() {
     emit('focus');

src/core/models.ts

@@ -25,6 +25,7 @@ export class InputBase<T> {
   disabled?: boolean;
   order?: number;
   type: string;
+  customClass?: string;
   placeholder?: string;
   validations?: FormValidation[];
   options?: { key: string; value: string; disabled?: boolean }[];
@@ -37,6 +38,7 @@ export class InputBase<T> {
       disabled?: boolean;
       order?: number;
       type?: string;
+      customClass?: string;
       placeholder?: string;
       validations?: FormValidation[];
       options?: { key: string; value: string; disabled?: boolean }[];
@@ -48,6 +50,7 @@ export class InputBase<T> {
     this.disabled = !!options.disabled;
     this.order = options.order === undefined ? 1 : options.order;
     this.type = options.type || '';
+    this.customClass = options.customClass;
     this.placeholder = options.placeholder;
     this.validations = options.validations;
     this.options = options.options;
@@ -58,6 +61,14 @@ export class TextInput extends InputBase<string> {
   type = 'text';
 }
 
+export class EmailInput extends InputBase<string> {
+  type = 'email';
+}
+
+export class PasswordInput extends InputBase<string> {
+  type = 'password';
+}
+
 export class SelectInput<T> extends InputBase<T> {
   type = 'select';
 }
@@ -76,6 +87,7 @@ export class FormControl<T> extends InputBase<T> {
       disabled?: boolean;
       order?: number;
       type?: string;
+      customClass?: string;
       options?: { key: string; value: string; disabled?: boolean }[];
     } = {},
   ) {
@@ -86,6 +98,7 @@ export class FormControl<T> extends InputBase<T> {
       type: options.type,
       disabled: !!options.disabled,
       order: options.order,
+      customClass: options.customClass,
     });
   }
 }

src/styles/themes/default.scss

@@ -52,7 +52,6 @@ $input-error-color: #dc3545 !default;
 .form-group {
   display: flex;
   flex-direction: column;
-  width: 100%;
   margin-bottom: 1rem;
 
   & > div {