Juan Felipe Zapata Moreno
3029d425fe
Co-authored-by: Juan Felipe Zapata Moreno <juan.zapata@golsystems.com.mx> Co-committed-by: Juan Felipe Zapata Moreno <juan.zapata@golsystems.com.mx>
60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits(['address-created']);
|
|
|
|
/** Refs */
|
|
const addressName = ref("");
|
|
|
|
/** Métodos */
|
|
const handleSubmit = () => {
|
|
if (!addressName.value.trim()) {
|
|
window.Notify.warning(window.Lang('address.validation.required'));
|
|
return;
|
|
}
|
|
|
|
// Emitir evento al padre con la nueva dirección
|
|
emit('address-created', {
|
|
name: addressName.value
|
|
});
|
|
|
|
// Limpiar el formulario
|
|
addressName.value = "";
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-10">
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-800">
|
|
{{ $t('address.create.title') }}
|
|
</h3>
|
|
|
|
<form @submit.prevent="handleSubmit">
|
|
<div class="mb-5">
|
|
<label
|
|
for="addressName"
|
|
class="block text-sm text-gray-600 font-medium mb-2"
|
|
>
|
|
{{ $t('address.name') }}:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="addressName"
|
|
v-model="addressName"
|
|
:placeholder="$t('address.placeholder')"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div class="mb-3 flex justify-center">
|
|
<button
|
|
type="submit"
|
|
class="w-1/4 bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
|
|
>
|
|
{{ $t('save') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|