Campo de seleção

AlpopSelectField usa um <select> nativo (sem jQuery/select2).

O controle fechado replica o visual "moderno" dos projetos da Alpop (mesma altura, borda, raio e anel de foco). Já o menu aberto e a seleção múltipla são renderizados pelo navegador/sistema operacional, então não reproduzem a aparência do select2 usado nas telas legadas: é o custo intencional de não depender de jQuery/select2.

Perfil

Selecione…VisitanteOperadorAdministrador

Valor: —

alpop-select-field(
  name="user[role]",
  label="Perfil",
  v-model="role",
  :options="options",
  :include-blank="true"
)

Seleção múltipla

Com multiple, o campo usa um <select multiple> nativo e o v-model passa a ser um Array com os ids selecionados.

Perfis

VisitanteOperadorAdministrador

Valor: —

alpop-select-field(
  name="user[roles]",
  label="Perfis",
  v-model="roles",
  :options="options",
  :multiple="true"
)

Opções carregadas pela aplicação

Para consumir dados da API, passe um fetchOptions. A função é chamada no mounted do componente e deve resolver para a mesma estrutura [{ id, text }]. Assim o componente continua desacoplado do cliente HTTP de cada aplicação.

Atendente

Selecione…

alpop-select-field(
  name="contract[attendant_id]",
  label="Atendente",
  v-model="attendant",
  :fetch-options="loadAttendants",
  :include-blank="true"
)

Props

Prop	Tipo	Padrão	Descrição
name	String	—	Nome do campo (obrigatório)
label	String	null	Rótulo
options	Array	[]	Lista [{ id, text }]
fetchOptions	Function	null	Função async que retorna [{ id, text }]
modelValue	String|Number|Boolean|Array	""	Valor (v-model); Array quando multiple
includeBlank	Boolean	false	Inclui uma opção vazia
multiple	Boolean	false	Seleção múltipla nativa; emite um Array
blankText	String	"Selecione…"	Texto da opção vazia
loadingText	String	"Carregando…"	Texto exibido enquanto fetchOptions resolve
placeholder	String	null	Texto da opção em branco; quando definido, tem precedência sobre blankText
icon	String	null	Ícone opcional à esquerda

Eventos

Evento	Payload	Quando
update:modelValue	String|Number|Boolean|Array	Ao alterar a seleção (usado por v-model)
input	String|Number|Boolean|Array	Junto com update:modelValue; disponível para quem não usa v-model
error	Error	Quando fetchOptions rejeita

O payload é um Array quando multiple está ativo, e o valor da opção selecionada caso contrário.