@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/Tables/common/filters/tests/AutocompleteFilter.spec.ts

@@ -0,0 +1,203 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import AutocompleteFilter from '../AutocompleteFilter.vue'
+import SyAutocomplete from '@/components/Customs/Selects/SyAutocomplete/SyAutocomplete.vue'
+import type { FilterType } from '../../types'
+
+describe('AutocompleteFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof AutocompleteFilter>>
+	const header = {
+		title: 'Test Autocomplete',
+		key: 'test',
+		filterOptions: [
+			{ text: 'Option 1', value: 'option1' },
+			{ text: 'Option 2', value: 'option2' },
+		],
+	}
+	const filters: { key: string, value: string | number, type: FilterType }[] = []
+
+	beforeEach(() => {
+		wrapper = mount(AutocompleteFilter, {
+			global: {
+				stubs: {
+					SyAutocomplete: {
+						template: '<div class="sy-autocomplete-stub" data-testid="sy-autocomplete" :label="label" :clearable="clearable" :density="density" :hideDetails="hideDetails"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'disableErrorHandling', 'variantStyle', 'multiple', 'chips', 'filter'],
+						emits: ['update:modelValue', 'click:clear'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: undefined,
+			},
+		})
+	})
+
+	afterEach(() => {
+		vi.clearAllMocks()
+		document.body.innerHTML = ''
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(SyAutocomplete).exists()).toBe(true)
+	})
+
+	it('passes the correct props to SyAutocomplete', () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		expect(syAutocomplete.attributes('label')).toBe('Test Autocomplete')
+		expect(syAutocomplete.attributes('clearable')).toBe('true')
+		expect(syAutocomplete.attributes('density')).toBe('compact')
+		expect(syAutocomplete.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when value changes', async () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', 'option1')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([
+			{ key: 'test', value: 'option1', type: 'autocomplete' as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when value is null', async () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', 'option1')
+		syAutocomplete.vm.$emit('update:modelValue', null)
+
+		expect(wrapper.emitted('update:filters')![1]?.[0]).toEqual([])
+	})
+
+	it('emits update:filters event to remove filter when value is undefined', async () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		await syAutocomplete.vm.$emit('update:modelValue', 'option1')
+		syAutocomplete.vm.$emit('update:modelValue', undefined)
+
+		expect(wrapper.emitted('update:filters')![1]?.[0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		await syAutocomplete.vm.$emit('click:clear')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([])
+	})
+
+	it('updates existing filter when one already exists', async () => {
+		const existingFilters = [{ key: 'test', value: 'option1', type: 'autocomplete' as FilterType }]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', 'option2')
+
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([
+			{ key: 'test', value: 'option2', type: 'autocomplete' as FilterType },
+		])
+	})
+
+	it('handles multiple selection - emits array value', async () => {
+		await wrapper.setProps({
+			header: { ...header, multiple: true },
+		})
+
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', ['option1', 'option2'])
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([
+			{ key: 'test', value: ['option1', 'option2'], type: 'autocomplete' as FilterType },
+		])
+	})
+
+	it('removes filter when multiple selection is cleared to empty array', async () => {
+		await wrapper.setProps({
+			header: { ...header, multiple: true },
+			filters: [{ key: 'test', value: ['option1'], type: 'autocomplete' as FilterType }],
+		})
+
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', [])
+
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([])
+	})
+
+	it('generates unique key from title when header.key is absent', async () => {
+		const headerWithoutKey = {
+			title: 'Test Autocomplete',
+			filterOptions: [
+				{ text: 'Option 1', value: 'option1' },
+			],
+		}
+		const newWrapper = mount(AutocompleteFilter, {
+			global: {
+				stubs: {
+					SyAutocomplete: {
+						template: '<div class="sy-autocomplete-stub"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'disableErrorHandling', 'variantStyle', 'multiple', 'chips', 'filter'],
+						emits: ['update:modelValue', 'click:clear'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const syAutocomplete = newWrapper.findComponent(SyAutocomplete)
+		await syAutocomplete.vm.$emit('update:modelValue', 'option1')
+
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0]?.[0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0]?.key).toBe('filter_Test Autocomplete')
+		expect(emittedFilters[0]?.value).toBe('option1')
+		expect(emittedFilters[0]?.type).toBe('autocomplete')
+	})
+
+	it('generates unique key with timestamp when all header properties are absent', async () => {
+		const originalDateNow = Date.now
+		const mockTimestamp = 1622548800000
+		global.Date.now = vi.fn(() => mockTimestamp)
+
+		const emptyHeader = {
+			filterOptions: [
+				{ text: 'Option 1', value: 'option1' },
+			],
+		}
+		const newWrapper = mount(AutocompleteFilter, {
+			global: {
+				stubs: {
+					SyAutocomplete: {
+						template: '<div class="sy-autocomplete-stub"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'disableErrorHandling', 'variantStyle', 'multiple', 'chips', 'filter'],
+						emits: ['update:modelValue', 'click:clear'],
+					},
+				},
+			},
+			props: {
+				header: emptyHeader,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const syAutocomplete = newWrapper.findComponent(SyAutocomplete)
+		await syAutocomplete.vm.$emit('update:modelValue', 'option1')
+
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0]?.[0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0]?.key).toBe(`filter_${mockTimestamp}`)
+		expect(emittedFilters[0]?.value).toBe('option1')
+		expect(emittedFilters[0]?.type).toBe('autocomplete')
+
+		global.Date.now = originalDateNow
+	})
+})

package/src/components/Tables/common/filters/tests/SelectFilter.a11y.spec.ts

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+
+import { describe, it, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+
+import SelectFilter from '../SelectFilter.vue'
+
+// Stub accessible : un <select> avec un <label> associé permet à axe
+// de valider label / form-field sans dépendre de l'implémentation SySelect.
+const accessibleSySelectStub = {
+	template: `
+		<div>
+			<label :for="inputId">{{ label }}</label>
+			<select :id="inputId" :aria-label="label" v-bind="$attrs">
+				<option v-for="item in items" :key="item.value" :value="item.value">{{ item.text }}</option>
+			</select>
+		</div>
+	`,
+	props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'hideMessages',
+		'disableErrorHandling', 'variant', 'bgColor', 'multiple', 'chips'],
+	emits: ['update:modelValue', 'click:clear'],
+	setup() {
+		const inputId = `select-stub-${Math.random().toString(36).slice(2)}`
+		return { inputId }
+	},
+}
+
+const baseHeader = {
+	title: 'Département',
+	key: 'department',
+	filterOptions: [
+		{ text: 'RH', value: 'RH' },
+		{ text: 'IT', value: 'IT' },
+		{ text: 'Finance', value: 'Finance' },
+	],
+}
+
+afterEach(() => {
+	document.body.innerHTML = ''
+})
+
+describe('SelectFilter – accessibilité (axe)', () => {
+	it('has no axe violations in default (single) state', async () => {
+		const wrapper = mount(SelectFilter, {
+			attachTo: document.body,
+			global: { stubs: { SySelect: accessibleSySelectStub } },
+			props: {
+				header: baseHeader,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SelectFilter – single, empty', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations when a value is selected', async () => {
+		const wrapper = mount(SelectFilter, {
+			attachTo: document.body,
+			global: { stubs: { SySelect: accessibleSySelectStub } },
+			props: {
+				header: baseHeader,
+				filters: [{ key: 'department', value: 'RH', type: 'select' }],
+				filterValue: 'RH',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SelectFilter – single, with value', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations in multiple selection state', async () => {
+		const wrapper = mount(SelectFilter, {
+			attachTo: document.body,
+			global: { stubs: { SySelect: accessibleSySelectStub } },
+			props: {
+				header: { ...baseHeader, multiple: true, chips: true },
+				filters: [],
+				filterValue: [],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SelectFilter – multiple, empty', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations when header has no title (falls back to aria-label "Filtre")', async () => {
+		const wrapper = mount(SelectFilter, {
+			attachTo: document.body,
+			global: { stubs: { SySelect: accessibleSySelectStub } },
+			props: {
+				header: { key: 'status', filterOptions: baseHeader.filterOptions },
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SelectFilter – no title', { ignoreRules: ['region'] })
+	})
+})

package/src/components/Tables/common/filters/tests/SelectFilter.spec.ts

@@ -5,6 +5,12 @@ import SelectFilter from '../SelectFilter.vue'
 import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import type { FilterType } from '../../types'
 
+const sySelectStub = {
+	template: '<div class="sy-select-stub" data-testid="sy-select" :label="label" :items="items" :clearable="clearable" :density="density" :hideDetails="hideDetails" :multiple="multiple"></div>',
+	props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'hideMessages', 'disableErrorHandling', 'variant', 'multiple', 'chips'],
+	emits: ['update:modelValue', 'click:clear'],
+}
+
 describe('SelectFilter.vue', () => {
 	let wrapper: ReturnType<typeof mount<typeof SelectFilter>>
 	const header = {
@@ -21,10 +27,7 @@ describe('SelectFilter.vue', () => {
 		wrapper = mount(SelectFilter, {
 			global: {
 				stubs: {
-					SySelect: {
-						template: '<div class="sy-select-stub" data-testid="sy-select" :label="label" :items="items" :clearable="clearable" :density="density" :hideDetails="hideDetails"></div>',
-						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'hideMessages', 'disableErrorHandling', 'variant'],
-					},
+					SySelect: sySelectStub,
 				},
 			},
 			props: {
@@ -139,12 +142,7 @@ describe('SelectFilter.vue', () => {
 		}
 		const newWrapper = mount(SelectFilter, {
 			global: {
-				stubs: {
-					SySelect: {
-						template: '<div class="sy-select-stub" data-testid="sy-select"></div>',
-						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails'],
-					},
-				},
+				stubs: { SySelect: sySelectStub },
 			},
 			props: {
 				header: headerWithoutKey,
@@ -181,12 +179,7 @@ describe('SelectFilter.vue', () => {
 		}
 		const newWrapper = mount(SelectFilter, {
 			global: {
-				stubs: {
-					SySelect: {
-						template: '<div class="sy-select-stub" data-testid="sy-select"></div>',
-						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails'],
-					},
-				},
+				stubs: { SySelect: sySelectStub },
 			},
 			props: {
 				header: emptyHeader,
@@ -209,4 +202,147 @@ describe('SelectFilter.vue', () => {
 		// Restaurer Date.now
 		global.Date.now = originalDateNow
 	})
+
+	describe('filterOptions – removed default option', () => {
+		it('returns empty array when header has no filterOptions', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { title: 'Test', key: 'test' },
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			// SySelect receives items=[] — no "- choisir -" option injected
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('items')).toEqual([])
+		})
+
+		it('does not prepend a default "- choisir -" option to filterOptions', () => {
+			const sySelect = wrapper.findComponent(SySelect)
+			const items = sySelect.props('items') as Array<{ text: string, value: unknown }>
+			const hasDefaultOption = items.some(i => i.text === '- choisir -')
+			expect(hasDefaultOption).toBe(false)
+		})
+
+		it('replaces empty-string option text with "(vide)"', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: {
+						title: 'Test',
+						key: 'test',
+						filterOptions: [{ text: '', value: '' }],
+					},
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			const items = sySelect.props('items') as Array<{ text: string, value: unknown }>
+			expect(items[0]?.text).toBe('(vide)')
+		})
+	})
+
+	describe('modelValue – null-based empty state (no defaultOption)', () => {
+		it('passes null to SySelect when filterValue is null', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: { header, filters: [], filterValue: null },
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('modelValue')).toBeNull()
+		})
+
+		it('passes null to SySelect when filterValue is undefined', () => {
+			const sySelect = wrapper.findComponent(SySelect)
+			expect(sySelect.props('modelValue')).toBeNull()
+		})
+
+		it('passes empty array to SySelect when filterValue is null and multiple=true', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: true },
+					filters: [],
+					filterValue: null,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('modelValue')).toEqual([])
+		})
+	})
+
+	describe('multiple prop – strict equality', () => {
+		it('does not enable multiple when header.multiple is undefined', () => {
+			const sySelect = wrapper.findComponent(SySelect)
+			expect(sySelect.props('multiple')).toBe(false)
+		})
+
+		it('does not enable multiple when header.multiple is a truthy non-boolean (e.g. string)', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: 'true' as unknown as boolean },
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('multiple')).toBe(false)
+		})
+
+		it('enables multiple when header.multiple === true', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: true },
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('multiple')).toBe(true)
+		})
+
+		it('emits array value when multiple=true and items are selected', async () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: true },
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			sySelect.vm.$emit('update:modelValue', ['option1', 'option2'])
+
+			expect(newWrapper.emitted('update:filters')![0]?.[0]).toEqual([
+				{ key: 'test', value: ['option1', 'option2'], type: 'select' as FilterType },
+			])
+		})
+
+		it('removes filter when multiple=true selection is cleared to empty array', async () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: true },
+					filters: [{ key: 'test', value: ['option1'], type: 'select' as FilterType }],
+					filterValue: ['option1'],
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			sySelect.vm.$emit('update:modelValue', [])
+
+			expect(newWrapper.emitted('update:filters')![0]?.[0]).toEqual([])
+		})
+	})
 })

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/tableFilterUtils.ts

@@ -32,6 +32,9 @@ function applyFilter<T extends Items[0]>(item: T, filter: FilterOption): boolean
 		case 'select': {
 			return filterBySelect(itemValue, filterValue)
 		}
+		case 'autocomplete': {
+			return filterBySelect(itemValue, filterValue)
+		}
 		case 'custom': {
 			// Traiter les filtres personnalisés comme des filtres de sélection
 			return filterBySelect(itemValue, filterValue)

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

@@ -1,8 +1,14 @@
-@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(in srgb, rgb(var(--v-theme-blue-lighten80)) 20%, white);
+
+		// Standardisation des z-index pour les tableaux
+		--sy-table-z-base: 1;
+		--sy-table-z-pinned-cell: calc(var(--sy-table-z-base) + 2);
+		--sy-table-z-pinned-header: calc(var(--sy-table-z-base) + 4);
+		--sy-table-z-progress: calc(var(--sy-table-z-base) + 5);
 	}
 
 	table thead tr {
@@ -11,17 +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);
-	}
-
-	&.row-clickable table tbody tr {
-		cursor: pointer;
+		background-color: rgba(var(--v-theme-blue-lighten80), 0.2);
 	}
 
 	&.fixed-min-height {
@@ -42,43 +44,82 @@
 			.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
+	.v-data-table-progress th {
+		position: sticky;
+		top: 0;
+		z-index: var(--sy-table-z-progress);
+	}
+}
+
+@mixin clickable-row-styles {
+	.v-table tbody > tr.sy-table__clickable-row,
+	.v-data-table__tbody > tr.sy-table__clickable-row {
+		cursor: pointer !important;
+		outline-offset: -2px;
+	}
+
+	.v-table tbody > tr.sy-table__clickable-row:focus-visible,
+	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible {
+		outline: 2px solid rgb(var(--v-theme-primary));
+	}
+
+	.v-table tbody > tr.sy-table__clickable-row > td,
+	.v-table tbody > tr.sy-table__clickable-row > .v-data-table__td,
+	.v-data-table__tbody > tr.sy-table__clickable-row > td,
+	.v-data-table__tbody > tr.sy-table__clickable-row > .v-data-table__td {
+		cursor: pointer !important;
+		transition: background-color 0.15s ease;
+	}
+
+	.v-table tbody > tr.sy-table__clickable-row:hover > td,
+	.v-table tbody > tr.sy-table__clickable-row:hover > .v-data-table__td,
+	.v-table tbody > tr.sy-table__clickable-row:focus-visible > td,
+	.v-table tbody > tr.sy-table__clickable-row:focus-visible > .v-data-table__td,
+	.v-data-table__tbody > tr.sy-table__clickable-row:hover > td,
+	.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(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: {