@cnamts/synapse 0.0.15-alpha → 1.0.0

package/src/components/DatePicker/examples/DatePickerHolidayRule.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+	import { ref, computed } from 'vue'
+	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
+	import { useHolidayDay } from '@/composables/date/useHolidayDay'
+
+	const selectedDate = ref('')
+	const { generateRules } = useFieldValidation()
+	const { isHolidayDay, getJoursFeries } = useHolidayDay()
+
+	// Année courante pour afficher les jours fériés
+	const currentYear = new Date().getFullYear()
+
+	// Création de la règle qui vérifie qu'une date n'est pas un jour férié
+	const holidayRules = generateRules([
+		{
+			type: 'isHolidayDay',
+			options: {
+				fieldName: 'La date',
+				message: 'Vous ne pouvez pas sélectionner un jour férié.',
+			},
+		},
+	])
+
+	// Vérification si la date sélectionnée est un jour férié (pour l'affichage)
+	const isDateHoliday = computed(() => {
+		if (!selectedDate.value) return false
+		return isHolidayDay(selectedDate.value)
+	})
+
+	// Liste des jours fériés de l'année courante
+	const currentYearHolidays = computed(() => {
+		const holidays = getJoursFeries(currentYear)
+		return Array.from(holidays).sort()
+	})
+</script>
+
+<template>
+	<div class="date-picker-holiday-example">
+		<h2>DatePicker avec règle de validation pour jours fériés</h2>
+		<p>
+			Cet exemple montre comment utiliser la règle <code>isHolidayDay</code> pour empêcher
+			la sélection de jours fériés dans un DatePicker.
+		</p>
+
+		<div class="date-picker-container">
+			<DatePicker
+				v-model="selectedDate"
+				label="Date (pas de jour férié)"
+				:rules="holidayRules"
+				error-messages
+				placeholder="Sélectionnez une date non fériée"
+			/>
+		</div>
+
+		<div class="info-container mt-4">
+			<h3>Informations</h3>
+			<p>Date sélectionnée : <strong>{{ selectedDate || 'Aucune' }}</strong></p>
+
+			<div
+				v-if="selectedDate"
+				class="mt-2"
+			>
+				<p
+					v-if="isDateHoliday"
+					class="error-text"
+				>
+					⚠️ Le {{ selectedDate }} est un jour férié.
+				</p>
+				<p
+					v-else
+					class="success-text"
+				>
+					✅ Le {{ selectedDate }} n'est pas un jour férié.
+				</p>
+			</div>
+
+			<div
+				v-if="currentYearHolidays.length"
+				class="holiday-list mt-4"
+			>
+				<h4>Jours fériés {{ currentYear }} :</h4>
+				<ul>
+					<li
+						v-for="(date, index) in currentYearHolidays"
+						:key="index"
+					>
+						{{ date }}
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.date-picker-holiday-example {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 20px;
+}
+
+.date-picker-container {
+	max-width: 400px;
+}
+
+.info-container {
+	background-color: #f5f5f5;
+	padding: 15px;
+	border-radius: 4px;
+}
+
+.error-text {
+	color: #d32f2f;
+	font-weight: bold;
+}
+
+.success-text {
+	color: #2e7d32;
+	font-weight: bold;
+}
+
+.holiday-list {
+	max-height: 200px;
+	overflow-y: auto;
+	background-color: #fff;
+	padding: 10px;
+	border-radius: 4px;
+	border: 1px solid #e0e0e0;
+}
+</style>

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

@@ -60,12 +60,6 @@ describe('DatePicker.vue', () => {
 		expect(wrapper.emitted('update:modelValue')[0]).toEqual(['01/01/2023'])
 	})
 
-	it('toggles the date picker visibility on focus', async () => {
-		const input = wrapper.find('input')
-		await input.trigger('focus')
-		expect(wrapper.vm.isDatePickerVisible).toBe(true)
-	})
-
 	it('renders the date picker with proper structure', async () => {
 		// Ouvrir le DatePicker pour que les éléments soient dans le DOM
 		wrapper.vm.isDatePickerVisible = true
@@ -151,17 +145,15 @@ describe('DatePicker.vue', () => {
 				plugins: [vuetify],
 			},
 			props: {
-				required: true, // Le champ est requis
+				required: true,
 			},
 		})
 
-		// Simule une date valide
 		wrapper.vm.selectedDates = [new Date('2023-01-01')]
 		await nextTick()
 
 		const result = wrapper.vm.validateOnSubmit()
 
-		// Vérifie que validateOnSubmit retourne true et qu'il n'y a pas d'erreurs
 		expect(result).toBe(true)
 		expect(wrapper.vm.errorMessages).toEqual([])
 	})
@@ -172,34 +164,32 @@ describe('DatePicker.vue', () => {
 				plugins: [vuetify],
 			},
 			props: {
-				required: true, // Le champ est requis
+				required: true,
 			},
 		})
 
-		// Simule l'absence de date sélectionnée
 		wrapper.vm.selectedDates = null
 		await nextTick()
 
 		const result = wrapper.vm.validateOnSubmit()
 
-		// Vérifie que validateOnSubmit retourne false et qu'il y a des erreurs
 		expect(result).toBe(false)
 		expect(wrapper.vm.errorMessages).toContain('La date est requise.')
 	})
 
 	it('parses a valid date string into a Date instance', () => {
-		const modelValue = '15/01/2023' // Chaîne valide
+		const modelValue = '15/01/2023'
 		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
 
-		expect(result).toBeInstanceOf(Date) // Doit retourner une instance de Date
-		expect(result.toISOString().split('T')[0]).toBe('2023-01-15') // Correspond à la date attendue
+		expect(result).toBeInstanceOf(Date)
+		expect(result.toISOString().split('T')[0]).toBe('2023-01-15')
 	})
 
 	it('returns null if modelValue is null or undefined', () => {
 		const modelValue = null
 		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
 
-		expect(result).toBeNull() // Doit retourner null
+		expect(result).toBeNull()
 	})
 
 	it('handles an invalid date string gracefully', () => {
@@ -210,24 +200,23 @@ describe('DatePicker.vue', () => {
 	})
 
 	it('sets selectedDates to null when input is empty', () => {
-		wrapper.vm.updateSelectedDates('') // Simule un input vide
+		wrapper.vm.updateSelectedDates('')
 
-		expect(wrapper.vm.selectedDates).toBeNull() // Vérifie que selectedDates est null
+		expect(wrapper.vm.selectedDates).toBeNull()
 	})
 
 	it('parses a valid date string and updates selectedDates', () => {
 		const validInput = '15/01/2023'
-		wrapper.vm.updateSelectedDates(validInput) // Simule un input valide
+		wrapper.vm.updateSelectedDates(validInput)
 
-		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date) // Vérifie que selectedDates est une instance de Date
-		expect(wrapper.vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15') // Vérifie la date exacte
+		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date)
+		expect(wrapper.vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15')
 	})
 
 	it('does not update selectedDates for invalid date string', () => {
 		const invalidInput = 'invalid-date'
-		wrapper.vm.updateSelectedDates(invalidInput) // Simule un input invalide
-
-		expect(wrapper.vm.selectedDates).toBeNull() // Vérifie que selectedDates reste null
+		wrapper.vm.updateSelectedDates(invalidInput)
+		expect(wrapper.vm.selectedDates).toBeNull()
 	})
 
 	it('toggles date picker visibility correctly', async () => {
@@ -235,15 +224,12 @@ describe('DatePicker.vue', () => {
 			global: { plugins: [vuetify] },
 		})
 
-		// État initial : le date picker est caché
 		expect(wrapper.vm.isDatePickerVisible).toBe(false)
 
-		// Ouvrir le date picker
 		wrapper.vm.openDatePicker()
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 
-		// Fermer le date picker
 		wrapper.vm.isDatePickerVisible = false
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(false)
@@ -257,7 +243,6 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Valider sans date (devrait échouer)
 		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(false)
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
@@ -299,11 +284,9 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Valider sans date pour générer une erreur
 		await wrapper.vm.validateOnSubmit()
 		await nextTick()
 
-		// Vérifier que l'erreur est ajoutée à errorMessages
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 		const errorMessage = wrapper.find('.v-messages__message')
 		expect(errorMessage.exists()).toBe(true)
@@ -318,12 +301,30 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Vérifier que le mode birth date est appliqué
 		expect(wrapper.props('isBirthDate')).toBe(true)
 
-		// Ouvrir le picker et vérifier qu'il est visible
 		wrapper.vm.openDatePicker()
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 	})
+
+	it('takes into account disabled and readonly limitations', async () => {
+		const wrapper = mount(DatePicker, {
+			global: { plugins: [vuetify] },
+			props: {
+				disabled: true,
+			},
+		})
+
+		wrapper.vm.openDatePicker()
+		await nextTick()
+
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+
+		await wrapper.setProps({ disabled: false, readonly: true })
+		wrapper.vm.openDatePicker()
+		await nextTick()
+
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+	})
 })

package/src/components/DatePicker/tests/DateTextInput.spec.ts

@@ -38,7 +38,7 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('accepts valid date format', async () => {
@@ -116,20 +116,20 @@ describe('DateTextInput.vue', () => {
 			},
 		})
 
-		// Force la validation en déclenchant un événement de perte de focus
+		// Force validation by triggering a blur event
 		const input = wrapper.find('input')
 		await input.trigger('focus')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
-		await wrapper.vm.$nextTick() // Double nextTick pour s'assurer que les mises à jour sont terminées
-		// On peut également forcer la validation manuellement
+		await wrapper.vm.$nextTick() // Double nextTick to ensure updates are completed
+		// We can also force validation manually
 		await wrapper.vm.validateOnSubmit()
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
 		const warningMessages = textField.props('warningMessages') || []
-		// Vérifier que le message d'avertissement est bien présent
+		// Check that the warning message is present
 		expect(warningMessages.length).toBeGreaterThan(0)
-		// Le message réel commence par "Attention :"
+		// The actual message starts with "Attention:"
 		expect(warningMessages[0]).toContain('Attention :')
 	})
 
@@ -139,7 +139,7 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('formats input while typing', async () => {
@@ -169,7 +169,7 @@ describe('DateTextInput.vue', () => {
 		const input = wrapper.find('input')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
-		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
 	})
 
 	it('formats date during input', async () => {
@@ -180,13 +180,13 @@ describe('DateTextInput.vue', () => {
 	})
 
 	it('handles date deletion', async () => {
-		// D'abord on met une date valide
+		// First set a valid date
 		const input = wrapper.find('input')
 		await input.setValue('01/01/2025')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 
-		// Puis on la supprime
+		// Then delete it
 		await input.setValue('')
 		await input.trigger('input')
 		await input.trigger('blur')
@@ -266,19 +266,61 @@ describe('DateTextInput.vue', () => {
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/__/____')
 
-		// Simuler une position de curseur après le "01"
+		// Simulate cursor position after "01"
 		input.element.setSelectionRange(2, 2)
 		await input.trigger('input')
 		await wrapper.vm.$nextTick()
 
-		// La position du curseur devrait rester après le "01"
+		// The cursor position should remain after "01"
 		expect(input.element.selectionStart).toBe(2)
 	})
 
+	it('handles 2 digits year correctly', async () => {
+		const customWrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'DD/MM/YY',
+				dateFormatReturn: 'YYYY-MM-DD',
+			},
+		})
+
+		const input = customWrapper.find('input')
+		await input.setValue('0')
+		expect(input.element.value).toBe('0_/__/__')
+
+		await input.setValue('01/02/99')
+		expect(input.element.value).toBe('01/02/99')
+		expect(customWrapper.emitted('update:model-value')?.at(-1)).toEqual(['1999-02-01'])
+	})
+
+	it('handles ISO-8601 date format correctly', async () => {
+		const customWrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'YYYY-MM-DD',
+			},
+		})
+
+		const input = customWrapper.find('input')
+		await input.setValue('2025-')
+		expect(input.element.value).toBe('2025-__-__')
+		expect(customWrapper.emitted('update:model-value')).toBeFalsy()
+
+		await input.setValue('2025-01-01')
+		expect(input.element.value).toBe('2025-01-01')
+		expect(customWrapper.emitted('update:model-value')?.at(-1)).toEqual(['2025-01-01'])
+	})
+
 	it('handles paste event with valid date', async () => {
 		const input = wrapper.find('input')
 
-		// Créer un événement de collage avec les données
+		// Create a paste event with data
 		const clipboardData = {
 			getData: () => '01/01/2025',
 		}
@@ -297,26 +339,26 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('keydown', {
 			key: 'Tab',
 		})
-		// Vérifier que le composant n'empêche pas la navigation par tab
+		// Check that the component doesn't prevent tab navigation
 		expect(wrapper.emitted('update:model-value')).toBeFalsy()
 
-		// Tester le comportement avec Ctrl+V (coller)
+		// Test behavior with Ctrl+V (paste)
 		await input.trigger('keydown', {
 			key: 'v',
 			ctrlKey: true,
 		})
-		// Le comportement par défaut devrait être préservé
+		// Default behavior should be preserved
 		expect(wrapper.emitted('update:model-value')).toBeFalsy()
 	})
 
 	it('validates on submit correctly', async () => {
 		const input = wrapper.find('input')
 
-		// Cas 1: Champ vide avec required=true
+		// Case 1: Empty field with required=true
 		const emptyResult = await wrapper.vm.validateOnSubmit()
 		expect(emptyResult).toBe(false)
 
-		// Cas 2: Date valide
+		// Case 2: Valid date
 		await input.setValue('01/01/2025')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
@@ -326,23 +368,29 @@ describe('DateTextInput.vue', () => {
 	})
 
 	it('handles focus and blur methods correctly', async () => {
-		// Simuler un querySelector global
-		const originalQuerySelector = document.querySelector
+		// Create a mock for the input element
 		const mockInput = { focus: vi.fn(), blur: vi.fn() }
 
-		// Remplacer document.querySelector
-		document.querySelector = vi.fn().mockReturnValue(mockInput)
+		// Mock the component's querySelector method
+		const mockQuerySelector = vi.fn().mockReturnValue(mockInput)
+
+		// Replace the element reference and its querySelector method
+		wrapper.vm.inputRef = {
+			$el: {
+				querySelector: mockQuerySelector,
+			},
+		}
 
-		// Appeler les méthodes exposées
+		// Call the exposed methods
 		wrapper.vm.focus()
 		wrapper.vm.blur()
 
-		// Vérifier que les méthodes ont été appelées
+		// Check that querySelector was called with the right selector
+		expect(mockQuerySelector).toHaveBeenCalledWith('input:not([type="hidden"])')
+
+		// Check that the methods were called
 		expect(mockInput.focus).toHaveBeenCalled()
 		expect(mockInput.blur).toHaveBeenCalled()
-
-		// Restaurer document.querySelector
-		document.querySelector = originalQuerySelector
 	})
 
 	it('initializes with model value correctly', async () => {
@@ -383,17 +431,17 @@ describe('DateTextInput.vue', () => {
 	it('handles partial date input correctly', async () => {
 		const input = wrapper.find('input')
 
-		// Saisir seulement le jour
+		// Enter only the day
 		await input.setValue('01')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/__/____')
 
-		// Ajouter le mois
+		// Add the month
 		await input.setValue('01/02')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/02/____')
 
-		// Compléter la date
+		// Complete the date
 		await input.setValue('01/02/2025')
 		await wrapper.vm.$nextTick()
 		expect(input.element.value).toBe('01/02/2025')
@@ -423,16 +471,16 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('focus')
 		await input.trigger('blur')
 		await customWrapper.vm.$nextTick()
-		await customWrapper.vm.$nextTick() // Double nextTick pour fiabilité
+		await customWrapper.vm.$nextTick() // Double nextTick for reliability
 
-		// Force validation manuelle
+		// Force manual validation
 		await customWrapper.vm.validateOnSubmit()
 		await customWrapper.vm.$nextTick()
 
 		const textField = customWrapper.findComponent(SyTextField)
 		const successMessages = textField.props('successMessages') || []
 
-		// Vérification assouplie
+		// Flexible verification
 		expect(successMessages.length).toBeGreaterThan(0)
 		expect(successMessages[0]).toContain('valide')
 	})

package/src/components/DiacriticPicker/DiacriticPicker.mdx

@@ -0,0 +1,104 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as DiacriticPickerStories from './DiacriticPicker.stories';
+
+<Meta of={DiacriticPickerStories} />
+
+# DiacriticPicker
+
+Le composant `DiacriticPicker` permet d'ajouter facilement des caractères diacritiques (accents, cédilles, etc.) à un champ de texte ou un textarea. Il ajoute un bouton à côté du champ qui ouvre une boîte de dialogue avec des caractères diacritiques à insérer.
+
+<Canvas of={DiacriticPickerStories.Default} />
+
+# API
+
+<Controls of={DiacriticPickerStories.Default} />
+
+## Fonctionnalités
+
+### Insertion de caractères
+Cliquer sur un caractère dans la boîte de dialogue l'insère à la position actuelle du curseur dans le champ de texte.
+
+### Raccourci clavier
+Le composant offre un raccourci clavier pour changer rapidement entre les variantes d'un même caractère :
+- Tapez un caractère (par exemple "e")
+- Appuyez sur la touche `=` pour parcourir ses variantes diacritiques (é, è, ê, ë)
+
+## Personnalisation
+
+Le composant utilise le système de personnalisation Vuetify pour les éléments suivants :
+- `btn` : Style du bouton d'ouverture
+- `dialog` : Style de la boîte de dialogue
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup>
+  import { DiacriticPicker } from '@cnamts/synapse'
+  import { ref } from 'vue'
+  
+  const nom = ref('')
+</script>
+
+<template>
+  <DiacriticPicker v-model="nom">
+    <v-text-field
+      id="diacritic-input"
+      v-model="nom"
+      label="Nom avec accents"
+      color="primary"
+      variant="outlined"
+    />
+  </DiacriticPicker>
+</template>
+`} />
+
+## Utilisation avec un textarea
+
+Le composant fonctionne également avec un textarea pour les textes plus longs.
+
+<Source dark code={`
+<script setup>
+  import { DiacriticPicker } from '@cnamts/synapse'
+  import { ref } from 'vue'
+  
+  const adresse = ref('')
+</script>
+
+<template>
+  <DiacriticPicker v-model="adresse">
+    <v-textarea
+      id="diacritic-input"
+      v-model="adresse"
+      label="Adresse"
+      color="primary"
+      variant="outlined"
+      auto-grow
+    />
+  </DiacriticPicker>
+</template>
+`} />
+
+## Personnalisation des caractères diacritiques
+
+Vous pouvez personnaliser la liste des caractères diacritiques affichés dans la boîte de dialogue.
+
+<Source dark code={`
+<script setup>
+  import { DiacriticPicker } from '@cnamts/synapse'
+  import { ref } from 'vue'
+  
+  const text = ref('')
+  const caracteres = ['é', 'è', 'ê', 'à', 'ç', 'ù']
+</script>
+
+<template>
+  <DiacriticPicker v-model="text" :diacritics="caracteres">
+    <v-text-field
+      v-model="text"
+      label="Texte avec accents personnalisés"
+      variant="outlined"
+    />
+  </DiacriticPicker>
+</template>
+`} />