Components
Transfer
Two ledgers and a crossing: items sit in the source column until the reader checks them and walks them across — and back, the same way. `modelValue` is the target column's value list; everything else in `data` stays on the left. `searchable` adds a filter line to each panel.
#Basic usage
In the study4
On exhibition1
<script setup lang="ts">
import { Transfer, type TransferItem } from "@bysages/vue";
import { ref } from "vue";
const data: TransferItem[] = [
{ label: "The brush inventory", value: "brush" },
{ label: "Stone seals, catalogued", value: "seals" },
{ label: "Xuan paper samples", value: "xuan", disabled: true },
{ label: "Silk mounting orders", value: "silk" },
{ label: "Ink grind records", value: "ink" },
];
const picked = ref(["ink"]);
</script>
<template>
<Transfer v-model="picked" :data="data" :titles="['In the study', 'On exhibition']" searchable />
</template>
#Props
#Transfer
Two ledgers and a crossing: items sit in the source column until the
reader checks them and walks them across — and back, the same way.
modelValue is the target column's value list; everything else in
data stays on the left. searchable adds a filter line to each
panel.
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Array as PropType<string[]> | () => [] | — |
data | Array as PropType<TransferItem[]> | — | |
titles | Array as PropType<string[]> | () => ["Source", "Target"] | — |
searchable | Boolean | false | — |
disabled | Boolean | false | — |