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

feat(Form): form validation properties (#3137)

Browse Source
This commit is contained in:
Romain Hamel
2025-01-24 19:10:44 +01:00
committed by GitHub
parent 891ba1fec6
commit c0b485d563
12 changed files with 119 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { inject, ref, computed, type InjectionKey, type Ref, type ComputedRef } from 'vue'
import { inject, computed, type InjectionKey, type Ref, type ComputedRef } from 'vue'
import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
import type { FormFieldProps } from '../types'
import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form'
@@ -14,7 +14,7 @@ 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 formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent<any>, 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, { id?: string, pattern?: RegExp }>>> = Symbol('nuxt-ui.form-inputs')
@@ -41,29 +41,27 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, defer
}
}
const touched = ref(false)
function emitFormEvent(type: FormInputEvents, name?: string) {
function emitFormEvent(type: FormInputEvents, name?: string, eager?: boolean) {
if (formBus && formField && name) {
formBus.emit({ type, name })
formBus.emit({ type, name, eager })
}
}
function emitFormBlur() {
touched.value = true
emitFormEvent('blur', formField?.value.name)
}
function emitFormFocus() {
emitFormEvent('focus', formField?.value.name)
}
function emitFormChange() {
touched.value = true
emitFormEvent('change', formField?.value.name)
}
const emitFormInput = useDebounceFn(
() => {
if (!opts?.deferInputValidation || touched.value || formField?.value.eagerValidation) {
emitFormEvent('input', formField?.value.name)
}
emitFormEvent('input', formField?.value.name, !opts?.deferInputValidation || formField?.value.eagerValidation)
},
formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
)
@@ -78,6 +76,7 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, defer
emitFormBlur,
emitFormInput,
emitFormChange,
emitFormFocus,
ariaAttrs: computed(() => {
if (!formField?.value) return