nucleo000/cataRio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Corregir estructura del Modal según Nuxt UI 4
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
Details

Browse Source 
- Mover trigger button al slot default de UModal
- Usar props title y description directamente en UModal
- Usar slots #body y #footer para el contenido del modal
- Mantener v-model:open para control de estado
- Eliminar wrapper div duplicado
- Seguir estructura correcta de Nuxt UI v4
This commit is contained in:
josedario87
2025-10-18 03:06:46 -06:00
parent b4cad99419
commit bb7e095f55
1 changed files with 80 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
nuxt4/app/components/cata/UserInfo.vue
View File

@@ -25,55 +25,18 @@
<!-- Botones de acción -->
<div class="flex items-center gap-2">
<!-- Botón de personalización de color -->
<!-- Modal de personalización de color -->
<UModal v-model:open="mostrarColorPicker" title="Personalizar Color del Tema" :description="`Selecciona un color para el tema ${isDark ? 'oscuro' : 'claro'}`">
<!-- Trigger button -->
<button
class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@click="mostrarColorPicker = true"
title="Personalizar color del tema"
>
<UIcon name="i-lucide-palette" class="w-4 h-4" />
</button>
<!-- Botón de cambio de tema -->
<button
class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@click="toggleTheme"
:title="isDark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'"
>
<UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4" />
</button>
<!-- Botón de home -->
<button
class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@click="goToHome"
title="Ir al inicio del ecosistema Nucleo"
>
<UIcon name="i-lucide-home" class="w-4 h-4" />
</button>
<!-- Botón de logout -->
<button
class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@click="handleLogout"
title="Cerrar sesión"
>
<UIcon name="i-lucide-log-out" class="w-4 h-4" />
</button>
</div>
</div>
</div>
<!-- Modal de personalización de color -->
<UModal v-model:open="mostrarColorPicker">
<div class="cata-outline-box rounded-lg p-6">
<h3 class="cata-text text-lg font-semibold mb-4">
Personalizar Color del Tema
</h3>
<p class="cata-text text-sm opacity-75 mb-4">
Selecciona un color para el tema {{ isDark ? 'oscuro' : 'claro' }}
</p>
<!-- Modal body -->
<template #body>
<!-- Color picker -->
<div class="mb-6">
<label class="cata-text text-sm font-medium mb-2 block">
@@ -115,9 +78,11 @@
</button>
</div>
</div>
</template>
<!-- Botones de acción -->
<div class="flex items-center justify-end gap-2">
<!-- Modal footer -->
<template #footer>
<div class="flex items-center justify-end gap-2 w-full">
<button
v-if="hasCustomColor"
class="cata-button px-4 py-2"
@@ -138,8 +103,38 @@
Aplicar
</button>
</div>
</div>
</template>
</UModal>
<!-- Botón de cambio de tema -->
<button
class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@click="toggleTheme"
:title="isDark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'"
>
<UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4" />
</button>
<!-- Botón de home -->
<button
class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@click="goToHome"
title="Ir al inicio del ecosistema Nucleo"
>
<UIcon name="i-lucide-home" class="w-4 h-4" />
</button>
<!-- Botón de logout -->
<button
class="cata-button p-2 flex items-center justify-center flex-shrink-0"
@click="handleLogout"
title="Cerrar sesión"
>
<UIcon name="i-lucide-log-out" class="w-4 h-4" />
</button>
</div>
</div>
</div>
</div>
</template>