@cnamts/synapse 1.0.1 → 1.0.3

package/src/composables/date/useDatePickerAccessibility.ts

@@ -1,7 +1,7 @@
 /**
  * Composable pour améliorer l'accessibilité du DatePicker
  */
-import { nextTick } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted } from 'vue'
 
 /**
  * Améliore l'accessibilité du DatePicker en ajoutant des attributs ARIA et des instructions pour les lecteurs d'écran
@@ -51,6 +51,7 @@ export function useDatePickerAccessibility() {
 	/**
 	 * Met à jour les attributs d'accessibilité du DatePicker
 	 * Ajoute des attributs ARIA et des instructions pour les lecteurs d'écran
+	 * Corrige également les attributs ARIA invalides
 	 */
 	const updateAccessibility = async (): Promise<void> => {
 		await nextTick()
@@ -67,23 +68,50 @@ export function useDatePickerAccessibility() {
 		const navigationButtons = datePickerEl.querySelectorAll('button')
 
 		// Attribuer des labels significatifs basés sur la position ou l'icône
-		navigationButtons.forEach((button) => {
+		navigationButtons.forEach(async (button) => {
+			// find btn with aria-label contain item
+			if (button.className.includes('v-date-picker-controls__mode-btn')) {
+				button.removeAttribute('aria-label')
+			}
+			// Vérifier si le bouton contient un SVG ou une icône
+			const svgEl = button.querySelector('svg')
 			const iconEl = button.querySelector('.v-icon')
-			if (!iconEl) return
 
-			// Utiliser le contenu de l'icône pour déterminer sa fonction
-			const iconContent = iconEl.textContent || ''
-			const iconClasses = iconEl.className || ''
+			// Get any existing visible text content
+			const buttonText = button.textContent?.trim() || ''
 
-			if (iconClasses.includes('mdi-chevron-left') || iconContent.includes('chevron-left')) {
-				button.setAttribute('aria-label', 'Mois précédent')
-			}
-			else if (iconClasses.includes('mdi-chevron-right') || iconContent.includes('chevron-right')) {
-				button.setAttribute('aria-label', 'Mois suivant')
+			// Traiter les boutons avec SVG
+			if (svgEl) {
+				const svgContent = svgEl.innerHTML
+
+				// Left arrow (previous month)
+				if (svgContent.includes('M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z')) {
+					const accessibleName = buttonText ? `${buttonText} (Mois précédent)` : 'Mois précédent'
+					button.setAttribute('aria-label', accessibleName)
+				}
+				// Right arrow (next month)
+				else if (svgContent.includes('M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z')) {
+					const accessibleName = buttonText ? `${buttonText} (Mois suivant)` : 'Mois suivant'
+					button.setAttribute('aria-label', accessibleName)
+				}
+				// Calendar icon
+				else if (svgContent.includes('M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z')) {
+					const accessibleName = buttonText ? `${buttonText} (Ouvrir le calendrier)` : 'Ouvrir le calendrier'
+					button.setAttribute('aria-label', accessibleName)
+				}
 			}
-			else if (iconClasses.includes('mdi-chevron-down') || iconContent.includes('chevron-down')
-				|| iconClasses.includes('mdi-menu-down') || iconContent.includes('menu-down')) {
-				button.setAttribute('aria-label', 'Changer de vue')
+			// Traiter les boutons avec icônes Material Design
+			else if (iconEl) {
+				// Left arrow (previous month)
+				if (iconEl.classList.contains('mdi-chevron-left')) {
+					const accessibleName = buttonText ? `${buttonText} (Mois précédent)` : 'Mois précédent'
+					button.setAttribute('aria-label', accessibleName)
+				}
+				// Right arrow (next month)
+				else if (iconEl.classList.contains('mdi-chevron-right')) {
+					const accessibleName = buttonText ? `${buttonText} (Mois suivant)` : 'Mois suivant'
+					button.setAttribute('aria-label', accessibleName)
+				}
 			}
 		})
 
@@ -114,9 +142,130 @@ export function useDatePickerAccessibility() {
 		datePickerEl.addEventListener('keydown', handleKeyDown as EventListener)
 	}
 
+	// Référence pour le MutationObserver
+	let observer: MutationObserver | null = null
+
+	/**
+	 * Corrige les attributs ARIA invalides dans le composant
+	 * Supprime les attributs aria-haspopup, aria-expanded et aria-controls inappropriés
+	 */
+	const fixAriaAttributes = () => {
+		try {
+			// Rechercher dans tout le document les éléments avec des attributs ARIA invalides
+			// Cibler les éléments dans les conteneurs DatePicker et DateTextInput
+			const containers = document.querySelectorAll('.date-picker-container, .v-date-picker')
+
+			if (containers.length === 0) {
+				return
+			}
+
+			const allInputsWithAriaExpanded = document.querySelectorAll('input[aria-expanded]')
+			allInputsWithAriaExpanded.forEach((input) => {
+				if (input) {
+					input.removeAttribute('aria-expanded')
+				}
+			})
+
+			// Pour chaque conteneur, rechercher et corriger les attributs ARIA invalides
+			containers.forEach((container) => {
+				if (!container) return
+
+				container.removeAttribute('aria-expanded')
+				container.removeAttribute('aria-haspopup')
+				container.removeAttribute('aria-controls')
+				// Find all elements with invalid ARIA attributes
+				const elementsWithAriaHaspopup = container.querySelectorAll('[aria-haspopup="menu"]')
+				elementsWithAriaHaspopup.forEach((element) => {
+					if (!element) return
+					element.removeAttribute('aria-haspopup')
+					element.removeAttribute('aria-controls')
+				})
+
+				// Find input elements with invalid ARIA attributes
+				const inputElements = container.querySelectorAll('input[aria-haspopup="menu"]')
+				inputElements.forEach((input) => {
+					if (!input) return
+					input.removeAttribute('aria-haspopup')
+					input.removeAttribute('aria-expanded')
+					input.removeAttribute('aria-controls')
+				})
+			})
+		}
+		catch {
+			// Do nothing
+		}
+	}
+
+	/**
+	 * Configure un MutationObserver pour surveiller les changements dans le DOM
+	 * et réexécuter fixAriaAttributes lorsque nécessaire
+	 */
+	const setupMutationObserver = () => {
+		// Nettoyer l'observateur existant s'il y en a un
+		if (observer) {
+			observer.disconnect()
+		}
+
+		// Créer un nouvel observateur
+		observer = new MutationObserver((mutations) => {
+			if (!Array.isArray(mutations)) return
+			// Vérifier si les mutations concernent des attributs ARIA ou des éléments pertinents
+			const shouldFix = mutations.some((mutation) => {
+				if (!mutation) return false
+				// Vérification défensive pour s'assurer que mutation.el existe avant d'accéder à ses propriétés
+				if (mutation.target === undefined || mutation.target === null) return false
+
+				// Si un attribut a été modifié
+				if (mutation.type === 'attributes') {
+					const attributeName = mutation.attributeName
+					return attributeName && (
+						attributeName.startsWith('aria-')
+						|| attributeName === 'class'
+						|| attributeName === 'style'
+					)
+				}
+				// Si des nœuds ont été ajoutés ou supprimés
+				return mutation.type === 'childList'
+			})
+
+			// Si des modifications pertinentes ont été détectées, corriger les attributs ARIA
+			if (shouldFix) {
+				// Utiliser nextTick pour s'assurer que le DOM est stable avant de faire les corrections
+				nextTick(() => {
+					fixAriaAttributes()
+				})
+			}
+		})
+
+		// Observer le document entier pour les changements
+		observer.observe(document.body, {
+			childList: true, // Observer les ajouts/suppressions d'enfants
+			subtree: true, // Observer les descendants
+			attributes: true, // Observer les changements d'attributs
+			attributeFilter: ['aria-expanded', 'aria-haspopup', 'aria-controls', 'class'], // Filtrer les attributs à observer
+		})
+	}
+
+	// Configurer l'observateur au montage du composant
+	onMounted(() => {
+		// Exécuter une première fois pour nettoyer les attributs initiaux
+		fixAriaAttributes()
+		// Configurer l'observateur pour les changements futurs
+		setupMutationObserver()
+	})
+
+	// Nettoyer l'observateur avant de démonter le composant
+	onBeforeUnmount(() => {
+		if (observer) {
+			observer.disconnect()
+			observer = null
+		}
+	})
+
 	return {
 		updateAccessibility,
 		handleKeyDown,
+		fixAriaAttributes,
 	}
 }
 

package/src/composables/useError.ts

@@ -0,0 +1,9 @@
+export interface TUseError {
+	propError: (msg: string) => void
+}
+export const useError = (): TUseError => {
+	const propError = (msg: string): void => {
+		throw new Error(msg)
+	}
+	return { propError }
+}

package/src/designTokens/apColors.md

@@ -0,0 +1,66 @@
+# Color Palette Amelipro Light
+
+## Primary
+
+<span style="background-color:#084298"></span>
+
+## Secondary
+
+<span style="background-color:#801F4F"></span>
+
+## Accent
+
+<span style="background-color:#0dcaf0"></span>
+
+## Error
+
+<span style="background-color:#B02A37"></span>
+
+## Info
+
+<span style="background-color:#052C64"></span>
+
+## Success
+
+<span style="background-color:#479F76"></span>
+
+## Warning
+
+<span style="background-color:#FFF2CD"></span>
+
+## Risque Pro
+
+<span style="background-color:#dc3545"></span>
+
+## Light
+
+<span style="background-color:#DEE2E6"></span>
+
+## Dark
+
+<span style="background-color:#212529"></span>
+
+## Brand
+
+<span style="background-color:#4a3f59"></span>
+
+## BrandSecondary
+
+<span style="background-color:#ac1c81"></span>
+
+## BrandMuted
+
+<span style="background-color:#b7cbd6"></span>
+
+## BrandMutedLite
+
+<span style="background-color:#E7F3F9"></span>
+
+
+## HilitePrimary
+
+<span style="background-color:#0062ac"></span>
+
+## HiliteSecondary
+
+<span style="background-color:#e6bebf"></span>

package/src/designTokens/index.ts

@@ -10,6 +10,11 @@ import { paSemanticTokens } from './tokens/pa/paSemantic'
 import { paContextualTokens } from './tokens/pa/paContextual'
 import { paLightTheme } from './tokens/pa/paLightTheme'
 import { paDarkTheme } from './tokens/pa/paDarkTheme'
+import { apColorsTokens } from './tokens/amelipro/apColors'
+import { apSemanticTokens } from './tokens/amelipro/apSemantic'
+import { apContextualTokens } from './tokens/amelipro/apContextual'
+import { apLightTheme } from './tokens/amelipro/apLightTheme'
+import { apDarkTheme } from './tokens/amelipro/apDarkTheme'
 
 export {
 	cnamColorsTokens,
@@ -24,4 +29,9 @@ export {
 	paContextualTokens,
 	paLightTheme,
 	paDarkTheme,
+	apColorsTokens,
+	apSemanticTokens,
+	apContextualTokens,
+	apLightTheme,
+	apDarkTheme,
 }

package/src/designTokens/tokens/amelipro/apColors.ts

@@ -0,0 +1,81 @@
+import type { IndexedObject } from '@/components/Amelipro/types'
+
+export const apColorsTokens = {
+	apBlack: { base: '#000000' },
+	apBlue: {
+		base: '#0C419A',
+		darken1: '#00749C',
+		darken2: '#00516D',
+		lighten1: '#99DBF2',
+		lighten2: '#CCEDF9',
+		lighten3: '#E6F6FC',
+		lighten4: '#F3FBFE',
+	},
+	apGreen: {
+		base: '#56C271',
+		darken1: '#459B5A',
+		darken2: '#337343',
+		lighten1: '#78CE8D',
+		lighten2: '#DDF3E3',
+	},
+	apGrey: {
+		base: '#545859',
+		darken1: '#1A1B1B',
+		lighten1: '#CCCDCE',
+		lighten2: '#DDDEDE',
+		lighten3: '#EEEEEE',
+		lighten4: '#F3F4F4',
+		lighten5: '#FAFAFA',
+		lighten6: '#F4F8F9',
+	},
+	apParme: {
+		base: '#C8D1E6',
+		darken1: '#4D547D',
+	},
+	apPink: { base: '#D00063' },
+	apRed: {
+		base: '#B33F2E',
+		darken1: '#9D3728',
+		darken2: '#70281C',
+		lighten1: '#E67261',
+		lighten2: '#EC9588',
+		lighten3: '#F9DCD7',
+		lighten4: '#FDF0EE',
+	},
+	apTurquoise: {
+		base: '#33BCA5',
+		darken1: '#007863',
+		darken2: '#006654',
+		darken3: '#005647',
+		lighten1: '#CCEEE8',
+		lighten2: '#E6F7F4',
+	},
+	apWhite: { base: '#FFFFFF' },
+	apYellow: {
+		base: '#F0B323',
+		darken1: '#D8A120',
+		darken2: '#C08F1C',
+		darken3: '#A87D19',
+		darken4: '#906C16',
+		lighten1: '#F3C24F',
+		lighten2: '#FED66D',
+		lighten3: '#F7D990',
+		lighten4: '#F9E1A7',
+		lighten5: '#FCF0D3',
+	},
+}
+
+export const apColorClasses: IndexedObject = {}
+
+export function toKebabCase(value: string): string {
+	return value.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+Object.entries(apColorsTokens).forEach(([colorName, colorValues]) => {
+	Object.entries(colorValues).forEach(([variationName, colorValue]) => {
+		const colorClass = toKebabCase(`${colorName}-${variationName}`
+			.replace(/\d+/, '-$&')
+			.replace('-base', ''))
+		apColorClasses[colorClass] = colorValue as string
+	})
+})

package/src/designTokens/tokens/amelipro/apContextual.ts

@@ -0,0 +1,58 @@
+export const apContextualTokens = {
+	colors: {
+		background: '#ffffff',
+		border: '#dddddd',
+		text: '#333333',
+		icon: '#666666',
+		overlay: 'rgba(0, 0, 0, 0.5)',
+		interactive: '#007bff',
+	},
+	gap: {
+		0: '0',
+		1: '4px',
+		2: '8px',
+		3: '122px',
+		4: '16px',
+		5: '20px',
+		6: '24px',
+		7: '28px',
+		8: '32px',
+		9: '36px',
+		10: '40px',
+		11: '44px',
+		12: '48px',
+		13: '52px',
+		14: '56px',
+		15: '60px',
+		16: '64px',
+	},
+	iconSize: {
+		xsmall: '8px',
+		small: '16px',
+		default: '24px',
+		large: '32px',
+	},
+	radius: {
+		rounded0: '0',
+		rounded: '4px',
+		roundedLg: '8px',
+		roundedPill: '64px',
+	},
+	padding: {
+		0: '0',
+		2: '8px',
+		3: '12px',
+		4: '16px',
+		6: '24px',
+		8: '32px',
+		10: '40px',
+		14: '56px',
+		16: '64px',
+	},
+	fontSize: {
+		titres: '24px',
+		titresAlternatifs: '20px',
+		corpsDeTexte: '16px',
+		liensEtLibelles: '14px',
+	},
+}

package/src/designTokens/tokens/amelipro/apDarkTheme.ts

@@ -0,0 +1,5 @@
+// import { apColorsTokens } from '../amelipro/apColors'
+
+export const apDarkTheme = {
+	// backgroundSurface: apColorsTokens.parma.darken60,
+}

package/src/designTokens/tokens/amelipro/apLightTheme.ts

@@ -0,0 +1,13 @@
+import { apColorsTokens } from './apColors'
+// import { apSemanticTokens } from '../amelipro/apSemantic'
+import { apColorClasses } from './apColors'
+
+export const apLightTheme = {
+	...apColorClasses,
+	error: apColorsTokens.apRed.base,
+	info: apColorsTokens.apParme.darken1 as string,
+	primary: apColorsTokens.apBlue.darken1 as string,
+	secondary: apColorsTokens.apBlue.darken2 as string,
+	success: apColorsTokens.apTurquoise.darken1 as string,
+	warning: apColorsTokens.apYellow.darken4 as string,
+}

package/src/designTokens/tokens/amelipro/apSemantic.ts

@@ -0,0 +1,87 @@
+export const apSemanticTokens = {
+	colors: {
+		background: {
+			main: '#e7ecf5',
+			surface: '#ffffff',
+			mainAlt: '#ffffff',
+			surfaceAlt: '#e7ecf5',
+			raised: '#f8f9fc',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentAlt: '#111212',
+			info: '#ced9eb',
+			infoSubdued: '#e7ecf5',
+			infoContrasted: '#0c419a',
+			success: '#cceee8',
+			successSubdued: '#e5f7f4',
+			successContrasted: '#56c271',
+			warning: '#fcf0d3',
+			warningSubdued: '#fdf7e9',
+			warningContrasted: '#f0b323',
+			error: '#f9dcd7',
+			errorSubdued: '#fcedeb',
+			errorContrasted: '#b33f2e',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			assure: '#ed76b3',
+			professionnel: '#66c9ec',
+			entreprise: '#f0b323',
+		},
+		border: {
+			darker: '#222324',
+			base: '#989b9b',
+			subdued: '#dddede',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentOnDark: '#ffffff',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: 'rgba(255, 255, 255, 0.7)',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		text: {
+			base: '#222324',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			subdued: '#545859',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			disabled: '#989b9b',
+			onDark: '#ffffff',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		icon: {
+			base: '#222324',
+			subdued: '#545859',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: '#ffffff',
+			disabled: '#989b9b',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		overlay: {
+			fullpage: '#989b9b',
+			onDark: '#ffffff',
+			onLight: '#0c419a',
+		},
+		interactive: {
+			default: 'rgba(255, 255, 255, 0.0000)',
+			hover: '#e7ecf5',
+			pressed: '#ced9eb',
+			focus: '#e7ecf5',
+			disabled: 'rgba(255, 255, 255, 0.0000)',
+			hoverOnSelected: '#ced9eb',
+		},
+	},
+}