@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/AutoComplete/meta.js

@@ -0,0 +1,266 @@
+/*
+  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, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'string',
+    cssKeys: {
+        element: 'The AutoComplete element.',
+        selector: 'The inner value container of the AutoComplete (antd `content` semantic slot).',
+        label: 'The AutoComplete label.',
+        extra: 'The AutoComplete extra content.',
+        feedback: 'The AutoComplete validation feedback.',
+        options: 'The AutoComplete options.'
+    },
+    events: {
+        onBlur: 'Trigger action event occurs when selector loses focus.',
+        onChange: {
+            description: 'Trigger actions when selection is changed.',
+            event: {
+                value: 'The selected value.'
+            }
+        },
+        onFocus: 'Trigger action when an selector gets focus.',
+        onClear: 'Trigger action when selector gets cleared.',
+        onSearch: {
+            description: 'Called when searching items.',
+            event: {
+                value: 'The search input value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            allowClear: {
+                ...allowClear,
+                default: true,
+                description: 'Allow the user to clear the selected value, sets the value to null.'
+            },
+            autoFocus,
+            bordered,
+            backfill: {
+                type: 'boolean',
+                default: false,
+                description: 'Backfill selected item the input when using keyboard'
+            },
+            defaultOpen: {
+                type: 'boolean',
+                default: false,
+                description: 'Initial open state of dropdown.'
+            },
+            disabled,
+            label,
+            options: {
+                default: [],
+                type: 'array',
+                description: 'Options can either be an array of string values.',
+                items: {
+                    type: 'string'
+                }
+            },
+            placeholder: {
+                type: 'string',
+                default: 'Type or select item',
+                description: 'Placeholder text inside the block before user selects input.'
+            },
+            size: sizeSmallDefaultLarge,
+            title: {
+                type: 'string',
+                description: 'Title to describe the input component, if no title is specified the block id is displayed.'
+            },
+            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/select#design-token'
+                },
+                properties: {
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius of the input.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for large size.'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius for small size.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of the input.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height for large size.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height for small size.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the input text.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size for large size.'
+                    },
+                    fontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for small size.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color, used for focus border and active state.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Primary hover color, used for hover border state.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the selector.'
+                    },
+                    colorBgElevated: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the dropdown.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color of the input.'
+                    },
+                    colorTextPlaceholder: {
+                        type: 'string',
+                        description: 'Placeholder text color.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Text color when disabled.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the input.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        description: 'Border color when hovered.'
+                    },
+                    activeBorderColor: {
+                        type: 'string',
+                        description: 'Border color when focused/active.'
+                    },
+                    activeOutlineColor: {
+                        type: 'string',
+                        description: 'Outline color when focused.'
+                    },
+                    clearBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the clear button.'
+                    },
+                    optionSelectedBg: {
+                        type: 'string',
+                        default: '#e6f4ff',
+                        description: 'Background color of the selected option.'
+                    },
+                    optionSelectedColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Text color of the selected option.'
+                    },
+                    optionSelectedFontWeight: {
+                        type: 'number',
+                        default: 600,
+                        description: 'Font weight of the selected option.'
+                    },
+                    optionActiveBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.04)',
+                        description: 'Background color of the active (hovered) option.'
+                    },
+                    optionFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of dropdown option text.'
+                    },
+                    optionHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of each dropdown option.'
+                    },
+                    optionLineHeight: {
+                        type: 'number',
+                        description: 'Line height of dropdown option text.'
+                    },
+                    optionPadding: {
+                        type: [
+                            'string',
+                            'number'
+                        ],
+                        default: '5px 12px',
+                        description: 'Padding of each dropdown option.'
+                    },
+                    selectorBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the selector input.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1050,
+                        description: 'Z-index of the dropdown popup.'
+                    },
+                    showArrowPaddingInlineEnd: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Right padding when the arrow icon is shown.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width of the input.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding of the input.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Avatar/Avatar.js

@@ -14,10 +14,53 @@
   limitations under the License.
 */ import React from 'react';
 import { Avatar } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const AvatarBlock = ({ blockId, events, components: { Icon }, methods, properties })=>/*#__PURE__*/ React.createElement(Avatar, {
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const AvatarBlock = ({ blockId, classNames = {}, events, components: { Icon }, methods, properties, styles = {} })=>{
+    if (properties.group) {
+        return /*#__PURE__*/ React.createElement(Avatar.Group, {
+            id: blockId,
+            className: classNames.element,
+            style: {
+                cursor: events.onClick && 'pointer',
+                ...styles.element
+            },
+            maxCount: properties.group.maxCount,
+            maxPopoverPlacement: properties.group.maxPopoverPlacement,
+            maxPopoverTrigger: properties.group.maxPopoverTrigger,
+            maxStyle: styles.max,
+            shape: properties.group.shape ?? properties.shape,
+            size: properties.group.size ?? properties.size,
+            onClick: ()=>methods.triggerEvent({
+                    name: 'onClick'
+                })
+        }, (properties.group.avatars ?? []).map((avatar, i)=>/*#__PURE__*/ React.createElement(Avatar, {
+                key: `${blockId}_${i}`,
+                alt: avatar.alt,
+                gap: avatar.gap,
+                shape: avatar.shape,
+                size: avatar.size,
+                src: avatar.src,
+                style: {
+                    backgroundColor: !avatar.src && avatar.color
+                },
+                icon: avatar.icon && /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: `${blockId}_avatar_${i}_icon`,
+                    classNames: {
+                        element: classNames.icon
+                    },
+                    events: events,
+                    properties: avatar.icon,
+                    styles: {
+                        element: styles.icon
+                    }
+                })
+            }, avatar.content)));
+    }
+    return /*#__PURE__*/ React.createElement(Avatar, {
         id: blockId,
         alt: properties.alt,
+        className: classNames.element,
         gap: properties.gap,
         shape: properties.shape,
         size: properties.size,
@@ -25,25 +68,22 @@ const AvatarBlock = ({ blockId, events, components: { Icon }, methods, propertie
         onClick: ()=>methods.triggerEvent({
                 name: 'onClick'
             }),
-        className: methods.makeCssClass([
-            {
-                backgroundColor: !properties.src && properties.color,
-                cursor: events.onClick && 'pointer'
-            },
-            properties.style
-        ]),
+        style: {
+            backgroundColor: !properties.src && properties.color,
+            cursor: events.onClick && 'pointer',
+            ...styles.element
+        },
         icon: properties.icon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_icon`,
+            classNames: {
+                element: classNames.icon
+            },
             events: events,
-            properties: properties.icon
+            properties: properties.icon,
+            styles: {
+                element: styles.icon
+            }
         })
     }, properties.content);
-AvatarBlock.defaultProps = blockDefaultProps;
-AvatarBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Avatar/style.less'
-    ]
 };
-export default AvatarBlock;
+export default withTheme('Avatar', withBlockDefaults(AvatarBlock));

package/dist/blocks/Avatar/meta.js

@@ -0,0 +1,277 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ export default {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Avatar element.',
+        icon: 'The icon in the Avatar.',
+        max: 'The Avatar max overflow style.'
+    },
+    events: {
+        onClick: 'Triggered when avatar item is clicked.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            alt: {
+                type: 'string',
+                description: 'This attribute defines the alternative text describing the image.'
+            },
+            color: {
+                type: 'string',
+                description: 'The background color of the avatar if not using a src url. Should be a hex color string. Color is a random color if not specified.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            content: {
+                type: 'string',
+                description: 'Text to display inside avatar.'
+            },
+            gap: {
+                type: 'number',
+                description: 'Letter type unit distance between left and right sides.'
+            },
+            icon: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to use an icon in avatar.",
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            shape: {
+                type: 'string',
+                enum: [
+                    'circle',
+                    'square'
+                ],
+                default: 'circle',
+                description: 'Shape of the avatar.'
+            },
+            size: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                default: 'default',
+                enum: [
+                    'default',
+                    'small',
+                    'large'
+                ],
+                description: 'Size of the avatar; default, small, large or responsive.',
+                docs: {
+                    displayType: 'string'
+                }
+            },
+            src: {
+                type: 'string',
+                description: 'The address of the image for an image avatar.'
+            },
+            group: {
+                type: 'object',
+                description: 'Render as an avatar group with multiple avatars. When set, the block renders Avatar.Group wrapping data-driven avatars.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                properties: {
+                    maxCount: {
+                        type: 'number',
+                        description: 'Max avatars to show. Excess shows as "+N".'
+                    },
+                    maxPopoverPlacement: {
+                        type: 'string',
+                        enum: [
+                            'top',
+                            'bottom'
+                        ],
+                        default: 'top',
+                        description: 'Placement of the overflow popover.'
+                    },
+                    maxPopoverTrigger: {
+                        type: 'string',
+                        enum: [
+                            'hover',
+                            'click'
+                        ],
+                        default: 'hover',
+                        description: 'Trigger mode for the overflow popover.'
+                    },
+                    shape: {
+                        type: 'string',
+                        enum: [
+                            'circle',
+                            'square'
+                        ],
+                        description: 'Default shape for all avatars in the group.'
+                    },
+                    size: {
+                        type: [
+                            'string',
+                            'number'
+                        ],
+                        enum: [
+                            'default',
+                            'small',
+                            'large'
+                        ],
+                        description: 'Default size for all avatars in the group.'
+                    },
+                    avatars: {
+                        type: 'array',
+                        description: 'Array of avatar configurations.',
+                        items: {
+                            type: 'object',
+                            properties: {
+                                alt: {
+                                    type: 'string',
+                                    description: 'Alt text for image avatar.'
+                                },
+                                color: {
+                                    type: 'string',
+                                    description: 'Background color.',
+                                    docs: {
+                                        displayType: 'color'
+                                    }
+                                },
+                                content: {
+                                    type: 'string',
+                                    description: 'Text content inside the avatar.'
+                                },
+                                gap: {
+                                    type: 'number',
+                                    description: 'Letter type unit distance between left and right sides.'
+                                },
+                                icon: {
+                                    type: [
+                                        'string',
+                                        'object'
+                                    ],
+                                    description: 'Icon name or properties.',
+                                    docs: {
+                                        displayType: 'icon'
+                                    }
+                                },
+                                shape: {
+                                    type: 'string',
+                                    enum: [
+                                        'circle',
+                                        'square'
+                                    ],
+                                    description: 'Override shape for this avatar.'
+                                },
+                                size: {
+                                    type: [
+                                        'string',
+                                        'number'
+                                    ],
+                                    enum: [
+                                        'default',
+                                        'small',
+                                        'large'
+                                    ],
+                                    description: 'Override size for this avatar.',
+                                    docs: {
+                                        displayType: 'string'
+                                    }
+                                },
+                                src: {
+                                    type: 'string',
+                                    description: 'Image URL.'
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            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/avatar#design-token'
+                },
+                properties: {
+                    containerSize: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Size of the avatar.'
+                    },
+                    containerSizeLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Size of the large avatar.'
+                    },
+                    containerSizeSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Size of the small avatar.'
+                    },
+                    textFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Text font size of the avatar.'
+                    },
+                    textFontSizeLG: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Text font size of the large avatar.'
+                    },
+                    textFontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Text font size of the small avatar.'
+                    },
+                    iconFontSize: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Icon size within the avatar.'
+                    },
+                    iconFontSizeLG: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Icon size within the large avatar.'
+                    },
+                    iconFontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Icon size within the small avatar.'
+                    },
+                    groupSpace: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Spacing between grouped avatars.'
+                    },
+                    groupOverlapping: {
+                        type: 'number',
+                        default: -8,
+                        description: 'Negative margin for avatar overlap in groups.'
+                    },
+                    groupBorderColor: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Border color applied to grouped avatars.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Badge/Badge.js

@@ -15,9 +15,11 @@
 */ import React from 'react';
 import { type } from '@lowdefy/helpers';
 import { Badge } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const BadgeBlock = ({ blockId, events, content, components: { Icon }, properties })=>/*#__PURE__*/ React.createElement(Badge, {
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const BadgeBlock = ({ blockId, classNames = {}, events, content, components: { Icon }, properties, styles = {} })=>/*#__PURE__*/ React.createElement(Badge, {
         id: blockId,
+        className: classNames.element,
         color: properties.color,
         dot: properties.dot,
         offset: properties.offset,
@@ -25,20 +27,19 @@ const BadgeBlock = ({ blockId, events, content, components: { Icon }, properties
         showZero: properties.showZero,
         size: properties.size,
         status: properties.status,
+        style: styles.element,
         text: properties.text,
         title: properties.title,
         count: properties.icon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_icon`,
+            classNames: {
+                element: classNames.icon
+            },
             events: events,
-            properties: properties.icon
+            properties: properties.icon,
+            styles: {
+                element: styles.icon
+            }
         }) || properties.count
     }, content.content && content.content());
-BadgeBlock.defaultProps = blockDefaultProps;
-BadgeBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Badge/style.less'
-    ]
-};
-export default BadgeBlock;
+export default withTheme('Badge', withBlockDefaults(BadgeBlock));