@cnamts/synapse 1.0.20 → 1.0.22

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

@@ -13,6 +13,7 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
     v-locale--is-ltr
     v-theme--light
     v-toolbar
+    v-toolbar--collapse-start
     v-toolbar--density-default
     v-toolbar--flat
   "
@@ -32,7 +33,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>
@@ -79,11 +79,17 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -97,10 +103,12 @@ 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>
@@ -116,19 +124,22 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
             >
               <!---->
               <label
+                aria-hidden="false"
                 class="
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
+                id="input-v-1-label"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
+                aria-labelledby="input-v-1-label"
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -162,7 +173,6 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
               </div>
             </transition-stub>
             <div class="v-field__append-inner">
-              <!---->
               <i
                 aria-hidden="true"
                 class="
@@ -235,6 +245,7 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
     v-locale--is-ltr
     v-theme--light
     v-toolbar
+    v-toolbar--collapse-start
     v-toolbar--density-default
     v-toolbar--flat
   "
@@ -254,7 +265,6 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -304,11 +314,17 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -322,10 +338,12 @@ 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>
@@ -341,20 +359,23 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
             >
               <!---->
               <label
+                aria-hidden="false"
                 class="
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
+                id="input-v-1-label"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
+                aria-labelledby="input-v-1-label"
                 class="v-field__input"
                 disabled=""
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -362,7 +383,6 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
             </div>
             <!---->
             <div class="v-field__append-inner">
-              <!---->
               <i
                 aria-hidden="true"
                 class="
@@ -435,6 +455,7 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
     v-locale--is-ltr
     v-theme--light
     v-toolbar
+    v-toolbar--collapse-start
     v-toolbar--density-default
     v-toolbar--flat
   "
@@ -454,7 +475,6 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -501,11 +521,17 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -519,10 +545,12 @@ 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>
@@ -538,19 +566,22 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
             >
               <!---->
               <label
+                aria-hidden="false"
                 class="
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
+                id="input-v-1-label"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
+                aria-labelledby="input-v-1-label"
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -584,7 +615,6 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
               </div>
             </transition-stub>
             <div class="v-field__append-inner">
-              <!---->
               <i
                 aria-hidden="true"
                 class="
@@ -657,6 +687,7 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
     v-locale--is-ltr
     v-theme--light
     v-toolbar
+    v-toolbar--collapse-start
     v-toolbar--density-default
     v-toolbar--flat
   "
@@ -676,7 +707,6 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -723,11 +753,17 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -741,10 +777,12 @@ 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>
@@ -760,19 +798,22 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
             >
               <!---->
               <label
+                aria-hidden="false"
                 class="
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
+                id="input-v-1-label"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
+                aria-labelledby="input-v-1-label"
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -806,7 +847,6 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
               </div>
             </transition-stub>
             <div class="v-field__append-inner">
-              <!---->
               <i
                 aria-hidden="true"
                 class="
@@ -879,6 +919,7 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
     v-locale--is-ltr
     v-theme--light
     v-toolbar
+    v-toolbar--collapse-start
     v-toolbar--density-default
     v-toolbar--flat
   "
@@ -937,11 +978,17 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -955,10 +1002,12 @@ 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>
@@ -974,19 +1023,22 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
             >
               <!---->
               <label
+                aria-hidden="false"
                 class="
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
+                id="input-v-1-label"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
+                aria-labelledby="input-v-1-label"
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -1020,7 +1072,6 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
               </div>
             </transition-stub>
             <div class="v-field__append-inner">
-              <!---->
               <i
                 aria-hidden="true"
                 class="
@@ -1093,6 +1144,7 @@ exports[`TableToolbar > should render 1`] = `
     v-locale--is-ltr
     v-theme--light
     v-toolbar
+    v-toolbar--collapse-start
     v-toolbar--density-default
     v-toolbar--flat
   "
@@ -1113,7 +1165,6 @@ exports[`TableToolbar > should render 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1/2 lignes
     </p>
@@ -1160,11 +1211,17 @@ exports[`TableToolbar > should render 1`] = `
               >
                 <!---->
                 <div
-                  class="v-progress-linear__background"
+                  class="
+                    bg-primary
+                    v-progress-linear__background
+                  "
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="v-progress-linear__buffer"
+                  class="
+                    bg-primary
+                    v-progress-linear__buffer
+                  "
                   style="
                     opacity: NaN;
                     width: 0%;
@@ -1178,10 +1235,12 @@ 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>
@@ -1197,19 +1256,22 @@ exports[`TableToolbar > should render 1`] = `
             >
               <!---->
               <label
+                aria-hidden="false"
                 class="
                   v-field-label
                   v-label
                 "
-                for="input-v-0"
+                for="input-v-1"
+                id="input-v-1-label"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
+                aria-labelledby="input-v-1-label"
                 class="v-field__input"
-                id="input-v-0"
+                id="input-v-1"
                 size="1"
                 type="text"
               />
@@ -1243,7 +1305,6 @@ exports[`TableToolbar > should render 1`] = `
               </div>
             </transition-stub>
             <div class="v-field__append-inner">
-              <!---->
               <i
                 aria-hidden="true"
                 class="

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -34,6 +34,7 @@
 		multiSort: false,
 		mustSort: false,
 		itemsPerPageOptions: undefined,
+		headingLevel: 2,
 	})
 
 	const options = defineModel<Partial<DataOptions>>('options', {
@@ -466,6 +467,7 @@
 					<SyTablePagination
 						v-if="displayedItems.length > 0 ? displayedItemsLength : 0"
 						:page="page"
+						:heading-level="props.headingLevel"
 						:items-per-page="itemsPerPageValue"
 						:page-count="pageCount"
 						:items-length="displayedItemsLength"

package/src/components/Tables/SyTable/SyTable.vue

@@ -33,6 +33,7 @@
 		multiSort: false,
 		mustSort: false,
 		itemsPerPageOptions: undefined,
+		headingLevel: 2,
 	})
 
 	const options = defineModel<Partial<DataOptions>>('options', {
@@ -439,6 +440,7 @@
 						v-if="filteredItems.length > 0"
 						:page="page"
 						:items-per-page="itemsPerPageValue"
+						:heading-level="props.headingLevel"
 						:page-count="pageCount"
 						:items-length="filteredItems.length"
 						:items-per-page-options="props.itemsPerPageOptions"

package/src/components/Tables/common/SyTablePagination.vue

@@ -4,11 +4,23 @@
 	import SyPagination from '@/components/Customs/SyPagination/SyPagination.vue'
 	import { locales } from './locales'
 
+	const props = withDefaults(defineProps<{
+		page: number
+		pageCount: number
+		itemsPerPage: number
+		itemsLength: number
+		itemsPerPageOptions?: number[]
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+	}>(), {
+		itemsPerPageOptions: undefined,
+		headingLevel: 2,
+	})
+
 	// Reference to the SySelect component
 	const selectRef = ref<InstanceType<typeof SySelect> | null>(null)
 
 	// Items per page options - standard options and current value
-	const itemsPerPageOptions = computed(() => {
+	const formatedItemsPerPageOptions = computed(() => {
 		// Use provided itemsPerPageOptions or default standard options
 		const baseOptions = props.itemsPerPageOptions || [5, 10, 25, 50, 100]
 		// Filter out -1 from base options since we'll handle it separately
@@ -40,14 +52,6 @@
 		return options
 	})
 
-	const props = defineProps<{
-		page: number
-		pageCount: number
-		itemsPerPage: number
-		itemsLength: number
-		itemsPerPageOptions?: number[]
-	}>()
-
 	const emit = defineEmits<{
 		/**
 		 * Emitted when the page changes
@@ -120,6 +124,7 @@
 			v-if="pageCount > 1"
 			:model-value="page"
 			:pages="pageCount"
+			:heading-level="headingLevel"
 			:visible="5"
 			:label="locales.pagination.paginationNavAriaLabel"
 			class="pagination"
@@ -138,10 +143,11 @@
 
 		<div class="rows-per-page">
 			<span class="rows-per-page-label">{{ locales.pagination.itemsPerPageText }}</span>
+
 			<SySelect
 				ref="selectRef"
 				v-model="localItemsPerPage"
-				:items="itemsPerPageOptions"
+				:items="formatedItemsPerPageOptions"
 				hide-details
 				hide-messages
 				density="compact"

package/src/components/Tables/common/filters/DateFilter.vue

@@ -54,6 +54,10 @@
 			type: Boolean,
 			default: true,
 		},
+		headingLevel: {
+			type: Number as () => 1 | 2 | 3 | 4 | 5 | 6,
+			default: 4,
+		},
 	})
 
 	const emit = defineEmits(['update:filters'])
@@ -120,6 +124,7 @@
 	<DatePicker
 		v-model="modelValue"
 		:label="header.title || 'Sélectionner une date'"
+		:heading-level="headingLevel"
 		:clearable="inputConfig?.clearable ?? clearable"
 		:density="inputConfig?.density ?? density"
 		:hide-details="inputConfig?.hideDetails ?? hideDetails"