app/pages/dev/poc_tree_select_input.vue

<template>
  <div class="pa-4">
    <h2>Select Hiérarchique</h2>

    <UiInputTreeSelect
      v-model="selectedValues"
      :items="hierarchicalItems"
      label="Choisissez vos options"
      placeholder="Sélectionnez des éléments..."
      :max-visible-chips="2"
      ref="treeSelect"
    />

    <div class="mt-4">
      <h3>Valeurs sélectionnées :</h3>
      <pre>{{ selectedValues }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
const selectedValues = ref<string[]>([])

const hierarchicalItems = ref([
  // Catégories principales
  { id: 'cat1', label: 'Électronique', type: 'category', level: 0 },
  { id: 'cat2', label: 'Vêtements', type: 'category', level: 0 },

  // Sous-catégories d'Électronique
  { id: 'subcat1', label: 'Ordinateurs', type: 'subcategory', parentId: 'cat1', level: 1 },
  { id: 'subcat2', label: 'Téléphones', type: 'subcategory', parentId: 'cat1', level: 1 },

  // Items sous Ordinateurs
  { id: 'item1', label: 'Laptop Gaming', value: 'laptop-gaming', type: 'item', parentId: 'subcat1', level: 2 },
  { id: 'item2', label: 'Laptop Bureau', value: 'laptop-office', type: 'item', parentId: 'subcat1', level: 2 },
  { id: 'item3', label: 'PC Desktop', value: 'pc-desktop', type: 'item', parentId: 'subcat1', level: 2 },

  // Items sous Téléphones
  { id: 'item4', label: 'iPhone', value: 'iphone', type: 'item', parentId: 'subcat2', level: 2 },
  { id: 'item5', label: 'Android', value: 'android', type: 'item', parentId: 'subcat2', level: 2 },

  // Sous-catégories de Vêtements
  { id: 'subcat3', label: 'Homme', type: 'subcategory', parentId: 'cat2', level: 1 },
  { id: 'subcat4', label: 'Femme', type: 'subcategory', parentId: 'cat2', level: 1 },

  // Items sous Homme
  { id: 'item6', label: 'Chemises', value: 'chemises-homme', type: 'item', parentId: 'subcat3', level: 2 },
  { id: 'item7', label: 'Pantalons', value: 'pantalons-homme', type: 'item', parentId: 'subcat3', level: 2 },

  // Items sous Femme
  { id: 'item8', label: 'Robes', value: 'robes', type: 'item', parentId: 'subcat4', level: 2 },
  { id: 'item9', label: 'Blouses', value: 'blouses', type: 'item', parentId: 'subcat4', level: 2 },
])
</script>