Vitral 0.2
Formulário

CascadeSelect

Um select para opções aninhadas, uma coluna por nível, que abre cada grupo ao lado do anterior.

Testado com WAI-ARIA

Importação

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

Básico

Value: null
<script setup lang="ts">import { CascadeSelect, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const countries = [    {        name: 'Brazil',        states: [            { name: 'São Paulo', cities: [{ cname: 'São Paulo', code: 'SAO' }, { cname: 'Campinas', code: 'CPQ' }, { cname: 'Santos', code: 'SSZ' }] },            { name: 'Bahia', cities: [{ cname: 'Salvador', code: 'SSA' }, { cname: 'Porto Seguro', code: 'BPS' }] },            { name: 'Pernambuco', cities: [{ cname: 'Recife', code: 'REC' }, { cname: 'Olinda', code: 'OLI', disabled: true }] }        ]    },    {        name: 'Portugal',        states: [            { name: 'Lisboa', cities: [{ cname: 'Lisboa', code: 'LIS' }, { cname: 'Sintra', code: 'SNT' }] },            { name: 'Porto', cities: [{ cname: 'Porto', code: 'OPO' }, { cname: 'Matosinhos', code: 'MAT' }] }        ]    },    { name: 'Angola', states: [{ name: 'Luanda', cities: [{ cname: 'Luanda', code: 'LAD' }] }] }]; const city = ref<string | null>(null);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="cs-city">City</Label>        <CascadeSelect            id="cs-city"            v-model="city"            :options="countries"            option-label="cname"            option-value="code"            option-disabled="disabled"            option-group-label="name"            :option-group-children="['states', 'cities']"            placeholder="Select a city"            show-clear        />        <small style="color: var(--vt-text-muted-color)">Value: {{ city ?? 'null' }}</small>    </StackPanel></template>

Profundidade irregular

<script setup lang="ts">import { CascadeSelect, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const menu = [    { label: 'Coffee', items: [{ label: 'Espresso' }, { label: 'Filter' }] },    { label: 'Tea', items: [{ label: 'Green', items: [{ label: 'Sencha' }, { label: 'Matcha' }] }, { label: 'Black' }] },    { label: 'Water' }]; const drink = ref<unknown>(null);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="cs-drink">Drink</Label>        <CascadeSelect id="cs-drink" v-model="drink" :options="menu" option-label="label" option-group-label="label" placeholder="Pick a drink" />    </StackPanel></template>

Tamanhos e estados

<script setup lang="ts">import { CascadeSelect } from '@vitral/vue'; const menu = [    { label: 'Coffee', items: [{ label: 'Espresso' }, { label: 'Filter' }] },    { label: 'Tea', items: [{ label: 'Green', items: [{ label: 'Sencha' }, { label: 'Matcha' }] }, { label: 'Black' }] },    { label: 'Water' }];</script> <template>    <CascadeSelect :options="menu" option-label="label" option-group-label="label" placeholder="Small" size="small" aria-label="Small" />    <CascadeSelect :options="menu" option-label="label" option-group-label="label" placeholder="Filled" variant="filled" aria-label="Filled" />    <CascadeSelect :options="menu" option-label="label" option-group-label="label" placeholder="Invalid" invalid aria-label="Invalid" />    <CascadeSelect :options="menu" option-label="label" option-group-label="label" placeholder="Disabled" disabled aria-label="Disabled" /></template>

API

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

Props

NomeTipoDescrição
optionsany[]O nível superior; os grupos guardam o próximo nível num dos campos de `optionGroupChildren`.
optionLabelstringCampo (caminho com pontos) com o texto de uma opção escolhível.
optionValuestringCampo com o valor que o v-model recebe. Sem ele, a opção inteira é o valor.
optionDisabledstring—
optionGroupLabelstringCampo com o texto de um grupo.
optionGroupChildrenstring | string[]O campo, ou os campos, um por nível, com os filhos de um grupo. O padrão é `items`.
dataKeystringCompara valores de objeto por este campo em vez de pela estrutura.
placeholderstring—
showClearboolean—
loadingboolean—
emptyMessagestring—
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: { originalEvent?: Event; value: unknown }—
group-changeevent: { originalEvent?: Event; value: unknown }—
show——
hide——
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
value(props: { value: unknown; option: unknown; placeholder?: string })—
option(props: { option: unknown; level: number; group: boolean; selected: boolean; focused: boolean })—
empty——
dropdownicon(props: { open: boolean })—
optiongroupicon——