@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/ToolbarContainer/ToolbarContainer.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+	import { onMounted, ref } from 'vue'
+
+	const toolbar = ref<HTMLDivElement>()
+
+	let tools: Array<HTMLElement>
+
+	onMounted(() => {
+		tools = Array.from(toolbar.value?.querySelectorAll<HTMLElement>('button:not([disabled]), a:not([disabled]), input:not([disabled])') || [])
+		tools?.forEach((el) => {
+			el.setAttribute('tabindex', '-1')
+		})
+	})
+
+	function selectNextElement(e: Event & { target: HTMLElement }) {
+		const currentIndex = tools.findIndex(tool => tool === e.target)
+
+		const nextIndex = currentIndex < tools.length - 1 ? currentIndex + 1 : 0
+
+		const nextElem = tools.at(nextIndex)
+
+		e.target.setAttribute('tabindex', '-1')
+		nextElem?.setAttribute('tabindex', '0')
+		nextElem?.focus()
+	}
+
+	function selectPrevElement(e: Event & { target: HTMLElement }) {
+		let currentIndex = tools.findIndex(tool => tool === e.target)
+
+		const prevIndex = currentIndex > 0 ? currentIndex - 1 : tools.length - 1
+
+		const nextElem = tools.at(prevIndex)
+
+		e.target.setAttribute('tabindex', '-1')
+		nextElem?.setAttribute('tabindex', '0')
+		nextElem?.focus()
+	}
+
+	function selectFirstElement() {
+		const firstElement = tools.at(0)
+		if (!firstElement) {
+			return
+		}
+		document.activeElement?.setAttribute('tabindex', '-1')
+		firstElement.setAttribute('tabindex', '0')
+		firstElement.focus()
+	}
+
+	function selectLastElement() {
+		const lastElement = tools.at(-1)
+		if (!lastElement) {
+			return
+		}
+		document.activeElement?.setAttribute('tabindex', '-1')
+		lastElement.setAttribute('tabindex', '0')
+		lastElement.focus()
+	}
+
+	let lastElementFocused: HTMLElement | undefined = undefined
+
+	function setupFocus() {
+		// Remove the ability to tab into the toolbar to be able to shift focus to previous focusable element
+		toolbar.value?.setAttribute('tabindex', '-1')
+
+		if (lastElementFocused) {
+			// If there is a last focused element, restore focus to it
+			lastElementFocused.setAttribute('tabindex', '0')
+			lastElementFocused.focus()
+		}
+		else {
+			selectFirstElement()
+		}
+	}
+
+	function saveFocus(e: FocusEvent) {
+		// Save the last focused element to restore focus later
+		if (e.target !== e.currentTarget) {
+			lastElementFocused = e.target as HTMLElement
+		}
+	}
+
+	function blurToolbar(e: FocusEvent) {
+		// When an item of the toolbar is blured it should not be focusable anymore
+		(e.target as HTMLElement)?.setAttribute('tabindex', '-1')
+
+		// When the toolbar loses focus, we need to set its focusable
+		if (toolbar.value?.contains(e.relatedTarget as HTMLElement)) {
+			return
+		}
+		toolbar.value?.setAttribute('tabindex', '0')
+	}
+</script>
+
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<template>
+	<div
+		ref="toolbar"
+		role="toolbar"
+		tabindex="0"
+		class="sy-toolbar"
+		@keydown.left="selectPrevElement"
+		@keydown.right="selectNextElement"
+		@keydown.up="selectPrevElement"
+		@keydown.down="selectNextElement"
+		@keydown.home.prevent="selectFirstElement"
+		@keydown.end.prevent="selectLastElement"
+		@focus="setupFocus"
+		@focus.capture="saveFocus"
+		@blur.capture="blurToolbar"
+	>
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.sy-toolbar:has(:focus-visible) {
+	position: relative;
+}
+
+.sy-toolbar:has(:focus-visible)::after {
+	content: '';
+	display: block;
+	position: absolute;
+	inset: -6px;
+	border-radius: 5px;
+	border: 2px solid rgb(var(--v-theme-primary));
+}
+</style>

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

@@ -0,0 +1,156 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Toolbar from '../ToolbarContainer.vue'
+import { VBtn } from 'vuetify/components'
+import { vuetify } from '@tests/unit/setup'
+import { defineComponent } from 'vue'
+
+describe('ToolbarContainer.vue', () => {
+	it('renders default slot content', () => {
+		const wrapper = mount(Toolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				default: '<div class="toolbar-content">Toolbar Content</div>',
+			},
+		})
+
+		expect(wrapper.find('.toolbar-content').exists()).toBe(true)
+	})
+
+	it('applies custom classes', () => {
+		const wrapper = mount(Toolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				class: 'custom-toolbar',
+			},
+		})
+
+		expect(wrapper.classes()).toContain('custom-toolbar')
+	})
+
+	it('set the focus to the first button', async () => {
+		const wrapper = mount(Toolbar, {
+			attachTo: document.body,
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				default: `
+				<div>
+					<VBtn>Action 1</VBtn>
+					<VBtn>Action 2</VBtn>
+				</div>
+				`,
+			},
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const firstButton = wrapper.find('button.v-btn')
+
+		await toolbar.trigger('focus')
+		expect(document.activeElement).toBe(firstButton.element)
+	})
+
+	it('focuses the button when the navigation key are pressed', async () => {
+		const wrapper = mount(Toolbar, {
+			attachTo: document.body,
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				default: `
+					<div>
+						<VBtn>Action 1</VBtn>
+						<VBtn>Action 2</VBtn>
+					</div>
+				`,
+			},
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const firstButton = wrapper.find('button.v-btn')
+		const secondButton = wrapper.findAll('button.v-btn')[1]
+
+		await toolbar.trigger('focus')
+		await firstButton.trigger('keydown', { key: 'ArrowRight' })
+		expect(document.activeElement).toBe(secondButton.element)
+		await secondButton.trigger('keydown', { key: 'ArrowLeft' })
+		expect(document.activeElement).toBe(firstButton.element)
+		await firstButton.trigger('keydown', { key: 'ArrowDown' })
+		expect(document.activeElement).toBe(secondButton.element)
+		await secondButton.trigger('keydown', { key: 'ArrowUp' })
+		expect(document.activeElement).toBe(firstButton.element)
+	})
+
+	it('focuses the first and last buttons when Home and End keys are pressed', async () => {
+		const wrapper = mount(Toolbar, {
+			attachTo: document.body,
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				default: `
+					<div>
+						<VBtn>Action 1</VBtn>
+						<VBtn>Action 2</VBtn>
+						<VBtn>Action 3</VBtn>
+						<VBtn>Action 4</VBtn>
+					</div>
+				`,
+			},
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const firstButton = wrapper.find('button.v-btn')
+		const lastButton = wrapper.findAll('button.v-btn')[3]
+
+		await toolbar.trigger('focus')
+		await firstButton.trigger('keydown', { key: 'End' })
+		expect(document.activeElement).toBe(lastButton.element)
+		await lastButton.trigger('keydown', { key: 'Home' })
+		expect(document.activeElement).toBe(firstButton.element)
+	})
+
+	it('keeps in memory the last focused button', async () => {
+		const TestComponent = defineComponent({
+			components: {
+				Toolbar,
+				VBtn,
+			},
+			template: `
+				<div>
+					<Toolbar>
+						<VBtn>Action 1</VBtn>
+						<VBtn>Action 2</VBtn>
+						<VBtn>Action 3</VBtn>
+					</Toolbar>
+					<VBtn>Action 4</VBtn>
+				</div>
+			`,
+		})
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const firstButton = wrapper.find('button.v-btn')
+		const secondButton = wrapper.findAll('button.v-btn')[1]
+		const lastButton = wrapper.findAll<HTMLElement>('button.v-btn')[3]
+
+		await toolbar.trigger('focus')
+		expect(document.activeElement).toBe(firstButton.element)
+		await firstButton.trigger('keydown', { key: 'ArrowRight' })
+		expect(document.activeElement).toBe(secondButton.element)
+		await lastButton.element.focus()
+		expect(document.activeElement).toBe(lastButton.element)
+		await toolbar.trigger('focus')
+		expect(document.activeElement).toBe(secondButton.element)
+	})
+})

package/src/components/UploadWorkflow/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/UserMenuBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -111,6 +111,13 @@ const meta = {
 				},
 			},
 		},
+		'default': {
+			control: false,
+			description: 'Ecrase le contenu du menu utilisateur',
+			table: {
+				category: 'slots',
+			},
+		},
 		'onLogout': {
 			action: 'logout',
 			description: 'Événement déclenché lors de la déconnexion de l\'utilisateur',
@@ -594,3 +601,70 @@ export const LogoutEvent: Story = {
 		}
 	},
 }
+
+export const Slot: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<UserMenuBtn
+		v-model="selected"
+		:full-name="fullName"
+	>
+		<div class="ma-6 text-center">
+			<p class="text-h6">
+				Bienvenue, {{ fullName }}
+			</p>
+
+			<p class="mt-2">
+				La création de votre compte est en cours,<br> vos services seront accessibles dans les prochains jours.
+			</p>
+		</div>
+	</UserMenuBtn>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { ref } from 'vue'
+	import { UserMenuBtn } from '@cnamts/synapse'
+
+	const selected = ref(null)
+	const fullName = ref('John Doe')
+
+</script>`,
+			},
+		],
+	},
+	args: {
+		modelValue: null,
+		hideLogoutBtn: false,
+		hideUserIcon: false,
+		isMobileView: false,
+		vuetifyOptions: undefined,
+		fullName: 'John Doe',
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args">
+			<div class="ma-6 text-center">
+			<p class="text-h6">
+				Bienvenue, {{ args.fullName }}
+			</p>
+
+			<p class="mt-2">
+				La création de votre compte est en cours,<br> vos services seront accessibles dans les prochains jours.
+			</p>
+		</div>
+	</UserMenuBtn>
+</div>`,
+		}
+	},
+}

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -64,23 +64,25 @@
 			</VIcon>
 		</template>
 		<template #footer-list-item>
-			<VListItem
-				v-if="!hideLogoutBtn"
-				class="logout"
-				v-bind="options['logoutListItem']"
-				@click="$emit('logout')"
-			>
-				<div class="d-flex">
-					<VIcon
-						:icon="mdiLoginVariant"
-						class="mr-4"
-						v-bind="options['logoutIcon']"
-					/>
-					<VListItemTitle class="logout">
-						{{ props.logoutText }}
-					</VListItemTitle>
-				</div>
-			</VListItem>
+			<slot>
+				<VListItem
+					v-if="!hideLogoutBtn"
+					class="logout"
+					v-bind="options['logoutListItem']"
+					@click="$emit('logout')"
+				>
+					<div class="d-flex">
+						<VIcon
+							:icon="mdiLoginVariant"
+							class="mr-4"
+							v-bind="options['logoutIcon']"
+						/>
+						<VListItemTitle class="logout">
+							{{ props.logoutText }}
+						</VListItemTitle>
+					</div>
+				</VListItem>
+			</slot>
 		</template>
 	</SyBtnSelect>
 </template>

package/src/components/index.ts

@@ -1,9 +1,9 @@
-export { default as DatePicker } from '@/components/DatePicker/DatePicker.vue'
+export { default as DatePicker } from '@/components/DatePicker/DatePicker/DatePicker.vue'
+export { useDateFormat } from '../composables/date/useDateFormatDayjs'
 export { useFieldValidation } from '../composables/rules/useFieldValidation'
 export type { RuleOptions } from '../composables/rules/useFieldValidation'
-export { useNotificationService } from '../services/NotificationService'
 export { useValidation } from '../composables/validation/useValidation'
-export { useDateFormat } from '../composables/date/useDateFormatDayjs'
+export { useNotificationService } from '../services/NotificationService'
 export { default as Accordion } from './Accordion/Accordion.vue'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
@@ -23,8 +23,8 @@ export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as DataList } from './DataList/DataList.vue'
 export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
 export { default as DataListItem } from './DataListItem/DataListItem.vue'
-export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
+export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
@@ -45,7 +45,6 @@ export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBt
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
 export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
-export { indicatifs } from './PhoneField/indicatifs'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
@@ -59,6 +58,7 @@ export { default as PageContainer } from './PageContainer/PageContainer.vue'
 export { default as PaginatedTable } from './PaginatedTable/PaginatedTable.vue'
 export { default as PasswordField } from './PasswordField/PasswordField.vue'
 export { default as PeriodField } from './PeriodField/PeriodField.vue'
+export { indicatifs } from './PhoneField/indicatifs'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as RangeField } from './RangeField/RangeField.vue'
 export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
@@ -68,7 +68,11 @@ export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as SyCheckbox } from './Customs/SyCheckbox/SyCheckbox.vue'
 export { default as SyTextArea } from './SyTextArea/SyTextArea.vue'
+export { default as SyServerTable } from './Tables/SyServerTable/SyServerTable.vue'
+export { default as SyTable } from './Tables/SyTable/SyTable.vue'
 export { default as TableToolbar } from './TableToolbar/TableToolbar.vue'
+export { default as ToolbarContainer } from './ToolbarContainer/ToolbarContainer.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'

package/src/composables/date/useDateFormatDayjs.ts

@@ -40,13 +40,18 @@ export const parseDate = (dateString: string | Date | null, format: string): Dat
 		}
 	}
 
-	// Utiliser dayjs pour parser la date
+	// Utiliser dayjs pour parser la date avec le mode strict
+	// Le mode strict garantit que le format est respecté exactement
 	const parsedDate = dayjs(dateString, format, true)
 
-	if (!parsedDate.isValid()) return null
+	if (!parsedDate.isValid()) {
+		// Si le parsing a échoué, retourner null
+		return null
+	}
 
 	// Extraire les composants de la date pour créer une date UTC
-	// Cela évite les problèmes de décalage de fuseau horaire
+	// Cela évite les problèmes de décalage de fuseau horaire et garantit
+	// que les dates au format dd/mm/yyyy sont correctement interprétées
 	return dayjs.utc()
 		.year(parsedDate.year())
 		.month(parsedDate.month())

package/src/composables/date/useDateInitializationDayjs.ts

@@ -24,17 +24,17 @@ export type DateInput = string | string[] | null | object
  * @returns Une Date ou null si la date est invalide
  */
 const parseToUTCDate = (dateStr: string, format: string): Date | null => {
-	if (!dayjs(dateStr, format).isValid()) return null
+	// Utiliser le parsing strict pour s'assurer que le format est respecté
+	const parsedDate = dayjs(dateStr, format, true)
+	if (!parsedDate.isValid()) return null
 
 	// Extraire les composants de la date à partir de la chaîne
-	const dateParts = dayjs(dateStr, format)
-
 	// Créer une date UTC avec les composants exacts pour éviter les décalages de fuseau horaire
 	// Utiliser set pour définir explicitement l'année, le mois et le jour
 	return dayjs.utc()
-		.year(dateParts.year())
-		.month(dateParts.month())
-		.date(dateParts.date())
+		.year(parsedDate.year())
+		.month(parsedDate.month())
+		.date(parsedDate.date())
 		.hour(0)
 		.minute(0)
 		.second(0)
@@ -59,23 +59,28 @@ export const initializeSelectedDates = (
 	// Déterminer le format à utiliser pour l'analyse
 	const parseFormat = returnFormat || displayFormat
 
+	// Fonction utilitaire pour essayer de parser une date avec plusieurs formats
+	const tryParseWithFormats = (dateStr: string): Date | null => {
+		// Essayer d'abord avec le format spécifié
+		let date = parseToUTCDate(dateStr, parseFormat)
+
+		// Si la date est invalide et qu'on a un format de retour différent, essayer avec le format d'affichage
+		if (date === null && returnFormat && parseFormat !== displayFormat) {
+			date = parseToUTCDate(dateStr, displayFormat)
+		}
+
+		return date
+	}
+
 	if (Array.isArray(modelValue)) {
 		if (modelValue.length >= 2) {
-			// Essayer d'abord avec le format de retour, puis avec le format d'affichage
-			let dates = [
-				parseToUTCDate(modelValue[0], parseFormat),
-				parseToUTCDate(modelValue[1], parseFormat),
+			// Parser les deux dates de la plage
+			const dates = [
+				tryParseWithFormats(modelValue[0]),
+				tryParseWithFormats(modelValue[1]),
 			]
 
-			// Si l'une des dates est invalide avec le format de retour, essayer avec le format d'affichage
-			if (dates.some(date => date === null) && returnFormat) {
-				dates = [
-					parseToUTCDate(modelValue[0], displayFormat),
-					parseToUTCDate(modelValue[1], displayFormat),
-				]
-			}
-
-			// Vérifie si l'une des dates est toujours invalide
+			// Vérifie si l'une des dates est invalide
 			if (dates.some(date => date === null)) {
 				return []
 			}
@@ -90,14 +95,8 @@ export const initializeSelectedDates = (
 		}
 
 		if (modelValue.length === 1) {
-			// Essayer d'abord avec le format de retour, puis avec le format d'affichage
-			let date = parseToUTCDate(modelValue[0], parseFormat)
-
-			// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
-			if (date === null && returnFormat) {
-				date = parseToUTCDate(modelValue[0], displayFormat)
-			}
-
+			// Parser une seule date
+			const date = tryParseWithFormats(modelValue[0])
 			return date === null ? [] : [date]
 		}
 
@@ -109,15 +108,8 @@ export const initializeSelectedDates = (
 		return null
 	}
 
-	// Essayer d'abord avec le format de retour, puis avec le format d'affichage
-	let date = parseToUTCDate(modelValue, parseFormat)
-
-	// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
-	if (date === null && returnFormat) {
-		date = parseToUTCDate(modelValue, displayFormat)
-	}
-
-	return date
+	// Parser la date avec les formats disponibles
+	return tryParseWithFormats(modelValue)
 }
 
 /**

package/src/composables/rules/useFieldValidation.ts

@@ -212,7 +212,6 @@ export function useFieldValidation() {
 					if (!options.date) {
 						return { error: 'Configuration de la règle invalide' }
 					}
-
 					const dateValue = parseDate(value)
 					if (!dateValue) {
 						return { error: 'Date invalide' }
@@ -300,7 +299,7 @@ export function useFieldValidation() {
 
 					return createValidationResult(
 						!isHolidayDay(dateValue),
-						options.message || options.warningMessage || `${identifier} n'est pas un jour férié.`,
+						options.message || options.warningMessage || `${identifier} est un jour férié.`,
 					)
 				}
 

package/src/designTokens/index.ts

@@ -1,9 +1,11 @@
 import { cnamSemanticTokens } from './tokens/cnam/cnamSemantic'
 import { cnamContextualTokens } from './tokens/cnam/cnamContextual'
 import { cnamColorsTokens } from './tokens/cnam/cnamColors'
+import { cnamFontsTokens } from './tokens/cnam/cnamFonts'
 import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
 import { cnamDarkTheme } from './tokens/cnam/cnamDarkTheme'
 import { paColorsTokens } from './tokens/pa/paColors'
+import { paFontsTokens } from './tokens/pa/paFonts'
 import { paSemanticTokens } from './tokens/pa/paSemantic'
 import { paContextualTokens } from './tokens/pa/paContextual'
 import { paLightTheme } from './tokens/pa/paLightTheme'
@@ -11,11 +13,13 @@ import { paDarkTheme } from './tokens/pa/paDarkTheme'
 
 export {
 	cnamColorsTokens,
+	cnamFontsTokens,
 	cnamSemanticTokens,
 	cnamContextualTokens,
 	cnamLightTheme,
 	cnamDarkTheme,
 	paColorsTokens,
+	paFontsTokens,
 	paSemanticTokens,
 	paContextualTokens,
 	paLightTheme,