@cnamts/synapse 1.0.2 → 1.0.4

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

@@ -78,7 +78,11 @@ exports[`Alert > render correctly 1`] = `
           v-theme--light
         "
         role="presentation"
-        style="font-size: 1.5rem; height: 1.5rem; width: 1.5rem;"
+        style="
+          font-size: 1.5rem;
+          height: 1.5rem;
+          width: 1.5rem;
+        "
       ></i>
     </div>
     <div class="v-alert__content">

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import TableToolbar from './TableToolbar.vue'
-import SySelect from '../Customs/SySelect/SySelect.vue'
+import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import { VDataTable } from 'vuetify/components'
 import { ref } from 'vue'
 import { fn } from '@storybook/test'

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

@@ -17,7 +17,11 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -67,22 +71,23 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -92,12 +97,10 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -117,16 +120,15 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -155,7 +157,7 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>
@@ -237,7 +239,11 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -290,22 +296,23 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -315,12 +322,10 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -340,17 +345,16 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
                 disabled=""
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -435,7 +439,11 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -485,22 +493,23 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -510,12 +519,10 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -535,16 +542,15 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -573,7 +579,7 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>
@@ -655,7 +661,11 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -705,22 +715,23 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -730,12 +741,10 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -755,16 +764,15 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -793,7 +801,7 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>
@@ -875,7 +883,11 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -917,22 +929,23 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -942,12 +955,10 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -967,16 +978,15 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -1005,7 +1015,7 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>
@@ -1088,7 +1098,11 @@ exports[`TableToolbar > should render 1`] = `
   "
   minheight="56px"
   showaddbtn="true"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -1138,22 +1152,23 @@ exports[`TableToolbar > should render 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -1163,12 +1178,10 @@ exports[`TableToolbar > should render 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -1188,16 +1201,15 @@ exports[`TableToolbar > should render 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -1226,7 +1238,7 @@ exports[`TableToolbar > should render 1`] = `
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>

package/src/components/Tables/SyServerTable/SyServerTable.mdx

@@ -31,9 +31,11 @@ Pour gérer individuellement le stockage des options pour différents tableaux,
 ### Tri côté serveur
 
 Le composant permet de trier les données par colonne en déléguant le tri au serveur.
-
 <Canvas story={{height: '550px'}} of={SyServerTable.ServerSortBy} />
 
+Le multi-tri est également supporté. Vous pouvez activer cette fonctionnalité en utilisant la prop `multi-sort`.
+<Canvas story={{height: '550px'}} of={SyServerTable.ServerMultiSort} />
+
 ### Filtres des colonnes
 
 Le composant permet d'appliquer des filtres sur les colonnes. Vous pouvez définir des filtres personnalisés pour chaque colonne en utilisant la prop `show-filters`. Voir d'autres exemples de filtres dans les stories.
@@ -54,6 +56,14 @@ Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant
 Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.
 <Canvas story={{height: '550px'}} of={SyServerTable.RowSelection} />
 
+### Slot item
+Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.
+<Canvas story={{height: '550px'}} of={SyServerTable.SlotItem} />
+
+### Slot headers
+Le composant permet de personnaliser l'affichage des en-têtes de colonnes en utilisant le slot `headers`. Vous pouvez définir la structure de chaque en-tête en fonction de vos besoins.
+<Canvas story={{height: '550px'}} of={SyServerTable.SlotHeaders} />
+
 ### Accessibilité
 
 Le composant améliore l'accessibilité en ajoutant automatiquement: