Transfer トランスファー

2 列のリストとチェックボックスによる移動を組み合わせたコンポーネントです。データの振り分けと移動のロジックは core 層でイミュータブルに処理されます。両列とも role="listbox" です（APG listbox パターン）。

基本的な使い方

vue

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

vue

<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 でトランスファー全体を無効化します。

vue

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

vue

<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

プロパティ	説明	型	デフォルト値
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
}

Transfer トランスファー ​

基本的な使い方 ​

無効化 ​

API ​

LhTransfer Props ​

Events ​

LhTransferItem ​

アクセシビリティ ​

型定義 ​