59 lines
1.9 KiB
Vue
59 lines
1.9 KiB
Vue
<template>
|
|
<div class="space-y-2">
|
|
<label for="mail" class="block text-sm">{{ label[langcode] }} <span>{{ required ? '*' : '' }}</span></label>
|
|
<div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[input:focus-within]:outline-indigo-500">
|
|
<img src="@/assets/svg/mail.svg" alt="" class="h-5 w-5" />
|
|
<input
|
|
id="mail"
|
|
v-model="email"
|
|
type="text"
|
|
name="mail"
|
|
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
|
|
:placeholder="placeholder[langcode]"
|
|
/>
|
|
</div>
|
|
<p v-if="error" class="mt-2 text-sm text-error dark:text-error">{{ error[langcode] }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
props: {
|
|
label: { type: Object, default: () => ({}) },
|
|
required: { type: Boolean, default: true },
|
|
placeholder: { type: Object, default: () => ({}) },
|
|
},
|
|
emits: ['input-value'],
|
|
data() {
|
|
return {
|
|
email: '',
|
|
error: ''
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(["langcode"]),
|
|
},
|
|
watch: {
|
|
email(newVal) {
|
|
this.error = '';
|
|
this.updateEmail(newVal);
|
|
}
|
|
},
|
|
methods: {
|
|
updateEmail(email) {
|
|
const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
if (pattern.test(String(email).toLowerCase())) {
|
|
//this.$emit('input-value', email);
|
|
this.$emit('input-value', { email: email })
|
|
|
|
} else {
|
|
this.error = {
|
|
es: 'Por favor, introduce una dirección de correo electrónico válida.',
|
|
pt: 'Por favor, introduza um endereço de e-mail válido.',
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |