[atable] Fix atable modal attach to cell (#220)

* changed amodal to abnsolute potion, using useWindowScroll for update position * atable modal now correctly attaches to and scrolls with cells. Modal also detects edges and adjusts position to prevent overflow * added changes * fix: add typings for modal dimensions --------- Co-authored-by: Rohan Bansal <[email protected]> Co-authored-by: Tyler Matteson <[email protected]>
agritheory · Dec 17, 2024 · d47e133 · d47e133
1 parent 7699831
commit d47e133
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 35 deletions.
diff --git a/aform/src/components/form/ADate.vue b/aform/src/components/form/ADate.vue
@@ -47,6 +47,8 @@ const showPicker = () => {
 <style scoped>
 div {
 	min-width: 40ch;
+	width: 100%;
+	box-sizing: border-box;
 	border: 1px solid transparent;
 	padding: 0rem;
 	margin: 0rem;
@@ -55,6 +57,7 @@ div {
 
 input {
 	width: calc(100% - 1ch);
+	box-sizing: border-box;
 	outline: 1px solid transparent;
 	border: 1px solid var(--sc-input-border-color);
 	padding: 1ch 0.5ch 0.5ch 1ch;
@@ -72,12 +75,14 @@ label {
 	margin: 0rem;
 	border: 1px solid transparent;
 	margin-bottom: 0.25rem;
+	box-sizing: border-box;
 }
 
 p {
 	width: 100%;
 	color: red;
 	font-size: 85%;
+	box-sizing: border-box;
 }
 
 label {
@@ -87,6 +92,7 @@ label {
 	background: white;
 	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
 	padding: 0 0.25ch 0 0.25ch;
+	box-sizing: border-box;
 }
 
 input:focus {

diff --git a/atable/src/components/ACell.vue b/atable/src/components/ACell.vue
@@ -49,7 +49,7 @@ const {
 }>()
 
 const cellRef = useTemplateRef<HTMLTableCellElement>('cell')
-const { bottom, left } = useElementBounding(cellRef)
+const { width, height } = useElementBounding(cellRef)
 
 // keep a shallow copy of the original cell value for comparison
 const originalData = store.getCellData(colIndex, rowIndex)
@@ -97,9 +97,10 @@ const showModal = () => {
 			state.modal.colIndex = colIndex
 			state.modal.rowIndex = rowIndex
 			state.modal.parent = cellRef.value
-			state.modal.top = bottom.value
-			state.modal.left = left.value
-			state.modal.width = cellWidth
+			state.modal.top = cellRef.value.offsetTop + cellRef.value.offsetHeight
+			state.modal.left = cellRef.value.offsetLeft
+			state.modal.width = width.value
+			state.modal.height = height.value
 
 			if (typeof column.modalComponent === 'function') {
 				state.modal.component = column.modalComponent({ table: state.table, row, column })

diff --git a/atable/src/components/ATable.vue b/atable/src/components/ATable.vue
@@ -37,11 +37,7 @@
 				:colIndex="store.modal.colIndex"
 				:rowIndex="store.modal.rowIndex"
 				:store="store"
-				:style="{
-					left: store.modal.left + 'px',
-					top: store.modal.top + 'px',
-					maxWidth: store.modal.width + 'px',
-				}">
+				:container="tableRef">
 				<template #default>
 					<component
 						:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
@@ -249,6 +245,7 @@ td.sticky-index {
 <style scoped>
 @import url('@stonecrop/themes/default.css');
 .atable {
+	position: relative;
 	font-family: var(--sc-atable-font-family);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

diff --git a/atable/src/components/ATableModal.vue b/atable/src/components/ATableModal.vue
@@ -1,26 +1,49 @@
 <template>
-	<div class="amodal" tabindex="-1" @click="handleInput" @input="handleInput">
+	<div class="amodal" ref="amodal" tabindex="-1" @click="handleInput" @input="handleInput" :style="amodalStyles">
 		<slot />
 	</div>
 </template>
 
 <script setup lang="ts">
+import { useElementBounding } from '@vueuse/core'
+import { useTemplateRef, computed } from 'vue'
+
 import { createTableStore } from '../stores/table'
 
-/* const { colIndex, rowIndex, store } = */ defineProps<{
+const { store, container } = defineProps<{
 	colIndex?: number
 	rowIndex?: number
 	store?: ReturnType<typeof createTableStore>
+	container?: HTMLElement
 }>()
 
-// const cellBackgroundColor = computed(() => {
-// 	if (store.modal.parent) {
-// 		let computedstyle = window.getComputedStyle(store.modal.parent)
-// 		return 'blue'
-// 	} else {
-// 		return 'inherit'
-// 	}
-// })
+const amodalRef = useTemplateRef('amodal')
+const { width, height } = useElementBounding(amodalRef)
+
+const amodalStyles = computed(() => {
+	// the modal usually will appear left align with and below the element it is associated with,
+	// but needs to detect and adjust its position if it would overflow the rightr or bottom edges
+
+	// get the dimensions of whatever container is holding this modal, e.g. Table, Window, div so the modal can detect edges
+	const containerWidth = container?.offsetWidth || 0
+	const containerHeight = container?.offsetHeight || 0
+
+	// if this modal would go outside the edge of its container, instead place it above the element (Y) or along the right side (X)
+	const modalLeft =
+		store.modal.left + width.value > containerWidth
+			? store.modal.left - (width.value - store.modal.width)
+			: store.modal.left
+
+	const modalTop =
+		store.modal.top + height.value > containerHeight
+			? store.modal.top - height.value - store.modal.height
+			: store.modal.top
+
+	return {
+		left: `${modalLeft}px`,
+		top: `${modalTop}px`,
+	}
+})
 
 const handleInput = (event: Event) => {
 	event.stopPropagation()
@@ -31,7 +54,7 @@ const handleInput = (event: Event) => {
 @import url('@stonecrop/themes/default.css');
 
 .amodal {
-	position: fixed;
+	position: absolute;
 	background-color: var(--sc-row-color-zebra-dark);
 	z-index: 100;
 }

diff --git a/atable/src/types/index.ts b/atable/src/types/index.ts
@@ -93,12 +93,13 @@ export type TableRow = {
 export type TableModal = {
 	colIndex?: number
 	event?: string
+	height?: number
 	left?: number
 	parent?: HTMLElement
 	rowIndex?: number
 	top?: number
 	visible?: boolean
-	width?: string
+	width?: number
 
 	component?: string
 	componentProps?: Record<string, any>

diff --git a/common/changes/@stonecrop/aform/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json b/common/changes/@stonecrop/aform/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "small style update to Adate",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}
diff --git a/common/changes/@stonecrop/atable/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json b/common/changes/@stonecrop/atable/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "modal scrolls with cells and detects edges",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}
diff --git a/common/reviews/api/atable.api.md b/common/reviews/api/atable.api.md
@@ -117,23 +117,25 @@ rowModified?: boolean;
 modal: Ref<    {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }, TableModal | {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }>;
@@ -219,23 +221,25 @@ rowModified?: boolean;
 modal: Ref<    {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }, TableModal | {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }>;
@@ -321,23 +325,25 @@ rowModified?: boolean;
 modal: Ref<    {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }, TableModal | {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }>;
@@ -398,12 +404,13 @@ export type TableDisplay = {
 export type TableModal = {
     colIndex?: number;
     event?: string;
+    height?: number;
     left?: number;
     parent?: HTMLElement;
     rowIndex?: number;
     top?: number;
     visible?: boolean;
-    width?: string;
+    width?: number;
     component?: string;
     componentProps?: Record<string, any>;
 };