@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Customs/Selects/SySelect/SySelect.vue

@@ -3,7 +3,7 @@
 	defineOptions({
 		inheritAttrs: false,
 	})
-	import { mdiInformation, mdiMenuDown, mdiCloseCircle } from '@mdi/js'
+	import { mdiInformation, mdiChevronDown, mdiCloseCircle } from '@mdi/js'
 	import { ref, watch, onMounted, computed, nextTick, type PropType } from 'vue'
 	import { useSySelectKeyboard } from './composables/useSySelectKeyboard'
 	import { vRgaaSvgFix } from '../../../../directives/rgaaSvgFix'
@@ -839,7 +839,7 @@
 					</button>
 					<SyIcon
 						class="arrow"
-						:icon="mdiMenuDown"
+						:icon="mdiChevronDown"
 						:decorative="true"
 					/>
 				</template>

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -364,6 +364,10 @@
 	cursor: pointer;
 }
 
+:deep(.v-label) {
+	margin-left: 8px;
+}
+
 :deep(.v-selection-control--disabled .v-selection-control__input) {
 	cursor: not-allowed;
 }

package/src/components/Customs/SyForm/SyForm.stories.ts

@@ -33,7 +33,7 @@ export const Basic: Story = {
 		setup() {
 			const name = ref('')
 			const email = ref('')
-			const form = ref<{ validate: () => Promise<boolean> } | null>(null)
+			const form = ref<{ validate: () => Promise<boolean>, reset: () => void, clearValidation: () => void } | null>(null)
 
 			// Règles de validation selon le design system
 			const emailRules = [
@@ -56,9 +56,11 @@ export const Basic: Story = {
 		template: `
       <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="name" label="Nom" required />
-          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" />
-          <v-btn type="submit" color="primary">Soumettre</v-btn>
+          <SyTextField v-model="name" label="Nom" required class="mb-2" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
+          <div class="d-flex gap-3">
+            <v-btn type="submit" color="primary">Soumettre</v-btn>
+          </div>
         </div>
       </SyForm>
     `,
@@ -74,9 +76,11 @@ export const Basic: Story = {
 <template>
       <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="name" label="Nom" required />
-          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" />
-          <v-btn type="submit" color="primary">Soumettre</v-btn>
+          <SyTextField v-model="name" label="Nom" required class="mb-2" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
+          <div class="d-flex gap-3">
+            <v-btn type="submit" color="primary">Soumettre</v-btn>
+          </div>
         </div>
       </SyForm>
 </template>
@@ -118,7 +122,7 @@ export const CustomValidation: Story = {
 			const username = ref('')
 			const password = ref('')
 			const confirmPassword = ref('')
-			const form = ref<{ validate: () => Promise<boolean> } | null>(null)
+			const form = ref<{ validate: () => Promise<boolean>, reset: () => void, clearValidation: () => void } | null>(null)
 
 			// Règles de validation
 			const passwordRules = computed(() => [
@@ -160,17 +164,18 @@ export const CustomValidation: Story = {
       <div>
         <SyForm ref="form" v-bind="args" @submit="submitForm">
           <div class="d-flex flex-column gap-4">
-            <SyTextField v-model="username" label="Nom d'utilisateur" required />
-            <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" />
+            <SyTextField v-model="username" label="Nom d'utilisateur" required class="mb-2" />
+            <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" class="mb-2" />
             <SyTextField 
               v-model="confirmPassword" 
               label="Confirmer le mot de passe" 
               type="password" 
               required 
-              :custom-rules="confirmPasswordRules" 
+              :custom-rules="confirmPasswordRules"
+              class="mb-2"
             />
             <div class="d-flex gap-3">
-              <v-btn type="submit" color="primary">S'inscrire</v-btn>
+              <v-btn type="submit" color="primary" class="mr-2">S'inscrire</v-btn>
               <v-btn @click="validateManually" color="secondary">Valider sans soumettre</v-btn>
             </div>
           </div>
@@ -187,16 +192,17 @@ export const CustomValidation: Story = {
   <div>
     <SyForm ref="form" @submit="onSubmit">
       <div class="d-flex flex-column gap-4">
-        <SyTextField v-model="username" label="Nom d'utilisateur" required />
-        <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" />
+        <SyTextField v-model="username" label="Nom d'utilisateur" required class="mb-2" />
+        <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" class="mb-2" />
         <SyTextField 
           v-model="confirmPassword" 
           label="Confirmer le mot de passe" 
           type="password" 
           :custom-rules="confirmPasswordRules" 
+          class="mb-2"
         />
         <div class="d-flex gap-3">
-          <v-btn type="submit" color="primary">S'inscrire</v-btn>
+          <v-btn type="submit" color="primary" class="mr-2">S'inscrire</v-btn>
           <v-btn @click="validateManually" color="secondary">Valider sans soumettre</v-btn>
         </div>
       </div>
@@ -296,10 +302,12 @@ export const MixedFields: Story = {
 		template: `
       <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="formData.name" label="Nom complet" required />
-          <SyTextField v-model="formData.email" label="Email" :custom-rules="emailCustomRules" />
-          <SySelect v-model="formData.country" :items="countries" label="Pays" required />
-          <v-btn type="submit" color="primary">Enregistrer</v-btn>
+          <SyTextField v-model="formData.name" label="Nom complet" required class="mb-2" />
+          <SyTextField v-model="formData.email" label="Email" :custom-rules="emailCustomRules" class="mb-2" />
+          <SySelect v-model="formData.country" :items="countries" label="Pays" required class="mb-2" />
+          <div class="d-flex gap-3">
+            <v-btn type="submit" color="primary">Enregistrer</v-btn>
+          </div>
         </div>
       </SyForm>
     `,
@@ -312,10 +320,12 @@ export const MixedFields: Story = {
 <template>
       <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="formData.name" label="Nom complet" required />
-          <SyTextField v-model="formData.email" label="Email" :customRules="emailCustomRules" />
-          <SySelect v-model="formData.country" :items="countries" label="Pays" required />
-          <v-btn type="submit" color="primary">Enregistrer</v-btn>
+          <SyTextField v-model="formData.name" label="Nom complet" required class="mb-2" />
+          <SyTextField v-model="formData.email" label="Email" :customRules="emailCustomRules" class="mb-2" />
+          <SySelect v-model="formData.country" :items="countries" label="Pays" required class="mb-2" />
+          <div class="d-flex gap-3">
+            <v-btn type="submit" color="primary">Enregistrer</v-btn>
+          </div>
         </div>
       </SyForm>
 </template>
@@ -361,3 +371,103 @@ export const MixedFields: Story = {
 		],
 	},
 }
+
+export const Reset: Story = {
+	render: args => ({
+		components: { SyForm, SyTextField, VBtn },
+		setup() {
+			const name = ref('')
+			const email = ref('')
+			const form = ref<{ validate: () => Promise<boolean>, reset: () => void, clearValidation: () => void } | null>(null)
+
+			// Règles de validation selon le design system
+			const emailRules = [
+				{ type: 'email', options: { message: 'Format d\'email invalide' } },
+				{ type: 'required', options: { message: 'L\'email est obligatoire' } },
+			]
+
+			const submitForm = async () => {
+				const isValid = await form.value?.validate()
+				if (isValid) {
+					alert('Formulaire valide !')
+				}
+				else {
+					alert('Formulaire invalide, veuillez corriger les erreurs.')
+				}
+			}
+
+			function clearAll() {
+				form.value?.reset()
+				form.value?.clearValidation()
+			}
+
+			return { name, email, emailRules, form, submitForm, clearAll, args }
+		},
+		template: `
+      <SyForm ref="form" v-bind="args" @submit="submitForm" @reset="onFormReset">
+        <div class="d-flex flex-column gap-4">
+          <SyTextField v-model="name" label="Nom" required class="mb-2" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
+          <div class="d-flex gap-3">
+              <v-btn color="secondary" class="mr-2" @click="clearAll">Reset</v-btn>
+              <v-btn type="submit" color="primary">Soumettre</v-btn>
+          </div>
+        </div>
+      </SyForm>
+    `,
+	}),
+	args: {
+		validateOnSubmit: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+      <SyForm ref="form" v-bind="args" @submit="submitForm" @reset="onFormReset">
+        <div class="d-flex flex-column gap-4">
+          <SyTextField v-model="name" label="Nom" required class="mb-2" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
+          <div class="d-flex gap-3">
+              <v-btn color="secondary" class="mr-2" @click="clearAll">Reset</v-btn>
+              <v-btn type="submit" color="primary">Soumettre</v-btn>
+          </div>
+        </div>
+      </SyForm>
+</template>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+const name = ref('')
+const email = ref('')
+
+// Règles de validation selon le design system
+const emailRules = [
+	{ type: 'email', options: { message: "Format d'email invalide" } },
+	{ type: 'required', options: { message: "L'email est obligatoire" } },
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+  if (event.isValid) {
+    alert('Formulaire valide !')
+  }
+  else {
+    alert('Formulaire invalide, veuillez corriger les erreurs.')
+  }
+}
+
+function clearAll() {
+  form.value?.reset()
+  form.value?.clearValidation()
+}
+</script>
+`,
+			},
+		],
+	},
+}

package/src/components/Customs/SyForm/SyForm.vue

@@ -8,12 +8,13 @@
 
 	const emit = defineEmits<{
 		(e: 'submit', value: { isValid: boolean }): void
+		(e: 'reset'): void
 	}>()
 
 	// Reference vers le formulaire Vuetify
 	const form = ref<InstanceType<typeof import('vuetify/components').VForm> | null>(null)
 
-	const { validateAll } = useFormValidation()
+	const { validateAll, clearAll, resetAll } = useFormValidation()
 
 	// Methode de validation globale qui combine Vuetify et nos composants personnalises
 	const validate = async () => {
@@ -48,7 +49,21 @@
 	}
 
 	const reset = () => {
+		// Reset custom components values
+		resetAll()
+		// Reset field values and validations for Vuetify form
 		form.value?.reset()
+		form.value?.resetValidation()
+		// Notify consumers so they can clear external models (e.g., v-model refs)
+		emit('reset')
+	}
+
+	// Clear only validation states (keep current values)
+	const clearValidation = () => {
+		// Clear Vuetify internal validation state
+		form.value?.resetValidation()
+		// Clear custom components validation states registered in the form
+		clearAll()
 	}
 
 	// Gestion de la soumission du formulaire
@@ -65,6 +80,7 @@
 	defineExpose({
 		validate,
 		reset,
+		clearValidation,
 		form,
 	})
 </script>

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	// Prevent display-asterisk from being passed to the DOM
+// Prevent display-asterisk from being passed to the DOM
 	defineOptions({
 		inheritAttrs: false,
 	})
@@ -8,7 +8,7 @@
 		mdiCheck,
 		mdiInformationOutline,
 		mdiClose,
-		mdiInformation,
+		mdiAlertCircle,
 		mdiCalendar,
 	} from '@mdi/js'
 	import { computed, onMounted, ref, watch, nextTick, type ComponentPublicInstance } from 'vue'
@@ -166,7 +166,7 @@
 		info: mdiInformationOutline,
 		success: mdiCheck,
 		warning: mdiAlertOutline,
-		error: mdiInformation,
+		error: mdiAlertCircle,
 		close: mdiClose,
 		calendar: mdiCalendar,
 	}
@@ -189,6 +189,16 @@
 
 	const isBlurred = ref(false)
 
+	const showClear = computed(() => {
+		if (!props.isClearable) return false
+		if (props.readonly || props.disabled) return false
+		return model.value !== undefined && model.value !== null && String(model.value) !== '' && String(model.value) !== '__/__/____'
+	})
+
+	const clearField = () => {
+		model.value = ''
+	}
+
 	// Initialisation du composable de validation
 	const validation = useValidation({
 		customRules: props.customRules,
@@ -274,7 +284,7 @@
 	const hasWarning = computed(() => validation.hasWarning.value || props.hasWarning)
 	const hasSuccess = computed(() => (validation.hasSuccess.value && !hasError.value && !hasWarning.value) || props.hasSuccess)
 
-	const errors = computed(() => validation.errors.value)
+	const errors = computed(() => [...validation.errors.value, ...(props.errorMessages || [])])
 	const warnings = computed(() => validation.warnings.value)
 	const successes = computed(() => validation.successes.value)
 
@@ -351,7 +361,7 @@
 	const syTextFieldRef = ref<ComponentPublicInstance | null>(null)
 
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, validation.clearValidation)
 
 	onMounted(() => {
 		nextTick(() => {
@@ -549,8 +559,6 @@
 		:base-color="props.baseColor"
 		:bg-color="props.bgColor"
 		:center-affix="props.centerAffix"
-		:clear-icon="ICONS.close"
-		:clearable="props.isClearable"
 		:color="props.color"
 		:counter-value="props.counterValue"
 		:density="props.density"
@@ -695,6 +703,16 @@
 		<!-- Append inner -->
 		<template #append-inner>
 			<slot name="append-inner">
+				<!-- Keyboard-focusable clear button -->
+				<VBtn
+					v-if="showClear"
+					class="v-btn v-btn--density-compact mr-1"
+					:aria-label="props.label ? `Vider ${props.label}` : 'Vider'"
+					:title="props.label ? `Vider ${props.label}` : 'Vider'"
+					:icon="mdiClose"
+					variant="text"
+					@click="clearField"
+				/>
 				<SyIcon
 					v-if="validationIcon && !props.appendInnerIcon"
 					:icon="validationIcon"
@@ -788,6 +806,10 @@
 		opacity: 1 !important;
 	}
 
+	:deep(.v-icon__svg) {
+		fill: tokens.$colors-text-success !important;
+	}
+
 	:deep(.v-field) {
 		color: tokens.$colors-border-success !important;
 

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -71,6 +71,8 @@
 		}
 		autoClamp?: boolean
 		isValidateOnBlur?: boolean
+		hint?: string
+		persistentHint?: boolean
 	}>(), {
 		modelValue: undefined,
 		label: DATE_PICKER_MESSAGES.LABEL_DEFAULT,
@@ -108,6 +110,8 @@
 		period: () => ({ min: '', max: '' }),
 		autoClamp: false,
 		isValidateOnBlur: true,
+		hint: undefined,
+		persistentHint: false,
 	})
 
 	// La compatibilité entre isBirthDate et birthDate est gérée directement dans l'appel au composable
@@ -588,7 +592,7 @@
 	}
 
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, clearValidation)
 
 	const openDatePicker = () => {
 		if (props.disabled || props.readonly) return
@@ -597,9 +601,8 @@
 		}
 	}
 
-	// Fonction pour mettre à jour le mois
+	// Fonction pour mettre à jour le mois quand on navigue via les flèches
 	const onUpdateMonth = (month: string) => {
-		// Éviter les mises à jour inutiles si le mois n'a pas changé
 		if (currentMonth.value === month) return
 		currentMonth.value = month
 		currentMonthName.value = dayjs().month(parseInt(month, 10)).format('MMMM')
@@ -612,14 +615,12 @@
 		})
 	}
 
-	// Fonction pour mettre à jour l'année
+	// Fonction pour mettre à jour l'année quand on navigue via les flèches
 	const onUpdateYear = (year: string) => {
 		currentYear.value = year
 		currentYearName.value = year
-		markHolidayDays()
 
 		handleYearUpdate()
-		handleMonthUpdate()
 		nextTick(() => {
 			if (isDatePickerVisible.value) {
 				customizeMonthButton()
@@ -685,6 +686,8 @@
 	const { currentViewMode, handleViewModeUpdate, handleYearUpdate, handleMonthUpdate, resetViewMode } = useDatePickerViewMode(
 		// Fonction qui retourne la valeur actuelle de isBirthDate (combinaison de isBirthDate et birthDate)
 		() => props.isBirthDate || props.birthDate,
+		// Fonction qui retourne l'état de la date sélectionnée
+		() => selectedDates.value,
 	)
 
 	const handleInputBlur = () => {
@@ -697,6 +700,8 @@
 
 	watch(isDatePickerVisible, async (isVisible) => {
 		if (isVisible) {
+			// Réinitialiser le view mode à l'ouverture pour éviter les problèmes de navigation
+			resetViewMode()
 			// Marquer les jours fériés lorsque le calendrier devient visible
 			markHolidayDays()
 		}
@@ -804,6 +809,17 @@
 		}
 	}, { immediate: true })
 
+	// Reset month/year names when clearing the date
+	watch(selectedDates, (newValue) => {
+		if (!newValue) {
+			const today = new Date()
+			currentMonth.value = today.getMonth().toString()
+			currentMonthName.value = dayjs(today).format('MMMM')
+			currentYear.value = today.getFullYear().toString()
+			currentYearName.value = today.getFullYear().toString()
+		}
+	})
+
 	const toggleDatePicker = () => {
 		if (props.disabled || props.readonly) return
 
@@ -892,7 +908,7 @@
 				:no-icon="props.noIcon"
 				:is-outlined="props.isOutlined"
 				:readonly="props.readonly"
-				:title="props.title || undefined"
+				:title="props.title || props.placeholder || undefined"
 				:width="props.width"
 				:disable-error-handling="props.disableErrorHandling"
 				:show-success-messages="props.showSuccessMessages"
@@ -903,6 +919,8 @@
 				:auto-clamp="props.autoClamp"
 				:display-asterisk="props.displayAsterisk"
 				:is-validate-on-blur="props.isValidateOnBlur"
+				:hint="props.hint"
+				:persistent-hint="props.persistentHint"
 				@update:model-value="handleDateTextInputUpdate"
 				@date-selected="handleDateTextInputSelection"
 				@blur="handleInputBlur"
@@ -938,12 +956,14 @@
 				:show-week-number="props.showWeekNumber"
 				:is-birth-date="props.isBirthDate || props.birthDate"
 				:text-field-activator="props.textFieldActivator"
-				:title="props.title || undefined"
+				:title="props.title || props.placeholder || undefined"
 				:period="period"
 				:auto-clamp="props.autoClamp"
 				:label="props.label"
 				:placeholder="props.placeholder"
 				:is-validate-on-blur="props.isValidateOnBlur"
+				:hint="props.hint"
+				:persistent-hint="props.persistentHint"
 				@update:model-value="emit('update:modelValue', $event)"
 				@focus="emit('focus')"
 				@blur="emit('blur')"
@@ -992,7 +1012,9 @@
 						:display-asterisk="props.displayAsterisk"
 						:is-clearable="!props.readonly"
 						:auto-clamp="props.autoClamp"
-						:title="props.title || undefined"
+						:title="props.title || props.placeholder || undefined"
+						:hint="props.hint"
+						:persistent-hint="props.persistentHint"
 						@click="openDatePickerOnClick"
 						@focus="openDatePickerOnFocus"
 						@blur="handleInputBlur"
@@ -1206,4 +1228,5 @@
 :deep(.v-btn--variant-text .v-btn__overlay) {
 	padding: 13px;
 }
+
 </style>