@cnamts/synapse 1.0.20 → 1.0.21

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

@@ -0,0 +1,270 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StatusPage > renders correctly 1`] = `
+<div class="
+  d-flex
+  justify-center
+  px-14
+  py-10
+  vd-page-container
+">
+  <div
+    class="
+      bg-transparent
+      v-sheet
+      v-theme--light
+    "
+    style="width: 800px;"
+  >
+    <div class="
+      elevation-0
+      pa-6
+      pa-sm-16
+      v-card
+      v-card--density-default
+      v-card--variant-elevated
+      v-theme--light
+    ">
+      <!---->
+      <div class="v-card__loader">
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="
+            v-locale--is-ltr
+            v-progress-linear
+            v-theme--light
+          "
+          role="progressbar"
+          style="
+            top: 0px;
+            height: 0px;
+            --v-progress-linear-height: 2px;
+          "
+        >
+          <!---->
+          <div
+            class="v-progress-linear__background"
+            style="opacity: NaN;"
+          ></div>
+          <div
+            class="v-progress-linear__buffer"
+            style="
+              opacity: NaN;
+              width: 0%;
+            "
+          ></div>
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
+            <div class="v-progress-linear__indeterminate">
+              <div class="
+                long
+                v-progress-linear__indeterminate
+              "></div>
+              <div class="
+                short
+                v-progress-linear__indeterminate
+              "></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      <div class="
+        max-width-none
+        v-row
+      ">
+        <div class="
+          align-sm-start
+          d-flex
+          flex-column
+          justify-center
+          order-last
+          order-sm-first
+          text-center
+          text-sm-left
+          v-col-12
+          v-col-sm-12
+        ">
+          <!-- v-if -->
+          <h1 class="
+            font-weight-bold
+            mb-2
+            mb-4
+            text-h5
+          ">
+            Something went wrong
+          </h1>
+          <p>
+            <span>
+              Error message
+            </span>
+          </p>
+          <!-- v-if -->
+        </div>
+        <!-- v-if -->
+      </div>
+      <!---->
+      <!---->
+      <span class="v-card__underlay"></span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`StatusPage > renders correctly with undefined route 1`] = `
+<div class="
+  d-flex
+  justify-center
+  px-14
+  py-10
+  vd-page-container
+">
+  <div
+    class="
+      bg-transparent
+      v-sheet
+      v-theme--light
+    "
+    style="width: 800px;"
+  >
+    <div class="
+      elevation-0
+      pa-6
+      pa-sm-16
+      v-card
+      v-card--density-default
+      v-card--variant-elevated
+      v-theme--light
+    ">
+      <!---->
+      <div class="v-card__loader">
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="
+            v-locale--is-ltr
+            v-progress-linear
+            v-theme--light
+          "
+          role="progressbar"
+          style="
+            top: 0px;
+            height: 0px;
+            --v-progress-linear-height: 2px;
+          "
+        >
+          <!---->
+          <div
+            class="v-progress-linear__background"
+            style="opacity: NaN;"
+          ></div>
+          <div
+            class="v-progress-linear__buffer"
+            style="
+              opacity: NaN;
+              width: 0%;
+            "
+          ></div>
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
+            <div class="v-progress-linear__indeterminate">
+              <div class="
+                long
+                v-progress-linear__indeterminate
+              "></div>
+              <div class="
+                short
+                v-progress-linear__indeterminate
+              "></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      <div class="
+        max-width-none
+        v-row
+      ">
+        <div class="
+          align-sm-start
+          d-flex
+          flex-column
+          justify-center
+          order-last
+          order-sm-first
+          text-center
+          text-sm-left
+          v-col-12
+          v-col-sm-12
+        ">
+          <div class="
+            mb-4
+            sy-code
+            text-primary
+          ">
+            <span class="d-sr-only">
+              Code d'erreur&nbsp;:
+            </span>
+            501
+          </div>
+          <h1 class="
+            font-weight-bold
+            mb-2
+            mb-4
+            text-h5
+          ">
+            Error
+          </h1>
+          <p>
+            <span>
+              Error message
+            </span>
+          </p>
+          <a
+            class="
+              bg-primary
+              mt-6
+              v-btn
+              v-btn--density-default
+              v-btn--elevated
+              v-btn--size-default
+              v-btn--variant-elevated
+              v-theme--light
+            "
+            href="https://google.com"
+          ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            
+          <!----><span
+            class="v-btn__content"
+            data-no-activator=""
+          >Go to...</span>
+            
+          <!---->
+            
+          <!---->
+          </a>
+        </div>
+        <!-- v-if -->
+      </div>
+      <!---->
+      <!---->
+      <span class="v-card__underlay"></span>
+    </div>
+  </div>
+</div>
+`;

package/src/components/TableToolbar/TableToolbar.stories.ts

@@ -878,7 +878,7 @@ export const SlotFilters: Story = {
 					},
 				]
 
-				const search = ref('')
+				const search = ref(undefined)
 
 				const filterItems = ref<{ text: string, value: string }[]>([])
 
@@ -902,16 +902,16 @@ export const SlotFilters: Story = {
 					<template #top>
 						<TableToolbar
 							v-bind="args"
-							v-model:search="args.search"
+							v-model:search="search"
 						>
 							<template #filters>
-								<div class="py-1">
+								<div class="px-4 py-4 py-sm-1">
 									<SySelect
 										v-model="search"
 										:items="filterItems"
 										label="Nom"
 										density="compact"
-										width="100"
+										width="150"
 										hide-messages
 										clearable
 									/>
@@ -942,13 +942,13 @@ export const SlotFilters: Story = {
 								:nb-total="items.length"
 							>
 								<template #filters>
-									<div class="py-4">
+									<div class="px-4 py-4 py-sm-1">
 										<SySelect 
 											v-model="search" 
 											:items="filterItems" 
 											label="Nom" 
 											density="compact" 
-											width="100"
+											width="150"
 											hide-messages
 											clearable 
 										/>

package/src/components/TableToolbar/TableToolbar.vue

@@ -66,7 +66,7 @@
 	>
 		<p
 			v-if="nbTotal > 0"
-			class="mb-0 font-weight-bold mr-4 mr-sm-0 my-3"
+			class="mb-0 font-weight-bold mr-4 mr-sm-0"
 			data-test-id="nb-rows"
 		>
 			{{ displayNbRows }}

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

@@ -32,7 +32,6 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       5/5 lignes
     </p>
@@ -254,7 +253,6 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -454,7 +452,6 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -676,7 +673,6 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -1113,7 +1109,6 @@ exports[`TableToolbar > should render 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1/2 lignes
     </p>

package/src/components/UploadWorkflow/UploadWorkflow.mdx

@@ -17,7 +17,7 @@ import * as UploadWorkflowStories from './UploadWorkflow.stories';
 
 ## Événements
 
-Vous pouvez réagir lorsque la liste des fichiers est mise à jour en utilisant l’événement `update:modelValue`, et réagir aux erreurs de validation en utilisant l’événement `error`.
+Vous pouvez réagir lorsque la liste des fichiers est mise à jour en utilisant l’événement `update:modelValue`, réagir aux erreurs de validation en utilisant l’événement `error`, et intercepter l’ouverture d’une prévisualisation en utilisant l’événement `preview` (avec le `FileItem` associé).
 
 <Canvas of={UploadWorkflowStories.Events} />
 
@@ -39,6 +39,16 @@ Vous pouvez permettre à l’utilisateur de prévisualiser le fichier qu’il vi
 
 <Canvas of={UploadWorkflowStories.WithPreviewStep} />
 
+## Texte d'information
+
+Vous pouvez personnaliser le texte affiché dans la zone d’information du composant enfant `FileUpload` en utilisant la prop `info-text`.
+
+<Canvas of={UploadWorkflowStories.WithInfoText} />
+
+## Niveau de titre
+
+Vous pouvez configurer le niveau du titre affiché par défaut en utilisant la prop `heading-level` (rendu via `role="heading"` et `aria-level`).
+
 ## Exemple d'utilisation
 
 <Source

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

@@ -8,7 +8,7 @@ const meta: Meta<typeof UploadWorkflow> = {
 	title: 'Composants/Formulaires/UploadWorkflow',
 	component: UploadWorkflow,
 	parameters: {
-		controls: { exclude: ['update:modelValue', 'error'] },
+		controls: { exclude: ['update:modelValue', 'error', 'preview'] },
 	},
 	argTypes: {
 		'modelValue': {
@@ -75,6 +75,36 @@ const meta: Meta<typeof UploadWorkflow> = {
 				},
 			},
 		},
+		'headingLevel': {
+			description: 'Niveau du titre affiché (utilise role="heading" et aria-level).',
+			control: {
+				type: 'number',
+				min: 1,
+				max: 6,
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'number',
+				},
+				defaultValue: {
+					summary: '4',
+				},
+			},
+		},
+		'infoText': {
+			description: 'Personnalise le texte affiché dans la zone d’information du composant enfant FileUpload (slot info-text).',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: '\'\'',
+				},
+			},
+		},
 		'vuetifyOptions': {
 			description: 'Les options pour les composants enfants.',
 			control: 'object',
@@ -186,6 +216,15 @@ const meta: Meta<typeof UploadWorkflow> = {
 				},
 			},
 		},
+		'onPreview': {
+			description: 'Événement émis lors de l\'ouverture d\'une prévisualisation.',
+			table: {
+				category: 'events',
+				type: {
+					summary: 'FileItem',
+				},
+			},
+		},
 		'onUpdate:modelValue': {
 			description: 'Événement émis lorsqu\'un fichier est ajouté ou supprimé.',
 			table: {
@@ -267,6 +306,7 @@ export const Default: Story = {
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -380,6 +420,7 @@ export const WithPreviewStep: Story = {
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 		'showFilePreview': true,
 	},
 	parameters: {
@@ -391,6 +432,7 @@ export const WithPreviewStep: Story = {
 		v-model="files"
 		:upload-list="uploadList"
 		:showFilePreview="true"
+		@preview="onPreview"
 	/>
 </template>`,
 
@@ -412,6 +454,57 @@ export const WithPreviewStep: Story = {
 			title: 'Facture de soin',
 		},
 	]
+
+	function onPreview(fileItem: unknown) {
+		console.log('preview', fileItem)
+	}
+</script>`,
+			},
+		],
+	},
+}
+
+export const WithInfoText: Story = {
+	args: {
+		'modelValue': [],
+		'uploadList': [
+			{
+				id: '1',
+				title: 'Carte d\'identité',
+			},
+			{
+				id: '2',
+				title: 'Facture de soin',
+			},
+		],
+		'infoText': 'Vous pouvez déposer vos fichiers ici. Formats acceptés : PDF, JPG, PNG.',
+		'onUpdate:modelValue': fn(),
+		'onError': fn(),
+		'onPreview': fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<UploadWorkflow
+		v-model="files"
+		:upload-list="uploadList"
+		info-text="Vous pouvez déposer vos fichiers ici. Formats acceptés : PDF, JPG, PNG."
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { ref } from 'vue'
+	import { UploadWorkflow } from '@cnamts/synapse'
+
+	const files = ref([])
+	const uploadList = [
+		{ id: '1', title: 'Carte d\\'identité' },
+		{ id: '2', title: 'Facture de soin' },
+	]
 </script>`,
 			},
 		],
@@ -468,14 +561,17 @@ export const Events: Story = {
 			{
 				id: 'ID',
 				title: 'Carte d\'identité',
+				showPreviewBtn: true,
 			},
 			{
 				id: 'Bill',
 				title: 'Facture de soin',
+				showPreviewBtn: true,
 			},
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 	},
 	render: (args) => {
 		return {
@@ -517,6 +613,7 @@ export const Events: Story = {
 					:upload-list="args.uploadList"
 					:vuetify-options="options"
 					@error="[showError, args.onError]"
+					@preview="args.onPreview"
 					@update:modelValue="[valueUpdated, args['onUpdate:modelValue']]"
 				/>
 				<VSnackbar
@@ -549,6 +646,7 @@ export const Events: Story = {
 		:upload-list="uploadList"
 		vuetify-options="options"
 		@onError="showError"
+		@onPreview="onPreview"
 		@onUpdate:modelValue="valueUpdated"
 	/>
 </template>`,
@@ -564,10 +662,12 @@ export const Events: Story = {
 		{
 			id: 'ID',
 			title: 'Carte d'identité',
+			showPreviewBtn: true,
 		},
 		{
 			id: 'Bill',
 			title: 'Facture de soin',
+			showPreviewBtn: true,
 		},
 	]
 
@@ -581,13 +681,13 @@ export const Events: Story = {
 		}
 	}
 
-	function showError (errors: string[]) {
+	function showError(errors: string[]) {
 		snackbarText.value = errors.join(', ')
 		snackbarColor.value = 'error';
 		snackbar.value = true
 	}
 
-	function valueUpdated (items: {fileName: string, file: File}[]) {
+	function valueUpdated(items: { fileName: string, file: File }[]) {
 		if(items.length === 0) {
 			return
 		}
@@ -595,6 +695,10 @@ export const Events: Story = {
 		snackbarColor.value = 'success';
 		snackbar.value = true
 	}
+
+	function onPreview(fileItem: unknown) {
+		console.log('preview', fileItem)
+	}
 </script>`,
 			},
 		],