Transferencia

Listado de dos paneles + selección y movimiento; la partición de datos y la lógica de movimiento se resuelven en la capa core de forma inmutable. Ambos paneles son role="listbox" (patrón listbox de la APG).

Uso básico

Uso básico

Lista 11 / 3

• A

Lista 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>

Deshabilitado

disabled deshabilita todo el componente de transferencia.

Transferencia deshabilitada

Lista 11 / 3

• A

Lista 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

Prop	Descripción	Tipo	Predeterminado
data	Datos completos	[LhTransferItem](#type-LhTransferItem)[]	—
modelValue	Lista de claves del lado izquierdo (origen, v-model controlado)	(string | number)[]	() => []
disabled	Deshabilitado	boolean	false
sx	Propiedades de diseño rápido sx	LhSxProps	—

Events

Evento	Descripción	Parámetros
update:modelValue	Se dispara cuando cambia la lista de claves del lado derecho (destino), para usarse con v-model	(keys: Array<string | number>)
change	Se dispara tras completarse el movimiento de datos	(keys: Array<string | number>, direction: 'left-to-right' | 'right-to-left')

LhTransferItem

Campo	Descripción	Tipo
key	Clave única	string | number
label	Texto mostrado	string
disabled	Deshabilitado (no se puede mover)	boolean

Accesibilidad

• Ambos paneles son role="listbox" + aria-multiselectable; los elementos son role="option" + aria-selected / aria-disabled
• Los botones de movimiento son <button> reales con nombre (mover a la izquierda / mover a la derecha); el selector total es un checkbox nativo (el estado intermedio usa el indeterminate real)
• Cada lado dispone de su propio campo de búsqueda con aria-label; los elementos deshabilitados se interceptan en toda la cadena (selección, selección total, movimiento)

Definiciones de tipos

Este componente exporta las siguientes estructuras de tipos TypeScript (extraídas automáticamente de los fuentes packages/components/transfer/src/types.ts y @lh-ui/share/core/*; abre cada entrada para ver la definición completa; consulta la tabla de Props de arriba para la descripción de los atributos):

LhTransferProps

export interface LhTransferProps {
  /** Datos completos */
  data: LhTransferItem[]
  /** Lista de claves del lado izquierdo (origen, v-model controlado) */
  modelValue?: Array<string | number>
  /** Deshabilitado */
  disabled?: boolean
  /** Propiedades de diseño rápido sx */
  sx?: LhSxProps
}

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

/** Lado del panel */
export type LhTransferSide = 'left' | 'right'

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

/** Elemento de datos de la transferencia */
export interface LhTransferItem {
  /** Clave única */
  key: string | number
  /** Texto mostrado */
  label: string
  /** Deshabilitado (no se puede mover) */
  disabled?: boolean
}