[atable] added background gradient to rows with changed content in atable

atable/src/components/ACell.vue

@@ -13,7 +13,7 @@
 		@input="updateCellData"
 		@click="showModal"
 		class="atable-cell"
-		:class="pinned ? 'sticky-column' : ''">
+		:class="cellClasses">
 		<component
 			v-if="column.cellComponent"
 			:is="column.cellComponent"
@@ -38,6 +38,7 @@ const {
 	store,
 	addNavigation = true,
 	tabIndex = 0,
+	pinned = false,
 } = defineProps<{
 	colIndex: number
 	rowIndex: number
@@ -73,12 +74,18 @@ const cellStyle = computed((): CSSProperties => {
 	return {
 		textAlign,
 		width: cellWidth,
-		backgroundColor: !cellModified.value ? 'inherit' : 'var(--sc-cell-changed-color)',
 		fontWeight: !cellModified.value ? 'inherit' : 'bold',
 		paddingLeft: store.getIndent(colIndex, store.display[rowIndex]?.indent),
 	}
 })
 
+const cellClasses = computed(() => {
+	return {
+		'sticky-column': pinned,
+		'cell-modified': cellModified.value,
+	}
+})
+
 const showModal = () => {
 	if (column.mask) {
 		// TODO: add masking to cell values
@@ -210,4 +217,11 @@ const updateCellData = (payload: Event) => {
 	text-wrap: nowrap;
 	box-sizing: border-box;
 }
+.cell-modified {
+	font-weight: bold;
+	font-style: italic;
+}
+.cell-modified-highlight {
+	background-color: var(--sc-cell-changed-color);
+}
 </style>

atable/src/components/AExpansionRow.vue

@@ -94,3 +94,10 @@ if (addNavigation) {
 	padding: 1.5rem;
 }
 </style>
+<style scoped>
+.expandable-row.changed-row-gradient:has(td.cell-modified) {
+	--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);
+	--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);
+	background: linear-gradient(90deg, var(--cell-color-start), var(--cell-color-end));
+}
+</style>

atable/src/components/ARow.vue

@@ -1,5 +1,5 @@
 <template>
-	<tr ref="rowEl" :tabindex="tabIndex" v-show="isRowVisible" class="table-row">
+	<tr ref="rowEl" :tabindex="tabIndex" v-show="isRowVisible" class="atable-row">
 		<!-- render numbered/tree view index; skip render for uncounted lists -->
 		<slot name="index" v-if="store.config.view !== 'uncounted'">
 			<td
@@ -68,7 +68,7 @@ if (addNavigation) {
 <style>
 @import url('@stonecrop/themes/default.css');
 
-.table-row {
+.atable-row {
 	border-top: 1px solid var(--sc-row-border-color);
 	display: flex;
 	background-color: white;
@@ -103,4 +103,18 @@ if (addNavigation) {
 	padding-top: var(--sc-atable-row-padding);
 	padding-bottom: var(--sc-atable-row-padding);
 }
+/* sticky cells in modified rows should be a solid color to properly hide non-sticky cells */
+.atable-row:has(td.cell-modified) > td.sticky-column,
+.atable-row:has(td.cell-modified) > th.sticky-column,
+.atable-row:has(td.cell-modified) > td.sticky-index,
+.atable-row:has(td.cell-modified) > th.sticky-index {
+	background: var(--sc-cell-changed-color);
+}
+</style>
+<style scoped>
+.atable-row.changed-row-gradient:has(td.cell-modified) {
+	--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);
+	--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);
+	background: linear-gradient(90deg, var(--cell-color-start), var(--cell-color-end));
+}
 </style>

common/changes/@stonecrop/atable/feat-atable-gradient-cell-change_2024-12-05-17-42.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "added gradient to changed rows in atable",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}

common/changes/@stonecrop/themes/feat-atable-gradient-cell-change_2024-12-05-17-42.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/themes",
+      "comment": "added cell change color variable",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/themes"
+}

themes/default/_variables.css

@@ -40,7 +40,7 @@
 	--sc-input-label-color: var(--sc-gray-60);
 	--sc-required-border: #e63c28;
 	--sc-cell-changed-color: #d8edff;
-	--sc-form-border: var(--sc-gray-20);
+	--sc-form-border: var(--sc-gray-5);
 	--sc-form-background: #ffffff;
 	--sc-input-field-background: #ffffff;
 	--sc-input-field-disabled-background: var(--sc-gray-5);