Component Usage Educacross

⚠️ CRITICAL RULES

1. ALWAYS Use ESelect

NEVER use:

• v-select (deprecated)
• <select> native HTML
• <b-form-select> Bootstrap Vue

ALWAYS use:

<ESelect
  v-model="selected"
  :options="options"
  label="name"
/>

2. Choose Correct Table Component

Selects

ESelect

Primary select component — supports single/multiple selection, search, pagination, and modal for selected options.

Basic Usage

<template>
  <ESelect
    v-model="selected"
    :options="options"
    label="name"
    placeholder="selectAnOption"
    clearable
  />
</template>

<script>
import ESelect from '@/components/selects/ESelect.vue'

export default {
  components: { ESelect },
  data() {
    return {
      selected: null,
      options: [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
      ],
    }
  },
}
</script>

Multi-Select with Modal

<ESelect
  v-model="selectedItems"
  :options="items"
  label="name"
  :multiple="true"
  :table-columns="tableColumns"
  table-title="Selected Items"
  prefix="items"
  gender="M"
/>

Props:

{
  value: null,              // Selected value(s)
  options: [],              // REQUIRED - Array of options
  label: 'name',            // Property to display
  trackBy: undefined,       // Unique identifier property
  loading: false,           // Show spinner
  variant: 'primary',       // Bootstrap variant
  state: null,              // Validation state (false = invalid)
  multiple: false,          // Enable multi-select
  closeOnSelect: true,      // Close after selection (single mode)
  clearable: false,         // Show clear button
  searchable: false,        // Enable search input
  placeholder: 'selectAnOption', // i18n key
  paginated: false,         // Enable infinite scroll pagination
  page: 1,                  // Current page
  totalPages: 1,            // Total pages available
  disabled: false,          // Disable select
  prefix: '',               // i18n prefix for count text
  gender: 'F',              // Gender for i18n plurals ('M'/'F')
  tableColumns: [],         // Columns for modal table
  tableTitle: '',           // Modal title
  searchPlaceholder: '',    // Search placeholder i18n key
  usePortalOnModal: false,  // Use Portal for modal isolation
  skipInitialRequest: false // Skip first API request
}

Events:

@input="onInput"           // Value changed
@change="onChange"         // Dropdown closed with changes
@nextPage="onNextPage"     // Scroll reached end (paginated mode)
@close="onClose"           // Dropdown closed
@clear="onClear"           // All options cleared
@closeModal="onCloseModal" // Modal closed

Slots:

<!-- Custom selected option display -->
<template #selected-option="{ option }">
  <strong>{{ option.name }}</strong>
</template>

<!-- Custom option display -->
<template #option="{ option }">
  <div class="d-flex align-items-center">
    <feather-icon :icon="option.icon" class="mr-1" />
    {{ option.name }}
  </div>
</template>

<!-- Custom selected count badge -->
<template #selectedOptionsCountLabel="{ selectedLength }">
  {{ selectedLength }} selecionados
</template>

Paginated Select

<ESelect
  v-model="selected"
  :options="options"
  :paginated="true"
  :page="currentPage"
  :total-pages="totalPages"
  label="name"
  searchable
  @nextPage="loadNextPage"
/>