paulnicoue/components/ContactForm.vue

<template>

    <VeeForm class="contact-form" @submit="sendEmail" :validation-schema="contactFormSchema">
        <div class="contact-form__name">
            <label for="name">Nom</label>
            <VeeField name="name" />
            <Transition name="validation">
                <VeeError name="name" as="p" />
            </Transition>
        </div>
        <div class="contact-form__email">
            <label for="email">Adresse e-mail</label>
            <VeeField name="email" />
            <Transition name="validation">
                <VeeError name="email" as="p" />
            </Transition>
        </div>
        <div class="contact-form__subject">
            <label for="subject">Sujet</label>
            <VeeField name="subject" />
            <Transition name="validation">
                <VeeError name="subject" as="p" />
            </Transition>
        </div>
        <div class="contact-form__message">
            <label for="message">Message</label>
            <VeeField name="message" as="textarea" />
            <Transition name="validation">
                <VeeError name="message" as="p" />
            </Transition>
        </div>
        <button class="contact-form__button">
            <span class="contact-form__button-text">Envoyer</span>
            <svg class="contact-form__button-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                <line x1="23" y1="1" x2="10.9" y2="13.1"/>
                <polygon points="23 1 15.3 23 10.9 13.1 1 8.7 23 1"/>
            </svg>
        </button>
        <Transition name="loader">
            <div class="contact-form__loader" aria-hidden="true" ref="loader" v-show="isLoading"></div>
        </Transition>
        <Transition name="validation">
            <div class="contact-form__validation" v-if="isValidated" v-click-outside="hideValidationMessage">
                <p class="contact-form__validation-success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
                <p class="contact-form__validation-error" v-else>Oups ! Une erreur est survenue...</p>
            </div>
        </Transition>
    </VeeForm>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    // Yup schema builder

    const yupObject = useNuxtApp().$yupObject;
    const yupString = useNuxtApp().$yupString;

    const contactFormSchema = yupObject({
        name: yupString()
            .min(2, 'Votre nom doit comprendre au moins ${min} caractères.')
            .required('Veuillez saisir votre nom.'),
        email: yupString()
            .email('Veuillez saisir une adresse e-mail valide.')
            .required('Veuillez saisir votre adresse e-mail.'),
        subject: yupString()
            .min(2, 'Le sujet de votre message doit comprendre au moins ${min} caractères.')
            .required('Veuillez saisir le sujet de votre message.'),
        message: yupString()
            .min(10, 'Votre message doit comprendre au moins ${min} caractères.')
            .required('Veuillez saisir votre message.')
    });

    // Form validation

    const isValidated = ref(false);
    const isSuccessful = ref(undefined);

    // Loader

    const isLoading = ref(false);
    const loader = ref(null);

    // --------------------------------------------------
    // LOGIC
    // --------------------------------------------------

    const sendEmail = async (values) => {
        isLoading.value = true;
        try {
            const response = await $fetch('/api/contact', {
                method: 'post',
                body: {
                    name: values.name,
                    emailAddress: values.email,
                    subject: values.subject,
                    message: values.message
                }
            });
            isSuccessful.value = true;
        } catch {
            isSuccessful.value = false;
        } finally {
            loader.value.addEventListener('animationiteration', function hideLoader(event) {
                event.currentTarget.removeEventListener('animationiteration', hideLoader);
                isLoading.value = false;
                isValidated.value = true;
            });
        }
    }

    const hideValidationMessage = () => isValidated.value = false;

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // LAYOUT & STYLE
    // --------------------------------------------------

    .contact-form {
        max-width: var(--small-content-max-width);
        display: grid;
        grid:
            'name name' auto
            'email email' auto
            'subject subject' auto
            'message message' auto
            'button loader' auto
            'validation validation' auto
            / 1fr 1fr;
        place-content: start;
        place-items: start;
        gap: 1.5rem;

        &__name {
            grid-area: name;
        }

        &__email {
            grid-area: email;
        }

        &__subject {
            grid-area: subject;
        }

        &__message {
            grid-area: message;
        }

        &__name,
        &__email,
        &__subject,
        &__message {
            width: 100%;
        }            

        &__button {
            grid-area: button;
            @include button-with-icon;
        }

        &__loader {
            grid-area: loader;
            place-self: center end;
            width: 2.5rem;
            height: 2.5rem;
            border-width: 2px;
            border-style: solid;
            border-color: var(--accent-color) transparent;
            border-radius: 50%;
            animation: rotate-360 800ms ease-in-out infinite;
        }

        &__validation {
            grid-area: validation;

            &-error {
                color: var(--error-color);
            }
        }
        
        @media screen and (min-width: $tablet-media-query) {

            grid:
                'name name .' auto
                'email email .' auto
                'subject subject subject' auto
                'message message message' auto
                'button loader loader' auto
                'validation validation validation' auto
                / 1fr 1fr 1fr;
        }
    }

    // --------------------------------------------------
    // TRANSITION COMPONENTS
    // --------------------------------------------------
    
    .validation-enter-from,
    .validation-leave-to {
        opacity: 0;
        max-height: 0;
    }

    .validation-enter-active,
    .validation-leave-active {
        transition:
            opacity 400ms linear,
            max-height 400ms linear;
    }

    .validation-enter-to,
    .validation-leave-from {
        opacity: 1;
        max-height: calc(2 * (var(--caption-font-size) * var(--line-height)));
    }

    .loader-enter-from,
    .loader-leave-to {
        opacity: 0;
    }

    .loader-enter-active,
    .loader-leave-active {
        transition: opacity 400ms linear;
    }

    .loader-enter-to,
    .loader-leave-from {
        opacity: 1;
    }

</style>