@cnamts/synapse 0.0.13-alpha → 0.0.15-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

@@ -44,6 +44,13 @@ const meta = {
 				type: { summary: 'string' },
 			},
 		},
+		'logoutText': {
+			control: 'text',
+			description: 'Texte dans le bouton de déconnexion',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 		'additionalInformation': {
 			control: 'text',
 			description: 'Informations supplémentaires sur l\'utilisateur (ex: rôle, service, etc.)',
@@ -135,7 +142,7 @@ export const Default: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
 />
 </template>`,
 			},
@@ -188,7 +195,7 @@ export const HideLogoutButton: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :hide-logout-btn="hideLogOut"
 />
 </template>`,
@@ -237,7 +244,7 @@ export const HideUserIcon: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :hide-user-icon="hideUserIcon"
 />
 </template>`,
@@ -286,7 +293,7 @@ export const MobileVersion: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :is-mobile-view="isMobileVersion"
 />
 </template>`,
@@ -335,7 +342,7 @@ export const CustomFullName: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :fullName="fullName"
 />
 </template>`,
@@ -376,6 +383,55 @@ export const CustomFullName: Story = {
 	},
 }
 
+export const CustomLogoutText: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menu-items="menuItems"
+  :logout-text="Déconnexion"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import { UserMenuBtn } from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const logoutText = ref('Déconnexion')
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		logoutText: 'Déconnexion',
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
 export const CustomAdditionalInformation: Story = {
 	parameters: {
 		sourceCode: [
@@ -384,7 +440,7 @@ export const CustomAdditionalInformation: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :additionalInformation="additionalInformation"
 />
 </template>`,
@@ -433,7 +489,7 @@ export const WithVuetifyOptions: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   :vuetify-options="vuetifyOptions"
 />
 </template>`,
@@ -494,7 +550,7 @@ export const LogoutEvent: Story = {
 				code: `<template>
  <UserMenuBtn
   v-model="selected"
-  :menuItems="menuItems"
+  :menu-items="menuItems"
   @logout="handleLogout"
 />
 </template>`,

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -15,6 +15,7 @@
 		hideLogoutBtn?: boolean
 		isMobileView?: boolean
 		hideUserIcon?: boolean
+		logoutText?: string
 	}>(), {
 		menuItems: () => [],
 		additionalInformation: 'Information supplémentaire',
@@ -22,6 +23,7 @@
 		hideLogoutBtn: false,
 		isMobileView: false,
 		hideUserIcon: false,
+		logoutText: 'Logout',
 	})
 
 	const modelValue = defineModel<MenuItem | null>({
@@ -74,8 +76,8 @@
 						class="mr-4"
 						v-bind="options['logoutIcon']"
 					/>
-					<VListItemTitle>
-						Logout
+					<VListItemTitle class="logout">
+						{{ props.logoutText }}
 					</VListItemTitle>
 				</div>
 			</VListItem>

package/src/components/UserMenuBtn/tests/UserMenuBtn.spec.ts

@@ -122,4 +122,45 @@ describe('UserMenuBtn', () => {
 		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
 		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['test-value'])
 	})
+
+	it('possède la prop logoutText  custom', async () => {
+		const customLogoutText = 'Déconnexion'
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				logoutText: customLogoutText,
+				hideLogoutBtn: false,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+				fullName: 'John Doe',
+				isMobileView: false,
+				hideUserIcon: false,
+			},
+		})
+
+		// Vérifier directement que la prop est correctement passée au composant
+		expect(wrapper.props('logoutText')).toBe(customLogoutText)
+	})
+
+	it('possède la prop logoutText  par défaut', async () => {
+		const defaultLogoutText = 'Logout'
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideLogoutBtn: false,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+				fullName: 'John Doe',
+				isMobileView: false,
+				hideUserIcon: false,
+			},
+		})
+
+		// Vérifier directement que la prop est correctement passée au composant
+		expect(wrapper.props('logoutText')).toBe(defaultLogoutText)
+	})
 })