@stonecrop/atable 0.3.9 → 0.3.11

package/dist/src/stores/table.d.ts

@@ -73,25 +73,25 @@ export declare const createTableStore: (initData: {
         rowModified?: boolean | undefined;
     }[]>;
     modal: import("vue").Ref<{
+        bottom?: number | undefined;
         colIndex?: number | undefined;
         event?: string | undefined;
         height?: number | undefined;
         left?: number | undefined;
         parent?: HTMLElement | undefined;
         rowIndex?: number | undefined;
-        top?: number | undefined;
         visible?: boolean | undefined;
         width?: number | undefined;
         component?: string | undefined;
         componentProps?: Record<string, any> | undefined;
     }, TableModal | {
+        bottom?: number | undefined;
         colIndex?: number | undefined;
         event?: string | undefined;
         height?: number | undefined;
         left?: number | undefined;
         parent?: HTMLElement | undefined;
         rowIndex?: number | undefined;
-        top?: number | undefined;
         visible?: boolean | undefined;
         width?: number | undefined;
         component?: string | undefined;
@@ -179,25 +179,25 @@ export declare const createTableStore: (initData: {
         rowModified?: boolean | undefined;
     }[]>;
     modal: import("vue").Ref<{
+        bottom?: number | undefined;
         colIndex?: number | undefined;
         event?: string | undefined;
         height?: number | undefined;
         left?: number | undefined;
         parent?: HTMLElement | undefined;
         rowIndex?: number | undefined;
-        top?: number | undefined;
         visible?: boolean | undefined;
         width?: number | undefined;
         component?: string | undefined;
         componentProps?: Record<string, any> | undefined;
     }, TableModal | {
+        bottom?: number | undefined;
         colIndex?: number | undefined;
         event?: string | undefined;
         height?: number | undefined;
         left?: number | undefined;
         parent?: HTMLElement | undefined;
         rowIndex?: number | undefined;
-        top?: number | undefined;
         visible?: boolean | undefined;
         width?: number | undefined;
         component?: string | undefined;
@@ -285,25 +285,25 @@ export declare const createTableStore: (initData: {
         rowModified?: boolean | undefined;
     }[]>;
     modal: import("vue").Ref<{
+        bottom?: number | undefined;
         colIndex?: number | undefined;
         event?: string | undefined;
         height?: number | undefined;
         left?: number | undefined;
         parent?: HTMLElement | undefined;
         rowIndex?: number | undefined;
-        top?: number | undefined;
         visible?: boolean | undefined;
         width?: number | undefined;
         component?: string | undefined;
         componentProps?: Record<string, any> | undefined;
     }, TableModal | {
+        bottom?: number | undefined;
         colIndex?: number | undefined;
         event?: string | undefined;
         height?: number | undefined;
         left?: number | undefined;
         parent?: HTMLElement | undefined;
         rowIndex?: number | undefined;
-        top?: number | undefined;
         visible?: boolean | undefined;
         width?: number | undefined;
         component?: string | undefined;

package/dist/src/types/index.d.ts

@@ -1,3 +1,4 @@
+import { useElementBounding } from '@vueuse/core';
 import { createTableStore } from '../stores/table';
 /**
  * Table column definition.
@@ -86,20 +87,20 @@ export type TableRow = {
  * @public
  */
 export type TableModal = {
+    bottom?: ReturnType<typeof useElementBounding>['bottom'];
     colIndex?: number;
     event?: string;
-    height?: number;
-    left?: number;
+    height?: ReturnType<typeof useElementBounding>['height'];
+    left?: ReturnType<typeof useElementBounding>['left'];
     parent?: HTMLElement;
     rowIndex?: number;
-    top?: number;
     visible?: boolean;
-    width?: number;
+    width?: ReturnType<typeof useElementBounding>['width'];
     component?: string;
     componentProps?: Record<string, any>;
 };
 /**
- * Table modal props definition.
+ * Table modal component props definition.
  * @public
  */
 export type TableModalProps = {

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -38,8 +38,8 @@
     "@vueuse/core": "^12.0.0",
     "pinia": "^2.3.0",
     "vue": "^3.5.11",
-    "@stonecrop/themes": "0.3.9",
-    "@stonecrop/utilities": "0.3.9"
+    "@stonecrop/themes": "0.3.11",
+    "@stonecrop/utilities": "0.3.11"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.2",

package/src/components/ACell.vue

@@ -50,7 +50,6 @@ const {
 const emit = defineEmits<{ cellInput: [colIndex: number, rowIndex: number, newValue: string, oldValue: string] }>()
 
 const cellRef = useTemplateRef<HTMLTableCellElement>('cell')
-const { width, height } = useElementBounding(cellRef)
 
 // keep a shallow copy of the original cell value for comparison
 const originalData = store.getCellData(colIndex, rowIndex)
@@ -80,6 +79,8 @@ const cellStyle = computed((): CSSProperties => {
 })
 
 const showModal = () => {
+	const { left, bottom, width, height } = useElementBounding(cellRef)
+
 	if (column.mask) {
 		// TODO: add masking to cell values
 		// column.mask(event)
@@ -90,11 +91,11 @@ const showModal = () => {
 			state.modal.visible = true
 			state.modal.colIndex = colIndex
 			state.modal.rowIndex = rowIndex
-			state.modal.parent = cellRef.value!
-			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
+			// TODO: typing refs somehow resolves to unref'd value; probably a bug in API Extractor?
+			state.modal.left = left
+			state.modal.bottom = bottom
+			state.modal.width = width
+			state.modal.height = height
 
 			if (typeof column.modalComponent === 'function') {
 				state.modal.component = column.modalComponent({ table: state.table, row, column })

package/src/components/ATable.vue

@@ -33,12 +33,7 @@
 
 		<slot name="footer" :data="store" />
 		<slot name="modal" :data="store">
-			<ATableModal
-				v-show="store.modal.visible"
-				:colIndex="store.modal.colIndex"
-				:rowIndex="store.modal.rowIndex"
-				:store="store"
-				:container="tableRef">
+			<ATableModal v-show="store.modal.visible" :store="store">
 				<template #default>
 					<component
 						:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
@@ -126,8 +121,8 @@ const assignStickyCellWidths = () => {
 	const table = tableRef.value
 
 	// set header cell width to match sticky cells' width
-	const headerRow = table.rows[0]
-	const firstDataRow = table.rows[1]
+	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 = firstDataRow?.cells[index]
@@ -137,7 +132,7 @@ const assignStickyCellWidths = () => {
 	}
 
 	// pin cells in row that are sticky
-	for (const row of table.rows) {
+	for (const row of table?.rows || []) {
 		let totalWidth = 0
 		const columns: HTMLTableCellElement[] = []
 

package/src/components/ATableModal.vue

@@ -5,43 +5,43 @@
 </template>
 
 <script setup lang="ts">
-import { useElementBounding } from '@vueuse/core'
+import { useElementBounding, useWindowScroll } from '@vueuse/core'
 import { useTemplateRef, computed } from 'vue'
 
 import { createTableStore } from '../stores/table'
 
-const { store, container } = defineProps<{
-	colIndex?: number
-	rowIndex?: number
-	store?: ReturnType<typeof createTableStore>
-	container?: HTMLElement
-}>()
+const { store } = defineProps<{ store: ReturnType<typeof createTableStore> }>()
 
 const amodalRef = useTemplateRef('amodal')
 const { width, height } = useElementBounding(amodalRef)
+const { y: scrollY } = useWindowScroll()
 
 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
+	if (!(store.modal.height && store.modal.width && store.modal.left && store.modal.bottom)) return
 
-	// 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
+	const body = document.body
+	const html = document.documentElement
 
-	// 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 maxHeight = Math.max(
+		body.scrollHeight,
+		body.offsetHeight,
+		html.clientHeight,
+		html.scrollHeight,
+		html.offsetHeight
+	)
+	const maxWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
 
-	const modalTop =
-		store.modal.top + height.value > containerHeight
-			? store.modal.top - height.value - store.modal.height
-			: store.modal.top
+	const modalY =
+		store.modal.bottom + height.value + scrollY.value <= maxHeight
+			? store.modal.bottom
+			: store.modal.bottom - height.value - store.modal.height
+
+	const modalX =
+		store.modal.left + width.value <= maxWidth ? store.modal.left : store.modal.left - (width.value - store.modal.width)
 
 	return {
-		left: `${modalLeft}px`,
-		top: `${modalTop}px`,
+		left: `${modalX}px`,
+		top: `${modalY}px`,
 	}
 })
 
@@ -54,8 +54,8 @@ const handleInput = (event: Event) => {
 @import url('@stonecrop/themes/default.css');
 
 .amodal {
-	position: absolute;
+	position: fixed;
 	background-color: var(--sc-row-color-zebra-dark);
-	z-index: 100;
+	z-index: 1000;
 }
 </style>

package/src/types/index.ts

@@ -1,3 +1,5 @@
+import { useElementBounding } from '@vueuse/core'
+
 import { createTableStore } from '../stores/table'
 
 /**
@@ -93,22 +95,22 @@ export type TableRow = {
  * @public
  */
 export type TableModal = {
+	bottom?: ReturnType<typeof useElementBounding>['bottom']
 	colIndex?: number
 	event?: string
-	height?: number
-	left?: number
+	height?: ReturnType<typeof useElementBounding>['height']
+	left?: ReturnType<typeof useElementBounding>['left']
 	parent?: HTMLElement
 	rowIndex?: number
-	top?: number
 	visible?: boolean
-	width?: number
+	width?: ReturnType<typeof useElementBounding>['width']
 
 	component?: string
 	componentProps?: Record<string, any>
 }
 
 /**
- * Table modal props definition.
+ * Table modal component props definition.
  * @public
  */
 export type TableModalProps = {