Перенос

Список из двух панелей с перемещением отмеченных элементов; разбиение данных и логика перемещения выполнены в слое core неизменяемым образом. Обе панели — role="listbox" (паттерн listbox из APG).

Базовое использование

Базовое использование

Список 11 / 3

• Первый

Список 22 / 3

• Второй
• Третий

<script setup>
import { ref } from 'vue'
const source = ref(['a'])
const items = [
  { key: 'a', label: 'Первый' },
  { key: 'b', label: 'Второй' },
  { key: 'c', label: 'Третий', disabled: true },
]
</script>

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

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: 'Первый' },
        { key: 'b', label: 'Второй' },
        { key: 'c', label: 'Третий', disabled: true },
      ],
    }
  },
}
</script>

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

Отключение

disabled отключает весь перенос.

Отключённый перенос

Список 11 / 3

• Первый

Список 22 / 3

• Второй
• Третий

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

const source = ref(['a'])
const items = [
  { key: 'a', label: 'Первый' },
  { key: 'b', label: 'Второй' },
  { key: 'c', label: 'Третий', disabled: true },
]
</script>

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

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: 'Первый' },
        { key: 'b', label: 'Второй' },
        { key: 'c', label: 'Третий', disabled: true },
      ],
    }
  },
}
</script>

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

API

LhTransfer Props

Свойство	Описание	Тип	Значение по умолчанию
data	полный массив данных	[LhTransferItem](#type-LhTransferItem)[]	—
modelValue	список ключей левой (исходной) панели (управляемый v-model)	(string | number)[]	() => []
disabled	отключено	boolean	false
sx	свойства быстрой раскладки sx	LhSxProps	—

Events

Событие	Описание	Колбэк
update:modelValue	вызывается при изменении списка ключей правой (целевой) панели, использовать совместно с v-model	(keys: Array<string | number>)
change	вызывается после завершения перемещения элементов	(keys: Array<string | number>, direction: 'left-to-right' | 'right-to-left')

LhTransferItem

Поле	Описание	Тип
key	уникальный ключ	string | number
label	отображаемый текст	string
disabled	отключено (нельзя переместить)	boolean

Доступность

• Обе панели — role="listbox" + aria-multiselectable; элементы — role="option" + aria-selected / aria-disabled
• Кнопки перемещения — настоящие <button> с названиями (переместить влево / переместить вправо); выбор всех — нативный checkbox с настоящим состоянием indeterminate
• У каждой панели собственное поле поиска с aria-label; отключённые элементы блокируются на всех уровнях (отметка, выбор всех, перемещение)

Определения типов

Ниже приведены структуры типов TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/transfer/src/types.ts и исходников @lh-ui/share/core/*; раскройте каждый пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhTransferProps

export interface LhTransferProps {
  /** полный массив данных */
  data: LhTransferItem[]
  /** список ключей левой (исходной) панели (управляемый v-model) */
  modelValue?: Array<string | number>
  /** отключено */
  disabled?: boolean
  /** sx: свойства быстрой раскладки */
  sx?: LhSxProps
}

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

/** сторона панели */
export type LhTransferSide = 'left' | 'right'

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

/** элемент данных переноса */
export interface LhTransferItem {
  /** уникальный ключ */
  key: string | number
  /** отображаемый текст */
  label: string
  /** отключено (нельзя переместить) */
  disabled?: boolean
}