Transfer 트랜스퍼

두 개의 목록 열과 체크 후 이동 기능을 제공하며, 데이터 분할과 이동 로직은 core 레이어에서 불변 방식으로 처리됩니다. 양쪽 열 모두 role="listbox"입니다 (APG listbox 패턴).

기본 사용법

기본 사용법

목록 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
}