51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<label for="web" class="block text-sm text-gray-900 ">{{ label }} </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">
|
|
<img src="@/assets/svg/globe.svg" alt="" class="h-5 w-5" />
|
|
<input
|
|
id="web"
|
|
v-model="web"
|
|
type="url"
|
|
name="web"
|
|
:placeholder="placeholder"
|
|
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"
|
|
/>
|
|
</div>
|
|
<p v-if="error" class="mt-2 text-sm text-error">{{ error }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
label: { type: String, required: true },
|
|
required: { type: Boolean, default: true },
|
|
placeholder: { type: String, default: '' },
|
|
},
|
|
emits: ['input-value'],
|
|
data() {
|
|
return {
|
|
web: '',
|
|
error: ''
|
|
}
|
|
},
|
|
watch: {
|
|
web(newVal) {
|
|
this.error = '';
|
|
this.updateUrl(newVal);
|
|
}
|
|
},
|
|
methods: {
|
|
updateUrl(value){
|
|
const pattern = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)(\/[\w-./?%&=]*)?$/i;
|
|
if(pattern.test(value)){
|
|
this.error = '';
|
|
this.$emit('input-value', value);
|
|
} else {
|
|
this.error = "Por favor, introduce una URL válida.";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |