@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/Divider/meta.js

@@ -0,0 +1,86 @@
+/*
+  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 Divider element.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            dashed: {
+                type: 'boolean',
+                default: false,
+                description: 'Whether line is dashed.'
+            },
+            orientation: {
+                type: 'string',
+                default: 'horizontal',
+                enum: [
+                    'horizontal',
+                    'vertical'
+                ],
+                description: 'Direction of the divider line.'
+            },
+            title: {
+                type: 'string',
+                description: 'Divider title - supports html.'
+            },
+            titlePlacement: {
+                type: 'string',
+                default: 'center',
+                enum: [
+                    'start',
+                    'end',
+                    'center'
+                ],
+                description: 'Position of title text within the divider.'
+            },
+            plain: {
+                type: 'boolean',
+                default: false,
+                description: 'Show text as plain style.'
+            },
+            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/divider#design-token'
+                },
+                properties: {
+                    textPaddingInline: {
+                        type: 'string',
+                        default: '1em',
+                        description: 'Horizontal padding of text content in the divider.'
+                    },
+                    orientationMargin: {
+                        type: 'number',
+                        default: 0.05,
+                        description: 'Distance between text and edge when orientation is left or right. Value between 0 and 1 representing a percentage.'
+                    },
+                    verticalMarginInline: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Horizontal margin for vertical dividers.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Drawer/Drawer.js

@@ -15,7 +15,8 @@
 */ import React, { useState, useEffect } from 'react';
 import { Drawer } from 'antd';
 import { get } from '@lowdefy/helpers';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
 const handleClose = async ({ methods, rename, setOpen })=>{
     const response = await methods.triggerEvent({
         name: get(rename, 'events.onClose', {
@@ -87,7 +88,7 @@ const setOpenState = ({ open, methods, rename, setOpen })=>{
         });
     }
 };
-const DrawerBlock = ({ blockId, content, properties, methods, rename, onClose })=>{
+const DrawerBlock = ({ blockId, classNames = {}, content, properties, methods, rename, onClose, styles = {} })=>{
     const [openState, setOpen] = useState(false);
     useEffect(()=>{
         methods.registerMethod(get(rename, 'methods.toggleOpen', {
@@ -131,19 +132,23 @@ const DrawerBlock = ({ blockId, content, properties, methods, rename, onClose })
                 methods,
                 rename
             }),
-        drawerStyle: methods.makeCssClass(properties.drawerStyle, true),
-        headerStyle: methods.makeCssClass(properties.headerStyle, true),
-        bodyStyle: methods.makeCssClass(properties.bodyStyle, true),
-        maskStyle: methods.makeCssClass(properties.maskStyle, true),
-        contentWrapperStyle: methods.makeCssClass(properties.contentWrapperStyle, true)
+        className: classNames.element,
+        classNames: {
+            header: classNames.header,
+            body: classNames.body,
+            footer: classNames.footer,
+            mask: classNames.mask,
+            wrapper: classNames.wrapper,
+            content: classNames.content
+        },
+        style: styles.element,
+        styles: {
+            header: styles.header,
+            body: styles.body,
+            mask: styles.mask,
+            wrapper: styles.wrapper,
+            content: styles.content
+        }
     }, content.content && content.content());
 };
-DrawerBlock.defaultProps = blockDefaultProps;
-DrawerBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Drawer/style.less'
-    ]
-};
-export default DrawerBlock;
+export default withTheme('Drawer', withBlockDefaults(DrawerBlock));

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

@@ -13,7 +13,29 @@
   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: 'Main Drawer body.',
+        extra: 'Extra content in the header.'
+    },
+    cssKeys: {
+        element: 'The Drawer element.',
+        header: 'The Drawer header.',
+        body: 'The Drawer body.',
+        footer: 'The Drawer footer.',
+        mask: 'The Drawer mask.',
+        wrapper: 'The Drawer wrapper.',
+        content: 'The Drawer content.'
+    },
+    events: {
+        onToggle: 'Trigger actions when drawer is toggled.',
+        onClose: 'Trigger actions when drawer is closed.',
+        onOpen: 'Trigger actions when drawer is opened.',
+        afterClose: 'Trigger actions after drawer is closed.',
+        afterOpenChange: 'Trigger actions after drawer is opened.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -59,41 +81,6 @@
                     displayType: 'string'
                 }
             },
-            headerStyle: {
-                type: 'object',
-                description: 'Css style to applied to drawer header.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
-            bodyStyle: {
-                type: 'object',
-                description: 'Css style to applied to drawer body.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
-            contentWrapperStyle: {
-                type: 'object',
-                description: 'Css style to applied to content area.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
-            maskStyle: {
-                type: 'object',
-                description: 'Css style to applied to drawer mask.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
-            drawerStyle: {
-                type: 'object',
-                description: 'Css style to applied to drawer.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             zIndex: {
                 type: 'integer',
                 default: 1000,
@@ -114,32 +101,45 @@
                 type: 'boolean',
                 default: true,
                 description: 'Whether support press esc to close.'
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onToggle: {
-                type: 'array',
-                description: 'Trigger actions when drawer is toggled.'
-            },
-            onClose: {
-                type: 'array',
-                description: 'Trigger actions when drawer is closed.'
-            },
-            onOpen: {
-                type: 'array',
-                description: 'Trigger actions when drawer is opened.'
             },
-            afterClose: {
-                type: 'array',
-                description: 'Trigger actions after drawer is closed.'
-            },
-            afterOpenChange: {
-                type: 'array',
-                description: 'Trigger actions after drawer is opened.'
+            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/drawer#design-token'
+                },
+                properties: {
+                    footerPaddingBlock: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Vertical padding of the footer.'
+                    },
+                    footerPaddingInline: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Horizontal padding of the footer.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1000,
+                        description: 'Z-index of the drawer.'
+                    },
+                    draggerSize: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Size of the resize handle.'
+                    },
+                    colorBgElevated: {
+                        type: 'string',
+                        description: 'Background color of the drawer.'
+                    },
+                    colorBgMask: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.45)',
+                        description: 'Background color of the drawer mask.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/DropdownButton/DropdownButton.js

@@ -0,0 +1,221 @@
+/*
+  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, { useCallback } from 'react';
+import { Button, ConfigProvider, Dropdown, Space } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import { get, type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import useItemShortcuts from '../useItemShortcuts.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 ?? 'default';
+    if (buttonType === 'danger') {
+        return {
+            color: 'danger',
+            variant: 'solid'
+        };
+    }
+    return {
+        type: buttonType
+    };
+}
+function DropdownButtonBlock({ blockId, classNames = {}, components: { Icon, ShortcutBadge }, events, loading, methods, properties, rename, styles = {} }) {
+    const items = (properties.items ?? []).map((item, i)=>{
+        if (item.type === 'divider') {
+            return {
+                type: 'divider',
+                key: `divider-${i}`
+            };
+        }
+        return {
+            key: item.eventName ?? `item-${i}`,
+            label: /*#__PURE__*/ React.createElement("span", null, item.title, item.shortcut && /*#__PURE__*/ React.createElement(ShortcutBadge, {
+                shortcut: item.shortcut
+            })),
+            icon: item.icon ? /*#__PURE__*/ React.createElement(Icon, {
+                blockId: `${blockId}_icon_${i}`,
+                classNames: {
+                    element: classNames.itemIcon
+                },
+                events: events,
+                properties: item.icon,
+                styles: {
+                    element: styles.itemIcon
+                }
+            }) : undefined,
+            danger: item.danger,
+            disabled: item.disabled
+        };
+    });
+    const shortcutItems = (properties.items ?? []).filter((item)=>item.shortcut && item.eventName && !item.disabled).map((item)=>({
+            key: item.eventName,
+            shortcut: item.shortcut
+        }));
+    const onShortcutMatch = useCallback((key)=>{
+        methods.triggerEvent({
+            name: key
+        });
+    }, [
+        methods
+    ]);
+    useItemShortcuts({
+        items: shortcutItems,
+        onMatch: onShortcutMatch
+    });
+    const onClickActionName = get(rename, 'events.onClick', {
+        default: 'onClick'
+    });
+    const dropdownProps = {
+        menu: {
+            items,
+            onClick: ({ key })=>methods.triggerEvent({
+                    name: key
+                })
+        },
+        trigger: [
+            properties.trigger ?? 'click'
+        ],
+        placement: properties.placement ?? 'bottomRight',
+        arrow: properties.arrow,
+        disabled: properties.disabled,
+        popupClassName: classNames.menu,
+        popupStyle: styles.menu,
+        onOpenChange: (open)=>methods.triggerEvent({
+                name: get(rename, 'events.onOpenChange', {
+                    default: 'onOpenChange'
+                }),
+                event: {
+                    open
+                }
+            })
+    };
+    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 buttonIcon = properties.icon && /*#__PURE__*/ React.createElement(Icon, {
+        blockId: `${blockId}_icon`,
+        classNames: {
+            element: classNames.icon
+        },
+        events: events,
+        properties: properties.icon,
+        styles: {
+            element: styles.icon
+        }
+    });
+    const theme = properties.theme;
+    const { button: buttonTheme, ...dropdownTheme } = type.isObject(theme) ? theme : {};
+    function renderContent() {
+        if (properties.split) {
+            return /*#__PURE__*/ React.createElement(Space.Compact, {
+                id: blockId,
+                className: classNames.element,
+                style: styles.element
+            }, /*#__PURE__*/ React.createElement(Button, {
+                color: resolvedColor,
+                variant: variant,
+                type: buttonType,
+                size: properties.size,
+                shape: properties.shape,
+                ghost: properties.ghost,
+                danger: properties.danger,
+                disabled: properties.disabled || get(events, `${onClickActionName}.loading`) || loading,
+                loading: get(events, `${onClickActionName}.loading`),
+                className: classNames.button,
+                style: styles.button,
+                icon: buttonIcon,
+                onClick: ()=>methods.triggerEvent({
+                        name: onClickActionName
+                    })
+            }, properties.title), /*#__PURE__*/ React.createElement(Dropdown, dropdownProps, /*#__PURE__*/ React.createElement(Button, {
+                color: resolvedColor,
+                variant: variant,
+                type: buttonType,
+                size: properties.size,
+                ghost: properties.ghost,
+                danger: properties.danger,
+                disabled: properties.disabled,
+                icon: /*#__PURE__*/ React.createElement(DownOutlined, null)
+            })));
+        }
+        return /*#__PURE__*/ React.createElement(Dropdown, {
+            id: blockId,
+            className: classNames.element,
+            style: styles.element,
+            ...dropdownProps
+        }, /*#__PURE__*/ React.createElement(Button, {
+            color: resolvedColor,
+            variant: variant,
+            type: buttonType,
+            size: properties.size,
+            shape: properties.shape,
+            ghost: properties.ghost,
+            danger: properties.danger,
+            disabled: properties.disabled,
+            className: classNames.button,
+            style: styles.button,
+            icon: buttonIcon
+        }, properties.title));
+    }
+    // Build ConfigProvider theme with both Dropdown and Button tokens
+    const themeConfig = {};
+    if (type.isObject(dropdownTheme) && Object.keys(dropdownTheme).length > 0) {
+        themeConfig.Dropdown = dropdownTheme;
+    }
+    if (type.isObject(buttonTheme)) {
+        themeConfig.Button = buttonTheme;
+    }
+    const hasTheme = Object.keys(themeConfig).length > 0;
+    const hasCustomColor = properties.color && !isPresetColor;
+    if (hasTheme || hasCustomColor) {
+        const providerTheme = {};
+        if (hasTheme) {
+            providerTheme.components = themeConfig;
+        }
+        if (hasCustomColor) {
+            providerTheme.token = {
+                colorPrimary: properties.color
+            };
+        }
+        return /*#__PURE__*/ React.createElement(ConfigProvider, {
+            theme: providerTheme
+        }, renderContent());
+    }
+    return renderContent();
+}
+export default withBlockDefaults(DropdownButtonBlock);

package/dist/blocks/DropdownButton/e2e.js

@@ -0,0 +1,30 @@
+/*
+  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 { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#bl-${escapeId(blockId)}`);
+export default createBlockHelper({
+    locator,
+    do: {
+        open: (page, blockId)=>locator(page, blockId).locator('button').first().click(),
+        clickItem: (_page, _blockId, title)=>_page.locator(`.ant-dropdown-menu-item:has-text("${title}")`).click(),
+        clickSplitArrow: (page, blockId)=>locator(page, blockId).locator('.ant-space-compact button').last().click()
+    },
+    expect: {
+        menuVisible: (_page)=>expect(_page.locator('.ant-dropdown').first()).toBeVisible(),
+        menuHidden: (_page)=>expect(_page.locator('.ant-dropdown').first()).toBeHidden(),
+        text: (page, blockId, text)=>expect(locator(page, blockId).locator('button').first()).toHaveText(text)
+    }
+});