diff --git a/src/runtime/composables/useFormGroup.ts b/src/runtime/composables/useFormGroup.ts index 9bf2e007..dbce6f3b 100644 --- a/src/runtime/composables/useFormGroup.ts +++ b/src/runtime/composables/useFormGroup.ts @@ -12,54 +12,54 @@ type InputProps = { } export const useFormGroup = (inputProps?: InputProps, config?: any) => { - const formBus = inject | undefined>('form-events', undefined) - const formGroup = inject('form-group', undefined) - const formInputs = inject('form-inputs', undefined) + const formBus = inject | undefined>('form-events', undefined) + const formGroup = inject('form-group', undefined) + const formInputs = inject('form-inputs', undefined) - if (formGroup) { - if (inputProps?.id) { - // Updates for="..." attribute on label if inputProps.id is provided - formGroup.inputId.value = inputProps?.id - } - - if (formInputs) { - formInputs.value[formGroup.name.value] = formGroup.inputId.value - } + if (formGroup) { + if (inputProps?.id) { + // Updates for="..." attribute on label if inputProps.id is provided + formGroup.inputId.value = inputProps?.id } - const blurred = ref(false) - - function emitFormEvent (type: FormEventType, path: string) { - if (formBus) { - formBus.emit({ type, path }) - } + if (formInputs) { + formInputs.value[formGroup.name.value] = formGroup.inputId.value } + } - function emitFormBlur () { - emitFormEvent('blur', formGroup?.name.value as string) - blurred.value = true + const blurred = ref(false) + + function emitFormEvent (type: FormEventType, path: string) { + if (formBus) { + formBus.emit({ type, path }) } + } - function emitFormChange () { - emitFormEvent('change', formGroup?.name.value as string) + function emitFormBlur () { + emitFormEvent('blur', formGroup?.name.value as string) + blurred.value = true + } + + function emitFormChange () { + emitFormEvent('change', formGroup?.name.value as string) + } + + const emitFormInput = useDebounceFn(() => { + if (blurred.value || formGroup?.eagerValidation.value) { + emitFormEvent('input', formGroup?.name.value as string) } + }, 300) - const emitFormInput = useDebounceFn(() => { - if (blurred.value || formGroup?.eagerValidation.value) { - emitFormEvent('input', formGroup?.name.value as string) - } - }, 300) - - return { - inputId: computed(() => inputProps?.id ?? formGroup?.inputId.value), - name: computed(() => inputProps?.name ?? formGroup?.name.value), - size: computed(() => { - const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null - return inputProps?.size ?? formGroupSize ?? config?.default?.size - }), - color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color), - emitFormBlur, - emitFormInput, - emitFormChange - } + return { + inputId: computed(() => inputProps?.id ?? formGroup?.inputId.value), + name: computed(() => inputProps?.name ?? formGroup?.name.value), + size: computed(() => { + const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null + return inputProps?.size ?? formGroupSize ?? config?.default?.size + }), + color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color), + emitFormBlur, + emitFormInput, + emitFormChange + } }