malio-layer-ui/.playground/pages/composant/tab/tabList.vue

<template>
  <div class="grid grid-cols-1 items-start gap-6">
    <div class="rounded-lg border p-4">
      <h2 class="mb-1 text-xl font-bold">Bac à sable (tous les cas)</h2>
      <p class="mb-4 text-sm text-m-muted">
        Règle les paramètres puis <strong>redimensionne le cadre en pointillés</strong>
        (poignée en bas à droite) pour voir le nombre d'onglets s'adapter et les flèches apparaître.
      </p>

      <div class="mb-4 flex flex-wrap items-end gap-4 text-sm">
        <label class="flex flex-col gap-1">Nb onglets : {{ sbCount }}
          <input
            v-model.number="sbCount"
            type="range"
            min="1"
            max="15"
            class="w-40"
          >
        </label>
        <label class="flex flex-col gap-1">maxVisibleTabs (0 = auto)
          <input
            v-model.number="sbMax"
            type="number"
            min="0"
            max="15"
            class="w-20 rounded border px-2 py-1"
          >
        </label>
        <label class="flex items-center gap-2">
          <input
            v-model="sbIcons"
            type="checkbox"
          > Icônes
        </label>
        <label class="flex items-center gap-2">
          <input
            v-model="sbLong"
            type="checkbox"
          > Labels longs
        </label>
      </div>

      <div
        class="resize-x overflow-hidden rounded border-2 border-dashed border-m-muted p-3"
        style="width: 100%; min-width: 280px;"
      >
        <MalioTabList
          v-model="sbValue"
          :tabs="sbTabs"
          :max-visible-tabs="sbMaxProp"
        >
          <template
            v-for="t in sbTabs"
            #[t.key]
            :key="t.key"
          >
            <p class="p-4">Contenu : {{ t.label }}</p>
          </template>
        </MalioTabList>
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <MalioTabList v-model="simpleValue" :tabs="tabs">
        <template #qualimat><p class="p-4">Contenu Qualimat</p></template>
        <template #adresses><p class="p-4">Contenu Adresses</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 class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Sans icônes</h2>
      <MalioTabList v-model="noIconValue" :tabs="tabsNoIcon">
        <template #tab1><p class="p-4">Contenu onglet 1</p></template>
        <template #tab2><p class="p-4">Contenu onglet 2</p></template>
        <template #tab3><p class="p-4">Contenu onglet 3</p></template>
      </MalioTabList>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Non contrôlé (sans v-model)</h2>
      <MalioTabList :tabs="tabs">
        <template #qualimat><p class="p-4">Contenu Qualimat</p></template>
        <template #adresses><p class="p-4">Contenu Adresses</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 class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Deux onglets</h2>
      <MalioTabList v-model="twoTabValue" :tabs="tabsTwo">
        <template #general><p class="p-4">Informations générales</p></template>
        <template #details><p class="p-4">Détails avancés</p></template>
      </MalioTabList>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-1 text-xl font-bold">Beaucoup d'onglets (fenêtré)</h2>
      <p class="mb-4 text-sm text-m-muted">
        7 onglets avec <code>:max-visible-tabs="5"</code> — flèches gauche/droite pour faire défiler
        (1 par 1). L'onglet actif reste sélectionné même hors fenêtre.
      </p>
      <MalioTabList v-model="manyValue" :tabs="manyTabs" :max-visible-tabs="5">
        <template #infos><p class="p-4">Contenu Informations</p></template>
        <template #adresses><p class="p-4">Contenu Adresses</p></template>
        <template #contacts><p class="p-4">Contenu Contacts</p></template>
        <template #compta><p class="p-4">Contenu Comptabilité</p></template>
        <template #documents><p class="p-4">Contenu Documents</p></template>
        <template #historique><p class="p-4">Contenu Historique</p></template>
        <template #parametres><p class="p-4">Contenu Paramètres</p></template>
      </MalioTabList>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-1 text-xl font-bold">Peu d'onglets avec maxVisibleTabs</h2>
      <p class="mb-4 text-sm text-m-muted">
        3 onglets avec <code>:max-visible-tabs="5"</code> — le fenêtrage ne s'active pas
        (onglets ≤ max), donc pas de flèches, affichage normal centré.
      </p>
      <MalioTabList v-model="fewValue" :tabs="fewTabs" :max-visible-tabs="5">
        <template #general><p class="p-4">Contenu Général</p></template>
        <template #adresses><p class="p-4">Contenu Adresses</p></template>
        <template #contacts><p class="p-4">Contenu Contacts</p></template>
      </MalioTabList>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

// --- Bac à sable interactif ---
const sbCount = ref(9)
const sbMax = ref(0)
const sbIcons = ref(true)
const sbLong = ref(false)

const SB_LABELS = [
  'Informations', 'Adresses', 'Contacts', 'Comptabilité', 'Documents',
  'Historique', 'Paramètres', 'Qualité', 'Facturation', 'Accueil',
  'Notifications', 'Statistiques', 'Équipe', 'Sécurité', 'Étiquettes',
]
const SB_ICONS = [
  'mdi:information-outline', 'mdi:map-marker-outline', 'mdi:account-box-outline', 'mdi:web',
  'mdi:file-document-outline', 'mdi:history', 'mdi:cog-outline', 'mdi:check-decagram-outline',
  'mdi:receipt-text-outline', 'mdi:home', 'mdi:bell-outline', 'mdi:chart-bar',
  'mdi:account-group-outline', 'mdi:lock-outline', 'mdi:tag-outline',
]

const sbTabs = computed(() =>
  Array.from({ length: sbCount.value }, (_, i) => ({
    key: `sb${i}`,
    label: sbLong.value ? `${SB_LABELS[i % SB_LABELS.length]} détaillé` : SB_LABELS[i % SB_LABELS.length],
    icon: sbIcons.value ? SB_ICONS[i % SB_ICONS.length] : undefined,
  })),
)
const sbMaxProp = computed(() => (sbMax.value > 0 ? sbMax.value : undefined))
const sbValue = ref('sb0')

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' },
  { key: 'tab3', label: 'Onglet 3' },
]

const tabsTwo = [
  { key: 'general', label: 'Général', icon: 'mdi:information-outline' },
  { key: 'details', label: 'Détails', icon: 'mdi:cog-outline' },
]

const manyTabs = [
  { key: 'infos', label: 'Informations', icon: 'mdi:information-outline' },
  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
  { key: 'compta', label: 'Comptabilité', icon: 'mdi:web' },
  { key: 'documents', label: 'Documents', icon: 'mdi:file-document-outline' },
  { key: 'historique', label: 'Historique', icon: 'mdi:history' },
  { key: 'parametres', label: 'Paramètres', icon: 'mdi:cog-outline' },
]

const simpleValue = ref('qualimat')
const noIconValue = ref('tab1')
const twoTabValue = ref('general')
const manyValue = ref('infos')

const fewTabs = [
  { key: 'general', label: 'Général', icon: 'mdi:information-outline' },
  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
]
const fewValue = ref('general')
</script>