Merge pull request #209 from asigloo/bugfix/fix-vue-warns

fix: removed all warnings

Author: alvarosabu

dev/vue/App.vue

@@ -6,7 +6,7 @@
         <div class="card p-6 mr-4">
           <dynamic-form
             :form="form"
-            @submited="handleSubmit"
+            @submitted="handleSubmit"
             @changed="valueChanged"
             @error="handleError"
           >

src/components/checkbox-input/CheckboxInput.vue

@@ -14,6 +14,7 @@ const props = {
 
 export default defineComponent({
   name: 'asCheckboxInput',
+  inheritAttrs: false,
   props,
   setup(props, { emit }) {
     const { onCheck, onFocus, onBlur } = useInputEvents(props, emit);

src/components/dynamic-form/DynamicForm.vue

@@ -11,7 +11,6 @@
       v-for="control in controls"
       :key="control.name"
       :control="control"
-      :submited="submited"
       :forceValidation="forceValidation"
       @change="valueChange"
       @blur="onBlur"
@@ -61,15 +60,12 @@ import {
   InputType,
   ValidationEvent,
   InputEvent,
+  FormChanges,
 } from '@/core/models';
 import { dynamicFormsSymbol } from '@/useApi';
-import {
-  deepClone,
-  hasValue,
-  isEvent,
-  removeEmpty,
-} from '@/core/utils/helpers';
+import { deepClone, hasValue, removeEmpty } from '@/core/utils/helpers';
 import { FieldControl } from '@/core/factories';
+import { useDebounceFn } from '@/composables/use-debounce';
 
 const props = {
   form: {
@@ -86,6 +82,7 @@ const components = {
  */
 export default defineComponent({
   name: 'asDynamicForm',
+  inheritAttrs: false,
   props,
   components,
   setup(props, ctx) {
@@ -197,14 +194,20 @@ export default defineComponent({
       return updatedCtrl;
     }
 
-    function valueChange(event: any) {
+    function emitChanges(changes: FormChanges) {
+      ctx.emit('change', changes);
+    }
+
+    const debounceEmitChanges = useDebounceFn(emitChanges, 300);
+
+    function valueChange(event: InputEvent) {
       if (hasValue(event.value)) {
         const updatedCtrl = findControlByName(event.name);
         if (updatedCtrl) {
           updatedCtrl.value = event.value as string;
           updatedCtrl.dirty = true;
         }
-        ctx.emit('change', formValues.value);
+        debounceEmitChanges(formValues.value);
       }
     }
 

src/components/dynamic-input/DynamicInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
-import { defineComponent, PropType, computed, h, inject } from 'vue';
+import { defineComponent, PropType, computed, h } from 'vue';
 import TextInputComponent from '../text-input/TextInput.vue';
 import SelectInputComponent from '../select-input/SelectInput.vue';
 import TextAreaInputComponent from '../text-area-input/TextAreaInput.vue';
@@ -28,7 +28,7 @@ import {
   InputEvent,
 } from '@/core/models';
 
-import { isArray, isEvent, isObject } from '@/core/utils/helpers';
+import { isArray, isObject } from '@/core/utils/helpers';
 import { useInputEvents } from '@/composables/input-events';
 
 const components = {
@@ -61,9 +61,10 @@ export type ControlAttribute<T extends InputType> = {
 export default defineComponent({
   name: 'asDynamicInput',
   components,
+  inheritAttrs: false,
   props,
   setup(props, { emit, slots }) {
-    const { onFocus, onInput, onChange, onBlur } = useInputEvents(props, emit);
+    const { onFocus, onInput, onBlur } = useInputEvents(props, emit);
 
     let component;
 

src/components/number-input/NumberInput.vue

@@ -14,6 +14,7 @@ const props = {
 
 export default defineComponent({
   name: 'asNumberInput',
+  inheritAttrs: false,
   props,
   setup(props, { emit }) {
     const { onInput, onChange, onFocus, onBlur } = useInputEvents(props, emit);

src/components/radio-input/RadioInput.vue

@@ -14,6 +14,7 @@ const props = {
 
 export default defineComponent({
   name: 'asRadioInput',
+  inheritAttrs: false,
   props,
   setup(props, { emit }) {
     const { onChange, onInput, onFocus, onBlur } = useInputEvents(props, emit);

src/components/select-input/SelectInput.vue

@@ -15,6 +15,7 @@ const props = {
 
 export default defineComponent({
   name: 'asSelectInput',
+  inheritAttrs: false,
   props,
   setup(props, { emit }) {
     return () => {

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

@@ -13,6 +13,7 @@ const props = {
 
 export default defineComponent({
   name: 'asTextAreaInput',
+  inheritAttrs: false,
   props,
   setup(props, { emit }) {
     const { onInput, onChange, onFocus, onBlur } = useInputEvents(props, emit);

src/components/text-input/TextInput.vue

@@ -23,6 +23,7 @@ const props = {
 
 export default defineComponent({
   name: 'asTextInput',
+  inheritAttrs: false,
   props,
   setup(props, { emit }) {
     const { onInput, onChange, onFocus, onBlur, getClasses } = useInputEvents(

src/composables/input-events.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { computed, ComputedRef, watch } from 'vue';
 import { hasValue } from '../core/utils/helpers';
 
@@ -13,7 +14,7 @@ interface InputEventsComposition {
   getClasses: ComputedRef<(string | { [key: string]: boolean })[]>;
 }
 
-export function useInputEvents(props: any, emit: any): InputEventsComposition {
+export function useInputEvents(props, emit): InputEventsComposition {
   const { validate, getValidationClasses } = useInputValidation(props, emit);
 
   function onInput($event: Event): void {
@@ -72,13 +73,16 @@ export function useInputEvents(props: any, emit: any): InputEventsComposition {
   watch(
     () => props?.control?.value,
     (curr, prev) => {
-      if (prev !== undefined && hasValue(curr) && curr !== prev) {
+      if (hasValue(curr) && curr !== prev) {
         emit('change', {
           name: props.control.name,
           value: props.control.value,
         });
       }
     },
+    {
+      immediate: true,
+    },
   );
 
   return {