@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/Avatar/Avatar.js

@@ -14,10 +14,53 @@
   limitations under the License.
 */ import React from 'react';
 import { Avatar } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const AvatarBlock = ({ blockId, events, components: { Icon }, methods, properties })=>/*#__PURE__*/ React.createElement(Avatar, {
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const AvatarBlock = ({ blockId, classNames = {}, events, components: { Icon }, methods, properties, styles = {} })=>{
+    if (properties.group) {
+        return /*#__PURE__*/ React.createElement(Avatar.Group, {
+            id: blockId,
+            className: classNames.element,
+            style: {
+                cursor: events.onClick && 'pointer',
+                ...styles.element
+            },
+            maxCount: properties.group.maxCount,
+            maxPopoverPlacement: properties.group.maxPopoverPlacement,
+            maxPopoverTrigger: properties.group.maxPopoverTrigger,
+            maxStyle: styles.max,
+            shape: properties.group.shape ?? properties.shape,
+            size: properties.group.size ?? properties.size,
+            onClick: ()=>methods.triggerEvent({
+                    name: 'onClick'
+                })
+        }, (properties.group.avatars ?? []).map((avatar, i)=>/*#__PURE__*/ React.createElement(Avatar, {
+                key: `${blockId}_${i}`,
+                alt: avatar.alt,
+                gap: avatar.gap,
+                shape: avatar.shape,
+                size: avatar.size,
+                src: avatar.src,
+                style: {
+                    backgroundColor: !avatar.src && avatar.color
+                },
+                icon: avatar.icon && /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: `${blockId}_avatar_${i}_icon`,
+                    classNames: {
+                        element: classNames.icon
+                    },
+                    events: events,
+                    properties: avatar.icon,
+                    styles: {
+                        element: styles.icon
+                    }
+                })
+            }, avatar.content)));
+    }
+    return /*#__PURE__*/ React.createElement(Avatar, {
         id: blockId,
         alt: properties.alt,
+        className: classNames.element,
         gap: properties.gap,
         shape: properties.shape,
         size: properties.size,
@@ -25,25 +68,22 @@ const AvatarBlock = ({ blockId, events, components: { Icon }, methods, propertie
         onClick: ()=>methods.triggerEvent({
                 name: 'onClick'
             }),
-        className: methods.makeCssClass([
-            {
-                backgroundColor: !properties.src && properties.color,
-                cursor: events.onClick && 'pointer'
-            },
-            properties.style
-        ]),
+        style: {
+            backgroundColor: !properties.src && properties.color,
+            cursor: events.onClick && 'pointer',
+            ...styles.element
+        },
         icon: properties.icon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_icon`,
+            classNames: {
+                element: classNames.icon
+            },
             events: events,
-            properties: properties.icon
+            properties: properties.icon,
+            styles: {
+                element: styles.icon
+            }
         })
     }, properties.content);
-AvatarBlock.defaultProps = blockDefaultProps;
-AvatarBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Avatar/style.less'
-    ]
 };
-export default AvatarBlock;
+export default withTheme('Avatar', withBlockDefaults(AvatarBlock));

package/dist/blocks/Avatar/meta.js

@@ -0,0 +1,277 @@
+/*
+  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.
+*/ export default {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Avatar element.',
+        icon: 'The icon in the Avatar.',
+        max: 'The Avatar max overflow style.'
+    },
+    events: {
+        onClick: 'Triggered when avatar item is clicked.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            alt: {
+                type: 'string',
+                description: 'This attribute defines the alternative text describing the image.'
+            },
+            color: {
+                type: 'string',
+                description: 'The background color of the avatar if not using a src url. Should be a hex color string. Color is a random color if not specified.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            content: {
+                type: 'string',
+                description: 'Text to display inside avatar.'
+            },
+            gap: {
+                type: 'number',
+                description: 'Letter type unit distance between left and right sides.'
+            },
+            icon: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to use an icon in avatar.",
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            shape: {
+                type: 'string',
+                enum: [
+                    'circle',
+                    'square'
+                ],
+                default: 'circle',
+                description: 'Shape of the avatar.'
+            },
+            size: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                default: 'default',
+                enum: [
+                    'default',
+                    'small',
+                    'large'
+                ],
+                description: 'Size of the avatar; default, small, large or responsive.',
+                docs: {
+                    displayType: 'string'
+                }
+            },
+            src: {
+                type: 'string',
+                description: 'The address of the image for an image avatar.'
+            },
+            group: {
+                type: 'object',
+                description: 'Render as an avatar group with multiple avatars. When set, the block renders Avatar.Group wrapping data-driven avatars.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                properties: {
+                    maxCount: {
+                        type: 'number',
+                        description: 'Max avatars to show. Excess shows as "+N".'
+                    },
+                    maxPopoverPlacement: {
+                        type: 'string',
+                        enum: [
+                            'top',
+                            'bottom'
+                        ],
+                        default: 'top',
+                        description: 'Placement of the overflow popover.'
+                    },
+                    maxPopoverTrigger: {
+                        type: 'string',
+                        enum: [
+                            'hover',
+                            'click'
+                        ],
+                        default: 'hover',
+                        description: 'Trigger mode for the overflow popover.'
+                    },
+                    shape: {
+                        type: 'string',
+                        enum: [
+                            'circle',
+                            'square'
+                        ],
+                        description: 'Default shape for all avatars in the group.'
+                    },
+                    size: {
+                        type: [
+                            'string',
+                            'number'
+                        ],
+                        enum: [
+                            'default',
+                            'small',
+                            'large'
+                        ],
+                        description: 'Default size for all avatars in the group.'
+                    },
+                    avatars: {
+                        type: 'array',
+                        description: 'Array of avatar configurations.',
+                        items: {
+                            type: 'object',
+                            properties: {
+                                alt: {
+                                    type: 'string',
+                                    description: 'Alt text for image avatar.'
+                                },
+                                color: {
+                                    type: 'string',
+                                    description: 'Background color.',
+                                    docs: {
+                                        displayType: 'color'
+                                    }
+                                },
+                                content: {
+                                    type: 'string',
+                                    description: 'Text content inside the avatar.'
+                                },
+                                gap: {
+                                    type: 'number',
+                                    description: 'Letter type unit distance between left and right sides.'
+                                },
+                                icon: {
+                                    type: [
+                                        'string',
+                                        'object'
+                                    ],
+                                    description: 'Icon name or properties.',
+                                    docs: {
+                                        displayType: 'icon'
+                                    }
+                                },
+                                shape: {
+                                    type: 'string',
+                                    enum: [
+                                        'circle',
+                                        'square'
+                                    ],
+                                    description: 'Override shape for this avatar.'
+                                },
+                                size: {
+                                    type: [
+                                        'string',
+                                        'number'
+                                    ],
+                                    enum: [
+                                        'default',
+                                        'small',
+                                        'large'
+                                    ],
+                                    description: 'Override size for this avatar.',
+                                    docs: {
+                                        displayType: 'string'
+                                    }
+                                },
+                                src: {
+                                    type: 'string',
+                                    description: 'Image URL.'
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/avatar#design-token'
+                },
+                properties: {
+                    containerSize: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Size of the avatar.'
+                    },
+                    containerSizeLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Size of the large avatar.'
+                    },
+                    containerSizeSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Size of the small avatar.'
+                    },
+                    textFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Text font size of the avatar.'
+                    },
+                    textFontSizeLG: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Text font size of the large avatar.'
+                    },
+                    textFontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Text font size of the small avatar.'
+                    },
+                    iconFontSize: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Icon size within the avatar.'
+                    },
+                    iconFontSizeLG: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Icon size within the large avatar.'
+                    },
+                    iconFontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Icon size within the small avatar.'
+                    },
+                    groupSpace: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Spacing between grouped avatars.'
+                    },
+                    groupOverlapping: {
+                        type: 'number',
+                        default: -8,
+                        description: 'Negative margin for avatar overlap in groups.'
+                    },
+                    groupBorderColor: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Border color applied to grouped avatars.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Badge/Badge.js

@@ -15,9 +15,11 @@
 */ import React from 'react';
 import { type } from '@lowdefy/helpers';
 import { Badge } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const BadgeBlock = ({ blockId, events, content, components: { Icon }, properties })=>/*#__PURE__*/ React.createElement(Badge, {
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const BadgeBlock = ({ blockId, classNames = {}, events, content, components: { Icon }, properties, styles = {} })=>/*#__PURE__*/ React.createElement(Badge, {
         id: blockId,
+        className: classNames.element,
         color: properties.color,
         dot: properties.dot,
         offset: properties.offset,
@@ -25,20 +27,19 @@ const BadgeBlock = ({ blockId, events, content, components: { Icon }, properties
         showZero: properties.showZero,
         size: properties.size,
         status: properties.status,
+        style: styles.element,
         text: properties.text,
         title: properties.title,
         count: properties.icon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_icon`,
+            classNames: {
+                element: classNames.icon
+            },
             events: events,
-            properties: properties.icon
+            properties: properties.icon,
+            styles: {
+                element: styles.icon
+            }
         }) || properties.count
     }, content.content && content.content());
-BadgeBlock.defaultProps = blockDefaultProps;
-BadgeBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Badge/style.less'
-    ]
-};
-export default BadgeBlock;
+export default withTheme('Badge', withBlockDefaults(BadgeBlock));

package/dist/blocks/Badge/{schema.js → meta.js}

@@ -13,7 +13,17 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Child blocks wrapped by the Badge.'
+    },
+    cssKeys: {
+        element: 'The Badge element.',
+        icon: 'The icon in the Badge.',
+        indicator: 'The Badge indicator.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -95,6 +105,75 @@
             title: {
                 type: 'string',
                 description: 'Text to show when hovering over the badge.'
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/badge#design-token'
+                },
+                properties: {
+                    indicatorHeight: {
+                        type: 'number',
+                        default: 20,
+                        description: 'Height of the badge indicator.'
+                    },
+                    indicatorHeightSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Height of the badge indicator in small size.'
+                    },
+                    dotSize: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Size of the dot badge.'
+                    },
+                    textFontSize: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Font size for badge count text.'
+                    },
+                    textFontSizeSM: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Font size for badge count text in small size.'
+                    },
+                    textFontWeight: {
+                        type: 'string',
+                        default: 'normal',
+                        description: 'Font weight for badge count text.'
+                    },
+                    textLineHeight: {
+                        type: 'number',
+                        description: 'Line height for badge count text.'
+                    },
+                    statusSize: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Size of the status dot.'
+                    },
+                    indicatorZIndex: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        default: 'auto',
+                        description: 'Z-index of the badge indicator.'
+                    },
+                    colorBorderBg: {
+                        type: 'string',
+                        description: 'Background color of the badge border (gap between badge and wrapped element).'
+                    },
+                    colorError: {
+                        type: 'string',
+                        description: 'Color of the badge indicator (default red).'
+                    },
+                    colorErrorHover: {
+                        type: 'string',
+                        description: 'Hover color of the badge indicator.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/Breadcrumb/Breadcrumb.js

@@ -15,52 +15,51 @@
 */ import React from 'react';
 import { type, get } from '@lowdefy/helpers';
 import { Breadcrumb } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const BreadcrumbBlock = ({ blockId, events, components: { Icon, Link }, methods, properties, rename })=>{
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const BreadcrumbBlock = ({ blockId, classNames = {}, events, components: { Icon, Link }, methods, properties, rename, styles = {} })=>{
     const onClickActionName = get(rename, 'events.onClick', {
         default: 'onClick'
     });
     return /*#__PURE__*/ React.createElement(Breadcrumb, {
         id: blockId,
+        className: classNames.element,
         separator: properties.separator,
-        className: methods.makeCssClass(properties.style)
-    }, (properties.list || []).map((link, index)=>/*#__PURE__*/ React.createElement(Breadcrumb.Item, {
-            key: index,
-            onClick: events[onClickActionName] && (()=>methods.triggerEvent({
-                    name: onClickActionName,
-                    event: {
-                        link,
-                        index
-                    }
-                }))
-        }, /*#__PURE__*/ React.createElement(Link, {
-            id: `${blockId}_${index}`,
-            className: methods.makeCssClass([
-                {
-                    cursor: events[onClickActionName] && 'pointer'
-                },
-                link.style
-            ]),
-            ...type.isObject(link) ? link : {}
-        }, ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, link.icon && /*#__PURE__*/ React.createElement(Icon, {
-                blockId: `${blockId}_${index}_icon`,
-                events: events,
-                properties: {
-                    name: type.isString(link.icon) && link.icon,
-                    ...type.isObject(link.icon) ? link.icon : {},
+        style: styles.element,
+        items: (properties.list ?? []).map((link, index)=>({
+                key: index,
+                title: /*#__PURE__*/ React.createElement(Link, {
+                    id: `${blockId}_${index}`,
                     style: {
-                        marginRight: 8,
-                        ...type.isObject(link.icon?.style) ? link.icon.style : {}
-                    }
-                }
-            }), type.isString(link) ? link : link.label)))));
-};
-BreadcrumbBlock.defaultProps = blockDefaultProps;
-BreadcrumbBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Breadcrumb/style.less'
-    ]
+                        cursor: events[onClickActionName] && 'pointer',
+                        ...type.isObject(link) ? link.style : {}
+                    },
+                    ...type.isObject(link) ? link : {}
+                }, ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, link.icon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_${index}_icon`,
+                        classNames: {
+                            element: classNames.icon
+                        },
+                        events: events,
+                        properties: {
+                            name: type.isString(link.icon) && link.icon,
+                            ...type.isObject(link.icon) ? link.icon : {}
+                        },
+                        styles: {
+                            element: {
+                                marginRight: 8,
+                                ...styles.icon
+                            }
+                        }
+                    }), type.isString(link) ? link : link.label)),
+                onClick: events[onClickActionName] && (()=>methods.triggerEvent({
+                        name: onClickActionName,
+                        event: {
+                            link,
+                            index
+                        }
+                    }))
+            }))
+    });
 };
-export default BreadcrumbBlock;
+export default withTheme('Breadcrumb', withBlockDefaults(BreadcrumbBlock));