Merge remote-tracking branch 'upstream/development' into feat-resizab…

…le-columns

aform/CHANGELOG.json

@@ -1,6 +1,24 @@
 {
   "name": "@stonecrop/aform",
   "entries": [
+    {
+      "version": "0.3.4",
+      "tag": "@stonecrop/aform_v0.3.4",
+      "date": "Wed, 18 Dec 2024 09:54:31 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.3",
+      "tag": "@stonecrop/aform_v0.3.3",
+      "date": "Tue, 17 Dec 2024 13:42:30 GMT",
+      "comments": {
+        "none": [
+          {
+            "comment": "small style update to Adate"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.2",
       "tag": "@stonecrop/aform_v0.3.2",

aform/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Change Log - @stonecrop/aform
 
-This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Dec 2024 09:54:31 GMT and should not be manually modified.
+
+## 0.3.4
+Wed, 18 Dec 2024 09:54:31 GMT
+
+_Version update only_
+
+## 0.3.3
+Tue, 17 Dec 2024 13:42:30 GMT
+
+### Updates
+
+- small style update to Adate
 
 ## 0.3.2
 Tue, 17 Dec 2024 10:07:54 GMT

aform/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/aform",
-	"version": "0.3.2",
+	"version": "0.3.4",
 	"license": "MIT",
 	"type": "module",
 	"author": {

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 {

atable/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "name": "@stonecrop/atable",
   "entries": [
+    {
+      "version": "0.3.4",
+      "tag": "@stonecrop/atable_v0.3.4",
+      "date": "Wed, 18 Dec 2024 09:54:31 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "emit cell update in columns with format"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.3",
+      "tag": "@stonecrop/atable_v0.3.3",
+      "date": "Tue, 17 Dec 2024 13:42:30 GMT",
+      "comments": {
+        "none": [
+          {
+            "comment": "modal scrolls with cells and detects edges"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.2",
       "tag": "@stonecrop/atable_v0.3.2",

atable/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @stonecrop/atable
 
-This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Dec 2024 09:54:31 GMT and should not be manually modified.
+
+## 0.3.4
+Wed, 18 Dec 2024 09:54:31 GMT
+
+### Patches
+
+- emit cell update in columns with format
+
+## 0.3.3
+Tue, 17 Dec 2024 13:42:30 GMT
+
+### Updates
+
+- modal scrolls with cells and detects edges
 
 ## 0.3.2
 Tue, 17 Dec 2024 10:07:54 GMT

atable/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/atable",
-	"version": "0.3.2",
+	"version": "0.3.4",
 	"license": "MIT",
 	"type": "module",
 	"author": {

atable/src/components/ACell.vue

@@ -10,7 +10,6 @@
 		:style="cellStyle"
 		@focus="onFocus"
 		@paste="updateCellData"
-		@blur="updateCellData"
 		@input="updateCellData"
 		@click="showModal"
 		class="atable-cell"
@@ -28,7 +27,7 @@
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 import { useElementBounding } from '@vueuse/core'
-import { computed, CSSProperties, ref, useTemplateRef, watch } from 'vue'
+import { computed, type CSSProperties, ref, useTemplateRef } from 'vue'
 
 import { createTableStore } from '../stores/table'
 import { isHtmlString } from '../utils'
@@ -48,12 +47,13 @@ const {
 	pinned?: boolean
 }>()
 
+const emit = defineEmits<{ cellInput: [colIndex: number, rowIndex: number, newValue: string, oldValue: string] }>()
+
 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)
-const displayValue = ref(store.getCellDisplayValue(colIndex, rowIndex))
 const currentData = ref('')
 const cellModified = ref(false)
 
@@ -63,13 +63,7 @@ const row = store.rows[rowIndex]
 const textAlign = column.align || 'center'
 const cellWidth = column.width || '40ch'
 
-watch(
-	() => store.getCellData(colIndex, rowIndex),
-	cellData => {
-		displayValue.value = store.getFormattedValue(colIndex, rowIndex, cellData)
-	}
-)
-
+const displayValue = computed(() => store.getCellDisplayValue(colIndex, rowIndex))
 const isHtmlValue = computed(() => {
 	// TODO: check if display value is a native DOM element
 	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
@@ -97,9 +91,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 })
@@ -155,23 +150,23 @@ const onFocus = () => {
 	}
 }
 
-const updateCellData = () => {
-	if (cellRef.value) {
-		// only apply changes if the cell value has changed after being mounted
-		if (column.format) {
-			cellModified.value = cellRef.value.textContent !== store.getFormattedValue(colIndex, rowIndex, originalData)
-		} else {
-			cellModified.value = cellRef.value.textContent !== originalData
-		}
+const updateCellData = (payload: Event) => {
+	const target = payload.target as HTMLTableCellElement
+	if (target.textContent === currentData.value) {
+		return
+	}
 
-		if (cellRef.value.textContent !== currentData.value) {
-			currentData.value = cellRef.value.textContent
-			cellRef.value.dispatchEvent(new Event('change'))
-			if (!column.format) {
-				// TODO: need to setup reverse format function
-				store.setCellData(colIndex, rowIndex, currentData.value)
-			}
-		}
+	emit('cellInput', colIndex, rowIndex, target.textContent, currentData.value)
+	currentData.value = target.textContent
+
+	// only apply changes if the cell value has changed after being mounted
+	if (column.format) {
+		cellModified.value = target.textContent !== store.getFormattedValue(colIndex, rowIndex, originalData)
+		// TODO: need to setup reverse format function?
+		store.setCellText(colIndex, rowIndex, target.textContent)
+	} else {
+		cellModified.value = target.textContent !== originalData
+		store.setCellData(colIndex, rowIndex, target.textContent)
 	}
 }
 </script>

atable/src/components/ATable.vue

@@ -24,7 +24,8 @@
 						:style="{
 							textAlign: col?.align || 'center',
 							width: col.width ? col.width : store.config.fullWidth ? 'auto' : '40ch',
-						}" />
+						}"
+						@cellInput="emitInput" />
 				</ARow>
 			</slot>
 		</tbody>
@@ -36,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}`"
@@ -90,11 +87,14 @@ const tableRef = useTemplateRef<HTMLTableElement>('table')
 const rowsValue = modelValue ? modelValue : rows
 const store = createTableStore({ columns, rows: rowsValue, id, config })
 
-store.$onAction(({ name, store, args }) => {
+store.$onAction(({ name, store, args, after }) => {
 	if (name === 'setCellData') {
 		const [colIndex, rowIndex, newCellValue] = args
 		const prevCellValue = store.getCellData(colIndex, rowIndex)
-		emit('cellUpdate', [colIndex, rowIndex, newCellValue, prevCellValue])
+
+		after(() => {
+			emit('cellUpdate', colIndex, rowIndex, newCellValue, prevCellValue)
+		})
 	}
 })
 
@@ -117,6 +117,10 @@ onMounted(() => {
 	}
 })
 
+const emitInput = (colIndex: number, rowIndex: number, newCellValue: any, prevCellValue: any) => {
+	emit('cellUpdate', colIndex, rowIndex, newCellValue, prevCellValue)
+}
+
 const assignStickyCellWidths = () => {
 	const table = tableRef.value
 
@@ -151,54 +155,6 @@ const assignStickyCellWidths = () => {
 	}
 }
 
-// const formatCell = (event?: KeyboardEvent, column?: TableColumn, cellData?: any) => {
-// 	let colIndex: number
-// 	const target = event?.target as HTMLTableCellElement
-// 	if (event) {
-// 		colIndex = target.cellIndex
-// 	} else if (column && cellData) {
-// 		colIndex = store.columns.indexOf(column)
-// 	}
-
-// 	if (!column && 'format' in store.columns[colIndex]) {
-// 		// TODO: (utils) create helper to extract format from string
-// 		const format = store.columns[colIndex].format
-// 		if (typeof format === 'function') {
-// 			return format(target.innerHTML)
-// 		} else if (typeof format === 'string') {
-// 			// parse format function from string
-// 			// eslint-disable-next-line @typescript-eslint/no-implied-eval
-// 			const formatFn: (args: any) => any = Function(`"use strict";return (${format})`)()
-// 			return formatFn(target.innerHTML)
-// 		} else {
-// 			return target.innerHTML
-// 		}
-// 	} else if (cellData && 'format' in column) {
-// 		const format = column.format
-// 		if (typeof format === 'function') {
-// 			return format(cellData)
-// 		} else if (typeof format === 'string') {
-// 			// parse format function from string
-// 			// eslint-disable-next-line @typescript-eslint/no-implied-eval
-// 			const formatFn: (args: any) => any = Function(`"use strict";return (${format})`)()
-// 			return formatFn(cellData)
-// 		} else {
-// 			return cellData
-// 		}
-// 	} else if (cellData && column.type.toLowerCase() in ['int', 'decimal', 'float', 'number', 'percent']) {
-// 		return cellData
-// 		// TODO: number formatting
-// 	} else {
-// 		return cellData
-// 	}
-// }
-
-// const moveCursorToEnd = (target: HTMLElement) => {
-// 	target.focus()
-// 	document.execCommand('selectAll', false, null)
-// 	document.getSelection().collapseToEnd()
-// }
-
 window.addEventListener('keydown', (event: KeyboardEvent) => {
 	if (event.key === 'Escape') {
 		if (store.modal.visible) {
@@ -248,6 +204,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;