@cnamts/synapse 1.0.23 → 1.0.25

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: {
@@ -784,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

@@ -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>
@@ -277,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>