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 {

src/composables/use-debounce.ts

@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type FunctionArgs<Args extends any[] = any[], Return = void> = (
+  ...args: Args
+) => Return;
+
+export interface FunctionWrapperOptions<
+  Args extends any[] = any[],
+  This = any
+> {
+  fn: FunctionArgs<Args, This>;
+  args: Args;
+  thisArg: This;
+}
+
+export type EventFilter<Args extends any[] = any[], This = any> = (
+  invoke: () => void,
+  options: FunctionWrapperOptions<Args, This>,
+) => void;
+
+/**
+ * @internal
+ */
+export function createFilterWrapper<T extends FunctionArgs>(
+  filter: EventFilter,
+  fn: T,
+) {
+  function wrapper(this: any, ...args: any[]) {
+    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
+  }
+
+  return (wrapper as any) as T;
+}
+
+export const bypassFilter: EventFilter = invoke => {
+  return invoke();
+};
+
+export function debounceFilter(ms: number): EventFilter {
+  if (ms <= 0) return bypassFilter;
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const filter: EventFilter = invoke => {
+    if (timer) clearTimeout(timer);
+
+    timer = setTimeout(invoke, ms);
+  };
+
+  return filter;
+}
+
+export function useDebounceFn<T extends FunctionArgs>(fn: T, ms = 200): T {
+  return createFilterWrapper(debounceFilter(ms), fn);
+}

src/core/models.ts

@@ -19,6 +19,9 @@ export type FormFields = {
   [key: string]: InputType;
 };
 
+export type FormChanges = {
+  [key: string]: string | number | null | undefined;
+};
 export interface DynamicForm {
   id: string;
   fields: FormFields;
@@ -36,7 +39,7 @@ export type ValidationErrors = {
 };
 
 export type BindingObject = {
-  [key: string]: any;
+  [key: string]: never;
 };
 
 export interface ValidatorFn {
@@ -53,6 +56,7 @@ export interface FormValidator {
 
 export interface InputEvent {
   name: string;
+  value?: unknown;
 }
 
 export type ValidationEvent = InputEvent & {