@cnamts/synapse 1.0.23 → 1.0.25

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,19 @@
 		striped: false,
 		showSelect: false,
 		showSelectSingle: false,
+		stickySelect: false,
 		multiSort: false,
 		mustSort: false,
 		itemsPerPageOptions: undefined,
 		headingLevel: 2,
+		clickableRow: false,
+		pageInput: false,
 	})
 
+	const emit = defineEmits<{
+		'row-click': [item: Record<string, unknown>]
+	}>()
+
 	const options = defineModel<Partial<DataOptions>>('options', {
 		required: false,
 		default: () => ({}),
@@ -59,7 +70,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 +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,
 	})
@@ -96,25 +117,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 +155,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 +218,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 +243,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 +274,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">
@@ -300,6 +319,7 @@
 										:column="column"
 										:header-props-raw="(getHeaderForColumn(column)?.headerProps as any)"
 										:resizable-columns="props.resizableColumns"
+										:wrap-title="props.resizableColumns || !!getHeaderForColumn(column)?.maxWidth"
 									>
 										<template
 											v-for="slotName in Object.keys($slots)"
@@ -326,9 +346,9 @@
 						>
 							<th
 								:style="{
-									...(getHeaderForColumn(column)?.maxWidth ? { maxWidth: getHeaderForColumn(column)?.maxWidth as any } : {}),
+									...(getHeaderForColumn(column)?.maxWidth && !props.resizableColumns ? { maxWidth: getHeaderForColumn(column)?.maxWidth as any } : {}),
 									...(getHeaderForColumn(column)?.minWidth ? { minWidth: getHeaderForColumn(column)?.minWidth as any } : {}),
-									...(getHeaderForColumn(column)?.width ? { width: getHeaderForColumn(column)?.width as any } : {}),
+									width: (reactiveColumnWidths[column.key!] || getHeaderForColumn(column)?.width) as any || undefined,
 								}"
 							>
 								<SyTableFilter
@@ -444,6 +464,7 @@
 						:page-count="pageCount"
 						:items-length="filteredItems.length"
 						:items-per-page-options="props.itemsPerPageOptions"
+						:page-input="props.pageInput"
 						@update:page="updateOptions({ page: $event })"
 						@update:items-per-page="updateItemsPerPage"
 					/>
@@ -455,15 +476,15 @@
 
 <style lang="scss" scoped>
 @use '@/components/Tables/common/tableStyles' as *;
-@use '@/assets/tokens';
 
 .sy-table :deep() {
 	@include tablestyles;
+	@include clickable-row-styles;
 }
 
 @mixin striped-rows {
 	.v-table tbody tr:nth-child(even) {
-		background-color: rgba(tokens.$primary-base, 0.05);
+		background-color: rgba(var(--v-theme-primary), 0.05);
 	}
 }
 
@@ -475,4 +496,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(var(--v-theme-grey-base), 0.6);
+}
+
+.sy-table--pinned-right-shadow :deep(.sy-table__pinned--right) {
+	box-shadow: -2px 0 6px -4px rgba(var(--v-theme-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(var(--v-theme-grey-base), 0.6);
+}
+/* stylelint-enable @stylistic/max-line-length */
+
 </style>

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

@@ -0,0 +1,79 @@
+// @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 with pageInput enabled', async () => {
+		const manyItems = Array.from({ length: 11 }, (_, i) => ({ id: i + 1, name: `User ${i + 1}`, age: 20 + i }))
+
+		const wrapper = mount(SyTable, {
+			props: {
+				options: {} as DataOptions,
+				suffix: 'a11y-page-input-test',
+				pageInput: true,
+				headers,
+				items: manyItems,
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTable - pageInput', {
+			ignoreRules: ['region', 'aria-prohibited-attr'],
+		})
+	})
+
+	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'],
+		})
+	})
+})