Fix: Corregir implementación del modal según documentación de Nuxt UI
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 57s

- Usar v-model:open en lugar de v-model
- Mover botón dentro del UModal como trigger (slot por defecto)
- Contenido en slot #content según documentación
- Agregar title como prop del UModal
- Eliminar UCard innecesario
This commit is contained in:
2025-10-16 20:29:12 -06:00
parent 13fcb312d1
commit 56fc0cdd78

View File

@@ -1,29 +1,17 @@
<template> <template>
<UButton <UModal v-model:open="isOpen" title="Editar Perfil">
icon="i-heroicons-pencil-square" <UButton
color="primary" icon="i-heroicons-pencil-square"
variant="soft" color="primary"
:loading="isLoading" variant="soft"
@click="openModal" :loading="isLoading"
> @click="openModal"
Editar Perfil >
</UButton> Editar Perfil
</UButton>
<UModal v-model="isOpen" :prevent-close="isUpdating"> <template #content>
<UCard @click.stop> <div class="p-4 space-y-4">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold">Editar Perfil</h3>
<UButton
color="neutral"
variant="ghost"
icon="i-heroicons-x-mark"
@click="isOpen = false"
/>
</div>
</template>
<form @submit.prevent="updateProfile" class="space-y-4">
<UFormGroup label="Nombre Completo" name="name"> <UFormGroup label="Nombre Completo" name="name">
<UInput <UInput
v-model="formData.name" v-model="formData.name"
@@ -51,10 +39,8 @@
<span class="text-xs text-gray-500">El username no se puede cambiar</span> <span class="text-xs text-gray-500">El username no se puede cambiar</span>
</template> </template>
</UFormGroup> </UFormGroup>
</form>
<template #footer> <div class="flex justify-end gap-2 pt-4">
<div class="flex justify-end gap-2">
<UButton <UButton
color="neutral" color="neutral"
variant="ghost" variant="ghost"
@@ -71,8 +57,8 @@
Guardar Cambios Guardar Cambios
</UButton> </UButton>
</div> </div>
</template> </div>
</UCard> </template>
</UModal> </UModal>
</template> </template>