@cnamts/synapse 1.0.24 → 1.0.25

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

@@ -225,7 +225,7 @@
 	top: 1px;
 	left: 12px;
 	color: rgb(0 0 0 / 60%);
-	font-size: 14px;
+	font-size: var(--v-fontSize-liensEtLibelles);
 	line-height: 36px; /* Adjust based on your select height */
 	pointer-events: none;
 	width: calc(100% - 40px); /* Leave space for the dropdown icon */

package/src/components/Tables/common/locales.ts

@@ -19,6 +19,9 @@ export const locales = {
 		pageAriaLabel: (page: number) => `Page ${page}`,
 		currentPageAriaLabel: (page: number) => `Page courante, Page ${page}`,
 		paginationNavAriaLabel: 'Navigation de pagination',
+		pageInputLabel: 'Aller à la page',
+		pageInputAriaLabel: (pageCount: number) => `Aller à la page, entre 1 et ${pageCount}`,
+		pageOf: (pageCount: number) => `sur ${pageCount}`,
 	},
 	reorganizeColumns: 'Gestion des colonnes',
 	close: 'Fermer',

package/src/components/Tables/common/tableStyles.scss

@@ -1,11 +1,8 @@
-@use 'sass:color';
-@use '@/assets/tokens';
-
 @mixin tablestyles {
 	.v-table {
-		border: 1px solid tokens.$grey-lighten-80;
+		border: 1px solid rgb(var(--v-theme-grey-lighten80));
 
-		--sy-table-header-bg-pinned: #{color.mix(tokens.$blue-lighten-80, #fff, 20%)};
+		--sy-table-header-bg-pinned: color-mix(in srgb, rgb(var(--v-theme-blue-lighten80)) 20%, white);
 
 		// Standardisation des z-index pour les tableaux
 		--sy-table-z-base: 1;
@@ -20,13 +17,13 @@
 
 	table thead tr.filters,
 	table thead tr.reset {
-		background-color: tokens.$blue-lighten-90;
+		background-color: rgb(var(--v-theme-blue-lighten90));
 	}
 
 	caption,
 	table thead tr.headers,
 	table thead tr.reset {
-		background-color: rgba(tokens.$blue-lighten-80, 0.2);
+		background-color: rgba(var(--v-theme-blue-lighten80), 0.2);
 	}
 
 	&.fixed-min-height {
@@ -47,44 +44,44 @@
 			.v-field__append-inner > .v-icon,
 			.v-field__clearable > .v-icon {
 				opacity: 1;
-				color: tokens.$primary-base;
+				color: rgb(var(--v-theme-primary));
 			}
 		}
 
 		&--focused {
-			border-color: tokens.$primary-base;
-			color: tokens.$primary-base;
+			border-color: rgb(var(--v-theme-primary));
+			color: rgb(var(--v-theme-primary));
 		}
 	}
 
 	// Override Vuetify's checkbox styles to use primary color
 	.v-table .v-selection-control {
-		color: rgb(var(--v-theme-primary)) !important;
+		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
 	}
 
 	.v-table .v-selection-control--dirty .v-selection-control__input::before {
-		background-color: rgb(var(--v-theme-primary)) !important;
-		border-color: rgb(var(--v-theme-primary)) !important;
+		background-color: rgb(var(--v-theme-borderAccentPrimary)) !important;
+		border-color: rgb(var(--v-theme-borderAccentPrimary)) !important;
 	}
 
 	// Target the header checkbox specifically
 	.v-data-table-header__checkbox .v-selection-control {
-		color: rgb(var(--v-theme-primary)) !important;
+		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
 	}
 
 	// Target the row checkboxes specifically
 	.v-data-table-row__checkbox .v-selection-control {
-		color: rgb(var(--v-theme-primary)) !important;
+		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
 	}
 
 	// Add a global style for all checkboxes in the table
 	.v-checkbox .v-selection-control__input::before,
 	.v-checkbox-btn .v-selection-control__input::before {
-		border-color: rgb(var(--v-theme-primary)) !important;
+		border-color: rgb(var(--v-theme-borderAccentPrimary)) !important;
 	}
 
 	.v-data-table-rows-no-data {
-		color: tokens.$grey-base;
+		color: rgb(var(--v-theme-grey-base));
 	}
 
 	// Ensure loading progress bar appears above sticky/pinned header cells
@@ -104,7 +101,7 @@
 
 	.v-table tbody > tr.sy-table__clickable-row:focus-visible,
 	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible {
-		outline: 2px solid tokens.$primary-base;
+		outline: 2px solid rgb(var(--v-theme-primary));
 	}
 
 	.v-table tbody > tr.sy-table__clickable-row > td,
@@ -123,6 +120,6 @@
 	.v-data-table__tbody > tr.sy-table__clickable-row:hover > .v-data-table__td,
 	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible > td,
 	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible > .v-data-table__td {
-		background-color: rgba(tokens.$primary-base, 0.08) !important;
+		background-color: rgba(var(--v-theme-primary), 0.08) !important;
 	}
 }

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

@@ -135,6 +135,24 @@ describe('SyTablePagination.vue', () => {
 		expect(wrapper.emitted('update:page')![0]).toEqual([2])
 	})
 
+	it('groups page input with pagination controls', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				headingLevel: 2,
+				page: 3,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+				pageInput: true,
+			},
+		})
+
+		const controls = wrapper.find('.pagination-controls')
+		expect(controls.exists()).toBe(true)
+		expect(controls.find('.pagination').exists()).toBe(true)
+		expect(controls.find('.page-input').exists()).toBe(true)
+	})
+
 	it('has the correct structure for items per page selection', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {

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

@@ -135,6 +135,45 @@ describe('TableHeader', () => {
 		expect(wrapper.find('.sort-order-indicator').exists()).toBe(false)
 	})
 
+	it('wraps the column title when resizable columns are enabled', () => {
+		const column = {
+			title: 'A very long column title',
+			key: 'test',
+			value: 'test',
+			sortable: true,
+		}
+
+		const wrapper = mount(TableHeader, {
+			props: {
+				column,
+				headerParams: {
+					sortBy: [],
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns: [
+						{
+							key: 'test',
+							value: 'test',
+							title: 'A very long column title',
+							sortable: true,
+						},
+					],
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => false,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				wrapTitle: true,
+			},
+		})
+
+		expect(wrapper.find('.col-title').classes()).toContain('col-title--wrap')
+		expect(wrapper.find('.v-data-table-header__content').classes()).toContain('v-data-table-header__content--wrap')
+		expect(wrapper.find('.v-data-table-header__content').classes()).not.toContain('h-100')
+	})
+
 	// Test for correct sort order when multiple columns are sorted
 	it('displays correct sort order numbers for multiple sorted columns', async () => {
 		const columns = [

package/src/components/Tables/common/types.ts

@@ -105,6 +105,7 @@ export type SyTableProps = {
 	pinnedColumns?: Array<string | { key: string, side?: 'left' | 'right' }>
 	pinnedColumnKey?: string
 	clickableRow?: boolean
+	pageInput?: boolean
 }
 
 export type SyServerTableProps = {
@@ -132,4 +133,5 @@ export type SyServerTableProps = {
 	pinnedColumns?: Array<string | { key: string, side?: 'left' | 'right' }>
 	pinnedColumnKey?: string
 	clickableRow?: boolean
+	pageInput?: boolean
 }

package/src/components/Tables/common/useTableHeaders.ts

@@ -18,8 +18,38 @@ export function useTableHeaders({
 	storedHeaders?: DataTableHeaders[]
 	filterInputConfig?: Record<string, unknown>
 }) {
-	// Process headers to ensure they have title property
-	const normalizedHeaders = computed(() => {
+	function normalizeHeader(header: DataTableHeaders): DataTableHeaders {
+		const mapped = {
+			...header,
+			title: header.title ?? header.text,
+		} as TableColumnHeader
+
+		// Si maxWidth est défini sans width → applique-le à width
+		if (mapped.maxWidth != null && mapped.width == null) {
+			mapped.width = mapped.maxWidth
+		}
+
+		// Si maxWidth est défini → l'appliquer aussi aux <td> via cellProps
+		if (mapped.maxWidth != null) {
+			const existingCellProps = (mapped.cellProps ?? {}) as Record<string, unknown>
+			const existingStyle = (existingCellProps.style ?? {}) as Record<string, unknown>
+			const multilineStyle = {
+				...existingStyle,
+				maxWidth: mapped.maxWidth,
+				whiteSpace: 'normal',
+				overflowWrap: 'anywhere',
+				wordBreak: 'break-word',
+			}
+			const baseProps = { ...existingCellProps, style: multilineStyle }
+			mapped.cellProps = () => ({
+				...baseProps,
+			})
+		}
+
+		return mapped as unknown as DataTableHeaders
+	}
+
+	const mergedHeaders = computed(() => {
 		const incoming = headersProp?.value
 		const stored = Array.isArray(storedHeaders) ? storedHeaders : undefined
 
@@ -61,27 +91,11 @@ export function useTableHeaders({
 			headers = (stored ?? incoming) as DataTableHeaders[]
 		}
 
-		// Normalisation finale
-		return headers.map((header) => {
-			const mapped = {
-				...header,
-				title: header.title ?? header.text,
-			} as TableColumnHeader
-
-			// Si maxWidth est défini sans width → applique-le à width
-			if (mapped.maxWidth != null && mapped.width == null) {
-				mapped.width = mapped.maxWidth
-			}
-
-			return mapped as unknown as DataTableHeaders
-		})
+		return headers
 	})
 
-	// Get filterable headers
-	const filterableHeaders = computed(() => {
-		if (!normalizedHeaders.value) return []
-		return normalizedHeaders.value.filter(header => header.filterable)
-	})
+	// Process headers to ensure they have title property and regenerate cellProps after reordering
+	const normalizedHeaders = computed(() => mergedHeaders.value?.map(normalizeHeader))
 
 	/**
 	 * Enhance header with filter type and configuration
@@ -112,27 +126,35 @@ export function useTableHeaders({
 		internalHeaders.value = newHeaders
 	}, { immediate: true, deep: true })
 
+	const normalizedInternalHeaders = computed(() => internalHeaders.value?.map(normalizeHeader))
+
+	// Get filterable headers
+	const filterableHeaders = computed(() => {
+		if (!normalizedInternalHeaders.value) return []
+		return normalizedInternalHeaders.value.filter(header => header.filterable)
+	})
+
 	/**
 	 * Get header by key
 	 */
 	function getHeaderByKey(key: string): TableColumnHeader | undefined {
-		return normalizedHeaders.value?.find(header => header.key === key)
+		return normalizedInternalHeaders.value?.find(header => header.key === key)
 	}
 
 	/**
 	 * Get original header from a rendered column (match by key or value)
 	 */
 	function getHeaderForColumn(column: TableColumnHeader): TableColumnHeader | undefined {
-		if (!normalizedHeaders.value) return undefined
+		if (!normalizedInternalHeaders.value) return undefined
 		const key = column.key ?? undefined
 		if (key) {
-			const byKey = normalizedHeaders.value.find(h => h.key === key)
+			const byKey = normalizedInternalHeaders.value.find(h => h.key === key)
 			if (byKey) return byKey
 		}
 		// Fallback: try matching by value when key is not present or didn't match
 		const val = typeof column.value === 'string' ? column.value : undefined
 		if (val) {
-			const byValue = normalizedHeaders.value.find(h => h.value === val)
+			const byValue = normalizedInternalHeaders.value.find(h => h.value === val)
 			if (byValue) return byValue
 		}
 		return undefined
@@ -142,8 +164,8 @@ export function useTableHeaders({
 	 * The headers filtered by visibility and sorted by order
 	 */
 	const displayHeaders = computed(() => {
-		if (!internalHeaders.value) return undefined
-		const filteredHeaders = internalHeaders.value.filter(header => header.hidden !== true)
+		if (!normalizedInternalHeaders.value) return undefined
+		const filteredHeaders = normalizedInternalHeaders.value.filter(header => header.hidden !== true)
 		return sortHeaders(filteredHeaders)
 	})
 

package/src/components/UploadWorkflow/UploadWorkflow.vue

@@ -30,6 +30,7 @@
 			}
 		>(),
 		{
+			uploadList: () => [],
 			sectionTitle: undefined,
 			showFilePreview: false,
 			infoText: '',

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

@@ -35,6 +35,29 @@ describe('UploadWorkflow', () => {
 		expect(wrapper.find('.sy-file-upload').isVisible()).toBeTruthy()
 	})
 
+	it('handles empty upload list without crashing', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				uploadList: [],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.findAll('.file-item')).toHaveLength(0)
+		expect(wrapper.find('.sy-file-upload').exists()).toBeFalsy()
+	})
+
+	it('handles undefined upload list without crashing', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+			props: {} as any,
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.findAll('.file-item')).toHaveLength(0)
+		expect(wrapper.find('.sy-file-upload').exists()).toBeFalsy()
+	})
+
 	it('shows the file in the list when set with the list button', async () => {
 		const wrapper = mount(UploadWorkflow, {
 			props: {

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

@@ -1,5 +1,71 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`UploadWorkflow > handles empty upload list without crashing 1`] = `
+<div
+  class="
+    sy-upload-workflow
+    white
+  "
+  style="width: 100%;"
+>
+  <h4 class="
+    mb-2
+    sy-heading
+    text-h6
+  ">
+    Document à nous transmettre
+  </h4>
+  <ul
+    class="upload-list"
+    style="width: 100%;"
+  ></ul>
+  <transition-stub
+    appear="false"
+    css="true"
+    persisted="false"
+  >
+    <!-- v-if -->
+  </transition-stub>
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
+
+exports[`UploadWorkflow > handles undefined upload list without crashing 1`] = `
+<div
+  class="
+    sy-upload-workflow
+    white
+  "
+  style="width: 100%;"
+>
+  <h4 class="
+    mb-2
+    sy-heading
+    text-h6
+  ">
+    Document à nous transmettre
+  </h4>
+  <ul
+    class="upload-list"
+    style="width: 100%;"
+  ></ul>
+  <transition-stub
+    appear="false"
+    css="true"
+    persisted="false"
+  >
+    <!-- v-if -->
+  </transition-stub>
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
+
 exports[`UploadWorkflow > render the upload list 1`] = `
 <div
   class="

package/src/components/UploadWorkflow/useFileList.ts

@@ -72,6 +72,9 @@ export default function useFileList(
 	}
 
 	const filledUploadList = computed<FileItem[]>(() => {
+		if (!uploadList.value) {
+			return []
+		}
 		return uploadList.value.map((uploadItem) => {
 			const matchingUploadedItem = findSelectedFile(uploadItem.id)
 			const error = errorSelectedFiles.value.includes(uploadItem.id)

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -94,12 +94,10 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 .vd-user-icon {
 	width: 40px;
 	height: 40px;
-	background: tokens.$grey-lighten-90;
+	background: rgb(var(--v-theme-grey-lighten90));
 	border-radius: 50%;
 
 	svg,