fix: corregir renderizado de tabs en metabase-debug
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user