Vitral 0.2
Dados

PickList

Duas listas e os movimentos entre elas, com botões, pelo teclado ou com clique duplo, e reordenação dentro de cada uma.

Testado com WAI-ARIA

Importação

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

Básico

Available skills
  • Design
  • Research
  • Writing
  • Analytics
  • Support
Your skills
  • Engineering
Your skills: Engineering
<script setup lang="ts">import { PickList } from '@vitral/vue';import { ref } from 'vue'; interface Skill {    name: string;    icon: string;} const lists = ref<[Skill[], Skill[]]>([    [        { name: 'Design', icon: 'pencil' },        { name: 'Research', icon: 'search' },        { name: 'Writing', icon: 'file' },        { name: 'Analytics', icon: 'sliders' },        { name: 'Support', icon: 'bell' }    ],    [{ name: 'Engineering', icon: 'grip' }]]);</script> <template>    <PickList v-model="lists" option-label="name" data-key="name" source-header="Available skills" target-header="Your skills" scroll-height="14rem">        <template #option="{ item }">            <span style="display: inline-flex; align-items: center; gap: 0.5rem">{{ (item as Skill).name }}</span>        </template>    </PickList>    <small style="color: var(--vt-text-muted-color)">Your skills: {{ lists[1].map((s) => s.name).join(', ') || 'none' }}</small></template>

API

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

Props

NomeTipoDescrição
optionLabelstringCampo (caminho com pontos) com o texto de um item, para o template padrão e os anúncios.
dataKeystringUm campo que identifica um item.
sourceHeaderstringDá nome à primeira lista. O padrão é o "Available" do locale.
targetHeaderstringDá nome à segunda lista. O padrão é o "Selected" do locale.
showSourceControlsbooleanMostra os botões de mover ao lado da primeira lista. O padrão é true.
showTargetControlsbooleanMostra os botões de mover ao lado da segunda lista. O padrão é true.
scrollHeightstringA altura das listas.
disabledboolean—

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

Emits

EventoPayloadDescrição
move-to-targetevent: { items: unknown[] }—
move-all-to-targetevent: { items: unknown[] }—
move-to-sourceevent: { items: unknown[] }—
move-all-to-sourceevent: { items: unknown[] }—
reorderevent: { list: 'source' | 'target'; value: unknown[] }—

Slots

NomeProps do slotDescrição
option(props: { item: unknown; index: number; selected: boolean; list: 'source' | 'target' })O conteúdo de um item, em qualquer das listas.
sourceheader——
targetheader——