From af8dc492090503a653c417eeb883bd5731b654b1 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 21 Nov 2025 21:10:35 -0600
Subject: [PATCH] Fix: Corregir permisos de archivos de componentes (644)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar permisos de 600 (rw-------) a 644 (rw-r--r--)
- Esto permite que el build de Docker lea los archivos correctamente
- Agregar documentación completa de UTabs y auto-import en nuxt-ui-tips.md
---
 nuxt-ui-tips.md | 205 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 205 insertions(+)

diff --git a/nuxt-ui-tips.md b/nuxt-ui-tips.md
index d9bbef9..835ace9 100644
--- a/nuxt-ui-tips.md
+++ b/nuxt-ui-tips.md
@@ -170,4 +170,209 @@ const handleSubmit = () => {
 
 ---
 
+## UTabs - Componente de Pestañas
+
+### Cambios de API en v4
+
+#### 1. v-model usa valores string
+
+En Nuxt UI v4, los valores de los tabs deben ser strings, no números.
+
+**❌ Incorrecto:**
+```vue
+<script setup>
+const selectedTab = ref(0)  // ❌ Número
+const tabs = [
+  { label: 'Lotes', icon: 'i-heroicons-cube', slot: 'lotes' },
+  { label: 'Operaciones', icon: 'i-heroicons-beaker', slot: 'operaciones' }
+]
+</script>
+
+<template>
+  <UTabs v-model="selectedTab" :items="tabs">
+    <template #lotes>
+      <!-- contenido -->
+    </template>
+  </UTabs>
+</template>
+```
+
+**✅ Correcto:**
+```vue
+<script setup>
+const selectedTab = ref('lotes')  // ✅ String
+const tabs = [
+  { label: 'Lotes', icon: 'i-heroicons-cube', slot: 'lotes', value: 'lotes' },
+  { label: 'Operaciones', icon: 'i-heroicons-beaker', slot: 'operaciones', value: 'operaciones' }
+]
+</script>
+
+<template>
+  <UTabs v-model="selectedTab" :items="tabs">
+    <template #lotes>
+      <!-- contenido -->
+    </template>
+  </UTabs>
+</template>
+```
+
+#### 2. Propiedad `value` en items
+
+Cada item debe tener una propiedad `value` que coincida con el nombre del slot. Si no se especifica, Nuxt UI usa el índice como string ("0", "1", etc.).
+
+**Props de TabsItem:**
+```typescript
+interface TabsItem {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  badge?: string | number | BadgeProps
+  content?: string
+  value?: string | number  // ⚠️ Importante: debe coincidir con el nombre del slot
+  disabled?: boolean
+  slot?: string  // Nombre del slot personalizado
+  class?: any
+  ui?: { ... }
+}
+```
+
+#### 3. Uso de slots con nombres personalizados
+
+Usa la propiedad `slot` en el item para definir un slot personalizado:
+
+```vue
+<script setup>
+const tabs = [
+  { label: 'Cuenta', slot: 'account', value: 'account' },
+  { label: 'Contraseña', slot: 'password', value: 'password' }
+]
+</script>
+
+<template>
+  <UTabs v-model="selectedTab" :items="tabs">
+    <template #account>
+      <!-- Contenido del tab de cuenta -->
+    </template>
+
+    <template #password>
+      <!-- Contenido del tab de contraseña -->
+    </template>
+  </UTabs>
+</template>
+```
+
+### Ejemplo completo
+
+```vue
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+
+const selectedTab = ref('lotes')
+
+const tabs: TabsItem[] = [
+  {
+    label: 'Lotes',
+    icon: 'i-heroicons-cube',
+    slot: 'lotes',
+    value: 'lotes'
+  },
+  {
+    label: 'Operaciones',
+    icon: 'i-heroicons-beaker',
+    slot: 'operaciones',
+    value: 'operaciones'
+  }
+]
+</script>
+
+<template>
+  <UTabs v-model="selectedTab" :items="tabs" class="mb-6">
+    <template #lotes>
+      <div class="py-4">
+        <!-- Contenido del tab de lotes -->
+      </div>
+    </template>
+
+    <template #operaciones>
+      <div class="py-4">
+        <!-- Contenido del tab de operaciones -->
+      </div>
+    </template>
+  </UTabs>
+</template>
+```
+
+---
+
+## Auto-import de Componentes en Nuxt
+
+### Convención de nombres para subdirectorios
+
+Cuando organizas componentes en subdirectorios dentro de `app/components/`, Nuxt genera automáticamente nombres prefijados:
+
+**Estructura de archivos:**
+```
+app/components/
+├── lotes/
+│   ├── LotesTable.vue
+│   ├── LoteForm.vue
+│   └── LoteCard.vue
+└── operaciones/
+    ├── OperacionesTable.vue
+    └── OperacionForm.vue
+```
+
+**Nombres de componentes generados:**
+```vue
+<!-- ❌ INCORRECTO -->
+<LotesTable />      <!-- No funciona -->
+<LoteForm />        <!-- No funciona -->
+
+<!-- ✅ CORRECTO -->
+<LotesLotesTable />    <!-- app/components/lotes/LotesTable.vue -->
+<LotesLoteForm />      <!-- app/components/lotes/LoteForm.vue -->
+<LotesLoteCard />      <!-- app/components/lotes/LoteCard.vue -->
+<OperacionesOperacionesTable />  <!-- app/components/operaciones/OperacionesTable.vue -->
+<OperacionesOperacionForm />     <!-- app/components/operaciones/OperacionForm.vue -->
+```
+
+**Patrón:**
+```
+<DirectorioNombreArchivo />
+```
+
+### NO se requieren imports explícitos
+
+Nuxt hace auto-import automáticamente. **NO** necesitas importar componentes manualmente:
+
+**❌ Incorrecto:**
+```vue
+<script setup>
+import LotesTable from '~/app/components/lotes/LotesTable.vue'  // ❌ Innecesario
+</script>
+
+<template>
+  <LotesLotesTable />
+</template>
+```
+
+**✅ Correcto:**
+```vue
+<script setup>
+// No se requiere import
+</script>
+
+<template>
+  <LotesLotesTable />  <!-- Auto-import automático -->
+</template>
+```
+
+### Verificación con analiticaNucleo
+
+Verificado en el proyecto analiticaNucleo que funciona correctamente:
+- `app/components/comercios/TablaComerciosResumen.vue` → `<ComerciosTablaComerciosResumen />`
+- `app/components/comercios/TotalesMonetariosComercio.vue` → `<ComerciosTotalesMonetariosComercio />`
+
+---
+
 **Última actualización:** 2025-11-21