From fec189d5a5d302488e5aeef2acb52b8e4f5f2f84 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 3 Dec 2025 09:57:30 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Corregir=20uso=20de=20UModal=20seg=C3=BA?=
 =?UTF-8?q?n=20API=20de=20Nuxt=20UI=20v4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Usar v-model:open en lugar de v-model
- Usar slot #content para contenido personalizado
- Usar slots #body/#footer para estructura predefinida
- Corregir modal de imagen fullscreen
- Corregir modal de selector de emojis
---
 app/components/messages/ReactionPicker.vue    | 37 ++++++++-----------
 .../messages/content/MessageImage.vue         |  7 ++--
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/app/components/messages/ReactionPicker.vue b/app/components/messages/ReactionPicker.vue
index c972d85..74410d8 100644
--- a/app/components/messages/ReactionPicker.vue
+++ b/app/components/messages/ReactionPicker.vue
@@ -23,29 +23,24 @@
   </div>
 
   <!-- Full emoji picker modal -->
-  <UModal v-model="showFullPicker">
-    <template #default>
-      <div class="p-4 bg-[var(--wa-surface)]">
-        <h3 class="text-lg font-semibold mb-4 text-[var(--wa-text)]">Elegir reaccion</h3>
-
-        <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
-          <button
-            v-for="emoji in allEmojis"
-            :key="emoji"
-            class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
-            @click="selectReaction(emoji); showFullPicker = false"
-          >
-            {{ emoji }}
-          </button>
-        </div>
-
-        <div class="mt-4 flex justify-end">
-          <UButton variant="ghost" @click="showFullPicker = false">
-            Cancelar
-          </UButton>
-        </div>
+  <UModal v-model:open="showFullPicker" title="Elegir reacción" :ui="{ footer: 'justify-end' }">
+    <template #body>
+      <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
+        <button
+          v-for="emoji in allEmojis"
+          :key="emoji"
+          class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
+          @click="selectReaction(emoji); showFullPicker = false"
+        >
+          {{ emoji }}
+        </button>
       </div>
     </template>
+    <template #footer>
+      <UButton variant="ghost" color="neutral" @click="showFullPicker = false">
+        Cancelar
+      </UButton>
+    </template>
   </UModal>
 </template>
 
diff --git a/app/components/messages/content/MessageImage.vue b/app/components/messages/content/MessageImage.vue
index 8898c91..92f3b29 100644
--- a/app/components/messages/content/MessageImage.vue
+++ b/app/components/messages/content/MessageImage.vue
@@ -88,11 +88,10 @@
   </div>
 
   <!-- Fullscreen modal -->
-  <UModal v-model="showFullscreen" :ui="{ width: 'max-w-[95vw]' }">
-    <template #default>
-      <div class="relative bg-black flex items-center justify-center min-h-[50vh]">
+  <UModal v-model:open="showFullscreen" :close="false" :ui="{ content: 'max-w-[95vw] bg-black' }">
+    <template #content>
+      <div class="relative flex items-center justify-center min-h-[50vh]">
         <img
-          v-if="showFullscreen"
           :src="imageUrl"
           :alt="'Imagen'"
           class="max-w-full max-h-[90vh] object-contain"