From d34b73289a833ee6796c707361f90d77361f9aa5 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 31 Oct 2025 10:56:50 -0600
Subject: [PATCH] Fix: Envolver contenido del modal en slot #body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- El contenido debe estar dentro de <template #body> para renderizarse correctamente
- Según Modal.vue, el body solo se renderiza si existe el slot #body
- Quitar padding del div interno ya que el modal ya tiene padding en el body
- Ahora el contenido aparecerá dentro del modal correctamente
---
 .../metabase/MetabaseCardsTable.vue           | 76 ++++++++++---------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
index fabcd0b..98779a2 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
@@ -45,48 +45,50 @@
         </div>
       </template>
 
-      <div v-if="currentResult" class="space-y-3 p-4">
-        <div class="flex flex-wrap gap-4 text-sm">
-          <div>
-            <span class="font-medium text-gray-500 dark:text-gray-400">Filas:</span>
-            <span class="ml-2">{{ currentResult.data?.rows?.length || 0 }}</span>
+      <template #body>
+        <div v-if="currentResult" class="space-y-3">
+          <div class="flex flex-wrap gap-4 text-sm">
+            <div>
+              <span class="font-medium text-gray-500 dark:text-gray-400">Filas:</span>
+              <span class="ml-2">{{ currentResult.data?.rows?.length || 0 }}</span>
+            </div>
+            <div>
+              <span class="font-medium text-gray-500 dark:text-gray-400">Tiempo:</span>
+              <span class="ml-2">{{ currentResult.running_time || 0 }}ms</span>
+            </div>
+            <div>
+              <span class="font-medium text-gray-500 dark:text-gray-400">Estado:</span>
+              <UBadge :color="currentResult.status === 'completed' ? 'green' : 'yellow'">
+                {{ currentResult.status }}
+              </UBadge>
+            </div>
           </div>
-          <div>
-            <span class="font-medium text-gray-500 dark:text-gray-400">Tiempo:</span>
-            <span class="ml-2">{{ currentResult.running_time || 0 }}ms</span>
+
+          <!-- Empty State -->
+          <div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center rounded-lg border dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+            <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full">
+              <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+              </svg>
+            </div>
+            <h3 class="text-sm font-medium mb-1">No hay datos</h3>
+            <p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
           </div>
-          <div>
-            <span class="font-medium text-gray-500 dark:text-gray-400">Estado:</span>
-            <UBadge :color="currentResult.status === 'completed' ? 'green' : 'yellow'">
-              {{ currentResult.status }}
-            </UBadge>
+
+          <!-- Data Display -->
+          <div v-else class="overflow-x-auto max-h-96">
+            <pre class="p-3 rounded-lg border dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
           </div>
         </div>
 
-        <!-- Empty State -->
-        <div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center rounded-lg border dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-          <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full">
-            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
-            </svg>
-          </div>
-          <h3 class="text-sm font-medium mb-1">No hay datos</h3>
-          <p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
-        </div>
-
-        <!-- Data Display -->
-        <div v-else class="overflow-x-auto max-h-96">
-          <pre class="p-3 rounded-lg border dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
-        </div>
-      </div>
-
-      <UAlert
-        v-if="currentError"
-        color="red"
-        variant="soft"
-        :title="currentError"
-        class="m-4"
-      />
+        <UAlert
+          v-if="currentError"
+          color="red"
+          variant="soft"
+          :title="currentError"
+          class="mt-4"
+        />
+      </template>
     </UModal>
   </div>
 </template>