@cnamts/synapse 0.0.16-alpha → 1.0.1

package/src/components/DatePicker/composables/useTodayButton.ts

@@ -0,0 +1,43 @@
+import { computed, type ComputedRef } from 'vue'
+import dayjs from 'dayjs'
+import { type DateObjectValue } from '../types'
+
+export interface TodayButtonProps {
+	displayTodayButton?: boolean
+	displayRange?: boolean
+}
+
+export interface TodayButtonReturn {
+	todayInString: ComputedRef<string>
+	selectToday: (selectedDates: { value: DateObjectValue }) => void
+}
+
+/**
+ * Composable pour gérer le bouton "Aujourd'hui" dans le DatePicker
+ */
+export function useTodayButton(props: TodayButtonProps): TodayButtonReturn {
+	// Computed pour le format de la date du jour
+	const todayInString = computed(() => {
+		return dayjs().locale('fr').format('dddd D MMMM').replace(/\b\w/g, l => l.toUpperCase())
+	})
+
+	// Fonction pour sélectionner la date du jour
+	const selectToday = (selectedDates: { value: DateObjectValue }) => {
+		const today = new Date()
+		if (props.displayRange) {
+			// Si c'est une plage de dates, on définit le même jour pour début et fin
+			selectedDates.value = [today, today]
+		}
+		else {
+			// Sinon, on sélectionne simplement aujourd'hui
+			selectedDates.value = today
+		}
+		// Le watcher sur selectedDates dans le composant parent se chargera de mettre à jour l'affichage
+		// et d'émettre l'événement update:modelValue
+	}
+
+	return {
+		todayInString,
+		selectToday,
+	}
+}

package/src/components/DatePicker/composables/useWeekendDays.ts

@@ -0,0 +1,21 @@
+import { computed, type ComputedRef } from 'vue'
+
+export interface WeekendDaysProps {
+	displayWeekendDays?: boolean
+}
+
+export interface WeekendDaysReturn {
+	displayWeekendDays: ComputedRef<boolean>
+}
+
+/**
+ * Composable pour gérer l'affichage des jours de weekend dans le DatePicker
+ */
+export function useWeekendDays(props: WeekendDaysProps): WeekendDaysReturn {
+	// Computed pour l'affichage des jours de weekend
+	const displayWeekendDays = computed(() => props.displayWeekendDays ?? true)
+
+	return {
+		displayWeekendDays,
+	}
+}

package/src/components/DatePicker/constants/messages.ts

@@ -0,0 +1,50 @@
+/**
+ * Fichier contenant toutes les constantes de textes utilisées dans les composants/composables DatePicker
+ */
+
+export const DATE_PICKER_MESSAGES = {
+	// Labels et placeholders
+	LABEL_DEFAULT: 'Date',
+	PLACEHOLDER_DEFAULT: 'Sélectionner une date',
+
+	// Messages d'erreur
+	ERROR_REQUIRED: 'La date est requise.',
+	ERROR_INVALID_FORMAT: 'Le format de la date est invalide.',
+	ERROR_INVALID_DATE: 'La date saisie est invalide.',
+	ERROR_INCOMPLETE_DATE: 'La date est incomplète.',
+	ERROR_INVALID_RANGE: 'La plage de dates est invalide.',
+	ERROR_START_DATE_MISSING: 'La date de début est manquante.',
+	ERROR_END_DATE_MISSING: 'La date de fin est manquante.',
+	ERROR_END_BEFORE_START: 'La date de fin doit être postérieure à la date de début.',
+	ERROR_INVALID_FORMAT_START: 'Format de date invalide pour la date de début',
+	ERROR_INVALID_FORMAT_END: 'Format de date invalide pour la date de fin',
+
+	// Messages de succès
+	SUCCESS_VALID_DATE: 'La date est valide.',
+
+	// Messages d'accessibilité
+	ARIA_DATE_INPUT: 'Date en cours de saisie',
+	ARIA_CALENDAR_BUTTON: 'Ouvrir le calendrier',
+	ARIA_TODAY_BUTTON: 'Sélectionner aujourd\'hui',
+
+	// Boutons et actions
+	BUTTON_TODAY: 'Aujourd\'hui',
+	BUTTON_CLEAR: 'Effacer',
+	BUTTON_CLOSE: 'Fermer',
+
+	// Formats de date
+	FORMAT_DEFAULT: 'DD/MM/YYYY',
+
+	// Descriptions des mois pour l'accessibilité
+	MONTH_NAMES: [
+		'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+		'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre',
+	],
+
+	// Descriptions des jours pour l'accessibilité
+	DAY_NAMES: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+
+	// Autres messages
+	DATE_SEPARATOR: '/',
+	RANGE_SEPARATOR: ' - ',
+}

package/src/components/DatePicker/docExamples/DatePickerBidirectionalValidation.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 	import { ref, computed, watch } from 'vue'
-	import DatePicker from '@/components/DatePicker/DatePicker.vue'
+	import DatePicker from '@/components/DatePicker/DatePicker/DatePicker.vue'
 	import { useDateFormat } from '@/composables/date/useDateFormat'
 
 	const { parseDate } = useDateFormat()
@@ -157,15 +157,15 @@
 			Validation bidirectionnelle entre deux DatePickers
 		</h1>
 
-		<p class="text-body-2 mb-4">
+		<div class="text-body-2 mb-4">
 			Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
-			<ul>
+			<ul class="ml-4">
 				<li>La date de fin doit être postérieure ou égale à la date de début</li>
 				<li>La date de début doit être antérieure ou égale à la date de fin</li>
 				<li>Lorsque la date de début change, la validation de la date de fin est mise à jour</li>
 				<li>Lorsque la date de fin change, la validation de la date de début est mise à jour</li>
 			</ul>
-		</p>
+		</div>
 
 		<div class="date-range-container mb-6">
 			<div class="date-picker-wrapper">

package/src/components/DatePicker/docExamples/DatePickerValidationExamples.vue

@@ -1,6 +1,6 @@
 <script setup>
 	import { ref } from 'vue'
-	import DatePicker from '@/components/DatePicker/DatePicker.vue'
+	import DatePicker from '@/components/DatePicker/DatePicker/DatePicker.vue'
 
 	// Exemple 1: Validation de base (required)
 	const date1 = ref('')

package/src/components/DatePicker/playground/ComplexDatePickerPlayground.vue

@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
+
+	// Valeurs pour les différents exemples
+	const standardDate = ref<string | null>(null)
+	const americanDate = ref<string | null>(null)
+	const isoDate = ref<string | null>(null)
+	const dotDate = ref<string | null>(null)
+	const requiredDate = ref<string | null>(null)
+	const dateRange = ref<[string, string] | null>(null)
+	const birthDate = ref<string | null>(null)
+	const formattedDate = ref<string | null>(null)
+</script>
+
+<template>
+	<div class="playground-container">
+		<h1>ComplexDatePicker Playground</h1>
+
+		<div class="demo-section">
+			<h2>Format standard (DD/MM/YYYY)</h2>
+			<ComplexDatePicker
+				v-model="standardDate"
+				placeholder="Date standard"
+				format="DD/MM/YYYY"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ standardDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Format américain (MM/DD/YYYY)</h2>
+			<ComplexDatePicker
+				v-model="americanDate"
+				placeholder="Date américaine"
+				format="MM/DD/YYYY"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ americanDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Format ISO (YYYY-MM-DD)</h2>
+			<ComplexDatePicker
+				v-model="isoDate"
+				placeholder="Date ISO"
+				format="YYYY-MM-DD"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ isoDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Format avec séparateur point (DD.MM.YYYY)</h2>
+			<ComplexDatePicker
+				v-model="dotDate"
+				placeholder="Date avec points"
+				format="DD.MM.YYYY"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ dotDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Champ requis</h2>
+			<ComplexDatePicker
+				v-model="requiredDate"
+				placeholder="Date requise"
+				format="DD/MM/YYYY"
+				required
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ requiredDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Plage de dates</h2>
+			<ComplexDatePicker
+				v-model="dateRange"
+				placeholder="Plage de dates"
+				format="DD/MM/YYYY"
+				display-range
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ dateRange ? JSON.stringify(dateRange) : 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Date de naissance (année d'abord)</h2>
+			<ComplexDatePicker
+				v-model="birthDate"
+				placeholder="Date de naissance"
+				format="DD/MM/YYYY"
+				is-birth-date
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ birthDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Format d'affichage vs format de retour</h2>
+			<ComplexDatePicker
+				v-model="formattedDate"
+				placeholder="Date avec format de retour"
+				format="DD/MM/YYYY"
+				date-format-return="YYYY-MM-DD"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ formattedDate || 'Non définie' }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.playground-container {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 20px;
+	font-family: Roboto, sans-serif;
+}
+
+h1 {
+	text-align: center;
+	margin-bottom: 30px;
+	color: #2c3e50;
+}
+
+h2 {
+	color: #2c3e50;
+	font-size: 1.2rem;
+	margin-bottom: 10px;
+}
+
+.demo-section {
+	margin-bottom: 30px;
+	padding: 20px;
+	border-radius: 8px;
+	background-color: #f8f9fa;
+	box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.date-picker {
+	margin-bottom: 10px;
+	width: 100%;
+}
+
+.value-display {
+	margin-top: 10px;
+	padding: 10px;
+	background-color: #e9ecef;
+	border-radius: 4px;
+	font-family: monospace;
+	white-space: pre-wrap;
+	word-break: break-all;
+}
+</style>

package/src/components/DatePicker/playground/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/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Types pour les composants DatePicker
+ */
+
+/**
+ * Type représentant une valeur de date qui peut être une Date, un tableau de Dates ou null
+ * Utilisé pour les opérations internes du DatePicker avec des objets Date
+ */
+export type DateObjectValue = Date | (Date | null)[] | null
+
+/**
+ * Alias pour maintenir la compatibilité avec le code existant
+ * @deprecated Utilisez DateObjectValue pour les objets Date ou importez DateValue depuis useDateInitializationDayjs pour les chaînes
+ */
+export type DateValue = DateObjectValue

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>
+`} />