@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/CheckboxSwitch/CheckboxSwitch.js

@@ -13,12 +13,38 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Checkbox, Space } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { Checkbox, ConfigProvider, Space } from 'antd';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
-const CheckboxSwitch = ({ blockId, components, events, loading, properties, required, validation, value, methods })=>{
+import withTheme from '../withTheme.js';
+const CheckboxSwitch = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
+    const checkbox = /*#__PURE__*/ React.createElement(Checkbox, {
+        id: `${blockId}_input`,
+        checked: value,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        style: {
+            marginRight: properties.description ? '30px' : undefined,
+            ...styles.element
+        },
+        onChange: (e)=>{
+            methods.setValue(e.target.checked);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: e.target.checked
+                }
+            });
+        }
+    }, /*#__PURE__*/ React.createElement(Space, {
+        wrap: true
+    }, renderHtml({
+        html: properties.description,
+        methods
+    })));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: components,
         events: events,
         properties: {
@@ -28,50 +54,18 @@ const CheckboxSwitch = ({ blockId, components, events, loading, properties, requ
         },
         validation: validation,
         required: required,
+        styles: styles,
         content: {
-            content: ()=>/*#__PURE__*/ React.createElement(Checkbox, {
-                    id: `${blockId}_input`,
-                    checked: value,
-                    disabled: properties.disabled || loading,
-                    className: methods.makeCssClass([
-                        properties.color && {
-                            '& > span.ant-checkbox-checked:not(.ant-checkbox-disabled) > span': {
-                                backgroundColor: `${properties.color} !important`,
-                                borderColor: `${properties.color} !important`
+            content: ()=>properties.color ? /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    theme: {
+                        components: {
+                            Checkbox: {
+                                colorPrimary: properties.color
                             }
-                        },
-                        properties.description && {
-                            marginRight: '30px'
-                        },
-                        properties.inputStyle
-                    ]),
-                    onChange: (e)=>{
-                        methods.setValue(e.target.checked);
-                        methods.triggerEvent({
-                            name: 'onChange',
-                            event: {
-                                value: e.target.checked
-                            }
-                        });
+                        }
                     }
-                }, /*#__PURE__*/ React.createElement(Space, {
-                    wrap: true
-                }, renderHtml({
-                    html: properties.description,
-                    methods
-                })))
+                }, checkbox) : checkbox
         }
     });
 };
-CheckboxSwitch.defaultProps = blockDefaultProps;
-CheckboxSwitch.meta = {
-    valueType: 'boolean',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/CheckboxSwitch/style.less'
-    ]
-};
-export default CheckboxSwitch;
+export default withTheme('Checkbox', withBlockDefaults(CheckboxSwitch));

package/dist/blocks/CheckboxSwitch/meta.js

@@ -0,0 +1,183 @@
+/*
+  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';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'boolean',
+    cssKeys: {
+        element: 'The CheckboxSwitch element.',
+        label: 'The CheckboxSwitch label.',
+        extra: 'The CheckboxSwitch extra content.',
+        feedback: 'The CheckboxSwitch validation feedback.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when selection is changed.',
+            event: {
+                value: 'The checkbox value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            color: {
+                type: 'string',
+                description: 'Selected checkbox color.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            disabled: {
+                type: 'boolean',
+                default: false,
+                description: 'Disable the block if true.'
+            },
+            description: {
+                type: 'string',
+                description: 'Text to display next to the checkbox - supports html.'
+            },
+            label: {
+                type: 'object',
+                description: 'Label properties.',
+                additionalProperties: false,
+                properties: {
+                    align: {
+                        type: 'string',
+                        enum: [
+                            'left',
+                            'right'
+                        ],
+                        default: 'left',
+                        description: 'Align label left or right when inline.'
+                    },
+                    colon: {
+                        type: 'boolean',
+                        default: true,
+                        description: 'Append label with colon.'
+                    },
+                    extra: {
+                        type: 'string',
+                        description: 'Extra text to display beneath the content - supports html.'
+                    },
+                    title: {
+                        type: 'string',
+                        description: 'Label title - supports html.'
+                    },
+                    span: {
+                        type: 'number',
+                        description: 'Label inline span.'
+                    },
+                    disabled: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'Hide input label.'
+                    },
+                    hasFeedback: {
+                        type: 'boolean',
+                        default: true,
+                        description: 'Display feedback extra from validation, this does not disable validation.'
+                    },
+                    inline: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'Render input and label inline.'
+                    }
+                }
+            },
+            title: {
+                type: 'string',
+                description: 'Title to describe the input component, if no title is specified the block id is displayed - supports html.'
+            },
+            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/checkbox#design-token'
+                },
+                properties: {
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color used for the checked state background and border.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Primary color used when hovering over a checked checkbox.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color of the unchecked checkbox.'
+                    },
+                    colorBgContainerDisabled: {
+                        type: 'string',
+                        description: 'Background color of the checkbox when disabled.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the unchecked checkbox.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Color of the checkmark and label text when disabled.'
+                    },
+                    colorWhite: {
+                        type: 'string',
+                        description: 'Color of the checkmark icon inside the checked checkbox.'
+                    },
+                    controlInteractiveSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Size (width and height) of the checkbox.'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius of the checkbox.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width of the checkbox.'
+                    },
+                    lineWidthBold: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Width of the checkmark stroke inside the checkbox.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Large font size token, used to derive the indeterminate indicator size.'
+                    },
+                    paddingXS: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Inline padding between the checkbox and its label text.'
+                    },
+                    marginXS: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Column gap between checkboxes in a Checkbox.Group.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Collapse/Collapse.js

@@ -15,8 +15,9 @@
 */ import React from 'react';
 import { Collapse } from 'antd';
 import { serializer, type } from '@lowdefy/helpers';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const CollapseBlock = ({ blockId, events, content, components: { Icon }, methods, properties })=>{
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const CollapseBlock = ({ blockId, classNames = {}, events, content, components: { Icon }, methods, properties, styles = {} })=>{
     const panels = properties.panels || Object.keys(content).sort().map((key)=>({
             key,
             title: key
@@ -44,14 +45,30 @@ const CollapseBlock = ({ blockId, events, content, components: { Icon }, methods
             }),
         expandIcon: propertiesIconExpand && (({ isActive })=>/*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_expandIcon`,
+                classNames: {
+                    element: classNames.expandIcon
+                },
                 events: events,
                 properties: {
                     rotate: isActive ? 90 : 0,
                     ...propertiesIconExpand
+                },
+                styles: {
+                    element: styles.expandIcon
                 }
             })),
-        expandIconPosition: properties.expandIconPosition,
+        expandIconPlacement: properties.expandIconPlacement ?? properties.expandIconPosition,
         destroyInactivePanel: properties.destroyInactivePanel,
+        className: classNames.element,
+        classNames: {
+            header: classNames.header,
+            content: classNames.content
+        },
+        style: styles.element,
+        styles: {
+            header: styles.header,
+            content: styles.content
+        },
         ...additionalProps
     }, panels.map((panel)=>/*#__PURE__*/ React.createElement(Collapse.Panel, {
             extra: content[panel.extraKey] && content[panel.extraKey](),
@@ -65,12 +82,4 @@ const CollapseBlock = ({ blockId, events, content, components: { Icon }, methods
             showArrow: properties.showArrow
         }, content[panel.key] && content[panel.key]())));
 };
-CollapseBlock.defaultProps = blockDefaultProps;
-CollapseBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Collapse/style.less'
-    ]
-};
-export default CollapseBlock;
+export default withTheme('Collapse', withBlockDefaults(CollapseBlock));

package/dist/blocks/Collapse/meta.js

@@ -0,0 +1,179 @@
+/*
+  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: false,
+    cssKeys: {
+        element: 'The Collapse element.',
+        expandIcon: 'The expand icon in the Collapse.',
+        header: 'The Collapse header.',
+        content: 'The Collapse content.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when collapse item is toggled.',
+            event: {
+                activeKey: 'The key of the active panel.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            accordion: {
+                type: 'boolean',
+                default: false,
+                description: 'If true, only one panel is open at a time.'
+            },
+            activeKey: {
+                type: 'string',
+                description: "Current panel's key."
+            },
+            bordered: {
+                type: 'boolean',
+                default: true,
+                description: 'Toggles rendering of the border around the collapse block.'
+            },
+            defaultActiveKey: {
+                type: 'string',
+                description: "Initial active panel's key, if activeKey is not set."
+            },
+            destroyInactivePanel: {
+                type: 'boolean',
+                default: false,
+                description: 'Destroy inactive panel.'
+            },
+            expandIcon: {
+                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 for expand icon on the right of selector.",
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            expandIconPlacement: {
+                type: 'string',
+                enum: [
+                    'start',
+                    'end'
+                ],
+                default: 'start',
+                description: 'Set placement of the expand icon.'
+            },
+            forceRender: {
+                type: 'boolean',
+                default: 'false',
+                description: 'Force render for all panels.'
+            },
+            panels: {
+                type: 'array',
+                items: {
+                    type: 'object',
+                    properties: {
+                        title: {
+                            type: 'string',
+                            description: 'Title of the panel - supports html.'
+                        },
+                        key: {
+                            type: 'string',
+                            description: 'Key of the panel.'
+                        },
+                        extraKey: {
+                            type: 'string',
+                            description: 'Key for the extra area of the panel.'
+                        },
+                        disabled: {
+                            type: 'boolean',
+                            default: false,
+                            description: 'Disable the panel if true.'
+                        }
+                    }
+                }
+            },
+            showArrow: {
+                type: 'boolean',
+                default: true,
+                description: 'Show expand icon.'
+            },
+            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/collapse#design-token'
+                },
+                properties: {
+                    headerPadding: {
+                        type: 'string',
+                        default: '12px 16px',
+                        description: 'Padding of the collapse header.'
+                    },
+                    headerBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.02)',
+                        description: 'Background color of the collapse header.'
+                    },
+                    contentPadding: {
+                        type: 'string',
+                        default: '16px 16px',
+                        description: 'Padding of the collapse content area.'
+                    },
+                    contentBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the collapse content area.'
+                    },
+                    borderlessContentPadding: {
+                        type: 'string',
+                        default: '4px 16px 16px',
+                        description: 'Padding of the content area in borderless (ghost) style.'
+                    },
+                    borderlessContentBg: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Background color of the content area in borderless (ghost) style.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the collapse component.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius of the collapse container.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color for the collapse content.'
+                    },
+                    colorTextHeading: {
+                        type: 'string',
+                        description: 'Text color for the collapse header.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the collapse content.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/ColorSelector/ColorSelector.js

@@ -0,0 +1,97 @@
+/*
+  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 React from 'react';
+import { ColorPicker } from 'antd';
+import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
+const ColorSelectorInput = ({ blockId, classNames = {}, components, events, loading, methods, properties, required, styles = {}, validation, value })=>{
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        classNames: classNames,
+        components: components,
+        events: events,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        validation: validation,
+        required: required,
+        styles: styles,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement(ColorPicker, {
+                    id: `${blockId}_input`,
+                    className: classNames.element,
+                    style: styles.element,
+                    value: type.isNone(value) ? undefined : value,
+                    format: properties.format,
+                    showText: properties.showText,
+                    size: properties.size,
+                    disabled: properties.disabled || loading,
+                    allowClear: properties.allowClear,
+                    arrow: properties.arrow,
+                    disabledAlpha: properties.disabledAlpha,
+                    disabledFormat: properties.disabledFormat,
+                    mode: properties.mode,
+                    open: properties.open,
+                    placement: properties.placement,
+                    presets: properties.presets,
+                    trigger: properties.trigger,
+                    onChange: (color)=>{
+                        const hexValue = color.toHexString();
+                        methods.setValue(hexValue);
+                        methods.triggerEvent({
+                            name: 'onChange',
+                            event: {
+                                value: hexValue
+                            }
+                        });
+                    },
+                    onChangeComplete: (color)=>{
+                        methods.triggerEvent({
+                            name: 'onChangeComplete',
+                            event: {
+                                value: color.toHexString()
+                            }
+                        });
+                    },
+                    onClear: ()=>{
+                        methods.triggerEvent({
+                            name: 'onClear'
+                        });
+                    },
+                    onFormatChange: (format)=>{
+                        methods.triggerEvent({
+                            name: 'onFormatChange',
+                            event: {
+                                format
+                            }
+                        });
+                    },
+                    onOpenChange: (open)=>{
+                        methods.triggerEvent({
+                            name: 'onOpenChange',
+                            event: {
+                                open
+                            }
+                        });
+                    }
+                })
+        }
+    });
+};
+export default withTheme('ColorSelector', withBlockDefaults(ColorSelectorInput));

package/dist/blocks/ColorSelector/e2e.js

@@ -0,0 +1,32 @@
+/*
+  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 { createBlockHelper } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${blockId}_input`);
+export default createBlockHelper({
+    locator,
+    do: {
+        open: (page, blockId)=>locator(page, blockId).click(),
+        clear: async (page, blockId)=>{
+            await locator(page, blockId).hover();
+            await page.locator('.ant-color-picker-clear').click();
+        }
+    },
+    expect: {
+        panelVisible: (page, _blockId)=>expect(page.locator('.ant-color-picker .ant-color-picker-inner')).toBeVisible(),
+        panelHidden: (page, _blockId)=>expect(page.locator('.ant-color-picker .ant-color-picker-inner')).toBeHidden(),
+        disabled: (page, blockId)=>expect(locator(page, blockId)).toHaveClass(/ant-color-picker-disabled/)
+    }
+});