Vitral 0.2
Formulário

TreeSelect

Um select sobre uma árvore, com o mesmo filtro e a mesma seleção por checkbox da Tree.

Testado com WAI-ARIA

Importação

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

Básico

Value: null
<script setup lang="ts">import { Label, StackPanel, TreeSelect, type TreeNode } from '@vitral/vue';import { ref } from 'vue'; const files: TreeNode[] = [    {        key: 'docs',        label: 'Documents',        icon: 'folder',        children: [            { key: 'work', label: 'Work', icon: 'folder', children: [{ key: 'report', label: 'Relatório.pdf', icon: 'file' }, { key: 'budget', label: 'Budget.xlsx', icon: 'file' }] },            { key: 'home', label: 'Home', icon: 'folder', children: [{ key: 'recipes', label: 'Recipes.txt', icon: 'file' }] }        ]    },    { key: 'pics', label: 'Pictures', icon: 'folder', children: [{ key: 'trip', label: 'Trip to Évora.jpg', icon: 'file' }, { key: 'cat', label: 'Cat.png', icon: 'file' }] },    { key: 'notes', label: 'Notes.md', icon: 'file' }]; const single = ref<Record<string, boolean> | null>(null);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="ts-single">File</Label>        <TreeSelect id="ts-single" v-model="single" :options="files" placeholder="Select a file" show-clear />        <small style="color: var(--vt-text-muted-color)">Value: {{ JSON.stringify(single) }}</small>    </StackPanel></template>

Checkboxes e chips

<script setup lang="ts">import { Label, StackPanel, TreeSelect, type TreeNode } from '@vitral/vue';import { ref } from 'vue'; const files: TreeNode[] = [    {        key: 'docs',        label: 'Documents',        icon: 'folder',        children: [            { key: 'work', label: 'Work', icon: 'folder', children: [{ key: 'report', label: 'Relatório.pdf', icon: 'file' }, { key: 'budget', label: 'Budget.xlsx', icon: 'file' }] },            { key: 'home', label: 'Home', icon: 'folder', children: [{ key: 'recipes', label: 'Recipes.txt', icon: 'file' }] }        ]    },    { key: 'pics', label: 'Pictures', icon: 'folder', children: [{ key: 'trip', label: 'Trip to Évora.jpg', icon: 'file' }, { key: 'cat', label: 'Cat.png', icon: 'file' }] },    { key: 'notes', label: 'Notes.md', icon: 'file' }]; const checked = ref<Record<string, { checked: boolean; partialChecked: boolean }> | null>({ trip: { checked: true, partialChecked: false } });</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 22rem">        <Label for="ts-check">Files</Label>        <TreeSelect id="ts-check" v-model="checked" :options="files" selection-mode="checkbox" display="chip" :max-selected-labels="4" fluid placeholder="Select files" />    </StackPanel></template>

Filtro e múltipla

<script setup lang="ts">import { Label, StackPanel, TreeSelect, type TreeNode } from '@vitral/vue';import { ref } from 'vue'; const files: TreeNode[] = [    {        key: 'docs',        label: 'Documents',        icon: 'folder',        children: [            { key: 'work', label: 'Work', icon: 'folder', children: [{ key: 'report', label: 'Relatório.pdf', icon: 'file' }, { key: 'budget', label: 'Budget.xlsx', icon: 'file' }] },            { key: 'home', label: 'Home', icon: 'folder', children: [{ key: 'recipes', label: 'Recipes.txt', icon: 'file' }] }        ]    },    { key: 'pics', label: 'Pictures', icon: 'folder', children: [{ key: 'trip', label: 'Trip to Évora.jpg', icon: 'file' }, { key: 'cat', label: 'Cat.png', icon: 'file' }] },    { key: 'notes', label: 'Notes.md', icon: 'file' }]; const many = ref(null);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="ts-filter">Files</Label>        <TreeSelect id="ts-filter" v-model="many" :options="files" selection-mode="multiple" filter placeholder="Search files" />    </StackPanel></template>

Tamanhos e estados

<script setup lang="ts">import { TreeSelect, type TreeNode } from '@vitral/vue'; const files: TreeNode[] = [    {        key: 'docs',        label: 'Documents',        icon: 'folder',        children: [            { key: 'work', label: 'Work', icon: 'folder', children: [{ key: 'report', label: 'Relatório.pdf', icon: 'file' }, { key: 'budget', label: 'Budget.xlsx', icon: 'file' }] },            { key: 'home', label: 'Home', icon: 'folder', children: [{ key: 'recipes', label: 'Recipes.txt', icon: 'file' }] }        ]    },    { key: 'pics', label: 'Pictures', icon: 'folder', children: [{ key: 'trip', label: 'Trip to Évora.jpg', icon: 'file' }, { key: 'cat', label: 'Cat.png', icon: 'file' }] },    { key: 'notes', label: 'Notes.md', icon: 'file' }];</script> <template>    <TreeSelect :options="files" placeholder="Small" size="small" aria-label="Small" />    <TreeSelect :options="files" placeholder="Filled" variant="filled" aria-label="Filled" />    <TreeSelect :options="files" placeholder="Invalid" invalid aria-label="Invalid" />    <TreeSelect :options="files" placeholder="Disabled" disabled aria-label="Disabled" /></template>

API

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

Props

NomeTipoDescrição
optionsTreeNodeLike[]A árvore de onde escolher.
selectionMode'single' | 'multiple' | 'checkbox'`'single'` (o padrão) fecha ao escolher; `'multiple'` e `'checkbox'` ficam abertos.
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.
filterbooleanAdiciona uma caixa de busca acima da árvore.
filterBystring | string[]Campos do nó a buscar, como lista ou separados por vírgula. O padrão é `label`.
filterPlaceholderstring—
emptyMessagestring—
showClearboolean—
loadingboolean—
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
changevalue: TreeSelectValue—
node-selectnode: TreeNodeLike—
node-unselectnode: TreeNodeLike—
node-expandnode: TreeNodeLike—
node-collapsenode: TreeNodeLike—
filterquery: string—
show——
hide——
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
value(props: { value: TreeNodeLike[]; placeholder?: string })O conteúdo do campo.
option(props: { node: TreeNodeLike; expanded: boolean; selected: boolean; checked: boolean })O conteúdo de um nó na árvore.
header——
footer——
empty——
dropdownicon(props: { open: boolean })—