@lowdefy/blocks-antd 5.0.0 → 5.2.0

package/dist/blocks/PageSidebarLayout/meta.js

@@ -0,0 +1,526 @@
+/*
+  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 MobileMenuMeta from '../MobileMenu/meta.js';
+import icon from '../../schemas/icon.js';
+import menuLinks from '../../schemas/menuLinks.js';
+import breadcrumbList from '../../schemas/breadcrumbList.js';
+export default {
+    category: 'container',
+    icons: [
+        'AiOutlineBell',
+        'AiOutlineLaptop',
+        'AiOutlineMenuFold',
+        'AiOutlineMenuUnfold',
+        'AiOutlineMoon',
+        'AiOutlineSun',
+        'AiOutlineUser',
+        ...MobileMenuMeta.icons
+    ],
+    valueType: null,
+    slots: {
+        content: 'Main page content.',
+        footer: 'Page footer.',
+        header: 'Additional header content.',
+        mobileDrawerContent: 'Content in the mobile menu drawer.',
+        mobileDrawerFooter: 'Footer in the mobile menu drawer.',
+        mobileExtra: 'Extra content in the mobile header bar.',
+        siderClosed: 'Content shown in the sider when collapsed.',
+        siderOpen: 'Content shown in the sider when expanded.'
+    },
+    cssKeys: {
+        element: 'The PageSidebarLayout element.',
+        sider: 'The PageSidebarLayout sider.',
+        menu: 'The PageSidebarLayout menu.',
+        mobileHeader: 'The PageSidebarLayout mobile header.',
+        mobileMenu: 'The PageSidebarLayout mobile menu.',
+        header: 'The PageSidebarLayout header.',
+        headerActions: 'The header actions container (notifications, profile, dark mode toggle).',
+        logo: 'The PageSidebarLayout logo.',
+        notifications: 'The notification bell button.',
+        notificationsBadge: 'The notification badge wrapper.',
+        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 button.',
+        content: 'The PageSidebarLayout content.',
+        breadcrumb: 'The PageSidebarLayout breadcrumb.',
+        footer: 'The PageSidebarLayout footer.',
+        toggleButton: 'The PageSidebarLayout sider toggle button.'
+    },
+    events: {
+        onToggleSider: 'Trigger action when sider toggle button is clicked.',
+        onMenuItemClick: 'Trigger action when menu item is clicked.',
+        onMenuItemSelect: 'Trigger action when menu item is selected.',
+        onToggleMenuGroup: 'Trigger action when menu group is opened.',
+        onBreadcrumbClick: 'Trigger action when a breadcrumb item is clicked.',
+        onMobileMenuOpen: 'Trigger action when mobile menu is opened.',
+        onMobileMenuClose: 'Trigger action when mobile menu is closed.',
+        onToggleDrawer: 'Trigger action when mobile menu drawer is toggled.',
+        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: {
+            title: {
+                type: 'string',
+                description: 'Page title. Accepted for compatibility.'
+            },
+            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'
+                }
+            },
+            logo: {
+                type: 'object',
+                description: 'Header logo settings. By default, images are served from the app public folder and auto-swap between light and dark variants based on dark mode. See <a href="/hosting-files">Hosting Files</a> for details.',
+                additionalProperties: false,
+                properties: {
+                    src: {
+                        type: 'string',
+                        description: 'Logo image URL for desktop. Defaults to logo-light-theme.png or logo-dark-theme.png from the public folder (~250x72px), auto-selected based on dark mode.'
+                    },
+                    srcMobile: {
+                        type: 'string',
+                        description: 'Logo image URL for mobile. Defaults to logo-square-light-theme.png or logo-square-dark-theme.png from the public folder (~125x125px), auto-selected based on dark mode.'
+                    },
+                    alt: {
+                        type: 'string',
+                        default: 'Lowdefy',
+                        description: 'Logo alternative text.'
+                    },
+                    style: {
+                        type: 'object',
+                        description: 'Css style object to apply to logo.',
+                        docs: {
+                            displayType: 'yaml'
+                        }
+                    }
+                }
+            },
+            sider: {
+                type: 'object',
+                description: 'Sider properties.',
+                additionalProperties: false,
+                properties: {
+                    collapsedWidth: {
+                        type: 'integer',
+                        description: 'Width of the collapsed sidebar, by setting to 0 a special trigger will appear.'
+                    },
+                    collapsible: {
+                        type: 'boolean',
+                        default: true,
+                        description: 'Whether can be collapsed.'
+                    },
+                    initialCollapsed: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'Set the initial collapsed state.'
+                    },
+                    width: {
+                        type: [
+                            'string',
+                            'number'
+                        ],
+                        description: 'Width of the sidebar.',
+                        docs: {
+                            displayType: 'string'
+                        }
+                    },
+                    hideToggleButton: {
+                        type: 'boolean',
+                        description: 'Hide toggle button in sider.',
+                        default: false
+                    }
+                }
+            },
+            siderStorageKey: {
+                type: 'string',
+                default: 'sider',
+                description: "localStorage key suffix for sider state persistence. Produces key 'lf-{siderStorageKey}-open'."
+            },
+            header: {
+                type: 'object',
+                description: 'Header properties.',
+                additionalProperties: false,
+                properties: {
+                    contentStyle: {
+                        type: 'object',
+                        description: 'Header content css style object.',
+                        docs: {
+                            displayType: 'yaml'
+                        }
+                    }
+                }
+            },
+            toggleSiderButton: {
+                type: 'object',
+                description: 'Toggle sider button properties.',
+                docs: {
+                    displayType: 'button'
+                }
+            },
+            footer: {
+                type: 'object',
+                description: 'Footer properties.',
+                additionalProperties: false,
+                properties: {
+                    style: {
+                        type: 'object',
+                        description: 'Footer css style object.',
+                        docs: {
+                            displayType: 'yaml'
+                        }
+                    }
+                }
+            },
+            content: {
+                type: 'object',
+                description: 'Content properties.',
+                additionalProperties: false,
+                properties: {
+                    style: {
+                        type: 'object',
+                        description: 'Content css style object.',
+                        docs: {
+                            displayType: 'yaml'
+                        }
+                    }
+                }
+            },
+            breadcrumb: {
+                type: 'object',
+                description: 'Breadcrumb properties.',
+                properties: {
+                    separator: {
+                        type: 'string',
+                        default: '/',
+                        description: 'Use a custom separator string.'
+                    },
+                    list: breadcrumbList
+                }
+            },
+            menu: {
+                type: 'object',
+                description: 'Menu properties.',
+                properties: {
+                    links: menuLinks
+                }
+            },
+            menuLg: {
+                type: 'object',
+                description: 'Menu large screen properties. Overwrites menu properties on desktop screen sizes.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            menuMd: {
+                type: 'object',
+                description: 'Mobile menu properties. Overwrites menu properties on mobile screen sizes.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            notifications: {
+                type: 'object',
+                description: 'Notification bell icon with badge. Shown in the sider on desktop and the mobile header on small screens. Renders when configured. Use the link property to navigate when clicked.',
+                additionalProperties: false,
+                properties: {
+                    title: {
+                        type: 'string',
+                        default: 'Notifications',
+                        description: 'Label shown next to the bell icon when the sider is expanded. Hidden on mobile header and collapsed sider.'
+                    },
+                    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. Shown in the sider on desktop and the mobile header on small screens. Renders when configured. Use with the _user operator to populate from the authenticated user.',
+                additionalProperties: false,
+                properties: {
+                    title: {
+                        type: 'string',
+                        default: 'Profile',
+                        description: 'Label shown next to the avatar when the sider is expanded. Hidden on mobile header and collapsed sider.'
+                    },
+                    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 schema as Menu. Compatible with _menu operator output for access-filtered menus.',
+                        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.'
+                                },
+                                style: {
+                                    type: 'object',
+                                    description: 'CSS style applied to the link.',
+                                    docs: {
+                                        displayType: 'yaml'
+                                    }
+                                },
+                                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.'
+                                        },
+                                        dashed: {
+                                            type: 'boolean',
+                                            default: false,
+                                            description: 'Whether the divider line is dashed.'
+                                        },
+                                        shortcut: {
+                                            type: 'string',
+                                            description: 'Keyboard shortcut. Renders a shortcut badge next to the label. Use "mod" for Cmd/Ctrl.'
+                                        }
+                                    }
+                                },
+                                links: {
+                                    type: 'array',
+                                    description: 'Nested menu items for MenuGroup.'
+                                }
+                            }
+                        }
+                    },
+                    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 button in the sider and mobile header. Toggles the Ant Design dark theme for the entire page. Preference is persisted to localStorage.'
+            },
+            iconsColor: {
+                type: 'string',
+                description: 'Color for notification and dark mode toggle icons.',
+                docs: {
+                    displayType: 'color'
+                }
+            }
+        }
+    }
+};

package/dist/blocks/PageSiderMenu/PageSiderMenu.js

@@ -26,21 +26,51 @@ import Menu from '../Menu/Menu.js';
 import MobileMenu from '../MobileMenu/MobileMenu.js';
 import Sider from '../Sider/Sider.js';
 import { getDarkMode, renderHeaderActions, registerDarkModeMethod } from '../headerActions.js';
+function getInitialSiderState({ properties }) {
+    const storageKey = `lf-${properties.siderStorageKey ?? 'sider'}-open`;
+    try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored === 'true') return true;
+        if (stored === 'false') return false;
+    } catch  {
+    // localStorage unavailable (SSR, privacy mode)
+    }
+    return !properties.sider?.initialCollapsed;
+}
+function writeSiderState({ properties, open }) {
+    const storageKey = `lf-${properties.siderStorageKey ?? 'sider'}-open`;
+    try {
+        localStorage.setItem(storageKey, String(open));
+    } catch  {
+    // localStorage unavailable
+    }
+}
 const PageSiderMenu = ({ basePath, blockId, classNames = {}, components: { Icon, Link, ShortcutBadge }, events, content, menus, methods, pageId, properties, styles = {} })=>{
-    const [openSiderState, setSiderOpen] = useState(true);
+    const [openSiderState, setSiderOpen] = useState(()=>getInitialSiderState({
+            properties
+        }));
     useEffect(()=>{
         registerDarkModeMethod(methods);
         methods.registerMethod('toggleSiderOpen', ()=>{
-            methods._toggleSiderOpen({
-                open: !openSiderState
+            const next = !openSiderState;
+            methods._setSiderOpen({
+                open: next
+            });
+            setSiderOpen(next);
+            writeSiderState({
+                properties,
+                open: next
             });
-            setSiderOpen(!openSiderState);
         });
         methods.registerMethod('setSiderOpen', ({ open })=>{
-            methods._toggleSiderOpen({
+            methods._setSiderOpen({
                 open
             });
             setSiderOpen(open);
+            writeSiderState({
+                properties,
+                open
+            });
         });
     });
     return /*#__PURE__*/ React.createElement(Layout, {
@@ -180,7 +210,10 @@ const PageSiderMenu = ({ basePath, blockId, classNames = {}, components: { Icon,
                                 },
                                 events: events,
                                 methods: methods,
-                                properties: properties.sider ?? {},
+                                properties: {
+                                    ...properties.sider ?? {},
+                                    initialCollapsed: !openSiderState
+                                },
                                 classNames: {
                                     element: classNames.sider ?? 'hidden lg:block'
                                 },

package/dist/blocks/PageSiderMenu/meta.js

@@ -136,6 +136,11 @@ export default {
                         type: 'integer',
                         description: 'Width of the collapsed sidebar, by setting to 0 a special trigger will appear.'
                     },
+                    initialCollapsed: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'Set the initial collapsed state. Used as the fallback when no persisted preference exists in localStorage.'
+                    },
                     reverseArrow: {
                         type: 'boolean',
                         default: false,
@@ -158,6 +163,11 @@ export default {
                     }
                 }
             },
+            siderStorageKey: {
+                type: 'string',
+                default: 'sider',
+                description: "localStorage key suffix for sider state persistence. Produces key 'lf-{siderStorageKey}-open'."
+            },
             toggleSiderButton: {
                 type: 'object',
                 description: 'Toggle sider button properties.',

package/dist/blocks/Selector/Selector.js

@@ -52,10 +52,16 @@ const Selector = ({ blockId, classNames = {}, components: { Icon, Link }, events
                     id: `${blockId}_input`,
                     variant: properties.bordered === false ? 'borderless' : properties.variant,
                     className: classNames.element,
+                    classNames: {
+                        content: classNames.selector
+                    },
                     style: {
                         width: '100%',
                         ...styles.element
                     },
+                    styles: {
+                        content: styles.selector
+                    },
                     mode: "single",
                     autoFocus: properties.autoFocus,
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),

package/dist/blocks/Selector/meta.js

@@ -26,6 +26,7 @@ export default {
     valueType: 'any',
     cssKeys: {
         element: 'The Selector element.',
+        selector: 'The inner value/tag container of the Selector (antd `content` semantic slot).',
         clearIcon: 'The clear icon in the Selector.',
         label: 'The Selector label.',
         extra: 'The Selector extra content.',

package/dist/blocks/Sider/Sider.js

@@ -16,6 +16,7 @@
 import { get } from '@lowdefy/helpers';
 import { Layout } from 'antd';
 import { withBlockDefaults } from '@lowdefy/block-utils';
+import { getDarkMode } from '../headerActions.js';
 const Sider = Layout.Sider;
 const triggerSetOpen = async ({ state, setOpen, methods, rename })=>{
     if (!state) {
@@ -36,6 +37,14 @@ const triggerSetOpen = async ({ state, setOpen, methods, rename })=>{
 };
 const SiderBlock = ({ blockId, classNames = {}, properties, content, methods, rename, styles = {} })=>{
     const [openState, setOpen] = useState(!properties.initialCollapsed);
+    // Sync internal state when the parent (e.g. PageSidebarLayout) changes
+    // `initialCollapsed` after mount — typically because a hydration-time read
+    // from localStorage restored a value different from the SSR default.
+    useEffect(()=>{
+        setOpen(!properties.initialCollapsed);
+    }, [
+        properties.initialCollapsed
+    ]);
     useEffect(()=>{
         methods.registerMethod(get(rename, 'methods.toggleOpen', {
             default: 'toggleOpen'
@@ -62,6 +71,7 @@ const SiderBlock = ({ blockId, classNames = {}, properties, content, methods, re
         collapsedWidth: properties.collapsedWidth,
         collapsible: properties.collapsible,
         reverseArrow: properties.reverseArrow,
+        theme: properties.theme ?? (getDarkMode() ? 'dark' : 'light'),
         style: {
             overflow: 'auto',
             background: 'var(--ant-color-bg-container)',