host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit global style and component structure

Browse source
This commit is contained in:
Paul Nicoué 2023-02-02 17:02:53 +01:00
parent 88bac001d8
commit 53e513a55b
15 changed files with 816 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

144
components/ContactFormValidation.vue Normal file
View file

@ -0,0 +1,144 @@
<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: 1rem;
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>