144 lines
3.8 KiB
Vue
144 lines
3.8 KiB
Vue
<template>
|
|
|
|
<div class="contact-form-validation">
|
|
<button class="contact-form-validation__button" @click="$emit('sendEmail')">
|
|
<span>Envoyer</span>
|
|
<svg 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__success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
|
|
<p class="contact-form-validation__error" v-else>Une erreur est survenue... Vérifiez les champs saisis ou contactez-moi à 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 {
|
|
@include button-with-icon;
|
|
grid-area: button;
|
|
}
|
|
|
|
&__loader {
|
|
grid-area: loader;
|
|
place-self: center end;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-top: 2px solid var(--primary-accent-color);
|
|
border-right: 2px solid var(--primary-accent-color);
|
|
border-bottom: 2px solid transparent;
|
|
border-radius: 50%;
|
|
animation: rotate-360 800ms linear infinite;
|
|
}
|
|
|
|
&__message {
|
|
grid-area: message;
|
|
}
|
|
|
|
&__error {
|
|
color: var(--secondary-accent-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 + (4 * var(--caption-font-height)));
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
|
|
&-enter-from,
|
|
&-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition: opacity 400ms ease-in-out;
|
|
}
|
|
}
|
|
|
|
</style>
|