@stonecrop/atable 0.2.52 → 0.2.53

package/dist/components/index.js

@@ -26,7 +26,7 @@ export default class TableDataStore {
         return table;
     }
     createDisplayObject(display) {
-        const defaultDisplay = [Object.assign({}, { modified: false })];
+        const defaultDisplay = [Object.assign({}, { rowModified: false })];
         // TODO: (typing) what is the type of `display` here?
         if (display) {
             if ('0:0' in display) {
@@ -50,7 +50,7 @@ export default class TableDataStore {
                 indent: row.indent || null,
                 isParent: parents.has(rowIndex),
                 isRoot: row.parent === null || row.parent === undefined,
-                modified: false,
+                rowModified: false,
                 open: row.parent === null || row.parent === undefined,
                 parent: row.parent,
             };
@@ -69,13 +69,14 @@ export default class TableDataStore {
         return this.table[`${colIndex}:${rowIndex}`];
     }
     setCellData(rowIndex, colIndex, value) {
-        if (this.table[`${colIndex}:${rowIndex}`] !== value) {
-            this.display[rowIndex].modified = true;
-        }
-        this.table[`${colIndex}:${rowIndex}`] = value;
+        const index = `${colIndex}:${rowIndex}`;
         const col = this.columns[colIndex];
+        if (this.table[index] !== value) {
+            this.display[rowIndex].rowModified = true;
+        }
+        this.table[index] = value;
         this.rows[rowIndex][col.name] = value;
-        return this.table[`${colIndex}:${rowIndex}`];
+        return this.table[index];
     }
     toggleRowExpand(rowIndex) {
         if (this.config.view === 'tree') {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAE3F,MAAM,CAAC,OAAO,OAAO,cAAc;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,KAAK,EAAE,UAAU,CAAA;gBAGhB,EAAE,CAAC,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,WAAW,EAAE,EACvB,IAAI,CAAC,EAAE,QAAQ,EAAE,EACjB,MAAM,CAAC,EAAE,WAAW,EACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAC9B,OAAO,CAAC,EAAE,YAAY,EAAE;IAWzB,iBAAiB;IAUjB,mBAAmB,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE;IAqC5C,IAAI,UAAU,YAEb;IAED,IAAI,gBAAgB,sCAInB;IAED,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;IAIlD,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAU1D,eAAe,CAAC,QAAQ,EAAE,MAAM;CAehC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAE3F,MAAM,CAAC,OAAO,OAAO,cAAc;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,KAAK,EAAE,UAAU,CAAA;gBAGhB,EAAE,CAAC,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,WAAW,EAAE,EACvB,IAAI,CAAC,EAAE,QAAQ,EAAE,EACjB,MAAM,CAAC,EAAE,WAAW,EACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAC9B,OAAO,CAAC,EAAE,YAAY,EAAE;IAWzB,iBAAiB;IAUjB,mBAAmB,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE;IAqC5C,IAAI,UAAU,YAEb;IAED,IAAI,gBAAgB,sCAInB;IAED,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;IAIlD,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAa1D,eAAe,CAAC,QAAQ,EAAE,MAAM;CAehC"}

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

@@ -29,9 +29,9 @@ export type TableDisplay = {
     indent?: number;
     isParent?: boolean;
     isRoot?: boolean;
-    modified?: boolean;
     open?: boolean;
     parent?: number;
+    rowModified?: boolean;
 };
 export type TableRow = {
     [key: string]: any;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,cAAc,CAAA;AAEzC,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IAEZ,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IAC7D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9C,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IACjE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,QAAQ,CAAA;IACb,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,cAAc,CAAA;AAEzC,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IAEZ,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IAC7D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9C,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IACjE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,QAAQ,CAAA;IACb,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.2.52",
+  "version": "0.2.53",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -37,8 +37,8 @@
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^11.1.0",
     "vue": "^3.5.6",
-    "@stonecrop/utilities": "0.2.52",
-    "@stonecrop/themes": "0.2.52"
+    "@stonecrop/themes": "0.2.53",
+    "@stonecrop/utilities": "0.2.53"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.25.3",

package/src/components/ACell.vue

@@ -9,11 +9,11 @@
 		:spellcheck="false"
 		:style="cellStyle"
 		@focus="onFocus"
-		@paste="onChange"
-		@blur="onChange"
-		@input="onChange"
-		@click="handleInput"
-		@mousedown="handleInput"
+		@paste="updateCellData"
+		@blur="updateCellData"
+		@input="updateCellData"
+		@click="showModal"
+		@mousedown="showModal"
 		class="atable__cell"
 		:class="pinned ? 'sticky-column' : ''">
 		<component
@@ -52,20 +52,33 @@ const {
 
 const tableData = inject<TableDataStore>(tableid)
 const cellRef = useTemplateRef<HTMLTableCellElement>('cell')
+const { bottom, left } = useElementBounding(cellRef)
+
+// keep a shallow copy of the original cell value for comparison
+const originalData = tableData.cellData<any>(colIndex, rowIndex)
 const currentData = ref('')
 const cellModified = ref(false)
-const { bottom, left } = useElementBounding(cellRef)
 
 const table = tableData.table
 const column = tableData.columns[colIndex]
 const row = tableData.rows[rowIndex]
 
-const textAlign = computed(() => {
-	return column.align || 'center'
+const textAlign = column.align || 'center'
+const cellWidth = column.width || '40ch'
+
+const isHtmlValue = computed(() => {
+	// TODO: check if display value is a native DOM element
+	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
 })
 
-const cellWidth = computed(() => {
-	return column.width || '40ch'
+const cellStyle = computed((): CSSProperties => {
+	return {
+		textAlign,
+		width: cellWidth,
+		backgroundColor: !cellModified.value ? 'inherit' : 'var(--cell-modified-color)',
+		fontWeight: !cellModified.value ? 'inherit' : 'bold',
+		paddingLeft: getIndent(colIndex, tableData.display[rowIndex]?.indent),
+	}
 })
 
 const displayValue = computed(() => {
@@ -88,12 +101,7 @@ const displayValue = computed(() => {
 	return cellData
 })
 
-const isHtmlValue = computed(() => {
-	// TODO: check if display value is a native DOM element
-	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
-})
-
-const handleInput = () => {
+const showModal = () => {
 	if (column.mask) {
 		// TODO: add masking to cell values
 		// column.mask(event)
@@ -106,7 +114,7 @@ const handleInput = () => {
 		tableData.modal.parent = cellRef.value
 		tableData.modal.top = bottom.value
 		tableData.modal.left = left.value
-		tableData.modal.width = cellWidth.value
+		tableData.modal.width = cellWidth
 
 		if (typeof column.modalComponent === 'function') {
 			tableData.modal.component = column.modalComponent({ table, row, column })
@@ -122,11 +130,11 @@ if (addNavigation) {
 	let handlers = {
 		...defaultKeypressHandlers,
 		...{
-			'keydown.f2': handleInput,
-			'keydown.alt.up': handleInput,
-			'keydown.alt.down': handleInput,
-			'keydown.alt.left': handleInput,
-			'keydown.alt.right': handleInput,
+			'keydown.f2': showModal,
+			'keydown.alt.up': showModal,
+			'keydown.alt.down': showModal,
+			'keydown.alt.left': showModal,
+			'keydown.alt.right': showModal,
 		},
 	}
 
@@ -161,12 +169,14 @@ const onFocus = () => {
 	}
 }
 
-const onChange = () => {
+const updateCellData = () => {
 	if (cellRef.value) {
+		// only apply changes if the cell value has changed after being mounted
+		cellModified.value = cellRef.value.textContent !== originalData
+
 		if (cellRef.value.textContent !== currentData.value) {
 			currentData.value = cellRef.value.textContent
 			cellRef.value.dispatchEvent(new Event('change'))
-			cellModified.value = true // set display instead
 			if (!column.format) {
 				// TODO: need to setup reverse format function
 				tableData.setCellData(rowIndex, colIndex, currentData.value)
@@ -175,21 +185,13 @@ const onChange = () => {
 	}
 }
 
-const getIndent = (colKey: number, indent: number) => {
-	if (indent && colKey === 0 && indent > 0) {
-		return `${indent}ch`
+const getIndent = (colIndex: number, indentLevel?: number) => {
+	if (indentLevel && colIndex === 0 && indentLevel > 0) {
+		return `${indentLevel}ch`
 	} else {
 		return 'inherit'
 	}
 }
-
-const cellStyle: CSSProperties = {
-	textAlign: textAlign.value,
-	width: cellWidth.value,
-	backgroundColor: !cellModified.value ? 'inherit' : 'var(--cell-modified-color)',
-	fontWeight: !cellModified.value ? 'inherit' : 'bold',
-	paddingLeft: getIndent(colIndex, tableData.display[rowIndex]?.indent),
-}
 </script>
 
 <style>

package/src/components/index.ts

@@ -39,7 +39,7 @@ export default class TableDataStore {
 	}
 
 	createDisplayObject(display?: TableDisplay[]) {
-		const defaultDisplay: TableDisplay[] = [Object.assign({}, { modified: false })]
+		const defaultDisplay: TableDisplay[] = [Object.assign({}, { rowModified: false })]
 
 		// TODO: (typing) what is the type of `display` here?
 		if (display) {
@@ -66,7 +66,7 @@ export default class TableDataStore {
 				indent: row.indent || null,
 				isParent: parents.has(rowIndex),
 				isRoot: row.parent === null || row.parent === undefined,
-				modified: false,
+				rowModified: false,
 				open: row.parent === null || row.parent === undefined,
 				parent: row.parent,
 			}
@@ -90,13 +90,16 @@ export default class TableDataStore {
 	}
 
 	setCellData(rowIndex: number, colIndex: number, value: any) {
-		if (this.table[`${colIndex}:${rowIndex}`] !== value) {
-			this.display[rowIndex].modified = true
-		}
-		this.table[`${colIndex}:${rowIndex}`] = value
+		const index = `${colIndex}:${rowIndex}`
 		const col = this.columns[colIndex]
+
+		if (this.table[index] !== value) {
+			this.display[rowIndex].rowModified = true
+		}
+
+		this.table[index] = value
 		this.rows[rowIndex][col.name] = value
-		return this.table[`${colIndex}:${rowIndex}`]
+		return this.table[index]
 	}
 
 	toggleRowExpand(rowIndex: number) {

package/src/types/index.ts

@@ -36,9 +36,9 @@ export type TableDisplay = {
 	indent?: number
 	isParent?: boolean
 	isRoot?: boolean
-	modified?: boolean
 	open?: boolean
 	parent?: number
+	rowModified?: boolean
 }
 
 export type TableRow = {