[atable] [aform] change cell style on value update

[Alchez]

Closes #186.

---

@agritheory The feature described in the ticket kinda already existed, but it wasn't reactive so a cell change wouldn't actually trigger the styles to change. This PR simply makes the styles reactive now.

I'm not sure about the intended colorization API here though, and I see a couple of options (doesn't have to be either-or):

• Keep the status quo, and have the target application (fab, etc.) define the necessary custom CSS property (--cell-modified-color) in it's CSS stylesheets (or Vue style blocks, scoped or otherwise) at the :root level.
  • It seems like the Riverence app already defines this property in its stylesheet, so maybe this change fixes a regression?
• Add an additional key in the table config to define the cell-modified styles, which would allow individual tables (even if there are multiple in the same Vue file) to define it's own colors.

---

Here's some other things to consider that may or may not be out of scope of this PR:

• Currently, only the cell's background color is reactive. Should we consider other style properties like text color?
• Should the applied styles be global for all cells, or should each column define it's own cell-modified schema? Maybe it accepts a function that decides the styles based on the value?

[github-actions]

Coverage Report for ./atable

Status	Category	Percentage	Covered / Total
🔴	Lines	67.5% (🎯 70%)	135 / 200
🔴	Statements	68.24% (🎯 70%)	144 / 211
🟢	Functions	76.19% (🎯 70%)	32 / 42
🔴	Branches	46.91% (🎯 70%)	76 / 162

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
atable/src/components/ACell.vue	93.54%	62.22%	100%	93.54%	101, 120, 142-145, 190
atable/src/components/index.ts	66.66%	50%	66.66%	67.44%	46-47, 60, 83-84, 106-117
Unchanged Files
atable/src/utils.ts	100%	100%	100%	100%
atable/src/components/AExpansionRow.vue	0%	0%	0%	0%	33-3
atable/src/components/ARow.vue	66.66%	56%	71.42%	63.63%	56, 63, 67, 71-85, 17
atable/src/components/ATable.vue	51.92%	32.5%	88.88%	51.02%	107-111, 117-145, 203-204
atable/src/components/ATableHeader.vue	100%	50%	100%	100%
atable/src/components/ATableModal.vue	50%	100%	0%	50%	29

Generated in workflow #409 for commit 3bcf5bb by the Vitest Coverage Report Action

[agritheory]

@Alchez This should be implemented in one of the examples

[Alchez]

@agritheory I've added the --cell-modified-color property to the default ATable stories. Here's how it works:

Screencast.From.2024-11-07.12-50-05.mp4