@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

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/Usages/tests/Usages.spec.ts

@@ -0,0 +1,183 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import Usages from '../Usages.vue'
+
+describe('Usages.vue', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifier que le composant est rendu
+		expect(wrapper.exists()).toBe(true)
+
+		// Vérifier que les colonnes sont rendues
+		expect(wrapper.findAll('.v-col-auto').length).toBe(2)
+
+		// Vérifier que les icônes sont rendues
+		expect(wrapper.findAll('.v-icon').length).toBe(2)
+
+		// Vérifier les titres des colonnes
+		expect(wrapper.text()).toContain('À faire')
+		expect(wrapper.text()).toContain('À ne pas faire')
+
+		// Vérifier qu'il n'y a pas d'éléments de liste par défaut
+		expect(wrapper.findAll('li').length).toBe(0)
+	})
+
+	it('renders items in both columns when provided', () => {
+		const items1 = ['Item 1', 'Item 2', 'Item 3']
+		const items2 = ['Item A', 'Item B']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1,
+				items2,
+			},
+		})
+
+		// Vérifier que tous les éléments de la première liste sont rendus
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(items1.length)
+		items1.forEach((item, index) => {
+			expect(firstColumnItems[index].text()).toContain(item)
+		})
+
+		// Vérifier que tous les éléments de la deuxième liste sont rendus
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(items2.length)
+		items2.forEach((item, index) => {
+			expect(secondColumnItems[index].text()).toContain(item)
+		})
+	})
+
+	it('renders only the first column items when only items1 is provided', () => {
+		const items1 = ['Item 1', 'Item 2']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1,
+			},
+		})
+
+		// Vérifier que les éléments de la première liste sont rendus
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(items1.length)
+
+		// Vérifier qu'il n'y a pas d'éléments dans la deuxième liste
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(0)
+	})
+
+	it('renders only the second column items when only items2 is provided', () => {
+		const items2 = ['Item A', 'Item B', 'Item C']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items2,
+			},
+		})
+
+		// Vérifier qu'il n'y a pas d'éléments dans la première liste
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(0)
+
+		// Vérifier que les éléments de la deuxième liste sont rendus
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(items2.length)
+	})
+
+	it('uses the correct icons', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const icons = wrapper.findAll('.v-icon')
+
+		// Vérifier que les icônes sont correctement définies
+		// Note: Nous ne pouvons pas vérifier directement les propriétés des icônes,
+		// mais nous pouvons vérifier que les icônes sont présentes dans le bon ordre
+		expect(icons.length).toBe(2)
+
+		// Vérifier que les classes CSS sont correctement appliquées
+		expect(wrapper.find('.check')).toBeTruthy()
+		expect(wrapper.find('.not-check')).toBeTruthy()
+	})
+
+	it('applies the correct styling to columns', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifier les classes CSS pour la première colonne
+		const checkColumn = wrapper.find('.check')
+		expect(checkColumn.exists()).toBe(true)
+
+		// Vérifier les classes CSS pour la deuxième colonne
+		const notCheckColumn = wrapper.find('.not-check')
+		expect(notCheckColumn.exists()).toBe(true)
+
+		// Vérifier que les styles sont appliqués (indirectement via les classes)
+		expect(checkColumn.classes()).toContain('check')
+		expect(notCheckColumn.classes()).toContain('not-check')
+	})
+
+	it('handles empty arrays for both item lists', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1: [],
+				items2: [],
+			},
+		})
+
+		// Vérifier qu'il n'y a pas d'éléments de liste
+		expect(wrapper.findAll('li').length).toBe(0)
+
+		// Mais les colonnes et titres doivent toujours être présents
+		expect(wrapper.findAll('.v-col-auto').length).toBe(2)
+		expect(wrapper.text()).toContain('À faire')
+		expect(wrapper.text()).toContain('À ne pas faire')
+	})
+
+	it('renders with custom props from CustomizableOptions', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				color: 'primary',
+				disabled: true,
+				readonly: true,
+				dense: true,
+				items1: ['Item 1'],
+				items2: ['Item A'],
+			},
+		})
+
+		// Vérifier que le composant est rendu malgré les props supplémentaires
+		expect(wrapper.exists()).toBe(true)
+
+		// Vérifier que les éléments de liste sont toujours rendus correctement
+		expect(wrapper.findAll('.check li').length).toBe(1)
+		expect(wrapper.findAll('.not-check li').length).toBe(1)
+	})
+})

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,9 +2,11 @@ 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'
+export * from './ChipList/types'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
 export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
 export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
@@ -56,10 +58,12 @@ export { default as PeriodField } from './PeriodField/PeriodField.vue'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as RangeField } from './RangeField/RangeField.vue'
 export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
+export { default as SearchListField } from './SearchListField/SearchListField.vue'
 export { default as SelectBtnField } from './SelectBtnField/SelectBtnField.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as TableToolbar } from './TableToolbar/TableToolbar.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'