[atable] make modal placement dynamic (#166)

atable/src/components/ACell.vue

@@ -28,6 +28,7 @@
 
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+import { useElementBounding } from '@vueuse/core'
 import { computed, CSSProperties, inject, ref, useTemplateRef } from 'vue'
 
 import TableDataStore from '.'
@@ -57,6 +58,14 @@ const table = tableData.table
 const column = tableData.columns[colIndex]
 const row = tableData.rows[rowIndex]
 
+const textAlign = computed(() => {
+	return column.align || 'center'
+})
+
+const cellWidth = computed(() => {
+	return column.width || '40ch'
+})
+
 const displayValue = computed(() => {
 	const cellData = tableData.cellData<any>(colIndex, rowIndex)
 	const format = column.format
@@ -84,13 +93,13 @@ const handleInput = () => {
 	}
 
 	if (column.modalComponent) {
-		const domRect = cellRef.value.getBoundingClientRect()
+		const { top, left, height } = useElementBounding(cellRef)
 		tableData.modal.visible = true
 		tableData.modal.colIndex = colIndex
 		tableData.modal.rowIndex = rowIndex
 		tableData.modal.parent = cellRef.value
-		tableData.modal.top = domRect.top + domRect.height
-		tableData.modal.left = domRect.left
+		tableData.modal.top = top.value + height.value
+		tableData.modal.left = left.value
 		tableData.modal.width = cellWidth.value
 
 		if (typeof column.modalComponent === 'function') {
@@ -140,14 +149,6 @@ if (addNavigation) {
 // 	}
 // }
 
-const textAlign = computed(() => {
-	return column.align || 'center'
-})
-
-const cellWidth = computed(() => {
-	return column.width || '40ch'
-})
-
 const onFocus = () => {
 	if (cellRef.value) {
 		currentData.value = cellRef.value.textContent

atable/src/components/ATable.vue

@@ -63,6 +63,7 @@
 
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components'
+import { useMutationObserver } from '@vueuse/core'
 import { nextTick, provide, watch, onMounted, useTemplateRef } from 'vue'
 
 import TableDataStore from '.'
@@ -102,23 +103,28 @@ watch(
 )
 
 onMounted(() => {
-	assignStickyCellWidths()
+	if (columns.some(col => col.pinned)) {
+		assignStickyCellWidths()
 
-	// in tree view, a mutation observer is needed to capture and adjust expanded rows
-	if (tableData.config.view === 'tree') {
-		const observer = new MutationObserver(() => assignStickyCellWidths())
-		observer.observe(tableRef.value, { childList: true, subtree: true })
+		// in tree view, also add a mutation observer to capture and adjust expanded rows
+		if (tableData.config.view === 'tree') {
+			useMutationObserver(tableRef, assignStickyCellWidths, { childList: true, subtree: true })
+		}
 	}
 })
 
 const assignStickyCellWidths = () => {
 	const table = tableRef.value
 
 	// set header cell width to match sticky cells' width
-	const headerCells = Array.from(table.rows[0].cells)
+	const headerRow = table.rows[0]
+	const firstDataRow = table.rows[1]
+	const headerCells = headerRow ? Array.from(headerRow.cells) : []
 	for (const [index, headerCell] of headerCells.entries()) {
-		const rowCell = table.rows[1].cells[index]
-		headerCell.style.width = `${rowCell.offsetWidth}px`
+		const rowCell = firstDataRow.cells[index]
+		if (rowCell) {
+			headerCell.style.width = `${rowCell.offsetWidth}px`
+		}
 	}
 
 	// pin cells in row that are sticky

atable/tests/table.spec.ts

@@ -55,17 +55,17 @@ describe('table component', () => {
 		const homePageHeader = headerCells.at(1)
 		expect(homePageHeader!.element.style.minWidth).toBe('35ch')
 		expect(homePageHeader!.element.style.textAlign).toBe('left')
-		expect(homePageHeader!.element.style.width).toBe('0px')
+		expect(homePageHeader!.element.style.width).toBe('')
 
 		const httpMethodHeader = headerCells.at(2)
 		expect(httpMethodHeader!.element.style.minWidth).toBe('20ch')
 		expect(httpMethodHeader!.element.style.textAlign).toBe('left')
-		expect(httpMethodHeader!.element.style.width).toBe('0px')
+		expect(httpMethodHeader!.element.style.width).toBe('')
 
 		const reportDateHeader = headerCells.at(3)
 		expect(reportDateHeader!.element.style.minWidth).toBe('25ch')
 		expect(reportDateHeader!.element.style.textAlign).toBe('center')
-		expect(reportDateHeader!.element.style.width).toBe('0px')
+		expect(reportDateHeader!.element.style.width).toBe('')
 	})
 
 	it('verify data rows (format function)', async () => {

common/changes/@stonecrop/atable/fix-modal-bounds_2024-10-16-06-35.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "make modal placement dynamic",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}