Transfer

Two-panel list with checked moving; partitioning and moves are immutable pure core functions. Both panels are role="listbox" (APG listbox pattern).

Basic usage

Basic

List 11 / 3

• A

List 22 / 3

• B
• C

<script setup>
import { ref } from 'vue'
const source = ref(['a'])
const items = [
  { key: 'a', label: 'A' },
  { key: 'b', label: 'B' },
  { key: 'c', label: 'C', disabled: true },
]
</script>

<template>
  <LhTransfer :data="items" v-model="source" />
</template>

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: 'A' },
        { key: 'b', label: 'B' },
        { key: 'c', label: 'C', disabled: true },
      ],
    }
  },
}
</script>

<template>
  <LhTransfer :data="items" v-model="source" />
</template>

Disabled

disabled disables the whole transfer.

Disabled transfer

List 11 / 3

• A

List 22 / 3

• B
• C

<script setup lang="ts">
import { ref } from 'vue'

const source = ref(['a'])
const items = [
  { key: 'a', label: 'A' },
  { key: 'b', label: 'B' },
  { key: 'c', label: 'C', disabled: true },
]
</script>

<template>
  <LhTransfer :data="items" v-model="source" disabled />
</template>

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: 'A' },
        { key: 'b', label: 'B' },
        { key: 'c', label: 'C', disabled: true },
      ],
    }
  },
}
</script>

<template>
  <LhTransfer :data="items" v-model="source" disabled />
</template>

API

LhTransfer Props

Attribute	Description	Type	Default
data	Full data source	[LhTransferItem](#type-LhTransferItem)[]	—
modelValue	Source (left) key list	(string | number)[]	() => []
disabled	Disabled	boolean	false
sx	Quick layout props	LhSxProps	—

LhTransfer Events

Event	Description	Callback
update:modelValue	Emitted when the target (right) key list changes (use with v-model)	(keys: Array<string | number>) => void
change	Emitted after items are moved	(keys: Array<string | number>, direction: 'left-to-right' | 'right-to-left') => void

LhTransferItem

Field	Description	Type
key	Unique key	string | number
label	Display text	string
disabled	Disabled (cannot move)	boolean

Accessibility

• Both panels are role="listbox" + aria-multiselectable; items are role="option" with aria-selected / aria-disabled
• Move buttons are named real <button>s; check-all is a native checkbox with a real indeterminate state
• Each panel has its own labelled search box; disabled items are blocked at every layer

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/transfer/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhTransferProps

export interface LhTransferProps {
  data: LhTransferItem[]
  modelValue?: Array<string | number>
  disabled?: boolean
  sx?: LhSxProps
}

LhTransferSide _{(from @lh-ui/share/core/transfer)}

export type LhTransferSide = 'left' | 'right'

LhTransferItem _{(from @lh-ui/share/core/transfer)}

export interface LhTransferItem {
  key: string | number
  label: string
  disabled?: boolean
}