Vitral 0.2
Formulário

MultiSelect

Um select para várias escolhas, mostradas como lista, contagem ou chips, com um filtro opcional.

Testado com WAI-ARIA

Importação

main.ts
import { MultiSelect } from '@vitral/vue';

Básico

Value: SP
<script setup lang="ts">import { Label, MultiSelect, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const cities = [    { name: 'São Paulo', code: 'SP' },    { name: 'Rio de Janeiro', code: 'RJ' },    { name: 'Belo Horizonte', code: 'BH' },    { name: 'Brasília', code: 'BSB' },    { name: 'Curitiba', code: 'CWB' },    { name: 'Florianópolis', code: 'FLN', disabled: true },    { name: 'Porto Alegre', code: 'POA' },    { name: 'Recife', code: 'REC' },    { name: 'Salvador', code: 'SSA' }]; const selected = ref<string[]>(['SP']);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="ms-basic">Cities</Label>        <MultiSelect id="ms-basic" v-model="selected" :options="cities" option-label="name" option-value="code" option-disabled="disabled" placeholder="Select cities" :max-selected-labels="3" show-clear />        <small style="color: var(--vt-text-muted-color)">Value: {{ selected.join(', ') || '[]' }}</small>    </StackPanel></template>

Chips e filtro

<script setup lang="ts">import { Label, MultiSelect, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const cities = [    { name: 'São Paulo', code: 'SP' },    { name: 'Rio de Janeiro', code: 'RJ' },    { name: 'Belo Horizonte', code: 'BH' },    { name: 'Brasília', code: 'BSB' },    { name: 'Curitiba', code: 'CWB' },    { name: 'Porto Alegre', code: 'POA' },    { name: 'Recife', code: 'REC' },    { name: 'Salvador', code: 'SSA' }]; const selected = ref<string[]>(['RJ', 'CWB']);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 22rem">        <Label for="ms-chips">Cities</Label>        <MultiSelect id="ms-chips" v-model="selected" :options="cities" option-label="name" option-value="code" display="chip" filter fluid placeholder="Select cities" />    </StackPanel></template>

Grupos e um limite de seleção

<script setup lang="ts">import { Label, MultiSelect, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const groups = [    { label: 'Brazil', items: [{ name: 'São Paulo' }, { name: 'Recife' }] },    { label: 'Portugal', items: [{ name: 'Lisboa' }, { name: 'Porto' }] },    { label: 'Angola', items: [{ name: 'Luanda' }] }]; const cities = [    { name: 'São Paulo', code: 'SP' },    { name: 'Rio de Janeiro', code: 'RJ' },    { name: 'Brasília', code: 'BSB' },    { name: 'Curitiba', code: 'CWB' },    { name: 'Recife', code: 'REC' }]; const grouped = ref<unknown[]>([]);const limited = ref<string[]>([]);</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="ms-grouped">Cities by country</Label>            <MultiSelect id="ms-grouped" v-model="grouped" :options="groups" option-group-label="label" option-label="name" placeholder="Pick cities" />        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="ms-limit">Up to two cities</Label>            <MultiSelect id="ms-limit" v-model="limited" :options="cities" option-label="name" option-value="code" :selection-limit="2" placeholder="Pick two" />        </StackPanel>    </StackPanel></template>

Tamanhos e estados

<script setup lang="ts">import { MultiSelect } from '@vitral/vue'; const cities = [{ name: 'São Paulo' }, { name: 'Rio de Janeiro' }, { name: 'Brasília' }, { name: 'Curitiba' }, { name: 'Recife' }];</script> <template>    <MultiSelect :options="cities" option-label="name" placeholder="Small" size="small" aria-label="Small" />    <MultiSelect :options="cities" option-label="name" placeholder="Filled" variant="filled" aria-label="Filled" />    <MultiSelect :options="cities" option-label="name" placeholder="Invalid" invalid aria-label="Invalid" />    <MultiSelect :options="cities" option-label="name" placeholder="Loading" loading aria-label="Loading" />    <MultiSelect :options="cities" option-label="name" placeholder="Disabled" disabled aria-label="Disabled" /></template>

API

Lido de packages/vue/src/components/MultiSelect/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
optionsany[]—
optionLabelstringCampo (caminho com pontos) com o texto de uma opção. Sem ele, as opções são mostradas como estão.
optionValuestringCampo com o valor que o v-model reúne. Sem ele, a opção inteira é o valor.
optionDisabledstring—
optionGroupLabelstringTransforma `options` em grupos: este campo é o rótulo de cada grupo…
optionGroupChildrenstring…e este, as suas opções. O padrão é `items`.
dataKeystringCompara valores de objeto por este campo em vez de pela estrutura.
placeholderstring—
display'comma' | 'chip'Como a escolha é mostrada: uma lista separada por vírgulas (o padrão) ou chips.
maxSelectedLabelsnumberAcima desse número, o campo diz quantos foram escolhidos em vez de nomeá-los.
selectedItemsLabelstringO que ele diz nesse caso. `{count}`; o padrão é a mensagem de seleção do locale.
selectionLimitnumberNo máximo esse número pode ser escolhido.
showToggleAllbooleanMostra a caixa de selecionar tudo no cabeçalho. O padrão é true.
filterbooleanAdiciona uma caixa de busca ao painel.
filterPlaceholderstring—
filterFieldsstring[]Campos a buscar em vez do rótulo.
filterMatchModestringQualquer modo de comparação registrado; por padrão, `contains` sem distinguir acentos nem maiúsculas.
resetFilterOnHidebooleanEsvazia a caixa de busca quando o painel fecha.
showClearboolean—
loadingboolean—
emptyMessagestring—
emptyFilterMessagestring—
disabledboolean—
invalidboolean—
sizeSize—
variantInputVariant—
fluidboolean—
placementOverlayPlacement—
appendTostring`'body'` (o padrão), `'self'` para renderizar no lugar, ou um seletor.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
changeevent: MultiSelectChangeEvent—
selectall-changeevent: { originalEvent: Event; checked: boolean }—
show——
hide——
filterquery: string—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
value(props: { value: unknown[]; options: unknown[]; placeholder?: string })O conteúdo do campo.
option(props: { option: unknown; index: number; selected: boolean; focused: boolean })—
optiongroup(props: { group: unknown })—
header——
footer——
empty——
dropdownicon(props: { open: boolean })—

Usado nestes templates