feat(Form): improve form control and input validation trigger (#487)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/composables/useFormEvents.ts

@@ -1,18 +0,0 @@
-import { inject } from 'vue'
-import { UseEventBusReturn } from '@vueuse/core'
-import { FormEvent } from '../types'
-
-export const useFormEvents = () => {
-    const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
-    const formPath = inject<string | undefined>('form-path', undefined)
-
-    const emitFormBlur = () => {
-      if (formBus && formPath) {
-        formBus.emit({ type: 'blur', path: formPath })
-      }
-    }
-
-    return {
-      emitFormBlur
-    }
-}

src/runtime/composables/useFormGroup.ts

@@ -0,0 +1,38 @@
+import { inject } from 'vue'
+import { UseEventBusReturn, useDebounceFn } from '@vueuse/core'
+import { FormEvent, FormEventType } from '../types'
+
+export const useFormGroup = () => {
+    const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
+    const formGroup = inject('form-group', undefined)
+
+    const blurred = ref(false)
+
+    function emitFormEvent (type: FormEventType, path: string) {
+      if (formBus) {
+        formBus.emit({ type, path })
+      }
+    }
+
+    function emitFormBlur () {
+      emitFormEvent('blur', formGroup?.name.value)
+      blurred.value = true
+    }
+
+    function emitFormChange () {
+      emitFormEvent('change', formGroup?.name.value)
+    }
+
+    const emitFormInput = useDebounceFn(() => {
+      if (blurred.value) {
+        emitFormEvent('input', formGroup?.name.value)
+      }
+    }, 300)
+
+    return {
+      emitFormBlur,
+      emitFormInput,
+      emitFormChange,
+      formGroup
+    }
+}