fix: corregir renderizado de tabs en metabase-debug
All checks were successful
build-and-deploy / build (push) Successful in 43s
build-and-deploy / deploy (push) Successful in 3s

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
This commit is contained in:
2025-10-14 02:35:48 -06:00
parent 585d31a374
commit c035c8a78f

View File

@@ -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>