@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/NumberInput/meta.js

@@ -0,0 +1,250 @@
+/*
+  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 LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import { disabled, autoFocus, variant, bordered, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'number',
+    cssKeys: {
+        element: 'The NumberInput element.',
+        label: 'The NumberInput label.',
+        extra: 'The NumberInput extra content.',
+        feedback: 'The NumberInput validation feedback.'
+    },
+    events: {
+        onBlur: 'Trigger action event occurs when number input loses focus.',
+        onChange: {
+            description: 'Trigger action when number input is changed.',
+            event: {
+                value: 'The current number value.'
+            }
+        },
+        onFocus: 'Trigger action when number input gets focus.',
+        onPressEnter: 'Trigger actions when input is focused and enter is pressed.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            autoFocus,
+            bordered: {
+                ...bordered,
+                description: 'Whether or not the number input has a border style. Deprecated, use variant instead.'
+            },
+            controls: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether or not to show the +- controls.'
+            },
+            disabled,
+            formatter: {
+                type: 'object',
+                description: 'A function specifying the format of the value presented.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            keyboard: {
+                type: 'boolean',
+                default: true,
+                description: 'If enabled, control input with keyboard up and down.'
+            },
+            label,
+            min: {
+                type: 'number',
+                description: 'Minimum value allowed by the block.'
+            },
+            max: {
+                type: 'number',
+                description: 'Maximum value allowed by the block.'
+            },
+            parser: {
+                type: 'object',
+                description: 'A function specifying the value extracted from the formatter.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            placeholder: {
+                type: 'string',
+                description: 'Placeholder text inside the block to show message before user types input.'
+            },
+            decimalSeparator: {
+                type: 'string',
+                default: '.',
+                description: 'Separator between number and decimal places.'
+            },
+            precision: {
+                type: 'integer',
+                description: 'Precision (number of decimal places) allowed by the block.'
+            },
+            size: sizeSmallDefaultLarge,
+            step: {
+                type: 'number',
+                default: 1,
+                description: 'The number to which the current value is increased or decreased. It can be an integer or decimal.'
+            },
+            title: {
+                type: 'string',
+                description: 'Number input label title - supports html.'
+            },
+            variant,
+            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/input-number#design-token'
+                },
+                properties: {
+                    activeBorderColor: {
+                        type: 'string',
+                        description: 'Border color when the input is active (focused).'
+                    },
+                    activeShadow: {
+                        type: 'string',
+                        description: 'Box shadow when the input is active.'
+                    },
+                    addonBg: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.02)',
+                        description: 'Background color for addon areas.'
+                    },
+                    activeBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color when the input is active.'
+                    },
+                    controlWidth: {
+                        type: 'number',
+                        default: 90,
+                        description: 'Default width of the InputNumber control.'
+                    },
+                    errorActiveShadow: {
+                        type: 'string',
+                        description: 'Box shadow when the input is active in error status.'
+                    },
+                    filledHandleBg: {
+                        type: 'string',
+                        default: '#f0f0f0',
+                        description: 'Handle background color in filled variant.'
+                    },
+                    handleActiveBg: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.02)',
+                        description: 'Handle background color when active (pressed).'
+                    },
+                    handleBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Default handle background color.'
+                    },
+                    handleBorderColor: {
+                        type: 'string',
+                        default: '#d9d9d9',
+                        description: 'Handle border color.'
+                    },
+                    handleFontSize: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Font size of the handle icons (+/-).'
+                    },
+                    handleHoverColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Handle icon color on hover.'
+                    },
+                    handleOpacity: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Default opacity of the handles (0 means hidden until hover).'
+                    },
+                    handleVisible: {
+                        type: 'string',
+                        default: 'auto',
+                        description: 'Handle visibility mode.'
+                    },
+                    handleWidth: {
+                        type: 'number',
+                        default: 22,
+                        description: 'Width of the spinner handles.'
+                    },
+                    hoverBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color on hover.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        description: 'Border color on hover.'
+                    },
+                    inputFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for the default size input.'
+                    },
+                    inputFontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size for the large size input.'
+                    },
+                    inputFontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for the small size input.'
+                    },
+                    paddingBlock: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Vertical padding for the default size.'
+                    },
+                    paddingBlockLG: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Vertical padding for the large size.'
+                    },
+                    paddingBlockSM: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Vertical padding for the small size.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding for the default size.'
+                    },
+                    paddingInlineLG: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding for the large size.'
+                    },
+                    paddingInlineSM: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Horizontal padding for the small size.'
+                    },
+                    warningActiveShadow: {
+                        type: 'string',
+                        description: 'Box shadow when the input is active in warning status.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/PageHeaderMenu/PageHeaderMenu.js

@@ -12,9 +12,9 @@
   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 { blockDefaultProps } from '@lowdefy/block-utils';
-import { get, mergeObjects, type } from '@lowdefy/helpers';
+*/ import React, { useEffect } from 'react';
+import { mergeObjects, type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Breadcrumb from '../Breadcrumb/Breadcrumb.js';
 import Content from '../Content/Content.js';
 import Footer from '../Footer/Footer.js';
@@ -22,136 +22,26 @@ import Header from '../Header/Header.js';
 import Layout from '../Layout/Layout.js';
 import Menu from '../Menu/Menu.js';
 import MobileMenu from '../MobileMenu/MobileMenu.js';
-const PageHeaderMenu = ({ basePath, blockId, components: { Icon, Link }, content, events, menus, methods, pageId, properties })=>{
-    const styles = {
-        layout: {
-            minHeight: '100vh'
-        },
-        header: {
-            display: 'flex',
-            alignItems: 'center',
-            padding: '0 46px',
-            xs: {
-                padding: '0 10px'
-            },
-            sm: {
-                padding: '0 15px'
-            },
-            md: {
-                padding: '0 30px'
-            },
-            lg: {
-                padding: '0 46px'
-            }
-        },
-        headerContent: {
-            display: 'flex',
-            flex: '1 1 auto',
-            alignItems: 'center',
-            justifyContent: 'flex-end'
-        },
-        logo: {
-            margin: '0px 30px',
-            flex: '0 1 auto',
-            width: 130,
-            xs: {
-                margin: '0 5px',
-                width: 40
-            },
-            sm: {
-                margin: '0 10px',
-                width: 130
-            },
-            md: {
-                margin: '0 15px'
-            }
-        },
-        lgMenu: {
-            flex: '1 1 auto',
-            xs: {
-                display: 'none'
-            },
-            sm: {
-                display: 'none'
-            },
-            md: {
-                display: 'none'
-            },
-            lg: {
-                display: 'flex'
-            }
-        },
-        mdMenu: {
-            flex: '0 1 auto',
-            paddingLeft: '1rem',
-            xs: {
-                display: 'flex'
-            },
-            sm: {
-                display: 'flex'
-            },
-            md: {
-                display: 'flex'
-            },
-            lg: {
-                display: 'none'
-            }
-        },
-        desktop: {
-            display: 'none',
-            lg: {
-                display: 'block'
-            }
-        },
-        mobile: {
-            display: 'block',
-            lg: {
-                display: 'none'
-            }
-        },
-        body: {
-            padding: '0 40px 40px 40px',
-            xs: {
-                padding: '0 5px 5px 5px'
-            },
-            sm: {
-                padding: '0 10px 10px 10px'
-            },
-            md: {
-                padding: '0 20px 20px 20px'
-            },
-            lg: {
-                padding: '0 40px 40px 40px'
-            }
-        },
-        breadcrumb: {
-            margin: '16px 0'
-        },
-        noBreadcrumb: {
-            padding: '20px 0',
-            xs: {
-                padding: '5px 0'
-            },
-            sm: {
-                padding: '5px 0'
-            },
-            md: {
-                padding: '10px 0'
-            }
-        }
-    };
+import { getDarkMode, renderHeaderActions, registerDarkModeMethod } from '../headerActions.js';
+const PageHeaderMenu = ({ basePath, blockId, classNames = {}, components: { Icon, Link, ShortcutBadge }, content, events, menus, methods, pageId, properties, styles = {} })=>{
+    useEffect(()=>{
+        registerDarkModeMethod(methods);
+    });
     return /*#__PURE__*/ React.createElement(Layout, {
         blockId: blockId,
         events: events,
-        properties: {
-            style: mergeObjects([
-                styles.layout,
-                properties.style
-            ])
-        },
         components: {
             Icon,
-            Link
+            Link,
+            ShortcutBadge
+        },
+        styles: {
+            element: mergeObjects([
+                {
+                    minHeight: '100vh'
+                },
+                styles.element
+            ])
         },
         content: {
             content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Header, {
@@ -159,41 +49,46 @@ const PageHeaderMenu = ({ basePath, blockId, components: { Icon, Link }, content
                     events: events,
                     components: {
                         Icon,
-                        Link
+                        Link,
+                        ShortcutBadge
+                    },
+                    classNames: {
+                        element: classNames.header
+                    },
+                    properties: {},
+                    styles: {
+                        element: mergeObjects([
+                            {
+                                background: 'var(--ant-color-bg-container)'
+                            },
+                            styles.header
+                        ])
                     },
-                    properties: mergeObjects([
-                        {
-                            style: styles.header
-                        },
-                        properties.header
-                    ]),
                     content: {
-                        // TODO: use next/image
                         content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Link, {
                                 home: true
                             }, /*#__PURE__*/ React.createElement("picture", null, /*#__PURE__*/ React.createElement("source", {
                                 media: `(min-width:${properties.logo?.breakpoint ?? 577}px)`,
-                                srcSet: properties.logo?.src ?? `${basePath}/logo-${properties.header?.theme ?? 'dark'}-theme.png`
+                                srcSet: properties.logo?.src ?? `${basePath}/logo-${getDarkMode() ? 'dark' : 'light'}-theme.png`
                             }), /*#__PURE__*/ React.createElement("img", {
-                                src: properties.logo?.srcMobile ?? properties.logo?.src ?? `${basePath}/logo-square-${properties.header?.theme ?? 'dark'}-theme.png`,
+                                src: properties.logo?.srcMobile ?? properties.logo?.src ?? `${basePath}/logo-square-${getDarkMode() ? 'dark' : 'light'}-theme.png`,
                                 alt: properties.logo?.alt ?? 'Lowdefy',
-                                className: methods.makeCssClass([
-                                    styles.logo,
-                                    properties.logo?.style
-                                ])
+                                className: classNames.logo ?? 'mx-1.5 sm:mx-2.5 md:mx-4 lg:mx-[30px] shrink w-10 sm:w-[130px]',
+                                style: styles.logo
                             }))), /*#__PURE__*/ React.createElement("div", {
-                                className: methods.makeCssClass(styles.headerContent)
+                                className: "flex flex-auto items-center justify-end"
                             }, /*#__PURE__*/ React.createElement("div", {
-                                className: methods.makeCssClass([
-                                    styles.desktop,
-                                    styles.lgMenu
-                                ])
+                                className: "hidden lg:flex flex-auto"
                             }, /*#__PURE__*/ React.createElement(Menu, {
                                 blockId: `${blockId}_menu`,
                                 basePath: basePath,
                                 components: {
                                     Icon,
-                                    Link
+                                    Link,
+                                    ShortcutBadge
+                                },
+                                classNames: {
+                                    element: classNames.menu
                                 },
                                 events: events,
                                 methods: methods,
@@ -202,29 +97,60 @@ const PageHeaderMenu = ({ basePath, blockId, components: { Icon, Link }, content
                                 properties: mergeObjects([
                                     {
                                         mode: 'horizontal',
-                                        collapsed: false,
-                                        theme: get(properties, 'header.theme') ?? 'dark'
+                                        collapsed: false
                                     },
                                     properties.menu,
                                     properties.menuLg
-                                ])
+                                ]),
+                                styles: {
+                                    element: mergeObjects([
+                                        {
+                                            borderBottom: 'none'
+                                        },
+                                        styles.menu
+                                    ])
+                                },
+                                rename: {
+                                    events: {
+                                        onClick: 'onMenuItemClick',
+                                        onSelect: 'onMenuItemSelect',
+                                        onToggleMenuGroup: 'onToggleMenuGroup'
+                                    }
+                                }
                             })), content.header && content.header(mergeObjects([
                                 {
                                     width: 'auto',
-                                    flex: '0 1 auto'
+                                    flex: '0 1 auto',
+                                    alignItems: 'center',
+                                    flexWrap: 'nowrap'
+                                },
+                                styles.headerContent
+                            ])), renderHeaderActions({
+                                blockId,
+                                classNames,
+                                styles,
+                                properties,
+                                methods,
+                                events,
+                                components: {
+                                    Icon,
+                                    Link,
+                                    ShortcutBadge
+                                },
+                                iconsColor: properties.iconsColor
+                            }), /*#__PURE__*/ React.createElement(MobileMenu, {
+                                classNames: {
+                                    element: classNames.mobileMenu ?? 'flex lg:hidden shrink pl-4'
+                                },
+                                styles: {
+                                    element: styles.mobileMenu
                                 },
-                                properties.header?.contentStyle
-                            ])), /*#__PURE__*/ React.createElement("div", {
-                                className: methods.makeCssClass([
-                                    styles.mobile,
-                                    styles.mdMenu
-                                ])
-                            }, /*#__PURE__*/ React.createElement(MobileMenu, {
                                 blockId: `${blockId}_mobile_menu`,
                                 basePath: basePath,
                                 components: {
                                     Icon,
-                                    Link
+                                    Link,
+                                    ShortcutBadge
                                 },
                                 events: events,
                                 methods: methods,
@@ -233,55 +159,87 @@ const PageHeaderMenu = ({ basePath, blockId, components: { Icon, Link }, content
                                 properties: mergeObjects([
                                     properties.menu,
                                     properties.menuMd
-                                ])
-                            }))))
+                                ]),
+                                rename: {
+                                    methods: {
+                                        toggleOpen: 'toggleMobileMenuOpen',
+                                        setOpen: 'setMobileMenuOpen'
+                                    },
+                                    events: {
+                                        onClose: 'onMobileMenuClose',
+                                        onOpen: 'onMobileMenuOpen'
+                                    }
+                                }
+                            })))
                     }
                 }), /*#__PURE__*/ React.createElement(Content, {
                     blockId: `${blockId}_content`,
                     components: {
                         Icon,
-                        Link
+                        Link,
+                        ShortcutBadge
+                    },
+                    classNames: {
+                        element: classNames.content
                     },
                     events: events,
-                    properties: mergeObjects([
-                        {
-                            style: styles.body
-                        },
-                        properties.content
-                    ]),
+                    properties: properties.content ?? {},
+                    styles: {
+                        element: mergeObjects([
+                            {
+                                padding: '0 40px 40px 40px',
+                                minWidth: 0
+                            },
+                            styles.content
+                        ])
+                    },
                     content: {
                         content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, !type.isNone(properties.breadcrumb) ? /*#__PURE__*/ React.createElement(Breadcrumb, {
                                 blockId: `${blockId}_breadcrumb`,
                                 basePath: basePath,
                                 components: {
                                     Icon,
-                                    Link
+                                    Link,
+                                    ShortcutBadge
+                                },
+                                classNames: {
+                                    element: classNames.breadcrumb
                                 },
                                 events: events,
                                 methods: methods,
-                                properties: mergeObjects([
-                                    {
-                                        style: styles.breadcrumb
-                                    },
-                                    properties.breadcrumb
-                                ]),
+                                properties: properties.breadcrumb,
+                                styles: {
+                                    element: mergeObjects([
+                                        {
+                                            margin: '16px 0'
+                                        },
+                                        styles.breadcrumb
+                                    ])
+                                },
                                 rename: {
                                     events: {
                                         onClick: 'onBreadcrumbClick'
                                     }
                                 }
                             }) : /*#__PURE__*/ React.createElement("div", {
-                                className: methods.makeCssClass(styles.noBreadcrumb)
+                                className: "py-1.5 sm:py-1.5 md:py-2.5 lg:py-5"
                             }), content.content && content.content())
                     }
                 }), content.footer && /*#__PURE__*/ React.createElement(Footer, {
                     blockId: `${blockId}_footer`,
                     components: {
                         Icon,
-                        Link
+                        Link,
+                        ShortcutBadge
+                    },
+                    classNames: {
+                        element: classNames.footer
                     },
                     events: events,
                     properties: properties.footer,
+                    styles: {
+                        element: styles.footer
+                    },
                     content: {
                         content: ()=>content.footer()
                     }
@@ -289,14 +247,4 @@ const PageHeaderMenu = ({ basePath, blockId, components: { Icon, Link }, content
         }
     });
 };
-PageHeaderMenu.defaultProps = blockDefaultProps;
-PageHeaderMenu.meta = {
-    category: 'container',
-    icons: [
-        ...MobileMenu.meta.icons
-    ],
-    styles: [
-        'blocks/PageHeaderMenu/style.less'
-    ]
-};
-export default PageHeaderMenu;
+export default withBlockDefaults(PageHeaderMenu);