@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/Tables/common/tests/TableHeader.spec.ts

@@ -135,6 +135,45 @@ describe('TableHeader', () => {
 		expect(wrapper.find('.sort-order-indicator').exists()).toBe(false)
 	})
 
+	it('wraps the column title when resizable columns are enabled', () => {
+		const column = {
+			title: 'A very long column title',
+			key: 'test',
+			value: 'test',
+			sortable: true,
+		}
+
+		const wrapper = mount(TableHeader, {
+			props: {
+				column,
+				headerParams: {
+					sortBy: [],
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns: [
+						{
+							key: 'test',
+							value: 'test',
+							title: 'A very long column title',
+							sortable: true,
+						},
+					],
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => false,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				wrapTitle: true,
+			},
+		})
+
+		expect(wrapper.find('.col-title').classes()).toContain('col-title--wrap')
+		expect(wrapper.find('.v-data-table-header__content').classes()).toContain('v-data-table-header__content--wrap')
+		expect(wrapper.find('.v-data-table-header__content').classes()).not.toContain('h-100')
+	})
+
 	// Test for correct sort order when multiple columns are sorted
 	it('displays correct sort order numbers for multiple sorted columns', async () => {
 		const columns = [

package/src/components/Tables/common/tests/filterByRange.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { afterAll, describe, expect, it, vi } from 'vitest'
 import SyTable from '../../SyTable/SyTable.vue'
 import DateFilter from '../filters/DateFilter.vue'
@@ -189,6 +189,7 @@ describe('SyTable - filterByRange', () => {
 		})
 
 		await endDate.setValue('01/01/1995')
+		await flushPromises()
 
 		filteredNames = ['Alice']
 		filteredNames.forEach((element) => {

package/src/components/Tables/common/types.ts

@@ -3,12 +3,12 @@ export type SortOptions = {
 	order: 'desc' | 'asc'
 }
 
-export type FilterType = 'text' | 'number' | 'date' | 'period' | 'select' | 'custom'
+export type FilterType = 'text' | 'number' | 'date' | 'period' | 'select' | 'autocomplete' | 'custom'
 type FilterValue =
 	| string
 	| number
 	| Date
-	| Array<string | number | Date>
+	| Array<string | number | Date | Record<string, unknown>>
 	| { from: string | null, to: string | null }
 	| Record<string, unknown>
 	| null
@@ -53,6 +53,7 @@ export type DataTableHeaders = {
 	maxWidth?: string | number
 	minWidth?: string | number
 	headerProps?: Record<string, unknown>
+	cellProps?: Record<string, unknown>
 }
 
 // Type to handle both Vuetify internal headers and our custom headers
@@ -74,7 +75,8 @@ export type TableColumnHeader = {
 	children?: unknown[]
 	maxWidth?: string | number
 	minWidth?: string | number
-	headerProps?: Record<string, unknown>
+	headerProps?: unknown
+	cellProps?: unknown
 	[key: string]: unknown // Allow for any additional properties from Vuetify
 }
 
@@ -93,12 +95,17 @@ export type SyTableProps = {
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
 	showSelectSingle?: boolean
+	stickySelect?: boolean
 	showExpand?: boolean
 	selectionKey?: string
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
 	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+	pinnedColumns?: Array<string | { key: string, side?: 'left' | 'right' }>
+	pinnedColumnKey?: string
+	clickableRow?: boolean
+	pageInput?: boolean
 }
 
 export type SyServerTableProps = {
@@ -116,11 +123,15 @@ export type SyServerTableProps = {
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
 	showSelectSingle?: boolean
+	stickySelect?: boolean
 	showExpand?: boolean
 	selectionKey?: string
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
 	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
-
+	pinnedColumns?: Array<string | { key: string, side?: 'left' | 'right' }>
+	pinnedColumnKey?: string
+	clickableRow?: boolean
+	pageInput?: boolean
 }

package/src/components/Tables/common/useClickableTableRow.ts

@@ -0,0 +1,103 @@
+import { computed, type ComputedRef, type Ref } from 'vue'
+
+type ClickableTableItem = Record<string, unknown>
+
+type TableRowData = {
+	index: number
+	item: ClickableTableItem
+	internalItem: unknown
+}
+
+type TableRowEventHandler<TEvent extends Event> = ((event: TEvent) => void) | Array<(event: TEvent) => void>
+type TableRowProps = Record<string, unknown>
+export type ClickableTableRowPropsInput = TableRowProps | ((data: TableRowData) => TableRowProps) | undefined
+
+function callEventHandler<TEvent extends Event>(handler: TableRowEventHandler<TEvent> | unknown, event: TEvent): void {
+	if (Array.isArray(handler)) {
+		handler.forEach((currentHandler) => {
+			currentHandler(event)
+		})
+		return
+	}
+
+	if (typeof handler === 'function') {
+		handler(event)
+	}
+}
+
+function resolveRowProps(rowProps: ClickableTableRowPropsInput, data: TableRowData): TableRowProps {
+	if (typeof rowProps === 'function') {
+		return rowProps(data)
+	}
+
+	return rowProps ?? {}
+}
+
+function isElementInteractive(element: HTMLElement | null): boolean {
+	if (!element) {
+		return false
+	}
+
+	return Boolean(element.closest('a, button, input, select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="menuitem"], [contenteditable="true"], [data-sy-row-click-ignore]'))
+}
+
+function isFromNestedInteractiveElement(event: Event): boolean {
+	const target = event.target as HTMLElement | null
+	const currentTarget = event.currentTarget as HTMLElement | null
+
+	if (!target || !currentTarget || target === currentTarget) {
+		return false
+	}
+
+	return isElementInteractive(target)
+}
+
+export function useClickableTableRow({
+	clickableRow,
+	rowProps,
+	onRowClick,
+}: {
+	clickableRow: Ref<boolean>
+	rowProps: ComputedRef<ClickableTableRowPropsInput>
+	onRowClick: (item: ClickableTableItem) => void
+}) {
+	const clickableRowProps = computed<ClickableTableRowPropsInput>(() => {
+		if (!clickableRow.value) {
+			return rowProps.value
+		}
+
+		return (data: TableRowData) => {
+			const baseRowProps = resolveRowProps(rowProps.value, data)
+
+			return {
+				...baseRowProps,
+				'class': ['sy-table__clickable-row', baseRowProps.class].filter(Boolean),
+				'data-clickable-row': true,
+				'tabindex': baseRowProps.tabindex ?? 0,
+				'onClick': (event: MouseEvent) => {
+					callEventHandler(baseRowProps.onClick as TableRowEventHandler<MouseEvent> | unknown, event)
+
+					if (!event.defaultPrevented && !isFromNestedInteractiveElement(event)) {
+						onRowClick(data.item)
+					}
+				},
+				'onKeydown': (event: KeyboardEvent) => {
+					callEventHandler(baseRowProps.onKeydown as TableRowEventHandler<KeyboardEvent> | unknown, event)
+
+					if (event.defaultPrevented || isFromNestedInteractiveElement(event)) {
+						return
+					}
+
+					if (event.key === 'Enter' || event.key === ' ') {
+						event.preventDefault()
+						onRowClick(data.item)
+					}
+				},
+			}
+		}
+	})
+
+	return {
+		clickableRowProps,
+	}
+}

package/src/components/Tables/common/usePagination.ts

@@ -11,9 +11,11 @@ import type { DataOptions } from './types'
 export function usePagination({
 	options,
 	itemsLength,
+	updateOptions,
 }: {
 	options: Ref<Partial<DataOptions>>
 	itemsLength: Ref<number>
+	updateOptions: (opts: Partial<DataOptions>) => void
 }) {
 	// Flag to indicate an ongoing items-per-page update cycle
 	const isUpdatingItemsPerPage = ref(false)
@@ -58,11 +60,22 @@ export function usePagination({
 		isUpdatingItemsPerPage.value = false
 	}
 
+	function onUpdateOptions(newOptions: Partial<DataOptions>) {
+		if (isUpdatingItemsPerPage.value && typeof newOptions.itemsPerPage !== 'undefined') {
+			const rest = { ...newOptions }
+			delete (rest as Record<string, unknown>).itemsPerPage
+			updateOptions(rest)
+			return
+		}
+		updateOptions(newOptions)
+	}
+
 	return {
 		page,
 		pageCount,
 		itemsPerPageValue,
 		updateItemsPerPage,
 		isUpdatingItemsPerPage,
+		onUpdateOptions,
 	}
 }

package/src/components/Tables/common/usePinnedColumns.ts

@@ -0,0 +1,237 @@
+import { computed, nextTick, onMounted, onUnmounted, ref, type Ref } from 'vue'
+import type { DataTableHeaders, TableColumnHeader } from './types'
+
+// Fonction de throttling simple pour optimiser les performances
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const useThrottleFn = <T extends (...args: any[]) => void>(fn: T, delay: number): T => {
+	let lastCall = 0
+	return ((...args: Parameters<T>) => {
+		const now = Date.now()
+		if (now - lastCall >= delay) {
+			lastCall = now
+			return fn(...args)
+		}
+	}) as T
+}
+
+interface UsePinnedColumnsOptions {
+	displayHeaders: Ref<DataTableHeaders[] | undefined>
+	reactiveColumnWidths: Ref<Record<string, number | string>>
+	pinnedColumns: Ref<Array<string | { key: string, side?: 'left' | 'right' }> | undefined>
+	pinnedColumnKey: Ref<string | undefined>
+	stickySelect: Ref<boolean>
+	showSelect: Ref<boolean>
+	showSelectSingle: Ref<boolean>
+	tableRef: Ref<{ $el?: Element } | undefined>
+}
+
+export function usePinnedColumns({
+	displayHeaders,
+	reactiveColumnWidths,
+	pinnedColumns,
+	pinnedColumnKey,
+	stickySelect,
+	showSelect,
+	showSelectSingle,
+	tableRef,
+}: UsePinnedColumnsOptions) {
+	const tableWrapperEl = ref<HTMLElement | null>(null)
+	const showPinnedLeftShadow = ref(false)
+	const showPinnedRightShadow = ref(false)
+
+	// Stocker la référence de la fonction pour éviter les fuites mémoire
+	const updatePinnedShadowsRef = ref<(() => void) | null>(null)
+
+	const parseWidthPx = (val: unknown): number => {
+		if (typeof val === 'number' && Number.isFinite(val)) return val
+		if (typeof val === 'string') {
+			const trimmed = val.trim()
+			if (trimmed.endsWith('px')) {
+				const n = Number.parseFloat(trimmed.slice(0, -2))
+				return Number.isFinite(n) ? n : 0
+			}
+			const n = Number.parseFloat(trimmed)
+			return Number.isFinite(n) ? n : 0
+		}
+		return 0
+	}
+
+	const normalizedPinnedColumns = computed(() => {
+		const raw = pinnedColumns.value ?? (pinnedColumnKey.value ? [pinnedColumnKey.value] : [])
+		return raw.map((c) => {
+			if (typeof c === 'string') return { key: c, side: 'left' as const }
+			return { key: c.key, side: c.side ?? 'left' as const }
+		})
+	})
+
+	const pinnedLeftKeys = computed(() =>
+		normalizedPinnedColumns.value.filter(c => c.side !== 'right').map(c => c.key),
+	)
+
+	const pinnedRightKeys = computed(() =>
+		normalizedPinnedColumns.value.filter(c => c.side === 'right').map(c => c.key),
+	)
+
+	const stickySelectActive = computed(() => Boolean(stickySelect.value) && (showSelect.value || showSelectSingle.value))
+	const hasPinnedSelectLeft = computed(() => pinnedLeftKeys.value.includes('data-table-select') || stickySelectActive.value)
+
+	const getColumnWidthPx = (headersList: TableColumnHeader[], key: string): number => {
+		if (key === 'data-table-select' || key === 'data-table-expand' || key === 'data-table-group') return 48
+		const storedWidth = reactiveColumnWidths.value[key]
+		if (storedWidth != null) return parseWidthPx(storedWidth)
+		const h = headersList.find(x => (x.key ?? x.value) === key)
+		return parseWidthPx(h?.width ?? h?.minWidth ?? h?.maxWidth)
+	}
+
+	const pinnedMeta = computed(() => {
+		const headersList = displayHeaders.value
+		if (!headersList) return { left: {} as Record<string, number>, right: {} as Record<string, number>, totalLeft: 0, totalRight: 0 }
+
+		const left: Record<string, number> = {}
+		let accLeft = 0
+		if (hasPinnedSelectLeft.value) {
+			left['data-table-select'] = 0
+			accLeft = getColumnWidthPx(headersList as TableColumnHeader[], 'data-table-select')
+		}
+		for (const h of headersList) {
+			const key = (h.key ?? h.value) as string | undefined
+			if (!key) continue
+			if (pinnedLeftKeys.value.includes(key)) {
+				left[key] = accLeft
+				accLeft += getColumnWidthPx(headersList as TableColumnHeader[], key)
+			}
+		}
+
+		const right: Record<string, number> = {}
+		let accRight = 0
+		for (const h of [...headersList].reverse()) {
+			const key = (h.key ?? h.value) as string | undefined
+			if (!key) continue
+			if (pinnedRightKeys.value.includes(key)) {
+				right[key] = accRight
+				accRight += getColumnWidthPx(headersList as TableColumnHeader[], key)
+			}
+		}
+
+		return { left, right, totalLeft: accLeft, totalRight: accRight }
+	})
+
+	const updatePinnedShadows = () => {
+		const el = tableWrapperEl.value
+		if (!el) return
+		const max = el.scrollWidth - el.clientWidth
+		showPinnedLeftShadow.value = pinnedMeta.value.totalLeft > 0 && el.scrollLeft > 0
+		showPinnedRightShadow.value = pinnedMeta.value.totalRight > 0 && max > 0 && el.scrollLeft < max - 1
+	}
+
+	// Fonction pour trouver le wrapper du tableau avec retry
+	const findTableWrapper = (): HTMLElement | null => {
+		const el = tableRef.value?.$el as HTMLElement | undefined
+		return el?.querySelector('.v-table__wrapper') as HTMLElement | null
+	}
+
+	// Initialiser la référence de la fonction
+	updatePinnedShadowsRef.value = updatePinnedShadows
+
+	// Appliquer le throttling pour optimiser les performances (60fps)
+	const updatePinnedShadowsThrottled = useThrottleFn(updatePinnedShadows, 16)
+
+	const pinnedEdgeVars = computed<Record<string, string>>(() => {
+		const { totalLeft, totalRight } = pinnedMeta.value
+		return {
+			...(totalLeft > 0 ? { '--sy-pinned-left-edge': `${totalLeft}px` } : {}),
+			...(totalRight > 0 ? { '--sy-pinned-right-edge': `${totalRight}px` } : {}),
+		}
+	})
+
+	// Only cellProps are needed here — headerProps are applied inline in the #headers slot template
+	const displayHeadersWithPinned = computed(() => {
+		const headersList = displayHeaders.value
+		if (!headersList) return headersList
+
+		const leftOffsets = pinnedMeta.value.left
+		const rightOffsets = pinnedMeta.value.right
+
+		if (Object.keys(leftOffsets).length === 0 && Object.keys(rightOffsets).length === 0) return headersList
+
+		return headersList.map((h) => {
+			const key = (h.key ?? h.value) as string | undefined
+			if (!key) return h
+
+			const left = leftOffsets[key]
+			const right = rightOffsets[key]
+			if (left === undefined && right === undefined) return h
+
+			const cellProps = (h.cellProps ?? {}) as Record<string, unknown>
+			const cellStyle = (cellProps.style ?? {}) as Record<string, string | number>
+
+			const stickyCellStyle: Record<string, string | number> = {
+				position: 'sticky',
+				zIndex: 'var(--sy-table-z-pinned-cell)',
+				background: 'rgb(var(--v-theme-surface))',
+			}
+
+			const sideClass = left !== undefined ? 'sy-table__pinned--left' : 'sy-table__pinned--right'
+			if (left !== undefined) {
+				stickyCellStyle.left = `${left}px`
+			}
+			else if (right !== undefined) {
+				stickyCellStyle.right = `${right}px`
+			}
+
+			return {
+				...h,
+				cellProps: {
+					...cellProps,
+					class: ['sy-table__pinned', sideClass, 'v-data-table-column--fixed', cellProps.class].filter(Boolean),
+					style: { ...cellStyle, ...stickyCellStyle },
+				},
+			}
+		})
+	})
+
+	onMounted(() => {
+		nextTick(() => {
+			let attempts = 0
+			const maxAttempts = 5
+
+			const tryFindWrapper = () => {
+				tableWrapperEl.value = findTableWrapper()
+				if (tableWrapperEl.value || attempts >= maxAttempts) {
+					if (tableWrapperEl.value && updatePinnedShadowsRef.value) {
+						updatePinnedShadowsRef.value()
+						tableWrapperEl.value.addEventListener('scroll', updatePinnedShadowsThrottled, { passive: true })
+					}
+					if (updatePinnedShadowsRef.value) {
+						window.addEventListener('resize', updatePinnedShadowsThrottled)
+					}
+				}
+				else {
+					attempts++
+					setTimeout(tryFindWrapper, 50)
+				}
+			}
+
+			tryFindWrapper()
+		})
+	})
+
+	onUnmounted(() => {
+		if (tableWrapperEl.value && updatePinnedShadowsRef.value) {
+			tableWrapperEl.value.removeEventListener('scroll', updatePinnedShadowsThrottled)
+		}
+		if (updatePinnedShadowsRef.value) {
+			window.removeEventListener('resize', updatePinnedShadowsThrottled)
+		}
+		updatePinnedShadowsRef.value = null
+	})
+
+	return {
+		showPinnedLeftShadow,
+		showPinnedRightShadow,
+		hasPinnedSelectLeft,
+		pinnedMeta,
+		pinnedEdgeVars,
+		displayHeadersWithPinned,
+	}
+}

package/src/components/Tables/common/useTableHeaders.ts

@@ -18,8 +18,38 @@ export function useTableHeaders({
 	storedHeaders?: DataTableHeaders[]
 	filterInputConfig?: Record<string, unknown>
 }) {
-	// Process headers to ensure they have title property
-	const normalizedHeaders = computed(() => {
+	function normalizeHeader(header: DataTableHeaders): DataTableHeaders {
+		const mapped = {
+			...header,
+			title: header.title ?? header.text,
+		} as TableColumnHeader
+
+		// Si maxWidth est défini sans width → applique-le à width
+		if (mapped.maxWidth != null && mapped.width == null) {
+			mapped.width = mapped.maxWidth
+		}
+
+		// Si maxWidth est défini → l'appliquer aussi aux <td> via cellProps
+		if (mapped.maxWidth != null) {
+			const existingCellProps = (mapped.cellProps ?? {}) as Record<string, unknown>
+			const existingStyle = (existingCellProps.style ?? {}) as Record<string, unknown>
+			const multilineStyle = {
+				...existingStyle,
+				maxWidth: mapped.maxWidth,
+				whiteSpace: 'normal',
+				overflowWrap: 'anywhere',
+				wordBreak: 'break-word',
+			}
+			const baseProps = { ...existingCellProps, style: multilineStyle }
+			mapped.cellProps = () => ({
+				...baseProps,
+			})
+		}
+
+		return mapped as unknown as DataTableHeaders
+	}
+
+	const mergedHeaders = computed(() => {
 		const incoming = headersProp?.value
 		const stored = Array.isArray(storedHeaders) ? storedHeaders : undefined
 
@@ -61,27 +91,11 @@ export function useTableHeaders({
 			headers = (stored ?? incoming) as DataTableHeaders[]
 		}
 
-		// Normalisation finale
-		return headers.map((header) => {
-			const mapped = {
-				...header,
-				title: header.title ?? header.text,
-			} as TableColumnHeader
-
-			// Si maxWidth est défini sans width → applique-le à width
-			if (mapped.maxWidth != null && mapped.width == null) {
-				mapped.width = mapped.maxWidth
-			}
-
-			return mapped as unknown as DataTableHeaders
-		})
+		return headers
 	})
 
-	// Get filterable headers
-	const filterableHeaders = computed(() => {
-		if (!normalizedHeaders.value) return []
-		return normalizedHeaders.value.filter(header => header.filterable)
-	})
+	// Process headers to ensure they have title property and regenerate cellProps after reordering
+	const normalizedHeaders = computed(() => mergedHeaders.value?.map(normalizeHeader))
 
 	/**
 	 * Enhance header with filter type and configuration
@@ -112,27 +126,35 @@ export function useTableHeaders({
 		internalHeaders.value = newHeaders
 	}, { immediate: true, deep: true })
 
+	const normalizedInternalHeaders = computed(() => internalHeaders.value?.map(normalizeHeader))
+
+	// Get filterable headers
+	const filterableHeaders = computed(() => {
+		if (!normalizedInternalHeaders.value) return []
+		return normalizedInternalHeaders.value.filter(header => header.filterable)
+	})
+
 	/**
 	 * Get header by key
 	 */
 	function getHeaderByKey(key: string): TableColumnHeader | undefined {
-		return normalizedHeaders.value?.find(header => header.key === key)
+		return normalizedInternalHeaders.value?.find(header => header.key === key)
 	}
 
 	/**
 	 * Get original header from a rendered column (match by key or value)
 	 */
 	function getHeaderForColumn(column: TableColumnHeader): TableColumnHeader | undefined {
-		if (!normalizedHeaders.value) return undefined
-		const key = column.key as string | undefined
+		if (!normalizedInternalHeaders.value) return undefined
+		const key = column.key ?? undefined
 		if (key) {
-			const byKey = normalizedHeaders.value.find(h => h.key === key)
+			const byKey = normalizedInternalHeaders.value.find(h => h.key === key)
 			if (byKey) return byKey
 		}
-		// Fallback: try matching by value when key is not present or didn’t match
-		const val = column.value as string | undefined
+		// Fallback: try matching by value when key is not present or didn't match
+		const val = typeof column.value === 'string' ? column.value : undefined
 		if (val) {
-			const byValue = normalizedHeaders.value.find(h => h.value === val)
+			const byValue = normalizedInternalHeaders.value.find(h => h.value === val)
 			if (byValue) return byValue
 		}
 		return undefined
@@ -142,8 +164,8 @@ export function useTableHeaders({
 	 * The headers filtered by visibility and sorted by order
 	 */
 	const displayHeaders = computed(() => {
-		if (!internalHeaders.value) return undefined
-		const filteredHeaders = internalHeaders.value.filter(header => header.hidden !== true)
+		if (!normalizedInternalHeaders.value) return undefined
+		const filteredHeaders = normalizedInternalHeaders.value.filter(header => header.hidden !== true)
 		return sortHeaders(filteredHeaders)
 	})
 

package/src/components/Tables/common/useTableRowCheckboxAccessibility.ts

@@ -0,0 +1,41 @@
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { locales } from './locales'
+
+export function useTableRowCheckboxAccessibility({
+	uniqueTableId,
+}: {
+	uniqueTableId: string
+}) {
+	const timeouts = ref<ReturnType<typeof setTimeout>[]>([])
+
+	const accessibilityRowCheckboxes = () => {
+		nextTick(() => {
+			const timeoutId = setTimeout(() => {
+				if (typeof document === 'undefined') return
+
+				const tableElement = document.getElementById(uniqueTableId)
+				if (!tableElement) return
+
+				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)
+
+			timeouts.value.push(timeoutId)
+		})
+	}
+
+	onMounted(() => {
+		accessibilityRowCheckboxes()
+	})
+
+	onUnmounted(() => {
+		timeouts.value.forEach(clearTimeout)
+		timeouts.value = []
+	})
+
+	return { accessibilityRowCheckboxes }
+}

package/src/components/UploadWorkflow/UploadWorkflow.vue

@@ -30,6 +30,7 @@
 			}
 		>(),
 		{
+			uploadList: () => [],
 			sectionTitle: undefined,
 			showFilePreview: false,
 			infoText: '',