@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/ColorSelector/meta.js

@@ -0,0 +1,250 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import LabelMeta from '../Label/meta.js';
+import { allowClear } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'string',
+    cssKeys: {
+        element: 'The ColorSelector element.',
+        label: 'The ColorSelector label.',
+        extra: 'The ColorSelector extra content.',
+        feedback: 'The ColorSelector validation feedback.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when the color is changed.',
+            event: {
+                value: 'The selected color hex value.'
+            }
+        },
+        onChangeComplete: {
+            description: 'Trigger actions when the color change is complete.',
+            event: {
+                value: 'The final color hex value.'
+            }
+        },
+        onClear: 'Trigger actions when the color is cleared.',
+        onFormatChange: {
+            description: 'Trigger actions when the color format is changed.',
+            event: {
+                format: 'The new color format.'
+            }
+        },
+        onOpenChange: {
+            description: 'Trigger actions when the color picker popup open state changes.',
+            event: {
+                open: 'Whether the popup is open.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            format: {
+                type: 'string',
+                enum: [
+                    'rgb',
+                    'hex',
+                    'hsb'
+                ],
+                description: 'Color format.'
+            },
+            showText: {
+                type: 'boolean',
+                description: 'Show color text.'
+            },
+            size: {
+                type: 'string',
+                enum: [
+                    'small',
+                    'middle',
+                    'large'
+                ],
+                description: 'Size of the color picker.'
+            },
+            disabled: {
+                type: 'boolean',
+                default: false,
+                description: 'Disable the color picker.'
+            },
+            allowClear: {
+                ...allowClear,
+                default: false
+            },
+            arrow: {
+                type: 'boolean',
+                default: true,
+                description: 'Show arrow on the color picker popup.'
+            },
+            disabledAlpha: {
+                type: 'boolean',
+                default: false,
+                description: 'Disable the alpha channel slider.'
+            },
+            disabledFormat: {
+                type: 'boolean',
+                default: false,
+                description: 'Disable the format selector.'
+            },
+            mode: {
+                type: 'string',
+                enum: [
+                    'single',
+                    'gradient'
+                ],
+                default: 'single',
+                description: 'Color picker mode.'
+            },
+            open: {
+                type: 'boolean',
+                description: 'Controlled open state of the color picker popup.'
+            },
+            placement: {
+                type: 'string',
+                enum: [
+                    'top',
+                    'topLeft',
+                    'topRight',
+                    'bottom',
+                    'bottomLeft',
+                    'bottomRight',
+                    'left',
+                    'leftTop',
+                    'leftBottom',
+                    'right',
+                    'rightTop',
+                    'rightBottom'
+                ],
+                description: 'Placement of the color picker popup.'
+            },
+            presets: {
+                type: 'array',
+                description: 'Preset color palettes.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            trigger: {
+                type: 'string',
+                enum: [
+                    'hover',
+                    'click'
+                ],
+                default: 'click',
+                description: 'Trigger mode for the color picker popup.'
+            },
+            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/color-picker#design-token'
+                },
+                properties: {
+                    colorPickerWidth: {
+                        type: 'number',
+                        default: 234,
+                        description: 'Width of the color picker panel.'
+                    },
+                    colorPickerHandlerSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Size of the color picker handler (drag handle).'
+                    },
+                    colorPickerHandlerSizeSM: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Size of the color picker handler for small size.'
+                    },
+                    colorPickerSliderHeight: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Height of the color slider bar.'
+                    },
+                    colorPickerPreviewSize: {
+                        type: 'number',
+                        description: 'Size of the color preview circle. Defaults to a calculated value based on slider height.'
+                    },
+                    colorPickerAlphaInputWidth: {
+                        type: 'number',
+                        default: 44,
+                        description: 'Width of the alpha input field.'
+                    },
+                    colorPickerInputNumberHandleWidth: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Width of the input number handle in the color picker.'
+                    },
+                    colorPickerPresetColorSize: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Size of preset color swatches.'
+                    },
+                    colorPickerInsetShadow: {
+                        type: 'string',
+                        description: 'Inset shadow style for the color picker.'
+                    },
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius of the color picker trigger.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color used in the color picker panel.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color in the color picker panel.'
+                    },
+                    colorBgElevated: {
+                        type: 'string',
+                        description: 'Background color for the elevated popup panel.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for text in the color picker.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of the color picker trigger.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height of the color picker trigger for large size.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height of the color picker trigger for small size.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/ConfigProvider/ConfigProvider.js

@@ -0,0 +1,51 @@
+/*
+  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 { ConfigProvider as AntdConfigProvider, theme } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+const algorithmMap = {
+    default: theme.defaultAlgorithm,
+    dark: theme.darkAlgorithm,
+    compact: theme.compactAlgorithm
+};
+function resolveAlgorithm(algorithm) {
+    if (!algorithm) return undefined;
+    if (Array.isArray(algorithm)) {
+        return algorithm.map((a)=>algorithmMap[a] ?? a);
+    }
+    return algorithmMap[algorithm] ?? algorithm;
+}
+const ConfigProviderBlock = ({ blockId, content, properties })=>{
+    const themeConfig = {};
+    if (properties.token) {
+        themeConfig.token = properties.token;
+    }
+    if (properties.algorithm) {
+        themeConfig.algorithm = resolveAlgorithm(properties.algorithm);
+    }
+    if (properties.components) {
+        themeConfig.components = properties.components;
+    }
+    return /*#__PURE__*/ React.createElement(AntdConfigProvider, {
+        componentDisabled: properties.componentDisabled,
+        componentSize: properties.componentSize,
+        direction: properties.direction,
+        variant: properties.variant,
+        theme: Object.keys(themeConfig).length > 0 ? themeConfig : undefined
+    }, /*#__PURE__*/ React.createElement("div", {
+        id: blockId
+    }, content.content && content.content()));
+};
+export default withBlockDefaults(ConfigProviderBlock);

package/dist/blocks/{Alert/style.less → ConfigProvider/e2e.js}

@@ -12,6 +12,8 @@
   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 'antd/lib/alert/style/index.less';
+*/ import { createBlockHelper } from '@lowdefy/e2e-utils';
+const locator = (page, blockId)=>page.locator(`#${blockId}`);
+export default createBlockHelper({
+    locator
+});

package/dist/blocks/{ControlledList/schema.js → ConfigProvider/meta.js}

@@ -13,81 +13,79 @@
   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 wrapped by the ConfigProvider.'
+    },
     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.'
+            algorithm: {
+                type: [
+                    'string',
+                    'array'
+                ],
+                description: 'Theme algorithm. Can be "default", "dark", "compact", or an array of these values.',
+                docs: {
+                    displayType: 'yaml'
+                }
             },
-            hideAddButton: {
+            componentDisabled: {
                 type: 'boolean',
                 default: false,
-                description: 'When true, hide the add new item button.'
+                description: 'Set disabled state for all child components.'
             },
-            size: {
+            componentSize: {
                 type: 'string',
                 enum: [
                     'small',
-                    'default',
+                    'middle',
                     'large'
                 ],
-                default: 'default',
-                description: 'When true, hide the add new item button.'
+                description: 'Set size for all child components.'
             },
-            style: {
+            components: {
                 type: 'object',
-                description: 'Css style object to applied to content.',
+                description: 'Component-level token overrides. Keys are component names, values are token objects.',
                 docs: {
                     displayType: 'yaml'
                 }
             },
-            addItemButton: {
-                type: 'object',
-                description: 'Custom add item button properties.',
-                docs: {
-                    displayType: 'button'
-                }
-            },
-            removeItemIcon: {
-                type: [
-                    'string',
-                    'object'
+            direction: {
+                type: 'string',
+                enum: [
+                    'ltr',
+                    'rtl'
                 ],
-                description: 'Custom remove item icon properties.',
-                docs: {
-                    displayType: 'icon'
-                }
+                default: 'ltr',
+                description: 'Direction of layout.'
             },
-            footerStyle: {
+            token: {
                 type: 'object',
-                description: 'Css style object to applied to controlled list footer.',
+                description: 'Theme token configuration. Customize design tokens like colorPrimary, fontSize, etc.',
                 docs: {
                     displayType: 'yaml'
                 }
             },
-            itemStyle: {
+            variant: {
+                type: 'string',
+                enum: [
+                    'outlined',
+                    'filled',
+                    'borderless',
+                    'underlined'
+                ],
+                description: 'Global input variant style for all child components.'
+            },
+            theme: {
                 type: 'object',
-                description: 'Css style object to applied to controlled list items.',
+                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'
                 }
-            },
-            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.'
             }
         }
     }

package/dist/blocks/ConfirmModal/ConfirmModal.js

@@ -13,51 +13,79 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useEffect } from 'react';
-import { Modal } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const ConfirmModal = ({ blockId, events, content, components: { Icon }, methods, properties })=>{
+import { App } from 'antd';
+import { ErrorBoundary, renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+const ConfirmModal = ({ blockId, classNames = {}, events, content, components: { Icon, handleError }, methods, properties, styles = {} })=>{
+    const { modal } = App.useApp();
     useEffect(()=>{
         methods.registerMethod('open', (args = {})=>{
             const additionalProps = {};
             if (properties.icon) {
-                additionalProps.icon = /*#__PURE__*/ React.createElement(Icon, {
+                additionalProps.icon = /*#__PURE__*/ React.createElement(ErrorBoundary, {
+                    onError: handleError
+                }, /*#__PURE__*/ React.createElement(Icon, {
                     blockId: `${blockId}_icon`,
+                    classNames: {
+                        element: classNames.icon
+                    },
                     events: events,
-                    properties: properties.icon
-                });
+                    properties: properties.icon,
+                    styles: {
+                        element: styles.icon
+                    }
+                }));
             }
             methods.triggerEvent({
                 name: 'onOpen'
             });
-            Modal[args.status || properties.status || 'confirm']({
+            modal[args.status || properties.status || 'confirm']({
                 id: `${blockId}_confirm_modal`,
                 title: renderHtml({
                     html: properties.title,
                     methods
                 }),
-                bodyStyle: methods.makeCssClass(properties.bodyStyle, true),
                 content: (content.content && content.content()) ?? renderHtml({
                     html: properties.content,
                     methods
                 }),
-                className: methods.makeCssClass(properties.modalStyle),
+                className: classNames.element,
+                style: styles.element,
+                styles: {
+                    body: styles.body
+                },
                 closable: properties.closable,
                 okText: properties.okText ?? 'Ok',
                 okButtonProps: properties.okButton?.icon ? {
                     ...properties.okButton,
-                    icon: properties.okButton.icon && /*#__PURE__*/ React.createElement(Icon, {
+                    icon: properties.okButton.icon && /*#__PURE__*/ React.createElement(ErrorBoundary, {
+                        onError: handleError
+                    }, /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_ok_icon`,
+                        classNames: {
+                            element: classNames.okIcon
+                        },
                         events: events,
-                        properties: properties.okButton.icon
-                    })
+                        properties: properties.okButton.icon,
+                        styles: {
+                            element: styles.okIcon
+                        }
+                    }))
                 } : properties.okButton,
                 cancelButtonProps: properties.cancelButton?.icon ? {
                     ...properties.cancelButton,
-                    icon: properties.cancelButton.icon && /*#__PURE__*/ React.createElement(Icon, {
-                        blockId: `${blockId}_ok_icon`,
+                    icon: properties.cancelButton.icon && /*#__PURE__*/ React.createElement(ErrorBoundary, {
+                        onError: handleError
+                    }, /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_cancel_icon`,
+                        classNames: {
+                            element: classNames.cancelIcon
+                        },
                         events: events,
-                        properties: properties.cancelButton.icon
-                    })
+                        properties: properties.cancelButton.icon,
+                        styles: {
+                            element: styles.cancelIcon
+                        }
+                    }))
                 } : properties.cancelButton,
                 cancelText: properties.cancelText ?? 'Cancel',
                 centered: properties.centered ?? false,
@@ -85,12 +113,4 @@ const ConfirmModal = ({ blockId, events, content, components: { Icon }, methods,
         id: blockId
     });
 };
-ConfirmModal.defaultProps = blockDefaultProps;
-ConfirmModal.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/ConfirmModal/style.less'
-    ]
-};
-export default ConfirmModal;
+export default withBlockDefaults(ConfirmModal);