@lowdefy/blocks-aggrid 5.0.0 → 5.2.0

package/dist/cellRenderers/ProgressCell.js

@@ -0,0 +1,68 @@
+/*
+  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';
+import { type } from '@lowdefy/helpers';
+import NullCell from './NullCell.js';
+const DEFAULT_THRESHOLDS = [
+    20,
+    40,
+    60,
+    80
+];
+const DEFAULT_COLORS = [
+    'var(--ant-color-error)',
+    'var(--ant-color-warning)',
+    'var(--ant-color-gold, var(--ant-color-warning))',
+    'var(--ant-color-info)',
+    'var(--ant-color-success)'
+];
+function pickColor(value, thresholds, colors) {
+    for(let i = 0; i < thresholds.length; i += 1){
+        if (value < thresholds[i]) return colors[i];
+    }
+    return colors[colors.length - 1];
+}
+function ProgressCell(params) {
+    const { value, cellConfig } = params;
+    if (type.isNone(value) || value === '') {
+        return /*#__PURE__*/ React.createElement(NullCell, {
+            placeholder: cellConfig?.nullLabel ?? 'None'
+        });
+    }
+    const num = Number(value);
+    if (Number.isNaN(num)) {
+        return /*#__PURE__*/ React.createElement(NullCell, null);
+    }
+    const thresholds = type.isArray(cellConfig?.thresholds) ? cellConfig.thresholds : DEFAULT_THRESHOLDS;
+    const colors = type.isArray(cellConfig?.colors) ? cellConfig.colors : DEFAULT_COLORS;
+    const color = pickColor(num, thresholds, colors);
+    const suffix = cellConfig?.suffix ?? '%';
+    const style = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: 'var(--ant-padding-xxs, 4px) var(--ant-padding-xs, 8px)',
+        borderRadius: 'var(--ant-border-radius-sm, 4px)',
+        fontSize: 'var(--ant-font-size-sm, 12px)',
+        fontWeight: 600,
+        lineHeight: 1,
+        color,
+        background: `color-mix(in srgb, ${color} 12%, transparent)`,
+        border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`
+    };
+    return /*#__PURE__*/ React.createElement("span", {
+        style: style
+    }, num, suffix);
+}
+export default ProgressCell;

package/dist/cellRenderers/TagCell.js

@@ -0,0 +1,67 @@
+/*
+  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';
+import { type } from '@lowdefy/helpers';
+import NullCell from './NullCell.js';
+import { resolvePath } from './resolveFieldRefs.js';
+const ANTD_TAG_COLOR_TOKENS = {
+    red: 'var(--ant-color-error)',
+    volcano: 'var(--ant-color-volcano, var(--ant-color-error))',
+    orange: 'var(--ant-color-warning)',
+    gold: 'var(--ant-color-gold, var(--ant-color-warning))',
+    yellow: 'var(--ant-color-warning)',
+    lime: 'var(--ant-color-lime, var(--ant-color-success))',
+    green: 'var(--ant-color-success)',
+    cyan: 'var(--ant-color-cyan, var(--ant-color-info))',
+    blue: 'var(--ant-color-info)',
+    geekblue: 'var(--ant-color-geekblue, var(--ant-color-info))',
+    purple: 'var(--ant-color-purple, var(--ant-color-info))',
+    magenta: 'var(--ant-color-magenta, var(--ant-color-error))',
+    default: 'var(--ant-color-text-secondary)'
+};
+function resolveColor(value) {
+    if (type.isNone(value)) return ANTD_TAG_COLOR_TOKENS.default;
+    return ANTD_TAG_COLOR_TOKENS[value] ?? value;
+}
+function TagCell(params) {
+    const { value, data, cellConfig } = params;
+    if (type.isNone(value) || value === '') {
+        return /*#__PURE__*/ React.createElement(NullCell, null);
+    }
+    const { colorMap, colorFrom, default: defaultColor } = cellConfig ?? {};
+    let color;
+    if (type.isString(colorFrom)) {
+        color = resolvePath(colorFrom, data);
+    } else if (type.isObject(colorMap)) {
+        color = colorMap[value];
+    }
+    const resolved = resolveColor(color ?? defaultColor);
+    const style = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: 'var(--ant-padding-xxs, 4px) var(--ant-padding-xs, 8px)',
+        borderRadius: 'var(--ant-border-radius-sm, 4px)',
+        fontSize: 'var(--ant-font-size-sm, 12px)',
+        fontWeight: 600,
+        lineHeight: 1,
+        color: resolved,
+        background: `color-mix(in srgb, ${resolved} 12%, transparent)`,
+        border: `1px solid color-mix(in srgb, ${resolved} 30%, transparent)`
+    };
+    return /*#__PURE__*/ React.createElement("span", {
+        style: style
+    }, String(value));
+}
+export default TagCell;

package/dist/cellRenderers/index.js

@@ -0,0 +1,34 @@
+/*
+  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 TagCell from './TagCell.js';
+import AvatarCell from './AvatarCell.js';
+import LinkCell from './LinkCell.js';
+import DateCell from './DateCell.js';
+import BooleanCell from './BooleanCell.js';
+import ProgressCell from './ProgressCell.js';
+import NumberCell from './NumberCell.js';
+const CELL_RENDERERS = {
+    tag: TagCell,
+    avatar: AvatarCell,
+    link: LinkCell,
+    date: DateCell,
+    boolean: BooleanCell,
+    progress: ProgressCell,
+    number: NumberCell
+};
+function getCellRenderer(type) {
+    return CELL_RENDERERS[type];
+}
+export { CELL_RENDERERS, getCellRenderer };

package/dist/cellRenderers/resolveFieldRefs.js

@@ -0,0 +1,40 @@
+/*
+  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 { get, type } from '@lowdefy/helpers';
+function resolvePath(path, data) {
+    if (type.isNone(path)) return undefined;
+    if (!type.isString(path)) return path;
+    return get(data, path);
+}
+function resolveUrlQuery(urlQuery, data) {
+    if (!type.isObject(urlQuery)) return undefined;
+    const resolved = {};
+    Object.keys(urlQuery).forEach((key)=>{
+        resolved[key] = resolvePath(urlQuery[key], data);
+    });
+    return resolved;
+}
+function resolveLink(link, data) {
+    if (!type.isObject(link)) return undefined;
+    return {
+        pageId: link.pageId,
+        href: link.href,
+        back: link.back,
+        home: link.home,
+        newTab: link.newTab,
+        urlQuery: resolveUrlQuery(link.urlQuery, data)
+    };
+}
+export { resolvePath, resolveUrlQuery, resolveLink };

package/dist/processColDefs.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.
@@ -14,13 +14,85 @@
   limitations under the License.
 */ import { renderHtml } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
+import { getCellRenderer } from './cellRenderers/index.js';
+import createEllipsisCell from './cellRenderers/EllipsisCell.js';
+function applyEllipsis(colDef, ellipsis) {
+    if (!type.isInt(ellipsis) || ellipsis < 1) return colDef;
+    const clampClass = `lf-ellipsis-${Math.min(ellipsis, 6)}`;
+    const existingClass = colDef.cellClass;
+    const nextClass = type.isString(existingClass) ? `${existingClass} ${clampClass}` : type.isArray(existingClass) ? [
+        ...existingClass,
+        clampClass
+    ] : clampClass;
+    const next = {
+        ...colDef,
+        wrapText: colDef.wrapText ?? true,
+        autoHeight: colDef.autoHeight ?? true,
+        cellClass: nextClass
+    };
+    // Install a wrapping renderer that owns the clamp DOM — reliable against
+    // ag-grid's internal cell wrappers. Skip if a cellRenderer is already set
+    // (user or built-in cell.type takes precedence and can opt in via CSS).
+    if (!colDef.cellRenderer) {
+        next.cellRenderer = createEllipsisCell(ellipsis);
+    }
+    return next;
+}
+const JUSTIFY_MAP = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end'
+};
+const HEADER_ALIGN_CLASS = {
+    left: 'ag-left-aligned-header',
+    center: 'ag-center-aligned-header',
+    right: 'ag-right-aligned-header'
+};
+function applyAlignment(colDef, cell) {
+    if (!type.isObject(cell)) return colDef;
+    const align = cell.align ?? (cell.type === 'number' ? 'right' : undefined);
+    if (!align || !JUSTIFY_MAP[align]) return colDef;
+    const cellStyle = {
+        ...type.isObject(colDef.cellStyle) ? colDef.cellStyle : {}
+    };
+    if (type.isNone(cellStyle.justifyContent)) cellStyle.justifyContent = JUSTIFY_MAP[align];
+    const headerClass = type.isString(colDef.headerClass) ? `${colDef.headerClass} ${HEADER_ALIGN_CLASS[align]}` : type.isArray(colDef.headerClass) ? [
+        ...colDef.headerClass,
+        HEADER_ALIGN_CLASS[align]
+    ] : HEADER_ALIGN_CLASS[align];
+    return {
+        ...colDef,
+        cellStyle,
+        headerClass
+    };
+}
+function buildCellRenderer({ cell, methods }) {
+    const Renderer = getCellRenderer(cell?.type);
+    if (!Renderer) return undefined;
+    // ag-grid calls the renderer as a React function component when returned directly.
+    return function CellRendererAdapter(params) {
+        return Renderer({
+            ...params,
+            cellConfig: cell,
+            methods
+        });
+    };
+}
 function recProcessColDefs(columnDefs, methods) {
     return columnDefs.map((col)=>{
         const newColDef = {};
         if (type.isArray(col.children)) {
             newColDef.children = recProcessColDefs(col.children, methods);
         }
-        if (type.isFunction(col.cellRenderer)) {
+        if (type.isObject(col.cell) && type.isString(col.cell.type)) {
+            const renderer = buildCellRenderer({
+                cell: col.cell,
+                methods
+            });
+            if (renderer) {
+                newColDef.cellRenderer = renderer;
+            }
+        } else if (type.isFunction(col.cellRenderer)) {
             newColDef.cellRenderer = (params)=>{
                 return renderHtml({
                     html: col.cellRenderer(params),
@@ -28,10 +100,15 @@ function recProcessColDefs(columnDefs, methods) {
                 });
             };
         }
-        return {
+        const merged = {
             ...col,
             ...newColDef
         };
+        // `cell` is our config object — ag-grid would ignore it, but strip to keep colDef clean.
+        delete merged.cell;
+        delete merged.ellipsis;
+        const aligned = applyAlignment(merged, col.cell);
+        return applyEllipsis(aligned, col.ellipsis);
     });
 }
 function processColDefs(columnDefs = [], methods) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-aggrid",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "license": "Apache-2.0",
   "description": "AgGrid Blocks for Lowdefy.",
   "homepage": "https://lowdefy.com",
@@ -49,16 +49,19 @@
     "@ag-grid-community/csv-export": "30.2.0",
     "@ag-grid-community/react": "30.2.0",
     "@ag-grid-community/styles": "30.2.0",
-    "@lowdefy/block-utils": "5.0.0",
-    "@lowdefy/helpers": "5.0.0"
+    "@lowdefy/block-utils": "5.2.0",
+    "@lowdefy/helpers": "5.2.0"
   },
   "peerDependencies": {
+    "@ant-design/icons": ">=6",
+    "antd": ">=6",
+    "dayjs": ">=1.11",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.0.0",
-    "@lowdefy/e2e-utils": "5.0.0",
+    "@lowdefy/block-dev-e2e": "5.2.0",
+    "@lowdefy/e2e-utils": "5.2.0",
     "@playwright/test": "1.50.1",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",