@cdmx/wappler_ag_grid 2.1.3 → 2.1.4

package/.claude/settings.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git --no-pager diff HEAD -- dmx-ag-grid.js app_connect/components.hjson)"
+    ]
+  }
+}

package/CHANGELOG.md

@@ -1,4 +1,26 @@
-# Change Log - HTML Export Removal Feature
+# Change Log
+
+## Version 2.1.4 (Row Color Formatting Fix)
+
+### Summary
+Fixed row color styling (`rstyles`) so it works dynamically, supports multiple colors for the
+same field, and can color rows directly by field value.
+
+### Changes Made
+1. **`app_connect/components.hjson`** - removed `"key": "field"` from the "Configure Row Colors"
+   grid so it serializes as an array (unlimited rows per field). Renamed the `condition` column to
+   "Condition" and documented the supported syntax.
+2. **`dmx-ag-grid.js`** - changed the `rstyles` prop default from `{}` to `[]`, and rewrote
+   `createRowStyleFunction` to mirror the cell-style path: it normalizes both array and legacy
+   object input (backward compatible), and evaluates value/operator expressions
+   (`status == active`, `amount > 1000`, compound `&&`/`||`), function conditions (`myFn()`), and a
+   Field + plain-value exact-match shorthand. First matching condition wins.
+3. **`dmx-ag-grid.js`** - fixed operator parsing in `extractConditionParts` so `>=` and `<=`
+   are no longer mis-parsed as `>`/`<` (this also fixes `>=`/`<=` conditions in cell styles).
+   Function conditions require trailing `()` so plain shorthand values (e.g. status `open`)
+   cannot collide with `window` built-ins like `window.open`.
+
+---
 
 ## Version 2.0.15 (HTML Export Removal Added)
 

package/app_connect/components.hjson

@@ -808,14 +808,13 @@
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
-              "help": "Add custom Colors function that will return true or false. Add the fucntion name in the Function column."
+              "help": "Color whole rows by condition. Add one row per color - the same field can have many. Condition supports value/operator expressions (e.g. status == active, amount > 1000, status == open && amount > 100), a function name returning a boolean (e.g. myFn()), or - as a shorthand - a Field plus a plain value for an exact match. Values are unquoted."
               "children": [
                 {
                   "name": "listRowColors",
                   "attribute": "dmx-bind:rstyles",
                   "title": "Row Colors",
                   "type": "grid",
-                  "key": "field",
                   "dataBindings": true,
                   "jsonFormat": true,
                   "encloseBT": true,
@@ -827,14 +826,16 @@
                       "caption": "Field",
                       "editable": {
                         "type": "text"
-                      }
+                      },
+                      help: "Optional. Used with the shorthand (Field + plain value in Condition) for an exact match."
                     },
                     {
                       "field": "condition",
-                      "caption": "Function",
+                      "caption": "Condition",
                       "editable": {
                         "type": "text"
-                      }
+                      },
+                      help: "Expression (status == active, amount > 1000, a && b), function name with trailing parentheses (myFn() - the () are required), or a plain value matched against Field. Values are unquoted."
                     },
                     {
                       "field": "customColor",

package/dmx-ag-grid.js

@@ -24,7 +24,7 @@ dmx.Component('ag-grid', {
     tooltip_config: { type: Array, default: [] },
     custom_tooltip: { type: String, default: null },
     cstyles: { type: Array, default: [] },
-    rstyles: { type: Array, default: {} },
+    rstyles: { type: Array, default: [] },
     cnames: { type: Object, default: {} },
     cwidths: { type: Object, default: {} },
     ctypes: { type: Array, default: [] },
@@ -850,7 +850,8 @@ dmx.Component('ag-grid', {
 
     function extractConditionParts(condition) {
           
-      const operators = ['===', '==', '!=', '>', '<', '>=', '<='];
+      // Multi-char operators must be checked before '>' / '<' so '>=' and '<=' parse correctly
+      const operators = ['===', '==', '!=', '>=', '<=', '>', '<'];
       let operator;
       let left;
       let right;
@@ -1065,27 +1066,51 @@ dmx.Component('ag-grid', {
     //Custom Row Styles
     function createRowStyleFunction(rstyles) {
       return function(params) {
-        if (!rstyles || !Array.isArray(rstyles) || rstyles.length === 0) {
+        // Accept both the array form (current) and the legacy object-keyed-by-field form
+        const styles = Array.isArray(rstyles)
+          ? rstyles
+          : (rstyles && typeof rstyles === 'object' ? Object.values(rstyles) : []);
+        if (styles.length === 0) {
           return; // No styles to apply
         }
-        const rowStyle = {};
-        for (const style of rstyles) {
-          const condition = style.condition.replace(/\(\)$/, ''); // Remove () if present at the end
+        for (const style of styles) {
+          if (!style || !style.customColor) continue;
+          const condition = (style.condition || '').toString().trim();
+          const field = style.field;
           const customColor = style.customColor;
-          let conditionResult;
-          if (typeof window[condition] === 'function') {
-            const result = window[condition](params.data);
+          if (condition === '') continue;
+          let conditionResult = false;
+
+          if (condition.endsWith('()') && typeof window[condition.replace(/\(\)$/, '')] === 'function') {
+            // Function-based condition: receives row data, must return a boolean
+            const result = window[condition.replace(/\(\)$/, '')](params.data);
             if (typeof result !== 'boolean') {
               console.error('Row condition function must return a boolean value.');
-              return;
+              continue;
             }
             conditionResult = result;
+          } else if (/(===|==|!=|>=|<=|>|<)/.test(condition)) {
+            // Value/operator expression, with support for compound && / ||
+            if (/&&|\|\|/.test(condition)) {
+              const tokens = condition.split(/\s*(&&|\|\|)\s*/).filter(t => t !== '');
+              conditionResult = evaluateConditions(tokens, params);
+            } else {
+              const [left, operator, right] = extractConditionParts(condition);
+              conditionResult = params.data.hasOwnProperty(left) &&
+                (params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false);
+            }
+          } else if (field) {
+            // Shorthand: Field + plain value => exact match on that field's value
+            conditionResult = params.data.hasOwnProperty(field) &&
+              params.data[field] !== null &&
+              String(params.data[field]) === condition;
           }
+
           if (conditionResult) {
-            rowStyle.background = customColor;
+            return { background: customColor }; // first match wins
           }
         }
-        return rowStyle;
+        return; // no condition matched
       };
     }
     dateFilterParams = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.1.3",
+    "version": "2.1.4",
     "type": "module",
     "description": "App Connect module for AG Grid v35 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",
@@ -26,3 +26,4 @@
         "publish-dry-run": "npm publish ./dist --access public --dry-run"
     }
 }
+