From 5661b79d2f733ce0e20b0e43df254183b93d0900 Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Sat, 19 Dec 2020 07:55:51 +0100
Subject: [PATCH] fix: removed all warnings

---
 dev/vue/App.vue                               |  2 +-
 .../checkbox-input/CheckboxInput.vue          |  1 +
 src/components/dynamic-form/DynamicForm.vue   | 21 ++++---
 src/components/dynamic-input/DynamicInput.vue |  7 ++-
 src/components/number-input/NumberInput.vue   |  1 +
 src/components/radio-input/RadioInput.vue     |  1 +
 src/components/select-input/SelectInput.vue   |  1 +
 .../text-area-input/TextAreaInput.vue         |  1 +
 src/components/text-input/TextInput.vue       |  1 +
 src/composables/input-events.ts               |  8 ++-
 src/composables/use-debounce.ts               | 55 +++++++++++++++++++
 src/core/models.ts                            |  6 +-
 12 files changed, 89 insertions(+), 16 deletions(-)
 create mode 100644 src/composables/use-debounce.ts

diff --git a/dev/vue/App.vue b/dev/vue/App.vue
index 0ee4593..fa265d3 100644
--- a/dev/vue/App.vue
+++ b/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"
           >
diff --git a/src/components/checkbox-input/CheckboxInput.vue b/src/components/checkbox-input/CheckboxInput.vue
index af07ce4..43284e8 100644
--- a/src/components/checkbox-input/CheckboxInput.vue
+++ b/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);
diff --git a/src/components/dynamic-form/DynamicForm.vue b/src/components/dynamic-form/DynamicForm.vue
index f9c8dea..cef5d6d 100644
--- a/src/components/dynamic-form/DynamicForm.vue
+++ b/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);
       }
     }
 
diff --git a/src/components/dynamic-input/DynamicInput.vue b/src/components/dynamic-input/DynamicInput.vue
index ab4206c..dd9dc6f 100644
--- a/src/components/dynamic-input/DynamicInput.vue
+++ b/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;
 
diff --git a/src/components/number-input/NumberInput.vue b/src/components/number-input/NumberInput.vue
index f4ad8eb..c6215cf 100644
--- a/src/components/number-input/NumberInput.vue
+++ b/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);
diff --git a/src/components/radio-input/RadioInput.vue b/src/components/radio-input/RadioInput.vue
index 8c6a6b2..653cd26 100644
--- a/src/components/radio-input/RadioInput.vue
+++ b/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);
diff --git a/src/components/select-input/SelectInput.vue b/src/components/select-input/SelectInput.vue
index cf56619..d82b0f2 100644
--- a/src/components/select-input/SelectInput.vue
+++ b/src/components/select-input/SelectInput.vue
@@ -15,6 +15,7 @@ const props = {
 
 export default defineComponent({
   name: 'asSelectInput',
+  inheritAttrs: false,
   props,
   setup(props, { emit }) {
     return () => {
diff --git a/src/components/text-area-input/TextAreaInput.vue b/src/components/text-area-input/TextAreaInput.vue
index 98d48ce..bd97cbf 100644
--- a/src/components/text-area-input/TextAreaInput.vue
+++ b/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);
diff --git a/src/components/text-input/TextInput.vue b/src/components/text-input/TextInput.vue
index 53892ca..8e3d04c 100644
--- a/src/components/text-input/TextInput.vue
+++ b/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(
diff --git a/src/composables/input-events.ts b/src/composables/input-events.ts
index 71a1f90..e775dbe 100644
--- a/src/composables/input-events.ts
+++ b/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 {
diff --git a/src/composables/use-debounce.ts b/src/composables/use-debounce.ts
new file mode 100644
index 0000000..7f70fd5
--- /dev/null
+++ b/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);
+}
diff --git a/src/core/models.ts b/src/core/models.ts
index dbcbf6c..4874178 100644
--- a/src/core/models.ts
+++ b/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 & {