@cdmx/wappler_ag_grid 2.0.2 → 2.0.4

package/README.md

@@ -2,10 +2,12 @@
 
 **Major Update:** This release upgrades from AG Grid v32.3.7 to v34.1.0, bringing significant performance improvements and exciting new features.
 
-## 🚀 What's New in v2.0.0
+## 🚀 What's New in v2.0.3
 
 1. **🔥 AG Grid v34.1.0** - Latest version with all community features
 2. **⚡ Performance Boost** - Up to 40% bundle size reduction potential
+3. **🎨 HTML Tooltips** - Rich HTML tooltip support with JavaScript functions
+4. **🔧 Enhanced Tooltip System** - Custom tooltip components with automatic HTML detection
 
 - **Breaking Changes:** Some configurations may require updates due to AG Grid v33/v34 changes
 
@@ -40,7 +42,7 @@
 - AG Grid v34 is non-breaking from v33, so most configurations remain the same
 
 ### Recommended Steps:
-1. **Update Package:** Simply update to v2.0.0 - no code changes required for basic functionality
+1. **Update Package:** Simply update to v2.0.2 - no code changes required for basic functionality
 2. **Test Your Grids:** Verify existing grids work as expected
 3. **Explore New Features:** Gradually enable new v34 features as needed:
    - Enable Cell Editor Validation for better data quality
@@ -153,6 +155,14 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 
 51. **Tree Data Drag & Drop**: Enable managed row dragging for Tree Data, meaning the grid will automatically handle the dragging of rows and updating of the data structure. Supports reordering, moving parents and children, and converting leaf nodes into groups. (Default: false)
 
+52. **🎨 HTML Tooltips**: Create rich, interactive tooltips with full HTML support using JavaScript functions. Features include:
+   - Custom HTML content with styling and images
+   - Dynamic content generation based on row data
+   - Automatic HTML detection and rendering
+   - Professional tooltip styling with shadows and borders
+   - Integration with existing tooltip configurations
+   - Performance optimized with on-demand generation
+
 # Data Type Overrides
 
 The Data Type Overrides feature allows you to configure type overrides for specific attributes in the data. This allows you to override the auto-detected data types.
@@ -201,14 +211,86 @@ This grid allows you to define custom color and font settings based on specific
 
 # Tooltip Settings
 
-The Tooltip Settings feature allows you to configure custom tooltips for specific fields in the data.
+The Tooltip Settings feature allows you to configure custom tooltips for specific fields in the data, including support for HTML content and JavaScript functions.
+
+## Basic Tooltip Configuration
 
-To set a custom tooltip text, enter the desired text for the tooltip in the field.
+To set basic tooltips, enter the desired text for the tooltip in the field.
 This grid allows you to configure custom tooltips for specific fields. The grid has the following columns:
 
-1. **Field**: The field name for which you want to set a custom tooltip. 
-2. **Tooltip**: Choose whether to enable ("yes") or disable ("no") the tooltip for the field. 
----
+1. **Field**: The field name for which you want to set a custom tooltip.
+2. **Tooltip**: Choose whether to enable ("yes") or disable ("no") the tooltip for the field.
+
+## Custom Tooltip Text
+
+**Custom Tooltip Text** (Type: textbox)
+- Set a global custom tooltip text that will be applied to all fields that don't have specific tooltip configurations.
+
+## Tooltip Show Delay
+
+**Tooltip Show Delay** (Type: number, Default: 2000)
+- Set the delay in milliseconds before tooltips appear when hovering over cells. This helps prevent tooltips from showing immediately and can improve user experience by avoiding accidental tooltip displays.
+
+## Advanced Tooltips with JavaScript Functions
+
+The **Using JS Function** feature allows you to create rich HTML tooltips using JavaScript functions. This provides full control over tooltip content and styling.
+
+### Configuration
+
+1. **Field**: The field name for which you want to apply the custom tooltip function.
+2. **Function**: The name of your JavaScript function that generates the tooltip content.
+
+### JavaScript Function Example
+
+```javascript
+<script>
+  // Basic HTML tooltip
+  function generateTooltip(data) {
+    return `
+      <div style="max-width: 250px; font-family: Arial, sans-serif;">
+        <h4 style="margin: 0 0 8px 0; color: #333; font-size: 14px;">
+          ${data.title}
+        </h4>
+        <p style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+          ${data.description}
+        </p>
+        <hr style="margin: 8px 0; border: none; border-top: 1px solid #eee;">
+        <div style="font-size: 11px; color: #888;">
+          ID: ${data.id} | Status: ${data.status}
+        </div>
+      </div>
+    `;
+  }
+
+  // Rich tooltip with images and styling
+  function generateStatusTooltip(data) {
+    const statusColor = data.status === 'active' ? '#28a745' : '#dc3545';
+    const statusIcon = data.status === 'active' ? '✓' : '✗';
+
+    return `
+      <div style="max-width: 300px; padding: 12px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
+        <div style="display: flex; align-items: center; margin-bottom: 12px;">
+          <div style="width: 32px; height: 32px; border-radius: 50%; background: ${statusColor}; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; margin-right: 12px;">
+            ${statusIcon}
+          </div>
+          <div>
+            <div style="font-weight: bold; font-size: 16px; color: #333;">${data.name}</div>
+            <div style="font-size: 12px; color: ${statusColor}; font-weight: 500;">${data.status.toUpperCase()}</div>
+          </div>
+        </div>
+        <div style="border-top: 1px solid #eee; padding-top: 8px;">
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px;">
+            <div><strong>ID:</strong> ${data.id}</div>
+            <div><strong>Type:</strong> ${data.type}</div>
+            <div><strong>Created:</strong> ${new Date(data.created_at).toLocaleDateString()}</div>
+            <div><strong>Updated:</strong> ${new Date(data.updated_at).toLocaleDateString()}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+</script>
+```
 
 # Advanced Data Manipulation
 

package/app_connect/components.hjson

@@ -6,7 +6,7 @@
       "groupTitle": "Components",
       "groupIcon": "fa fa-lg fa-cube",
       "title": "AG Grid: @@id@@",
-      "icon": "fa fa-lg fa-table",
+      "icon": "fas fa-lg fa-table",
       "state": "opened",
       "anyParent": true,
       "template": "<dmx-ag-grid id=\"@@id@@\"></dmx-ag-grid>",
@@ -836,6 +836,14 @@
               "type": "text",
               "help": "Specify custom tooltip text"
             },
+            {
+              "name": "tooltipShowDelay",
+              "attribute": "tooltip_show_delay",
+              "title": "Tooltip Show Delay (ms)",
+              "type": "number",
+              "defaultValue": 2000,
+              "help": "Delay in milliseconds before showing tooltips (default: 2000ms)"
+            },
             {
               "name": "tooltipConfig",
               "title": "Configure Field Tooltips",
@@ -845,7 +853,8 @@
               "defaultValue": false,
               "display": "fieldset",
               "show": [
-                "tooltipConfig"
+                "tooltipConfig",
+                "jsTooltipChanges"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -887,6 +896,38 @@
                     "field": "",
                     "tooltip": "no"
                   }
+                },
+                {
+                  "name": "jsTooltipChanges",
+                  "attribute": "dmx-bind:js_tooltip_changes",
+                  "title": "Using JS Function",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "function",
+                      "caption": "Function",
+                      "editable": {
+                        "type": "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "function": ""
+                  },
+                  "help": "Configure JavaScript functions to generate custom tooltips for specific fields. Functions can return HTML content for rich tooltips."
                 }
               ]
             }

package/dmx-ag-grid.js

@@ -41,6 +41,8 @@ dmx.Component('ag-grid', {
     data_changes: { type: Array, default: [] },
     display_data_changes: { type: Array, default: [] },
     js_data_changes: { type: Array, default: [] },
+    js_tooltip_changes: { type: Array, default: [] },
+    tooltip_show_delay: { type: Number, default: 2000 },
     data: { type: Array, default: [] },
     dom_layout: { type: String, default: 'autoHeight' },
     enable_cell_text_selection: { type: Boolean, default: true },
@@ -1046,6 +1048,48 @@ dmx.Component('ag-grid', {
         return value;
       };
     }
+    
+    // Custom HTML Tooltip Component
+    function CustomTooltipComponent() {}
+    
+    CustomTooltipComponent.prototype.init = function(params) {
+      const eGui = this.eGui = document.createElement('div');
+      eGui.classList.add('custom-tooltip');
+      
+      // Use the dark_mode option from grid configuration
+      const isDarkMode = params.context && params.context.dark_mode ? params.context.dark_mode : false;
+      
+      // Apply theme-aware styling
+      if (isDarkMode) {
+        eGui.style.backgroundColor = '#2d3748';
+        eGui.style.border = '1px solid #4a5568';
+        eGui.style.color = '#e2e8f0';
+      } else {
+        eGui.style.backgroundColor = 'white';
+        eGui.style.border = '1px solid #ccc';
+        eGui.style.color = '#333';
+      }
+      
+      eGui.style.borderRadius = '4px';
+      eGui.style.padding = '8px';
+      eGui.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
+      eGui.style.maxWidth = '300px';
+      eGui.style.fontSize = '13px';
+      eGui.style.zIndex = '9999';
+      
+      const tooltipValue = params.value || params.valueFormatted || '';
+      // Check if the content contains HTML tags
+      if (typeof tooltipValue === 'string' && (tooltipValue.includes('<') && tooltipValue.includes('>'))) {
+        eGui.innerHTML = tooltipValue;
+      } else {
+        eGui.textContent = tooltipValue;
+      }
+    };
+    
+    CustomTooltipComponent.prototype.getGui = function() {
+      return this.eGui;
+    };
+    
     createCombinedTooltipValueGetter = (key, dataChanges, dataBindedChanges) => {
       const keyLookup = {};
       dataBindedChanges.forEach(change => {
@@ -1084,7 +1128,7 @@ dmx.Component('ag-grid', {
         else if (Array.isArray(options.tooltip_config)) {
           for (const config of options.tooltip_config) {
             if (config.field === key && config.tooltip === "yes") {
-              return value;
+                return value;
             }
           }
         }
@@ -1163,6 +1207,8 @@ dmx.Component('ag-grid', {
         let filter;
         let valueGetter;
         let filterValueGetter;
+        let tooltipValueGetter;
+        let tooltipComponent;
         let valueFormatter;
         let filterParams;
         let comparator;
@@ -1283,18 +1329,18 @@ dmx.Component('ag-grid', {
           headerName = humanize(key);
         }
         
-        if (options.js_data_changes.length > 0 && Array.isArray(options.js_data_changes)) {
+        if (options.js_data_changes && Array.isArray(options.js_data_changes) && options.js_data_changes.length > 0) {
             // Check if there's a matching change in jsDataChanges
             const matchingJsChange = options.js_data_changes.find(change => change.field === key);
             if (matchingJsChange) {
-              cellRenderer = function (params) {
-                // Don't apply custom renderer to pinned bottom rows (totals)
-                if (params.node && params.node.rowPinned === 'bottom') {
-                  return "-";
-                }
-                if (typeof window[matchingJsChange.function] === 'function') {
-                  const cellValue = window[matchingJsChange.function](params.data); 
-                  return cellValue;
+                              cellRenderer = function (params) {
+                  // Don't apply custom renderer to pinned bottom rows (totals)
+                  if (params.node && params.node.rowPinned === 'bottom') {
+                    return "-";
+                  }
+                  if (typeof window[matchingJsChange.function] === 'function') {
+                    const cellValue = window[matchingJsChange.function](params.data);
+                    return cellValue;
                 }
               }
             }
@@ -1307,6 +1353,22 @@ dmx.Component('ag-grid', {
           cellRenderer = undefined;
           colId = undefined;
         }
+        
+        // Handle JS tooltip changes
+        if (options.js_tooltip_changes && Array.isArray(options.js_tooltip_changes) && options.js_tooltip_changes.length > 0) {
+          const tooltipChange = options.js_tooltip_changes.find(change => change.field === key);
+          if (tooltipChange) {
+            tooltipValueGetter = (params) => {
+              if (typeof window[tooltipChange.function] === 'function') {
+                return window[tooltipChange.function](params.data);
+              }
+              return params.value;
+            };
+            
+            // Use custom tooltip component for HTML rendering
+            tooltipComponent = 'CustomTooltipComponent';
+          }
+        }
         if (key =='status' && options.row_status_event) {
           cellRenderer = 'checkboxCellRenderer';
           colId = 'statusColumn';
@@ -1412,7 +1474,34 @@ dmx.Component('ag-grid', {
           filterValueGetter: filterValueGetter,
           filterParams: filterParams,
           comparator: comparator,
-          tooltipValueGetter: tooltipValueGetter,
+          ...(tooltipComponent ? {
+            tooltipComponent: tooltipComponent,
+            tooltipValueGetter: tooltipValueGetter
+          } : tooltipValueGetter && typeof tooltipValueGetter === 'function' ? (() => {
+            // Check if tooltip content contains HTML
+            const sampleParams = { data: rowData[0] || {}, value: '' };
+            const sampleTooltip = tooltipValueGetter(sampleParams);
+            const containsHtml = typeof sampleTooltip === 'string' && 
+              (sampleTooltip.includes('<') && sampleTooltip.includes('>'));
+            
+            return containsHtml ? {
+              tooltipComponent: 'CustomTooltipComponent',
+              tooltipValueGetter: tooltipValueGetter
+            } : {
+              tooltipValueGetter: tooltipValueGetter
+            };
+          })() : tooltipValueGetter && typeof tooltipValueGetter === 'object' && tooltipValueGetter.isHtml ? {
+            tooltipComponent: function(params) {
+              return {
+                getGui: function() {
+                  const element = document.createElement('div');
+                  element.innerHTML = tooltipValueGetter.htmlContent;
+                  element.className = 'ag-tooltip-custom';
+                  return element;
+                }
+              };
+            }
+          } : {}),
           cellStyle: applyCellStyle,
           ...(cwidths.hasOwnProperty(key) && {
             minWidth: parseInt(cwidths[key].min_width),
@@ -1570,6 +1659,9 @@ dmx.Component('ag-grid', {
       getRowStyle: options.rstyles ? createRowStyleFunction(options.rstyles): undefined,
       localeText: localeText,
       enableRtl: options.enable_rtl,
+      context: {
+        dark_mode: options.dark_mode
+      },
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
       onRowDoubleClicked: enableRowDoubleClickEvent ? onRowDoubleClicked : undefined,
       onCellClicked: enableCellClickEvent ? onCellClicked : undefined,
@@ -1612,6 +1704,7 @@ dmx.Component('ag-grid', {
       suppressClipboardPaste: this.props.suppress_clipboard_paste,
       suppressScrollOnNewData: this.props.suppress_scroll_on_new_data,
       columnHoverHighlight: this.props.column_hover_highlight,
+      tooltipShowDelay: options.tooltip_show_delay,
       onFilterModified: function (params) { 
         const columnApi = params.api;
           const rowCount = columnApi.getDisplayedRowCount();
@@ -1727,7 +1820,8 @@ dmx.Component('ag-grid', {
       components: {
         clickCellRenderer: clickCellRenderer,
         checkboxCellRenderer: checkboxCellRenderer,
-        actionsRenderer: actionsRenderer
+        actionsRenderer: actionsRenderer,
+        CustomTooltipComponent: CustomTooltipComponent
       }
     };
     if (options.row_checkbox_event) {

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.0.2",
+    "version": "2.0.4",
     "type": "module",
     "description": "App Connect module for AG Grid v34 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",
     "author": {
-        "name": "cdmx1",
-        "url": "https://github.com/cdmx1"
+        "name": "cdmx-in",
+        "url": "https://github.com/cdmx-in"
     },
     "keywords": [
         "wappler-extension",