app/pages/dev/poc_tree_select_input.vue

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

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

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

    <v-divider class="my-6" />

    <h2>Select Hiérarchique - Catégories d'événements</h2>

    <UiInputTreeSelectEventCategories
      v-model="selectedCategories"
      label="Choisissez des catégories"
      placeholder="Sélectionnez des catégories..."
      :max-visible-chips="3"
    />

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

<script setup lang="ts">
import { type TreeSelectItem } from '~/types/layout'

const selectedValues = ref<string[]>([])
const selectedCategories = ref<string[]>([])

const hierarchicalItems = ref<TreeSelectItem[]>([
  // 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>