paulnicoue/components/ContactFormValidation.vue

<template>

    <div class="contact-form-validation">
        <button class="contact-form-validation__button" @click="$emit('sendEmail')">
            <span class="contact-form-validation__button-text">Envoyer</span>
            <svg class="contact-form-validation__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="fade-in">
            <div class="contact-form-validation__loader" aria-hidden="true" ref="loader" v-show="isLoading"></div>
        </Transition>
        <Transition name="fade-in-expand-height">
            <div class="contact-form-validation__message" v-show="isValidated" v-click-outside="hideValidationMessage">
                <p class="contact-form-validation__message-success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
                <p class="contact-form-validation__message-error" v-else>Une erreur est survenue... Veuillez me contacter à l'adresse e-mail contact@paulnicoue.com</p>
            </div>
        </Transition>
    </div>

</template>

<script setup>

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

    // Form validation

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

    // Loader

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

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

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

    // --------------------------------------------------
    // FORWARDING
    // --------------------------------------------------

    defineEmits([
        'sendEmail'
    ]);

    defineExpose({
        isValidated,
        isSuccessful,
        isLoading,
        loader,
        hideValidationMessage
    });

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .contact-form-validation {
        width: 100%;
        display: grid;
        grid:
            'button loader' auto
            'message message' auto
            / auto auto;
        place-content: start stretch;
        place-items: start;
        column-gap: 2rem;
        row-gap: 0.5rem;

        &__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;
        }

        &__message {
            grid-area: message;

            &-error {
                color: var(--error-color);
            }
        }
    }

    // Transition components

    .fade-in-expand-height {

        &-enter-from,
        &-leave-to {
            opacity: 0;
            max-height: 0;
        }

        &-enter-active,
        &-leave-active {
            transition:
                opacity 600ms ease-in-out,
                max-height 600ms ease-in-out;
        }

        &-enter-to,
        &-leave-from {
            max-height: calc(1rem + (3 * var(--caption-font-height)));
        }
    }

    .fade-in {

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

        &-enter-active,
        &-leave-active {
            transition: opacity 400ms ease-in-out;
        }
    }

</style>