From c035c8a78f6f9022a5d485285b3218d9c6fed14f Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 14 Oct 2025 02:35:48 -0600
Subject: [PATCH] fix: corregir renderizado de tabs en metabase-debug
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Corrección del bug visual donde todos los tabs se mostraban simultáneamente.
El problema era el uso incorrecto del slot #default en UTabs que causaba
que todos los contenidos se renderizaran a la vez, creando elementos duplicados.

Cambios:
- Cambiar de #default a slots nombrados específicos (#table, #cards, #panorama, #detail)
- Ahora solo se muestra el contenido del tab activo
- Elimina la duplicación de elementos
- Mejora la legibilidad y organización visual
---
 nuxt4-app/app/pages/metabase-debug.vue | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index 468d148..88cc51e 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -65,18 +65,20 @@
 
       <!-- Tabs -->
       <UTabs v-model="selectedTab" :items="tabs">
-        <template #default="{ item }">
-          <!-- Table View -->
-          <div v-if="item.key === 'table'" class="py-4">
+        <!-- Table View -->
+        <template #table>
+          <div class="py-4">
             <MetabaseCardsTable
               :cards="cards"
               :loading="loading"
               @select="selectCard"
             />
           </div>
+        </template>
 
-          <!-- Cards View -->
-          <div v-if="item.key === 'cards'" class="py-4">
+        <!-- Cards View -->
+        <template #cards>
+          <div class="py-4">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
               <MetabaseCardDisplay
                 v-for="card in cards"
@@ -85,9 +87,11 @@
               />
             </div>
           </div>
+        </template>
 
-          <!-- Panorama Queries -->
-          <div v-if="item.key === 'panorama'" class="py-4 space-y-4">
+        <!-- Panorama Queries -->
+        <template #panorama>
+          <div class="py-4 space-y-4">
             <UAlert
               color="info"
               variant="soft"
@@ -111,9 +115,11 @@
               description="Busca en la tabla las queries que contengan 'panorama' en su nombre"
             />
           </div>
+        </template>
 
-          <!-- Selected Card Detail -->
-          <div v-if="item.key === 'detail' && selectedCard" class="py-4">
+        <!-- Selected Card Detail -->
+        <template #detail>
+          <div v-if="selectedCard" class="py-4">
             <MetabaseCardDisplay :card="selectedCard" />
           </div>
         </template>