@cnamts/synapse 1.0.0 → 1.0.2

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

@@ -0,0 +1,189 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import { nextTick } from 'vue'
+import DatePicker from '../DatePicker.vue'
+
+describe('DatePicker.vue - Events', () => {
+	let wrapper
+
+	beforeEach(() => {
+		wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				format: 'DD/MM/YYYY',
+			},
+		})
+	})
+
+	it('émet update:modelValue lors de la saisie d\'une date valide', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2023')
+		await input.trigger('blur')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')[0]).toEqual(['01/01/2023'])
+	})
+
+	it('gère la visibilité du calendrier', async () => {
+		// Ouvrir le calendrier
+		await wrapper.find('.v-text-field').trigger('click')
+		await nextTick()
+
+		// Vérifier que le calendrier est visible
+		expect(wrapper.vm.isDatePickerVisible).toBe(true)
+
+		// Fermer le calendrier
+		wrapper.vm.isDatePickerVisible = false
+		await nextTick()
+
+		// Vérifier que le calendrier est fermé
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+	})
+
+	it('accepte la saisie de dates', async () => {
+		const input = wrapper.find('input')
+
+		// Simuler la saisie de chiffres
+		await input.setValue('0101')
+		await nextTick()
+
+		// Vérifier que la valeur est bien prise en compte
+		expect(input.element.value).toContain('01')
+	})
+
+	it('permet la saisie manuelle même avec disablePickerInteraction', async () => {
+		// Créer un composant avec disablePickerInteraction à true
+		const wrapperWithDisabledPicker = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				format: 'DD/MM/YYYY',
+				disablePickerInteraction: true,
+			},
+		})
+
+		// Simuler une saisie dans l'input
+		const input = wrapperWithDisabledPicker.find('input')
+		await input.setValue('01/01/2023')
+		await input.trigger('blur')
+		await nextTick()
+
+		// Vérifier que l'événement update:modelValue est émis même avec disablePickerInteraction
+		const emitted = wrapperWithDisabledPicker.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[0][0]).toBe('01/01/2023')
+	})
+
+	it('synchronise textInputValue et selectedDates', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2023')
+		await input.trigger('blur')
+		await nextTick()
+
+		// Vérifier que selectedDates est mis à jour
+		expect(wrapper.vm.selectedDates).not.toBeNull()
+		const selectedDate = wrapper.vm.selectedDates
+		expect(selectedDate instanceof Date).toBe(true)
+		expect(selectedDate.getFullYear()).toBe(2023)
+		expect(selectedDate.getMonth()).toBe(0) // Janvier (0-indexed)
+		expect(selectedDate.getDate()).toBe(1)
+	})
+
+	it('met à jour displayFormattedDate lors de la sélection d\'une date dans le calendrier', async () => {
+		// Ouvrir le calendrier
+		await wrapper.find('.v-text-field').trigger('click')
+		await nextTick()
+
+		// Simuler une sélection de date dans le VDatePicker
+		if (wrapper.vm.$refs.datePicker) {
+			// Simuler l'événement update:model-value du VDatePicker
+			const date = new Date(2023, 0, 1) // 1 janvier 2023
+			wrapper.vm.handleDatePickerInput(date)
+			await nextTick()
+
+			// Appeler updateDisplayFormattedDate comme le ferait le gestionnaire d'événements
+			wrapper.vm.updateDisplayFormattedDate()
+			await nextTick()
+
+			// Vérifier que displayFormattedDate est mis à jour correctement
+			expect(wrapper.vm.displayFormattedDate).toBe('01/01/2023')
+		}
+	})
+
+	it('accepte différents formats de date', async () => {
+		const wrapperWithDashFormat = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				format: 'YYYY-MM-DD',
+			},
+		})
+
+		const input = wrapperWithDashFormat.find('input')
+
+		// Simuler la saisie d'une date complète au format YYYY-MM-DD
+		await input.setValue('2023-01-01')
+		await input.trigger('blur')
+		await nextTick()
+
+		// Vérifier que l'événement update:modelValue est émis avec le bon format
+		const emitted = wrapperWithDashFormat.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[0][0]).toBe('2023-01-01')
+	})
+
+	it('accepte les plages de dates en entrée', async () => {
+		const wrapperWithRange = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: ['01/01/2023', '05/01/2023'],
+				format: 'DD/MM/YYYY',
+				displayRange: true,
+			},
+		})
+		await nextTick()
+
+		// Vérifier que l'input affiche la plage de dates
+		const input = wrapperWithRange.find('input')
+		expect(input.element.value).toContain('01/01/2023')
+
+		// Vérifier que la propriété displayRange est bien prise en compte
+		expect(wrapperWithRange.props('displayRange')).toBe(true)
+	})
+
+	it('valide les dates selon les règles personnalisées', async () => {
+		const customRule = {
+			type: 'isDateValid',
+			options: {},
+		}
+
+		const wrapperWithRules = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				format: 'DD/MM/YYYY',
+				customRules: [customRule],
+				required: true,
+			},
+		})
+
+		// Valider sans sélectionner de date
+		await wrapperWithRules.vm.validateOnSubmit()
+		await nextTick()
+
+		// Vérifier qu'une erreur de validation est affichée
+		expect(wrapperWithRules.vm.errorMessages.length).toBeGreaterThan(0)
+	})
+})

package/src/components/DatePicker/{tests → DatePicker/tests}/DatePicker.spec.ts

@@ -19,20 +19,6 @@ describe('DatePicker.vue', () => {
 		})
 	})
 
-	it('displays the placeholder text as label', () => {
-		const placeholder = 'Sélectionner une date'
-		const wrapper = mount(DatePicker, {
-			global: {
-				plugins: [vuetify],
-			},
-			props: { placeholder },
-		})
-
-		// Vérifier que le placeholder est affiché comme label
-		const label = wrapper.find('label')
-		expect(label.text()).toBe(placeholder)
-	})
-
 	it('emits update:modelValue event on date selection', async () => {
 		const wrapper = mount(DatePicker, {
 			global: {

package/src/components/DatePicker/DatePickerOverview.mdx

@@ -0,0 +1,227 @@
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
+import { linkTo } from '@storybook/addon-links';
+
+<Meta title="Composants/Formulaires/DatePicker/Introduction" />
+
+# DatePicker - Vue d'ensemble
+
+Le composant `DatePicker` facilite la sélection d’une date et se décline en plusieurs modes selon vos besoins. Cette page détaille chaque variante disponible et vous guide pour choisir celle qui correspond le mieux à votre cas d’usage.
+## Variantes disponibles
+
+Le DatePicker propose trois modes principaux, chacun adapté à des besoins spécifiques :
+
+<div className="sb-unstyled" style={{ display: 'flex', flexWrap: 'wrap', gap: '20px', marginBottom: '30px' }}>
+  <div 
+    style={{ 
+      flex: '1 1 300px', 
+      border: '1px solid #e0e0e0', 
+      borderRadius: '8px', 
+      padding: '20px',
+      cursor: 'pointer',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+    onClick={() => linkTo('Composants/Formulaires/DatePicker/DatePicker')()}
+  >
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#1976d2' }}>Mode Calendrier</h3>
+    <div>Mode standard : calendrier interactif pour choisir manuellement une ou plusieurs dates.</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Interface visuelle intuitive</li>
+        <li>Sélection précise avec contraintes</li>
+        <li>Plages de dates</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{ 
+        padding: '5px 10px', 
+        color: '#1976d2', 
+        borderRadius: '4px', 
+        fontSize: '14px' 
+      }}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
+
+  <div 
+    style={{ 
+      flex: '1 1 300px', 
+      border: '1px solid #e0e0e0', 
+      borderRadius: '8px', 
+      padding: '20px',
+      cursor: 'pointer',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+    onClick={() => linkTo('Composants/Formulaires/DatePicker/DateInput')()}
+  >
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#7b1fa2' }}>Mode Saisie Manuelle</h3>
+    <div>Un champ de saisie avec formatage automatique intelligent, sans calendrier (propriété <code>noCalendar</code>).</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Saisie rapide au clavier</li>
+        <li>Automatisation et tests</li>
+        <li>Interfaces compactes</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{ 
+        padding: '5px 10px', 
+        color: '#7b1fa2', 
+        borderRadius: '4px', 
+        fontSize: '14px' 
+      }}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
+
+  <div 
+    style={{ 
+      flex: '1 1 300px', 
+      border: '1px solid #e0e0e0', 
+      borderRadius: '8px', 
+      padding: '20px',
+      cursor: 'pointer',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+    onClick={() => linkTo('Composants/Formulaires/DatePicker/CombinedMode')()}
+  >
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#00796b' }}>Mode Combiné</h3>
+    <div>Combine le calendrier interactif et la saisie manuelle avec formatage (propriété <code>useCombinedMode</code>).</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Flexibilité maximale</li>
+        <li>Meilleure expérience utilisateur</li>
+        <li>Accessibilité optimale</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{ 
+        padding: '5px 10px', 
+        color: '#00796b', 
+        borderRadius: '4px', 
+        fontSize: '14px' 
+      }}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
+</div>
+
+## Tableau comparatif des fonctionnalités
+
+<div className="sb-unstyled">
+  <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: '30px' }}>
+    <thead>
+      <tr style={{ backgroundColor: '#f5f5f5' }}>
+        <th style={{ padding: '12px', textAlign: 'left', borderBottom: '2px solid #e0e0e0' }}>Fonctionnalité</th>
+        <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>Mode Calendrier</th>
+        <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>Mode Saisie Manuelle</th>
+        <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>Mode Combiné</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Sélection visuelle de date</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Saisie manuelle avec formatage</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Plages de dates</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Validation personnalisée</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Format de date personnalisé</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Accessibilité</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>🚧</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Comment choisir la bonne variante ?
+
+### Utilisez le Mode Calendrier quand :
+- Vous avez besoin d'une interface visuelle intuitive pour sélectionner des dates
+- La précision de la sélection est importante (éviter les erreurs de saisie)
+
+### Utilisez le Mode Saisie Manuelle quand :
+- Vous avez besoin d'une interface compacte
+- Vous souhaitez permettre la saisie rapide au clavier
+- Formulaires nécessitant le passage de robots
+
+### Utilisez le Mode Combiné quand :
+- Vous voulez offrir le maximum de flexibilité aux utilisateurs
+- Vous souhaitez combiner les avantages des deux approches
+- Vous développez une application accessible à tous les types d'utilisateurs
+
+## Exemple d'implémentation
+
+<Source
+  dark
+  code={`
+// Mode Calendrier (standard)
+<DatePicker
+  v-model="date"
+  placeholder="Sélectionner une date"
+  format="DD/MM/YYYY"
+  required
+/>
+
+// Mode Saisie Manuelle
+<DatePicker
+  v-model="date"
+  no-calendar
+  placeholder="JJ/MM/AAAA"
+  format="DD/MM/YYYY"
+  required
+/>
+
+// Mode Combiné
+<DatePicker
+  v-model="date"
+  use-combined-mode
+  placeholder="Sélectionner une date"
+  format="DD/MM/YYYY"
+  required
+/>
+`}
+/>
+
+## Bonnes pratiques
+
+- Toujours spécifier le format de date attendu via la prop `format`
+- Utiliser la prop `placeholder` pour indiquer le format de saisie attendu
+- Ajouter des règles de validation personnalisées si nécessaire
+- Utilisez le mode de saisie manuelle pour les interfaces compactes

package/src/components/DatePicker/{DatePickerValidation.mdx → DatePickerValidationExample/DatePickerValidation.mdx}

@@ -220,15 +220,15 @@ Vous pouvez combiner plusieurs règles de validation :
   :custom-rules="[
     { 
       type: 'required', 
-      options: { message: 'La date est requise' } 
+      options: { message: 'La date est requise.' } 
     },
     { 
       type: 'notWeekend', 
-      options: { message: 'La date ne peut pas être un weekend' } 
+      options: { message: 'La date ne peut pas être un weekend.' } 
     },
     { 
       type: 'notAfterToday', 
-      options: { message: 'La date ne peut pas être dans le futur' } 
+      options: { message: 'La date ne peut pas être dans le futur.' } 
     }
   ]"
 />

package/src/components/DatePicker/{DatePickerValidation.stories.ts → DatePickerValidationExample/DatePickerValidation.stories.ts}

@@ -1,6 +1,6 @@
 import { type Meta, type StoryFn } from '@storybook/vue3'
-import DatePickerValidationExamples from './docExamples/DatePickerValidationExamples.vue'
-import DatePickerBidirectionalValidation from './docExamples/DatePickerBidirectionalValidation.vue'
+import DatePickerValidationExamples from '../docExamples/DatePickerValidationExamples.vue'
+import DatePickerBidirectionalValidation from '../docExamples/DatePickerBidirectionalValidation.vue'
 
 export default {
 	title: 'Composants/Formulaires/DatePicker/Validation',