@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/FloatButton/meta.js

@@ -0,0 +1,156 @@
+/*
+  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 FloatButton element.',
+        icon: 'The icon in the FloatButton.'
+    },
+    events: {
+        onClick: 'Trigger action when button is clicked.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            type: {
+                type: 'string',
+                enum: [
+                    'default',
+                    'primary'
+                ],
+                default: 'default',
+                description: 'Setting button type.'
+            },
+            shape: {
+                type: 'string',
+                enum: [
+                    'circle',
+                    'square'
+                ],
+                default: 'circle',
+                description: 'Setting button shape.'
+            },
+            description: {
+                type: 'string',
+                description: 'Text and other.'
+            },
+            tooltip: {
+                type: 'string',
+                description: 'The text shown in the tooltip.'
+            },
+            icon: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                description: 'Icon for the button.',
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            href: {
+                type: 'string',
+                description: 'The target of hyperlink.'
+            },
+            htmlType: {
+                type: 'string',
+                enum: [
+                    'button',
+                    'submit',
+                    'reset'
+                ],
+                default: 'button',
+                description: 'HTML button type.'
+            },
+            target: {
+                type: 'string',
+                description: 'Specifies where to display the linked URL.'
+            },
+            badge: {
+                type: 'object',
+                description: 'Badge configuration for the button.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            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/float-button#design-token'
+                },
+                properties: {
+                    dotSize: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Badge dot size.'
+                    },
+                    badgeColor: {
+                        type: 'string',
+                        description: 'Badge color.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for square shape.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color for primary type button.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Hover color for primary type button.'
+                    },
+                    colorBgElevated: {
+                        type: 'string',
+                        description: 'Background color for default type button.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text and icon color.'
+                    },
+                    colorTextLightSolid: {
+                        type: 'string',
+                        description: 'Text color on primary background.'
+                    },
+                    boxShadowSecondary: {
+                        type: 'string',
+                        description: 'Shadow for the float button.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size.'
+                    },
+                    fontSizeIcon: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Icon font size.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Controls the float button size.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Footer/Footer.js

@@ -14,23 +14,14 @@
   limitations under the License.
 */ import React from 'react';
 import { Layout } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 const Footer = Layout.Footer;
-const FooterBlock = ({ blockId, content, methods, properties })=>/*#__PURE__*/ React.createElement(Footer, {
+const FooterBlock = ({ blockId, classNames = {}, content, properties, styles = {} })=>/*#__PURE__*/ React.createElement(Footer, {
         id: blockId,
-        className: `${methods.makeCssClass([
-            {
-                margin: 'auto'
-            },
-            properties.style
-        ])} hide-on-print`
+        className: classNames.element ? `${classNames.element} hide-on-print` : 'hide-on-print',
+        style: {
+            margin: 'auto',
+            ...styles.element
+        }
     }, content.content && content.content());
-FooterBlock.defaultProps = blockDefaultProps;
-FooterBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Footer/style.less'
-    ]
-};
-export default FooterBlock;
+export default withBlockDefaults(FooterBlock);

package/dist/blocks/{Header/schema.js → Footer/meta.js}

@@ -13,26 +13,25 @@
   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 in the footer.'
+    },
+    cssKeys: {
+        element: 'The Footer element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
+            theme: {
                 type: 'object',
-                description: 'Css style object to applied to header.',
+                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'
                 }
-            },
-            theme: {
-                type: 'string',
-                enum: [
-                    'light',
-                    'dark'
-                ],
-                default: 'dark',
-                description: 'Page theme.'
             }
         }
     }

package/dist/blocks/Header/Header.js

@@ -12,25 +12,45 @@
   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 from 'react';
+*/ import React, { useEffect } from 'react';
 import { Layout } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import { renderHeaderActions, registerDarkModeMethod } from '../headerActions.js';
 const Header = Layout.Header;
-const HeaderBlock = ({ blockId, content, methods, properties })=>/*#__PURE__*/ React.createElement(Header, {
+const HeaderBlock = ({ blockId, classNames = {}, components: { Icon, Link, ShortcutBadge } = {}, content, events = {}, methods = {}, properties = {}, styles = {} })=>{
+    useEffect(()=>{
+        if (properties.darkModeToggle && methods.registerEvent) {
+            registerDarkModeMethod(methods);
+        }
+    });
+    const hasActions = !type.isNone(properties.notifications) || !type.isNone(properties.profile) || properties.darkModeToggle;
+    return /*#__PURE__*/ React.createElement(Header, {
         id: blockId,
-        className: `${methods.makeCssClass([
-            {
-                backgroundColor: properties.theme === 'light' && '#fff'
-            },
-            properties.style
-        ])} hide-on-print`
-    }, content.content && content.content());
-HeaderBlock.defaultProps = blockDefaultProps;
-HeaderBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Header/style.less'
-    ]
+        className: classNames.element ? `${classNames.element} hide-on-print` : 'hide-on-print',
+        style: {
+            background: properties.color ?? 'var(--ant-color-bg-container)',
+            display: 'flex',
+            alignItems: 'center',
+            ...styles.element
+        }
+    }, content.content && content.content({
+        flex: '1 1 auto',
+        minWidth: 0,
+        alignItems: 'center'
+    }), hasActions && renderHeaderActions({
+        blockId,
+        classNames,
+        styles,
+        properties,
+        methods,
+        events,
+        components: {
+            Icon,
+            Link,
+            ShortcutBadge
+        },
+        iconsColor: properties.iconsColor
+    }));
 };
-export default HeaderBlock;
+export default withBlockDefaults(HeaderBlock);

package/dist/blocks/Header/meta.js

@@ -0,0 +1,318 @@
+/*
+  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 icon from '../../schemas/icon.js';
+export default {
+    category: 'container',
+    icons: [
+        'AiOutlineBell',
+        'AiOutlineLaptop',
+        'AiOutlineMoon',
+        'AiOutlineSun',
+        'AiOutlineUser'
+    ],
+    valueType: null,
+    slots: {
+        content: 'Child blocks in the header.'
+    },
+    cssKeys: {
+        element: 'The Header element.',
+        headerActions: 'The header actions container (notifications, profile, dark mode toggle).',
+        notifications: 'The notification bell wrapper.',
+        notificationsBadge: 'The notification badge.',
+        notificationsIcon: 'The notification bell icon.',
+        profile: 'The profile avatar and dropdown wrapper.',
+        profileAvatar: 'The profile avatar element.',
+        profileMenu: 'The profile dropdown menu popup.',
+        darkModeToggle: 'The dark mode toggle wrapper.'
+    },
+    events: {
+        onProfileMenuClick: {
+            description: 'Trigger action when a profile dropdown menu item is clicked.',
+            event: {
+                key: 'The menu item key (id).',
+                keyPath: 'The key path of the menu item.',
+                pageId: 'The page id of the menu item.',
+                url: 'The url of the menu item.'
+            }
+        },
+        onProfileMenuOpen: {
+            description: 'Trigger action when the profile dropdown opens or closes.',
+            event: {
+                open: 'Whether the dropdown is open.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            color: {
+                type: 'string',
+                description: 'Header background color. Accepts any CSS color value. Defaults to the antd container background color (light in light mode, dark in dark mode).',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            iconsColor: {
+                type: 'string',
+                description: 'Color for the notification, profile, and dark mode toggle icons. Use when the header has a dark background color.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            notifications: {
+                type: 'object',
+                description: 'Notification bell icon with badge in the header. Renders when configured. Use the link property to navigate when clicked.',
+                additionalProperties: false,
+                properties: {
+                    link: {
+                        type: 'object',
+                        description: 'Link to navigate to when the notification bell is clicked.',
+                        additionalProperties: false,
+                        properties: {
+                            pageId: {
+                                type: 'string',
+                                description: 'Page to link to.'
+                            },
+                            url: {
+                                type: 'string',
+                                description: 'External URL to link to.'
+                            },
+                            newTab: {
+                                type: 'boolean',
+                                description: 'Open link in new tab.'
+                            }
+                        }
+                    },
+                    count: {
+                        type: 'number',
+                        description: 'Number to display on the badge. Set to 0 to hide the badge (unless showZero is true).'
+                    },
+                    dot: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'Show a dot instead of a count number.'
+                    },
+                    showZero: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'Show badge when count is zero.'
+                    },
+                    overflowCount: {
+                        type: 'number',
+                        default: 99,
+                        description: 'Max count to show. Values above this display as "N+".'
+                    },
+                    color: {
+                        type: 'string',
+                        description: 'Badge color.',
+                        docs: {
+                            displayType: 'color'
+                        }
+                    },
+                    icon: {
+                        ...icon,
+                        description: 'Icon for the notification button. Defaults to AiOutlineBell.'
+                    },
+                    size: {
+                        type: 'string',
+                        enum: [
+                            'small',
+                            'default',
+                            'large'
+                        ],
+                        default: 'small',
+                        description: 'Size of the notification button.'
+                    }
+                }
+            },
+            profile: {
+                type: 'object',
+                description: 'Profile avatar with optional dropdown menu in the header. Renders when configured. Use with the _user operator to populate from the authenticated user.',
+                additionalProperties: false,
+                properties: {
+                    avatar: {
+                        type: 'object',
+                        description: 'Avatar display properties.',
+                        additionalProperties: false,
+                        properties: {
+                            src: {
+                                type: 'string',
+                                description: 'Image URL for the avatar. Typically bound to _user: image.'
+                            },
+                            content: {
+                                type: 'string',
+                                description: 'Text content inside the avatar (e.g. user initials). Shown when no src is provided.'
+                            },
+                            icon: {
+                                ...icon,
+                                description: 'Icon to display in avatar when no src or content is set. Defaults to AiOutlineUser.'
+                            },
+                            color: {
+                                type: 'string',
+                                description: 'Background color of the avatar when not using src.',
+                                docs: {
+                                    displayType: 'color'
+                                }
+                            },
+                            size: {
+                                type: [
+                                    'string',
+                                    'number'
+                                ],
+                                default: 'small',
+                                enum: [
+                                    'default',
+                                    'small',
+                                    'large'
+                                ],
+                                description: 'Size of the avatar.',
+                                docs: {
+                                    displayType: 'string'
+                                }
+                            },
+                            shape: {
+                                type: 'string',
+                                enum: [
+                                    'circle',
+                                    'square'
+                                ],
+                                default: 'circle',
+                                description: 'Shape of the avatar.'
+                            }
+                        }
+                    },
+                    links: {
+                        type: 'array',
+                        description: 'Dropdown menu items. Uses the same MenuLink/MenuGroup/MenuDivider pattern as DropdownMenu. When links are provided, clicking the avatar opens a dropdown menu.',
+                        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.'
+                                },
+                                url: {
+                                    type: 'string',
+                                    description: 'External URL to link to.'
+                                },
+                                newTab: {
+                                    type: 'boolean',
+                                    description: 'Open link in new tab.'
+                                },
+                                properties: {
+                                    type: 'object',
+                                    description: 'Properties for the menu item.',
+                                    properties: {
+                                        title: {
+                                            type: 'string',
+                                            description: 'Menu item title.'
+                                        },
+                                        icon: {
+                                            ...icon,
+                                            description: 'Icon for the menu item.'
+                                        },
+                                        danger: {
+                                            type: 'boolean',
+                                            default: false,
+                                            description: 'Apply danger style to menu item.'
+                                        },
+                                        disabled: {
+                                            type: 'boolean',
+                                            default: false,
+                                            description: 'Disable the menu item.'
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    trigger: {
+                        type: 'string',
+                        enum: [
+                            'click',
+                            'hover'
+                        ],
+                        default: 'hover',
+                        description: 'How the profile dropdown opens.'
+                    },
+                    placement: {
+                        type: 'string',
+                        enum: [
+                            'bottomLeft',
+                            'bottom',
+                            'bottomRight',
+                            'topLeft',
+                            'top',
+                            'topRight'
+                        ],
+                        default: 'bottomRight',
+                        description: 'Dropdown placement relative to the avatar.'
+                    },
+                    arrow: {
+                        anyOf: [
+                            {
+                                type: 'boolean'
+                            },
+                            {
+                                type: 'object',
+                                properties: {
+                                    pointAtCenter: {
+                                        type: 'boolean'
+                                    }
+                                }
+                            }
+                        ],
+                        default: false,
+                        description: 'Show arrow on the dropdown.',
+                        docs: {
+                            displayType: 'switch'
+                        }
+                    }
+                }
+            },
+            darkModeToggle: {
+                type: 'boolean',
+                default: false,
+                description: 'Show a dark mode toggle icon in the header. Toggles the Ant Design dark theme for the entire page. Preference is persisted to localStorage.'
+            },
+            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'
+                }
+            }
+        }
+    }
+};