@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/SocialMediaLinks/SocialMediaLinks.vue

@@ -62,7 +62,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
+@use '@/assets/overrides/breakpoints' as bp;
 
 .vd-social-media-links {
 	display: flex;
@@ -74,7 +74,7 @@ li {
 }
 
 .vd-social-media-links-label.text--primary {
-	color: tokens.$blue-base;
+	color: rgb(var(--v-theme-blue-base));
 	font-weight: 600;
 	margin: 0;
 	padding: 0;
@@ -91,7 +91,7 @@ li {
 }
 
 .vd-social-media-links-icon {
-	color: tokens.$grey-base !important;
+	color: rgb(var(--v-theme-grey-base)) !important;
 }
 
 .vd-social-media-links-icon--x {
@@ -105,7 +105,7 @@ li {
 	border: 0;
 
 	&:focus-visible {
-		outline: 3px solid tokens.$blue-base;
+		outline: 3px solid rgb(var(--v-theme-blue-base));
 		outline-offset: -1px;
 	}
 }
@@ -121,7 +121,7 @@ li {
 	}
 }
 
-@media (width >= 768px) {
+@media #{bp.$up-tablet} {
 	.vd-social-media-links-label {
 		text-align: right;
 	}
@@ -131,7 +131,7 @@ li {
 	}
 }
 
-@media (width <= 767px) {
+@media #{bp.$down-mobile} {
 	.vd-social-media-links-label {
 		text-align: left;
 	}

package/src/components/SubHeader/SubHeader.vue

@@ -220,7 +220,7 @@
 	}
 
 	.vd-data-list-item-action-btn {
-		color: #fff !important;
+		color: rgb(var(--v-theme-textOnDark)) !important;
 	}
 }
 

package/src/components/SyAlert/SyAlert.vue

@@ -119,8 +119,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-@use '@/assets/apTokens';
 @use 'sass:map';
 
 .sy-alert {
@@ -128,7 +126,7 @@
 }
 
 .alert {
-	padding: tokens.$padding-4;
+	padding: var(--v-padding-4);
 }
 
 .alert-icon {
@@ -165,7 +163,7 @@
 	letter-spacing: normal;
 
 	span {
-		font-size: 14px;
+		font-size: var(--v-fontSize-liensEtLibelles);
 	}
 
 	&:focus-visible {
@@ -187,15 +185,15 @@
 	.alert {
 		display: flex;
 		flex-direction: column;
-		background-color: tokens.$white-base;
+		background-color: rgb(var(--v-theme-surface));
 
 		:deep(.v-alert__content) {
 			align-self: flex-start !important;
-			margin-top: tokens.$padding-4;
+			margin-top: var(--v-padding-4);
 		}
 
 		:deep(.v-alert__close) {
-			margin-top: tokens.$padding-4;
+			margin-top: var(--v-padding-4);
 			align-self: flex-end;
 		}
 
@@ -219,7 +217,7 @@
 @mixin redesign($type, $map) {
 	&.alert--#{$type}.v-alert--variant-tonal {
 		background: map.get($map, 'background') !important;
-		color: tokens.$colors-text-base !important;
+		color: rgb(var(--v-theme-textBase)) !important;
 
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
@@ -299,7 +297,7 @@
 
 .v-alert.v-theme--dark {
 	&.v-alert--variant-outlined {
-		background-color: tokens.$white-base !important;
+		background-color: rgb(var(--v-theme-surface)) !important;
 	}
 
 	.alert-close-btn {

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

@@ -0,0 +1,46 @@
+import SyAlert from '../SyAlert.vue'
+
+describe('SyAlert - Visual regression tests', () => {
+	const types = ['info', 'success', 'warning', 'error'] as const
+	const variants = ['tonal', 'outlined'] as const
+
+	types.forEach((type) => {
+		it(`displays the "${type}" type correctly`, () => {
+			cy.mountWithVuetify(SyAlert, {
+				props: { type },
+				slots: {
+					default: `Ceci est une alerte de type ${type}`,
+				},
+			})
+
+			cy.get('.v-alert').should('be.visible')
+			cy.matchImageSnapshot(`sy-alert-${type}`, cy.get('.v-alert'))
+		})
+	})
+
+	variants.forEach((variant) => {
+		it(`displays the "${variant}" variant correctly`, () => {
+			cy.mountWithVuetify(SyAlert, {
+				props: { type: 'info', variant },
+				slots: {
+					default: `Alerte en variante ${variant}`,
+				},
+			})
+
+			cy.get('.v-alert').should('be.visible')
+			cy.matchImageSnapshot(`sy-alert-variant-${variant}`, cy.get('.v-alert'))
+		})
+	})
+
+	it('displays the close button when closable', () => {
+		cy.mountWithVuetify(SyAlert, {
+			props: { type: 'info', closable: true },
+			slots: {
+				default: 'Alerte avec bouton de fermeture',
+			},
+		})
+
+		cy.get('.v-alert').should('be.visible')
+		cy.matchImageSnapshot('sy-alert-closable', cy.get('.v-alert'))
+	})
+})

package/src/components/SyBtnMenu/SyBtnMenu.vue

@@ -260,8 +260,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-user-menu-btn-ctn {
 	position: relative;
 	z-index: 1;
@@ -285,12 +283,12 @@
 	}
 
 	&:focus::before {
-		background: tokens.$blue-base;
+		background: rgb(var(--v-theme-blue-base));
 		opacity: 0.08;
 	}
 
 	&:focus {
-		background: rgba(tokens.$blue-base, 0.08) !important;
+		background: rgba(var(--v-theme-blue-base), 0.08) !important;
 	}
 
 	.subtitle {

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

@@ -9,11 +9,11 @@ const meta = {
 	parameters: {
 		docs: {
 			controls: {
-				exclude: ['rules', 'validateOn', 'update:modelValue', 'onUpdate:modelValue'],
+				exclude: ['validateOn', 'update:modelValue', 'onUpdate:modelValue'],
 			},
 		},
 		controls: {
-			exclude: ['rules', 'validateOn', 'onUpdate:modelValue'],
+			exclude: ['validateOn', 'onUpdate:modelValue'],
 		},
 	},
 	argTypes: {
@@ -89,6 +89,142 @@ const meta = {
 			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',
+			},
+		},
+		hasError: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état erreur',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		hasWarning: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état alerte',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		hasSuccess: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état succès',
+			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',
 			},
 		},
 	},

package/src/components/SyTextArea/SyTextArea.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 	import { computed, ref, toRef, watch } from 'vue'
 	import type { VTextarea } from 'vuetify/components'
-	import { locales } from './locales'
 	import useTextActions from './useTextActions'
-
-	type Rule = (value: string) => boolean | string
+	import { useDefaultValidationRules, type TextareaRule as Rule } from './useDefaultValidationRules'
+	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+	import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: string
@@ -20,12 +20,11 @@
 		color?: string
 		label: string
 		bgColor?: string
-	}>(), {
+	} & FieldValidationProps>(), {
 		modelValue: '',
 		trim: false,
 		replaceTabs: undefined,
 		rules: () => [],
-		required: false,
 		maxLines: undefined,
 		autoWrap: undefined,
 		normalize: false,
@@ -33,6 +32,7 @@
 		variant: 'outlined',
 		color: 'primary',
 		bgColor: 'white',
+		...validationPropsDefaults,
 	})
 
 	const emits = defineEmits<{
@@ -41,6 +41,7 @@
 
 	const textAreaRef = ref<VTextarea | null>(null)
 	const hasInteracted = ref(false)
+	const focused = ref(false)
 
 	const internalValue = ref(props.modelValue)
 	watch(
@@ -87,25 +88,48 @@
 		internalValue.value = value
 	}
 
-	const internalRules = computed<Rule[]>(() => {
-		const internalRules: Rule[] = []
+	const { vuetifyRules: defaultVuetifyRules, customRules: defaultCustomRules } = useDefaultValidationRules({
+		required: toRef(props, 'required'),
+		maxLines: toRef(props, 'maxLines'),
+		hasInteracted,
+	})
 
-		internalRules.push((value: string) => {
-			if (props.required && hasInteracted.value && !value) {
-				return locales.required
-			}
-			return true
-		})
+	const mergedCustomRules = computed<SyValidationRule[]>(() => [
+		...defaultCustomRules.value,
+		...(props.customRules || []),
+	])
 
-		internalRules.push((value: string) => {
-			const lines = value.split('\n').length
-			if (lines > (props.maxLines as number)) {
-				return locales.maxLines(props.maxLines as number)
-			}
-			return true
-		})
+	const mergedVuetifyRules = computed<Rule[]>(() => [
+		...(props.rules || []),
+		...defaultVuetifyRules.value,
+	])
+
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: internalValue,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: toRef(props, 'label'),
+		rules: mergedVuetifyRules,
+		customRules: mergedCustomRules,
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused,
+	})
 
-		return internalRules
+	defineExpose({
+		validateOnSubmit: validate,
 	})
 
 </script>
@@ -117,13 +141,19 @@
 		:variant="variant"
 		:color="color"
 		:bg-color="props.bgColor"
+		:error="hasError"
+		:error-messages="errors"
+		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+		:max-errors="props.maxErrors"
+		:disabled="props.disabled"
+		:readonly="props.readonly"
 		:validate-on="validateOn"
-		:rules="[...props.rules, ...internalRules]"
+		:rules="props.useVuetifyValidation ? mergedVuetifyRules : undefined"
 		:label="label"
 		:aria-label="label"
 		:required="required"
 		:aria-required="required ? 'true' : undefined"
 		@update:model-value="execValueChange"
-		@update:focused="(e: boolean) => !e ? execBlurChange() : null"
+		@update:focused="(e: boolean) => { focused = e; if (!e) execBlurChange() }"
 	/>
 </template>

package/src/components/SyTextArea/tests/SyTextArea.spec.ts

@@ -1,6 +1,5 @@
 import { it, describe, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
 import SyTextArea from '../SyTextArea.vue'
 
 describe('SyTextArea', () => {
@@ -126,11 +125,16 @@ describe('SyTextArea', () => {
 			},
 		})
 		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
 		await textarea.setValue('content\ncontent\ncontent\ncontent\ncontent\ncontent')
+		await textarea.trigger('blur')
+
 		expect(wrapper.text()).toContain('Ce champ ne peut pas dépasser 5 lignes')
 
+		await textarea.trigger('focus')
 		await textarea.setValue('content\ncontent\ncontent\ncontent\ncontent')
-		await nextTick()
+		await textarea.trigger('blur')
+
 		expect(wrapper.text()).not.toContain('Ce champ ne peut pas dépasser 5 lignes')
 	})
 
@@ -201,4 +205,123 @@ describe('SyTextArea', () => {
 
 		expect(textarea.element.value).toBe('new  value')
 	})
+
+	it('shows custom error from customRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: (value: string) => value.includes('ok'),
+							message: 'Le texte doit contenir ok',
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('test')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		const isValid = await (wrapper.vm as { validateOnSubmit: () => Promise<boolean> }).validateOnSubmit()
+		expect(isValid).toBe(false)
+	})
+
+	it('shows vuetify rule error when useVuetifyValidation is true', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				useVuetifyValidation: true,
+				rules: [
+					(value: string) => value.includes('ok') || 'Erreur Vuetify personnalisée',
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('test')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Erreur Vuetify personnalisée')
+	})
+
+	it('shows custom warning from customWarningRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: () => true,
+						},
+					},
+				],
+				customWarningRules: [
+					{
+						type: 'custom',
+						options: {
+							warningMessage: 'Avertissement personnalisé',
+							validate: () => false,
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('valeur')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Avertissement personnalisé')
+	})
+
+	it('shows custom success from customSuccessRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: () => true,
+						},
+					},
+				],
+				customSuccessRules: [
+					{
+						type: 'custom',
+						options: {
+							successMessage: 'Succès personnalisé',
+							validate: () => true,
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('valeur')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Succès personnalisé')
+	})
 })