Using auto-animate on AutoForm

[DesertCookie]

How would you enable FormKit's v-auto-animate directive on an AutoForm? I've been messing around with a few different ideas, but have yet to find a way to make the appearing and disappearing of form messages pleasant.

Here are some things I've tried mixed together; none of them actually work:

const formSchema = z.object({
	email: z.string().describe('Loginname'),
	password: z.string().min(8).describe('Passwort'),
})

const form = ref()
onMounted(() => {
	autoAnimate(form.value)
})

<template>
    <div class="flex items-center justify-center h-dvh">
        <Card class="w-64">
            <CardHeader>
                <CardTitle>Login</CardTitle>
            </CardHeader>
            <CardContent v-auto-animate>
                <AutoForm
                    ref="form"
                    :schema="formSchema"
                    :field-config="{ password: { inputProps: { type: 'password' }}}"
                    @submit="console.log"
                    v-auto-animate
                />
            </CardContent>
        </Card>
    </div>
</template>

[DesertCookie]

ChatGPT, with a lot of back and forth, helped me devise this:

onMounted(() => {
    const formElement = form.value?.$el // Accessing the root DOM element
    if (formElement) {
       formElement.querySelectorAll("*").forEach(element => {
          if (element.nodeType === Node.ELEMENT_NODE) { // Ensure the element is a plain HTML element
             vAutoAnimate.mounted(element, {value: {}}) // Passing empty options or your custom options
          }
       })
    }
});

This does feel rather clunky, though.

[sadeghbarati]

@DesertCookie Hey check this Stackblitz

https://stackblitz.com/edit/pyjkgp?file=src%2Fcomponents%2Fui%2Fform%2FFormItem.vue

You need to use the v-auto-animate directive on FormItem.vue element not on whole Form or Card component

---

Ways you can use v-auto-animate

1. on FormItem.vue component

<FormField v-slot="{ componentField }" name="username" :validate-on-blur="!isFieldDirty">
  <FormItem v-auto-animate> /////////////
    <FormLabel>Username</FormLabel>
    <FormControl>
      <Input type="text" placeholder="shadcn" v-bind="componentField" />
    </FormControl>
    <FormDescription>
      This is your public display name.
    </FormDescription>
    <FormMessage />
  </FormItem>
</FormField>

2 . inside FormItem.vue

<script lang="ts" setup>
import { type HTMLAttributes, provide } from 'vue';
import { useId } from 'radix-vue';
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
import { cn } from '@/utils';
import { vAutoAnimate } from '@formkit/auto-animate/vue'; /////////////

const props = defineProps<{
  class?: HTMLAttributes['class'];
}>();

const id = useId();
provide(FORM_ITEM_INJECTION_KEY, id);
</script>

<template>
  <div :class="cn('space-y-2', props.class)" v-auto-animate> /////////////
    <slot />
  </div>
</template>

[DesertCookie]

Thanks a lot. Coming from Nuxt UI I haven't gotten used to being able to edit the components itself so this didn't even cross my mind. Seems obvious now.