arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 22:41:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Form): handle @error event (#718)

Browse Source 
Co-authored-by: Albert <albert@Alberts-MacBook-Pro.local>
Co-authored-by: Romain Hamel <romain@boilr.io>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Albert
2023-10-10 11:47:22 -04:00
committed by GitHub
parent 1df07e2b4c
commit e16379fdbd
12 changed files with 142 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/runtime/composables/useFormGroup.ts
View File

@@ -1,22 +1,32 @@
import { inject, ref, computed } from 'vue'
import { inject, ref, computed, onMounted } from 'vue'
import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
type InputProps = {
id?: string
size?: string
size?: string | number | symbol
color?: string
name?: string
}
export const useFormGroup = (inputProps?: InputProps, config?: any) => {
const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
const formGroup = inject<InjectedFormGroupValue>('form-group', undefined)
const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
const formInputs = inject<any>('form-inputs', undefined)
if (formGroup) {
// Updates for="..." attribute on label if inputProps.id is provided
formGroup.inputId.value = inputProps?.id ?? formGroup?.inputId.value
}
const inputId = ref(inputProps?.id)
onMounted(() => {
inputId.value = inputProps?.id ?? formGroup?.inputId.value
if (formGroup) {
// Updates for="..." attribute on label if inputProps.id is provided
formGroup.inputId.value = inputId.value
if (formInputs) {
formInputs.value[formGroup.name.value] = inputId
}
}
})
const blurred = ref(false)
@@ -42,7 +52,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
}, 300)
return {
inputId: computed(() => inputProps.id ?? formGroup?.inputId.value),
inputId,
name: computed(() => inputProps?.name ?? formGroup?.name.value),
size: computed(() => inputProps?.size ?? formGroup?.size.value ?? config?.default?.size),
color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),