--- name: component-usage-educacross description: Use reusable components from Educacross Front Office component library (ESelect, ListTable, MediaCard, ProgressBar, etc.). Use when user mentions "ESelect", "ListTable", "select", "table", "tabela", "componente reutilizável", "card", "progress bar", "gráfico", or any component name from src/components/. --- # Component Usage Guide - Educacross Front Office Comprehensive guide for using all reusable components in `src/components/`. ## Quick Reference | Component | Path | Use When | |-----------|------|----------| | **ESelect** | `@/components/selects/ESelect.vue` | ANY dropdown/select (NEVER use v-select) | | **ListTable** | `@/components/table/ListTable.vue` | Server-side paginated tables | | **ListTableLocalSorting** | `@/components/table/ListTableLocalSorting.vue` | Client-side tables (<1000 records) | | **MediaCard** | `@/components/cards/MediaCard.vue` | Content cards with image/icon | | **ProgressBarHorizontal** | `@/components/progress/ProgressBarHorizontal.vue` | Horizontal progress bars | | **BarChart** | `@/components/charts/BarChart.vue` | Bar charts with ApexCharts | --- ## ⚠️ CRITICAL RULES ### 1. ALWAYS Use ESelect **NEVER use:** - `v-select` (deprecated) - `` - Use `` directly (use ListTable) - Fetch all data for client-side tables with >1000 records - Create custom select components - Copy-paste table markup (use components) ✅ **DO:** - Always use `ESelect` for dropdowns - Choose correct table component (server vs client pagination) - Use slots for custom column rendering - Integrate with `useFilters()` when needed - Follow component prop patterns

component-usage-educacross

Install this skill

Comments