Components
Order List
A ledger the reader may rewrite: rows move by grip or by the side arrows, and the group reports the new order as the value itself — the model is the order. Dragging rides the native drag events — a hairline of primary ink marks the seam the row will land on — so touch keeps the buttons as its route.
#Basic usage
- Prelude
- Fugue
- Interlude
- Coda
<script setup lang="ts">
import { OrderList } from "@bysages/vue";
import { ref } from "vue";
const options = [
{ label: "Prelude", value: "prelude" },
{ label: "Fugue", value: "fugue" },
{ label: "Interlude", value: "interlude" },
{ label: "Coda", value: "coda" },
];
const value = ref(options.map((option) => option.value));
</script>
<template>
<div class="flex w-80 flex-col gap-3">
<OrderList v-model="value" :options="options" label="Movements" />
<output class="text-xs text-tertiary">{{ value.join(" → ") }}</output>
</div>
</template>
#Props
#OrderList
A ledger the reader may rewrite: rows move by grip or by the side arrows, and the group reports the new order as the value itself — the model is the order. Dragging rides the native drag events — a hairline of primary ink marks the seam the row will land on — so touch keeps the buttons as its route.
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Array as PropType<string[]> | The rows in their current order — the value is the order. | |
options | Array as PropType<OrderOption[]> | Every row the ledger knows, in no particular order. | |
label | String | undefined | — |