arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-18 14:08:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Form): catch-up with v2 changes (#2165)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-09-10 14:09:42 +02:00
committed by GitHub
parent 9ddfec123e
commit 175229384f
8 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/runtime/composables/useFormField.ts
View File

@@ -18,22 +18,26 @@ type Props<T> = {
export const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>> = Symbol('nuxt-ui.form-options')
export const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent, string>> = Symbol('nuxt-ui.form-events')
export const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>> = Symbol('nuxt-ui.form-field')
export const inputIdInjectionKey: InjectionKey<Ref<string | undefined>> = Symbol('nuxt-ui.input-id')
export const formInputsInjectionKey: InjectionKey<Ref<Record<string, string>>> = Symbol('nuxt-ui.form-inputs')
export function useFormField<T>(props?: Props<T>) {
export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean }) {
const formOptions = inject(formOptionsInjectionKey, undefined)
const formBus = inject(formBusInjectionKey, undefined)
const formField = inject(formFieldInjectionKey, undefined)
const formInputs = inject(formInputsInjectionKey, undefined)
const inputId = inject(inputIdInjectionKey, undefined)
if (formField) {
if (props?.id) {
// Updates for="..." attribute on label if props.id is provided
formField.value.id = props?.id
if (formField && inputId) {
if (opts?.bind === false || props?.legend) {
// Removes for="..." attribute on label for RadioGroup and alike.
inputId.value = undefined
} else if (props?.id) {
// Updates for="..." attribute on label if props.id is provided.
inputId.value = props?.id
}
if (formInputs && formField.value.name) {
formInputs.value[formField.value.name] = formField.value.id
if (formInputs && formField.value.name && inputId.value) {
formInputs.value[formField.value.name] = inputId.value
}
}
@@ -62,7 +66,7 @@ export function useFormField<T>(props?: Props<T>) {
)
return {
id: computed(() => props?.id ?? formField?.value.id),
id: computed(() => props?.id ?? inputId?.value),
name: computed(() => props?.name ?? formField?.value.name),
size: computed(() => props?.size ?? formField?.value.size),
color: computed(() => formField?.value.error ? 'error' : props?.color),