From bb7e095f55814b7abfda7641ea8b55d65ad1aecd Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 03:06:46 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Corregir=20estructura=20del=20Modal=20se?=
 =?UTF-8?q?g=C3=BAn=20Nuxt=20UI=204?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 nuxt4/app/components/cata/UserInfo.vue | 165 ++++++++++++-------------
 1 file changed, 80 insertions(+), 85 deletions(-)

diff --git a/nuxt4/app/components/cata/UserInfo.vue b/nuxt4/app/components/cata/UserInfo.vue
index 5205250..42b6e0c 100644
--- a/nuxt4/app/components/cata/UserInfo.vue
+++ b/nuxt4/app/components/cata/UserInfo.vue
@@ -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>