diff --git a/src/module.ts b/src/module.ts index 292c5547..9371ef20 100644 --- a/src/module.ts +++ b/src/module.ts @@ -21,7 +21,7 @@ export default defineNuxtModule({ prefix: 'U', colors: undefined }, - async setup (options, nuxt) { + async setup(options, nuxt) { const { resolve } = createResolver(import.meta.url) options.colors = options.colors || ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose'] diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue index e79291fc..7a307d1b 100644 --- a/src/runtime/components/Checkbox.vue +++ b/src/runtime/components/Checkbox.vue @@ -52,7 +52,7 @@ const inputId = _inputId.value ?? useId() const modelValue = defineModel({ default: undefined, - set (value) { + set(value) { return value } }) @@ -60,10 +60,10 @@ const modelValue = defineModel({ const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate)) const checked = computed({ - get () { + get() { return indeterminate.value ? 'indeterminate' : modelValue.value }, - set (value) { + set(value) { modelValue.value = value === 'indeterminate' ? undefined : value } }) @@ -71,7 +71,7 @@ const checked = computed({ // FIXME: I think there's a race condition between this and the v-model event. // This must be triggered after the value updates, otherwise the form validates // the previous value. -function onChecked () { +function onChecked() { emitFormChange() } diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue index fdd1db6e..73b50d2e 100644 --- a/src/runtime/components/Form.vue +++ b/src/runtime/components/Form.vue @@ -14,7 +14,7 @@ export interface FormProps { id?: string | number schema?: FormSchema state: Partial - validate?: (state: Partial) => Promise + validate?: (state: Partial) => Promise validateOn?: FormInputEvents[] disabled?: boolean validateOnInputDelay?: number @@ -38,7 +38,7 @@ import { useId } from '#imports' import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '#ui/utils/form' const props = withDefaults(defineProps>(), { - validateOn () { + validateOn() { return ['input', 'blur', 'change'] as FormInputEvents[] }, validateOnInputDelay: 300 @@ -55,7 +55,6 @@ const parentBus = inject | undefined>( ) provide('form-events', bus) - const nestedForms = ref any }>>(new Map()) onMounted(async () => { @@ -98,14 +97,14 @@ provide('form-errors', errors) const inputs = ref>({}) provide('form-inputs', inputs) -function resolveErrorIds (errs: FormError[]): FormErrorWithId[] { - return errs.map((err) => ({ +function resolveErrorIds(errs: FormError[]): FormErrorWithId[] { + return errs.map(err => ({ ...err, id: inputs.value[err.name] })) } -async function getErrors (): Promise { +async function getErrors(): Promise { let errs = props.validate ? (await props.validate(props.state)) ?? [] : [] if (props.schema) { @@ -125,26 +124,23 @@ async function getErrors (): Promise { return resolveErrorIds(errs) } -async function _validate ( - opts: { name?: string | string[], silent?: boolean, nested?: boolean } = { silent: false, nested: true } -): Promise { +async function _validate(opts: { name?: string | string[], silent?: boolean, nested?: boolean } = { silent: false, nested: true }): Promise { const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name - const nestedValidatePromises = !names && opts.nested ? Array.from(nestedForms.value.values()).map( - ({ validate }) => validate().then(() => undefined).catch((error: Error) => { - if (!(error instanceof FormValidationException)) { - throw error - } - return error - }) - ) : [] + const nestedValidatePromises = !names && opts.nested + ? Array.from(nestedForms.value.values()).map( + ({ validate }) => validate().then(() => undefined).catch((error: Error) => { + if (!(error instanceof FormValidationException)) { + throw error + } + return error + }) + ) + : [] if (names) { - const otherErrors = errors.value.filter( - (error) => !names!.includes(error.name) - ) - const pathErrors = (await getErrors()).filter((error) => - names!.includes(error.name) + const otherErrors = errors.value.filter(error => !names!.includes(error.name)) + const pathErrors = (await getErrors()).filter(error => names!.includes(error.name) ) errors.value = otherErrors.concat(pathErrors) } else { @@ -160,7 +156,7 @@ async function _validate ( return props.state as T } -async function onSubmit (payload: Event) { +async function onSubmit(payload: Event) { const event = payload as SubmitEvent try { @@ -170,7 +166,6 @@ async function onSubmit (payload: Event) { data: props.state } emit('submit', submitEvent) - } catch (error) { if (!(error instanceof FormValidationException)) { throw error @@ -190,30 +185,30 @@ defineExpose>({ validate: _validate, errors, - setErrors (errs: FormError[], name?: string) { + setErrors(errs: FormError[], name?: string) { if (name) { errors.value = errors.value - .filter((error) => error.name !== name) + .filter(error => error.name !== name) .concat(resolveErrorIds(errs)) } else { errors.value = resolveErrorIds(errs) } }, - async submit () { + async submit() { await onSubmit(new Event('submit')) }, - getErrors (name?: string) { + getErrors(name?: string) { if (name) { - return errors.value.filter((err) => err.name === name) + return errors.value.filter(err => err.name === name) } return errors.value }, - clear (name?: string) { + clear(name?: string) { if (name) { - errors.value = errors.value.filter((err) => err.name !== name) + errors.value = errors.value.filter(err => err.name !== name) } else { errors.value = [] } diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue index 88b89d80..54f342f8 100644 --- a/src/runtime/components/FormField.vue +++ b/src/runtime/components/FormField.vue @@ -52,10 +52,10 @@ const ui = computed(() => tv({ extend: formField, slots: props.ui })({ const formErrors = inject | null>('form-errors', null) const error = computed(() => { - return (props.error && typeof props.error === 'string') || - typeof props.error === 'boolean' + return (props.error && typeof props.error === 'string') + || typeof props.error === 'boolean' ? props.error - : formErrors?.value?.find((error) => error.name === props.name)?.message + : formErrors?.value?.find(error => error.name === props.name)?.message }) const inputId = ref(useId()) diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue index e0e95774..d59f2190 100644 --- a/src/runtime/components/Input.vue +++ b/src/runtime/components/Input.vue @@ -73,14 +73,14 @@ const ui = computed(() => tv({ extend: input, slots: props.ui })({ const inputRef = ref(null) -function autoFocus () { +function autoFocus() { if (props.autofocus) { inputRef.value?.focus() } } // Custom function to handle the v-model properties -function updateInput (value: string) { +function updateInput(value: string) { if (modelModifiers.trim) { value = value.trim() } @@ -93,13 +93,13 @@ function updateInput (value: string) { emitFormInput() } -function onInput (event: Event) { +function onInput(event: Event) { if (!modelModifiers.lazy) { updateInput((event.target as HTMLInputElement).value) } } -function onChange (event: Event) { +function onChange(event: Event) { const value = (event.target as HTMLInputElement).value if (modelModifiers.lazy) { @@ -112,7 +112,7 @@ function onChange (event: Event) { } } -function onBlur (event: FocusEvent) { +function onBlur(event: FocusEvent) { emitFormBlur() emit('blur', event) } diff --git a/src/runtime/components/Link.vue b/src/runtime/components/Link.vue index 9885dc99..e590e1d2 100644 --- a/src/runtime/components/Link.vue +++ b/src/runtime/components/Link.vue @@ -55,7 +55,7 @@ const ui = computed(() => tv({ } })) -function isLinkActive (slotProps: any) { +function isLinkActive(slotProps: any) { if (props.active !== undefined) { return props.active } @@ -78,7 +78,7 @@ function isLinkActive (slotProps: any) { return false } -function resolveLinkClass (slotProps: any) { +function resolveLinkClass(slotProps: any) { const active = isLinkActive(slotProps) if (props.raw) { diff --git a/src/runtime/components/LinkBase.vue b/src/runtime/components/LinkBase.vue index 26a2a292..e72f19fe 100644 --- a/src/runtime/components/LinkBase.vue +++ b/src/runtime/components/LinkBase.vue @@ -23,7 +23,7 @@ const props = withDefaults(defineProps(), { type: 'button' }) -function onClick (e: MouseEvent) { +function onClick(e: MouseEvent) { if (props.disabled) { e.stopPropagation() e.preventDefault() @@ -43,10 +43,10 @@ function onClick (e: MouseEvent) {