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

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

@@ -25,14 +25,86 @@
<!-- Botones de acción -->
<div class="flex items-center gap-2">
<!-- Botón de personalización de color -->
<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>
<!-- 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"
title="Personalizar color del tema"
>
<UIcon name="i-lucide-palette" class="w-4 h-4" />
</button>
<!-- Modal body -->
<template #body>
<!-- Color picker -->
<div class="mb-6">
<label class="cata-text text-sm font-medium mb-2 block">
Color Principal
</label>
<div class="flex items-center gap-3">
<input
type="color"
v-model="colorSeleccionado"
class="color-picker"
@change="previsualizarColor"
/>
<input
type="text"
v-model="colorSeleccionado"
class="cata-input flex-1 px-3 py-2 rounded-md"
placeholder="#000000"
maxlength="7"
pattern="^#[0-9A-Fa-f]{6}$"
/>
</div>
</div>
<!-- Vista previa del color -->
<div class="mb-6">
<p class="cata-text text-sm font-medium mb-2">
Vista previa
</p>
<div class="preview-box cata-outline-box rounded-md p-4">
<button
class="cata-button px-4 py-2"
:style="{
'--preview-color': colorSeleccionado,
borderColor: colorSeleccionado,
color: colorSeleccionado
}"
>
Botón de ejemplo
</button>
</div>
</div>
</template>
<!-- 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"
@click="resetearColor"
>
Restablecer
</button>
<button
class="cata-button px-4 py-2"
@click="mostrarColorPicker = false"
>
Cancelar
</button>
<button
class="cata-button px-4 py-2"
@click="aplicarColor"
>
Aplicar
</button>
</div>
</template>
</UModal>
<!-- Botón de cambio de tema -->
<button
@@ -63,83 +135,6 @@
</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>
<!-- Color picker -->
<div class="mb-6">
<label class="cata-text text-sm font-medium mb-2 block">
Color Principal
</label>
<div class="flex items-center gap-3">
<input
type="color"
v-model="colorSeleccionado"
class="color-picker"
@change="previsualizarColor"
/>
<input
type="text"
v-model="colorSeleccionado"
class="cata-input flex-1 px-3 py-2 rounded-md"
placeholder="#000000"
maxlength="7"
pattern="^#[0-9A-Fa-f]{6}$"
/>
</div>
</div>
<!-- Vista previa del color -->
<div class="mb-6">
<p class="cata-text text-sm font-medium mb-2">
Vista previa
</p>
<div class="preview-box cata-outline-box rounded-md p-4">
<button
class="cata-button px-4 py-2"
:style="{
'--preview-color': colorSeleccionado,
borderColor: colorSeleccionado,
color: colorSeleccionado
}"
>
Botón de ejemplo
</button>
</div>
</div>
<!-- Botones de acción -->
<div class="flex items-center justify-end gap-2">
<button
v-if="hasCustomColor"
class="cata-button px-4 py-2"
@click="resetearColor"
>
Restablecer
</button>
<button
class="cata-button px-4 py-2"
@click="mostrarColorPicker = false"
>
Cancelar
</button>
<button
class="cata-button px-4 py-2"
@click="aplicarColor"
>
Aplicar
</button>
</div>
</div>
</UModal>
</div>
</template>