test: update vue snapshots

Adds the `errors` and `maxErrors` properties to the FormField component which
allows to display multiple errors. The `maxErrors` prop is used to limit
the number of errors displayed and defaults to 1 for backward
compatibility.

This change is compatible with the `Form` component error's too.

Resolves #2389

playground/app/pages/components/form-field.vue

@@ -5,7 +5,9 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
 
 const feedbacks = [
   { description: 'This is a description' },
+  { error: true },
   { error: 'This is an error' },
+  { errors: ['This is an error', 'This is another error', 'This one is not visible'], maxErrors: 2 },
   { hint: 'This is a hint' },
   { help: 'Help! I need somebody!' },
   { required: true }
@@ -14,9 +16,9 @@ const feedbacks = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ms-[-38px]">
+    <div class="flex flex-col gap-4 ms-[-92px]">
       <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
-        <UFormField v-bind="feedback" label="Email" name="email" variant="inline">
+        <UFormField v-bind="feedback" label="Email" name="email">
           <UInput placeholder="john@lennon.com" />
         </UFormField>
       </div>
@@ -41,8 +43,6 @@ const feedbacks = [
         :size="size"
         label="Email"
         description="This is a description"
-        hint="This is a hint"
-        help="This is a help"
         name="email"
       >
         <UInput placeholder="john@lennon.com" />

src/runtime/components/FormField.vue

@@ -2,7 +2,6 @@
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/form-field'
 import type { ComponentConfig } from '../types/utils'
-import { createReusableTemplate } from '@vueuse/core'
 
 type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>
 
@@ -20,9 +19,21 @@ export interface FormFieldProps {
   description?: string
   help?: string
   error?: string | boolean
-  hint?: string
 
-  variant?: 'default' | 'inline'
+  /**
+   * An array of errors for this field.
+   * Note that only one error is displayed by default. You can use `maxErrors` to control the number of displayed errors.
+   * @defaultValue `1`
+   */
+  errors?: string[]
+
+  /**
+   * The maximum number of errors to display. If `false` or negative, display all available errors.
+   * @defaultValue `1`
+   */
+  maxErrors?: number | false
+
+  hint?: string
   /**
    * @defaultValue 'md'
    */
@@ -45,7 +56,7 @@ export interface FormFieldSlots {
   description(props: { description?: string }): any
   help(props: { help?: string }): any
   error(props: { error?: string | boolean }): any
-  default(props: { error?: string | boolean }): any
+  default(props: { error?: string | boolean, errors?: string[] }): any
 }
 </script>
 
@@ -57,20 +68,36 @@ import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFo
 import { tv } from '../utils/tv'
 import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
-const props = defineProps<FormFieldProps>()
+const props = withDefaults(defineProps<FormFieldProps>(), { maxErrors: 1 })
 const slots = defineSlots<FormFieldSlots>()
 
 const appConfig = useAppConfig() as FormField['AppConfig']
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })({
   size: props.size,
-  variant: props.variant,
   required: props.required
 }))
 
 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 errors = computed(() =>
+  (props.error && typeof props.error === 'string' ? [props.error] : props.errors)
+  || formErrors?.value?.flatMap((error) => {
+    if (!error.name) return []
+    if (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))) {
+      return [error.message]
+    }
+    return []
+  }))
+
+const error = computed(() => errors.value?.[0] ?? props.error)
+
+const displayedErrors = computed(() =>
+  props.maxErrors === false
+  || (!!props.maxErrors && props.maxErrors < 0)
+    ? errors.value
+    : errors.value?.slice(0, props.maxErrors)
+)
 
 const id = ref(useId())
 // Copies id's initial value to bind aria-attributes such as aria-describedby.
@@ -91,28 +118,9 @@ provide(formFieldInjectionKey, computed(() => ({
   help: props.help,
   ariaId
 }) as FormFieldInjectedOptions<FormFieldProps>))
-
-const [DefineHintTemplate, ReuseHintTemplate] = createReusableTemplate()
-const [DefineDescriptionTemplate, ReuseDescriptionTemplate] = createReusableTemplate()
 </script>
 
 <template>
-  <DefineHintTemplate>
-    <span v-if="(hint || !!slots.hint)" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
-      <slot name="hint" :hint="hint">
-        {{ hint }}
-      </slot>
-    </span>
-  </DefineHintTemplate>
-
-  <DefineDescriptionTemplate>
-    <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
-      <slot name="description" :description="description">
-        {{ description }}
-      </slot>
-    </p>
-  </DefineDescriptionTemplate>
-
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.wrapper({ class: props.ui?.wrapper })">
       <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
@@ -121,16 +129,31 @@ const [DefineDescriptionTemplate, ReuseDescriptionTemplate] = createReusableTemp
             {{ label }}
           </slot>
         </Label>
-        <ReuseHintTemplate v-if="variant !== 'inline'" />
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="hint">
+            {{ hint }}
+          </slot>
+        </span>
       </div>
+
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
     </div>
 
-    <ReuseDescriptionTemplate v-if="variant !== 'inline'" />
-
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
-      <slot :error="error" />
+      <slot :error="error" :errors="errors" />
 
-      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <template v-if="(typeof error === 'string' && error)">
+        <div v-for="err in displayedErrors" :id="`${ariaId}-error`" :key="err" :class="ui.error({ class: props.ui?.error })">
+          <slot name="error" :error="err">
+            {{ err }}
+          </slot>
+        </div>
+      </template>
+      <div v-else-if="!!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>

src/theme/form-field.ts

@@ -18,14 +18,6 @@ export default {
       lg: { root: 'text-sm' },
       xl: { root: 'text-base' }
     },
-
-    variant: {
-      inline: {
-        root: 'inline-flex',
-        label: 'mt-1.5 mx-2',
-        container: 'mt-0'
-      }
-    },
     required: {
       true: {
         label: `after:content-['*'] after:ms-0.5 after:text-error`

test/components/FormField.spec.ts

@@ -68,6 +68,10 @@ describe('FormField', () => {
     ['with required', { props: { label: 'Username', required: true } }],
     ['with help', { props: { help: 'Username must be unique' } }],
     ['with error', { props: { error: 'Username is already taken' } }],
+    ['with multiple errors', { props: { errors: ['Username is already taken', 'This should not be visible'] } }],
+    ['with maxErrors', { props: { maxErrors: 2, errors: ['Username is already taken', 'This should be visible'] } }],
+    ['with maxErrors negative', { props: { maxErrors: -1, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
+    ['with maxErrors false', { props: { maxErrors: false, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
     ['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
     ['with as', { props: { as: 'section' } }],

test/components/__snapshots__/FormField-vue.spec.ts.snap

@@ -148,6 +148,59 @@ exports[`FormField > renders with label slot correctly 1`] = `
 </div>"
 `;
 
+exports[`FormField > renders with maxErrors correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with maxErrors false correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with maxErrors negative correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with multiple errors correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+  </div>
+</div>"
+`;
+
 exports[`FormField > renders with required correctly 1`] = `
 "<div class="text-sm">
   <div class="">

test/components/__snapshots__/FormField.spec.ts.snap

@@ -148,6 +148,59 @@ exports[`FormField > renders with label slot correctly 1`] = `
 </div>"
 `;
 
+exports[`FormField > renders with maxErrors correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with maxErrors false correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with maxErrors negative correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
+  </div>
+</div>"
+`;
+
+exports[`FormField > renders with multiple errors correctly 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+  </div>
+</div>"
+`;
+
 exports[`FormField > renders with required correctly 1`] = `
 "<div class="text-sm">
   <div class="">