<!-- components/Carte.vue -->
<template>
  <div class="carte">
    <header class="carte-entete">
      <!-- slot nommé : le parent cible cet emplacement via #entete -->
      <slot name="entete">
        <!-- contenu par défaut si le parent ne fournit rien -->
        <h3>Titre par défaut</h3>
      </slot>
    </header>

    <div class="carte-corps">
      <!-- slot par défaut (sans nom) -->
      <slot />
    </div>

    <footer class="carte-pied" v-if="$slots.pied">
      <slot name="pied" />
    </footer>
  </div>
</template>

<!-- Utilisation avec la syntaxe complète <template #nom> -->
<script setup>
import Carte from './components/Carte.vue'
</script>

<template>
  <Carte>
    <template #entete>
      <h3>Statistiques du mois</h3>
    </template>

    <!-- Le contenu sans balise <template> va automatiquement dans le slot par défaut -->
    <p>127 nouveaux utilisateurs, +12% vs le mois dernier.</p>

    <template #pied>
      <button>Voir le rapport complet</button>
    </template>
  </Carte>
</template>

<!-- Scoped slots : le composant ENFANT transmet des données au contenu fourni par le parent -->
<!-- components/ListeUtilisateurs.vue -->
<script setup>
defineProps({ utilisateurs: Array })
</script>

<template>
  <ul>
    <li v-for="u in utilisateurs" :key="u.id">
      <!-- on expose `utilisateur` et `estAdmin` au parent via le slot -->
      <slot :utilisateur="u" :est-admin="u.role === 'admin'">
        <!-- rendu par défaut si le parent ne personnalise pas -->
        {{ u.nom }}
      </slot>
    </li>
  </ul>
</template>

<script setup>
import ListeUtilisateurs from './components/ListeUtilisateurs.vue'
const utilisateurs = [
  { id: 1, nom: 'Alice', role: 'admin' },
  { id: 2, nom: 'Bob', role: 'membre' },
]
</script>

<template>
  <!-- v-slot déstructure directement les props exposées par le slot enfant -->
  <ListeUtilisateurs :utilisateurs="utilisateurs" v-slot="{ utilisateur, estAdmin }">
    <strong :class="{ 'texte-admin': estAdmin }">{{ utilisateur.nom }}</strong>
    <span v-if="estAdmin"> (admin)</span>
  </ListeUtilisateurs>
</template>

<!-- Composants dynamiques : <component :is="..."> change de composant à la volée -->
<script setup>
import { ref, shallowRef } from 'vue'
import OngletProfil from './components/OngletProfil.vue'
import OngletSecurite from './components/OngletSecurite.vue'
import OngletFacturation from './components/OngletFacturation.vue'

// shallowRef : pas besoin de réactivité profonde sur une référence de composant
const ongletActif = shallowRef(OngletProfil)
const composants = { profil: OngletProfil, securite: OngletSecurite, facturation: OngletFacturation }
</script>

<template>
  <nav>
    <button v-for="(comp, cle) in composants" :key="cle" @click="ongletActif = comp">
      {{ cle }}
    </button>
  </nav>

  <!-- KeepAlive : préserve l'état des composants inactifs (formulaire non perdu en changeant d'onglet) -->
  <KeepAlive>
    <component :is="ongletActif" />
  </KeepAlive>
</template>