@lowdefy/blocks-antd 4.7.3 → 5.1.0

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));

package/dist/blocks/Breadcrumb/meta.js

@@ -0,0 +1,90 @@
+/*
+  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 breadcrumbList from '../../schemas/breadcrumbList.js';
+export default {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Breadcrumb element.',
+        icon: 'The icon in the Breadcrumb.'
+    },
+    events: {
+        onClick: {
+            description: 'Triggered when breadcrumb item is clicked.',
+            event: {
+                link: 'The clicked breadcrumb link.',
+                index: 'The index of the clicked item.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            separator: {
+                type: 'string',
+                default: '/',
+                description: 'Use a custom separator string.'
+            },
+            list: breadcrumbList,
+            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/breadcrumb#design-token'
+                },
+                properties: {
+                    itemColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.45)',
+                        description: 'Text color of breadcrumb item.'
+                    },
+                    iconFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Icon size of breadcrumb item.'
+                    },
+                    linkColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.45)',
+                        description: 'Text color of link.'
+                    },
+                    linkHoverColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Color of hovered link.'
+                    },
+                    lastItemColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Text color of the last item.'
+                    },
+                    separatorMargin: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Margin of separator.'
+                    },
+                    separatorColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.45)',
+                        description: 'Color of separator.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Button/Button.js

@@ -13,35 +13,66 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Button } from 'antd';
+import { Button, ConfigProvider } from 'antd';
 import { get, type } from '@lowdefy/helpers';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-import color from '../../color.js';
-const ButtonBlock = ({ blockId, components: { Icon }, events, loading, methods, onClick, properties, rename })=>{
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const ANTD_COLOR_PRESETS = new Set([
+    'default',
+    'primary',
+    'danger',
+    'blue',
+    'purple',
+    'cyan',
+    'green',
+    'magenta',
+    'pink',
+    'red',
+    'orange',
+    'yellow',
+    'volcano',
+    'geekblue',
+    'lime',
+    'gold'
+]);
+function getButtonProps(properties) {
+    if (properties.variant) {
+        return {
+            color: properties.color,
+            variant: properties.variant
+        };
+    }
+    const buttonType = properties.type ?? 'primary';
+    if (buttonType === 'danger') {
+        return {
+            color: 'danger',
+            variant: 'solid'
+        };
+    }
+    return {
+        type: buttonType
+    };
+}
+const ButtonBlock = ({ blockId, classNames = {}, components: { Icon, ShortcutBadge }, events, loading, methods, onClick, properties, rename, styles = {} })=>{
     const onClickActionName = get(rename, 'events.onClick', {
         default: 'onClick'
     });
-    return /*#__PURE__*/ React.createElement(Button, {
+    const { color: buttonColor, variant, type: buttonType } = getButtonProps(properties);
+    const isPresetColor = ANTD_COLOR_PRESETS.has(properties.color);
+    const resolvedColor = isPresetColor ? buttonColor : properties.color ? 'primary' : buttonColor;
+    const button = /*#__PURE__*/ React.createElement(Button, {
         block: properties.block,
-        className: methods.makeCssClass([
-            {
-                backgroundColor: properties.color,
-                borderColor: properties.color,
-                '&:active': properties.color && {
-                    backgroundColor: color(properties.color, 7),
-                    borderColor: color(properties.color, 7)
-                },
-                '&:hover': properties.color && {
-                    backgroundColor: color(properties.color, 5),
-                    borderColor: color(properties.color, 5)
-                },
-                '&:focus': properties.color && {
-                    backgroundColor: properties.color,
-                    borderColor: properties.color
-                }
-            },
-            properties.style
-        ]),
+        className: classNames.element,
+        style: styles.element,
+        classNames: {
+            icon: classNames.icon
+        },
+        styles: {
+            icon: styles.icon
+        },
+        color: resolvedColor,
+        variant: variant,
+        type: buttonType,
         disabled: properties.disabled || get(events, `${onClickActionName}.loading`) || loading,
         ghost: properties.ghost,
         danger: properties.danger,
@@ -50,28 +81,35 @@ const ButtonBlock = ({ blockId, components: { Icon }, events, loading, methods,
         loading: get(events, `${onClickActionName}.loading`),
         shape: properties.shape,
         size: properties.size,
-        type: get(properties, 'type', {
-            default: 'primary'
-        }),
         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
+            }
         }),
         onClick: onClick || (()=>methods.triggerEvent({
                 name: onClickActionName
             }))
-    }, !properties.hideTitle && renderHtml({
+    }, !properties.hideTitle && !(properties.shape === 'circle' && type.isNone(properties.title)) && /*#__PURE__*/ React.createElement(React.Fragment, null, renderHtml({
         html: type.isNone(properties.title) ? blockId : properties.title,
         methods
-    }));
-};
-ButtonBlock.defaultProps = blockDefaultProps;
-ButtonBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Button/style.less'
-    ]
+    }), /*#__PURE__*/ React.createElement(ShortcutBadge, {
+        shortcut: events[onClickActionName]?.shortcut
+    })));
+    if (properties.color && !isPresetColor) {
+        return /*#__PURE__*/ React.createElement(ConfigProvider, {
+            theme: {
+                token: {
+                    colorPrimary: properties.color
+                }
+            }
+        }, button);
+    }
+    return button;
 };
-export default ButtonBlock;
+export default withTheme('Button', withBlockDefaults(ButtonBlock));

package/dist/blocks/Button/meta.js

@@ -0,0 +1,230 @@
+/*
+  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 Button element.',
+        icon: 'The icon in the Button.'
+    },
+    events: {
+        onClick: 'Trigger action when button is clicked. Renders a shortcut badge when a shortcut is configured.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            block: {
+                type: 'boolean',
+                description: "Fit the button's span to its parent container span.",
+                default: false
+            },
+            color: {
+                type: 'string',
+                description: 'Button color. Preset values: default, primary, danger, blue, purple, cyan, green, magenta, pink, red, orange, yellow, volcano, geekblue, lime, gold. Also accepts custom hex color strings.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            danger: {
+                type: 'boolean',
+                description: 'Set button style to danger.',
+                default: false
+            },
+            disabled: {
+                type: 'boolean',
+                description: 'Disable the button if true.',
+                default: false
+            },
+            ghost: {
+                type: 'boolean',
+                description: "Make the button's background transparent when true.",
+                default: false
+            },
+            hideTitle: {
+                type: 'boolean',
+                description: "Hide the button's title.",
+                default: false
+            },
+            href: {
+                type: 'string',
+                description: 'The URL to redirect to when the button is clicked. Useful when used with a type link button.'
+            },
+            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 icon in button.",
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            shape: {
+                type: 'string',
+                default: 'square',
+                enum: [
+                    'circle',
+                    'round',
+                    'square'
+                ],
+                description: 'Shape of the button.'
+            },
+            size: {
+                type: 'string',
+                enum: [
+                    'small',
+                    'default',
+                    'large'
+                ],
+                default: 'default',
+                description: 'Size of the button.'
+            },
+            title: {
+                type: 'string',
+                description: 'Title text on the button - supports html.'
+            },
+            type: {
+                type: 'string',
+                default: 'primary',
+                enum: [
+                    'primary',
+                    'default',
+                    'dashed',
+                    'link',
+                    'text'
+                ],
+                description: 'Deprecated - use color and variant instead. The button type.'
+            },
+            variant: {
+                type: 'string',
+                enum: [
+                    'solid',
+                    'outlined',
+                    'dashed',
+                    'filled',
+                    'text',
+                    'link'
+                ],
+                description: 'Button visual variant. When set, takes precedence over type.'
+            },
+            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/button#design-token'
+                },
+                properties: {
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius of the button.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for large buttons.'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius for small buttons.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of the button.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height for large buttons.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height for small buttons.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size for large buttons.'
+                    },
+                    fontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for small buttons.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 15,
+                        description: 'Horizontal padding.'
+                    },
+                    paddingInlineLG: {
+                        type: 'number',
+                        default: 15,
+                        description: 'Horizontal padding for large buttons.'
+                    },
+                    paddingInlineSM: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Horizontal padding for small buttons.'
+                    },
+                    paddingBlock: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Vertical padding.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color override.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Primary hover color.'
+                    },
+                    colorPrimaryActive: {
+                        type: 'string',
+                        description: 'Primary active color.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color for default buttons.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color for default buttons.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color for outlined and dashed buttons.'
+                    }
+                }
+            }
+        }
+    }
+};