@cnamts/synapse 1.0.22 → 1.0.24

package/src/components/Customs/SyIconButton/tests/SyIconButton.spec.ts

@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SyIconButton from '../SyIconButton.vue'
+
+const globalStubs = {
+	global: {
+		stubs: {
+			'v-btn': {
+				template: '<button :aria-label="ariaLabel" :disabled="disabled" @click="$emit(\'click\', $event)"><slot></slot></button>',
+				props: ['ariaLabel', 'disabled', 'size', 'variant', 'icon'],
+				emits: ['click'],
+			},
+			'SyIcon': {
+				template: '<span class="sy-icon" :aria-hidden="decorative ? true : undefined"></span>',
+				props: ['icon', 'color', 'size', 'decorative'],
+			},
+		},
+	},
+}
+
+describe('SyIconButton', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+			},
+			...globalStubs,
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders a button with the correct aria-label', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+			},
+			...globalStubs,
+		})
+
+		const button = wrapper.find('button')
+		expect(button.exists()).toBe(true)
+		expect(button.attributes('aria-label')).toBe('Fermer')
+	})
+
+	it('renders the icon as decorative (aria-hidden="true")', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+			},
+			...globalStubs,
+		})
+
+		const icon = wrapper.find('.sy-icon')
+		expect(icon.exists()).toBe(true)
+		expect(icon.attributes('aria-hidden')).toBe('true')
+	})
+
+	it('renders the correct icon', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+			},
+			...globalStubs,
+		})
+
+		expect(wrapper.find('.sy-icon').exists()).toBe(true)
+	})
+
+	it('disables the button when disabled prop is true', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+				disabled: true,
+			},
+			...globalStubs,
+		})
+
+		expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+	})
+
+	it('emits click-icon-button when clicked', async () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+			},
+			...globalStubs,
+		})
+
+		await wrapper.find('button').trigger('click')
+		expect(wrapper.emitted('click-icon-button')).toBeTruthy()
+	})
+
+	it('passes the size prop to v-btn', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+				size: 'large',
+			},
+			...globalStubs,
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('passes the color prop to SyIcon', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+				color: 'primary',
+			},
+			...globalStubs,
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('passes the variant prop to v-btn', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+				variant: 'outlined',
+			},
+			...globalStubs,
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('uses text variant by default', () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+			},
+			...globalStubs,
+		})
+
+		const button = wrapper.find('button')
+		expect(button.exists()).toBe(true)
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Customs/SyIconButton/tests/__snapshots__/SyIconButton.spec.ts.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SyIconButton > passes the color prop to SyIcon 1`] = `
+<button
+  aria-label="Fermer"
+  class="rounded-circle"
+>
+  <span
+    aria-hidden="true"
+    class="sy-icon"
+  ></span>
+</button>
+`;
+
+exports[`SyIconButton > passes the size prop to v-btn 1`] = `
+<button
+  aria-label="Fermer"
+  class="rounded-circle"
+>
+  <span
+    aria-hidden="true"
+    class="sy-icon"
+  ></span>
+</button>
+`;
+
+exports[`SyIconButton > passes the variant prop to v-btn 1`] = `
+<button
+  aria-label="Fermer"
+  class="rounded-circle"
+>
+  <span
+    aria-hidden="true"
+    class="sy-icon"
+  ></span>
+</button>
+`;
+
+exports[`SyIconButton > renders correctly 1`] = `
+<button
+  aria-label="Fermer"
+  class="rounded-circle"
+>
+  <span
+    aria-hidden="true"
+    class="sy-icon"
+  ></span>
+</button>
+`;
+
+exports[`SyIconButton > uses text variant by default 1`] = `
+<button
+  aria-label="Fermer"
+  class="rounded-circle"
+>
+  <span
+    aria-hidden="true"
+    class="sy-icon"
+  ></span>
+</button>
+`;

package/src/components/Customs/SyPagination/SyPagination.vue

@@ -384,8 +384,8 @@
 				display: inline-block;
 				padding: 0.5rem 0.75rem;
 				text-decoration: none;
-				color: tokens.$primary-base;
-				border: 1px solid tokens.$primary-base;
+				color: var(--pagination-color);
+				border: 1px solid var(--pagination-border);
 				border-radius: 4px;
 				transition: all 0.2s ease;
 				font-size: 0.875rem;
@@ -393,11 +393,11 @@
 
 				&:hover,
 				&:focus {
-					background-color: rgba(tokens.$primary-base, 0.1);
+					background-color: var(--pagination-focused-background-color);
 				}
 
 				&[aria-current='page'] {
-					background-color: tokens.$primary-base;
+					background-color: var(--pagination-background-color);
 					color: white;
 					font-weight: 500;
 				}
@@ -414,7 +414,7 @@
 					border: none;
 					pointer-events: none;
 					display: inline-block;
-					color: tokens.$primary-base;
+					color: var(--pagination-ellipsis);
 					padding: 0.6rem;
 				}
 			}

package/src/components/Customs/SyRadioGroup/SyRadioGroup.vue

@@ -82,9 +82,6 @@
 	const isSubmitted = ref(false)
 
 	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
@@ -108,7 +105,7 @@
 			: [],
 	)
 
-	const validateField = (value: PropertyKey | null) => {
+	const validateField = async (value: PropertyKey | null) => {
 		// const stringValue = value != null ? String(value) : null
 
 		if (props.readonly) {
@@ -121,7 +118,7 @@
 			return true
 		}
 
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules],
 			props.customWarningRules,
@@ -130,9 +127,9 @@
 		return !result.hasError
 	}
 
-	const validateOnSubmit = () => {
+	const validateOnSubmit = async () => {
 		isSubmitted.value = true
-		return validateField(model.value)
+		return await validateField(model.value)
 	}
 
 	const checkErrorOnBlur = () => {

package/src/components/Customs/SyTextField/SyTextField.mdx

@@ -62,5 +62,5 @@ Le champ adapte automatiquement son apparence selon son état :
 `}
 />
 
-<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>
+<a href="/?path=/docs/guide-du-dev-guide-des-formulaires-syform-validation-automatique--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>
 

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

@@ -279,17 +279,9 @@ const meta = {
 			description: 'Largeur du champ',
 			control: { type: 'text' },
 		},
-		'validation': {
-			description: 'Valide le champ avec la valeur donnée',
-			type: '(value: string | number | null) => void',
-		},
 		'validateOnSubmit': {
-			description: 'Valide le champ lors de la soumission du formulaire',
-			type: '() => void',
-		},
-		'checkErrorOnBlur': {
-			description: 'Vérifie les erreurs lors de la perte de focus',
-			type: '() => void',
+			description: 'Valide le champ avec la valeur donnée',
+			type: '(value: string | number | null) => Promise<void>',
 		},
 		'append': {
 			description: 'Slot pour ajouter du contenu à droite du champ',
@@ -1165,9 +1157,6 @@ export const WithTooltips: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de champ avec des tooltips d\'information. Les icônes d\'information apparaissent automatiquement lorsque les props prependTooltip et/ou appendTooltip sont renseignées. La position des tooltips peut être contrôlée avec la prop tooltipLocation.',
@@ -1217,8 +1206,14 @@ export const ValidateOnBlur: Story = {
 			const value = ref(args.modelValue)
 			const fieldRef = ref()
 
-			function handleSubmit() {
-				const isValid = fieldRef.value?.validateOnSubmit()
+			watch(() => args.modelValue, (newValue) => {
+				if (value.value !== newValue) {
+					value.value = newValue
+				}
+			})
+
+			async function handleSubmit() {
+				const isValid = await fieldRef.value?.validateOnSubmit()
 				alert(isValid ? 'Formulaire valide !' : 'Formulaire invalide, veuillez corriger les erreurs.')
 			}
 
@@ -1231,9 +1226,8 @@ export const ValidateOnBlur: Story = {
 				</p>
 				<SyTextField
 					ref="fieldRef"
-					v-model="value"
 					v-bind="args"
-					@update:model-value="args.modelValue = $event"
+					v-model="value"
 				/>
 				<div class="mt-4">
 					<VBtn type="submit" color="primary">
@@ -1288,8 +1282,8 @@ import { SyTextField } from '@cnamts/synapse'
 const value = ref('')
 const fieldRef = ref()
 
-function handleSubmit() {
-	const isValid = fieldRef.value?.validateOnSubmit()
+async function handleSubmit() {
+	const isValid = await fieldRef.value?.validateOnSubmit()
 	if (!isValid) {
 		// Gérer l'erreur
 		return
@@ -1336,19 +1330,23 @@ export const FormValidation: Story = {
 				},
 			}]
 
-			const handleSubmit = () => {
+			const handleSubmit = async () => {
 				const fields = [
 					{ ref: nomField, name: 'Nom' },
 					{ ref: prenomField, name: 'Prénom' },
 					{ ref: ageField, name: 'Âge' },
 				]
 
-				const invalidFields = fields
-					.filter(({ ref }) => !ref.value?.validateOnSubmit())
-					.map(({ name }) => name)
+				const invalidFields: string[] = []
+				for (const { ref, name } of fields) {
+					const isValid = await ref.value?.validateOnSubmit()
+					if (!isValid) {
+						invalidFields.push(name)
+					}
+				}
 
 				if (invalidFields.length > 0) {
-					alert(`Les champs suivants sont invalides: ${invalidFields.join('\\n')}`)
+					alert(`Les champs suivants sont invalides: ${invalidFields.join(', ')}`)
 				}
 				else {
 					alert('Formulaire soumis avec succès !')
@@ -1561,9 +1559,13 @@ const nomField = ref()
 					{ ref: ageField, name: 'Âge' },
 				]
 
-				const invalidFields = fields
-					.filter(({ ref }) => !ref.value?.validateOnSubmit())
-					.map(({ name }) => name)
+				const invalidFields: string[] = []
+				for (const { ref, name } of fields) {
+					const isValid = await ref.value?.validateOnSubmit()
+					if (!isValid) {
+						invalidFields.push(name)
+					}
+				}
 
 				if (invalidFields.length > 0) {
 					alert('Les champs suivants sont invalides: ' + invalidFields.join('\\n'))