Vitral 0.2
Data

OrderList

A list the reader puts in order, with buttons, the keyboard or drag and drop.

WAI-ARIA tested

Import

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

Basic

Trip order
  • São PauloBrazil
  • LisboaPortugal
  • LuandaAngola
  • MaputoMozambique
  • PraiaCabo Verde
  • DiliTimor-Leste
Order: São Paulo → Lisboa → Luanda → Maputo → Praia → Dili
<script setup lang="ts">import { OrderList } from '@vitral/vue';import { ref } from 'vue'; const cities = ref([    { name: 'São Paulo', country: 'Brazil' },    { name: 'Lisboa', country: 'Portugal' },    { name: 'Luanda', country: 'Angola' },    { name: 'Maputo', country: 'Mozambique' },    { name: 'Praia', country: 'Cabo Verde' },    { name: 'Dili', country: 'Timor-Leste' }]);const selection = ref([]);</script> <template>    <OrderList v-model="cities" v-model:selection="selection" option-label="name" data-key="name" header="Trip order" scroll-height="16rem" style="max-width: 28rem">        <template #option="{ item }">            <div style="display: flex; justify-content: space-between; width: 100%">                <span>{{ (item as { name: string }).name }}</span>                <small style="color: var(--vt-text-muted-color)">{{ (item as { country: string }).country }}</small>            </div>        </template>    </OrderList>    <small style="color: var(--vt-text-muted-color)">Order: {{ cities.map((c) => c.name).join(' → ') }}</small></template>

API

Read from packages/vue/src/components/OrderList/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.
headerstringThe list's title; it names the list. Without one, name it with `aria-label`.
dragdropbooleanLet items be dragged to a new place. Defaults to true.
showControlsbooleanShow the move buttons. Defaults to true.
scrollHeightstringThe list's height.
disabledboolean—

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

Emits

EventPayloadDescription
reorderevent: { originalEvent?: Event; value: unknown[]; direction: 'up' | 'down' | 'top' | 'bottom' | 'drop' }—

Slots

NameSlot propsDescription
option(props: { item: unknown; index: number; selected: boolean })An item's content.
header—Replaces the title.