From d9ea2fb18d0fa9885948f5e5191145252bc15105 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 21 Nov 2025 20:35:58 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Actualizar=20implementaci=C3=B3n=20de=20?=
 =?UTF-8?q?UModal=20a=20Nuxt=20UI=20v4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar v-model a v-model:open según API de v4
- Agregar slot #content requerido en todos los modales
- Corregir prop :ui para anchos personalizados (content en lugar de width)
- Aplicar clases correctas del tema para max-w-3xl y max-w-4xl
---
 nuxt4/app/app.vue | 62 +++++++++++++++++++++++++++++------------------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index c36beb4..ac86d6a 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -117,39 +117,53 @@
     </UContainer>
 
     <!-- Modal: Crear/Editar Lote -->
-    <UModal v-model="showLoteFormModal">
-      <LotesLoteForm
-        :lote="selectedLote"
-        @cancel="closeLoteFormModal"
-        @success="handleLoteFormSuccess"
-      />
+    <UModal v-model:open="showLoteFormModal">
+      <template #content>
+        <LotesLoteForm
+          :lote="selectedLote"
+          @cancel="closeLoteFormModal"
+          @success="handleLoteFormSuccess"
+        />
+      </template>
     </UModal>
 
     <!-- Modal: Ver Detalle de Lote -->
-    <UModal v-model="showLoteDetailModal">
-      <LotesLoteCard
-        v-if="selectedLote"
-        :lote="selectedLote"
-        @edit="handleEditLoteFromDetail"
-        @trazabilidad="handleViewTrazabilidadFromDetail"
-      />
+    <UModal v-model:open="showLoteDetailModal">
+      <template #content>
+        <LotesLoteCard
+          v-if="selectedLote"
+          :lote="selectedLote"
+          @edit="handleEditLoteFromDetail"
+          @trazabilidad="handleViewTrazabilidadFromDetail"
+        />
+      </template>
     </UModal>
 
     <!-- Modal: Ver Trazabilidad -->
-    <UModal v-model="showTrazabilidadModal" :ui="{ width: 'max-w-4xl' }">
-      <LotesTrazabilidadTree
-        v-if="trazabilidadLoteId"
-        :lote-id="trazabilidadLoteId"
-        @close="showTrazabilidadModal = false"
-      />
+    <UModal
+      v-model:open="showTrazabilidadModal"
+      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default' }"
+    >
+      <template #content>
+        <LotesTrazabilidadTree
+          v-if="trazabilidadLoteId"
+          :lote-id="trazabilidadLoteId"
+          @close="showTrazabilidadModal = false"
+        />
+      </template>
     </UModal>
 
     <!-- Modal: Crear Operación -->
-    <UModal v-model="showCreateOperacionModal" :ui="{ width: 'max-w-3xl' }">
-      <OperacionesOperacionForm
-        @cancel="showCreateOperacionModal = false"
-        @success="handleOperacionFormSuccess"
-      />
+    <UModal
+      v-model:open="showCreateOperacionModal"
+      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-3xl rounded-lg shadow-lg ring ring-default' }"
+    >
+      <template #content>
+        <OperacionesOperacionForm
+          @cancel="showCreateOperacionModal = false"
+          @success="handleOperacionFormSuccess"
+        />
+      </template>
     </UModal>
   </UApp>
 </template>