feat : ajout du composant tabList

2026-03-23 08:44:45 +01:00
parent 09cc3edf6f
commit 41470254cf
7 changed files with 912 additions and 0 deletions
@@ -0,0 +1,66 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6">
+    <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>
+</template>
+
+<script setup lang="ts">
+import { ref } from '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' },
+  { 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 simpleValue = ref('qualimat')
+const noIconValue = ref('tab1')
+const twoTabValue = ref('general')
+</script>