TreeSelect ツリーセレクト

ドロップダウントリガーと Tree パネルを組み合わせたコンポーネントです。単一選択は string を返し、複数選択（チェックボックス）は string[] を返します。

基本的な使い方

単一選択

<script setup>
import { ref } from 'vue'
const treeValue = ref(undefined)
const treeData = [
  { key: 'a', label: 'フロントエンド', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: 'バックエンド' },
]
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

<script>
export default {
  data() {
    return {
      treeValue: undefined,
      treeData: [
        { key: 'a', label: 'フロントエンド', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'バックエンド' },
      ],
    }
  },
}
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

複数選択

複数選択

<script setup>
import { ref } from 'vue'
const treeMulti = ref([])
</script>

<template>
  <!-- 複数選択 -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="技術スタックを選択してください" />
</template>

<script>
export default {
  data() {
    return {
      treeMulti: [],
      treeData: [
        { key: 'a', label: 'フロントエンド', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'バックエンド' },
      ],
    }
  },
}
</script>

<template>
  <!-- 複数選択 -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="技術スタックを選択してください" />
</template>

無効化とマウント

disabled でセレクターを無効化します；teleported を false にするとドロップダウンパネルがその場にマウントされます（body にテレポートしない）。

無効化 / インラインパネル

<script setup>
import { ref } from 'vue'
const treeDisabled = ref([])
const treeLocal = ref([])
</script>

<template>
  <!-- 無効化 -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- インラインパネル -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

<script>
export default {
  data() {
    return {
      treeDisabled: [],
      treeLocal: [],
      treeData: [
        { key: 'a', label: 'フロントエンド', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'バックエンド' },
      ],
    }
  },
}
</script>

<template>
  <!-- 無効化 -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- インラインパネル -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

API

LhTreeSelect Props

プロパティ	説明	型	デフォルト値
data	ツリーデータ	[LhTreeNode](#type-LhTreeNode)[]	—
modelValue	現在の値（単一選択は string / 複数選択は string[]。v-model で制御）	string | string[]	—
multiple	複数選択（チェックボックスを表示し、値は選択されたキーの配列）	boolean	false
disabled	無効化	boolean	false
placeholder	プレースホルダーテキスト	string	—
teleported	パネルを body にマウントするかどうか（デフォルト true）	boolean	true
sx	sx クイックレイアウトプロパティ	LhSxProps	—

Events

イベント名	説明	コールバック引数
update:modelValue	選択値が変化した時に発火。v-model と組み合わせて使用（単一選択は string、複数選択は string[]）	(value: string | string[] | undefined)
change	選択の変化後に発火	(value: string | string[] | undefined)

アクセシビリティ

• トリガーは本物の <button> で、aria-haspopup="tree" + aria-expanded により展開状態を示します。パネルは role="listbox" です（複数選択では aria-multiselectable を追加）
• パネル内部は Tree の APG tree パターンのキーボードナビゲーションをそのまま再利用しています
• コンポーネントの外側をクリックするか Escape キーを押すと閉じ、閉じた後にフォーカスはトリガーへ戻ります

型定義

本コンポーネントが外部にエクスポートする TypeScript の型構造は以下の通りです（packages/components/tree-select/src/types.ts と @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義を表示します。プロパティの説明は上記の Props 表を参照してください）：

LhTreeSelectProps

export interface LhTreeSelectProps {
  /** ツリーデータ */
  data: LhTreeNode[]
  /** 現在の値（単一選択は string / 複数選択は string[]。v-model で制御） */
  modelValue?: string | string[]
  /** 複数選択（チェックボックスを表示し、値は選択されたキーの配列） */
  multiple?: boolean
  /** 無効化 */
  disabled?: boolean
  /** プレースホルダーテキスト */
  placeholder?: string
  /** パネルを body にマウントするかどうか（デフォルト true） */
  teleported?: boolean
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhTreeNode _{（@lh-ui/share/core/tree より）}

/** ツリーのノードデータ */
export interface LhTreeNode {
  /** 一意キー */
  key: string
  /** 表示テキスト */
  label: string
  /** 子ノード */
  children?: LhTreeNode[]
  /** 無効化 */
  disabled?: boolean
  /** 葉ノードかどうか（未指定時は children から推論） */
  isLeaf?: boolean
}