@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/RatingPicker/RatingPicker.mdx

@@ -25,7 +25,6 @@ import RatingPicker from './RatingPicker.vue';
     import { RatingPicker } from '@cnamts/synapse'
 
     const ratingEmotion = ref(-1)
-import '../../stories/styles/shared.css';
     const ratingNumber = ref(-1)
     const ratingStars = ref(-1)
 </script>

package/src/components/SocialMediaLinks/SocialMediaLinks.mdx

@@ -42,7 +42,6 @@ const links = [
 	},
 ]
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
     <SocialMediaLinks :links="links" />

package/src/components/StatusPage/StatusPage.vue

@@ -86,6 +86,7 @@
 		:unique-id="uniqueId"
 		:role="role"
 		:aria-labelledby="role ? `${uniqueId}-title` : undefined"
+		align-center
 	>
 		<VCard
 			:elevation="0"

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

@@ -3,278 +3,296 @@
 exports[`StatusPage > renders correctly 1`] = `
 <div
   class="
+    align-center
     d-flex
-    justify-center
-    px-14
-    py-10
+    flex-column
     vd-page-container
   "
   id="v-0-container"
 >
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    id="v-0-content"
-    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>
+  <!-- Slot prepend avec wrapper de largeur fixe -->
+  <!-- v-if -->
+  <div class="
+    px-14
+    py-10
+    vd-page-container__content
+  ">
+    <div
+      class="
+        bg-transparent
+        v-sheet
+        v-theme--light
+      "
+      id="v-0-content"
+      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
-            class="v-progress-linear__buffer"
+            aria-hidden="true"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            class="
+              v-locale--is-ltr
+              v-progress-linear
+              v-theme--light
+            "
+            role="progressbar"
             style="
-              opacity: NaN;
-              width: 0%;
+              top: 0px;
+              height: 0px;
+              --v-progress-linear-height: 2px;
             "
-          ></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
+              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>
-      <!---->
-      <!---->
-      <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
+          max-width-none
+          v-row
         ">
-          <!-- v-if -->
-          <h1 class="
-            font-weight-bold
-            mb-2
-            mb-4
-            sy-heading
-            text-h5
+          <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
           ">
-            Something went wrong
-          </h1>
-          <p>
-            <span>
-              Error message
-            </span>
-          </p>
+            <!-- v-if -->
+            <h1 class="
+              font-weight-bold
+              mb-2
+              mb-4
+              sy-heading
+              text-h5
+            ">
+              Something went wrong
+            </h1>
+            <p>
+              <span>
+                Error message
+              </span>
+            </p>
+            <!-- v-if -->
+          </div>
           <!-- v-if -->
         </div>
-        <!-- v-if -->
+        <!---->
+        <!---->
+        <span class="v-card__underlay"></span>
       </div>
-      <!---->
-      <!---->
-      <span class="v-card__underlay"></span>
     </div>
   </div>
+  <!-- Slot append avec wrapper de largeur fixe -->
+  <!-- v-if -->
 </div>
 `;
 
 exports[`StatusPage > renders correctly with undefined route 1`] = `
 <div
   class="
+    align-center
     d-flex
-    justify-center
-    px-14
-    py-10
+    flex-column
     vd-page-container
   "
   id="v-0-container"
 >
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    id="v-0-content"
-    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>
+  <!-- Slot prepend avec wrapper de largeur fixe -->
+  <!-- v-if -->
+  <div class="
+    px-14
+    py-10
+    vd-page-container__content
+  ">
+    <div
+      class="
+        bg-transparent
+        v-sheet
+        v-theme--light
+      "
+      id="v-0-content"
+      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
-            class="v-progress-linear__buffer"
+            aria-hidden="true"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            class="
+              v-locale--is-ltr
+              v-progress-linear
+              v-theme--light
+            "
+            role="progressbar"
             style="
-              opacity: NaN;
-              width: 0%;
+              top: 0px;
+              height: 0px;
+              --v-progress-linear-height: 2px;
             "
-          ></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
+              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>
-      <!---->
-      <!---->
-      <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
+          max-width-none
+          v-row
         ">
           <div class="
-            mb-4
-            sy-code
-            text-primary
+            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
           ">
-            <span class="d-sr-only">
-              Code d'erreur&nbsp;:
-            </span>
-            501
+            <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
+              sy-heading
+              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>
-          <h1 class="
-            font-weight-bold
-            mb-2
-            mb-4
-            sy-heading
-            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>
+          <!-- v-if -->
         </div>
-        <!-- v-if -->
+        <!---->
+        <!---->
+        <span class="v-card__underlay"></span>
       </div>
-      <!---->
-      <!---->
-      <span class="v-card__underlay"></span>
     </div>
   </div>
+  <!-- Slot append avec wrapper de largeur fixe -->
+  <!-- v-if -->
 </div>
 `;

package/src/components/SubHeader/SubHeader.mdx

@@ -5,8 +5,8 @@ import * as SubHeaderStories from './SubHeader.stories';
 <Meta of={SubHeaderStories} />
 
 <div className="header">
-  <h1>SubHeader</h1>
-  <p>Le composant `SubHeader` est utilisé pour afficher un bloc d’informations sous l’en-tête principale.</p>
+	<h1>SubHeader</h1>
+	<p>Le composant `SubHeader` est utilisé pour afficher un bloc d’informations sous l’en-tête principale.</p>
 </div>
 
 <Canvas of={SubHeaderStories.Default}  />
@@ -19,15 +19,14 @@ import * as SubHeaderStories from './SubHeader.stories';
 
 <Source dark code={`
 <script setup lang="ts">
-import { SubHeader } from '@cnamts/synapse'
+	import { SubHeader } from '@cnamts/synapse'
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
-    <SubHeader
+	<SubHeader
 		back-btn-text="Back"
 		title-text="Paul Dupont"
-        sub-title-text="1 69 08 75 125 456 75"
+		sub-title-text="1 69 08 75 125 456 75"
 		sub-title-text-accessible-name="Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75"
 	/>
 </template>

package/src/components/Tables/common/tests/SyTableFilter.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, afterEach, vi } from 'vitest'
-import { shallowMount, flushPromises } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import SyTableFilter from '../SyTableFilter.vue'
 import type { FilterOption, TableColumnHeader, FilterType } from '../types'
 
@@ -29,8 +29,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		// Need to wait for async components to load
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
@@ -52,7 +51,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
 		expect(textFilter.exists()).toBe(true)
@@ -74,7 +73,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const numberFilter = wrapper.findComponent({ name: 'NumberFilter' })
 		expect(numberFilter.exists()).toBe(true)
@@ -101,7 +100,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const selectFilter = wrapper.findComponent({ name: 'SelectFilter' })
 		expect(selectFilter.exists()).toBe(true)
@@ -124,7 +123,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const dateFilter = wrapper.findComponent({ name: 'DateFilter' })
 		expect(dateFilter.exists()).toBe(true)
@@ -147,7 +146,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const periodFilter = wrapper.findComponent({ name: 'PeriodFilter' })
 		expect(periodFilter.exists()).toBe(true)
@@ -169,7 +168,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
@@ -204,7 +203,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
@@ -241,7 +240,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
@@ -277,7 +276,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		// Vérifier que le slot personnalisé est rendu

package/src/components/UploadWorkflow/UploadWorkflow.mdx

@@ -59,7 +59,6 @@ Vous pouvez configurer le niveau du titre affiché par défaut en utilisant la p
 	import { UploadWorkflow } from '@cnamts/synapse'
 
 	const files = ref([])
-import '../../stories/styles/shared.css';
 
 	const uploadList = [
 		{