# Componentes de Vue

Chamilo cuenta con un amplio conjunto de componentes Vue organizados por área de funcionalidad en `assets/vue/components/`.

## Componentes Base

La familia `Base*` en `assets/vue/components/basecomponents/` envuelve los primitivos de PrimeVue con configuraciones predeterminadas específicas de Chamilo (diseño FloatLabel, íconos MDI a través de `chamiloIconToClass`, mensajes de validación consistentes, dimensionamiento con Tailwind). Siempre opta por un componente `Base*` antes de importar el componente subyacente de PrimeVue; así se mantiene la consistencia de la interfaz de usuario en toda la SPA y los cambios de diseño pueden implementarse desde un solo lugar.

Los componentes **no** están registrados globalmente (el único primitivo de PrimeVue registrado globalmente es `Column`, utilizado dentro de `BaseTable`). Importa cada uno de manera explícita:

```js
import BaseButton from "@/components/basecomponents/BaseButton.vue"
import BaseDialog from "@/components/basecomponents/BaseDialog.vue"
```

***

### Campos de formulario

La mayoría acepta el valor a través de `v-model`, expone las propiedades `id` + `label` para accesibilidad y vinculación de etiquetas flotantes, y muestra la validación mediante un par `isInvalid` / `errorText` (o `messageText`).

| Componente                       | Envuelve                                             | Propósito                                                                                                                                                                                                                               |
| -------------------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseInputText.vue`              | `InputText` + `FloatLabel`                           | Entrada de texto de una sola línea. Cambia a una etiqueta estática para entradas de tipo `date`/`time`/`datetime-local` (donde la etiqueta flotante se superpondría al marcador de posición nativo).                                    |
| `BaseInputTextWithVuelidate.vue` | `BaseInputText`                                      | Adaptador ligero para Vuelidate: reenvía `$error` a `isInvalid` y renderiza `$errors[].$message` en el slot `errors`. Úselo con un objeto de campo de Vuelidate.                                                                        |
| `BaseTextArea.vue`               | `Textarea` + `FloatLabel`                            | Entrada de texto de varias líneas.                                                                                                                                                                                                      |
| `BaseTextAreaWithVuelidate.vue`  | `BaseTextArea`                                       | Mismo patrón de adaptador de Vuelidate que `BaseInputTextWithVuelidate`.                                                                                                                                                                |
| `BaseInputNumber.vue`            | `InputNumber`                                        | Entrada numérica con `min` / `max` / `step` y botones de incremento/decremento.                                                                                                                                                         |
| `BaseInputTags.vue`              | (personalizado)                                      | Etiquetas de texto libre; las etiquetas se añaden al presionar enter o coma y se eliminan con retroceso.                                                                                                                                |
| `BaseInputGroup.vue`             | `InputGroup` + `BaseButton`                          | Entrada de texto combinada con un botón de acción (estilo búsqueda).                                                                                                                                                                    |
| `BaseCheckbox.vue`               | `Checkbox`                                           | Casilla de verificación binaria o vinculada a un valor con etiqueta.                                                                                                                                                                    |
| `BaseRadioButtons.vue`           | `RadioButton`                                        | Grupo de botones de radio impulsado por un arreglo `options: [{label, value}]`.                                                                                                                                                         |
| `BaseToggleButton.vue`           | `BaseButton`                                         | Botón de dos estados (etiquetas e iconos de encendido/apagado) vinculado a través de `v-model`.                                                                                                                                         |
| `BaseCalendar.vue`               | `DatePicker` + `FloatLabel`                          | Selector de fecha o fecha-hora. Respeta `platform.timepicker_increment` y la configuración regional del usuario a través de `calendarLocales`.                                                                                          |
| `BaseColorPicker.vue`            | nativo `<input type="color">` + `InputText`          | Selector de color con respaldo de texto hexadecimal; utiliza `colorjs.io` para validar la entrada manual de hexadecimal.                                                                                                                |
| `BaseRating.vue`                 | `Rating`                                             | Entrada de calificación con estrellas.                                                                                                                                                                                                  |
| `BaseFileUpload.vue`             | nativo `<input type="file">` + `BaseButton`          | Selector de un solo archivo que activa un botón de estilo adjunto.                                                                                                                                                                      |
| `BaseFileUploadMultiple.vue`     | nativo `<input type="file" multiple>` + `BaseButton` | Variante de múltiples archivos de `BaseFileUpload`.                                                                                                                                                                                     |
| `BaseUploader.vue`               | Uppy `Dashboard`                                     | Cargador completo de Uppy (cámara web, audio, editor de imágenes, carga XHR) con configuraciones regionales vinculadas al `appLocale` actual. Úselo para cargas enriquecidas con progreso; use `BaseFileUpload*` para adjuntos simples. |

***

### Selección y autocompletado

| Componente             | Envuelve                     | Propósito                                                                                                                                                         |
| ---------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseSelect.vue`       | `Dropdown` + `FloatLabel`    | Menú desplegable de selección única con botón de limpieza opcional.                                                                                               |
| `BaseMultiSelect.vue`  | `MultiSelect` + `FloatLabel` | Menú desplegable de selección múltiple que muestra los elementos seleccionados como fichas.                                                                       |
| `BaseSearchSelect.vue` | `Dropdown` con `filter`      | Menú desplegable de selección única con cuadro de búsqueda integrado, desplazamiento virtual opcional y plantilla de opción de dos líneas (`label` + `sublabel`). |
| `BaseAutocomplete.vue` | `AutoComplete`               | Autocompletado asíncrono (mínimo de 3 caracteres). Admite selección única o múltiple y un slot `chip` para personalizar las fichas.                               |
| `BaseUserFinder.vue`   | `BaseTable` + `userService`  | Tabla de búsqueda de usuarios paginada con selección de filas. Úselo cuando una funcionalidad requiera un selector de usuarios estilo administrador.              |

### Botones y acciones

| Componente                       | Envuelve            | Propósito                                                                                                                                                                                                                                                                                                                                                                                         |
| -------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseButton.vue`                 | `Button` (PrimeVue) | Botón estándar de Chamilo. Resuelve iconos a través de `chamiloIconToClass`, normaliza `type` a `severity`/`variant` de PrimeVue, renderiza un `BaseAppLink` interno cuando se proporciona un `route` o `toUrl` (por lo que el mismo componente maneja casos de router-link, anchor y botón simple). Los valores aceptados para `type` están listados en `validators.js` → `buttonTypeValidator`. |
| `BaseAdvancedSettingsButton.vue` | `BaseButton`        | Botón de divulgación que alterna un panel de "configuraciones avanzadas" mediante `v-model`.                                                                                                                                                                                                                                                                                                      |
| `BaseToolbar.vue`                | `Toolbar`           | Barra de herramientas de acción con slots `start` / `end` (o un slot predeterminado único). Opcional `showTopBorder` para estilo de separador.                                                                                                                                                                                                                                                    |

***

### Visualización y datos

| Componente           | Envuelve                    | Propósito                                                                                                                                                                                                                    |
| -------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseTable.vue`      | `DataTable` (PrimeVue)      | Tabla de datos estándar de Chamilo. Soporta modo de servidor (`lazy`), ordenación por múltiples columnas, filtro global, selección de filas y paginación. Pasa las columnas como hijos `<Column>` (registrados globalmente). |
| `BaseCard.vue`       | `Card`                      | Envoltura de tarjeta que reenvía los slots `header`, `title`, `subtitle`, `footer` y el slot predeterminado (contenido).                                                                                                     |
| `BaseChart.vue`      | `Chart`                     | Preajuste de gráfico circular. Pasa un objeto `data` compatible con Chart.js.                                                                                                                                                |
| `BaseChip.vue`       | `Chip`                      | Chip renderizado a partir de un objeto `{value, labelField, imageField}`, con botón de eliminación opcional.                                                                                                                 |
| `BaseTag.vue`        | `Tag`                       | Etiqueta de color. Mapea el `warning` de Chamilo al `warn` de PrimeVue.                                                                                                                                                      |
| `BaseAvatarList.vue` | `Avatar` + `BaseUserAvatar` | Fila de avatares con contador de desbordamiento (por ejemplo, "+3"); impulsado por `useAvatarList`.                                                                                                                          |
| `BaseUserAvatar.vue` | `Avatar`                    | Avatar de usuario con imagen de respaldo, estado de carga y etiqueta accesible.                                                                                                                                              |
| `BaseIcon.vue`       | `<i class="mdi …">`         | Renderizador de iconos de Chamilo. Añade una insignia opcional (texto o icono), tooltip y modificador de tamaño. Siempre pasa un nombre semántico de Chamilo (por ejemplo, `"edit"`), no una clase MDI directa.              |
| `BaseIconField.vue`  | `IconField` + `InputText`   | Campo de búsqueda con un icono de lupa al inicio.                                                                                                                                                                            |
| `BaseDivider.vue`    | `Divider`                   | Divisor horizontal o vertical, con título y alineación opcionales.                                                                                                                                                           |

### Navegación y menús

| Componente                 | Envuelve               | Propósito                                                                                                                                                                                                                           |
| -------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseMenu.vue`             | `Menu` (popup)         | Menú emergente que entiende rutas de enrutador dentro de los elementos `model[]`.                                                                                                                                                   |
| `BaseDropdownMenu.vue`     | (personalizado)        | Desencadenador de menú desplegable ligero con coordinación de apertura única (abrir uno cierra los demás).                                                                                                                          |
| `BaseContextMenu.vue`      | (personalizado)        | Menú contextual de clic derecho / posicionado, controlado por `visible` + `position`.                                                                                                                                               |
| `BaseSidebarPanelMenu.vue` | `PanelMenu`            | Menú de navegación estilo acordeón utilizado en barras laterales; rastrea automáticamente las claves expandidas desde el modelo.                                                                                                    |
| `BaseRouteTabs.vue`        | Fila de `BaseAppLink`  | Barra de pestañas donde cada pestaña es un enlace de enrutador. La pestaña activa se resalta automáticamente según la ruta actual.                                                                                                  |
| `BaseAppLink.vue`          | `RouterLink` *o* `<a>` | Enlace inteligente: renderiza un `<a>` cuando se establece `url` (externo/legado), de lo contrario un `<RouterLink>` de Vue Router. Úsalo en lugar de cualquiera de los primitivos para que el enlace interno/externo sea uniforme. |

***

### Diálogos

`BaseDialog` es la base; los otros se construyen sobre él para los flujos comunes de confirmación/cancelación y eliminación.

| Componente                    | Envuelve                  | Propósito                                                                                                                                                    |
| ----------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `BaseDialog.vue`              | `Dialog`                  | Diálogo modal con un encabezado titulado (opcional `headerIcon`) y cuerpo/pie de página insertados. El estado abierto es un `defineModel("isVisible")`.      |
| `BaseDialogConfirmCancel.vue` | `BaseDialog`              | Modal de confirmación/cancelación con dos botones. Tipo de confirmación configurable (`type`, severidad) e `icon`; emite `confirmClicked` / `cancelClicked`. |
| `BaseDialogDelete.vue`        | `BaseDialogConfirmCancel` | Modal predefinido "¿Está seguro de que desea eliminar este elemento?" con un botón de confirmación estilizado como peligro.                                  |

### Editor y contenido enriquecido

| Componente           | Envuelve                                               | Propósito                                                                                                                                                                                              |
| -------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `BaseTinyEditor.vue` | TinyMCE (a través de `components/Editor` del proyecto) | Editor de texto enriquecido con `FloatLabel`, seguimiento de estado de enfoque/vacío e integración con el contexto del curso actual (`cidReq`). Úselo para cualquier campo HTML creado por el usuario. |

### Ayudantes

| Archivo           | Propósito                                                                                                                                                                                                                                                                                           |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ChamiloIcons.js` | Mapea nombres de íconos semánticos (`edit`, `delete`, `eye-on`, `courses`, …) a clases CSS de MDI. Aproximadamente 127 entradas. Navegue por ellos en `/admin/list-icons` en una instancia en ejecución.                                                                                            |
| `validators.js`   | Validadores de propiedades compartidos: `iconValidator` (debe ser un nombre de ícono conocido de Chamilo), `sizeValidator` (`normal` / `small` / `large`), `buttonTypeValidator` (tipos permitidos de `BaseButton`). Impórtelos al definir nuevos componentes `Base*` que sigan estas convenciones. |

### Convenciones en los componentes Base

* **v-model mediante `defineModel()`** — el valor (y frecuentemente `isVisible`, `filters`, `selectedItems`) se exponen como modelos; páselos con `v-model[:name]` en lugar de `:prop` + `@update:prop`.
* **Etiquetas flotantes** — la mayoría de los campos de formulario envuelven su entrada en PrimeVue `FloatLabel variant="on"`. Proporcione `label` (el texto mostrado) e `id` (usado para vincular el `<label for>`).
* **Mensajes de validación** — los campos exponen `isInvalid` y un pequeño mensaje debajo de la entrada (`errorText`, `messageText` o `smallText` dependiendo del componente). Existen variantes compatibles con Vuelidate para los más comunes.
* **Íconos** — pase nombres semánticos de Chamilo, no clases MDI sin procesar. Los componentes los resuelven a través de `chamiloIconToClass`.
* **Tamaño** — `size="normal" | "small" | "large"` es la propiedad de tamaño convencional (ver `sizeValidator`).
* **Composición sobre duplicación** — `BaseDialogDelete` envuelve a `BaseDialogConfirmCancel`, que a su vez envuelve a `BaseDialog`; `BaseToggleButton` y `BaseAdvancedSettingsButton` envuelven a `BaseButton`. Cuando necesite una variante recurrente de un componente existente, prefiera componer un nuevo `Base*` encima en lugar de reimplementarlo en una carpeta de características.

## Componentes de Diseño

Ubicados en `components/layout/`:

| Componente            | Propósito                                                            |
| --------------------- | -------------------------------------------------------------------- |
| `DashboardLayout.vue` | Diseño principal: barra superior + barra lateral + área de contenido |
| `Sidebar.vue`         | Panel de navegación izquierdo (colapsable)                           |
| `TopbarLoggedIn.vue`  | Barra superior con logotipo, bandeja de entrada, avatar              |

## Componentes de Áreas de Funcionalidad

| Directorio     | Componentes                                                  | Propósito                         |
| -------------- | ------------------------------------------------------------ | --------------------------------- |
| `course/`      | Tarjetas de curso, filtros de catálogo, formularios de curso | Listado y gestión de cursos       |
| `session/`     | Tarjetas de sesión, catálogo                                 | Listado de sesiones               |
| `assignments/` | Listas de entregas, modales de calificación, formularios     | Flujo de trabajo de tareas        |
| `chat/`        | DockedChat, mensajes de chat                                 | Chat en tiempo real y tutor de IA |
| `filemanager/` | CourseDocuments, PersonalFiles                               | Navegador y gestión de archivos   |
| `installer/`   | Step1-Step7, EmailSettings                                   | Asistente de instalación          |
| `social/`      | GroupInfoCard, publicaciones sociales                        | Funcionalidades de red social     |
| `attendance/`  | AttendanceTable                                              | Seguimiento de asistencia         |
| `usergroup/`   | GroupMembers                                                 | Gestión de grupos de usuarios     |

## Sistema de Iconos

Los iconos utilizan **Material Design Icons (MDI)** como la única biblioteca de iconos: `<i class="mdi mdi-pencil"></i>`

El archivo `ChamiloIcons.js` proporciona un mapeo semántico:

```javascript
export const chamiloIconToClass = {
  "edit": "mdi mdi-pencil",
  "delete": "mdi mdi-delete",
  "eye-on": "mdi mdi-eye",
  "courses": "mdi mdi-book-open-page-variant",
  // ... 127 mappings
}
```

Los componentes utilizan `BaseIcon` o hacen referencia a `chamiloIconToClass` para renderizar iconos de manera consistente.

Una referencia navegable de todos los iconos disponibles en la plataforma se puede encontrar en `/admin/list-icons` en cualquier instancia de Chamilo en ejecución.

## Patrones de Componentes

* **Composition API** — Los componentes utilizan la sintaxis `<script setup>` de Vue 3
* **Integración con PrimeVue** — Uso intensivo de componentes de PrimeVue (Button, DataTable, Dialog, Menu, etc.)
* **Axios para llamadas a la API** — Solicitudes HTTP a la API del backend
* **Vue I18n** — Todo el texto visible para el usuario utiliza claves de traducción


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chamilo.org/2.x-es/guia-para-desarrolladores/developer-guide/frontend/vue-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.