@cnamts/synapse 1.1.0 → 1.1.1

package/dist/vuetifyConfig.js

@@ -1,4 +1,4 @@
-import { g as e, h as b, f as S, a as h, c as u, i as w, e as k, d as z } from "./apLightTheme2026-DbS7BPUf.js";
+import { g as e, h as b, f as S, a as h, c as u, i as w, e as k, d as z } from "./apLightTheme2026-C4ygwMHC.js";
 import * as W from "vuetify/components";
 import * as H from "vuetify/directives";
 import { mdi as F, aliases as V } from "vuetify/iconsets/mdi-svg";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -95,7 +95,7 @@
     "cross-env": "^10.1.0",
     "cypress": "^15.13.0",
     "eslint": "^9.13.0",
-    "eslint-plugin-storybook": "^0.11.3",
+    "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-vue": "^9.30.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^20.8.8",
@@ -122,7 +122,7 @@
     "vitest": "^4.1.0",
     "vitest-axe": "^0.1.0",
     "vue": "^3.5.18",
-    "vue-component-type-helpers": "2.2.0",
+    "vue-component-type-helpers": "2.2.12",
     "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.8",
     "vue3-snapshot-serializer": "^2.9.0"
@@ -144,17 +144,17 @@
     "access": "public"
   },
   "overrides": {
-    "esbuild": "^0.25.0",
+    "esbuild": ">=0.28.1",
     "parse5": "7.1.2",
     "npm": "^11.8.1",
-    "undici": "^6.24.0",
+    "undici": ">=6.27.0 <8",
     "rollup": "^4.59.0",
     "immutable": ">=5.1.5"
   },
   "pnpm": {
     "overrides": {
-      "esbuild": "^0.25.0",
-      "undici": "^6.24.0",
+      "esbuild": ">=0.28.1",
+      "undici": ">=6.27.0 <8",
       "glob": ">=10.5.0",
       "js-yaml": ">=4.1.1",
       "parse5": "7.1.2",

package/src/assets/compat/_legacy-tokens.scss

@@ -0,0 +1,91 @@
+// =============================================================================
+// Shim de compatibilité — ré-expose les anciens tokens SCSS (<= 1.0.24)
+// vers les variables CSS du thème (>= 1.0.25).
+// À utiliser UNIQUEMENT pour faciliter la migration d'un projet qui consommait
+// l'ancien export SCSS (`$gap-2`, `$radius-rounded-lg`, …). À terme, préférez
+// directement les variables CSS (`var(--v-gap-N)`, `var(--v-radius-…)`, …).
+// Usage (côté projet) :
+//   @use '@cnamts/synapse/assets/compat/legacy-tokens' as *;
+//   .box { gap: $gap-2; } // -> gap: var(--v-gap-2);
+// Limite : ces variables contiennent une `var(--…)` (résolue au runtime).
+// Elles conviennent pour des affectations directes (`gap`, `padding`, `margin`,
+// `border-radius`, `font-size`, `color`…) mais PAS pour des opérations SCSS
+// compile-time (`calc` Sass, fonctions de couleur…). Pour ces cas, utilisez
+// `calc()` CSS ou des valeurs en dur.
+// =============================================================================
+
+// --- Espacements : $gap-0 … $gap-16 -> var(--v-gap-N) ------------------------
+$gap-0: var(--v-gap-0) !default;
+$gap-1: var(--v-gap-1) !default;
+$gap-2: var(--v-gap-2) !default;
+$gap-3: var(--v-gap-3) !default;
+$gap-4: var(--v-gap-4) !default;
+$gap-5: var(--v-gap-5) !default;
+$gap-6: var(--v-gap-6) !default;
+$gap-7: var(--v-gap-7) !default;
+$gap-8: var(--v-gap-8) !default;
+$gap-9: var(--v-gap-9) !default;
+$gap-10: var(--v-gap-10) !default;
+$gap-11: var(--v-gap-11) !default;
+$gap-12: var(--v-gap-12) !default;
+$gap-13: var(--v-gap-13) !default;
+$gap-14: var(--v-gap-14) !default;
+$gap-15: var(--v-gap-15) !default;
+$gap-16: var(--v-gap-16) !default;
+
+// --- Paddings : $padding-N -> var(--v-padding-N) -----------------------------
+$padding-0: var(--v-padding-0) !default;
+$padding-2: var(--v-padding-2) !default;
+$padding-3: var(--v-padding-3) !default;
+$padding-4: var(--v-padding-4) !default;
+$padding-6: var(--v-padding-6) !default;
+$padding-8: var(--v-padding-8) !default;
+$padding-10: var(--v-padding-10) !default;
+$padding-14: var(--v-padding-14) !default;
+$padding-16: var(--v-padding-16) !default;
+
+// --- Arrondis : $radius-rounded-* -> var(--v-radius-*) -----------------------
+$radius-rounded-0: var(--v-radius-rounded0) !default;
+$radius-rounded: var(--v-radius-rounded) !default;
+$radius-rounded-md: var(--v-radius-rounded) !default; // 'md' (4px) = rounded
+$radius-rounded-lg: var(--v-radius-roundedLg) !default;
+$radius-rounded-pill: var(--v-radius-roundedPill) !default;
+
+// --- Typographie : $font-size-* -> var(--v-fontSize-*) -----------------------
+$font-size-title: var(--v-fontSize-titres) !default;
+$font-size-alt-title: var(--v-fontSize-titresAlternatifs) !default;
+$font-size-body-text: var(--v-fontSize-corpsDeTexte) !default;
+$font-size-link-label: var(--v-fontSize-liensEtLibelles) !default;
+
+// --- Espacements sémantiques : $spacing-* -> échelle gap (mêmes valeurs) ------
+// (Pas de variable CSS dédiée : on réutilise --v-gap-N de valeur identique.)
+$spacing-none: var(--v-gap-0) !default;
+$spacing-xx-small: var(--v-gap-1) !default; // 4px
+$spacing-x-small: var(--v-gap-2) !default; // 8px
+$spacing-small: var(--v-gap-4) !default; // 16px
+$spacing-medium: var(--v-gap-6) !default; // 24px
+$spacing-large: var(--v-gap-8) !default; // 32px
+$spacing-x-large: var(--v-gap-10) !default; // 40px
+$spacing-xx-large: var(--v-gap-14) !default; // 56px
+$spacing-xxx-large: var(--v-gap-16) !default; // 64px
+$spacing-huge: 80px !default; // pas d'équivalent (> gap-16) : valeur en dur
+
+$spacing-horizontal-none: var(--v-gap-0) !default;
+$spacing-horizontal-xx-small: var(--v-gap-1) !default;
+$spacing-horizontal-x-small: var(--v-gap-2) !default;
+$spacing-horizontal-small: var(--v-gap-4) !default;
+$spacing-horizontal-medium: var(--v-gap-6) !default;
+$spacing-horizontal-large: var(--v-gap-8) !default;
+$spacing-horizontal-x-large: var(--v-gap-10) !default;
+$spacing-horizontal-xx-large: var(--v-gap-14) !default;
+$spacing-horizontal-xxx-large: var(--v-gap-16) !default;
+$spacing-horizontal-huge: 80px !default;
+
+// --- Couleurs ----------------------------------------------------------------
+// Les couleurs de thème sont des triplets RVB : utilisez-les directement via
+//   color: rgb(var(--v-theme-primary));
+//   background: rgba(var(--v-theme-primary), 0.08);
+// Palette : rgb(var(--v-theme-<couleur>-<variante>)), ex. var(--v-theme-blue-base).
+// Le shim ne ré-expose volontairement pas l'ancienne palette en dur (> 100 valeurs)
+// pour rester aligné sur le thème actif. Si besoin ponctuel, aliasez côté projet :
+//   $primary: rgb(var(--v-theme-primary));

package/src/assets/overrides/_utilities.scss

@@ -7,3 +7,26 @@
 .theme-ap2026 {
 	--footer-background: rgb(var(--v-theme-primary));
 }
+
+.theme-cnam,
+.theme-pa,
+.theme-ap,
+.theme-ap2026 {
+	--carousel-controls-background: rgb(255 255 255);
+}
+
+.v-carousel .v-carousel__controls {
+	background-color: var(--carousel-controls-background) !important;
+}
+
+// Style pour tous les indicateurs (non actifs)
+.v-carousel .v-carousel__controls .v-btn .v-icon {
+	color: rgb(var(--v-theme-disabled)) !important;
+	opacity: 1;
+}
+
+// Style pour l'indicateur actif
+.v-carousel .v-carousel__controls .v-btn--active .v-icon {
+	color: rgb(var(--v-theme-primary)) !important;
+	opacity: 1;
+}

package/src/components/Accordion/Accordion.stories.ts

@@ -1,7 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import { fn } from '@storybook/test'
 import Accordion from './Accordion.vue'
-import { ref } from 'vue'
+import { SyIcon } from '@/components'
+import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+import { mdiCloseCircleOutline } from '@mdi/js'
+import {
+	VStepper,
+	VStepperHeader,
+	VStepperItem,
+	VStepperWindow,
+	VStepperWindowItem,
+	VStepperActions,
+} from 'vuetify/components'
+import { computed, reactive, ref } from 'vue'
 
 const meta: Meta<typeof Accordion> = {
 	title: 'Composants/Données/Accordion',
@@ -489,3 +500,112 @@ export const PreOpened: Story = {
 		`,
 	}),
 }
+
+export const WithCustomContent: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				language: 'vue',
+				code: `<template>
+  <Accordion
+    :items="[
+      { id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
+      { id: 'item2', title: 'Section 2', content: 'Contenu de la section 2' },
+    ]"
+    :heading-level="5"
+  />
+</template>`,
+			},
+		],
+	},
+	args: {
+		items: defaultItems.slice(0, 1),
+		headingLevel: 3,
+	},
+	render: args => ({
+		components: {
+			Accordion,
+			VStepper,
+			VStepperHeader,
+			VStepperItem,
+			VStepperWindow,
+			VStepperWindowItem,
+			VStepperActions,
+			SyCheckbox,
+			SyIcon,
+		},
+		setup() {
+			const steps = reactive([
+				{ id: 1, error: false, complete: true, editable: true },
+				{ id: 2, error: true, complete: false, editable: true },
+				{ id: 3, error: false, complete: false, editable: true },
+			])
+			const step = ref(2)
+
+			const close = mdiCloseCircleOutline
+
+			const hasError = computed(() =>
+				steps.some(s => s.error),
+			)
+			return { args, step, close, steps, hasError }
+		},
+		template: `
+			<div class="pa-4">
+				<Accordion v-bind="args" >
+                  <template #right-content>
+                    <SyIcon
+                        v-if="hasError"
+                        :icon="close"
+                        color="rgb(var(--v-theme-error))"
+                    />                  </template>
+                  <template #content="{ item }">
+                    <VStepper v-model="step">
+                      <template #default="{ prev, next }">
+                        <VStepperHeader>
+                          <VStepperItem
+                              v-for="stepItem in steps"
+                              :key="stepItem.id"
+                              :value="stepItem.id"
+                              :error="stepItem.error"
+                              :editable="stepItem.editable"
+                              :complete="stepItem.complete"
+                              :title="'Étape ' + stepItem.id"                        
+                              />
+                        </VStepperHeader>
+
+                        <VStepperWindow>
+                          <VStepperWindowItem
+                              v-for="(step) in steps"
+                              :key="step.id"
+                              :value="step.id"
+                          >
+                            <div style="padding: 24px;">
+                              <h3>Contenu de l'étape {{ step.id }}</h3>
+
+                              <SyCheckbox
+                                  v-model="step.error"
+                                  label="Cochez pour obtenir une erreur"
+                              />
+
+                              <p v-if="step.error" style="color: rgb(var(--v-theme-error));">
+                                Cette étape contient des erreurs.
+                              </p>
+
+                              <p v-else-if="step.complete">
+                                Cette étape est complétée.
+                              </p>
+
+                              <p v-else>
+                                Ceci est le contenu de l'étape {{ step.id }}.
+                              </p>
+                            </div>
+                          </VStepperWindowItem>
+                        </VStepperWindow>
+                      </template>
+                    </VStepper>
+                  </template>
+                </Accordion>
+			</div>
+		`,
+	}),
+}

package/src/components/BackBtn/BackBtn.mdx

@@ -20,7 +20,7 @@ import * as BackBtnStories from './BackBtn.stories';
 <script setup lang="ts">
 import { BackBtn } from '@cnamts/synapse'
 </script>
-import '../../stories/styles/shared.css';
+
 
 <template>
     <BackBtn/>

package/src/components/BackToTopBtn/BackToTopBtn.mdx

@@ -27,7 +27,6 @@ Ce composant peut être utilisé à la racine de la page ou bien dans un composa
 import { BackToTopBtn } from '@cnamts/synapse'
 import { VCard, VSheet } from 'vuetify/components'
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
   <VCard

package/src/components/Captcha/Captcha.stories.ts

@@ -3,6 +3,7 @@ import type { StoryObj } from '@storybook/vue3'
 import { fn } from '@storybook/test'
 import { ref, watch } from 'vue'
 import SyAlert from '../SyAlert/SyAlert.vue'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps.ts'
 
 export default {
 	title: 'Composants/Formulaires/Captcha',
@@ -17,6 +18,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'string' },
+				category: 'props',
 			},
 		},
 		'urlGetImage': {
@@ -24,6 +26,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'string' },
+				category: 'props',
 			},
 		},
 		'urlGetAudio': {
@@ -31,11 +34,16 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'string' },
+				category: 'props',
 			},
 		},
 		'modelValue': {
 			description: 'La valeur du champs de captcha',
 			control: 'string',
+			table: {
+				type: { summary: 'string' },
+				category: 'props',
+			},
 		},
 		'type': {
 			description: 'Le type de captcha affiché.',
@@ -46,26 +54,31 @@ export default {
 			table: {
 				type: { summary: 'image | audio | choice' },
 				defaultValue: { summary: '"image"' },
+				category: 'props',
 			},
 		},
-		'errorMessage': {
-			description: 'Message d\'erreur personnalisé à afficher sous le champ de captcha.',
+		'tagTitle': {
+			description: 'Le tag du titre de la section.',
 			control: 'text',
 			table: {
 				type: { summary: 'string' },
+				defaultValue: { summary: 'h2' },
+				category: 'props',
 			},
 		},
-		'tagTitle': {
-			description: 'Le tag du titre de la section.',
-		},
 		'helpDesk': {
 			description: 'Le numéro de téléphone du support pour garantir l\'accessibilité du parcours aux personnes en situation de handicap.',
+			table: {
+				type: { summary: 'string' },
+				category: 'props',
+			},
 		},
 		'locale': {
 			description: 'La locale (langue) à utiliser pour la génération du captcha. Par défaut, la langue du navigateur est utilisée.',
 			control: 'text',
 			table: {
 				type: { summary: 'string' },
+				category: 'props',
 			},
 		},
 		'locales': {
@@ -74,6 +87,7 @@ export default {
 			table: {
 				type: { summary: 'object' },
 				defaultValue: { summary: 'locales (importé depuis le fichier locales.ts)' },
+				category: 'props',
 			},
 		},
 		'update:modelValue': {
@@ -81,6 +95,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'string' },
+				category: 'events',
 			},
 		},
 		'update:type': {
@@ -88,6 +103,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'image | audio' },
+				category: 'events',
 			},
 		},
 		'imageError': {
@@ -95,6 +111,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'void' },
+				category: 'events',
 			},
 		},
 		'audioError': {
@@ -102,6 +119,7 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'void' },
+				category: 'events',
 			},
 		},
 		'creationError': {
@@ -109,16 +127,59 @@ export default {
 			control: false,
 			table: {
 				type: { summary: 'void' },
+				category: 'events',
+			},
+		},
+		'isClearable': {
+			description: 'Indique si le champ de captcha est effaçable ou non.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		'captchaId': {
+			description: 'L\'identifiant du captcha en cours. Utile pour les tests et la validation.',
+			control: false,
+			table: {
+				type: { summary: 'string' },
+				category: 'expose',
+			},
+		},
+		'clearValidation': {
+			description: 'Méthode exposée pour effacer la validation du captcha.',
+			control: false,
+			table: {
+				type: { summary: '() => void' },
+				category: 'expose',
+			},
+		},
+		'validateOnSubmit': {
+			description: 'Méthode exposée pour déclencher les règles de validation.',
+			control: false,
+			table: {
+				type: { summary: '() => Promise<boolean>' },
+				category: 'expose',
+			},
+		},
+		'reset': {
+			description: 'Méthode exposée pour réinitialiser le captcha.',
+			control: false,
+			table: {
+				type: { summary: '() => void' },
+				category: 'expose',
 			},
 		},
+		...getValidationDocumentation(),
 	},
-
 }
 
 type Story = StoryObj<typeof Captcha>
 
 export const Default: Story = {
 	args: {
+		'showSuccessMessages': true,
 		'onUpdate:modelValue': fn(),
 		'onUpdate:type': fn(),
 		'onImageError': fn(),
@@ -133,26 +194,52 @@ export const Default: Story = {
 				watch(() => args.modelValue, () => {
 					captchaValue.value = args.modelValue
 				})
+
+				// Vérification simulée : seules ces réponses correspondent à l'image.
 				const verifyCaptcha = () => {
 					if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
 						return Promise.resolve({ response: { data: { message: 'Success' } } })
 					}
-					else {
-						return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
-					}
+					return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
 				}
 
-				return { args, captchaValue, verifyCaptcha }
+				const customRules = [
+					{
+						type: 'custom',
+						options: {
+							validate: (value: string) => String(value || '').length >= 6,
+							message: 'Le captcha doit contenir au moins 6 caractères.',
+						},
+					},
+					{
+						type: 'custom',
+						options: {
+							validate: async () => {
+								try {
+									const r = await verifyCaptcha()
+									return r.response.data.message === 'Success'
+								}
+								catch {
+									return false
+								}
+							},
+							message: 'Le captcha est incorrect',
+							successMessage: 'Le captcha est correct',
+						},
+					},
+				]
+
+				return { args, captchaValue, customRules }
 			},
 			template: `
                 <VCard class="pa-8" max-width="600" min-width="300">
-                    <Captcha 
+                    <Captcha
                         url-create="https://free.mockerapi.com/mock/0adac32b-e832-4553-aa7f-0011b7f35f0c"
                         url-get-image="/captcha/captcha.png"
                         url-get-audio="/captcha/captcha.mp3"
-						:service="verifyCaptcha"
 						v-bind="args"
 						v-model="captchaValue"
+						:custom-rules="customRules"
                     />
                 </VCard>
             `,
@@ -164,15 +251,12 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
     <VCard class="pa-8" max-width="600">
-        <Captcha 
+        <Captcha
 			url-create="..."
 			url-get-image="..."
 			url-get-audio="/..."
-			service="(e) => {
-				// call the API to verify the captcha and return the response
-			}"
-			@validation:success="(e) => { ... }"
-			@validation:error="(e) => { ... }"
+			:custom-rules="customRules"
+			show-success-messages
 		/>
     </VCard>
 </template>
@@ -183,6 +267,36 @@ export const Default: Story = {
 				code: `<script setup lang="ts">
 import { Captcha } from '@cnamts/Captcha'
 import { VCard } from 'vuetify/components'
+
+const verifyCaptcha = () => {
+	// Appelle l'API pour vérifier le captcha et retourne la réponse
+}
+
+const customRules = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value) => String(value || '').length >= 6,
+			message: 'Le captcha doit contenir au moins 6 caractères.',
+		},
+	},
+	{
+		type: 'custom',
+		options: {
+			validate: async () => {
+				try {
+					const r = await verifyCaptcha()
+					return r.response.data.message === 'Success'
+				}
+				catch {
+					return false
+				}
+			},
+			message: 'Le captcha est incorrect',
+			successMessage: 'Le captcha est correct',
+		},
+	},
+]
 </script>
                 `,
 			},
@@ -207,15 +321,8 @@ export const Choice: Story = {
 				watch(() => args.modelValue, () => {
 					captchaValue.value = args.modelValue
 				})
-				const verifyCaptcha = () => {
-					if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
-						return Promise.resolve({ response: { data: { message: 'Success' } } })
-					}
-					else {
-						return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
-					}
-				}
-				return { args, captchaValue, verifyCaptcha }
+
+				return { args, captchaValue }
 			},
 			template: `
                 <VCard class="pa-8" max-width="600" min-width="300">
@@ -224,7 +331,6 @@ export const Choice: Story = {
                         url-get-image="/captcha/captcha.png"
                         url-get-audio="/captcha/captcha.mp3"
 						v-bind="args"
-						:service="verifyCaptcha"
 						v-model="captchaValue"
                     />
                 </VCard>
@@ -241,9 +347,6 @@ export const Choice: Story = {
 			url-create="..."
 			url-get-image="..."
 			url-get-audio="/..."
-			service="(e) => {
-				// call the API to verify the captcha and return the response
-			}"
 			@validation:success="(e) => { ... }"
 			@validation:error="(e) => { ... }"
 			type="choice"