@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, nextTick, onMounted, onUnmounted, provide, ref, toRef, useAttrs, watch } from 'vue'
+	import { computed, onMounted, provide, ref, toRef, useAttrs, watch } from 'vue'
 	import type { VDataTable } from 'vuetify/components'
 	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 	import SyTableFilter from '../common/SyTableFilter.vue'
@@ -18,6 +18,10 @@
 	import { useTableAria } from '../common/useTableAria'
 	import { useTableAccessibility } from '../common/tableAccessibilityUtils'
 	import useStoredOptions from '../common/useStoredOptions'
+	import { usePinnedColumns } from '../common/usePinnedColumns'
+	import { useClickableTableRow } from '../common/useClickableTableRow'
+	import { useTableRowCheckboxAccessibility } from '../common/useTableRowCheckboxAccessibility'
+	import type { ClickableTableRowPropsInput } from '../common/useClickableTableRow'
 
 	const props = withDefaults(defineProps<SyTableProps>(), {
 		caption: '',
@@ -30,12 +34,18 @@
 		striped: false,
 		showSelect: false,
 		showSelectSingle: false,
+		stickySelect: false,
 		multiSort: false,
 		mustSort: false,
 		itemsPerPageOptions: undefined,
 		headingLevel: 2,
+		clickableRow: false,
 	})
 
+	const emit = defineEmits<{
+		'row-click': [item: Record<string, unknown>]
+	}>()
+
 	const options = defineModel<Partial<DataOptions>>('options', {
 		required: false,
 		default: () => ({}),
@@ -59,7 +69,7 @@
 	const componentAttributes = useAttrs()
 
 	// Generate a unique ID for this table instance
-	const uniqueTableId = ref(`sy-table-${Math.random().toString(36).substr(2, 9)}`)
+	const uniqueTableId = ref(`sy-table-${Math.random().toString(36).substring(2, 11)}`)
 
 	const { storedOptions, storeOptions } = useStoredOptions({
 		key: computed(() => props.suffix ? `table-${props.suffix}` : 'table'),
@@ -75,6 +85,16 @@
 		storedOptions: storedOptions.options,
 	})
 
+	const forwardedRowProps = computed<ClickableTableRowPropsInput>(() => {
+		return (propsFacade.value.rowProps ?? propsFacade.value['row-props']) as ClickableTableRowPropsInput
+	})
+
+	const { clickableRowProps } = useClickableTableRow({
+		clickableRow: toRef(props, 'clickableRow'),
+		rowProps: forwardedRowProps,
+		onRowClick: item => emit('row-click', item),
+	})
+
 	const { setupAccessibility } = useTableAccessibility({
 		tableId: uniqueTableId.value,
 	})
@@ -96,25 +116,12 @@
 
 	// Use the pagination composable
 	const itemsLength = computed(() => filteredItems.value.length)
-	const { page, pageCount, itemsPerPageValue, updateItemsPerPage, isUpdatingItemsPerPage } = usePagination({
+	const { page, pageCount, itemsPerPageValue, updateItemsPerPage, onUpdateOptions } = usePagination({
 		options,
 		itemsLength,
+		updateOptions,
 	})
 
-	// Defines a function to handle updating the data table options
-	function onUpdateOptions(newOptions: Partial<DataOptions>) {
-		if (isUpdatingItemsPerPage.value && typeof newOptions.itemsPerPage !== 'undefined') {
-			// Creates a copy of the received options
-			const rest = { ...newOptions }
-			delete (rest as Record<string, unknown>).itemsPerPage
-			// Updates the other options without modifying itemsPerPage
-			updateOptions(rest)
-			return
-		}
-		// In all other cases, simply updates the options with the new values
-		updateOptions(newOptions)
-	}
-
 	// Use the table checkbox composable
 	const { toggleAllRows, getItemValue } = useTableCheckbox({
 		items: filteredItems,
@@ -147,55 +154,41 @@
 	// Initialize generic accessibility adjustments (tabbable elements, etc.)
 	setupAccessibility()
 
-	// Timeout management for cleanup
-	const timeouts = ref<ReturnType<typeof setTimeout>[]>([])
-
-	// Function to add accessibility attributes to row checkboxes
-	const accessibilityRowCheckboxes = () => {
-		nextTick(() => {
-			const timeoutId = setTimeout(() => {
-				// Check if document is available (for test environment)
-				if (typeof document === 'undefined') return
-
-				const tableElement = document.getElementById(uniqueTableId.value)
-				if (!tableElement) return
-
-				// Find all row checkboxes
-				const rowCheckboxes = tableElement.querySelectorAll('td .v-selection-control input[type="checkbox"]')
-				rowCheckboxes.forEach((checkbox, index) => {
-					const rowLabel = `${locales.selectRow} ${index + 1}`
-					checkbox.setAttribute('aria-label', rowLabel)
-					checkbox.setAttribute('title', rowLabel)
-				})
-			}, 100) // Small delay to ensure DOM is updated
-
-			// Track timeout for cleanup
-			timeouts.value.push(timeoutId)
-		})
-	}
+	const { accessibilityRowCheckboxes } = useTableRowCheckboxAccessibility({
+		uniqueTableId: uniqueTableId.value,
+	})
 
 	// Watch for changes that might affect the table and update accessibility
 	watch(() => props.items, accessibilityRowCheckboxes, { deep: true })
 	watch(() => filteredItems.value, accessibilityRowCheckboxes)
 	watch(() => page.value, accessibilityRowCheckboxes)
+	watch(() => itemsPerPageValue.value, accessibilityRowCheckboxes)
 
-	// Apply accessibility attributes when component is mounted
 	onMounted(() => {
-		accessibilityRowCheckboxes()
 		setupAria()
 	})
 
-	// Clean up timeouts on unmount to prevent unhandled errors
-	onUnmounted(() => {
-		timeouts.value.forEach((timeoutId) => {
-			clearTimeout(timeoutId)
-		})
-		timeouts.value = []
-	})
-
 	// Create a reactive reference to column widths that will be provided to children
 	const reactiveColumnWidths = ref(storedOptions.columnWidths || {})
 
+	const {
+		showPinnedLeftShadow,
+		showPinnedRightShadow,
+		hasPinnedSelectLeft,
+		pinnedMeta,
+		pinnedEdgeVars,
+		displayHeadersWithPinned,
+	} = usePinnedColumns({
+		displayHeaders,
+		reactiveColumnWidths,
+		pinnedColumns: toRef(props, 'pinnedColumns'),
+		pinnedColumnKey: toRef(props, 'pinnedColumnKey'),
+		stickySelect: toRef(props, 'stickySelect'),
+		showSelect: toRef(props, 'showSelect'),
+		showSelectSingle: toRef(props, 'showSelectSingle'),
+		tableRef: table,
+	})
+
 	// Provide column widths and update function to child components
 	provide('columnWidths', reactiveColumnWidths)
 	provide('updateColumnWidth', (key: string, width: number | string) => {
@@ -224,7 +217,17 @@
 <template>
 	<div
 		:id="uniqueTableId"
-		:class="['sy-table', { 'sy-table--striped': props.striped }]"
+		:class="[
+			'sy-table',
+			{
+				'sy-table--striped': props.striped,
+				'sy-table--pinned-left-shadow': showPinnedLeftShadow,
+				'sy-table--pinned-right-shadow': showPinnedRightShadow,
+				'sy-table--pinned-select-left': hasPinnedSelectLeft,
+				'sy-table--select-single': props.showSelectSingle,
+			},
+		]"
+		:style="pinnedEdgeVars"
 	>
 		<!-- ARIA status region for row count announcements -->
 		<div
@@ -239,8 +242,9 @@
 			ref="table"
 			v-model="model"
 			color="primary"
-			:headers="displayHeaders"
+			:headers="displayHeadersWithPinned"
 			v-bind="propsFacade"
+			:row-props="clickableRowProps"
 			:items="filteredItems"
 			:density="props.density"
 			:show-select="props.showSelect || props.showSelectSingle"
@@ -269,11 +273,25 @@
 							:key="column.key!"
 						>
 							<th
-								:class="{ 'checkbox-column': column.key === 'data-table-select' }"
+								:class="[
+									{ 'checkbox-column': column.key === 'data-table-select' },
+									{
+										'sy-table__pinned': pinnedMeta.left[column.key!] !== undefined || pinnedMeta.right[column.key!] !== undefined,
+										'sy-table__pinned--left': pinnedMeta.left[column.key!] !== undefined,
+										'sy-table__pinned--right': pinnedMeta.right[column.key!] !== undefined,
+										'v-data-table-column--fixed': pinnedMeta.left[column.key!] !== undefined || pinnedMeta.right[column.key!] !== undefined,
+									},
+								]"
 								:style="{
 									...(getHeaderForColumn(column)?.maxWidth ? { maxWidth: getHeaderForColumn(column)?.maxWidth as any } : {}),
 									...(getHeaderForColumn(column)?.minWidth ? { minWidth: getHeaderForColumn(column)?.minWidth as any } : {}),
 									...(getHeaderForColumn(column)?.width ? { width: getHeaderForColumn(column)?.width as any } : {}),
+									...(pinnedMeta.left[column.key!] !== undefined
+										? { position: 'sticky', left: `${pinnedMeta.left[column.key!] }px`, zIndex: 'var(--sy-table-z-pinned-header)', background: 'var(--sy-table-header-bg-pinned)' }
+										: {}),
+									...(pinnedMeta.right[column.key!] !== undefined
+										? { position: 'sticky', right: `${pinnedMeta.right[column.key!] }px`, zIndex: 'var(--sy-table-z-pinned-header)', background: 'var(--sy-table-header-bg-pinned)' }
+										: {}),
 								}"
 							>
 								<template v-if="column.key === 'data-table-select' && props.showSelect && !props.showSelectSingle">
@@ -459,6 +477,7 @@
 
 .sy-table :deep() {
 	@include tablestyles;
+	@include clickable-row-styles;
 }
 
 @mixin striped-rows {
@@ -475,4 +494,59 @@
 	max-width: fit-content;
 }
 
+.sy-table :deep(.sy-table__pinned) {
+	box-shadow: none;
+	opacity: 1 !important;
+}
+
+.sy-table--pinned-left-shadow :deep(.sy-table__pinned--left) {
+	box-shadow: 2px 0 6px -4px rgba(tokens.$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);
+}
+
+.sy-table--pinned-select-left :deep(.v-data-table__th--select),
+.sy-table--pinned-select-left :deep(.v-data-table__td--select-row) {
+	opacity: 1 !important;
+}
+
+.sy-table--pinned-select-left :deep(.v-data-table__th--select) {
+	position: sticky;
+	left: 0;
+	z-index: 5;
+	background: var(--sy-table-header-bg-pinned);
+}
+
+.sy-table--select-single.sy-table--pinned-select-left :deep(.v-data-table__th--select) {
+	box-shadow: none !important;
+	background: transparent !important;
+}
+
+/* stylelint-disable @stylistic/max-line-length */
+.sy-table--select-single.sy-table--pinned-left-shadow.sy-table--pinned-select-left :deep(.v-table__wrapper > table > thead > tr > th:first-child) {
+	box-shadow: none !important;
+	background: transparent !important;
+}
+
+.sy-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > td:first-child),
+.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-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-select-left :deep(.v-data-table__tbody tr:not(.v-data-table-rows-loading) > td:first-child) {
+	position: sticky !important;
+	left: 0 !important;
+	z-index: 3;
+	background: rgb(var(--v-theme-surface)) !important;
+}
+
+.sy-table--pinned-left-shadow.sy-table--pinned-select-left:not(.sy-table--select-single) :deep(.v-data-table__th--select),
+.sy-table--pinned-left-shadow.sy-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > td:first-child),
+.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);
+}
+/* stylelint-enable @stylistic/max-line-length */
+
 </style>

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

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+
+import { beforeAll, describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import type { DataOptions } from '@/components/Tables/common/types'
+import SyTable from '../SyTable.vue'
+
+const items = [
+	{ id: 1, name: 'John Doe', age: 25 },
+	{ id: 2, name: 'Jane Doe', age: 30 },
+]
+
+const headers = [
+	{ title: 'ID', key: 'id' },
+	{ title: 'Name', key: 'name' },
+	{ title: 'Age', key: 'age' },
+]
+
+describe('SyTable - accessibility (axe)', () => {
+	beforeAll(() => {
+		global.visualViewport = {
+			width: 1024,
+			height: 768,
+			scale: 1,
+			offsetLeft: 0,
+			offsetTop: 0,
+			pageLeft: 0,
+			pageTop: 0,
+			onresize: null,
+			onscroll: null,
+			addEventListener: () => {},
+			removeEventListener: () => {},
+			dispatchEvent: () => true,
+		}
+	})
+
+	it('has no obvious axe violations when rows are clickable and contain nested actions', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: {} as DataOptions,
+				suffix: 'a11y-clickable-row-test',
+				clickableRow: true,
+				showSelect: true,
+				headers,
+				items,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTable - clickableRow', {
+			ignoreRules: ['region', 'aria-allowed-attr', 'aria-prohibited-attr', 'label'],
+		})
+	})
+})

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

@@ -191,6 +191,57 @@ describe('SyTable', () => {
 		expect(dataTable.props('itemsPerPage')).toBe(5)
 	})
 
+	it('makes rows clickable and emits row-click events', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: {} as DataOptions,
+				suffix: 'clickable-row-test',
+				clickableRow: true,
+				headers,
+				items: fakeItems,
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+
+		const firstRow = wrapper.find('tbody tr')
+
+		expect(firstRow.classes()).toContain('v-data-table__tr--clickable')
+		expect(firstRow.classes()).toContain('sy-table__clickable-row')
+		expect(firstRow.attributes('data-clickable-row')).toBe('true')
+		expect(firstRow.attributes('tabindex')).toBe('0')
+		expect(firstRow.attributes('role')).toBeUndefined()
+
+		await firstRow.trigger('click')
+
+		expect(wrapper.emitted('row-click')).toEqual([[fakeItems[0]]])
+	})
+
+	it('does not emit row-click when an interactive element inside the row is clicked', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: {} as DataOptions,
+				suffix: 'clickable-row-nested-interactive-test',
+				clickableRow: true,
+				showSelect: true,
+				headers,
+				items: fakeItems,
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+
+		const nestedCheckbox = wrapper.find('tbody .v-selection-control input')
+
+		expect(nestedCheckbox.exists()).toBe(true)
+
+		await nestedCheckbox.trigger('click')
+
+		expect(wrapper.emitted('row-click')).toBeUndefined()
+	})
+
 	it('should show filters when showFilters prop is true', async () => {
 		const wrapper = mount(SyTable, {
 			props: {
@@ -348,6 +399,41 @@ describe('SyTable', () => {
 		expect(wrapper.text()).toContain('No data available')
 	})
 
+	it('applies sticky styles for pinnedColumns (left/right) including data-table-select', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'pinned-columns-test',
+				showSelect: true,
+				pinnedColumns: [
+					'data-table-select',
+					{ key: 'name', side: 'left' },
+					{ key: 'age', side: 'right' },
+				],
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const pinnedTh = wrapper.findAll('th[style*="position: sticky"]')
+		expect(pinnedTh.length).toBeGreaterThan(0)
+		expect(pinnedTh.some(th => (th.attributes('style') || '').includes('left:'))).toBe(true)
+		expect(pinnedTh.some(th => (th.attributes('style') || '').includes('right:'))).toBe(true)
+		expect(pinnedTh.every(th => (th.attributes('style') || '').includes('background: var(--sy-table-header-bg-pinned)'))).toBe(true)
+
+		const pinnedTd = wrapper.findAll('tbody td[style*="position: sticky"]')
+		expect(pinnedTd.length).toBeGreaterThan(0)
+		expect(pinnedTd.some(td => (td.attributes('style') || '').includes('left:'))).toBe(true)
+		expect(pinnedTd.some(td => (td.attributes('style') || '').includes('right:'))).toBe(true)
+		expect(pinnedTd.every(td => (td.attributes('style') || '').includes('background: rgb(var(--v-theme-surface))'))).toBe(true)
+	})
+
 	it('enables selection when showSelect is true', async () => {
 		const wrapper = mount(SyTable, {
 			props: {
@@ -378,6 +464,28 @@ describe('SyTable', () => {
 		expect(dataTable.props('showSelect')).toBe(false)
 	})
 
+	it('makes selection column sticky when stickySelect is true', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'sticky-select-test',
+				showSelect: true,
+				stickySelect: true,
+				pinnedColumns: [{ key: 'age', side: 'right' }],
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		expect(wrapper.classes()).toContain('sy-table--pinned-select-left')
+	})
+
 	it('passes the correct item-value function to the data table', async () => {
 		const wrapper = mount(SyTable, {
 			props: {

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

@@ -62,12 +62,14 @@
 		date: Record<string, DateValue>
 		period: Record<string, { from: string | null, to: string | null }>
 		select: Record<string, string | number | Record<string, unknown> | undefined>
+		autocomplete: Record<string, string | number | Record<string, unknown> | Array<string | number | Record<string, unknown>> | undefined>
 	}>({
 		text: {},
 		number: {},
 		date: {},
 		period: {},
 		select: {},
+		autocomplete: {},
 	})
 
 	// Computed properties pour accéder aux différents types de filtres
@@ -76,6 +78,7 @@
 	const dateFilters = computed(() => filtersMap.value.date)
 	const periodFilters = computed(() => filtersMap.value.period)
 	const selectFilters = computed(() => filtersMap.value.select)
+	const autocompleteFilters = computed(() => filtersMap.value.autocomplete)
 
 	// Fonction pour traiter un filtre individuel
 	function processFilter(filter: FilterOption) {
@@ -110,6 +113,9 @@
 		case 'select':
 			filtersMap.value.select[key] = value !== null ? value as string | number | Record<string, unknown> : undefined
 			break
+		case 'autocomplete':
+			filtersMap.value.autocomplete[key] = value !== null ? value as string | number | Record<string, unknown> | Array<string | number | Record<string, unknown>> : undefined
+			break
 		}
 	}
 
@@ -123,6 +129,7 @@
 				date: {},
 				period: {},
 				select: {},
+				autocomplete: {},
 			}
 			return
 		}
@@ -146,7 +153,10 @@
 	function getFilterValue(header: TableColumnHeader) {
 		const key = String(header.key || header.value || '')
 
-		if (header.filterType === 'select' || header.filterOptions) {
+		if (header.filterType === 'autocomplete') {
+			return autocompleteFilters.value[key]
+		}
+		else if (header.filterType === 'select' || header.filterOptions) {
 			return selectFilters.value[key]
 		}
 		else if (header.filterType === 'date') {
@@ -167,7 +177,10 @@
 	function updateFilter(header: TableColumnHeader, value: unknown) {
 		const key = String(header.key || header.value || '')
 
-		if (header.filterType === 'select' || header.filterOptions) {
+		if (header.filterType === 'autocomplete') {
+			filtersMap.value.autocomplete[key] = value as string | number | Record<string, unknown> | Array<string | number | Record<string, unknown>> | undefined
+		}
+		else if (header.filterType === 'select' || header.filterOptions) {
 			filtersMap.value.select[key] = value as string | number | Record<string, unknown> | undefined
 		}
 		else if (header.filterType === 'date') {
@@ -229,6 +242,13 @@
 			}
 		})
 
+		// Ajouter les filtres autocomplete
+		Object.entries(filtersMap.value.autocomplete).forEach(([filterKey, filterValue]) => {
+			if (filterValue !== undefined && filterValue !== null && !(Array.isArray(filterValue) && filterValue.length === 0)) {
+				newFilters.push({ key: filterKey, value: filterValue, type: 'autocomplete' })
+			}
+		})
+
 		updateFilters(newFilters)
 	}
 </script>

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

@@ -217,7 +217,7 @@
 			<div
 				class="col-title"
 				:class="[textAlignClass, headerClassRaw]"
-				:style="[{ width: '100%' }, headerStyle]"
+				:style="headerStyle"
 			>
 				{{ column.title }}
 			</div>
@@ -266,6 +266,10 @@
 </template>
 
 <style lang="scss" scoped>
+.v-data-table-header__content {
+	column-gap: 4px;
+}
+
 .sort-order-indicator {
 	font-size: 0.75rem;
 	font-weight: bold;