> For the complete documentation index, see [llms.txt](https://docs.chamilo.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chamilo.org/3.x/el/odigos-programmatisti/developer-guide/frontend/vue-components.md).

# Στοιχεία Vue

Το Chamilo διαθέτει ένα μεγάλο σύνολο στοιχείων Vue οργανωμένων ανά περιοχή λειτουργίας στο `assets/vue/components/`.

## Βασικά στοιχεία

Η οικογένεια `Base*` στο `assets/vue/components/basecomponents/` περιβάλλει τα πρωτόγονα στοιχεία του PrimeVue με προεπιλογές ειδικές για το Chamilo (διάταξη FloatLabel, εικονίδια MDI μέσω `chamiloIconToClass`, συνεπή μηνύματα επικύρωσης, μεγέθη Tailwind). Να προτιμάτε πάντα ένα στοιχείο `Base*` πριν εισαγάγετε το υποκείμενο στοιχείο του PrimeVue — έτσι παραμένει συνεπές το περιβάλλον χρήστη σε όλο το SPA και έτσι μπορούν να εφαρμοστούν αλλαγές σχεδίασης από ένα μόνο σημείο.

Τα στοιχεία **δεν** καταχωρούνται καθολικά (το μόνο καθολικά καταχωρημένο πρωτόγονο στοιχείο του PrimeVue είναι το `Column`, που χρησιμοποιείται μέσα στο `BaseTable`). Εισαγάγετε το καθένα ρητά:

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

### Πεδία φόρμας

Τα περισσότερα δέχονται την τιμή μέσω `v-model`, εκθέτουν props `id` + `label` για προσβασιμότητα/σύνδεση floating-label και εμφανίζουν την επικύρωση μέσω ζεύγους `isInvalid` / `errorText` (ή `messageText`).

| Component                        | Wraps                                                | Purpose                                                                                                                                                                                                                                       |
| -------------------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseInputText.vue`              | `InputText` + `FloatLabel`                           | Πεδίο κειμένου μίας γραμμής. Μεταβαίνει σε στατική ετικέτα για εισόδους `date`/`time`/`datetime-local` (όπου η floating label θα επικάλυπτε το εγγενές placeholder).                                                                          |
| `BaseInputTextWithVuelidate.vue` | `BaseInputText`                                      | Λεπτός προσαρμογέας Vuelidate: προωθεί το `$error` στο `isInvalid` και αποδίδει το `$errors[].$message` στο slot `errors`. Συνδυάστε το με αντικείμενο πεδίου Vuelidate.                                                                      |
| `BaseTextArea.vue`               | `Textarea` + `FloatLabel`                            | Πεδίο κειμένου πολλαπλών γραμμών.                                                                                                                                                                                                             |
| `BaseTextAreaWithVuelidate.vue`  | `BaseTextArea`                                       | Ίδιο μοτίβο προσαρμογέα Vuelidate με το `BaseInputTextWithVuelidate`.                                                                                                                                                                         |
| `BaseInputNumber.vue`            | `InputNumber`                                        | Αριθμητικό πεδίο με `min` / `max` / `step` και κουμπιά spinner.                                                                                                                                                                               |
| `BaseInputTags.vue`              | (custom)                                             | Ετικέτες ελεύθερου κειμένου (chips)· οι ετικέτες προστίθενται με enter/κόμμα και αφαιρούνται με backspace.                                                                                                                                    |
| `BaseInputGroup.vue`             | `InputGroup` + `BaseButton`                          | Πεδίο κειμένου σε ζεύγος με κουμπί ενέργειας (στυλ αναζήτησης).                                                                                                                                                                               |
| `BaseCheckbox.vue`               | `Checkbox`                                           | Δυαδικό ή δεσμευμένο σε τιμή checkbox με ετικέτα.                                                                                                                                                                                             |
| `BaseRadioButtons.vue`           | `RadioButton`                                        | Ομάδα κουμπιών επιλογής που καθοδηγείται από πίνακα `options: [{label, value}]`.                                                                                                                                                              |
| `BaseToggleButton.vue`           | `BaseButton`                                         | Κουμπί δύο καταστάσεων (ετικέτες και εικονίδια on / off) δεσμευμένο μέσω `v-model`.                                                                                                                                                           |
| `BaseCalendar.vue`               | `DatePicker` + `FloatLabel`                          | Επιλογέας ημερομηνίας / ημερομηνίας-ώρας. Τιμά το `platform.timepicker_increment` και τη γλώσσα του χρήστη μέσω `calendarLocales`.                                                                                                            |
| `BaseColorPicker.vue`            | native `<input type="color">` + `InputText`          | Επιλογέας χρώματος με εναλλακτικό πεδίο hex· χρησιμοποιεί το `colorjs.io` για επικύρωση χειροκίνητης εισόδου hex.                                                                                                                             |
| `BaseRating.vue`                 | `Rating`                                             | Πεδίο αξιολόγησης με αστέρια.                                                                                                                                                                                                                 |
| `BaseFileUpload.vue`             | native `<input type="file">` + `BaseButton`          | Επιλογέας ενός αρχείου που ενεργοποιεί κουμπί τύπου συνημμένου.                                                                                                                                                                               |
| `BaseFileUploadMultiple.vue`     | native `<input type="file" multiple>` + `BaseButton` | Παραλλαγή πολλαπλών αρχείων του `BaseFileUpload`.                                                                                                                                                                                             |
| `BaseUploader.vue`               | Uppy `Dashboard`                                     | Πλήρης μεταφορτωτής Uppy (webcam, ήχος, επεξεργαστής εικόνας, μεταφόρτωση XHR) με locales συνδεδεμένα στο τρέχον `appLocale`. Χρησιμοποιήστε το για πλούσιες μεταφορτώσεις με πρόοδο· χρησιμοποιήστε τα `BaseFileUpload*` για απλά συνημμένα. |

### Επιλογή & αυτόματη συμπλήρωση

| Component              | Wraps                        | Purpose                                                                                                                                                     |
| ---------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseSelect.vue`       | `Dropdown` + `FloatLabel`    | Αναπτυσσόμενη λίστα μονής επιλογής με προαιρετικό κουμπί εκκαθάρισης.                                                                                       |
| `BaseMultiSelect.vue`  | `MultiSelect` + `FloatLabel` | Αναπτυσσόμενη λίστα πολλαπλής επιλογής που εμφανίζει τα επιλεγμένα στοιχεία ως chips.                                                                       |
| `BaseSearchSelect.vue` | `Dropdown` with `filter`     | Αναπτυσσόμενη λίστα μονής επιλογής με ενσωματωμένο πλαίσιο αναζήτησης, προαιρετική εικονική κύλιση και πρότυπο επιλογής δύο γραμμών (`label` + `sublabel`). |
| `BaseAutocomplete.vue` | `AutoComplete`               | Ασύγχρονη αυτόματη συμπλήρωση (ελάχιστο 3 χαρακτήρες). Υποστηρίζει μονή ή πολλαπλή επιλογή και ένα slot `chip` για προσαρμογή των chips.                    |
| `BaseUserFinder.vue`   | `BaseTable` + `userService`  | Πίνακας αναζήτησης χρηστών με σελιδοποίηση και επιλογή γραμμής. Χρησιμοποιήστε το όταν μια λειτουργία χρειάζεται επιλογέα χρηστών σε στυλ διαχειριστή.      |

### Κουμπιά & ενέργειες

| Component                        | Wraps               | Purpose                                                                                                                                                                                                                                                                                                                                                                                         |
| -------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseButton.vue`                 | `Button` (PrimeVue) | Τυπικό κουμπί του Chamilo. Επιλύει τα εικονίδια μέσω του `chamiloIconToClass`, κανονικοποιεί το `type` σε `severity`/`variant` του PrimeVue, αποδίδει εσωτερικά ένα `BaseAppLink` όταν δίνεται `route` ή `toUrl` (ώστε το ίδιο component να χειρίζεται περιπτώσεις router-link, anchor και απλού κουμπιού). Οι αποδεκτές τιμές `type` παρατίθενται στο `validators.js` → `buttonTypeValidator`. |
| `BaseAdvancedSettingsButton.vue` | `BaseButton`        | Κουμπί αποκάλυψης που εναλλάσσει ένα slotted πάνελ «προηγμένων ρυθμίσεων» μέσω `v-model`.                                                                                                                                                                                                                                                                                                       |
| `BaseToolbar.vue`                | `Toolbar`           | Γραμμή εργαλείων ενεργειών με slots `start` / `end` (ή ένα μοναδικό προεπιλεγμένο slot). Προαιρετικό `showTopBorder` για στυλ διαχωριστή.                                                                                                                                                                                                                                                       |

### Εμφάνιση & δεδομένα

| Component            | Wraps                       | Purpose                                                                                                                                                                                                                              |
| -------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `BaseTable.vue`      | `DataTable` (PrimeVue)      | Τυπικός πίνακας δεδομένων του Chamilo. Υποστηρίζει λειτουργία διακομιστή (`lazy`), ταξινόμηση πολλαπλών στηλών, καθολικό φίλτρο, επιλογή γραμμών και σελιδοποίηση. Περάστε τις στήλες ως παιδιά `<Column>` (καταχωρισμένα καθολικά). |
| `BaseCard.vue`       | `Card`                      | Περιτύλιγμα κάρτας που προωθεί τις υποδοχές `header`, `title`, `subtitle`, `footer` και την προεπιλεγμένη (περιεχομένου).                                                                                                            |
| `BaseChart.vue`      | `Chart`                     | Προκαθορισμένο γράφημα πίτας. Περάστε ένα αντικείμενο `data` συμβατό με Chart.js.                                                                                                                                                    |
| `BaseChip.vue`       | `Chip`                      | Chip που αποδίδεται από αντικείμενο `{value, labelField, imageField}`, με προαιρετικό κουμπί αφαίρεσης.                                                                                                                              |
| `BaseTag.vue`        | `Tag`                       | Έγχρωμη ετικέτα. Αντιστοιχίζει το `warning` του Chamilo στο `warn` του PrimeVue.                                                                                                                                                     |
| `BaseAvatarList.vue` | `Avatar` + `BaseUserAvatar` | Σειρά avatar με μετρητή υπερχείλισης (π.χ. "+3")· καθοδηγείται από το `useAvatarList`.                                                                                                                                               |
| `BaseUserAvatar.vue` | `Avatar`                    | Avatar χρήστη με εναλλακτική εικόνα, κατάσταση φόρτωσης και προσβάσιμη ετικέτα.                                                                                                                                                      |
| `BaseIcon.vue`       | `<i class="mdi …">`         | Απόδοση εικονιδίων Chamilo. Προσθέτει προαιρετικό σήμα (κείμενο ή εικονίδιο), tooltip και τροποποιητή μεγέθους. Πάντα να περνάτε σημασιολογικό όνομα Chamilo (π.χ. `"edit"`), όχι ακατέργαστη κλάση MDI.                             |
| `BaseIconField.vue`  | `IconField` + `InputText`   | Πεδίο αναζήτησης με εικονίδιο μεγεθυντικού φακού στα αριστερά.                                                                                                                                                                       |
| `BaseDivider.vue`    | `Divider`                   | Οριζόντιος ή κατακόρυφος διαχωριστής, με προαιρετικό τίτλο και στοίχιση.                                                                                                                                                             |

### Πλοήγηση & μενού

| Component                  | Wraps                   | Purpose                                                                                                                                                                                                                                              |
| -------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseMenu.vue`             | `Menu` (popup)          | Αναδυόμενο μενού που κατανοεί διαδρομές δρομολογητή μέσα στα στοιχεία `model[]`.                                                                                                                                                                     |
| `BaseDropdownMenu.vue`     | (custom)                | Ελαφρύ έναυσμα αναπτυσσόμενου μενού με συντονισμό μοναδικού ανοίγματος (το άνοιγμα ενός κλείνει τα υπόλοιπα).                                                                                                                                        |
| `BaseContextMenu.vue`      | (custom)                | Μενού περιβάλλοντος με δεξί κλικ / τοποθέτηση, ελεγχόμενο από τα `visible` + `position`.                                                                                                                                                             |
| `BaseSidebarPanelMenu.vue` | `PanelMenu`             | Μενού πλοήγησης τύπου ακορντεόν που χρησιμοποιείται στις πλευρικές γραμμές· παρακολουθεί αυτόματα τα διευρυμένα κλειδιά από το μοντέλο.                                                                                                              |
| `BaseRouteTabs.vue`        | `BaseAppLink` row       | Γραμμή καρτελών όπου κάθε καρτέλα είναι σύνδεσμος δρομολογητή. Η ενεργή καρτέλα επισημαίνεται αυτόματα με βάση την τρέχουσα διαδρομή.                                                                                                                |
| `BaseAppLink.vue`          | `RouterLink` *or* `<a>` | Έξυπνος σύνδεσμος: αποδίδει `<a>` όταν έχει οριστεί `url` (εξωτερικός/παλαιού τύπου), διαφορετικά Vue Router `<RouterLink>`. Χρησιμοποιήστε το αντί για οποιοδήποτε από τα δύο πρωτόγονα ώστε η εσωτερική/εξωτερική σύνδεση να παραμένει ομοιόμορφη. |

### Διάλογοι

Το `BaseDialog` αποτελεί τη βάση· τα υπόλοιπα συντίθενται πάνω σε αυτό για τις κοινές ροές επιβεβαίωσης/ακύρωσης και διαγραφής.

| Component                     | Wraps                     | Purpose                                                                                                                                                          |
| ----------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BaseDialog.vue`              | `Dialog`                  | Παραθυρικός διάλογος με τιτλοφορημένη κεφαλίδα (προαιρετικό `headerIcon`) και slotted σώμα/υποσέλιδο. Η κατάσταση ανοίγματος είναι `defineModel("isVisible")`.   |
| `BaseDialogConfirmCancel.vue` | `BaseDialog`              | Παραθυρικός διάλογος επιβεβαίωσης/ακύρωσης με δύο κουμπιά. Ρυθμιζόμενο `type` επιβεβαίωσης (σοβαρότητα) και `icon`· εκπέμπει `confirmClicked` / `cancelClicked`. |
| `BaseDialogDelete.vue`        | `BaseDialogConfirmCancel` | Προκατασκευασμένος διάλογος «Είστε βέβαιοι ότι θέλετε να διαγράψετε αυτό το στοιχείο;» με κουμπί επιβεβαίωσης σε στυλ κινδύνου.                                  |

### Επεξεργαστής και πλούσιο περιεχόμενο

| Component            | Wraps                                           | Purpose                                                                                                                                                                                                                        |
| -------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `BaseTinyEditor.vue` | TinyMCE (via the project's `components/Editor`) | Επεξεργαστής εμπλουτισμένου κειμένου με `FloatLabel`, παρακολούθηση κατάστασης εστίασης/κενού και ενσωμάτωση με το τρέχον πλαίσιο μαθήματος (`cidReq`). Χρησιμοποιήστε τον για οποιοδήποτε πεδίο HTML που συντάσσει ο χρήστης. |

### Βοηθητικά

| File              | Purpose                                                                                                                                                                                                                                                                                                |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `ChamiloIcons.js` | Αντιστοιχίζει σημασιολογικά ονόματα εικονιδίων (`edit`, `delete`, `eye-on`, `courses`, …) σε κλάσεις CSS του MDI. \~127 καταχωρίσεις. Περιηγηθείτε σε αυτές στο `/admin/list-icons` σε μια εκτελούμενη εγκατάσταση.                                                                                    |
| `validators.js`   | Κοινόχρηστοι επικυρωτές props: `iconValidator` (πρέπει να είναι γνωστό όνομα εικονιδίου Chamilo), `sizeValidator` (`normal` / `small` / `large`), `buttonTypeValidator` (επιτρεπόμενοι τύποι `BaseButton`). Εισαγάγετέ τους κατά τον ορισμό νέων στοιχείων `Base*` που ακολουθούν αυτές τις συμβάσεις. |

### Συμβάσεις στα στοιχεία Base

* **v-model μέσω `defineModel()`** — η τιμή (και συχνά τα `isVisible`, `filters`, `selectedItems`) εκτίθενται ως μοντέλα· περάστε τα με `v-model[:name]` αντί για `:prop` + `@update:prop`.
* **Αιωρούμενες ετικέτες** — τα περισσότερα πεδία φόρμας τυλίγουν την είσοδό τους σε PrimeVue `FloatLabel variant="on"`. Παρέχετε `label` (το εμφανιζόμενο κείμενο) και `id` (χρησιμοποιείται για τη σύνδεση του `<label for>`).
* **Μηνύματα επικύρωσης** — τα πεδία εκθέτουν `isInvalid` και ένα μικρό μήνυμα κάτω από την είσοδο (`errorText`, `messageText` ή `smallText` ανάλογα με το στοιχείο). Υπάρχουν παραλλαγές με επίγνωση Vuelidate για τα πιο συνηθισμένα.
* **Εικονίδια** — περάστε σημασιολογικά ονόματα Chamilo, όχι ακατέργαστες κλάσεις MDI. Τα στοιχεία τα επιλύουν μέσω `chamiloIconToClass`.
* **Μεγέθυνση** — το `size="normal" | "small" | "large"` είναι το συμβατικό prop μεγέθους (βλ. `sizeValidator`).
* **Σύνθεση αντί επανάληψης** — το `BaseDialogDelete` τυλίγει το `BaseDialogConfirmCancel`, το οποίο τυλίγει το `BaseDialog`· τα `BaseToggleButton` και `BaseAdvancedSettingsButton` τυλίγουν το `BaseButton`. Όταν χρειάζεστε μια επαναλαμβανόμενη παραλλαγή ενός υπάρχοντος στοιχείου, προτιμήστε να συνθέσετε ένα νέο `Base*` από πάνω αντί να το υλοποιήσετε εκ νέου σε φάκελο λειτουργίας.

## Στοιχεία διάταξης

Βρίσκονται στο `components/layout/`:

| Component             | Purpose                                                              |
| --------------------- | -------------------------------------------------------------------- |
| `DashboardLayout.vue` | Κύρια διάταξη: επάνω γραμμή + πλευρική γραμμή + περιοχή περιεχομένου |
| `Sidebar.vue`         | Αριστερό πάνελ πλοήγησης (συμπτυσσόμενο)                             |
| `TopbarLoggedIn.vue`  | Επάνω γραμμή με λογότυπο, εισερχόμενα, άβαταρ                        |

## Στοιχεία Περιοχής Λειτουργιών

| Directory      | Components                                           | Purpose                                    |
| -------------- | ---------------------------------------------------- | ------------------------------------------ |
| `course/`      | Κάρτες μαθημάτων, φίλτρα καταλόγου, φόρμες μαθημάτων | Κατάλογος και διαχείριση μαθημάτων         |
| `session/`     | Κάρτες συνεδριών, κατάλογος                          | Κατάλογος συνεδριών                        |
| `assignments/` | Λίστες υποβολών, παράθυρα βαθμολόγησης, φόρμες       | Ροή εργασίας εργασιών                      |
| `chat/`        | DockedChat, μηνύματα συνομιλίας                      | Συνομιλία σε πραγματικό χρόνο και AI tutor |
| `filemanager/` | CourseDocuments, PersonalFiles                       | Περιηγητής αρχείων και διαχείριση          |
| `installer/`   | Step1-Step7, EmailSettings                           | Οδηγός εγκατάστασης                        |
| `social/`      | GroupInfoCard, κοινωνικές αναρτήσεις                 | Λειτουργίες κοινωνικού δικτύου             |
| `attendance/`  | AttendanceTable                                      | Παρακολούθηση παρουσιών                    |
| `usergroup/`   | GroupMembers                                         | Διαχείριση ομάδων χρηστών                  |

## Σύστημα Εικονιδίων

Τα εικονίδια χρησιμοποιούν αποκλειστικά τη βιβλιοθήκη **Material Design Icons (MDI)**: `<i class="mdi mdi-pencil"></i>`

Το αρχείο `ChamiloIcons.js` παρέχει μια σημασιολογική αντιστοίχιση:

```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
}
```

Τα στοιχεία χρησιμοποιούν το `BaseIcon` ή αναφέρονται στο `chamiloIconToClass` για συνεπή απόδοση εικονιδίων.

Μια περιηγήσιμη αναφορά όλων των διαθέσιμων εικονιδίων στην πλατφόρμα βρίσκεται στη διεύθυνση `/admin/list-icons` σε οποιαδήποτε εκτελούμενη εγκατάσταση Chamilo.

## Μοτίβα Στοιχείων

* **Composition API** — Τα στοιχεία χρησιμοποιούν τη σύνταξη `<script setup>` του Vue 3
* **Ενσωμάτωση PrimeVue** — Εκτεταμένη χρήση στοιχείων PrimeVue (Button, DataTable, Dialog, Menu κ.λπ.)
* **Axios για κλήσεις API** — Αιτήματα HTTP προς το backend API
* **Vue I18n** — Όλο το κείμενο προς τον χρήστη χρησιμοποιεί κλειδιά μετάφρασης