@cnamts/synapse 1.0.7 → 1.0.9

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.mdx

@@ -3,9 +3,10 @@ import * as DatePickerStories from "./ComplexDatePicker.stories.ts";
 
 <Meta of={DatePickerStories}/>
 
-# DatePicker - Mode combiné
-
-Le DatePicker en mode combiné (`useCombinedMode: true`) permet d'utiliser à la fois le calendrier interactif et la saisie manuelle avec formatage automatique.
+<div className="header">
+  <h1>DatePicker - Mode combiné</h1>
+  <p>Le DatePicker en mode combiné (`useCombinedMode: true`) permet d'utiliser à la fois le calendrier interactif et la saisie manuelle avec formatage automatique.</p>
+</div>
 
 ## Description
 
@@ -24,7 +25,6 @@ Propriétés applicables pour le mode combiné :
 
 <Controls of={DatePickerStories.Default}/>
 
-
 # Fonctionnalités spécifiques
 
 ## Formatage automatique des dates
@@ -59,7 +59,6 @@ Le composant permet la sélection de plages de dates avec validation automatique
 
 ### DatePicker avec période personnalisée
 
-
 <div
     style={{
         border: '2px solid #FF0000',
@@ -89,7 +88,6 @@ La propriété `textFieldActivator` permet d'ouvrir le calendrier en cliquant n'
 
 <Canvas of={DatePickerStories.WithTextFieldActivator}/>
 
-
 # Validation et règles personnalisées
 
 Le composant prend en charge des règles de validation personnalisées pour vérifier les dates saisies.
@@ -172,6 +170,7 @@ Le composant expose plusieurs méthodes qui peuvent être utilisées via une ré
 	import { DatePicker } from '@cnamts/synapse'
 
 	const date = ref('')
+import '../../../stories/styles/shared.css';
 </script>
 
 <template>

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -535,10 +535,10 @@
 	const datePickerRef = ref<null | ComponentPublicInstance<typeof VDatePicker>>()
 
 	onMounted(() => {
+		setupMonthButtonObserver()
 		document.addEventListener('click', handleClickOutside)
 		if (displayFormattedDateComputed.value) displayFormattedDate.value = displayFormattedDateComputed.value
 		validateDates()
-		setupMonthButtonObserver()
 	})
 
 	onBeforeUnmount(() => {
@@ -710,6 +710,19 @@
 		{ immediate: true },
 	)
 
+	// Observer pour personnaliser les boutons dès que le DatePicker devient visible
+	watch(
+		isDatePickerVisible,
+		(visible) => {
+			if (visible) {
+				nextTick(() => {
+					customizeMonthButton()
+					markHolidayDays()
+				})
+			}
+		},
+	)
+
 	/**
 	 * Menu / visibility & keyboard
 	 */
@@ -1100,8 +1113,6 @@
 
 :deep(.v-field--dirty),
 :deep(.v-field--focused) {
-	opacity: 1 !important;
-
 	--v-medium-emphasis-opacity: 1;
 }
 

package/src/components/DatePicker/DatePickerOverview.mdx

@@ -1,11 +1,13 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
 import { linkTo } from '@storybook/addon-links';
+import '../../stories/styles/shared.css';
 
 <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.
+<div className="header">
+  <h1>DatePicker - Vue d'ensemble</h1>
+  <p>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.</p>
+</div>
 ## Variantes disponibles
 
 Le DatePicker propose trois modes principaux, chacun adapté à des besoins spécifiques :

package/src/components/DatePicker/DatePickerValidationExample/DatePickerValidation.mdx

@@ -1,11 +1,13 @@
 import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
 import * as ValidationStories from './DatePickerValidation.stories.ts';
+import '../../../stories/styles/shared.css';
 
 <Meta of={ValidationStories}/>
 
-# Documentations des règles de validation du DatePicker
-
-Le composant DatePicker prend en charge plusieurs types de règles de validation qui permettent de contrôler les dates saisies par l'utilisateur. Cette documentation décrit toutes les règles disponibles et comment les utiliser.
+<div className="header">
+  <h1>Documentations des règles de validation du DatePicker</h1>
+  <p>Le composant DatePicker prend en charge plusieurs types de règles de validation qui permettent de contrôler les dates saisies par l'utilisateur. Cette documentation décrit toutes les règles disponibles et comment les utiliser.</p>
+</div>
 
 > Pour en savoir plus sur le système global de gestion de validation, consultez la page <a href="/?path=/docs/guide-du-dev-utiliser-le-syst%C3%A8me-de-validation--docs">Utiliser le système de validation</a>.
 

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -13,7 +13,6 @@
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
 	import { useValidation, type ValidationRule, type ValidationResult } from '@/composables/validation/useValidation'
-	import { formatDateInput as formatDateInputUtil } from '../utils/dateFormattingUtils'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
 	import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
@@ -192,7 +191,7 @@
 	const updateDisplayValue = (dateDisplayText: string) => (inputValue.value = dateDisplayText)
 	const updateAriaLabel = (ariaLabelText: string) => (ariaLabel.value = ariaLabelText)
 
-	const { handlePaste: handlePasteSingle, isHandlingBackspace } = useDateInputEditing({
+	const { formatDateInput, handlePaste: handlePasteSingle, isHandlingBackspace } = useDateInputEditing({
 		format: displayFormat.value,
 		updateDisplayValue,
 		updateAriaLabel,
@@ -285,20 +284,14 @@
 		await nextTick()
 		if (options.focus) inputElement.focus({ preventScroll: true })
 
-		// Only set cursor position if we have content
-		if (inputValue.value) {
-			const cursorPosition = nextEditableIndex(displayFormat.value, 0)
-			// double rAF pour laisser Vuetify finir ses mises à jour
+		const cursorPosition = nextEditableIndex(displayFormat.value, 0)
+		// double rAF pour laisser Vuetify finir ses mises à jour
+		requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				requestAnimationFrame(() => {
-					inputElement.setSelectionRange(cursorPosition, cursorPosition)
-					isBootstrapping.value = false
-				})
+				inputElement.setSelectionRange(cursorPosition, cursorPosition)
+				isBootstrapping.value = false
 			})
-		}
-		else {
-			isBootstrapping.value = false
-		}
+		})
 	}
 
 	// Handlers overwrite (single)
@@ -735,15 +728,14 @@
 
 				if (typeof nv !== 'string') return
 				let formatted = ''
-				const currentFormat = props.format || 'DD/MM/YYYY'
 				if (nv.includes(' - ')) {
 					const [startDateText, endDateText = ''] = nv.split(' - ')
-					const formattedStartDate = startDateText ? formatDateInputUtil(startDateText, currentFormat).formatted : ''
-					const formattedEndDate = endDateText ? formatDateInputUtil(endDateText, currentFormat).formatted : ''
+					const formattedStartDate = startDateText ? formatDateInput(startDateText).formatted : ''
+					const formattedEndDate = endDateText ? formatDateInput(endDateText).formatted : ''
 					formatted = `${formattedStartDate} - ${formattedEndDate}`
 				}
 				else {
-					formatted = formatDateInputUtil(nv, currentFormat).formatted
+					formatted = formatDateInput(nv).formatted
 				}
 
 				const result = !ov ? handleRangeInput('', formatted) : handleRangeInput(ov, formatted, cursor)
@@ -794,17 +786,35 @@
 				}
 			}
 			else {
-				// --- Branche SINGLE ---
-				// Format the input for both complete and partial dates
-				const { formatted, cursorPos } = formatDateInputUtil(nv, props.format || 'DD/MM/YYYY', { cursorPosition: cursor })
-
-				// Always update the input value with formatted version
-				// But don't format if it would result in just placeholders (let the HTML placeholder show instead)
-				if (formatted !== nv && !formatted.match(/^[_/\-.\s]+$/)) {
+				if (isOverwriteEditing.value) {
+					const formatted = inputValue.value
+					const complete = formatted && !formatted.includes('_')
+					if (complete) {
+						const formatValidationResult = validateDateFormatForSingleOrRange(formatted)
+						if (formatValidationResult.isValid) {
+							const parsedDate = parseDate(formatted, displayFormat.value)
+							if (parsedDate) {
+								const formattedDateOutput = returnFormat.value !== displayFormat.value
+									? formatDate(parsedDate, returnFormat.value)
+									: formatDate(parsedDate, displayFormat.value)
+								await nextTick()
+								emitModel(formattedDateOutput)
+								emit('date-selected', formattedDateOutput)
+							}
+						}
+						runRules(formatted)
+					}
+					else {
+						clearValidation()
+					}
+					return
+				}
+				const { formatted, cursorPos } = formatDateInput(nv, cursor)
+				if (formatted !== nv) {
 					inputValue.value = formatted
-					if (!isHandlingBackspace.value && inputEl) {
+					if (!isHandlingBackspace.value) {
 						await nextTick()
-						inputEl.setSelectionRange(cursorPos, cursorPos)
+						inputEl?.setSelectionRange(cursorPos, cursorPos)
 					}
 				}
 
@@ -908,11 +918,6 @@
 		hasInteracted.value = true
 		const ok = runRules(inputValue.value)
 		if (!ok || hasError.value) return false
-		if (props.showSuccessMessages && inputValue.value && !hasError.value && warningMessages.value.length === 0) {
-			if (!successMessages.value.includes(DATE_PICKER_MESSAGES.SUCCESS_VALID_DATE)) {
-				successMessages.value.push(DATE_PICKER_MESSAGES.SUCCESS_VALID_DATE)
-			}
-		}
 		return !hasError.value
 	}
 

package/src/components/DatePicker/DateTextInput/NoCalendar.mdx

@@ -1,12 +1,14 @@
 import { Meta, Controls, Canvas, Story } from '@storybook/blocks';
 import * as NoCalendarStories from './NoCalendar.stories';
 import { ref } from 'vue';
+import '../../../stories/styles/shared.css';
 
 <Meta of={NoCalendarStories} />
 
-# DatePicker - Mode saisie manuelle uniquement
-
-Le DatePicker en mode saisie manuelle uniquement (`noCalendar: true`) permet d'utiliser le champ de saisie avec formatage automatique sans que le calendrier n'apparaisse au clic sur l'input ou sur l'icône.
+<div className="header">
+  <h1>DatePicker - Mode saisie manuelle uniquement</h1>
+  <p>Le DatePicker en mode saisie manuelle uniquement (`noCalendar: true`) permet d'utiliser le champ de saisie avec formatage automatique sans que le calendrier n'apparaisse au clic sur l'input ou sur l'icône.</p>
+</div>
 
 ## Description
 

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -568,6 +568,7 @@ export const AutoClampFeature: Story = {
 							placeholder="Saisie avec auto clamp - séparateur -"
 							format="DD-MM-YYYY"
 							noCalendar
+							autoClamp
 
 						/>
 						
@@ -577,6 +578,7 @@ export const AutoClampFeature: Story = {
 							placeholder="Saisie avec auto clamp - séparateur ."
 							format="YYYY.MM.DD"
 							noCalendar
+							autoClamp
 						/>
 						
 						<h4 class="mt-4">Mode plage de dates (séparateur /)</h4>
@@ -649,6 +651,7 @@ export const AutoClampFeature: Story = {
                   placeholder="Saisie avec auto clamp - séparateur ."
                   format="YYYY.MM.DD"
                   noCalendar
+                  autoClamp
                 />
                 <div class="caption mb-4">Valeur actuelle: {{ dateDot || 'aucune date saisie' }}</div>
                 

package/src/components/DatePicker/Usages.mdx

@@ -1,9 +1,11 @@
 import { Meta, Story} from "@storybook/blocks";
+import '../../stories/styles/shared.css';
 import * as stories from "./Usages.stories.ts";
 
 <Meta of={stories} />
 
-# Usages
-
-<Story of={stories.UsagePage} />
+<div className="header">
+  <h1>Usages</h1>
+  
+</div><Story of={stories.UsagePage} />
 <br />

package/src/components/DiacriticPicker/DiacriticPicker.mdx

@@ -4,9 +4,10 @@ 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.
+<div className="header">
+  <h1>DiacriticPicker</h1>
+  <p>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.</p>
+</div>
 
 <Canvas of={DiacriticPickerStories.Default} />
 
@@ -89,6 +90,7 @@ Vous pouvez personnaliser la liste des caractères diacritiques affichés dans l
   import { ref } from 'vue'
   
   const text = ref('')
+import '../../stories/styles/shared.css';
   const caracteres = ['é', 'è', 'ê', 'à', 'ç', 'ù']
 </script>
 

package/src/components/DialogBox/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/DialogBox/DialogBox.mdx

@@ -3,9 +3,10 @@ import * as DialogBoxStories from './DialogBox.stories';
 
 <Meta of={DialogBoxStories} />
 
-# DialogBox
-
-L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec des boutons d'action.
+<div className="header">
+  <h1>DialogBox</h1>
+  <p>L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec des boutons d'action.</p>
+</div>
 
 <Canvas of={DialogBoxStories.Default}  />
 
@@ -21,6 +22,7 @@ L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec
     import { ref } from 'vue'
 
     const dialogOpen = ref(false)
+import '../../stories/styles/shared.css';
 </script>
 
 <template>

package/src/components/DialogBox/DialogBox.stories.ts

@@ -113,6 +113,18 @@ const meta: Meta<typeof DialogBox> = {
 				},
 			},
 		},
+		'draggable': {
+			control: 'boolean',
+			description: 'Rendre la boîte de dialogue déplaçable avec la souris ou les flèches gauche/droite du clavier',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
 		'vuetifyOptions': {
 			control: 'object',
 			description: 'Personnalisation des composants Vuetify internes',
@@ -811,3 +823,74 @@ export const VuetifyOptions: Story = {
 		],
 	},
 }
+
+export const Draggable: Story = {
+	args: {
+		'modelValue': false,
+		'title': 'DialogBox title',
+		'default': 'DialogBox content',
+		'draggable': true,
+		'onCancel': fn(),
+		'onConfirm': fn(),
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { DialogBox, VBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<VBtn
+						@click="args.modelValue = !args.modelValue"
+						color="primary"
+					>Toggle DialogBox</VBtn>
+					<DialogBox
+						v-bind="args"
+						@update:modelValue="args.modelValue = $event"
+						@confirm="args.modelValue = false"
+						@cancel="args.modelValue = false"
+					>
+						{{ args.default }}
+					</DialogBox>
+				</div>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VBtn
+						color="primary"
+						@click="dialogOpen = !dialogOpen"
+					>Toggle DialogBox</VBtn>
+					<DialogBox
+						v-model="dialogOpen"
+						title="DialogBox title"
+						draggable
+						@confirm="dialogOpen = false"
+						@cancel="dialogOpen = false"
+					>
+						DialogBox content
+					</DialogBox>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { DialogBox } from '@cnamts/synapse'
+					import { ref } from 'vue'
+
+					const dialogOpen = ref(false)
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/DialogBox/DialogBox.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { mdiClose } from '@mdi/js'
-	import { ref, useId, watch, nextTick } from 'vue'
+	import { nextTick, ref, toRef, useId, watch } from 'vue'
 	import type { VBtn, VDialog } from 'vuetify/components'
-	import { config } from './config'
-	import { locales } from './locales'
 	import { useDisplay } from 'vuetify/lib/framework.mjs'
 	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
+	import { config } from './config'
+	import { locales } from './locales'
+	import { useDraggable } from './useDraggable'
 
 	const props = withDefaults(defineProps<{
 		title?: string
@@ -16,6 +17,7 @@
 		hideActions?: boolean
 		persistent?: boolean
 		autofocusValidateBtn?: boolean
+		draggable?: boolean
 	} & CustomizableOptions>(), {
 		title: undefined,
 		width: '800px',
@@ -100,11 +102,18 @@
 
 	const display = useDisplay()
 
+	const {
+		isGrabbing,
+		startDragging,
+		moveToLeft,
+		moveToRight,
+	} = useDraggable(toRef(props, 'draggable'), dialogContent)
 </script>
 
 <template>
 	<VDialog
 		v-model="dialog"
+		:scrim="props.draggable ? false : true"
 		v-bind="$attrs"
 		:width="props.width"
 		:persistent="props.persistent"
@@ -113,13 +122,24 @@
 		class="sy-dialog-box"
 		:aria-labelledby="id"
 		@keydown.tab="handleFocus"
+		@keydown.left="moveToLeft"
+		@keydown.right="moveToRight"
 	>
 		<VCard
 			v-bind="options.card"
-			id="dialog-content"
 			ref="dialogContent"
+			:class="{
+				'sy-dialog-box-draggable': props.draggable,
+				'sy-dialog-box-draggable--active': props.draggable && isGrabbing,
+			}"
+			:aria-label="props.draggable ? locales.draggable : undefined"
 		>
-			<VCardTitle v-bind="options.cardTitle">
+			<VCardTitle
+				class="sy-dialog-box-title"
+				v-bind="options.cardTitle"
+				:title="props.draggable ? locales.dragInstruction : undefined"
+				@mousedown="startDragging"
+			>
 				<slot name="title">
 					<h2
 						v-if="title"
@@ -146,7 +166,13 @@
 					/>
 				</VBtn>
 			</VCardTitle>
-			<slot />
+
+			<div
+				class="px-6"
+				v-bind="options.cardText"
+			>
+				<slot />
+			</div>
 
 			<div
 				v-if="!props.hideActions"
@@ -239,6 +265,15 @@ h2 {
 	gap: $spacing-small;
 }
 
+.sy-dialog-box-draggable .sy-dialog-box-title {
+	cursor: grab;
+}
+
+.sy-dialog-box-draggable--active .sy-dialog-box-title {
+	cursor: grabbing;
+	user-select: none;
+}
+
 @media screen and (min-width: $container-mobile-max-width) {
 	.sy-dialog-box-actions-ctn {
 		flex-direction: row;

package/src/components/DialogBox/Usages.mdx

@@ -1,9 +1,11 @@
 import { Meta, Story} from "@storybook/blocks";
+import '../../stories/styles/shared.css';
 import * as stories from "./Usages.stories.ts";
 
 <Meta of={stories} />
 
-# Usages
-
-<Story of={stories.UsagePage} />
+<div className="header">
+  <h1>Usages</h1>
+  
+</div><Story of={stories.UsagePage} />
 <br />

package/src/components/DialogBox/config.ts

@@ -1,9 +1,9 @@
 export const config = {
 	card: {
-		class: 'pa-6',
+		class: 'pa-0 pb-6',
 	},
 	cardTitle: {
-		class: 'd-flex align-start flex-nowrap pa-0 mb-6 mr-6',
+		class: 'd-flex align-start flex-nowrap pa-0 pt-6 mb-6 px-6',
 	},
 	closeBtn: {
 		icon: true,
@@ -13,7 +13,7 @@ export const config = {
 		class: 'mt-n2 mr-n2 ml-4',
 	},
 	cardActions: {
-		class: 'd-flex flex-wrap mt-6',
+		class: 'd-flex flex-wrap mt-6 px-6',
 	},
 	cancelBtn: {
 		color: 'primary',

package/src/components/DialogBox/locales.ts

@@ -2,4 +2,6 @@ export const locales = {
 	closeBtn: 'Fermer la boîte de dialogue',
 	cancelBtn: 'Annuler',
 	confirmBtn: 'Valider',
+	draggable: 'Déplaçable',
+	dragInstruction: 'Déplacer la boîte de dialogue',
 }