@lowdefy/blocks-aggrid 5.0.0 → 5.1.0

package/dist/AgGrid.js

@@ -1,5 +1,5 @@
 /*
-  Copyright 2021 Lowdefy, Inc
+  Copyright 2020-2026 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -18,6 +18,7 @@ import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-mod
 import { CsvExportModule } from '@ag-grid-community/csv-export';
 import processColDefs from './processColDefs.js';
 import assignRowId from './assignRowId.js';
+import LoadingOverlay from './LoadingOverlay.js';
 const AgGrid = ({ properties, methods, loading, events })=>{
     const { quickFilterValue, columnDefs, defaultColDef, rowData: newRowData, ...someProperties } = properties;
     const [rowData, setRowData] = useState(newRowData ?? []);
@@ -118,14 +119,6 @@ const AgGrid = ({ properties, methods, loading, events })=>{
             }
             gridRef.current.columnApi.autoSizeColumns(allColumnIds, skipHeader);
         });
-        if (gridRef.current.api) {
-            if (loading) {
-                gridRef.current.api.showLoadingOverlay();
-            }
-            if (!loading) {
-                gridRef.current.api.hideOverlay();
-            }
-        }
     }, []);
     useEffect(()=>{
         if (JSON.stringify(rowData) !== JSON.stringify(newRowData)) {
@@ -137,7 +130,13 @@ const AgGrid = ({ properties, methods, loading, events })=>{
     if (quickFilterValue && quickFilterValue === '') {
         gridRef.current.api.setQuickFilter(quickFilterValue); // check if empty string matches all
     }
-    return /*#__PURE__*/ React.createElement(AgGridReact, {
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            position: 'relative',
+            width: '100%',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ React.createElement(AgGridReact, {
         ...someProperties,
         rowData: rowData,
         defaultColDef: memoDefaultColDef,
@@ -153,7 +152,8 @@ const AgGrid = ({ properties, methods, loading, events })=>{
         ],
         columnDefs: processColDefs(columnDefs, methods),
         ref: gridRef,
-        getRowId: getRowId
-    });
+        getRowId: getRowId,
+        suppressLoadingOverlay: true
+    }), loading && /*#__PURE__*/ React.createElement(LoadingOverlay, null));
 };
 export default AgGrid;

package/dist/AgGridInput.js

@@ -18,6 +18,7 @@ import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-mod
 import { CsvExportModule } from '@ag-grid-community/csv-export';
 import processColDefs from './processColDefs.js';
 import assignRowId from './assignRowId.js';
+import LoadingOverlay from './LoadingOverlay.js';
 const AgGridInput = ({ properties, methods, loading, events, value })=>{
     const { quickFilterValue, columnDefs, defaultColDef, ...someProperties } = properties;
     const [rowData, setRowData] = useState(value ?? []);
@@ -167,14 +168,6 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
             }
             gridRef.current.columnApi.autoSizeColumns(allColumnIds, skipHeader);
         });
-        if (gridRef.current.api) {
-            if (loading) {
-                gridRef.current.api.showLoadingOverlay();
-            }
-            if (!loading) {
-                gridRef.current.api.hideOverlay();
-            }
-        }
     }, []);
     useEffect(()=>{
         if (JSON.stringify(rowData) !== JSON.stringify(value)) {
@@ -186,7 +179,13 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
     if (quickFilterValue && quickFilterValue === '') {
         gridRef.current.api.setQuickFilter(quickFilterValue); // check if empty string matches all
     }
-    return /*#__PURE__*/ React.createElement(AgGridReact, {
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            position: 'relative',
+            width: '100%',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ React.createElement(AgGridReact, {
         ...someProperties,
         rowData: rowData,
         onCellClicked: onCellClicked,
@@ -204,7 +203,8 @@ const AgGridInput = ({ properties, methods, loading, events, value })=>{
         ],
         columnDefs: processColDefs(columnDefs, methods),
         ref: gridRef,
-        getRowId: getRowId
-    });
+        getRowId: getRowId,
+        suppressLoadingOverlay: true
+    }), loading && /*#__PURE__*/ React.createElement(LoadingOverlay, null));
 };
 export default AgGridInput;

package/dist/LoadingOverlay.js

@@ -0,0 +1,42 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+const wrapperStyle = {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'color-mix(in srgb, var(--ant-color-bg-container) 70%, transparent)',
+    zIndex: 2,
+    pointerEvents: 'all'
+};
+const boxStyle = {
+    padding: '8px 16px',
+    borderRadius: 'var(--ant-border-radius)',
+    boxShadow: 'var(--ant-box-shadow-secondary)',
+    backgroundColor: 'var(--ant-color-bg-container)',
+    color: 'var(--ant-color-text)',
+    border: '1px solid var(--ant-color-border)',
+    fontSize: 'var(--ant-font-size)'
+};
+function LoadingOverlay() {
+    return /*#__PURE__*/ React.createElement("div", {
+        style: wrapperStyle
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: boxStyle
+    }, "Loading..."));
+}
+export default LoadingOverlay;

package/dist/ag-grid-antd.module.css

@@ -1,22 +1,107 @@
 .antdTheme.antdTheme {
   --ag-background-color: var(--ant-color-bg-container);
   --ag-foreground-color: var(--ant-color-text);
+  --ag-secondary-foreground-color: var(--ant-color-text-secondary);
   --ag-border-color: var(--ant-color-border);
   --ag-secondary-border-color: var(--ant-color-border-secondary);
   --ag-header-background-color: var(--ant-color-fill-quaternary);
   --ag-header-foreground-color: var(--ant-color-text);
+  --ag-header-cell-hover-background-color: var(--ant-color-fill-tertiary);
+  --ag-header-cell-moving-background-color: var(--ant-color-fill-secondary);
   --ag-tooltip-background-color: var(--ant-color-bg-spotlight);
   --ag-odd-row-background-color: var(--ant-color-fill-quaternary);
   --ag-control-panel-background-color: var(--ant-color-bg-elevated);
   --ag-subheader-background-color: var(--ant-color-bg-layout);
+  --ag-subheader-toolbar-background-color: var(--ant-color-bg-layout);
   --ag-selected-row-background-color: var(--ant-color-primary-bg);
   --ag-row-hover-color: var(--ant-color-primary-bg-hover);
   --ag-column-hover-color: var(--ant-color-primary-bg-hover);
+  --ag-range-selection-highlight-color: var(--ant-color-primary-bg-hover);
   --ag-modal-overlay-background-color: var(--ant-color-bg-mask);
   --ag-input-disabled-background-color: var(--ant-color-bg-container-disabled);
   --ag-input-disabled-border-color: var(--ant-color-border);
   --ag-disabled-foreground-color: var(--ant-color-text-disabled);
   --ag-chip-background-color: var(--ant-color-fill-secondary);
   --ag-input-focus-box-shadow: 0 0 0 2px var(--ant-color-primary-bg);
+  --ag-input-focus-border-color: var(--ant-color-primary);
+  --ag-range-selection-border-color: var(--ant-color-primary);
+  --ag-range-selection-background-color: var(--ant-color-primary-bg);
+  --ag-checkbox-checked-color: var(--ant-color-primary);
+  --ag-checkbox-unchecked-color: var(--ant-color-text-quaternary);
+  --ag-checkbox-background-color: var(--ant-color-bg-container);
   --ag-card-shadow: var(--ant-box-shadow-secondary);
+  --ag-popup-shadow: var(--ant-box-shadow);
+  --ag-font-family: var(--ant-font-family);
+  --ag-font-size: var(--ant-font-size);
+}
+
+.antdTheme :global(.ag-root-wrapper) {
+  border-radius: var(--ant-border-radius);
+  overflow: hidden;
+}
+
+/* Avatar sizing per ag-grid theme — reads row-height via the wrapper class. */
+.antdTheme:global(.ag-theme-balham),
+.antdTheme:global(.ag-theme-balham-dark) {
+  --lf-avatar-size: 20px;
+  --lf-avatar-font-size: 10px;
+}
+.antdTheme:global(.ag-theme-alpine),
+.antdTheme:global(.ag-theme-alpine-dark) {
+  --lf-avatar-size: var(--ant-control-height-sm, 24px);
+  --lf-avatar-font-size: var(--ant-font-size-sm, 12px);
+}
+.antdTheme:global(.ag-theme-material) {
+  --lf-avatar-size: 26px;
+  --lf-avatar-font-size: var(--ant-font-size-sm, 12px);
+}
+
+.antdTheme :global(.ag-overlay-loading-wrapper) {
+  background-color: color-mix(in srgb, var(--ant-color-bg-container) 70%, transparent);
+}
+
+.antdTheme :global(.ag-overlay-loading-center) {
+  border-radius: var(--ant-border-radius);
+  box-shadow: var(--ant-box-shadow-secondary);
+}
+
+.antdTheme :global(.ag-overlay-no-rows-wrapper) {
+  color: var(--ant-color-text-secondary);
+}
+
+.antdTheme :global(.ag-cell) {
+  display: flex;
+  align-items: center;
+  line-height: var(--ant-line-height, 1.5);
+}
+
+.antdTheme :global(.lf-ellipsis-1),
+.antdTheme :global(.lf-ellipsis-2),
+.antdTheme :global(.lf-ellipsis-3),
+.antdTheme :global(.lf-ellipsis-4),
+.antdTheme :global(.lf-ellipsis-5),
+.antdTheme :global(.lf-ellipsis-6) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+  word-break: break-word;
+}
+.antdTheme :global(.lf-ellipsis-1) {
+  -webkit-line-clamp: 1;
+}
+.antdTheme :global(.lf-ellipsis-2) {
+  -webkit-line-clamp: 2;
+}
+.antdTheme :global(.lf-ellipsis-3) {
+  -webkit-line-clamp: 3;
+}
+.antdTheme :global(.lf-ellipsis-4) {
+  -webkit-line-clamp: 4;
+}
+.antdTheme :global(.lf-ellipsis-5) {
+  -webkit-line-clamp: 5;
+}
+.antdTheme :global(.lf-ellipsis-6) {
+  -webkit-line-clamp: 6;
 }

package/dist/blocks/AgGridAlpine/meta.js

@@ -65,6 +65,14 @@
                 rows: 'The displayed rows after sorting.',
                 sort: 'The sort column state.'
             }
+        },
+        onCellLink: {
+            description: 'Triggered when a built-in `cell.type: link` (or avatar with `link`) cell is clicked. Wire to a `Link` action with `params: { _event: link }` to navigate.',
+            event: {
+                link: 'The resolved link config (pageId/href/urlQuery/back/home/newTab).',
+                row: 'The row data.',
+                value: 'The cell value.'
+            }
         }
     },
     properties: {
@@ -87,6 +95,21 @@
                 type: 'string',
                 description: 'The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/).'
             },
+            enableBrowserTooltips: {
+                type: 'boolean',
+                default: false,
+                description: "Set to `true` to use the browser native `title` attribute tooltips instead of AG Grid's styled tooltip component."
+            },
+            tooltipShowDelay: {
+                type: 'number',
+                default: 2000,
+                description: 'The delay in milliseconds before a tooltip is shown. Not applied when `enableBrowserTooltips` is `true`.'
+            },
+            tooltipHideDelay: {
+                type: 'number',
+                default: 10000,
+                description: 'The delay in milliseconds before a tooltip is hidden. Not applied when `enableBrowserTooltips` is `true`.'
+            },
             defaultColDef: {
                 type: 'object',
                 description: 'Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/).'
@@ -138,6 +161,243 @@
                                 'string'
                             ],
                             description: 'A function (using the `_function` operator) or expression to format a value, should return a string. Not used for CSV export or copy to clipboard, only for UI cell rendering.'
+                        },
+                        tooltipField: {
+                            type: 'string',
+                            description: "The field of the row object to read the tooltip value from. When set, hovering a cell shows a tooltip with that value using the grid's default tooltip component."
+                        },
+                        tooltipValueGetter: {
+                            type: 'object',
+                            description: 'Provide a function (using the `_function` operator) that returns the tooltip value for a cell. Overrides `tooltipField`.'
+                        },
+                        tooltipComponent: {
+                            type: 'object',
+                            description: 'Provide a custom tooltip component. See AG Grid tooltip component docs (https://www.ag-grid.com/react-data-grid/component-tooltip/).'
+                        },
+                        ellipsis: {
+                            type: 'number',
+                            description: 'Line-clamp count for long text. Automatically enables `wrapText` and `autoHeight` and applies the `.lf-ellipsis-N` class (1–6).'
+                        },
+                        cell: {
+                            type: 'object',
+                            description: 'Built-in cell renderer. Takes precedence over `cellRenderer` when `type` is set. Field-valued keys (e.g. `nameField`, `srcField`, `urlQuery.*`) are row-data paths.',
+                            properties: {
+                                type: {
+                                    type: 'string',
+                                    enum: [
+                                        'tag',
+                                        'avatar',
+                                        'link',
+                                        'date',
+                                        'boolean',
+                                        'progress',
+                                        'number'
+                                    ],
+                                    description: 'The built-in renderer to use.'
+                                },
+                                colorMap: {
+                                    type: 'object',
+                                    description: 'Tag: map of cell value → color (antd tag color name or hex). Used when `cell.type: tag`.'
+                                },
+                                colorFrom: {
+                                    type: 'string',
+                                    description: 'Tag: row-data path to a color value. Takes precedence over `colorMap`.'
+                                },
+                                default: {
+                                    type: 'string',
+                                    description: 'Tag: fallback color for values not in `colorMap`.'
+                                },
+                                nameField: {
+                                    type: 'string',
+                                    description: 'Avatar: row-data path for the name label.'
+                                },
+                                srcField: {
+                                    type: 'string',
+                                    description: 'Avatar: row-data path for the image src (optional).'
+                                },
+                                idField: {
+                                    type: 'string',
+                                    description: 'Avatar: row-data path for an id used to seed initials colour.'
+                                },
+                                shape: {
+                                    type: 'string',
+                                    enum: [
+                                        'circle',
+                                        'square'
+                                    ],
+                                    description: 'Avatar shape. Defaults to `circle`.'
+                                },
+                                link: {
+                                    type: 'object',
+                                    description: 'Avatar/Link: navigation config. Emits `onCellLink` on click. `pageId`/`href`/`back`/`home`/`newTab` are literal; `urlQuery` values are row-data paths.'
+                                },
+                                pageId: {
+                                    type: 'string',
+                                    description: 'Link: target page id (literal).'
+                                },
+                                href: {
+                                    type: 'string',
+                                    description: 'Link: literal href (overrides `pageId`).'
+                                },
+                                back: {
+                                    type: 'boolean',
+                                    description: 'Link: navigate back.'
+                                },
+                                home: {
+                                    type: 'boolean',
+                                    description: 'Link: navigate home.'
+                                },
+                                newTab: {
+                                    type: 'boolean',
+                                    description: 'Link: open in a new tab.'
+                                },
+                                urlQuery: {
+                                    type: 'object',
+                                    description: 'Link: query params. Each value is a row-data path.'
+                                },
+                                labelField: {
+                                    type: 'string',
+                                    description: 'Link: row-data path for the visible label (falls back to cell value).'
+                                },
+                                format: {
+                                    type: 'string',
+                                    description: 'Date: dayjs format string. Default `YYYY-MM-DD HH:mm`.'
+                                },
+                                relative: {
+                                    type: 'boolean',
+                                    description: 'Date: render as relative time (e.g. "3 hours ago").'
+                                },
+                                trueLabel: {
+                                    type: 'string',
+                                    description: 'Boolean: label when truthy.'
+                                },
+                                falseLabel: {
+                                    type: 'string',
+                                    description: 'Boolean: label when falsy.'
+                                },
+                                trueColor: {
+                                    type: 'string',
+                                    description: 'Boolean: CSS colour when truthy.'
+                                },
+                                falseColor: {
+                                    type: 'string',
+                                    description: 'Boolean: CSS colour when falsy.'
+                                },
+                                thresholds: {
+                                    type: 'array',
+                                    description: 'Progress: threshold values (ascending). Each threshold defines where the next colour starts.',
+                                    items: {
+                                        type: 'number'
+                                    }
+                                },
+                                colors: {
+                                    type: 'array',
+                                    description: 'Progress: colour per bucket (length = thresholds.length + 1).',
+                                    items: {
+                                        type: 'string'
+                                    }
+                                },
+                                suffix: {
+                                    type: 'string',
+                                    description: 'Number/Progress: literal suffix appended after the formatted value. Default `%` for progress.'
+                                },
+                                nullLabel: {
+                                    type: 'string',
+                                    description: 'Progress: label when value is null. Default `None`.'
+                                },
+                                format: {
+                                    type: 'string',
+                                    description: 'Number: `number` (default), `currency`, `percent`, or `compact` (K/M/B). Date: dayjs format string (default `YYYY-MM-DD HH:mm`).'
+                                },
+                                locale: {
+                                    type: 'string',
+                                    description: 'Number: BCP 47 locale for `Intl.NumberFormat` (e.g. `en-US`, `de-DE`). Defaults to browser.'
+                                },
+                                currency: {
+                                    type: 'string',
+                                    description: 'Number: ISO 4217 currency code when `format: currency`. Default `USD`.'
+                                },
+                                currencyDisplay: {
+                                    type: 'string',
+                                    enum: [
+                                        'symbol',
+                                        'narrowSymbol',
+                                        'code',
+                                        'name'
+                                    ],
+                                    description: 'Number: currency display style when `format: currency`.'
+                                },
+                                decimals: {
+                                    type: 'number',
+                                    description: 'Number: fixed number of fraction digits (sets both `minimumFractionDigits` and `maximumFractionDigits`).'
+                                },
+                                minDecimals: {
+                                    type: 'number',
+                                    description: 'Number: `Intl.NumberFormat` `minimumFractionDigits`.'
+                                },
+                                maxDecimals: {
+                                    type: 'number',
+                                    description: 'Number: `Intl.NumberFormat` `maximumFractionDigits`.'
+                                },
+                                notation: {
+                                    type: 'string',
+                                    enum: [
+                                        'standard',
+                                        'scientific',
+                                        'engineering',
+                                        'compact'
+                                    ],
+                                    description: 'Number: `Intl.NumberFormat` notation. `compact` format sets this automatically.'
+                                },
+                                useGrouping: {
+                                    type: 'boolean',
+                                    default: true,
+                                    description: 'Number: include thousands separators.'
+                                },
+                                negative: {
+                                    type: 'string',
+                                    enum: [
+                                        'minus',
+                                        'parentheses'
+                                    ],
+                                    default: 'minus',
+                                    description: 'Number: how to render negative numbers — `minus` (default) or `parentheses` for accounting.'
+                                },
+                                signColor: {
+                                    type: 'boolean',
+                                    default: false,
+                                    description: 'Number: when true, positives use `positiveColor` (default success token), negatives use `negativeColor` (default error token).'
+                                },
+                                positiveColor: {
+                                    type: 'string',
+                                    description: 'Number: CSS colour when value > 0 (requires `signColor: true`).'
+                                },
+                                negativeColor: {
+                                    type: 'string',
+                                    description: 'Number: CSS colour when value < 0 (requires `signColor: true`).'
+                                },
+                                zeroColor: {
+                                    type: 'string',
+                                    description: 'Number: CSS colour when value === 0 (requires `signColor: true`).'
+                                },
+                                color: {
+                                    type: 'string',
+                                    description: 'Number: CSS colour applied to all values (overridden by `signColor`).'
+                                },
+                                prefix: {
+                                    type: 'string',
+                                    description: 'Number: literal prefix (e.g. `Δ `, `~`).'
+                                },
+                                align: {
+                                    type: 'string',
+                                    enum: [
+                                        'left',
+                                        'center',
+                                        'right'
+                                    ],
+                                    description: 'Cell horizontal alignment. Defaults to `right` for `cell.type: number`. Sets `cellStyle.justifyContent` and `ag-*-aligned-header` on the header.'
+                                }
+                            }
                         }
                     }
                 }