@cnamts/synapse 1.0.21 → 1.0.22

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

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import SyBtnMenu from '../SyBtnMenu.vue'
 
 describe('SyBtnMenu', () => {
@@ -164,4 +165,44 @@ describe('SyBtnMenu', () => {
 
 		wrapper.unmount()
 	})
+
+	it('renders a prepend icon when menu item provides icon', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				menuItems: [
+					{ text: 'Administration', value: 'admin', icon: 'mdi-account' },
+				],
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.find('.sy-user-menu-btn').trigger('click')
+		await nextTick()
+
+		const prependIcon = document.body.querySelector('.v-list-item__prepend .v-icon') as HTMLElement | null
+		expect(prependIcon).not.toBeNull()
+		expect(prependIcon?.classList.contains('mdi-account')).toBe(true)
+
+		wrapper.unmount()
+	})
+
+	it('does not render a prepend icon when menu item has no icon', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				menuItems: [
+					{ text: 'Administration', value: 'admin' },
+				],
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.find('.sy-user-menu-btn').trigger('click')
+
+		const prependIcon = wrapper.find('.v-list-item__prepend .v-icon')
+		expect(prependIcon.exists()).toBe(false)
+
+		wrapper.unmount()
+	})
 })

package/src/components/SyHeading/SyHeading.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+
+	const props = defineProps<{
+		level: 1 | 2 | 3 | 4 | 5 | 6
+	}>()
+
+	const tag = computed(() => `h${props.level}`)
+</script>
+
+<template>
+	<component
+		:is="tag"
+		class="sy-heading"
+	>
+		<slot />
+	</component>
+</template>

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
   "
@@ -78,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%;
@@ -96,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>
@@ -115,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"
               />
@@ -161,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="
@@ -234,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
   "
@@ -302,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%;
@@ -320,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>
@@ -339,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"
               />
@@ -360,7 +383,6 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
             </div>
             <!---->
             <div class="v-field__append-inner">
-              <!---->
               <i
                 aria-hidden="true"
                 class="
@@ -433,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
   "
@@ -498,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%;
@@ -516,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>
@@ -535,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"
               />
@@ -581,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="
@@ -654,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
   "
@@ -719,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%;
@@ -737,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>
@@ -756,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"
               />
@@ -802,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="
@@ -875,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
   "
@@ -933,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%;
@@ -951,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>
@@ -970,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"
               />
@@ -1016,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="
@@ -1089,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
   "
@@ -1155,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%;
@@ -1173,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>
@@ -1192,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"
               />
@@ -1238,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"