Fix: Corregir estructura del Modal según Nuxt UI 4
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
- 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:
@@ -25,14 +25,86 @@
|
|||||||
|
|
||||||
<!-- Botones de acción -->
|
<!-- Botones de acción -->
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<!-- Botón de personalización de color -->
|
<!-- Modal de personalización de color -->
|
||||||
<button
|
<UModal v-model:open="mostrarColorPicker" title="Personalizar Color del Tema" :description="`Selecciona un color para el tema ${isDark ? 'oscuro' : 'claro'}`">
|
||||||
class="cata-button p-2 flex items-center justify-center flex-shrink-0"
|
<!-- Trigger button -->
|
||||||
@click="mostrarColorPicker = true"
|
<button
|
||||||
title="Personalizar color del tema"
|
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>
|
<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 -->
|
<!-- Botón de cambio de tema -->
|
||||||
<button
|
<button
|
||||||
@@ -63,83 +135,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user