@cdmx/wappler_ag_grid 2.0.3 → 2.0.5

package/README.md

@@ -226,6 +226,11 @@ This grid allows you to configure custom tooltips for specific fields. The grid
 **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.

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",

package/dmx-ag-grid.js

@@ -42,6 +42,7 @@ dmx.Component('ag-grid', {
     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 },
@@ -487,8 +488,16 @@ dmx.Component('ag-grid', {
     let exportToCSV = this.props.export_to_csv;
     let exportToPDF = this.props.export_to_pdf;
     let cellRenderer;
-    const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
-    this.$node.innerHTML = `<div id=${options.id}-grid class="${gridThemeClass}"></div>`;
+    
+    // Set up theme mode
+    this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
+    
+    // Apply theme mode using dark_mode attribute
+    const themeContainer = this.$node.querySelector(`#${options.id}-grid`);
+    if (themeContainer) {
+      themeContainer.dataset.agThemeMode = options.dark_mode ? 'dark' : 'light';
+    }
+    
     let idFieldPresent = false;
     window.cellClickEvent = (columnName, value, idValue) => {
       this.set('fields', {"field": columnName, "data": value});
@@ -1054,8 +1063,21 @@ dmx.Component('ag-grid', {
     CustomTooltipComponent.prototype.init = function(params) {
       const eGui = this.eGui = document.createElement('div');
       eGui.classList.add('custom-tooltip');
-      eGui.style.backgroundColor = 'white';
-      eGui.style.border = '1px solid #ccc';
+      
+      // 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)';
@@ -1075,7 +1097,7 @@ dmx.Component('ag-grid', {
     CustomTooltipComponent.prototype.getGui = function() {
       return this.eGui;
     };
-    
+
     createCombinedTooltipValueGetter = (key, dataChanges, dataBindedChanges) => {
       const keyLookup = {};
       dataBindedChanges.forEach(change => {
@@ -1340,6 +1362,7 @@ dmx.Component('ag-grid', {
           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) {
@@ -1644,6 +1667,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,
@@ -1686,6 +1712,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();

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.0.3",
+    "version": "2.0.5",
     "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",