@cnamts/synapse 1.0.6 → 1.0.8

package/src/components/Customs/SyTabs/SyTabs.mdx

@@ -0,0 +1,117 @@
+import { Meta, Canvas, Controls, Source, Story } from '@storybook/blocks';
+import * as SyTabsStories from "./SyTabs.stories";
+
+<Meta of={SyTabsStories} />
+
+# SyTabs
+
+Le composant `SyTabs` est un système de navigation par onglets conforme au Design System qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. Il permet d'organiser le contenu en sections navigables facilement via une interface à onglets.
+
+Il implémente les fonctionnalités suivantes :
+
+- Navigation complète au clavier
+- Attributs ARIA appropriés
+- Gestion du focus accessible
+- Structure HTML sémantique
+- Design personnalisable
+
+<Canvas of={SyTabsStories.Default} />
+
+## API
+
+<Controls of={SyTabsStories.Default} />
+
+## Structure des données
+
+Le composant `SyTabs` attend un tableau d'objets `TabItem` avec la structure suivante :
+
+```typescript
+export interface TabItem {
+  label: string       // Texte affiché dans l'onglet
+  value: string | number  // Valeur unique utilisée pour v-model
+  content?: string    // Contenu textuel de l'onglet (optionnel)
+  disabled?: boolean  // État désactivé (optionnel)
+}
+```
+
+## Accessibilité
+
+Le composant `SyTabs` respecte les critères d'accessibilité RGAA suivants :
+
+### Structure sémantique
+
+- Utilise les éléments `<nav>`, `<ul>` et `<li>` pour une structure de navigation sémantique
+- Associe chaque onglet à son panneau de contenu via les attributs `aria-controls` et `aria-labelledby`
+- Utilise l'attribut `aria-label="Onglets de navigation"` sur l'élément `<nav>` pour identifier la navigation
+
+### Rôles ARIA
+
+- `role="tablist"` sur le conteneur de navigation
+- `role="presentation"` sur les éléments de liste
+- `role="tab"` sur les boutons d'onglets
+- `role="tabpanel"` sur les panneaux de contenu
+
+### États et propriétés
+
+- `aria-selected="true|false"` indique l'onglet actif
+- Attribut `hidden` sur les panneaux non actifs
+- Focus visible avec outline adapté au design system
+
+### Navigation au clavier
+
+Le composant implémente toutes les interactions clavier recommandées par les [Pratiques Authoring WAI-ARIA 1.2](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) :
+
+- **Flèches gauche/droite** : Navigation entre les onglets
+- **Touches Home/End** : Accès au premier/dernier onglet
+- **Entrée/Espace** : Activation de l'onglet
+- **Échap** : Gestion du focus
+
+### Contraste et visibilité
+
+- Contraste suffisant entre le texte et le fond (minimum 4.5:1)
+- Indication visuelle claire de l'onglet actif (changement de couleur et bordure)
+- Focus visible conforme aux exigences RGAA
+
+### Tests d'accessibilité
+
+Le composant a été testé avec :
+- Lecteurs d'écran (NVDA, VoiceOver)
+- Navigation clavier
+- Outils de vérification de contraste
+
+<Canvas of={SyTabsStories.Default} />
+
+## Personnalisation
+
+Le composant peut être personnalisé via l'objet `vuetifyOptions` qui permet de modifier l'apparence des onglets :
+
+> **Important** : Ces options de personnalisation doivent être passées via la prop `vuetifyOptions` et non comme props directes du composant. Par exemple, utilisez `:vuetify-options="{ sheet: { dense: true } }"` plutôt que `:sheet="{ dense: true }"`.
+
+```javascript
+{
+  sheet: { 
+    theme: 'default|dark|light',  // Thème de l'arrière-plan
+    color: '#fff',                // Couleur d'arrière-plan
+    dense: false                  // Mode compact
+  },
+  tabs: {
+    height: '48',                 // Hauteur des onglets
+    'show-arrows': true           // Affichage des flèches de défilement
+  },
+  tab: {
+    'base-color': '#0C419A',      // Couleur de base des onglets
+    'active-color': '#0C419A',    // Couleur de l'onglet actif
+    'slider-color': '#0C419A',    // Couleur de l'indicateur actif
+    'ripple': false               // Effet de ripple
+  }
+}
+```
+
+<Canvas of={SyTabsStories.CustomTheme} />
+
+## Bonnes pratiques
+
+- Limitez le nombre d'onglets pour éviter une surcharge cognitive
+- Utilisez des libellés courts et descriptifs
+- Assurez une cohérence visuelle entre les onglets et leur contenu
+- Préservez l'état des onglets lors de la navigation entre pages si nécessaire

package/src/components/Customs/SyTabs/SyTabs.stories.ts

@@ -0,0 +1,354 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import SyTabs from './SyTabs.vue'
+import { ref } from 'vue'
+
+// Plus d'informations sur la configuration de Storybook pour Vue:
+// https://storybook.js.org/docs/vue/writing-stories/introduction
+
+/**
+ * `SyTabs` est un composant de navigation par onglets accessible et personnalisable.
+ * Il permet d'organiser le contenu en sections navigables facilement via une interface à onglets.
+ * Le composant implémente toutes les bonnes pratiques d'accessibilité ARIA et supporte la navigation complète au clavier.
+ */
+const meta = {
+	title: 'Composants/Navigation/SyTabs',
+	component: SyTabs,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['confirmationMessage'] },
+	},
+	argTypes: {
+		items: {
+			description: 'Liste des éléments à afficher dans les onglets',
+			control: 'object',
+		},
+		modelValue: {
+			description: 'Index ou valeur de l\'onglet actuellement sélectionné (utilisé avec v-model)',
+			control: 'text',
+		},
+		confirmTabChange: {
+			description: 'Si activé, une confirmation sera demandée avant de changer d\'onglet',
+			control: 'boolean',
+		},
+	},
+	args: {
+		items: [
+			{ label: 'Onglet 1', value: 'tab1', content: 'Contenu de l\'onglet 1' },
+			{ label: 'Onglet 2', value: 'tab2', content: 'Contenu de l\'onglet 2' },
+			{ label: 'Onglet 3', value: 'tab3', content: 'Contenu de l\'onglet 3' },
+		],
+	},
+} as Meta<typeof SyTabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Exemple de base du composant SyTabs avec des onglets simples.
+ */
+export const Default: Story = {
+	args: {},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<SyTabs :items="items" />`,
+			},
+			{
+				name: 'Script',
+				code: `
+const items = [
+	{ label: 'Onglet 1', value: 'tab1', content: "Contenu de l'onglet 1" },
+	{ label: 'Onglet 2', value: 'tab2', content: "Contenu de l'onglet 2" },
+	{ label: 'Onglet 3', value: 'tab3', content: "Contenu de l'onglet 3" },
+]
+`,
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec v-model pour contrôler l'onglet actif de façon externe.
+ */
+export const WithVModel: Story = {
+	render: args => ({
+		components: { SyTabs },
+		setup() {
+			const activeTab = ref('tab2')
+
+			return { args, activeTab }
+		},
+		template: `
+      <div>
+        <div class="mb-4">
+          Onglet actif: {{ activeTab }}
+          <button 
+            class="ml-4 px-2 py-1 bg-primary text-white rounded" 
+            @click="activeTab = activeTab === 'tab1' ? 'tab2' : 'tab1'"
+          >
+            Changer d'onglet
+          </button>
+        </div>
+        <SyTabs v-model="activeTab" :items="args.items" />
+      </div>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <div>
+    <div class="mb-4">
+      Onglet actif: {{ activeTab }}
+      <button 
+        class="ml-4 px-2 py-1 bg-primary text-white rounded" 
+        @click="activeTab = activeTab === 'tab1' ? 'tab2' : 'tab1'"
+      >
+        Changer d'onglet
+      </button>
+    </div>
+    <SyTabs v-model="activeTab" :items="items" />
+  </div>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup>
+import { ref } from 'vue'
+
+const activeTab = ref('tab2')
+const items = [
+  { label: 'Onglet 1', value: 'tab1', content: "Contenu de l'onglet 1" },
+  { label: 'Onglet 2', value: 'tab2', content: "Contenu de l'onglet 2" },
+  { label: 'Onglet 3', value: 'tab3', content: "Contenu de l'onglet 3" }
+]
+</script>`,
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec slots personnalisés pour le contenu des onglets.
+ */
+export const WithCustomContent: Story = {
+	render: args => ({
+		components: { SyTabs },
+		setup() {
+			return { args }
+		},
+		template: `
+      <SyTabs :items="args.items">
+        <template #panel-0>
+          <div class="p-4 bg-info-light rounded">
+            <h3 class="text-h6 font-weight-bold">Contenu personnalisé pour l'onglet 1</h3>
+            <p>Vous pouvez utiliser des slots nommés <code>panel-{index}</code> pour personnaliser le contenu de chaque onglet.</p>
+          </div>
+        </template>
+        <template #panel-1>
+          <div class="p-4 bg-success-light rounded">
+            <h3 class="text-h6 font-weight-bold">Contenu personnalisé pour l'onglet 2</h3>
+            <p>Ce panneau utilise un style différent.</p>
+          </div>
+        </template>
+      </SyTabs>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: ` 
+              <SyTabs :items="args.items">
+        <template #panel-0>
+          <div class="p-4 bg-info-light rounded">
+            <h3 class="text-h6 font-weight-bold">Contenu personnalisé pour l'onglet 1</h3>
+            <p>Vous pouvez utiliser des slots nommés <code>panel-{index}</code> pour personnaliser le contenu de chaque onglet.</p>
+          </div>
+        </template>
+        <template #panel-1>
+          <div class="p-4 bg-success-light rounded">
+            <h3 class="text-h6 font-weight-bold">Contenu personnalisé pour l'onglet 2</h3>
+            <p>Ce panneau utilise un style différent.</p>
+          </div>
+        </template>
+      </SyTabs>
+      `,
+			},
+			{
+				name: 'Script',
+				code: `
+
+        `,
+
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec de nombreux onglets pour démontrer le comportement de scrolling.
+ */
+export const ManyTabs: Story = {
+	args: {
+		items: Array.from({ length: 10 }, (_, i) => ({
+			label: `Onglet ${i + 1}`,
+			value: `tab${i + 1}`,
+			content: `Contenu de l'onglet ${i + 1}`,
+		})),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<SyTabs :items="items" />`,
+			},
+			{
+				name: 'Script',
+				code: `
+// Création d'un grand nombre d'onglets pour tester le comportement de défilement
+const items = Array.from({ length: 10 }, (_, i) => ({
+  label: \`Onglet \${i + 1}\`,
+  value: \`tab\${i + 1}\`,
+  content: \`Contenu de l'onglet \${i + 1}\`,
+}))
+`,
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec des options de personnalisation du thème.
+ */
+export const CustomTheme: Story = {
+	render: args => ({
+		components: { SyTabs },
+		setup() {
+			return { args }
+		},
+		template: `
+      <SyTabs 
+        :items="args.items"
+        :vuetifyOptions="{
+          sheet: { theme: 'dark', color: '#0C419A' },
+          tab: { 'base-color': '#ffffff', 'active-color': '#ffffff', 'slider-color': '#42b983' },
+          tabs: { height: '60' }
+        }"
+      />
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<SyTabs 
+  :items="items"
+  :vuetifyOptions="{
+    sheet: { theme: 'dark', color: '#0C419A' },
+    tab: { 'base-color': '#ffffff', 'active-color': '#ffffff', 'slider-color': '#42b983' },
+    tabs: { height: '60' }
+  }"
+/>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup>
+const items = [
+  { label: 'Onglet 1', value: 'tab1', content: "Contenu de l'onglet 1" },
+  { label: 'Onglet 2', value: 'tab2', content: "Contenu de l'onglet 2" },
+  { label: 'Onglet 3', value: 'tab3', content: "Contenu de l'onglet 3" },
+]
+</script>
+`,
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec confirmation avant changement d'onglet.
+ * Démontre comment utiliser la propriété confirmTabChange et gérer l'événement confirm-tab-change.
+ */
+export const WithTabConfirmation: Story = {
+	render: args => ({
+		components: { SyTabs },
+		setup() {
+			return {
+				args,
+				showConfirmDialog: (message: string, callback: (confirmed: boolean) => void) => {
+					// Dans un cas réel, vous afficheriez une boîte de dialogue personnalisée
+					// Ici nous utilisons window.confirm pour la démonstration
+					const confirmed = window.confirm('Voulez-vous vraiment changer d\'onglet ?')
+					// Appelons le callback avec le résultat de la confirmation
+					callback(confirmed)
+				},
+			}
+		},
+		template: `
+      <div>
+        <div class="mb-4 pa-2 bg-warning-light">
+          <strong>Note :</strong> Essayez de changer d'onglet. Une boîte de dialogue de confirmation s'affichera.
+        </div>
+
+        <SyTabs
+          :items="args.items"
+          :confirmTabChange="true"
+          @confirm-tab-change="showConfirmDialog"
+        />
+      </div>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <div>
+    <div class="mb-4 pa-2 bg-warning-light">
+      <strong>Note :</strong> Essayez de changer d'onglet. Une boîte de dialogue de confirmation s'affichera.
+    </div>
+      <SyTabs 
+      :items="items" 
+      :confirmTabChange="true"
+      @confirm-tab-change="showConfirmDialog"
+    />
+  </div>
+</template>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup>
+import { ref } from 'vue'
+
+const items = [
+  { label: 'Onglet 1', value: 'tab1', content: "Contenu de l'onglet 1" },
+  { label: 'Onglet 2', value: 'tab2', content: "Contenu de l'onglet 2" },
+  { label: 'Onglet 3', value: 'tab3', content: "Contenu de l'onglet 3" }
+]
+
+// Fonction pour afficher une boîte de dialogue de confirmation
+function showConfirmDialog(message, callback) {
+  // Dans un cas réel, vous afficheriez une boîte de dialogue personnalisée
+  // Ici nous utilisons window.confirm pour la démonstration
+  const confirmed = window.confirm("Voulez-vous vraiment changer d'onglet ?")
+  // Appelons le callback avec le résultat de la confirmation
+  callback(confirmed)
+}
+</script>
+`,
+			},
+		],
+	},
+}