@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -1,22 +1,26 @@
 <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 { VDataTableServer } from 'vuetify/components'
 	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 	import SyTableFilter from '../common/SyTableFilter.vue'
 	import TableHeader from '../common/TableHeader.vue'
 	import SyTablePagination from '../common/SyTablePagination.vue'
 	import { locales } from '../common/locales'
+	import OrganizeColumns from '../common/organizeColumns/OrganizeColumns.vue'
 	import { useTableProps } from '../common/tableProps'
 	import type { DataOptions, Items, SyServerTableProps } from '../common/types'
 	import { useTableFilter } from '../common/useTableFilter'
 	import { usePagination } from '../common/usePagination'
 	import { useTableOptions } from '../common/useTableOptions'
 	import { useTableHeaders } from '../common/useTableHeaders'
-	import OrganizeColumns from '../common/organizeColumns/OrganizeColumns.vue'
 	import { useTableCheckbox } from '../common/useTableCheckbox'
 	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<SyServerTableProps>(), {
 		caption: '',
@@ -31,12 +35,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: () => ({}),
@@ -60,7 +70,7 @@
 	const componentAttributes = useAttrs()
 
 	// Generate a unique ID for this table instance
-	const uniqueTableId = ref(`sy-server-table-${Math.random().toString(36).substr(2, 9)}`)
+	const uniqueTableId = ref(`sy-server-table-${Math.random().toString(36).substring(2, 11)}`)
 
 	const { storedOptions, storeOptions } = useStoredOptions({
 		key: computed(() => props.suffix ? `server-table-${props.suffix}` : 'server-table'),
@@ -76,6 +86,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,
 	})
@@ -87,42 +107,11 @@
 		filterInputConfig: props.filterInputConfig,
 	})
 
-	// Use the pagination composable with displayedItemsLength (stable during refetch)
-	const itemsLength = computed(() => displayedItemsLength.value)
-	const { page, pageCount, itemsPerPageValue, updateItemsPerPage, isUpdatingItemsPerPage } = usePagination({
-		options,
-		itemsLength,
-	})
-
-	// 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)
-	}
-
-	// Create a computed property for items to ensure reactivity
-	// Bind to displayedItems so it is always an array
-	const tableItems = computed<Items>(() => displayedItems.value)
-
 	// Keep last non-undefined items to avoid clearing the table during refetches
 	const lastNonUndefinedItems = ref<Items>([])
-	const isRefetching = ref(false)
 	watch(() => props.items, (newVal) => {
 		if (Array.isArray(newVal)) {
 			lastNonUndefinedItems.value = newVal
-			isRefetching.value = false
-		}
-		else if (newVal === undefined) {
-			// Parent temporarily cleared items
-			isRefetching.value = true
 		}
 	}, { immediate: true })
 
@@ -130,74 +119,28 @@
 		return Array.isArray(props.items) ? props.items : lastNonUndefinedItems.value
 	})
 
-	// Keep last non-undefined server items length as well
+	// Keep last non-undefined server items length as well (stable during refetch)
 	const lastNonUndefinedLength = ref<number>(0)
 	watch([() => props.items, () => props.serverItemsLength], ([itemsVal, lenVal]) => {
-		// Update cached length only when we have a valid items array
 		if (Array.isArray(itemsVal) && typeof lenVal === 'number') {
 			lastNonUndefinedLength.value = lenVal
-			isRefetching.value = false
-		}
-		else if (!Array.isArray(itemsVal)) {
-			isRefetching.value = true
 		}
 	}, { immediate: true })
 
 	const displayedItemsLength = computed<number>(() => {
-		// If current items are an array, use current prop length; otherwise, keep last known length
 		return Array.isArray(props.items)
 			? (typeof props.serverItemsLength === 'number' ? props.serverItemsLength : lastNonUndefinedLength.value)
 			: lastNonUndefinedLength.value
 	})
 
-	// 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)
-		})
-	}
-
-	// Watch for changes that might affect the table and update accessibility
-	watch(() => props.items, accessibilityRowCheckboxes, { deep: true })
-	watch(() => displayedItemsLength.value, accessibilityRowCheckboxes)
-	watch(() => page.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 = []
+	const { page, pageCount, itemsPerPageValue, updateItemsPerPage, onUpdateOptions } = usePagination({
+		options,
+		itemsLength: displayedItemsLength,
+		updateOptions,
 	})
 
 	const { getItemValue, toggleAllRows } = useTableCheckbox({
-		items: tableItems,
+		items: displayedItems,
 		modelValue: model,
 		updateModelValue: (value) => {
 			if (props.showSelectSingle && Array.isArray(value)) {
@@ -218,8 +161,8 @@
 		setupAria,
 	} = useTableAria({
 		table,
-		items: computed(() => displayedItems.value),
-		totalItemsCount: itemsLength,
+		items: displayedItems,
+		totalItemsCount: displayedItemsLength,
 		options,
 		uniqueTableId: uniqueTableId.value,
 	})
@@ -228,9 +171,41 @@
 
 	setupAccessibility()
 
+	const { accessibilityRowCheckboxes } = useTableRowCheckboxAccessibility({
+		uniqueTableId: uniqueTableId.value,
+	})
+
+	// Watch for changes that might affect the table and update accessibility
+	watch(() => props.items, accessibilityRowCheckboxes, { deep: true })
+	watch(() => displayedItemsLength.value, accessibilityRowCheckboxes)
+	watch(() => page.value, accessibilityRowCheckboxes)
+	watch(() => itemsPerPageValue.value, accessibilityRowCheckboxes)
+
+	onMounted(() => {
+		setupAria()
+	})
+
 	// 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) => {
@@ -260,7 +235,17 @@
 <template>
 	<div
 		:id="uniqueTableId"
-		:class="['sy-server-table', { 'sy-server-table--striped': props.striped }]"
+		:class="[
+			'sy-server-table',
+			{
+				'sy-server-table--striped': props.striped,
+				'sy-server-table--pinned-left-shadow': showPinnedLeftShadow,
+				'sy-server-table--pinned-right-shadow': showPinnedRightShadow,
+				'sy-server-table--pinned-select-left': hasPinnedSelectLeft,
+				'sy-server-table--select-single': props.showSelectSingle,
+			},
+		]"
+		:style="pinnedEdgeVars"
 	>
 		<!-- ARIA status region for row count announcements -->
 		<div
@@ -275,7 +260,8 @@
 			ref="table"
 			v-bind="propsFacade"
 			v-model="model"
-			:headers="displayHeaders"
+			:headers="displayHeadersWithPinned"
+			:row-props="clickableRowProps"
 			color="primary"
 			:items="displayedItems"
 			:items-length="displayedItemsLength || 0"
@@ -306,11 +292,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">
@@ -487,6 +487,7 @@
 
 .sy-server-table :deep() {
 	@include tablestyles;
+	@include clickable-row-styles;
 }
 
 @mixin striped-rows {
@@ -502,4 +503,60 @@
 .checkbox-column {
 	max-width: fit-content;
 }
+
+.sy-server-table :deep(.sy-table__pinned) {
+	box-shadow: none;
+	opacity: 1 !important;
+}
+
+.sy-server-table--pinned-left-shadow :deep(.sy-table__pinned--left) {
+	box-shadow: 2px 0 6px -4px rgba(tokens.$grey-base, 0.6);
+}
+
+.sy-server-table--pinned-right-shadow :deep(.sy-table__pinned--right) {
+	box-shadow: -2px 0 6px -4px rgba(tokens.$grey-base, 0.6);
+}
+
+.sy-server-table--pinned-select-left :deep(.v-data-table__th--select),
+.sy-server-table--pinned-select-left :deep(.v-data-table__td--select-row) {
+	opacity: 1 !important;
+}
+
+.sy-server-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-server-table--select-single.sy-server-table--pinned-select-left :deep(.v-data-table__th--select) {
+	box-shadow: none !important;
+	background: transparent !important;
+}
+
+/* stylelint-disable @stylistic/max-line-length */
+.sy-server-table--select-single.sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-table__wrapper > table > thead > tr > th:first-child) {
+	box-shadow: none !important;
+	background: transparent !important;
+}
+
+.sy-server-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > td:first-child),
+.sy-server-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
+.sy-server-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-server-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-server-table--pinned-left-shadow.sy-server-table--pinned-select-left:not(.sy-server-table--select-single) :deep(.v-data-table__th--select),
+.sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > td:first-child),
+.sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
+.sy-server-table--pinned-left-shadow.sy-server-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-server-table--pinned-left-shadow.sy-server-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/SyServerTable/tests/SyServerTable.a11y.spec.ts

@@ -0,0 +1,58 @@
+// @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 SyServerTable from '../SyServerTable.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('SyServerTable - 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(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: items.length,
+				suffix: 'a11y-clickable-row-test',
+				clickableRow: true,
+				showSelect: true,
+				headers,
+				items,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyServerTable - clickableRow', {
+			ignoreRules: ['region', 'aria-allowed-attr', 'aria-prohibited-attr', 'label'],
+		})
+	})
+})

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

@@ -156,6 +156,128 @@ describe('SyServerTable', () => {
 		expect(wrapper.text()).toContain('John Doe')
 	})
 
+	it('applies sticky styles for pinnedColumns (left/right) including data-table-select', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5, page: 1 } as DataOptions,
+				serverItemsLength: 10,
+				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 flushPromises()
+
+		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)
+
+		activeWrappers.push(wrapper)
+	})
+
+	it('makes selection column sticky when stickySelect is true', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5, page: 1 } as DataOptions,
+				serverItemsLength: 10,
+				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 flushPromises()
+
+		expect(wrapper.classes()).toContain('sy-server-table--pinned-select-left')
+
+		activeWrappers.push(wrapper)
+	})
+
+	it('makes rows clickable and emits row-click events', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: fakeItems.length,
+				suffix: 'clickable-row-test',
+				clickableRow: true,
+				headers,
+				items: fakeItems,
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		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]]])
+
+		activeWrappers.push(wrapper)
+	})
+
+	it('does not emit row-click when an interactive element inside the row is clicked', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: fakeItems.length,
+				suffix: 'clickable-row-nested-interactive-test',
+				clickableRow: true,
+				showSelect: true,
+				headers,
+				items: fakeItems,
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		const nestedCheckbox = wrapper.find('tbody .v-selection-control input')
+
+		expect(nestedCheckbox.exists()).toBe(true)
+
+		await nestedCheckbox.trigger('click')
+
+		expect(wrapper.emitted('row-click')).toBeUndefined()
+
+		activeWrappers.push(wrapper)
+	})
+
 	it('stores the options in local storage', async () => {
 		const setItemMock = vi.spyOn(LocalStorageUtility.prototype, 'setItem')
 

package/src/components/Tables/SyTable/SyTable.mdx

@@ -60,6 +60,31 @@ Exemple d'utilisation :
 />
 `}/>
 
+### Click des lignes
+
+La prop `clickableRow` active le clic sur toute la ligne du tableau. Quand cette prop vaut `true`, un clic sur une ligne émet l'événement `row-click` avec l'item correspondant.
+
+Les lignes deviennent également focusables au clavier afin de pouvoir être activées avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>.
+
+Les éléments interactifs déjà présents dans la ligne, comme les cases à cocher, liens ou boutons, conservent leur comportement propre et ne déclenchent pas `row-click`.
+
+L'événement `row-click` est émis lorsqu'une ligne est activée alors que `clickableRow` est à `true`.
+
+- Payload : l'objet de la ligne cliquée
+- Cas pris en charge : clic souris sur la ligne, activation clavier via <kbd>Entrée</kbd> ou <kbd>Espace</kbd>
+- Cas exclus : interaction avec un élément interactif imbriqué dans la ligne
+
+Exemple :
+<Source dark code={`
+<SyTable
+  :items="items"
+  :headers="headers"
+  clickable-row
+  @row-click="handleRowClick"
+/>
+`}/>
+
+
 ### Slot item
 Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.