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

fix(FormField): generics

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-20 14:13:32 +01:00
parent 03edad885d
commit a78b0965e8
3 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/runtime/components/FormField.vue
View File

@@ -59,7 +59,7 @@ const error = computed(() => {
const inputId = ref(useId())
provide<InjectedFormFieldOptions>('form-field', {
provide<InjectedFormFieldOptions<FormFieldProps>>('form-field', {
error,
inputId,
name: computed(() => props.name),

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

@@ -2,20 +2,22 @@ import { inject, ref, computed } from 'vue'
import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
import type { FormEvent, FormInputEvents, InjectedFormFieldOptions, InjectedFormOptions } from '../types/form'
type InputProps = {
id?: string | number
size?: string | number | symbol
color?: string // FIXME: Replace by enum
type Props<T> = {
id?: string
name?: string
// @ts-ignore FIXME: TS doesn't like this
size?: T['size']
// @ts-ignore FIXME: TS doesn't like this
color?: T['color']
eagerValidation?: boolean
legend?: string | null
disabled?: boolean | null
legend?: string
disabled?: boolean
}
export function useFormField (inputProps?: InputProps) {
export function useFormField <T> (inputProps?: Props<T>) {
const formOptions = inject<InjectedFormOptions | undefined>('form-options', undefined)
const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
const formField = inject<InjectedFormFieldOptions | undefined>('form-field', undefined)
const formField = inject<InjectedFormFieldOptions<T> | undefined>('form-field', undefined)
const formInputs = inject<any>('form-inputs', undefined)
if (formField) {
@@ -24,7 +26,7 @@ export function useFormField (inputProps?: InputProps) {
formField.inputId.value = inputProps?.id
}
if (formInputs) {
if (formInputs && formField.name.value) {
formInputs.value[formField.name.value] = formField.inputId.value
}
}
@@ -52,9 +54,7 @@ export function useFormField (inputProps?: InputProps) {
emitFormEvent('input', formField?.name.value as string)
}
},
formField?.validateOnInputDelay.value ??
formOptions?.validateOnInputDelay.value ??
0
formField?.validateOnInputDelay.value ?? formOptions?.validateOnInputDelay?.value ?? 0
)
return {

20
src/runtime/types/form.d.ts vendored
View File

@@ -1,3 +1,5 @@
import type { ComputedRef, Ref } from 'vue'
export interface Form<T> {
validate (path?: string | string[], opts?: { silent?: true }): Promise<T | false>
validate (path?: string | string[], opts?: { silent?: false }): Promise<T | false>
@@ -36,16 +38,16 @@ export interface FormEvent {
name?: string
}
export interface InjectedFormFieldOptions {
inputId: Ref<string | number | undefined>
name: Computed<string>
size: Computed<string | number | symbol>
error: Computed<string | boolean | undefined>
eagerValidation: Computed<boolean>
validateOnInputDelay: Computed<number | undefined>
export interface InjectedFormFieldOptions<T> {
inputId: Ref<string | undefined>
name: ComputedRef<string | undefined>
size: ComputedRef<T['size']>
error: ComputedRef<string | boolean | undefined>
eagerValidation: ComputedRef<boolean | undefined>
validateOnInputDelay: ComputedRef<number | undefined>
}
export interface InjectedFormOptions {
disabled?: Computed<boolean>
validateOnInputDelay?: Computed<number>
disabled?: ComputedRef<boolean>
validateOnInputDelay?: ComputedRef<number>
}