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

124
components/ContactForm.vue
View file

@ -4,48 +4,33 @@
<div class="contact-form__name">
<label for="name">Nom</label>
<VeeField name="name" />
<Transition name="validation">
<Transition name="fade-in-expand-height">
<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">
<Transition name="fade-in-expand-height">
<VeeError name="email" as="p" />
</Transition>
</div>
<div class="contact-form__subject">
<label for="subject">Sujet</label>
<VeeField name="subject" />
<Transition name="validation">
<Transition name="fade-in-expand-height">
<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">
<Transition name="fade-in-expand-height">
<VeeError name="message" as="p" />
</Transition>
</div>
<VeeField name="honeypot" type="hidden" />
<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>Une erreur est survenue... Veuillez me contacter à l'adresse e-mail contact@paulnicoue.com</p>
</div>
</Transition>
<ContactFormValidation class="contact-form__validation" ref="contactFormValidation" @send-email="sendEmail" />
</VeeForm>
</template>
@ -78,22 +63,16 @@
.max(0)
});
// Form validation
// Form validation component
const isValidated = ref(false);
const isSuccessful = ref(undefined);
// Loader
const isLoading = ref(false);
const loader = ref(null);
const contactFormValidation = ref();
// --------------------------------------------------
// LOGIC
// --------------------------------------------------
const sendEmail = async (values) => {
isLoading.value = true;
contactFormValidation.value.isLoading = true;
try {
await $fetch('/api/contact', {
method: 'post',
@ -104,26 +83,24 @@
message: values.message
}
});
isSuccessful.value = true;
contactFormValidation.value.isSuccessful = true;
} catch {
isSuccessful.value = false;
contactFormValidation.value.isSuccessful = false;
} finally {
loader.value.addEventListener('animationiteration', function hideLoader(event) {
contactFormValidation.value.loader.addEventListener('animationiteration', function hideLoader(event) {
event.currentTarget.removeEventListener('animationiteration', hideLoader);
isLoading.value = false;
isValidated.value = true;
contactFormValidation.value.isLoading = false;
contactFormValidation.value.isValidated = true;
});
}
}
const hideValidationMessage = () => isValidated.value = false;
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// LAYOUT & STYLE
// STYLE
// --------------------------------------------------
.contact-form {
@ -134,7 +111,6 @@
'email email' auto
'subject subject' auto
'message message' auto
'button loader' auto
'validation validation' auto
/ 1fr 1fr;
place-content: start;
@ -164,80 +140,42 @@
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;
}
// Transition components
.validation-enter-active,
.validation-leave-active {
transition:
opacity 400ms linear,
max-height 400ms linear;
}
.fade-in-expand-height {
.validation-enter-to,
.validation-leave-from {
opacity: 1;
max-height: calc(3 * (var(--caption-font-size) * var(--line-height)));
}
&-enter-from,
&-leave-to {
opacity: 0;
max-height: 0;
}
.loader-enter-from,
.loader-leave-to {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition:
opacity 600ms ease-in-out,
max-height 600ms ease-in-out;
}
.loader-enter-active,
.loader-leave-active {
transition: opacity 400ms linear;
}
.loader-enter-to,
.loader-leave-from {
opacity: 1;
&-enter-to,
&-leave-from {
max-height: calc(3 * var(--caption-font-height));
}
}
</style>