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

feat(FormField): wrap error with Presence to be animated

Browse Source
This commit is contained in:
Benjamin Canac
2025-05-14 12:57:40 +02:00
parent 717e35f098
commit 4fad9521b2
7 changed files with 191 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,7 +48,7 @@ export interface FormFieldSlots {
<script setup lang="ts">
import { computed, ref, inject, provide, type Ref, useId } from 'vue'
import { Primitive, Label } from 'reka-ui'
import { Primitive, Presence, Label } from 'reka-ui'
import { useAppConfig } from '#imports'
import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
import { tv } from '../utils/tv'
@@ -68,6 +68,8 @@ const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
const hasError = computed(() => !!(typeof error.value === 'string' && error.value) || !!slots.error)
const id = ref(useId())
// Copies id's initial value to bind aria-attributes such as aria-describedby.
// This is required for the RadioGroup component which unsets the id value.
@@ -115,12 +117,15 @@ provide(formFieldInjectionKey, computed(() => ({
<div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
<slot :error="error" />
<div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
<slot name="error" :error="error">
{{ error }}
</slot>
</div>
<div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
<Presence v-slot="{ present }" :present="hasError">
<div :id="`${ariaId}-error`" :data-state="present ? 'open' : 'closed'" :class="ui.error({ class: props.ui?.error })">
<slot name="error" :error="error">
{{ error }}
</slot>
</div>
</Presence>
<div v-if="!hasError && (help || !!slots.help)" :class="ui.help({ class: props.ui?.help })">
<slot name="help" :help="help">
{{ help }}
</slot>