Transfert

Listes double colonne + sélection par cases à cocher. Le partitionnement des données et la logique de déplacement sont implémentés de manière immuable dans la couche core. Les deux colonnes sont des role="listbox" (pattern listbox des APG).

Utilisation de base

Utilisation de base

Liste 11 / 3

• A

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

Désactivé

disabled désactive l'ensemble du composant de transfert.

Transfert désactivé

Liste 11 / 3

• A

Liste 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	Description	Type	Valeur par défaut
data	Données complètes	[LhTransferItem](#type-LhTransferItem)[]	—
modelValue	Liste des clés de gauche (source), contrôlée par v-model	(string | number)[]	() => []
disabled	Désactivé	boolean	false
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
update:modelValue	Émis lorsque la liste des clés de droite (cible) change, à utiliser avec v-model	(keys: Array<string | number>)
change	Émis après un déplacement de données	(keys: Array<string | number>, direction: 'left-to-right' | 'right-to-left')

LhTransferItem

Champ	Description	Type
key	Clé unique	string | number
label	Texte affiché	string
disabled	Désactivé (non déplaçable)	boolean

Accessibilité

• Les deux colonnes sont des role="listbox" + aria-multiselectable, les éléments des role="option" + aria-selected / aria-disabled
• Les boutons de déplacement sont de vrais <button> nommés (Déplacer vers la gauche / Déplacer vers la droite) ; la case « tout sélectionner » est une checkbox native dont l'état intermédiaire est un véritable indeterminate
• Chaque côté dispose de sa propre barre de recherche avec aria-label ; les éléments désactivés sont bloqués sur toute la chaîne (sélection, sélection globale, déplacement)

Définitions de types

Les structures de types TypeScript exportées par ce composant sont les suivantes (extraites automatiquement de packages/components/transfer/src/types.ts et de @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; les descriptions des props se trouvent dans le tableau Props ci-dessus) :

LhTransferProps

export interface LhTransferProps {
  /** Données complètes */
  data: LhTransferItem[]
  /** Liste des clés de gauche (source), contrôlée par v-model */
  modelValue?: Array<string | number>
  /** Désactivé */
  disabled?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

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

/** Côté du panneau */
export type LhTransferSide = 'left' | 'right'

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

/** Élément de données du transfert */
export interface LhTransferItem {
  /** Clé unique */
  key: string | number
  /** Texte affiché */
  label: string
  /** Désactivé (non déplaçable) */
  disabled?: boolean
}