@cnamts/synapse 1.0.23 → 1.0.25

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,8 +232,8 @@
 		>
 			<div
 				class="col-title"
-				:class="[textAlignClass, headerClassRaw]"
-				:style="[{ width: '100%' }, headerStyle]"
+				:class="titleClasses"
+				:style="headerStyle"
 			>
 				{{ column.title }}
 			</div>
@@ -266,6 +282,31 @@
 </template>
 
 <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 {
 	font-size: 0.75rem;
 	font-weight: bold;

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

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import type { FilterOption, TableColumnHeader } from '../types'
+	import SyAutocomplete from '@/components/Customs/Selects/SyAutocomplete/SyAutocomplete.vue'
+
+	const props = defineProps({
+		header: {
+			type: Object as () => TableColumnHeader,
+			required: true,
+		},
+		filters: {
+			type: Array as () => FilterOption[],
+			default: () => [],
+		},
+		filterValue: {
+			type: [String, Number, Object, Array, undefined, null] as unknown as () => string | number | Record<string, unknown> | Array<string | number | Record<string, unknown>> | undefined | null,
+			default: null,
+		},
+		inputConfig: {
+			type: Object as () => {
+				disableErrorHandling?: boolean
+				variant?: string
+				hideDetails?: boolean
+				density?: 'default' | 'comfortable' | 'compact'
+				backgroundColor?: string
+				clearable?: boolean
+			},
+			default: () => ({}),
+		},
+		disableErrorHandling: {
+			type: Boolean,
+			default: false,
+		},
+		variant: {
+			type: String,
+			default: 'outlined',
+		},
+		hideDetails: {
+			type: Boolean,
+			default: true,
+		},
+		density: {
+			type: String as () => 'default' | 'comfortable' | 'compact',
+			default: 'compact',
+		},
+		backgroundColor: {
+			type: String,
+			default: 'white',
+		},
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+	})
+
+	const emit = defineEmits(['update:filters'])
+
+	function generateUniqueKey() {
+		return String(props.header.key || props.header.value || (props.header.title ? `filter_${props.header.title}` : `filter_${Date.now()}`))
+	}
+
+	const filterItems = computed(() => {
+		if (!props.header.filterOptions || !Array.isArray(props.header.filterOptions)) {
+			return []
+		}
+		return props.header.filterOptions
+	})
+
+	const modelValue = computed({
+		get: () => {
+			if (props.filterValue === null || props.filterValue === undefined) {
+				return props.header.multiple ? [] : null
+			}
+			return props.filterValue
+		},
+		set: (newValue) => {
+			const key = generateUniqueKey()
+			if (!key) return
+
+			if (props.header.multiple) {
+				if (!newValue || (Array.isArray(newValue) && newValue.length === 0)) {
+					const newFilters = props.filters.filter(f => f.key !== key)
+					emit('update:filters', newFilters)
+					return
+				}
+
+				const existingFilterIndex = props.filters.findIndex(f => f.key === key)
+				const newFilters = [...props.filters]
+
+				if (existingFilterIndex >= 0) {
+					newFilters[existingFilterIndex]!.value = newValue as string | number | Date | Array<string | number | Date> | Record<string, unknown> | null | undefined
+				}
+				else {
+					newFilters.push({
+						key,
+						value: newValue as string | number | Date | Array<string | number | Date> | Record<string, unknown> | null | undefined,
+						type: 'autocomplete',
+					})
+				}
+
+				emit('update:filters', newFilters)
+				return
+			}
+
+			if (newValue === undefined || newValue === null) {
+				const newFilters = props.filters.filter(f => f.key !== key)
+				emit('update:filters', newFilters)
+				return
+			}
+
+			const existingFilterIndex = props.filters.findIndex(f => f.key === key)
+			const newFilters = [...props.filters]
+
+			if (existingFilterIndex >= 0) {
+				newFilters[existingFilterIndex]!.value = newValue as string | number | Date | Array<string | number | Date> | Record<string, unknown> | null | undefined
+			}
+			else {
+				newFilters.push({
+					key,
+					value: newValue as string | number | Date | Array<string | number | Date> | Record<string, unknown> | null | undefined,
+					type: 'autocomplete',
+				})
+			}
+
+			emit('update:filters', newFilters)
+		},
+	})
+
+	function handleClear() {
+		const key = generateUniqueKey()
+		const newFilters = props.filters.filter(f => f.key !== key)
+		emit('update:filters', newFilters)
+	}
+</script>
+
+<template>
+	<SyAutocomplete
+		v-model="modelValue"
+		:label="props.header.title || ''"
+		:items="filterItems"
+		:clearable="clearable"
+		:density="inputConfig?.density ?? density"
+		:hide-details="inputConfig?.hideDetails ?? hideDetails"
+		:variant-style="inputConfig?.variant ?? variant"
+		:bg-color="inputConfig?.backgroundColor ?? backgroundColor"
+		:disable-error-handling="inputConfig?.disableErrorHandling ?? disableErrorHandling"
+		:multiple="props.header.multiple"
+		:chips="props.header.chips"
+		:filter="true"
+		class="filter-input"
+		:aria-label="props.header.title || 'Filtre'"
+		@click:clear="handleClear"
+	/>
+</template>
+
+<style lang="scss" scoped>
+.filter-input {
+	width: 100%;
+}
+</style>

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

@@ -203,7 +203,7 @@
 	<div class="number-filter-container">
 		<SyTextField
 			v-model="modelValue"
-			:label="header.title"
+			:label="header.title || ''"
 			type="text"
 			:clearable="inputConfig?.clearable ?? clearable"
 			:density="inputConfig?.density ?? density"

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

@@ -62,15 +62,15 @@
 		return String(props.header.key || props.header.value || (props.header.title ? `filter_${props.header.title}` : `filter_${Date.now()}`))
 	}
 
-	// Ajouter l'option "- choisir -" et gérer les valeurs vides
+	// Gérer les valeurs vides dans les options
 	const filterOptions = computed(() => {
 		if (!props.header.filterOptions || !Array.isArray(props.header.filterOptions)) {
-			return [{ text: locales.defaultOption, value: locales.defaultOption }]
+			return []
 		}
 
 		// Définir le type des options pour accepter null et unknown
 		type FilterOptionValue = { text: string, value: unknown | null }
-		const options: FilterOptionValue[] = [{ text: locales.defaultOption, value: locales.defaultOption }]
+		const options: FilterOptionValue[] = []
 
 		// Traiter les options existantes et remplacer les valeurs vides par "(vide)"
 		props.header.filterOptions.forEach((option) => {
@@ -87,8 +87,8 @@
 
 	const modelValue = computed({
 		get: () => {
-			if (props.filterValue === null) {
-				return props.header.multiple ? [] : locales.defaultOption
+			if (props.filterValue === null || props.filterValue === undefined) {
+				return props.header.multiple ? [] : null
 			}
 			return props.filterValue
 		},
@@ -125,9 +125,9 @@
 				return
 			}
 
-			// Pour la sélection simple (comportement existant)
-			if (newValue === undefined || newValue === null || newValue === locales.defaultOption) {
-				// Effacer le filtre si la valeur est vide ou "-choisir-"
+			// Pour la sélection simple
+			if (newValue === undefined || newValue === null) {
+				// Effacer le filtre si la valeur est vide
 				const newFilters = props.filters.filter(f => f.key !== key)
 				emit('update:filters', newFilters)
 				return
@@ -178,11 +178,10 @@
 		if (import.meta.env?.MODE === 'test' || import.meta.env?.NODE_ENV === 'test') {
 			return true
 		}
-		// En mode normal, cacher le bouton quand l'option par défaut est sélectionnée
 		if (props.header.multiple) {
 			return Array.isArray(modelValue.value) && modelValue.value.length > 0
 		}
-		return modelValue.value !== locales.defaultOption
+		return modelValue.value !== null
 	})
 </script>
 
@@ -200,7 +199,7 @@
 			:variant="inputConfig?.variant ?? variant"
 			:bg-color="inputConfig?.backgroundColor ?? backgroundColor"
 			:disable-error-handling="inputConfig?.disableErrorHandling ?? disableErrorHandling"
-			:multiple="props.header.multiple"
+			:multiple="props.header.multiple === true"
 			:chips="props.header.chips"
 			class="filter-input"
 			:aria-label="props.header.title || 'Filtre'"
@@ -226,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/filters/TextFilter.vue

@@ -161,7 +161,7 @@
 	<div class="text-filter-container">
 		<SyTextField
 			v-model="modelValue"
-			:label="header.title"
+			:label="header.title || ''"
 			:clearable="inputConfig?.clearable ?? clearable"
 			:density="inputConfig?.density ?? density"
 			:hide-details="inputConfig?.hideDetails ?? hideDetails"

package/src/components/Tables/common/filters/getFilterComponent.ts

@@ -6,7 +6,10 @@ export default function getFilterComponent(filterType?: string, filterOptions?:
 	// Déterminer le type de composant à charger
 	let componentType = 'text'
 
-	if (filterType === 'select' || filterOptions) {
+	if (filterType === 'autocomplete') {
+		componentType = 'autocomplete'
+	}
+	else if (filterType === 'select' || filterOptions) {
 		componentType = 'select'
 	}
 	else if (filterType === 'date') {
@@ -27,6 +30,10 @@ export default function getFilterComponent(filterType?: string, filterOptions?:
 	// Sinon, charger le composant de manière asynchrone
 	let asyncComponent
 	switch (componentType) {
+		case 'autocomplete':
+			asyncComponent = markRaw(defineAsyncComponent(() => import('./AutocompleteFilter.vue')))
+			Object.defineProperty(asyncComponent, 'name', { value: 'AutocompleteFilter' })
+			break
 		case 'select':
 			asyncComponent = markRaw(defineAsyncComponent(() => import('./SelectFilter.vue')))
 			Object.defineProperty(asyncComponent, 'name', { value: 'SelectFilter' })

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

@@ -1,4 +1,3 @@
 export const locales = {
-	defaultOption: '- choisir -',
 	emptyValue: '(vide)',
 }

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

@@ -0,0 +1,110 @@
+// @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 AutocompleteFilter from '../AutocompleteFilter.vue'
+
+// Stub accessible : un <input> avec un <label> associé représente
+// le champ de saisie de l'autocomplete de façon évaluable par axe.
+const accessibleSyAutocompleteStub = {
+	template: `
+		<div>
+			<label :for="inputId">{{ label }}</label>
+			<input
+				:id="inputId"
+				type="text"
+				role="combobox"
+				:aria-label="label"
+				:aria-expanded="false"
+				aria-autocomplete="list"
+				v-bind="$attrs"
+			/>
+		</div>
+	`,
+	props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails',
+		'disableErrorHandling', 'variantStyle', 'bgColor', 'multiple', 'chips', 'filter'],
+	emits: ['update:modelValue', 'click:clear'],
+	setup() {
+		const inputId = `autocomplete-stub-${Math.random().toString(36).slice(2)}`
+		return { inputId }
+	},
+}
+
+const baseHeader = {
+	title: 'Statut',
+	key: 'status',
+	filterOptions: [
+		{ text: 'Actif', value: 'Actif' },
+		{ text: 'En congé', value: 'En congé' },
+		{ text: 'Inactif', value: 'Inactif' },
+	],
+}
+
+afterEach(() => {
+	document.body.innerHTML = ''
+})
+
+describe('AutocompleteFilter – accessibilité (axe)', () => {
+	it('has no axe violations in default (single) state', async () => {
+		const wrapper = mount(AutocompleteFilter, {
+			attachTo: document.body,
+			global: { stubs: { SyAutocomplete: accessibleSyAutocompleteStub } },
+			props: {
+				header: baseHeader,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'AutocompleteFilter – single, empty', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations when a value is selected', async () => {
+		const wrapper = mount(AutocompleteFilter, {
+			attachTo: document.body,
+			global: { stubs: { SyAutocomplete: accessibleSyAutocompleteStub } },
+			props: {
+				header: baseHeader,
+				filters: [{ key: 'status', value: 'Actif', type: 'autocomplete' }],
+				filterValue: 'Actif',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'AutocompleteFilter – single, with value', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations in multiple selection state', async () => {
+		const wrapper = mount(AutocompleteFilter, {
+			attachTo: document.body,
+			global: { stubs: { SyAutocomplete: accessibleSyAutocompleteStub } },
+			props: {
+				header: { ...baseHeader, multiple: true, chips: true },
+				filters: [],
+				filterValue: [],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'AutocompleteFilter – multiple, empty', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations when header has no title (falls back to aria-label "Filtre")', async () => {
+		const wrapper = mount(AutocompleteFilter, {
+			attachTo: document.body,
+			global: { stubs: { SyAutocomplete: accessibleSyAutocompleteStub } },
+			props: {
+				header: { key: 'status', filterOptions: baseHeader.filterOptions },
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'AutocompleteFilter – no title', { ignoreRules: ['region'] })
+	})
+})