@cnamts/synapse 1.0.24 → 1.0.25

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

@@ -40,6 +40,7 @@
 		itemsPerPageOptions: undefined,
 		headingLevel: 2,
 		clickableRow: false,
+		pageInput: false,
 	})
 
 	const emit = defineEmits<{
@@ -318,6 +319,7 @@
 										:column="column"
 										:header-props-raw="(getHeaderForColumn(column)?.headerProps as any)"
 										:resizable-columns="props.resizableColumns"
+										:wrap-title="props.resizableColumns || !!getHeaderForColumn(column)?.maxWidth"
 									>
 										<template
 											v-for="slotName in Object.keys($slots)"
@@ -344,9 +346,9 @@
 						>
 							<th
 								:style="{
-									...(getHeaderForColumn(column)?.maxWidth ? { maxWidth: getHeaderForColumn(column)?.maxWidth as any } : {}),
+									...(getHeaderForColumn(column)?.maxWidth && !props.resizableColumns ? { maxWidth: getHeaderForColumn(column)?.maxWidth as any } : {}),
 									...(getHeaderForColumn(column)?.minWidth ? { minWidth: getHeaderForColumn(column)?.minWidth as any } : {}),
-									...(getHeaderForColumn(column)?.width ? { width: getHeaderForColumn(column)?.width as any } : {}),
+									width: (reactiveColumnWidths[column.key!] || getHeaderForColumn(column)?.width) as any || undefined,
 								}"
 							>
 								<SyTableFilter
@@ -462,6 +464,7 @@
 						:page-count="pageCount"
 						:items-length="filteredItems.length"
 						:items-per-page-options="props.itemsPerPageOptions"
+						:page-input="props.pageInput"
 						@update:page="updateOptions({ page: $event })"
 						@update:items-per-page="updateItemsPerPage"
 					/>
@@ -473,7 +476,6 @@
 
 <style lang="scss" scoped>
 @use '@/components/Tables/common/tableStyles' as *;
-@use '@/assets/tokens';
 
 .sy-table :deep() {
 	@include tablestyles;
@@ -482,7 +484,7 @@
 
 @mixin striped-rows {
 	.v-table tbody tr:nth-child(even) {
-		background-color: rgba(tokens.$primary-base, 0.05);
+		background-color: rgba(var(--v-theme-primary), 0.05);
 	}
 }
 
@@ -500,11 +502,11 @@
 }
 
 .sy-table--pinned-left-shadow :deep(.sy-table__pinned--left) {
-	box-shadow: 2px 0 6px -4px rgba(tokens.$grey-base, 0.6);
+	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
 }
 
 .sy-table--pinned-right-shadow :deep(.sy-table__pinned--right) {
-	box-shadow: -2px 0 6px -4px rgba(tokens.$grey-base, 0.6);
+	box-shadow: -2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
 }
 
 .sy-table--pinned-select-left :deep(.v-data-table__th--select),
@@ -545,7 +547,7 @@
 .sy-table--pinned-left-shadow.sy-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
 .sy-table--pinned-left-shadow.sy-table--pinned-select-left :deep(.v-data-table__tbody .v-data-table__tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
 .sy-table--pinned-left-shadow.sy-table--pinned-select-left :deep(.v-data-table__tbody tr:not(.v-data-table-rows-loading) > td:first-child) {
-	box-shadow: 2px 0 6px -4px rgba(tokens.$grey-base, 0.6);
+	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
 }
 /* stylelint-enable @stylistic/max-line-length */
 

package/src/components/Tables/SyTable/tests/SyTable.a11y.spec.ts

@@ -36,6 +36,28 @@ describe('SyTable - accessibility (axe)', () => {
 		}
 	})
 
+	it('has no obvious axe violations with pageInput enabled', async () => {
+		const manyItems = Array.from({ length: 11 }, (_, i) => ({ id: i + 1, name: `User ${i + 1}`, age: 20 + i }))
+
+		const wrapper = mount(SyTable, {
+			props: {
+				options: {} as DataOptions,
+				suffix: 'a11y-page-input-test',
+				pageInput: true,
+				headers,
+				items: manyItems,
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTable - pageInput', {
+			ignoreRules: ['region', 'aria-prohibited-attr'],
+		})
+	})
+
 	it('has no obvious axe violations when rows are clickable and contain nested actions', async () => {
 		const wrapper = mount(SyTable, {
 			props: {

package/src/components/Tables/SyTable/tests/SyTable.spec.ts

@@ -892,4 +892,278 @@ describe('SyTable selectionKey', () => {
 		const result = itemValue(item as unknown as Record<string, unknown>)
 		expect(result).toBe(item) // same object reference
 	})
+
+	describe('maxWidth truncation', () => {
+		const truncateHeaders = [
+			{
+				title: 'Nom de la colonne super longue',
+				key: 'nom',
+				maxWidth: '100px',
+			},
+			{
+				title: 'Prénom',
+				key: 'prenom',
+			},
+		]
+
+		const truncateItems = [
+			{ nom: 'Valeur très longue qui dépasse la largeur maximale', prenom: 'Court' },
+		]
+
+		it('applies maxWidth and wraps the header title on <th> when maxWidth is set', async () => {
+			const wrapper = mount(SyTable, {
+				props: {
+					suffix: 'truncate-test',
+					headers: truncateHeaders,
+					items: truncateItems,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			await vi.dynamicImportSettled()
+
+			const ths = wrapper.findAll('tr.headers th')
+			const truncatedTh = ths.find(th => (th.attributes('style') || '').includes('max-width'))
+
+			expect(truncatedTh).toBeDefined()
+			expect(truncatedTh!.attributes('style')).toContain('max-width: 100px')
+			expect(truncatedTh!.attributes('style')).not.toContain('overflow: hidden')
+			expect(truncatedTh!.attributes('title')).toBeUndefined()
+			expect(truncatedTh!.find('.col-title').classes()).toContain('col-title--wrap')
+		})
+
+		it('does not apply multiline header styles on <th> without maxWidth', async () => {
+			const wrapper = mount(SyTable, {
+				props: {
+					suffix: 'no-truncate-test',
+					headers: truncateHeaders,
+					items: truncateItems,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			await vi.dynamicImportSettled()
+
+			const ths = wrapper.findAll('tr.headers th')
+			const normalTh = ths.find(th => !(th.attributes('style') || '').includes('max-width'))
+
+			expect(normalTh).toBeDefined()
+			expect(normalTh!.attributes('title')).toBeUndefined()
+			expect(normalTh!.find('.col-title').classes()).not.toContain('col-title--wrap')
+		})
+
+		it('applies multiline styles on <td> when maxWidth is set', async () => {
+			const wrapper = mount(SyTable, {
+				props: {
+					suffix: 'truncate-td-test',
+					headers: truncateHeaders,
+					items: truncateItems,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			await vi.dynamicImportSettled()
+
+			const tds = wrapper.findAll('tbody tr td')
+			const truncatedTd = tds.find(td => (td.attributes('style') || '').includes('max-width'))
+
+			expect(truncatedTd).toBeDefined()
+			expect(truncatedTd!.attributes('style')).toContain('max-width: 100px')
+			expect(truncatedTd!.attributes('style')).toContain('white-space: normal')
+			expect(truncatedTd!.attributes('style')).toContain('overflow-wrap: anywhere')
+			expect(truncatedTd!.attributes('style')).toContain('word-break: break-word')
+			expect(truncatedTd!.attributes('style')).not.toContain('overflow: hidden')
+			expect(truncatedTd!.attributes('title')).toBeUndefined()
+		})
+
+		it('applies maxWidth without truncation on filter row <th> when maxWidth is set with showFilters', async () => {
+			const wrapper = mount(SyTable, {
+				props: {
+					suffix: 'truncate-filter-test',
+					showFilters: true,
+					headers: truncateHeaders,
+					items: truncateItems,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			await vi.dynamicImportSettled()
+
+			const filterThs = wrapper.findAll('tr.filters th')
+			const truncatedFilterTh = filterThs.find(th => (th.attributes('style') || '').includes('max-width'))
+
+			expect(truncatedFilterTh).toBeDefined()
+			expect(truncatedFilterTh!.attributes('style')).toContain('max-width: 100px')
+			expect(truncatedFilterTh!.attributes('style')).not.toContain('overflow: hidden')
+		})
+
+		it('keeps multiline td styles after reordering a maxWidth column with column controls', async () => {
+			const mockOrganizeColumns = {
+				name: 'OrganizeColumns',
+				props: ['headers'],
+				template: '<div></div>',
+				emits: ['update:headers'],
+			}
+
+			const wrapper = mount(SyTable, {
+				props: {
+					suffix: 'truncate-reorder-test',
+					headers: truncateHeaders.map((header, index) => ({
+						...header,
+						order: index + 1,
+					})),
+					items: truncateItems,
+					enableColumnControls: true,
+				},
+				global: {
+					stubs: {
+						OrganizeColumns: mockOrganizeColumns,
+					},
+				},
+				attachTo: document.body,
+			})
+
+			const organizeColumnsComponent = wrapper.findComponent({ name: 'OrganizeColumns' })
+			const reorderedHeaders = JSON.parse(JSON.stringify([
+				{ ...truncateHeaders[0], order: 2 },
+				{ ...truncateHeaders[1], order: 1 },
+			]))
+
+			organizeColumnsComponent.vm.$emit('update:headers', reorderedHeaders)
+			await wrapper.vm.$nextTick()
+			await vi.dynamicImportSettled()
+
+			const tds = wrapper.findAll('tbody tr td')
+			expect(tds[0]!.text()).toBe('Court')
+			expect(tds[1]!.text()).toBe('Valeur très longue qui dépasse la largeur maximale')
+			expect(tds[1]!.attributes('style')).toContain('max-width: 100px')
+			expect(tds[1]!.attributes('style')).toContain('white-space: normal')
+			expect(tds[1]!.attributes('style')).toContain('overflow-wrap: anywhere')
+		})
+	})
+})
+
+describe('SyTable pageInput', () => {
+	const manyItems = Array.from({ length: 11 }, (_, i) => ({
+		id: i + 1,
+		name: `User ${i + 1}`,
+		age: 20 + i,
+	}))
+
+	it('does not render page-input when pageInput is false', () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'page-input-test',
+				pageInput: false,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		expect(wrapper.find('.page-input').exists()).toBe(false)
+	})
+
+	it('renders page-input field when pageInput is true and pageCount > 1', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'page-input-test',
+				pageInput: true,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		expect(wrapper.find('.page-input').exists()).toBe(true)
+		expect(wrapper.find('.page-input__field').exists()).toBe(true)
+		expect(wrapper.find('.page-input__label').exists()).toBe(true)
+	})
+
+	it('page-input field has correct min/max attributes', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'page-input-test',
+				pageInput: true,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const input = wrapper.find('.page-input__field')
+		expect(input.attributes('min')).toBe('1')
+		expect(input.attributes('max')).toBe('3')
+		expect(input.attributes('type')).toBe('number')
+	})
+
+	it('page-input field has accessible aria-label', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'page-input-test',
+				pageInput: true,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const input = wrapper.find('.page-input__field')
+		expect(input.attributes('aria-label')).toContain('3')
+	})
+
+	it('navigates to page on Enter key', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'page-input-test',
+				pageInput: true,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const input = wrapper.find('.page-input__field')
+		await input.setValue(2)
+		await input.trigger('keydown', { key: 'Enter' })
+
+		const emitted = wrapper.emitted('update:options')
+		expect(emitted).toBeTruthy()
+		const lastEmit = emitted![emitted!.length - 1]![0] as DataOptions
+		expect(lastEmit.page).toBe(2)
+	})
+
+	it('clamps out-of-range values on blur', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'page-input-test',
+				pageInput: true,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const input = wrapper.find('.page-input__field')
+		await input.setValue(99)
+		await input.trigger('blur')
+
+		const emitted = wrapper.emitted('update:options')
+		expect(emitted).toBeTruthy()
+		const lastEmit = emitted![emitted!.length - 1]![0] as DataOptions
+		expect(lastEmit.page).toBe(3)
+	})
 })

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

@@ -297,13 +297,38 @@
 	flex-wrap: wrap;
 	gap: 16px;
 	padding: 16px 0;
-	background-color: var(--v-theme-surface);
 	border-bottom: 1px solid var(--v-border-color);
 
 	&-item {
-		min-width: 200px;
+		min-width: 0;
+		width: 100%;
 		flex: 1;
 	}
+
+	:deep(.v-field) {
+		height: auto;
+		min-height: var(--v-input-control-height, 56px);
+	}
+
+	:deep(.v-field__field),
+	:deep(.v-field__input) {
+		min-width: 0;
+	}
+
+	:deep(.sy-select .v-field__input),
+	:deep(.sy-autocomplete .v-field__input) {
+		flex-wrap: wrap;
+	}
+
+	:deep(.sy-select__label),
+	:deep(.sy-autocomplete__label),
+	:deep(.sy-autocomplete__selection-text) {
+		white-space: normal;
+		overflow-wrap: anywhere;
+		word-break: break-word;
+		line-height: 1.25;
+		flex-shrink: 1;
+	}
 }
 
 </style>

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

@@ -11,9 +11,11 @@
 		itemsLength: number
 		itemsPerPageOptions?: number[]
 		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		pageInput?: boolean
 	}>(), {
 		itemsPerPageOptions: undefined,
 		headingLevel: 2,
+		pageInput: false,
 	})
 
 	// Reference to the SySelect component
@@ -91,6 +93,34 @@
 		localItemsPerPage.value = newValue
 	})
 
+	/**
+	 * Page input field logic
+	 */
+	const pageInputValue = ref<number | null>(props.page)
+
+	watch(() => props.page, (newPage) => {
+		pageInputValue.value = newPage
+	})
+
+	function commitPageInput() {
+		const enteredPage = pageInputValue.value
+		if (enteredPage === null || !Number.isInteger(enteredPage)) {
+			pageInputValue.value = props.page
+			return
+		}
+		const targetPage = Math.min(Math.max(1, enteredPage), props.pageCount)
+		pageInputValue.value = targetPage
+		if (targetPage !== props.page) {
+			emit('update:page', targetPage)
+		}
+	}
+
+	function handlePageInputKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			commitPageInput()
+		}
+	}
+
 	// Remove aria-describedby attribute after component is mounted
 	onMounted(() => {
 		// Use nextTick to ensure the DOM is fully rendered
@@ -120,26 +150,57 @@
 			}}
 		</div>
 
-		<SyPagination
+		<div
 			v-if="pageCount > 1"
-			:model-value="page"
-			:pages="pageCount"
-			:heading-level="headingLevel"
-			:visible="5"
-			:label="locales.pagination.paginationNavAriaLabel"
-			class="pagination"
-			@update:model-value="goToPage"
+			class="pagination-controls"
 		>
-			<template #previous>
-				<span>{{ locales.pagination.previous }}</span>
-			</template>
-			<template #page-number="{ page: pageNum }">
-				{{ locales.pagination.pageText(pageNum) }}
-			</template>
-			<template #next>
-				<span>{{ locales.pagination.next }}</span>
-			</template>
-		</SyPagination>
+			<SyPagination
+				:model-value="page"
+				:pages="pageCount"
+				:heading-level="headingLevel"
+				:visible="5"
+				:label="locales.pagination.paginationNavAriaLabel"
+				class="pagination"
+				@update:model-value="goToPage"
+			>
+				<template #previous>
+					<span>{{ locales.pagination.previous }}</span>
+				</template>
+				<template #page-number="{ page: pageNum }">
+					{{ locales.pagination.pageText(pageNum) }}
+				</template>
+				<template #next>
+					<span>{{ locales.pagination.next }}</span>
+				</template>
+			</SyPagination>
+
+			<div
+				v-if="pageInput"
+				class="page-input"
+			>
+				<div class="page-input__control">
+					<span class="page-input__label">
+						{{ locales.pagination.pageInputLabel }}
+					</span>
+					<input
+						v-model.number="pageInputValue"
+						type="number"
+						:min="1"
+						:max="pageCount"
+						class="page-input__field"
+						:aria-label="locales.pagination.pageInputAriaLabel(pageCount)"
+						@blur="commitPageInput"
+						@keydown="handlePageInputKeydown"
+					>
+				</div>
+				<span
+					class="page-input__total"
+					aria-hidden="true"
+				>
+					{{ locales.pagination.pageOf(pageCount) }}
+				</span>
+			</div>
+		</div>
 
 		<div class="rows-per-page">
 			<span class="rows-per-page-label">{{ locales.pagination.itemsPerPageText }}</span>
@@ -163,7 +224,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
+@use '@/assets/overrides/breakpoints' as bp;
 
 .sy-table-pagination {
 	display: flex;
@@ -212,5 +273,67 @@
 		gap: 0.5rem;
 		align-items: center;
 	}
+
+	.pagination-controls {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+	}
+
+	.page-input {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding-inline-start: 1.75rem;
+		border-inline-start: 1px solid rgb(0 0 0 / 12%);
+
+		@media #{bp.$down-xs} {
+			padding-inline-start: 0;
+			border-inline-start: 0;
+		}
+
+		&__control {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+		}
+
+		&__label {
+			font-size: 0.875rem;
+			color: rgb(0 0 0 / 60%);
+			white-space: nowrap;
+		}
+
+		&__field {
+			width: 56px;
+			height: 32px;
+			padding: 0 8px;
+			border: 1px solid rgb(var(--v-theme-primary));
+			border-radius: 4px;
+			font-size: 0.875rem;
+			text-align: center;
+			color: inherit;
+			background: rgb(var(--v-theme-surface));
+			appearance: textfield;
+
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+				appearance: none;
+			}
+
+			&:focus-visible {
+				outline: 2px solid rgb(var(--v-theme-primary));
+				outline-offset: 2px;
+			}
+		}
+
+		&__total {
+			font-size: 0.875rem;
+			color: rgb(0 0 0 / 60%);
+			white-space: nowrap;
+		}
+	}
 }
 </style>

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

@@ -14,10 +14,12 @@
 		headerParams: Parameters<VDataTable['$slots']['headers']>['0']
 		table: VDataTable | VDataTableServer | null | undefined
 		resizableColumns?: boolean
+		wrapTitle?: boolean
 		storageKey?: string
 		headerPropsRaw?: HeaderPropsRaw
 	}>(), {
 		resizableColumns: false,
+		wrapTitle: false,
 		storageKey: undefined,
 		headerPropsRaw: undefined,
 	})
@@ -198,13 +200,27 @@
 		const index = props.headerParams.sortBy.findIndex(sort => sort.key === props.column.key)
 		return index !== -1 ? index + 1 : null
 	})
+
+	const titleClasses = computed(() => [
+		textAlignClass.value,
+		headerClassRaw.value,
+		{ 'col-title--wrap': props.wrapTitle },
+	])
+
+	const wrapperClasses = computed(() => [
+		alignClass.value,
+		{
+			'h-100': !props.wrapTitle,
+			'v-data-table-header__content--wrap': props.wrapTitle,
+		},
+	])
 </script>
 
 <template>
 	<div
 		ref="wrapper"
-		class="v-data-table-header__content d-flex align-center h-100 w-100"
-		:class="alignClass"
+		class="v-data-table-header__content d-flex align-center w-100"
+		:class="wrapperClasses"
 	>
 		<slot
 			:name="`header.${column.key}`"
@@ -216,7 +232,7 @@
 		>
 			<div
 				class="col-title"
-				:class="[textAlignClass, headerClassRaw]"
+				:class="titleClasses"
 				:style="headerStyle"
 			>
 				{{ column.title }}
@@ -268,6 +284,27 @@
 <style lang="scss" scoped>
 .v-data-table-header__content {
 	column-gap: 4px;
+	min-width: 0;
+}
+
+.v-data-table-header__content--wrap {
+	height: auto;
+}
+
+.col-title {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.col-title--wrap {
+	white-space: normal;
+	overflow-wrap: anywhere;
+	word-break: break-word;
+	line-height: 1.25;
+}
+
+.sort-container {
+	flex: 0 0 auto;
 }
 
 .sort-order-indicator {