@lowdefy/blocks-antd 4.7.2 → 5.0.0

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.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/ButtonSelector/ButtonSelector.js

@@ -13,16 +13,57 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Radio } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { ConfigProvider, Radio } from 'antd';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import Label from '../Label/Label.js';
 import getValueIndex from '../../getValueIndex.js';
 import getUniqueValues from '../../getUniqueValues.js';
-const ButtonSelector = ({ blockId, components, events, loading, properties, required, validation, value, methods })=>{
+import withTheme from '../withTheme.js';
+const ButtonSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
     const uniqueValueOptions = getUniqueValues(properties.options || []);
+    const radioGroup = /*#__PURE__*/ React.createElement(Radio.Group, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        size: properties.size,
+        buttonStyle: properties.buttonStyle ? properties.buttonStyle : 'solid',
+        style: styles.element,
+        onChange: (event)=>{
+            const value = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
+            methods.setValue(value);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value
+                }
+            });
+        },
+        value: type.isNone(value) ? undefined : getValueIndex(value, properties.options || [])
+    }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Radio.Button, {
+            id: `${blockId}_${i}`,
+            key: i,
+            value: `${i}`,
+            disabled: properties.disabled || loading
+        }, renderHtml({
+            html: `${opt}`,
+            methods
+        })) : /*#__PURE__*/ React.createElement(Radio.Button, {
+            id: `${blockId}_${i}`,
+            key: i,
+            value: `${i}`,
+            disabled: opt.disabled || properties.disabled || loading,
+            style: opt.style
+        }, type.isNone(opt.label) ? renderHtml({
+            html: `${opt.value}`,
+            methods
+        }) : renderHtml({
+            html: opt.label,
+            methods
+        }))));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: components,
         events: events,
         properties: {
@@ -32,64 +73,18 @@ const ButtonSelector = ({ blockId, components, events, loading, properties, requ
         },
         validation: validation,
         required: required,
+        styles: styles,
         content: {
-            content: ()=>/*#__PURE__*/ React.createElement(Radio.Group, {
-                    id: `${blockId}_input`,
-                    className: methods.makeCssClass([
-                        properties.color && {
-                            '& > label.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)': {
-                                backgroundColor: `${properties.color} !important`,
-                                borderColor: `${properties.color} !important`
-                            }
-                        },
-                        properties.inputStyle
-                    ]),
-                    disabled: properties.disabled || loading,
-                    size: properties.size,
-                    buttonStyle: properties.buttonStyle ? properties.buttonStyle : 'solid',
-                    onChange: (event)=>{
-                        const value = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
-                        methods.setValue(value);
-                        methods.triggerEvent({
-                            name: 'onChange',
-                            event: {
-                                value
+            content: ()=>properties.color ? /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    theme: {
+                        components: {
+                            Radio: {
+                                colorPrimary: properties.color
                             }
-                        });
-                    },
-                    value: type.isNone(value) ? undefined : getValueIndex(value, properties.options || [])
-                }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Radio.Button, {
-                        id: `${blockId}_${i}`,
-                        key: i,
-                        value: `${i}`
-                    }, renderHtml({
-                        html: `${opt}`,
-                        methods
-                    })) : /*#__PURE__*/ React.createElement(Radio.Button, {
-                        id: `${blockId}_${i}`,
-                        key: i,
-                        value: `${i}`,
-                        disabled: opt.disabled,
-                        className: methods.makeCssClass(opt.style)
-                    }, type.isNone(opt.label) ? renderHtml({
-                        html: `${opt.value}`,
-                        methods
-                    }) : renderHtml({
-                        html: opt.label,
-                        methods
-                    }))))
+                        }
+                    }
+                }, radioGroup) : radioGroup
         }
     });
 };
-ButtonSelector.defaultProps = blockDefaultProps;
-ButtonSelector.meta = {
-    valueType: 'any',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/ButtonSelector/style.less'
-    ]
-};
-export default ButtonSelector;
+export default withTheme('Radio', withBlockDefaults(ButtonSelector));