@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/MobileMenu/MobileMenu.js

@@ -13,12 +13,13 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState, useEffect } from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import { mergeObjects, get } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Button from '../Button/Button.js';
 import Drawer from '../Drawer/Drawer.js';
 import Menu from '../Menu/Menu.js';
-const MobileMenu = ({ basePath, blockId, components, events, methods, menus, pageId, properties, rename })=>{
+import { getDarkMode } from '../headerActions.js';
+const MobileMenu = ({ basePath, blockId, classNames = {}, components, content, events, methods, menus, pageId, properties, rename, styles = {} })=>{
     const [openState, setOpen] = useState(false);
     useEffect(()=>{
         methods.registerMethod(get(rename, 'methods.toggleOpen', {
@@ -39,7 +40,9 @@ const MobileMenu = ({ basePath, blockId, components, events, methods, menus, pag
         });
     });
     return /*#__PURE__*/ React.createElement("div", {
-        id: blockId
+        id: blockId,
+        className: classNames.element,
+        style: styles.element
     }, /*#__PURE__*/ React.createElement(Button, {
         blockId: `${blockId}_button`,
         components: components,
@@ -86,7 +89,18 @@ const MobileMenu = ({ basePath, blockId, components, events, methods, menus, pag
                 default: 'toggleOpen'
             })](),
         content: {
-            content: ()=>/*#__PURE__*/ React.createElement(Menu, {
+            extra: properties.logo ? ()=>/*#__PURE__*/ React.createElement("div", {
+                    style: {
+                        flex: '1 0 auto'
+                    }
+                }, /*#__PURE__*/ React.createElement(components.Link, {
+                    home: true
+                }, /*#__PURE__*/ React.createElement("img", {
+                    src: properties.logo?.srcMobile ?? properties.logo?.src ?? `${basePath}/logo-square-${getDarkMode() ? 'dark' : 'light'}-theme.png`,
+                    alt: properties.logo?.alt ?? 'Lowdefy',
+                    style: properties.logo?.style
+                }))) : undefined,
+            content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Menu, {
                     basePath: basePath,
                     components: components,
                     blockId: `${blockId}_menu`,
@@ -96,33 +110,24 @@ const MobileMenu = ({ basePath, blockId, components, events, methods, menus, pag
                     pageId: pageId,
                     properties: {
                         collapsed: false,
-                        theme: 'light',
-                        ...mergeObjects(properties, {
-                            style: {
-                                marginTop: 24
-                            }
-                        }) || {},
+                        ...properties,
                         mode: 'inline'
                     },
+                    styles: {
+                        element: {
+                            marginTop: 24,
+                            background: 'transparent'
+                        }
+                    },
                     rename: {
                         events: {
                             onClick: 'onMenuItemClick',
                             onSelect: 'onMenuItemSelect'
                         }
                     }
-                })
+                }), content?.drawerContent && content.drawerContent()),
+            footer: content?.drawerFooter ? ()=>content.drawerFooter() : undefined
         }
     }));
 };
-MobileMenu.defaultProps = blockDefaultProps;
-MobileMenu.meta = {
-    category: 'display',
-    icons: [
-        'AiOutlineMenuUnfold',
-        'AiOutlineMenuFold'
-    ],
-    styles: [
-        'blocks/MobileMenu/style.less'
-    ]
-};
-export default MobileMenu;
+export default withBlockDefaults(MobileMenu);

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

@@ -13,7 +13,27 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'container',
+    icons: [
+        'AiOutlineMenuUnfold',
+        'AiOutlineMenuFold'
+    ],
+    valueType: null,
+    slots: {
+        drawerContent: 'Additional content below the menu in the drawer.',
+        drawerFooter: 'Footer content in the drawer.'
+    },
+    cssKeys: {
+        element: 'The MobileMenu element.'
+    },
+    events: {
+        onToggleDrawer: 'Trigger action when mobile menu drawer is toggled.',
+        onClose: 'Trigger action when mobile menu is closed.',
+        onOpen: 'Trigger action when mobile menu is opened.',
+        onMenuItemSelect: 'Trigger action when menu item is selected.',
+        onMenuItemClick: 'Trigger action when menu item is clicked.',
+        onToggleMenuGroup: 'Trigger action when mobile menu group is opened.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -32,6 +52,33 @@
                     displayType: 'yaml'
                 }
             },
+            logo: {
+                type: 'object',
+                description: 'Logo settings for the mobile menu drawer header.',
+                additionalProperties: false,
+                properties: {
+                    src: {
+                        type: 'string',
+                        description: 'Logo source url.'
+                    },
+                    srcMobile: {
+                        type: 'string',
+                        description: 'Mobile logo source url.'
+                    },
+                    alt: {
+                        type: 'string',
+                        default: 'Lowdefy',
+                        description: 'Logo alternative text.'
+                    },
+                    style: {
+                        type: 'object',
+                        description: 'Css style object to apply to logo.',
+                        docs: {
+                            displayType: 'yaml'
+                        }
+                    }
+                }
+            },
             menuId: {
                 type: 'string',
                 description: 'App menu id used to get menu links.'
@@ -242,35 +289,5 @@
                 }
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onToggleDrawer: {
-                type: 'array',
-                description: 'Trigger action when mobile menu drawer is toggled.'
-            },
-            onClose: {
-                type: 'array',
-                description: 'Trigger action when mobile menu is closed.'
-            },
-            onOpen: {
-                type: 'array',
-                description: 'Trigger action when mobile menu is opened.'
-            },
-            onMenuItemSelect: {
-                type: 'array',
-                description: 'Trigger action when menu item is selected.'
-            },
-            onMenuItemClick: {
-                type: 'array',
-                description: 'Trigger action when menu item is clicked.'
-            },
-            onToggleMenuGroup: {
-                type: 'array',
-                description: 'Trigger action when mobile menu group is opened.'
-            }
-        }
     }
 };

package/dist/blocks/Modal/Modal.js

@@ -13,9 +13,10 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState, useEffect } from 'react';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { get } from '@lowdefy/helpers';
 import { Modal } from 'antd';
+import withTheme from '../withTheme.js';
 const triggerSetOpen = ({ methods, setOpen, state })=>{
     if (!state) {
         methods.triggerEvent({
@@ -29,7 +30,7 @@ const triggerSetOpen = ({ methods, setOpen, state })=>{
     }
     setOpen(state);
 };
-const ModalBlock = ({ blockId, content, events, methods, properties })=>{
+const ModalBlock = ({ blockId, classNames = {}, content, events, methods, properties, styles = {} })=>{
     const [openState, setOpen] = useState(false);
     useEffect(()=>{
         methods.registerMethod('toggleOpen', ()=>triggerSetOpen({
@@ -57,7 +58,6 @@ const ModalBlock = ({ blockId, content, events, methods, properties })=>{
         afterClose: ()=>methods.triggerEvent({
                 name: 'afterClose'
             }),
-        bodyStyle: methods.makeCssClass(properties.bodyStyle, true),
         cancelButtonProps: properties.cancelButtonProps,
         cancelText: properties.cancelText ?? 'Cancel',
         centered: !!properties.centered,
@@ -65,19 +65,31 @@ const ModalBlock = ({ blockId, content, events, methods, properties })=>{
         confirmLoading: get(events, 'onOk.loading'),
         mask: properties.mask !== undefined ? properties.mask : true,
         maskClosable: properties.maskClosable !== undefined ? properties.maskClosable : true,
-        maskStyle: methods.makeCssClass(properties.maskStyle, true),
         okButtonProps: properties.okButtonProps,
         okText: properties.okText ?? 'Ok',
         okType: properties.okButtonType ?? 'primary',
-        style: properties.style,
         title: renderHtml({
             html: properties.title,
             methods
         }),
-        visible: openState,
+        open: openState,
         width: properties.width,
-        wrapClassName: methods.makeCssClass(properties.wrapperStyle),
         zIndex: properties.zIndex,
+        className: classNames.element,
+        classNames: {
+            header: classNames.header,
+            body: classNames.body,
+            footer: classNames.footer,
+            mask: classNames.mask,
+            content: classNames.content,
+            wrapper: classNames.wrapper
+        },
+        style: styles.element,
+        styles: {
+            body: styles.body,
+            mask: styles.mask,
+            wrapper: styles.wrapper
+        },
         onOk: async ()=>{
             const response = await methods.triggerEvent({
                 name: 'onOk'
@@ -107,12 +119,4 @@ const ModalBlock = ({ blockId, content, events, methods, properties })=>{
         ...extraProps
     }, content.content && content.content()));
 };
-ModalBlock.defaultProps = blockDefaultProps;
-ModalBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Modal/style.less'
-    ]
-};
-export default ModalBlock;
+export default withTheme('Modal', withBlockDefaults(ModalBlock));

package/dist/blocks/Modal/meta.js

@@ -0,0 +1,234 @@
+/*
+  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: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Main Modal body.',
+        footer: 'Custom footer. Overrides default Ok/Cancel buttons.'
+    },
+    cssKeys: {
+        element: 'The Modal element.',
+        header: 'The Modal header.',
+        body: 'The Modal body.',
+        footer: 'The Modal footer.',
+        mask: 'The Modal mask.',
+        wrapper: 'The Modal wrapper.',
+        content: 'The Modal content.'
+    },
+    events: {
+        onOk: 'Trigger actions when Ok button is clicked.',
+        onOpen: 'Trigger actions when modal is opened.',
+        onCancel: 'Trigger actions when Cancel button is clicked.',
+        onClose: 'Trigger actions after onOk or onCancel is completed.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            centered: {
+                type: 'boolean',
+                default: false,
+                description: 'Center the modal vertically.'
+            },
+            closable: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether a close (x) button is visible on top right of the modal dialog or not.'
+            },
+            title: {
+                type: 'string',
+                description: "The modal dialog's title - supports html."
+            },
+            footer: {
+                type: 'boolean',
+                default: true,
+                description: 'Show footer area.'
+            },
+            mask: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether show mask or not.'
+            },
+            maskClosable: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether to close the modal dialog when the mask (area outside the modal) is clicked.'
+            },
+            okText: {
+                type: 'string',
+                default: 'Ok',
+                description: 'Text of the Ok button.'
+            },
+            okButtonProps: {
+                type: 'object',
+                description: 'Set additional properties for the ok button.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            cancelText: {
+                type: 'string',
+                default: 'Cancel',
+                description: 'Text of the Cancel button.'
+            },
+            cancelButtonProps: {
+                type: 'object',
+                description: 'Set additional properties for the cancel button.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            width: {
+                type: [
+                    'string',
+                    'number'
+                ],
+                default: '520px',
+                description: 'Width of the modal dialog.',
+                docs: {
+                    displayType: 'string'
+                }
+            },
+            zIndex: {
+                type: 'integer',
+                default: 1000,
+                description: 'The z-index of the modal. Useful when displaying two modals simultaneously.'
+            },
+            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/modal#design-token'
+                },
+                properties: {
+                    headerBg: {
+                        type: 'string',
+                        description: 'Background color of the modal header.'
+                    },
+                    titleLineHeight: {
+                        type: 'number',
+                        default: 1.5,
+                        description: 'Line height of the modal title.'
+                    },
+                    titleFontSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size of the modal title.'
+                    },
+                    titleColor: {
+                        type: 'string',
+                        description: 'Color of the modal title text.'
+                    },
+                    contentBg: {
+                        type: 'string',
+                        description: 'Background color of the modal content.'
+                    },
+                    footerBg: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Background color of the modal footer.'
+                    },
+                    contentPadding: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        description: 'Padding of the content area.'
+                    },
+                    headerPadding: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        description: 'Padding of the header area.'
+                    },
+                    headerBorderBottom: {
+                        type: 'string',
+                        description: 'Border bottom of the header.'
+                    },
+                    headerMarginBottom: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Margin bottom of the header.'
+                    },
+                    bodyPadding: {
+                        type: 'number',
+                        description: 'Padding of the body area.'
+                    },
+                    footerPadding: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        description: 'Padding of the footer area.'
+                    },
+                    footerBorderTop: {
+                        type: 'string',
+                        description: 'Border top of the footer.'
+                    },
+                    footerBorderRadius: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        description: 'Border radius of the footer.'
+                    },
+                    footerMarginTop: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        default: 8,
+                        description: 'Margin top of the footer.'
+                    },
+                    confirmBodyPadding: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        description: 'Padding of the confirm modal body.'
+                    },
+                    confirmIconMarginInlineEnd: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        description: 'Inline end margin of the confirm modal icon.'
+                    },
+                    confirmBtnsMarginTop: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        description: 'Margin top of the confirm modal buttons.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius of the modal.'
+                    },
+                    colorBgMask: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.45)',
+                        description: 'Background color of the modal mask.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/MonthSelector/MonthSelector.js

@@ -14,16 +14,19 @@
   limitations under the License.
 */ import React, { useState } from 'react';
 import { DatePicker } from 'antd';
-import moment from 'moment';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
 import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
 import disabledDate from '../../disabledDate.js';
-const MonthPicker = DatePicker.MonthPicker;
-const MonthSelector = ({ blockId, components: { Icon }, events, loading, methods, properties, required, validation, value })=>{
+dayjs.extend(utc);
+const MonthSelector = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: {
             Icon
         },
@@ -34,25 +37,26 @@ const MonthSelector = ({ blockId, components: { Icon }, events, loading, methods
             ...properties.label
         },
         required: required,
+        styles: styles,
         validation: validation,
         content: {
             content: ()=>/*#__PURE__*/ React.createElement("div", {
-                    className: methods.makeCssClass({
+                    style: {
                         width: '100%'
-                    })
+                    }
                 }, /*#__PURE__*/ React.createElement("div", {
                     id: `${blockId}_${elementId}_popup`
-                }), /*#__PURE__*/ React.createElement(MonthPicker, {
+                }), /*#__PURE__*/ React.createElement(DatePicker, {
                     id: `${blockId}_input`,
+                    picker: "month",
                     allowClear: properties.allowClear !== false,
                     autoFocus: properties.autoFocus,
-                    bordered: properties.bordered,
-                    className: methods.makeCssClass([
-                        {
-                            width: '100%'
-                        },
-                        properties.inputStyle
-                    ]),
+                    variant: properties.bordered === false ? 'borderless' : properties.variant,
+                    className: classNames.element,
+                    style: {
+                        width: '100%',
+                        ...styles.element
+                    },
                     disabled: properties.disabled || loading,
                     disabledDate: disabledDate(properties.disabledDates),
                     format: properties.format ?? 'YYYY-MM',
@@ -60,14 +64,22 @@ const MonthSelector = ({ blockId, components: { Icon }, events, loading, methods
                     placeholder: properties.placeholder ?? 'Select Month',
                     size: properties.size,
                     status: validation.status,
-                    value: type.isDate(value) ? moment.utc(value).startOf('month') : null,
+                    value: type.isDate(value) ? dayjs.utc(value).startOf('month') : null,
                     suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_suffixIcon`,
+                        classNames: {
+                            element: classNames.suffixIcon
+                        },
                         events: events,
-                        properties: properties.suffixIcon ?? 'AiOutlineCalendar'
+                        properties: properties.suffixIcon ?? 'AiOutlineCalendar',
+                        styles: {
+                            element: styles.suffixIcon
+                        }
                     }),
                     onChange: (newVal)=>{
-                        const val = !newVal ? null : moment.utc(newVal.add(newVal.utcOffset(), 'minutes')).startOf('month').toDate();
+                        // Wrap with our dayjs — antd v6's internal dayjs may lack the utc plugin.
+                        const d = newVal ? dayjs(newVal) : null;
+                        const val = !d ? null : dayjs.utc(d.add(d.utcOffset(), 'minutes')).startOf('month').toDate();
                         methods.setValue(val);
                         methods.triggerEvent({
                             name: 'onChange',
@@ -80,16 +92,4 @@ const MonthSelector = ({ blockId, components: { Icon }, events, loading, methods
         }
     });
 };
-MonthSelector.defaultProps = blockDefaultProps;
-MonthSelector.meta = {
-    valueType: 'date',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons,
-        'AiOutlineCalendar'
-    ],
-    styles: [
-        'blocks/MonthSelector/style.less'
-    ]
-};
-export default MonthSelector;
+export default withTheme('DatePicker', withBlockDefaults(MonthSelector));