@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/Menu/meta.js

@@ -0,0 +1,544 @@
+/*
+  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 Menu element.',
+        expandIcon: 'The expand icon in the Menu.',
+        icon: 'The icon in the Menu.',
+        item: 'The Menu item.'
+    },
+    events: {
+        onSelect: {
+            description: 'Trigger action when menu item is selected.',
+            event: {
+                key: 'The selected menu item key.'
+            }
+        },
+        onClick: {
+            description: 'Trigger action when menu item is clicked.',
+            event: {
+                key: 'The clicked menu item key.'
+            }
+        },
+        onToggleMenuGroup: {
+            description: 'Trigger action when mobile menu group is opened.',
+            event: {
+                openKeys: 'The keys of currently open menu groups.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            expandIcon: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                description: 'Menu expand icon.',
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            menuId: {
+                type: 'string',
+                description: 'App menu id used to get menu links.'
+            },
+            mode: {
+                type: 'string',
+                enum: [
+                    'vertical',
+                    'horizontal',
+                    'inline'
+                ],
+                default: 'vertical',
+                description: 'Type of menu to render.'
+            },
+            selectedKeys: {
+                type: 'array',
+                description: 'Array with the keys of currently selected menu items.',
+                items: {
+                    type: 'string',
+                    description: "A menu item 'id' to be displayed as selected."
+                }
+            },
+            defaultOpenKeys: {
+                type: 'array',
+                description: 'Array with the keys of default opened sub menus.',
+                items: {
+                    type: 'string',
+                    description: "A menu item 'id' which should be open by default."
+                }
+            },
+            collapsed: {
+                type: 'boolean',
+                default: false,
+                description: 'Collapse the inline menu.'
+            },
+            inlineIndent: {
+                type: 'number',
+                default: 24,
+                description: 'Indent width for each sub menu level in pixels (inline mode only).'
+            },
+            forceSubMenuRender: {
+                type: 'boolean',
+                description: 'Render submenu into DOM before it becomes visible.',
+                default: false
+            },
+            subMenuCloseDelay: {
+                type: 'number',
+                description: 'Delay time to hide submenu when mouse leaves (in seconds).'
+            },
+            subMenuOpenDelay: {
+                type: 'number',
+                description: 'Delay time to show submenu when mouse enters (in seconds).'
+            },
+            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/menu#design-token'
+                },
+                properties: {
+                    dropdownWidth: {
+                        type: 'number',
+                        default: 160,
+                        description: 'Width of dropdown submenus.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1050,
+                        description: 'Z-index for popup submenus.'
+                    },
+                    itemBorderRadius: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for menu items.'
+                    },
+                    subMenuItemBorderRadius: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius for submenu items.'
+                    },
+                    itemColor: {
+                        type: 'string',
+                        description: 'Text color of menu items.'
+                    },
+                    itemHoverColor: {
+                        type: 'string',
+                        description: 'Text color when hovering menu items.'
+                    },
+                    horizontalItemHoverColor: {
+                        type: 'string',
+                        description: 'Text color when hovering horizontal menu items.'
+                    },
+                    itemSelectedColor: {
+                        type: 'string',
+                        description: 'Text color of selected menu items.'
+                    },
+                    horizontalItemSelectedColor: {
+                        type: 'string',
+                        description: 'Text color of selected horizontal menu items.'
+                    },
+                    itemDisabledColor: {
+                        type: 'string',
+                        description: 'Text color of disabled menu items.'
+                    },
+                    dangerItemColor: {
+                        type: 'string',
+                        description: 'Text color of danger menu items.'
+                    },
+                    dangerItemHoverColor: {
+                        type: 'string',
+                        description: 'Text color when hovering danger items.'
+                    },
+                    dangerItemSelectedColor: {
+                        type: 'string',
+                        description: 'Text color of selected danger items.'
+                    },
+                    dangerItemSelectedBg: {
+                        type: 'string',
+                        description: 'Background color of selected danger items.'
+                    },
+                    dangerItemActiveBg: {
+                        type: 'string',
+                        description: 'Background color of active danger items.'
+                    },
+                    itemBg: {
+                        type: 'string',
+                        description: 'Background color of menu items.'
+                    },
+                    itemHoverBg: {
+                        type: 'string',
+                        description: 'Background color when hovering menu items.'
+                    },
+                    subMenuItemBg: {
+                        type: 'string',
+                        description: 'Background color of submenu items.'
+                    },
+                    itemActiveBg: {
+                        type: 'string',
+                        description: 'Background color of active menu items.'
+                    },
+                    itemSelectedBg: {
+                        type: 'string',
+                        description: 'Background color of selected menu items.'
+                    },
+                    horizontalItemSelectedBg: {
+                        type: 'string',
+                        description: 'Background color of selected horizontal items.'
+                    },
+                    horizontalItemHoverBg: {
+                        type: 'string',
+                        description: 'Background color of hovered horizontal items.'
+                    },
+                    horizontalItemBorderRadius: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Border radius for horizontal menu items.'
+                    },
+                    activeBarWidth: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Width of active indicator bar.'
+                    },
+                    activeBarHeight: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Height of active indicator bar.'
+                    },
+                    activeBarBorderWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width of active indicator bar.'
+                    },
+                    itemHeight: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height of menu items.'
+                    },
+                    itemMarginInline: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Horizontal margin between items.'
+                    },
+                    itemMarginBlock: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Vertical margin between items.'
+                    },
+                    itemPaddingInline: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Horizontal padding of menu items.'
+                    },
+                    collapsedWidth: {
+                        type: 'number',
+                        default: 80,
+                        description: 'Width of collapsed inline menu.'
+                    },
+                    popupBg: {
+                        type: 'string',
+                        description: 'Background color of popup submenus.'
+                    },
+                    groupTitleColor: {
+                        type: 'string',
+                        description: 'Text color of group titles.'
+                    },
+                    groupTitleFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of group titles.'
+                    },
+                    iconSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Icon size in menu items.'
+                    },
+                    iconMarginInlineEnd: {
+                        type: 'number',
+                        default: 10,
+                        description: 'Margin after icon in menu items.'
+                    },
+                    collapsedIconSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Icon size in collapsed menu.'
+                    },
+                    darkItemColor: {
+                        type: 'string',
+                        description: 'Text color in dark theme.'
+                    },
+                    darkItemBg: {
+                        type: 'string',
+                        default: '#001529',
+                        description: 'Background color in dark theme.'
+                    },
+                    darkSubMenuItemBg: {
+                        type: 'string',
+                        default: '#000c17',
+                        description: 'Submenu background in dark theme.'
+                    },
+                    darkItemSelectedColor: {
+                        type: 'string',
+                        description: 'Selected item text color in dark theme.'
+                    },
+                    darkItemSelectedBg: {
+                        type: 'string',
+                        description: 'Selected item background in dark theme.'
+                    },
+                    darkItemHoverBg: {
+                        type: 'string',
+                        description: 'Hover background in dark theme.'
+                    },
+                    darkItemHoverColor: {
+                        type: 'string',
+                        description: 'Hover text color in dark theme.'
+                    },
+                    darkGroupTitleColor: {
+                        type: 'string',
+                        description: 'Group title color in dark theme.'
+                    },
+                    darkItemDisabledColor: {
+                        type: 'string',
+                        description: 'Disabled item color in dark theme.'
+                    },
+                    darkPopupBg: {
+                        type: 'string',
+                        default: '#001529',
+                        description: 'Popup background in dark theme.'
+                    },
+                    darkDangerItemColor: {
+                        type: 'string',
+                        description: 'Danger item color in dark theme.'
+                    },
+                    darkDangerItemSelectedBg: {
+                        type: 'string',
+                        description: 'Selected danger item background in dark theme.'
+                    },
+                    darkDangerItemHoverColor: {
+                        type: 'string',
+                        description: 'Hover danger item color in dark theme.'
+                    },
+                    darkDangerItemSelectedColor: {
+                        type: 'string',
+                        description: 'Selected danger item text color in dark theme.'
+                    },
+                    darkDangerItemActiveBg: {
+                        type: 'string',
+                        description: 'Active danger item background in dark theme.'
+                    }
+                }
+            },
+            links: {
+                type: 'array',
+                items: {
+                    type: 'object',
+                    required: [
+                        'id',
+                        'type'
+                    ],
+                    properties: {
+                        id: {
+                            type: 'string',
+                            description: 'Menu item id.'
+                        },
+                        type: {
+                            type: 'string',
+                            enum: [
+                                'MenuDivider',
+                                'MenuLink',
+                                'MenuGroup'
+                            ],
+                            default: 'MenuLink',
+                            description: 'Menu item type.'
+                        },
+                        pageId: {
+                            type: 'string',
+                            description: 'Page to link to.'
+                        },
+                        style: {
+                            type: 'object',
+                            description: 'Css style to applied to link.',
+                            docs: {
+                                displayType: 'yaml'
+                            }
+                        },
+                        properties: {
+                            type: 'object',
+                            description: 'properties from menu item.',
+                            properties: {
+                                title: {
+                                    type: 'string',
+                                    description: 'Menu item title.'
+                                },
+                                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 customize icon on menu item.",
+                                    docs: {
+                                        displayType: 'icon'
+                                    }
+                                },
+                                danger: {
+                                    type: 'boolean',
+                                    default: false,
+                                    description: 'Apply danger style to menu item.'
+                                },
+                                dashed: {
+                                    type: 'boolean',
+                                    default: false,
+                                    description: 'Whether the divider line is dashed.'
+                                },
+                                shortcut: {
+                                    type: 'string',
+                                    description: 'Keyboard shortcut to select this menu item. Renders a shortcut badge next to the label. Use "mod" for Cmd/Ctrl.'
+                                }
+                            }
+                        },
+                        links: {
+                            type: 'array',
+                            items: {
+                                type: 'object',
+                                required: [
+                                    'id',
+                                    'type'
+                                ],
+                                properties: {
+                                    id: {
+                                        type: 'string',
+                                        description: 'Menu item id.'
+                                    },
+                                    type: {
+                                        type: 'string',
+                                        enum: [
+                                            'MenuDivider',
+                                            'MenuLink',
+                                            'MenuGroup'
+                                        ],
+                                        default: 'MenuLink',
+                                        description: 'Menu item type.'
+                                    },
+                                    style: {
+                                        type: 'object',
+                                        description: 'Css style to applied to sub-link.',
+                                        docs: {
+                                            displayType: 'yaml'
+                                        }
+                                    },
+                                    pageId: {
+                                        type: 'string',
+                                        description: 'Page to link to.'
+                                    },
+                                    properties: {
+                                        type: 'object',
+                                        description: 'properties from menu item.',
+                                        properties: {
+                                            title: {
+                                                type: 'string',
+                                                description: 'Menu item title.'
+                                            },
+                                            danger: {
+                                                type: 'boolean',
+                                                default: false,
+                                                description: 'Apply danger style to menu item.'
+                                            },
+                                            dashed: {
+                                                type: 'boolean',
+                                                default: false,
+                                                description: 'Whether the divider line is dashed.'
+                                            },
+                                            shortcut: {
+                                                type: 'string',
+                                                description: 'Keyboard shortcut to select this menu item. Renders a shortcut badge next to the label. Use "mod" for Cmd/Ctrl.'
+                                            }
+                                        },
+                                        links: {
+                                            type: 'array',
+                                            items: {
+                                                type: 'object',
+                                                required: [
+                                                    'id',
+                                                    'type'
+                                                ],
+                                                properties: {
+                                                    id: {
+                                                        type: 'string',
+                                                        description: 'Menu item id.'
+                                                    },
+                                                    type: {
+                                                        type: 'string',
+                                                        enum: [
+                                                            'MenuDivider',
+                                                            'MenuLink'
+                                                        ],
+                                                        default: 'MenuLink',
+                                                        description: 'Menu item type.'
+                                                    },
+                                                    style: {
+                                                        type: 'object',
+                                                        description: 'Css style to applied to sub-link.',
+                                                        docs: {
+                                                            displayType: 'yaml'
+                                                        }
+                                                    },
+                                                    pageId: {
+                                                        type: 'string',
+                                                        description: 'Page to link to.'
+                                                    },
+                                                    properties: {
+                                                        type: 'object',
+                                                        description: 'properties from menu item.',
+                                                        properties: {
+                                                            title: {
+                                                                type: 'string',
+                                                                description: 'Menu item title.'
+                                                            },
+                                                            danger: {
+                                                                type: 'boolean',
+                                                                default: false,
+                                                                description: 'Apply danger style to menu item.'
+                                                            },
+                                                            dashed: {
+                                                                type: 'boolean',
+                                                                default: false,
+                                                                description: 'Whether the divider line is dashed.'
+                                                            },
+                                                            shortcut: {
+                                                                type: 'string',
+                                                                description: 'Keyboard shortcut to select this menu item. Renders a shortcut badge next to the label. Use "mod" for Cmd/Ctrl.'
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Message/Message.js

@@ -13,10 +13,11 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useEffect } from 'react';
-import { message } from 'antd';
+import { App } from 'antd';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const MessageBlock = ({ blockId, components: { Icon }, events, methods, properties })=>{
+import { ErrorBoundary, renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+const MessageBlock = ({ blockId, classNames = {}, components: { Icon, handleError } = {}, events, methods, properties, styles = {} })=>{
+    const { message } = App.useApp();
     useEffect(()=>{
         methods.registerMethod('open', (args = {})=>{
             return message[args.status ?? properties.status ?? 'success']({
@@ -29,12 +30,21 @@ const MessageBlock = ({ blockId, components: { Icon }, events, methods, properti
                 onClose: ()=>methods.triggerEvent({
                         name: 'onClose'
                     }),
-                icon: (args.icon ?? properties.icon) && /*#__PURE__*/ React.createElement(Icon, {
+                icon: (args.icon ?? properties.icon) && /*#__PURE__*/ React.createElement(ErrorBoundary, {
+                    onError: handleError
+                }, /*#__PURE__*/ React.createElement(Icon, {
                     blockId: `${blockId}_icon`,
+                    classNames: {
+                        element: classNames.icon
+                    },
                     events: events,
-                    properties: args.icon ?? properties.icon
-                }),
-                className: methods.makeCssClass(properties.messageStyle)
+                    properties: args.icon ?? properties.icon,
+                    styles: {
+                        element: styles.icon
+                    }
+                })),
+                className: classNames.element,
+                style: styles.element
             });
         });
     });
@@ -42,12 +52,4 @@ const MessageBlock = ({ blockId, components: { Icon }, events, methods, properti
         id: blockId
     });
 };
-MessageBlock.defaultProps = blockDefaultProps;
-MessageBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Message/style.less'
-    ]
-};
-export default MessageBlock;
+export default withBlockDefaults(MessageBlock);

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

@@ -13,7 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Message element.',
+        icon: 'The icon in the Message.'
+    },
+    events: {
+        onClose: 'Trigger actions when message is closed.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -49,23 +58,29 @@
                 default: 'info',
                 description: 'Message status type.'
             },
-            messageStyle: {
+            theme: {
                 type: 'object',
-                description: 'Css style to applied to message.',
+                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'
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/message#design-token'
+                },
+                properties: {
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1080,
+                        description: 'Z-index of the message popup.'
+                    },
+                    contentBg: {
+                        type: 'string',
+                        description: 'Background color of the message content.'
+                    },
+                    contentPadding: {
+                        type: 'string',
+                        description: 'Padding of the message content. Calculated from controlHeightLG, fontSize, lineHeight, and paddingSM.'
+                    }
                 }
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onClose: {
-                type: 'array',
-                description: 'Trigger actions when message is closed.'
-            }
-        }
     }
 };