@lowdefy/blocks-antd 4.7.2 → 5.0.0

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

@@ -13,6 +13,25 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
+    category: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Content blocks in the confirm modal body.'
+    },
+    cssKeys: {
+        element: 'The ConfirmModal element.',
+        body: 'The ConfirmModal body.',
+        cancelIcon: 'The cancel button icon in the ConfirmModal.',
+        icon: 'The icon in the ConfirmModal.',
+        okIcon: 'The ok button icon in the ConfirmModal.'
+    },
+    events: {
+        onOk: 'Trigger actions when Ok button is clicked.',
+        onOpen: 'Trigger actions when confirm modal is opened.',
+        onCancel: 'Trigger actions when Cancel button is clicked.',
+        onClose: 'Triggered after onOk or onCancel actions are completed.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -21,13 +40,6 @@
                 type: 'string',
                 description: 'Modal title - supports html.'
             },
-            bodyStyle: {
-                type: 'object',
-                description: 'Css style to applied to modal body.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             centered: {
                 type: 'boolean',
                 default: false,
@@ -62,13 +74,6 @@
                 default: false,
                 description: 'Whether to close the modal dialog when the mask (area outside the modal) is clicked.'
             },
-            modalStyle: {
-                type: 'object',
-                description: 'Css style to applied to modal.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             okText: {
                 type: 'string',
                 default: 'Ok',
@@ -120,28 +125,81 @@
                 ],
                 default: 'confirm',
                 description: 'Modal status type.'
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onOk: {
-                type: 'array',
-                description: 'Trigger actions when Ok button is clicked.'
-            },
-            onOpen: {
-                type: 'array',
-                description: 'Trigger actions when confirm modal is opened.'
-            },
-            onCancel: {
-                type: 'array',
-                description: 'Trigger actions when Cancel button is clicked.'
             },
-            onClose: {
-                type: 'array',
-                description: 'Triggered after onOk or onCancel actions are completed.'
+            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.'
+                    },
+                    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/Content/Content.js

@@ -14,18 +14,11 @@
   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 Content = Layout.Content;
-const ContentBlock = ({ blockId, content, methods, properties })=>/*#__PURE__*/ React.createElement(Content, {
+const ContentBlock = ({ blockId, classNames = {}, content, properties, styles = {} })=>/*#__PURE__*/ React.createElement(Content, {
         id: blockId,
-        className: methods.makeCssClass(properties.style)
+        className: classNames.element,
+        style: styles.element
     }, content.content && content.content());
-ContentBlock.defaultProps = blockDefaultProps;
-ContentBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Content/style.less'
-    ]
-};
-export default ContentBlock;
+export default withBlockDefaults(ContentBlock);

package/dist/blocks/{Layout/schema.js → Content/meta.js}

@@ -13,14 +13,22 @@
   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 content area.'
+    },
+    cssKeys: {
+        element: 'The Content element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
+            theme: {
                 type: 'object',
-                description: 'Css style object to applied to layout.',
+                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'
                 }

package/dist/blocks/ControlledList/ControlledList.js

@@ -15,9 +15,10 @@
 */ import React, { useEffect } from 'react';
 import { get } from '@lowdefy/helpers';
 import { List, Typography } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Button from '../Button/Button.js';
-const ControlledListBlock = ({ blockId, components: { Icon, Link }, events, list, methods, properties })=>{
+import withTheme from '../withTheme.js';
+const ControlledListBlock = ({ blockId, classNames = {}, components: { Icon, Link, ShortcutBadge }, events, list, methods, properties, styles = {} })=>{
     useEffect(()=>{
         methods.registerMethod('moveItemDown', methods.moveItemDown);
         methods.registerMethod('moveItemUp', methods.moveItemUp);
@@ -30,38 +31,27 @@ const ControlledListBlock = ({ blockId, components: { Icon, Link }, events, list
             methods.pushItem({});
         }
     }
-    const styles = {
-        header: {
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'nowrap',
-            justifyContent: 'space-between'
-        },
-        footer: {
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'nowrap',
-            justifyContent: 'space-between'
-        },
-        item: {
-            width: '100%'
-        }
-    };
     return /*#__PURE__*/ React.createElement(List, {
         id: blockId,
+        className: classNames.element,
         size: properties.size,
+        style: styles.element,
         header: (properties.title || properties.addToFront && !properties.hideAddButton) && /*#__PURE__*/ React.createElement("div", {
-            className: methods.makeCssClass([
-                styles.header,
-                properties.headerStyle
-            ])
+            style: {
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'nowrap',
+                justifyContent: 'space-between',
+                ...styles.header
+            }
         }, properties.title ? /*#__PURE__*/ React.createElement(Typography.Text, {
             strong: true
         }, properties.title) : /*#__PURE__*/ React.createElement("br", null), properties.addToFront && !properties.hideAddButton && /*#__PURE__*/ React.createElement(Button, {
             blockId: `${blockId}_add_button`,
             components: {
                 Icon,
-                Link
+                Link,
+                ShortcutBadge
             },
             events: events,
             properties: {
@@ -74,15 +64,19 @@ const ControlledListBlock = ({ blockId, components: { Icon, Link }, events, list
             onClick: ()=>methods.unshiftItem()
         })),
         footer: !properties.addToFront && !properties.hideAddButton && /*#__PURE__*/ React.createElement("div", {
-            className: methods.makeCssClass([
-                styles.footer,
-                properties.footerStyle
-            ])
+            style: {
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'nowrap',
+                justifyContent: 'space-between',
+                ...styles.footer
+            }
         }, /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement(Button, {
             blockId: `${blockId}_add_button`,
             components: {
                 Icon,
-                Link
+                Link,
+                ShortcutBadge
             },
             events: events,
             properties: {
@@ -101,42 +95,36 @@ const ControlledListBlock = ({ blockId, components: { Icon, Link }, events, list
         dataSource: list,
         renderItem: (item, i)=>/*#__PURE__*/ React.createElement(List.Item, {
                 key: `${blockId}_${i}`,
-                className: methods.makeCssClass([
-                    styles.item,
-                    properties.itemStyle
-                ]),
+                style: {
+                    width: '100%',
+                    ...styles.item
+                },
                 extra: !properties.hideRemoveButton && list.length > (properties.minItems ?? 0) && [
                     // eslint-disable-next-line react/jsx-key
-                    /*#__PURE__*/ React.createElement(Icon, {
+                    /*#__PURE__*/ React.createElement("span", {
+                        style: {
+                            paddingLeft: properties.size === 'small' ? 2 : properties.size === 'large' ? 6 : 4,
+                            fontSize: properties.size === 'small' ? 16 : properties.size === 'large' ? 20 : 18
+                        }
+                    }, /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_${i}_remove_icon`,
+                        classNames: {
+                            element: classNames.removeIcon
+                        },
                         events: events,
                         properties: {
                             name: 'AiOutlineMinusCircle',
-                            ...properties.removeItemIcon,
-                            style: {
-                                paddingLeft: properties.size === 'small' ? 2 : properties.size === 'large' ? 6 : 4,
-                                fontSize: properties.size === 'small' ? 16 : properties.size === 'large' ? 20 : 18,
-                                ...properties.removeItemIcon?.style ? properties.removeItemIcon.style : {}
-                            }
+                            ...properties.removeItemIcon
+                        },
+                        styles: {
+                            element: styles.removeIcon
                         },
                         onClick: ()=>methods.removeItem(i)
-                    })
+                    }))
                 ]
             }, item.content && item.content({
                 width: '100%'
             }))
     });
 };
-ControlledListBlock.defaultProps = blockDefaultProps;
-ControlledListBlock.meta = {
-    valueType: 'array',
-    category: 'list',
-    icons: [
-        'AiOutlinePlus',
-        'AiOutlineMinusCircle'
-    ],
-    styles: [
-        'blocks/ControlledList/style.less'
-    ]
-};
-export default ControlledListBlock;
+export default withTheme('List', withBlockDefaults(ControlledListBlock));

package/dist/blocks/ControlledList/meta.js

@@ -0,0 +1,158 @@
+/*
+  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: 'list',
+    icons: [
+        'AiOutlinePlus',
+        'AiOutlineMinusCircle'
+    ],
+    valueType: 'array',
+    slots: {
+        content: 'Blocks rendered for each list item.'
+    },
+    cssKeys: {
+        element: 'The ControlledList element.',
+        header: 'The ControlledList header.',
+        footer: 'The ControlledList footer.',
+        item: 'The ControlledList item.',
+        removeIcon: 'The remove item icon in the ControlledList.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            title: {
+                type: 'string',
+                description: 'Controlled list title.'
+            },
+            addToFront: {
+                type: 'boolean',
+                default: false,
+                description: 'When true, add new items to the front of the list.'
+            },
+            hideAddButton: {
+                type: 'boolean',
+                default: false,
+                description: 'When true, hide the add new item button.'
+            },
+            size: {
+                type: 'string',
+                enum: [
+                    'small',
+                    'default',
+                    'large'
+                ],
+                default: 'default',
+                description: 'Size of the list.'
+            },
+            addItemButton: {
+                type: 'object',
+                description: 'Custom add item button properties.',
+                docs: {
+                    displayType: 'button'
+                }
+            },
+            removeItemIcon: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                description: 'Custom remove item icon properties.',
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            hideRemoveButton: {
+                type: 'boolean',
+                default: false,
+                description: 'When true, hide the remove item button on each list item.'
+            },
+            noDataTitle: {
+                type: 'string',
+                description: 'Title to show when list is empty.'
+            },
+            minItems: {
+                type: 'number',
+                default: 0,
+                description: 'Minimum number of items in the controlled list.'
+            },
+            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/list#design-token'
+                },
+                properties: {
+                    titleMarginBottom: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Margin bottom of list item title.'
+                    },
+                    contentWidth: {
+                        type: 'number',
+                        default: 220,
+                        description: 'Width of the content area.'
+                    },
+                    itemPadding: {
+                        type: 'string',
+                        default: '12px 0',
+                        description: 'Padding of list items.'
+                    },
+                    itemPaddingLG: {
+                        type: 'string',
+                        default: '16px 24px',
+                        description: 'Padding of list items (large size).'
+                    },
+                    itemPaddingSM: {
+                        type: 'string',
+                        default: '8px 16px',
+                        description: 'Padding of list items (small size).'
+                    },
+                    headerBg: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Background color of the list header.'
+                    },
+                    footerBg: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Background color of the list footer.'
+                    },
+                    emptyTextPadding: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Padding for the empty text area.'
+                    },
+                    metaMarginBottom: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Margin bottom of list item meta.'
+                    },
+                    avatarMarginRight: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Margin right of the avatar in list items.'
+                    },
+                    descriptionFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the description text.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/DateRangeSelector/DateRangeSelector.js

@@ -14,21 +14,25 @@
   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';
+dayjs.extend(utc);
 const RangePicker = DatePicker.RangePicker;
 const rangeValue = (value, format)=>{
-    if (value && format) return value.map((val)=>moment.utc(val, format).startOf('day'));
-    if (value) return value.map((val)=>moment.utc(val).startOf('day'));
+    if (value && format) return value.map((val)=>dayjs.utc(val, format).startOf('day'));
+    if (value) return value.map((val)=>dayjs.utc(val).startOf('day'));
     return null;
 };
-const DateRangeSelector = ({ blockId, components: { Icon }, events, loading, methods, properties, required, validation, value })=>{
+const DateRangeSelector = ({ 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
         },
@@ -40,24 +44,24 @@ const DateRangeSelector = ({ blockId, components: { Icon }, events, loading, met
         },
         validation: validation,
         required: required,
+        styles: styles,
         content: {
             content: ()=>/*#__PURE__*/ React.createElement("div", {
-                    className: methods.makeCssClass({
+                    style: {
                         width: '100%'
-                    })
+                    }
                 }, /*#__PURE__*/ React.createElement("div", {
                     id: `${blockId}_${elementId}_popup`
                 }), /*#__PURE__*/ React.createElement(RangePicker, {
                     id: `${blockId}_input`,
                     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-DD',
@@ -74,11 +78,21 @@ const DateRangeSelector = ({ blockId, components: { Icon }, events, loading, met
                     ],
                     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 : newVal.map((val)=>moment.utc(val.add(val.utcOffset(), 'minutes')).startOf('day').toDate());
+                        const val = !newVal ? null : newVal.map((v)=>{
+                            // Wrap with our dayjs — antd v6's internal dayjs may lack the utc plugin.
+                            const d = dayjs(v);
+                            return dayjs.utc(d.add(d.utcOffset(), 'minutes')).startOf('day').toDate();
+                        });
                         methods.setValue(val);
                         methods.triggerEvent({
                             name: 'onChange',
@@ -92,16 +106,4 @@ const DateRangeSelector = ({ blockId, components: { Icon }, events, loading, met
         }
     });
 };
-DateRangeSelector.defaultProps = blockDefaultProps;
-DateRangeSelector.meta = {
-    valueType: 'array',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons,
-        'AiOutlineCalendar'
-    ],
-    styles: [
-        'blocks/DateRangeSelector/style.less'
-    ]
-};
-export default DateRangeSelector;
+export default withTheme('DatePicker', withBlockDefaults(DateRangeSelector));