<template>
  <Story title="Tab/List">
    <div class="grid grid-cols-1 gap-6">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec icônes</h2>
        <MalioTabList v-model="withIcons" :tabs="tabs">
          <template #qualimat><p class="p-4">Contenu onglet Qualimat</p></template>
          <template #adresses><p class="p-4">Contenu onglet Adresses</p></template>
          <template #contacts><p class="p-4">Contenu onglet Contacts</p></template>
          <template #comptabilite><p class="p-4">Contenu onglet Comptabilité</p></template>
        </MalioTabList>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Sans icônes</h2>
        <MalioTabList v-model="withoutIcons" :tabs="tabsNoIcon">
          <template #tab1><p class="p-4">Contenu onglet 1</p></template>
          <template #tab2><p class="p-4">Contenu onglet 2</p></template>
        </MalioTabList>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Deuxième onglet actif par défaut</h2>
        <MalioTabList v-model="secondActive" :tabs="tabs">
          <template #qualimat><p class="p-4">Contenu Qualimat</p></template>
          <template #adresses><p class="p-4">Contenu Adresses (actif par défaut)</p></template>
          <template #contacts><p class="p-4">Contenu Contacts</p></template>
          <template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
        </MalioTabList>
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# MalioTabList

Navigation par onglets avec icônes optionnelles et gestion show/hide des panneaux via slots nommés.

---

## Props détaillées

### tabs

- Type: `Array<{ key: string; label: string; icon?: string }>`
- Requis: oui
- Description: Définit les onglets. Chaque entrée correspond à un slot nommé par `key`.

### modelValue

- Type: `string`
- Description: Clé de l'onglet actif. Sans v-model, le premier onglet est actif par défaut (mode non contrôlé).

### id

- Type: `string`
- Description: Préfixe pour les IDs d'accessibilité. Auto-généré si absent.

---

## Slots

Un slot nommé par `tab.key` pour chaque onglet. Le contenu du slot est affiché/masqué automatiquement.

```html
<MalioTabList :tabs="[{ key: 'foo', label: 'Foo' }]">
  <template #foo>Contenu de Foo</template>
</MalioTabList>
```

---

## Accessibilité

- `role="tablist"` sur le conteneur
- `role="tab"` avec `aria-selected`, `aria-controls`, `tabindex` sur chaque bouton
- `role="tabpanel"` avec `aria-labelledby` sur chaque panneau

---

## Events

### update:modelValue

- Émis au clic sur un onglet
- Retourne la clé (`string`) de l'onglet sélectionné
</docs>

<script setup lang="ts">
import { ref } from 'vue'
import MalioTabList from '../../components/malio/tab/TabList.vue'

const tabs = [
  { key: 'qualimat', label: 'Qualimat', icon: 'mdi:certificate-outline' },
  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
  { key: 'comptabilite', label: 'Comptabilité', icon: 'mdi:web' },
]

const tabsNoIcon = [
  { key: 'tab1', label: 'Onglet 1' },
  { key: 'tab2', label: 'Onglet 2' },
]

const withIcons = ref('qualimat')
const withoutIcons = ref('tab1')
const secondActive = ref('adresses')
</script>
