Vitral 0.2
Dados

OrderList

Uma lista que o leitor põe em ordem, com botões, pelo teclado ou arrastando e soltando.

Testado com WAI-ARIA

Importação

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

Básico

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

Lido de packages/vue/src/components/OrderList/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.
headerstringO título da lista; ele dá nome à lista. Sem ele, nomeie-a com `aria-label`.
dragdropbooleanPermite arrastar itens para um novo lugar. O padrão é true.
showControlsbooleanMostra os botões de mover. O padrão é true.
scrollHeightstringA altura da lista.
disabledboolean—

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

Emits

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

Slots

NomeProps do slotDescrição
option(props: { item: unknown; index: number; selected: boolean })O conteúdo de um item.
header—Substitui o título.