Vitral 0.2
Data

PickList

Two lists and the moves between them, with buttons, the keyboard or a double click, and reordering within each.

WAI-ARIA tested

Import

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

Basic

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

Read from packages/vue/src/components/PickList/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
optionLabelstringField (dotted path) holding an item's text, for the default template and the announcements.
dataKeystringA field that identifies an item.
sourceHeaderstringNames the first list. Defaults to the locale's "Available".
targetHeaderstringNames the second list. Defaults to the locale's "Selected".
showSourceControlsbooleanShow the move buttons beside the first list. Defaults to true.
showTargetControlsbooleanShow the move buttons beside the second list. Defaults to true.
scrollHeightstringThe lists' height.
disabledboolean—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
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

NameSlot propsDescription
option(props: { item: unknown; index: number; selected: boolean; list: 'source' | 'target' })An item's content, in either list.
sourceheader——
targetheader——