c385779221
- Add orange AlertCircle icon to FormMessage component for better visibility of validation errors. - Update styleguide to demonstrate new alert components with icons for error, success, and warning messages. - Refactor CSS for status messages and form error messages to improve layout and accessibility compliance.
48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { HTMLAttributes } from 'vue'
|
|
import { inject } from 'vue'
|
|
import { useFieldError } from 'vee-validate'
|
|
import { AlertCircle } from 'lucide-vue-next'
|
|
import { cn } from '~/lib/utils'
|
|
import type { FormItemContext } from '.'
|
|
import { FORM_ITEM_INJECT_KEY } from '.'
|
|
|
|
/**
|
|
* FormMessage component - Displays validation error messages
|
|
* Only renders when there is an error for the associated field
|
|
* Includes orange AlertCircle icon for better accessibility
|
|
*/
|
|
|
|
interface Props {
|
|
class?: HTMLAttributes['class']
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
// Get the form item context for ID
|
|
const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
|
|
|
|
// Get the field error message from the nearest parent field
|
|
const error = useFieldError()
|
|
</script>
|
|
|
|
<template>
|
|
<Transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="opacity-0 -translate-y-1"
|
|
enter-to-class="opacity-100 translate-y-0"
|
|
leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="opacity-100 translate-y-0"
|
|
leave-to-class="opacity-0 -translate-y-1"
|
|
>
|
|
<p
|
|
v-if="error"
|
|
:id="`${formItemContext?.id}-message`"
|
|
:class="cn('form-error', props.class)"
|
|
>
|
|
<AlertCircle class="h-6 w-6 text-warning flex-shrink-0" />
|
|
<span>{{ error }}</span>
|
|
</p>
|
|
</Transition>
|
|
</template>
|