@cnamts/synapse 1.0.22 → 1.0.23

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

@@ -0,0 +1,184 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import SyIconButton from './SyIconButton.vue'
+import { mdiClose, mdiAlert, mdiMagnify } from '@mdi/js'
+
+const meta = {
+	title: 'Composants/Boutons/SyIconButton',
+	component: SyIconButton,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	argTypes: {
+		'icon': {
+			control: { type: 'text' },
+			description: 'Nom de l\'icône à afficher (format Material Design Icons)',
+		},
+		'label': {
+			control: { type: 'text' },
+			description: 'Texte accessible obligatoire porté par `aria-label` sur le bouton',
+		},
+		'color': {
+			control: { type: 'text' },
+			description: 'Couleur de l\'icône (nom de couleur Vuetify)',
+		},
+		'size': {
+			options: ['x-small', 'small', 'default', 'large', 'x-large'],
+			control: {
+				type: 'select',
+			},
+			description: 'Taille du bouton et de l\'icône',
+			default: 'default',
+		},
+		'disabled': {
+			control: { type: 'boolean' },
+			description: 'Désactive le bouton',
+			default: false,
+		},
+		'onClick-icon-button': {
+			action: 'click-icon-button',
+			description: 'Événement émis lors du clic sur le bouton',
+		},
+		'variant': {
+			options: ['flat', 'elevated', 'tonal', 'outlined', 'text', 'plain'],
+			control: { type: 'select' },
+			description: 'Variante visuelle du bouton',
+		},
+	},
+} satisfies Meta<typeof SyIconButton>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				language: 'vue',
+				code: `
+				<template>
+					<SyIconButton :icon="mdiClose" label="Fermer" @click-icon-button="handleClick" />
+				</template>`,
+			},
+		],
+	},
+	args: {
+		'icon': mdiClose,
+		'label': 'Fermer',
+		'onClick-icon-button': fn(),
+	},
+	render: args => ({
+		components: { SyIconButton },
+		setup() {
+			const handleClick = () => {
+				alert('Bouton cliqué !')
+			}
+			return { args, mdiClose, handleClick }
+		},
+		template: `
+			<div class="pa-4">
+				<SyIconButton v-bind="args" @click-icon-button="handleClick" />
+			</div>
+		`,
+	}),
+}
+
+export const Disabled: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				language: 'vue',
+				code: `
+				<template>
+					<SyIconButton :icon="mdiClose" label="Fermer" :disabled="true" />
+				</template>`,
+			},
+		],
+	},
+	args: {
+		'icon': mdiClose,
+		'label': 'Fermer',
+		'disabled': true,
+		'onClick-icon-button': fn(),
+	},
+	render: args => ({
+		components: { SyIconButton },
+		setup() {
+			return { args, mdiClose }
+		},
+		template: `
+			<div class="pa-4">
+				<SyIconButton v-bind="args" />
+			</div>
+		`,
+	}),
+}
+
+export const WithColor: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				language: 'vue',
+				code: `
+				<template>
+					<SyIconButton :icon="mdiAlert" label="Alerte" color="red" />
+				</template>`,
+			},
+		],
+	},
+	args: {
+		'icon': mdiAlert,
+		'label': 'Alerte',
+		'color': 'red',
+		'onClick-icon-button': fn(),
+	},
+	render: args => ({
+		components: { SyIconButton },
+		setup() {
+			return { args, mdiAlert }
+		},
+		template: `
+			<div class="pa-4">
+				<SyIconButton v-bind="args" />
+			</div>
+		`,
+	}),
+}
+
+export const WithSize: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				language: 'vue',
+				code: `
+				<template>
+					<SyIconButton :icon="mdiMagnify" label="Rechercher" size="small" />
+				</template>`,
+			},
+		],
+	},
+	args: {
+		'icon': mdiMagnify,
+		'label': 'Rechercher',
+		'onClick-icon-button': fn(),
+	},
+	render: args => ({
+		components: { SyIconButton },
+		setup() {
+			const sizes = ['x-small', 'small', 'default', 'large', 'x-large']
+			return { args, mdiMagnify, sizes }
+		},
+		template: `
+			<div class="pa-4 d-flex align-center ga-4">
+				<SyIconButton v-for="size in sizes" :key="size" v-bind="args" :size="size" />
+			</div>
+		`,
+	}),
+}

package/src/components/Customs/SyIconButton/SyIconButton.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+	import type { IconValue } from 'vuetify/lib/composables/icons.mjs'
+	import SyIcon from '../SyIcon/SyIcon.vue'
+
+	type Size = 'x-small' | 'small' | 'default' | 'large' | 'x-large'
+	type Variant = 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'
+	type Color = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | (string & {})
+
+	const props = defineProps<{
+		icon: IconValue
+		label: string
+		color?: Color
+		size?: Size
+		disabled?: boolean
+		variant?: Variant
+	}>()
+
+	defineEmits<{ 'click-icon-button': [] }>()
+</script>
+
+<template>
+	<v-btn
+		:disabled="props.disabled"
+		:aria-label="props.label"
+		:variant="props.variant ?? 'text'"
+		:size="props.size"
+		class="rounded-circle"
+		icon
+		@click="$emit('click-icon-button')"
+	>
+		<SyIcon
+			:icon="props.icon"
+			:size="props.size"
+			:color="props.color"
+			:decorative="true"
+		/>
+	</v-btn>
+</template>

package/src/components/Customs/SyIconButton/accessibilite/Accessibility.mdx

@@ -0,0 +1,64 @@
+import { Meta, Primary } from '@storybook/blocks';
+import * as SyIconButtonStories from '../SyIconButton.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
+
+<Meta of={SyIconButtonStories} />
+
+<AccessibilityGuideLayout
+	componentName="SyIconButton"
+	iconSrc={AccessibilityIcon}
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				<li><strong>Élément bouton</strong> : le composant repose sur un <code>v-btn</code> qui génère un élément <code>&lt;button&gt;</code> natif — il est nativement reconnu par les lecteurs d'écran et les outils d'assistance</li>
+				<li><strong>Prop <code>label</code> obligatoire</strong> : la prop <code>label</code> est requise et est portée par le bouton via <code>aria-label</code> — elle constitue le nom accessible du bouton</li>
+				<li><strong>Icône décorative</strong> : le composant <code>SyIcon</code> interne reçoit <code>:decorative="true"</code> — l'icône est ignorée par les lecteurs d'écran car le bouton porte déjà le nom accessible via <code>aria-label</code></li>
+				<li><strong>Prop <code>disabled</code></strong> : lorsque <code>disabled</code> est à <code>true</code>, l'attribut <code>disabled</code> est appliqué nativement sur le <code>&lt;button&gt;</code>, le rendant inaccessible au clavier et annoncé comme désactivé par les lecteurs d'écran</li>
+				<li><strong>Prop <code>variant</code></strong> : par défaut à <code>text</code> — les autres variantes (<code>outlined</code>, <code>tonal</code>, etc.) n'affectent pas l'accessibilité du bouton</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li><strong>Focusable</strong> : le bouton est naturellement focusable via <kbd>Tab</kbd> grâce à l'élément <code>&lt;button&gt;</code> natif</li>
+				<li><strong>Activation</strong> : le bouton peut être activé via <kbd>Entrée</kbd> ou <kbd>Espace</kbd> nativement</li>
+				<li><strong>État désactivé</strong> : lorsque <code>disabled</code> est à <code>true</code>, le bouton est retiré de l'ordre de tabulation et ne peut pas être activé au clavier</li>
+				<li><strong>Événement</strong> : le composant émet <code>click-icon-button</code> au clic ou à l'activation clavier</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SyIconButton">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>La prop <code>label</code> est <strong>obligatoire</strong> — sans elle, le bouton icône n'a pas de nom accessible et sera incompréhensible pour les utilisateurs de lecteurs d'écran</li>
+			<li>Le <code>label</code> doit décrire l'<strong>action</strong> du bouton et non l'icône elle-même (ex. <em>"Fermer"</em> plutôt que <em>"Croix"</em>)</li>
+			<li>Ne jamais fournir un <code>label</code> vide (<code>""</code>) — cela rendrait le bouton inaccessible</li>
+			<li>Utiliser <code>disabled</code> plutôt que de masquer le bouton lorsqu'il est temporairement indisponible, afin de préserver la cohérence de la mise en page</li>
+			<li>Ne pas ajouter d'<code>aria-label</code> supplémentaire sur le composant parent — celui du <code>v-btn</code> est suffisant</li>
+			<li>La prop <code>variant</code> ne doit pas être choisie pour des raisons d'accessibilité — s'assurer que le contraste reste suffisant quelle que soit la variante utilisée (WCAG 1.4.3)</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 4.1.2 – Name, Role, Value</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.1.1 – Non-text Content</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 2.1.1 – Keyboard</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.4.3 – Contrast (Minimum)</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/button/" target="_blank" style={{ color: '#0C41BD' }}>ARIA Authoring Practices – Button Pattern</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyIconButton from '../SyIconButton.vue'
+
+const globalStubs = {
+	global: {
+		stubs: {
+			'v-btn': {
+				template: '<button :aria-label="ariaLabel" :disabled="disabled"><slot></slot></button>',
+				props: ['ariaLabel', 'disabled', 'size', 'variant', 'icon'],
+			},
+			'SyIcon': {
+				template: '<span class="sy-icon" :aria-hidden="decorative ? true : undefined"></span>',
+				props: ['icon', 'color', 'size', 'decorative'],
+			},
+		},
+	},
+}
+
+describe('SyIconButton – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+			},
+			...globalStubs,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyIconButton – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations when disabled', async () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+				disabled: true,
+			},
+			...globalStubs,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyIconButton – disabled', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with color and size', async () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-alert',
+				label: 'Alerte importante',
+				color: 'primary',
+				size: 'large',
+			},
+			...globalStubs,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyIconButton – color and size', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has aria-label on the button', async () => {
+		const wrapper = mount(SyIconButton, {
+			props: {
+				icon: 'mdi-close',
+				label: 'Fermer',
+			},
+			...globalStubs,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+
+		assertNoA11yViolations(results, 'SyIconButton – aria-label on button', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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/SyTextField/SyTextField.vue

@@ -667,7 +667,7 @@
 		>
 			<!-- Prepend -->
 			<template
-				v-if="props.prependIcon || props.prependTooltip"
+				v-if="props.prependIcon || props.prependTooltip || $slots['prepend']"
 				#prepend
 			>
 				<slot name="prepend">
@@ -706,7 +706,7 @@
 
 			<!-- Append -->
 			<template
-				v-if="props.appendIcon || props.appendTooltip"
+				v-if="props.appendIcon || props.appendTooltip || $slots['append']"
 				#append
 			>
 				<slot name="append">
@@ -743,6 +743,14 @@
 				</slot>
 			</template>
 
+			<!-- Default slot passthrough: renders inside v-field__input (flex-wrap container) -->
+			<template
+				v-if="$slots.default"
+				#default
+			>
+				<slot />
+			</template>
+
 			<!-- Prepend inner -->
 			<template #prepend-inner>
 				<slot name="prepend-inner">
@@ -795,6 +803,16 @@
 			<template #details>
 				<slot name="details" />
 			</template>
+
+			<template #loader="{ color: loaderColor, isActive: loaderActive }">
+				<VProgressLinear
+					v-if="loaderActive"
+					indeterminate
+					rounded
+					:color="loaderColor"
+					:aria-label="props.label ? `Chargement de ${props.label}` : 'Chargement en cours'"
+				/>
+			</template>
 		</VTextField>
 
 		<div