@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/SubHeader/tests/SubHeader.visual.cy.ts

@@ -0,0 +1,48 @@
+import SubHeader from '../SubHeader.vue'
+
+describe('SubHeader - Visual regression tests', () => {
+	it('displays the sub header by default', () => {
+		cy.mountWithVuetify(SubHeader, {
+			props: { titleText: 'Titre de la page' },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sub-header-default', cy.get('.v-application'))
+	})
+
+	it('displays the sub header with subtitle', () => {
+		cy.mountWithVuetify(SubHeader, {
+			props: {
+				titleText: 'Titre',
+				subTitleText: 'Sous-titre',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sub-header-with-subtitle', cy.get('.v-application'))
+	})
+
+	it('displays the sub header without back button', () => {
+		cy.mountWithVuetify(SubHeader, {
+			props: {
+				titleText: 'Titre',
+				hideBackBtn: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sub-header-no-back-btn', cy.get('.v-application'))
+	})
+
+	it('displays the sub header in loading state', () => {
+		cy.mountWithVuetify(SubHeader, {
+			props: {
+				titleText: 'Titre',
+				loading: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sub-header-loading', cy.get('.v-application'))
+	})
+})

package/src/components/SyAlert/SyAlert.vue

@@ -168,7 +168,7 @@
 
 	&:focus-visible {
 		outline: solid 2px black !important;
-		outline-color: var(--v-primary-base) !important;
+		outline-color: var(--v-theme-primary) !important;
 		outline-offset: 2px !important;
 
 		&::after {
@@ -217,7 +217,7 @@
 @mixin redesign($type, $map) {
 	&.alert--#{$type}.v-alert--variant-tonal {
 		background: map.get($map, 'background') !important;
-		color: rgb(var(--v-theme-textBase)) !important;
+		color: rgb(var(--v-theme-onSurface)) !important;
 
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
@@ -241,7 +241,7 @@
 			background: map.get($map, 'icon-bg');
 
 			:deep(svg) {
-				fill: map.get($map, 'accent');
+				fill: map.get($map, 'icon');
 			}
 		}
 	}
@@ -256,41 +256,41 @@
 	@include redesign(
 		'warning',
 		(
-			'background': var(--alert-warning-background),
-			'accent': var(--alert-warning-accent),
-			'border': var(--alert-warning-border),
-			'icon':var(--alert-warning-icon),
-			'icon-bg': var(--alert-warning-icon-bg),
+			'background': rgb(var(--v-theme-warningVariant)),
+			'accent': rgb(var(--v-theme-onWarningVariant)),
+			'border': rgb(var(--v-theme-onWarningVariant)),
+			'icon': rgb(var(--v-theme-onWarningVariant)),
+			'icon-bg': rgb(var(--v-theme-warningVariant90)),
 		)
 	);
 	@include redesign(
 		'success',
 		(
-			'background': var(--alert-success-background),
-			'accent': var(--alert-success-accent),
-			'border': var(--alert-success-border),
-			'icon':var(--alert-success-icon),
-			'icon-bg': var(--alert-success-icon-bg),
+			'background': rgb(var(--v-theme-successVariant)),
+			'accent': rgb(var(--v-theme-onSuccessVariant)),
+			'border': rgb(var(--v-theme-onSuccessVariant)),
+			'icon':rgb(var(--v-theme-onSuccessVariant)),
+			'icon-bg': rgb(var(--v-theme-successVariant90)),
 		)
 	);
 	@include redesign(
 		'error',
 		(
-			'background': var(--alert-error-background),
-			'accent': var(--alert-error-accent),
-			'border': var(--alert-error-border),
-			'icon':var(--alert-error-icon),
-			'icon-bg': var(--alert-error-icon-bg),
+			'background': rgb(var(--v-theme-errorVariant)),
+			'accent': rgb(var(--v-theme-error)),
+			'border': rgb(var(--v-theme-error)),
+			'icon':rgb(var(--v-theme-error)),
+			'icon-bg': rgb(var(--v-theme-errorVariant90)),
 		)
 	);
 	@include redesign(
 		'info',
 		(
-			'background': var(--alert-info-background),
-			'accent': var(--alert-info-accent),
-			'border': var(--alert-info-border),
-			'icon':var(--alert-info-icon),
-			'icon-bg': var(--alert-info-icon-bg),
+			'background': rgb(var(--v-theme-infoVariant)),
+			'accent': rgb(var(--v-theme-info)),
+			'border': rgb(var(--v-theme-info)),
+			'icon':rgb(var(--v-theme-info)),
+			'icon-bg': rgb(var(--v-theme-infoVariant90)),
 		)
 	);
 }

package/src/components/SyHeading/tests/SyHeading.visual.cy.ts

@@ -0,0 +1,33 @@
+import SyHeading from '../SyHeading.vue'
+
+describe('SyHeading - Visual regression tests', () => {
+	it('displays a level 1 heading', () => {
+		cy.mountWithVuetify(SyHeading, {
+			props: { level: 1 },
+			slots: { default: 'Titre de niveau 1' },
+		})
+
+		cy.get('.sy-heading').should('be.visible')
+		cy.matchImageSnapshot('sy-heading-level-1', cy.get('.sy-heading'))
+	})
+
+	it('displays a level 2 heading', () => {
+		cy.mountWithVuetify(SyHeading, {
+			props: { level: 2 },
+			slots: { default: 'Titre de niveau 2' },
+		})
+
+		cy.get('.sy-heading').should('be.visible')
+		cy.matchImageSnapshot('sy-heading-level-2', cy.get('.sy-heading'))
+	})
+
+	it('displays a level 3 heading', () => {
+		cy.mountWithVuetify(SyHeading, {
+			props: { level: 3 },
+			slots: { default: 'Titre de niveau 3' },
+		})
+
+		cy.get('.sy-heading').should('be.visible')
+		cy.matchImageSnapshot('sy-heading-level-3', cy.get('.sy-heading'))
+	})
+})

package/src/components/SyTextArea/SyTextArea.stories.ts

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import SyTextArea from './SyTextArea.vue'
 import type { VTextarea } from 'vuetify/components'
 import { fn } from '@storybook/test'
+import { ref, onMounted, nextTick } from 'vue'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
 
 const meta = {
 	title: 'Composants/Formulaires/SyTextArea',
@@ -17,6 +19,25 @@ const meta = {
 		},
 	},
 	argTypes: {
+		...getValidationDocumentation('string'),
+		uniqueId: {
+			control: { type: 'text' },
+			description: 'Identifiant unique du composant',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'undefined' },
+				category: 'props',
+			},
+		},
+		counter: {
+			control: { type: 'boolean' },
+			description: 'Affiche un compteur de caractères. `true` affiche uniquement le nombre de caractères saisis, un nombre affiche le format `X / N`.',
+			table: {
+				type: { summary: 'boolean | number' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
 		label: {
 			control: { type: 'text' },
 			description: 'Texte affiché au-dessus du champ',
@@ -83,148 +104,40 @@ const meta = {
 				defaultValue: { summary: 'outlined' },
 			},
 		},
-		required: {
+		clearable: {
 			control: { type: 'boolean' },
-			description: 'Indique si le champ est requis',
+			description: 'Affiche un bouton pour vider le champ',
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
-				category: 'validation',
-			},
-		},
-		rules: {
-			control: { type: 'object' },
-			description: 'Règles de validation Vuetify (mode useVuetifyValidation=true)',
-			table: {
-				type: { summary: 'Array<(value: string) => boolean | string>' },
-				defaultValue: { summary: '[]' },
-				category: 'validation',
-			},
-		},
-		useVuetifyValidation: {
-			control: { type: 'boolean' },
-			description: 'Active la validation Vuetify (sinon validation unifiée customRules)',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
-				category: 'validation',
-			},
-		},
-		isValidateOnBlur: {
-			control: { type: 'boolean' },
-			description: 'Déclenche la validation au blur (sinon à la saisie)',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'true' },
-				category: 'validation',
-			},
-		},
-		disableErrorHandling: {
-			control: { type: 'boolean' },
-			description: 'Désactive la gestion des messages d\'erreur/alerte/succès',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
-				category: 'validation',
-			},
-		},
-		showSuccessMessages: {
-			control: { type: 'boolean' },
-			description: 'Affiche les messages de succès',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'true' },
-				category: 'validation',
-			},
-		},
-		customRules: {
-			control: { type: 'object' },
-			description: 'Règles d\'erreur pour le mode validation unifiée',
-			table: {
-				type: { summary: 'ValidationRule[]' },
-				defaultValue: { summary: '[]' },
-				category: 'validation',
-			},
-		},
-		customWarningRules: {
-			control: { type: 'object' },
-			description: 'Règles d\'alerte pour le mode validation unifiée',
-			table: {
-				type: { summary: 'ValidationRule[]' },
-				defaultValue: { summary: '[]' },
-				category: 'validation',
-			},
-		},
-		customSuccessRules: {
-			control: { type: 'object' },
-			description: 'Règles de succès pour le mode validation unifiée',
-			table: {
-				type: { summary: 'ValidationRule[]' },
-				defaultValue: { summary: '[]' },
-				category: 'validation',
-			},
-		},
-		errorMessages: {
-			control: { type: 'object' },
-			description: 'Messages d\'erreur externes ajoutés au résultat de validation',
-			table: {
-				type: { summary: 'string[] | null' },
-				defaultValue: { summary: 'null' },
-				category: 'validation',
-			},
-		},
-		warningMessages: {
-			control: { type: 'object' },
-			description: 'Messages d\'alerte externes ajoutés au résultat de validation',
-			table: {
-				type: { summary: 'string[] | null' },
-				defaultValue: { summary: 'null' },
-				category: 'validation',
-			},
-		},
-		successMessages: {
-			control: { type: 'object' },
-			description: 'Messages de succès externes ajoutés au résultat de validation',
-			table: {
-				type: { summary: 'string[] | null' },
-				defaultValue: { summary: 'null' },
-				category: 'validation',
+				category: 'props',
 			},
 		},
-		hasError: {
-			control: { type: 'boolean' },
-			description: 'Force l\'état erreur',
+		helpText: {
+			control: { type: 'text' },
+			description: 'Texte d\'aide affiché sous le champ en l\'absence de messages de validation',
 			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
-				category: 'validation',
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+				category: 'props',
 			},
 		},
-		hasWarning: {
+		hideDetails: {
 			control: { type: 'boolean' },
-			description: 'Force l\'état alerte',
+			description: 'Masque la zone des messages (erreurs, aide…)',
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
-				category: 'validation',
+				category: 'props',
 			},
 		},
-		hasSuccess: {
+		displayAsterisk: {
 			control: { type: 'boolean' },
-			description: 'Force l\'état succès',
+			description: 'Affiche un astérisque après le label quand le champ est requis',
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
-				category: 'validation',
-			},
-		},
-		maxErrors: {
-			control: { type: 'number' },
-			description: 'Nombre maximum de messages d\'erreur affichés',
-			table: {
-				type: { summary: 'number' },
-				defaultValue: { summary: '1' },
-				category: 'validation',
+				category: 'props',
 			},
 		},
 	},
@@ -244,6 +157,7 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+		uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Texte"
 		placeholder="Entrez votre texte ici"
@@ -264,6 +178,40 @@ const text = ref('')
 	},
 }
 
+export const HelpText: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'La prop `helpText` affiche un texte d\'aide sous le champ. Il disparaît au profit des messages de validation quand ceux-ci sont présents.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<SyTextArea
+		v-model="text"
+		label="Observations médicales"
+		help-text="Décrivez les symptômes observés, leur durée et leur intensité."
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+const text = ref('')
+</script>`,
+			},
+		],
+	},
+	args: {
+		'label': 'Observations médicales',
+		'helpText': 'Décrivez les symptômes observés, leur durée et leur intensité.',
+		'onUpdate:modelValue': fn(),
+	},
+}
+
 export const Required: Story = {
 	args: {
 		'label': 'Texte requis',
@@ -276,10 +224,10 @@ export const Required: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+		uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Texte requis"
 		:required="true"
-		style="width: 100%"
 	/>
 </template>
 				`,
@@ -296,6 +244,103 @@ const text = ref('')
 	},
 }
 
+export const HideDetails: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Avec `hideDetails: true`, la zone des messages est masquée tant qu\'il n\'y a pas de messages de validation. Utile pour gagner de l\'espace vertical dans les formulaires denses.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<SyTextArea
+		v-model="text"
+		label="Note interne"
+		:hide-details="true"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+const text = ref('')
+</script>`,
+			},
+		],
+	},
+	args: {
+		'label': 'Note interne',
+		'hideDetails': true,
+		'onUpdate:modelValue': fn(),
+	},
+	render: () => ({
+		components: { SyTextArea },
+		setup() {
+			const value = ref('')
+			return { value }
+		},
+		template: `
+			<SyTextArea
+				v-model="value"
+				label="Note interne"
+				:hide-details="true"
+				:show-success-messages="false"
+			/>
+		`,
+	}),
+}
+
+export const Clearable: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Avec `clearable: true`, un bouton permet de vider rapidement le contenu du textarea quand une valeur est présente.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<SyTextArea
+		v-model="text"
+		label="Commentaire"
+		clearable
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+const text = ref('Texte initial')
+</script>`,
+			},
+		],
+	},
+	args: {
+		'label': 'Commentaire',
+		'clearable': true,
+		'onUpdate:modelValue': fn(),
+	},
+	render: () => ({
+		components: { SyTextArea },
+		setup() {
+			const value = ref('Texte initial')
+			return { value }
+		},
+		template: `
+			<SyTextArea
+				v-model="value"
+				label="Commentaire"
+				clearable
+			/>
+		`,
+	}),
+}
+
 export const Trim: Story = {
 	args: {
 		'label': 'Trim text area',
@@ -308,6 +353,7 @@ export const Trim: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+		uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Trim text area"
 		:trim="true"
@@ -348,6 +394,7 @@ export const ReplaceTabs: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+	    uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Replace tabs text area"
 		:replace-tabs="4"
@@ -377,18 +424,13 @@ const text = ref('')
 }
 
 export const MaxLines: Story = {
-	args: {
-		'label': 'Max lines text area',
-		'modelValue': 'Lorem ipsum dolor sit amet,\n consectetur adipiscing elit,\n sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.',
-		'maxLines': 5,
-		'onUpdate:modelValue': fn(),
-	},
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+	    uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Max lines text area"
 		:max-lines="5"
@@ -415,6 +457,28 @@ const text = ref('')
 </div>`,
 		}),
 	],
+	render: () => ({
+		components: { SyTextArea },
+		setup() {
+			const value = ref('Lorem ipsum dolor sit amet,\n consectetur adipiscing elit,\n sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.')
+			const textAreaRef = ref<{ validateOnSubmit: () => Promise<boolean> } | null>(null)
+
+			onMounted(async () => {
+				await nextTick()
+				textAreaRef.value?.validateOnSubmit()
+			})
+
+			return { value, textAreaRef }
+		},
+		template: `
+			<SyTextArea
+				ref="textAreaRef"
+				v-model="value"
+				label="Max lines text area"
+				:max-lines="5"
+			/>
+		`,
+	}),
 }
 
 export const AutoWrap: Story = {
@@ -429,6 +493,7 @@ export const AutoWrap: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+	    uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Auto wrap text area"
 		:auto-wrap="50"
@@ -464,11 +529,17 @@ export const Normalize: Story = {
 		'onUpdate:modelValue': fn(),
 	},
 	parameters: {
+		docs: {
+			description: {
+				story: 'La normalisation NFC (Canonical Decomposition, followed by Canonical Composition) unifie les représentations Unicode d\'un même caractère. Par exemple, le caractère `é` peut être encodé de deux façons : comme un seul point de code (`U+00E9`) ou comme la lettre `e` suivie d\'un accent aigu combinant (`U+0065` + `U+0301`). Avec `normalize: true`, ces deux formes sont automatiquement converties en une seule représentation canonique à la saisie, garantissant la cohérence des données.',
+			},
+		},
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+	    uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Normalize text area"
 		:normalize="true"
@@ -490,7 +561,7 @@ const text = ref('')
 		story => ({
 			components: { story },
 			template: `<div>
-	<p class="pb-5">Le texte sera normalisé selon la norme NFC</p>
+	<p class="pb-5">La normalisation NFC unifie les représentations Unicode d'un même caractère. Par exemple, le caractère <code>é</code> peut être encodé de deux façons : comme un seul point de code (<code>U+00E9</code>) ou comme la lettre <code>e</code> suivie d'un accent aigu combinant (<code>U+0065</code> + <code>U+0301</code>).<br/>Avec <code>normalize: true</code>, ces deux formes sont automatiquement converties en une seule représentation canonique à la saisie, garantissant la cohérence des données.</p>
 	<story />
 </div>`,
 		}),