@cnamts/synapse 0.0.13-alpha → 0.0.14-alpha

package/src/components/UploadWorkflow/UploadWorkflow.stories.ts

@@ -275,7 +275,7 @@ export const Default: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 	/>
 </template>`,
 			},
@@ -332,7 +332,7 @@ export const OptionalDocument: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 	/>
 </template>`,
 			},
@@ -389,7 +389,7 @@ export const WithPreviewStep: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 		:showFilePreview="true"
 	/>
 </template>`,
@@ -437,7 +437,7 @@ export const OneFile: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 	/>
 </template>`,
 			},
@@ -514,7 +514,7 @@ export const Events: Story = {
 			<div>
 				<UploadWorkflow
 					v-model="args.modelValue"
-					:uploadList="args.uploadList"
+					:upload-list="args.uploadList"
 					:vuetify-options="options"
 					@error="[showError, args.onError]"
 					@update:modelValue="[valueUpdated, args['onUpdate:modelValue']]"
@@ -546,7 +546,7 @@ export const Events: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 		vuetify-options="options"
 		@onError="showError"
 		@onUpdate:modelValue="valueUpdated"
@@ -628,7 +628,7 @@ export const Slots: Story = {
 			template: `
 			<UploadWorkflow
 				v-model="args.modelValue"
-				:uploadList="args.uploadList"
+				:upload-list="args.uploadList"
 			>
 				<template #title>
 					<h2>Title slot</h2>
@@ -653,7 +653,7 @@ export const Slots: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 	>
 		<template #title>
 			<h2>Title slot</h2>
@@ -729,7 +729,7 @@ export const Customization: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 		:vuetify-options="options"
 	/>
 </template>`,
@@ -814,7 +814,7 @@ export const ManuallySetFile: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 	/>
 </template>`,
 			},
@@ -904,7 +904,7 @@ export const ManuallySetStates: Story = {
 				code: `<template>
 	<UploadWorkflow
 		v-model="files"
-		:uploadList="uploadList"
+		:upload-list="uploadList"
 	/>
 </template>`,
 			},

package/src/components/UploadWorkflow/tests/__snapshots__/UploadWorkflow.spec.ts.snap

@@ -1,54 +1,353 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UploadWorkflow > render the upload list 1`] = `
-"<div data-v-2a35ee7d="" style="width: 100%;" class="sy-upload-workflow white">
-  <h4 data-v-2a35ee7d="" class="text-h6 mb-2">Documents à nous transmettre</h4>
-  <ul data-v-1c29bdca="" data-v-2a35ee7d="" class="upload-list" style="width: 100%;">
-    <li data-v-55f3ab7e="" data-v-1c29bdca="" class="file-item">
-      <div data-v-55f3ab7e="" class="file-item__description">
-        <div data-v-55f3ab7e="" class="file-item__content"><span data-v-55f3ab7e="" class="file-item__icon"><!--v-if--><i data-v-55f3ab7e="" class="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z mdi v-icon notranslate v-theme--light text-primary" style="font-size: 24px; height: 24px; width: 24px;" aria-hidden="true"></i></span>
-          <div data-v-55f3ab7e="">
-            <div data-v-55f3ab7e="" class="file-item__title">Carte d'identité</div>
-            <div data-v-55f3ab7e="" class="file-item__name text-base"></div>
-            <!--v-if-->
-            <!--v-if-->
+<div
+  class="
+    sy-upload-workflow
+    white
+  "
+  style="width: 100%;"
+>
+  <h4 class="
+    mb-2
+    text-h6
+  ">
+    Documents à nous transmettre
+  </h4>
+  <ul
+    class="upload-list"
+    style="width: 100%;"
+  >
+    <li class="file-item">
+      <div class="file-item__description">
+        <div class="file-item__content">
+          <span class="file-item__icon">
+            <!-- v-if -->
+            <i
+              aria-hidden="true"
+              class="
+                0
+                0
+                0,0
+                0,0
+                20,20V8L14,2H6Z
+                4,2.89
+                4,4V20A2,2
+                6,22H18A2,2
+                M13,9V3.5L18.5,9M6,2C4.89,2
+                mdi
+                notranslate
+                text-primary
+                v-icon
+                v-theme--light
+              "
+              style="font-size: 24px; height: 24px; width: 24px;"
+            ></i>
+          </span>
+          <div>
+            <div class="file-item__title">
+              Carte d'identité
+            </div>
+            <div class="
+              file-item__name
+              text-base
+            "></div>
+            <!-- v-if -->
+            <!-- v-if -->
           </div>
         </div>
-        <div data-v-55f3ab7e="" class="file-item__actions"><button data-v-55f3ab7e="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text file-item__action file-item__action-upload text-primary"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i data-v-55f3ab7e="" class="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""><span data-v-55f3ab7e="">Importer</span></span>
+        <div class="file-item__actions">
+          <button
+            class="
+              file-item__action
+              file-item__action-upload
+              text-primary
+              v-btn
+              v-btn--density-default
+              v-btn--size-default
+              v-btn--variant-text
+              v-theme--light
+            "
+            type="button"
+          >
+            <span class="v-btn__overlay"></span>
+            <span class="v-btn__underlay"></span>
+            <span class="v-btn__prepend">
+              <i
+                aria-hidden="true"
+                class="
+                  12H4V17H20V12H22V17C22
+                  17V12M12
+                  18.11
+                  18.11
+                  19
+                  19
+                  19H4C2.9
+                  2
+                  2
+                  20
+                  21.11
+                  2L6.46
+                  2Z
+                  5.75V15H13V5.75L16.13
+                  7.45L12
+                  7.46L7.88
+                  8.88L11
+                  8.88L17.55
+                  M2
+                  mdi
+                  notranslate
+                  text-primary
+                  v-icon
+                  v-icon--size-default
+                  v-theme--light
+                "
+              ></i>
+            </span>
+            <span
+              class="v-btn__content"
+              data-no-activator=""
+            >
+              <span>
+                Importer
+              </span>
+            </span>
             <!---->
             <!---->
           </button>
-          <!--v-if-->
-          <!--v-if-->
+          <!-- v-if -->
+          <!-- v-if -->
         </div>
       </div>
-      <!--v-if-->
+      <!-- v-if -->
     </li>
-    <li data-v-55f3ab7e="" data-v-1c29bdca="" class="file-item">
-      <div data-v-55f3ab7e="" class="file-item__description">
-        <div data-v-55f3ab7e="" class="file-item__content"><span data-v-55f3ab7e="" class="file-item__icon"><!--v-if--><i data-v-55f3ab7e="" class="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z mdi v-icon notranslate v-theme--light text-primary" style="font-size: 24px; height: 24px; width: 24px;" aria-hidden="true"></i></span>
-          <div data-v-55f3ab7e="">
-            <div data-v-55f3ab7e="" class="file-item__title">Facture de soin</div>
-            <div data-v-55f3ab7e="" class="file-item__name text-base"></div>
-            <!--v-if-->
-            <!--v-if-->
+    <li class="file-item">
+      <div class="file-item__description">
+        <div class="file-item__content">
+          <span class="file-item__icon">
+            <!-- v-if -->
+            <i
+              aria-hidden="true"
+              class="
+                0
+                0
+                0,0
+                0,0
+                20,20V8L14,2H6Z
+                4,2.89
+                4,4V20A2,2
+                6,22H18A2,2
+                M13,9V3.5L18.5,9M6,2C4.89,2
+                mdi
+                notranslate
+                text-primary
+                v-icon
+                v-theme--light
+              "
+              style="font-size: 24px; height: 24px; width: 24px;"
+            ></i>
+          </span>
+          <div>
+            <div class="file-item__title">
+              Facture de soin
+            </div>
+            <div class="
+              file-item__name
+              text-base
+            "></div>
+            <!-- v-if -->
+            <!-- v-if -->
           </div>
         </div>
-        <div data-v-55f3ab7e="" class="file-item__actions"><button data-v-55f3ab7e="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text file-item__action file-item__action-upload text-primary"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i data-v-55f3ab7e="" class="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""><span data-v-55f3ab7e="">Importer</span></span>
+        <div class="file-item__actions">
+          <button
+            class="
+              file-item__action
+              file-item__action-upload
+              text-primary
+              v-btn
+              v-btn--density-default
+              v-btn--size-default
+              v-btn--variant-text
+              v-theme--light
+            "
+            type="button"
+          >
+            <span class="v-btn__overlay"></span>
+            <span class="v-btn__underlay"></span>
+            <span class="v-btn__prepend">
+              <i
+                aria-hidden="true"
+                class="
+                  12H4V17H20V12H22V17C22
+                  17V12M12
+                  18.11
+                  18.11
+                  19
+                  19
+                  19H4C2.9
+                  2
+                  2
+                  20
+                  21.11
+                  2L6.46
+                  2Z
+                  5.75V15H13V5.75L16.13
+                  7.45L12
+                  7.46L7.88
+                  8.88L11
+                  8.88L17.55
+                  M2
+                  mdi
+                  notranslate
+                  text-primary
+                  v-icon
+                  v-icon--size-default
+                  v-theme--light
+                "
+              ></i>
+            </span>
+            <span
+              class="v-btn__content"
+              data-no-activator=""
+            >
+              <span>
+                Importer
+              </span>
+            </span>
             <!---->
             <!---->
           </button>
-          <!--v-if-->
-          <!--v-if-->
+          <!-- v-if -->
+          <!-- v-if -->
         </div>
       </div>
-      <!--v-if-->
+      <!-- v-if -->
     </li>
   </ul>
-  <transition-stub data-v-2a35ee7d="" appear="false" persisted="false" css="true"><label data-v-3451b201="" data-v-2a35ee7d="" for="file-upload-v-0" class="sy-file-upload d-block pa-4 mt-6" style="width: 100%;"><input data-v-3451b201="" id="file-upload-v-0" type="file" accept=".pdf, .jpg, .jpeg, .png" class="sy-file-upload-input"><span data-v-5bd3b751="" data-v-3451b201="" class="sy-file-upload-placeholder"><i data-v-5bd3b751="" class="M11 20H6.5Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13V12.85L14.6 14.4L16 13L12 9L8 13L9.4 14.4L11 12.85Z mdi v-icon notranslate v-theme--light text-primary" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i><span data-v-5bd3b751="" class="mt-1 font-weight-medium text-black"><span data-v-5bd3b751="">Déposer votre fichier ici</span></span><span data-v-5bd3b751="" class="mb-2 sy-file-upload-caption">Ou</span><span data-v-5bd3b751="" class="sy-file-upload-btn bg-primary text-white elevation-2">Choisir un fichier</span><span data-v-5bd3b751="" class="mt-4 sy-file-upload-caption">Taille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png</span></span></label></transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    persisted="false"
+  >
+    <label
+      class="
+        d-block
+        mt-6
+        pa-4
+        sy-file-upload
+      "
+      for="file-upload-v-0"
+      style="width: 100%;"
+    >
+      <input
+        accept=".pdf, .jpg, .jpeg, .png"
+        class="sy-file-upload-input"
+        id="file-upload-v-0"
+        type="file"
+      />
+      <span class="sy-file-upload-placeholder">
+        <i
+          aria-hidden="true"
+          class="
+            1
+            1
+            1
+            11
+            11.1
+            11.2
+            12
+            12.5
+            12.63
+            12.85Z
+            13.78
+            13L12
+            13L9.4
+            14.4L11
+            14.4L16
+            14.58
+            14.93
+            15.5
+            16.85
+            16.96
+            17.38
+            18.43
+            18.5
+            18.69
+            19
+            19
+            2.17
+            2.61
+            20
+            20
+            20.38
+            20.73
+            20H13V12.85L14.6
+            20H6.5Q4.22
+            21.69
+            21.86
+            23
+            23
+            23
+            3.35
+            4
+            4
+            4
+            5.25
+            5.43
+            5.88
+            6.04
+            6.85
+            7.75
+            8.07
+            9.15
+            9.57
+            9.63
+            9L8
+            M11
+            mdi
+            notranslate
+            text-primary
+            v-icon
+            v-theme--light
+          "
+          style="font-size: 40px; height: 40px; width: 40px;"
+        ></i>
+        <span class="
+          font-weight-medium
+          mt-1
+          text-black
+        ">
+          <span>
+            Déposer votre fichier ici
+          </span>
+        </span>
+        <span class="
+          mb-2
+          sy-file-upload-caption
+        ">
+          Ou
+        </span>
+        <span class="
+          bg-primary
+          elevation-2
+          sy-file-upload-btn
+          text-white
+        ">
+          Choisir un fichier
+        </span>
+        <span class="
+          mt-4
+          sy-file-upload-caption
+        ">
+          Taille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png
+        </span>
+      </span>
+    </label>
+  </transition-stub>
   <!---->
   <!---->
   <!---->
   <!---->
-</div>"
+</div>
 `;

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -135,7 +135,7 @@ export const Default: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
 />
 </template>`,
 			},
@@ -188,7 +188,7 @@ export const HideLogoutButton: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :hide-logout-btn="hideLogOut"
 />
 </template>`,
@@ -237,7 +237,7 @@ export const HideUserIcon: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :hide-user-icon="hideUserIcon"
 />
 </template>`,
@@ -286,7 +286,7 @@ export const MobileVersion: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :is-mobile-view="isMobileVersion"
 />
 </template>`,
@@ -335,7 +335,7 @@ export const CustomFullName: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :fullName="fullName"
 />
 </template>`,
@@ -384,7 +384,7 @@ export const CustomAdditionalInformation: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :additionalInformation="additionalInformation"
 />
 </template>`,
@@ -433,7 +433,7 @@ export const WithVuetifyOptions: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :vuetify-options="vuetifyOptions"
 />
 </template>`,
@@ -494,7 +494,7 @@ export const LogoutEvent: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   @logout="handleLogout"
 />
 </template>`,

package/src/components/index.ts

@@ -2,6 +2,7 @@ export { default as DatePicker } from '@/components/DatePicker/DatePicker.vue'
 export { useFieldValidation } from '../composables/rules/useFieldValidation'
 export type { RuleOptions } from '../composables/rules/useFieldValidation'
 export { useNotificationService } from '../services/NotificationService'
+export { useValidation } from '../composables/validation/useValidation'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as ChipList } from './ChipList/ChipList.vue'

package/src/composables/date/tests/useDatePickerAccessibility.spec.ts

@@ -1,13 +1,14 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { useDatePickerAccessibility } from '../useDatePickerAccessibility'
 
 describe('useDatePickerAccessibility', () => {
-	let { updateAccessibility } = useDatePickerAccessibility()
+	let { updateAccessibility, handleKeyDown } = useDatePickerAccessibility()
 
 	beforeEach(() => {
-		// Réinitialiser la fonction pour chaque tes
-		const { updateAccessibility: newUpdateAccessibility } = useDatePickerAccessibility()
+		// Réinitialiser la fonction pour chaque test
+		const { updateAccessibility: newUpdateAccessibility, handleKeyDown: newHandleKeyDown } = useDatePickerAccessibility()
 		updateAccessibility = newUpdateAccessibility
+		handleKeyDown = newHandleKeyDown
 
 		// Créer une structure DOM simulée pour les tests
 		document.body.innerHTML = `
@@ -97,6 +98,83 @@ describe('useDatePickerAccessibility', () => {
 		// Vérifier que les instructions pour les lecteurs d'écran ont été ajoutées
 		const srOnlyEl = document.querySelector('.sr-only-instructions')
 		expect(srOnlyEl).not.toBeNull()
-		expect(srOnlyEl?.textContent).toBe('Utilisez les flèches pour naviguer entre les dates et Entrée pour sélectionner une date')
+		expect(srOnlyEl?.textContent).toBe('Utilisez tab pour naviguer entre les dates et Entrée ou Espace pour sélectionner une date')
+	})
+
+	describe('handleKeyDown', () => {
+		it('simulates a click event when Enter key is pressed', () => {
+			// Créer une fonction d'espionnage autonome plutôt que d'espionner une méthode existante
+			const clickHandlerSpy = vi.fn()
+
+			// Créer un élément bouton avec un gestionnaire de clic espion
+			const button = document.createElement('button')
+			button.addEventListener('click', clickHandlerSpy)
+			document.body.appendChild(button)
+			button.focus()
+
+			// Créer un événement clavier pour la touche Entrée
+			const enterEvent = new KeyboardEvent('keydown', {
+				key: 'Enter',
+				bubbles: true,
+				cancelable: true,
+			})
+
+			// Espionner la méthode preventDefault de l'événement
+			const preventDefaultSpy = vi.spyOn(enterEvent, 'preventDefault')
+
+			// Appeler la fonction handleKeyDown avec l'événement
+			handleKeyDown(enterEvent)
+
+			// Vérifier que preventDefault a été appelé
+			expect(preventDefaultSpy).toHaveBeenCalled()
+
+			// Vérifier que le gestionnaire de clic a été déclenché suite à l'événement simulé
+			expect(clickHandlerSpy).toHaveBeenCalled()
+		})
+
+		it('does nothing when a key other than Enter is pressed', () => {
+			// Créer une fonction d'espionnage autonome
+			const clickHandlerSpy = vi.fn()
+
+			// Créer un élément bouton avec un gestionnaire de clic espion
+			const button = document.createElement('button')
+			button.addEventListener('click', clickHandlerSpy)
+			document.body.appendChild(button)
+			button.focus()
+
+			// Créer un événement clavier pour une touche autre qu'Entrée (par ex: Espace)
+			const spaceEvent = new KeyboardEvent('keydown', {
+				key: 'Space',
+				bubbles: true,
+				cancelable: true,
+			})
+
+			// Espionner la méthode preventDefault de l'événement
+			const preventDefaultSpy = vi.spyOn(spaceEvent, 'preventDefault')
+
+			// Appeler la fonction handleKeyDown avec l'événement
+			handleKeyDown(spaceEvent)
+
+			// Vérifier que preventDefault n'a pas été appelé
+			expect(preventDefaultSpy).not.toHaveBeenCalled()
+
+			// Vérifier qu'aucun événement de clic n'a été déclenché
+			expect(clickHandlerSpy).not.toHaveBeenCalled()
+		})
+
+		it('handles the case when no element is focused', () => {
+			// S'assurer qu'aucun élément n'est focalisé
+			document.body.focus()
+
+			// Créer un événement clavier pour la touche Entrée
+			const enterEvent = new KeyboardEvent('keydown', {
+				key: 'Enter',
+				bubbles: true,
+				cancelable: true,
+			})
+
+			// Vérifier que la fonction ne génère pas d'erreur
+			expect(() => handleKeyDown(enterEvent)).not.toThrow()
+		})
 	})
 })