@lowdefy/blocks-antd 4.7.3 → 5.0.0

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

@@ -13,7 +13,15 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Statistic element.',
+        prefixIcon: 'The prefix icon in the Statistic.',
+        suffixIcon: 'The suffix icon in the Statistic.',
+        value: 'The Statistic value.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -82,11 +90,40 @@
                     }
                 ]
             },
-            valueStyle: {
+            theme: {
                 type: 'object',
-                description: 'Css style to applied to value.',
+                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'
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/statistic#design-token'
+                },
+                properties: {
+                    titleFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the statistic title.'
+                    },
+                    contentFontSize: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Font size of the statistic value.'
+                    },
+                    contentFontWeight: {
+                        type: 'string',
+                        description: 'Font weight of the statistic value.'
+                    },
+                    contentFontFamily: {
+                        type: 'string',
+                        description: 'Font family of the statistic value.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Default text color for the statistic value.'
+                    },
+                    colorTextDescription: {
+                        type: 'string',
+                        description: 'Color for the statistic title text.'
+                    }
                 }
             }
         }

package/dist/blocks/Steps/Steps.js

@@ -0,0 +1,94 @@
+/*
+  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, { useState, useEffect } from 'react';
+import { type } from '@lowdefy/helpers';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import { Steps } from 'antd';
+import withTheme from '../withTheme.js';
+function StepsBlock({ blockId, classNames = {}, components: { Icon }, events, methods, properties, styles = {} }) {
+    const [current, setCurrent] = useState(properties.current ?? 0);
+    useEffect(()=>{
+        setCurrent(properties.current ?? 0);
+    }, [
+        properties.current
+    ]);
+    useEffect(()=>{
+        methods.registerMethod('setCurrent', ({ current: newCurrent })=>{
+            setCurrent(newCurrent);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    current: newCurrent
+                }
+            });
+        });
+    });
+    return /*#__PURE__*/ React.createElement(Steps, {
+        id: blockId,
+        className: classNames.element,
+        style: styles.element,
+        current: current,
+        initial: properties.initial,
+        status: properties.status,
+        size: properties.size,
+        type: properties.type,
+        orientation: properties.orientation,
+        titlePlacement: properties.titlePlacement,
+        percent: properties.percent,
+        progressDot: properties.progressDot,
+        responsive: properties.responsive,
+        variant: properties.variant,
+        onChange: events.onChange ? (value)=>{
+            setCurrent(value);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    current: value
+                }
+            });
+        } : undefined,
+        items: (properties.items ?? []).map((item, index)=>({
+                key: index,
+                title: item.title ? renderHtml({
+                    html: item.title,
+                    methods
+                }) : undefined,
+                subTitle: item.subTitle ? renderHtml({
+                    html: item.subTitle,
+                    methods
+                }) : undefined,
+                description: item.description ? renderHtml({
+                    html: item.description,
+                    methods
+                }) : undefined,
+                status: item.status,
+                disabled: item.disabled,
+                icon: item.icon ? /*#__PURE__*/ React.createElement(Icon, {
+                    blockId: `${blockId}_${index}_icon`,
+                    classNames: {
+                        element: classNames.icon
+                    },
+                    properties: {
+                        name: type.isString(item.icon) && item.icon,
+                        ...type.isObject(item.icon) ? item.icon : {}
+                    },
+                    styles: {
+                        element: styles.icon
+                    }
+                }) : undefined
+            }))
+    });
+}
+export default withTheme('Steps', withBlockDefaults(StepsBlock));

package/dist/blocks/Steps/e2e.js

@@ -0,0 +1,31 @@
+/*
+  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, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)}`);
+export default createBlockHelper({
+    locator,
+    do: {
+        clickStep: (page, blockId, title)=>locator(page, blockId).locator('.ant-steps-item').filter({
+                hasText: title
+            }).locator('.ant-steps-item-container').click()
+    },
+    expect: {
+        stepCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ant-steps-item')).toHaveCount(count),
+        activeStep: (page, blockId, title)=>expect(locator(page, blockId).locator('.ant-steps-item-process').filter({
+                hasText: title
+            })).toBeVisible()
+    }
+});

package/dist/blocks/Steps/meta.js

@@ -0,0 +1,246 @@
+/*
+  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 Steps element.',
+        icon: 'The icon in the Steps.'
+    },
+    events: {
+        onChange: {
+            description: 'Triggered when a step is clicked.',
+            event: {
+                current: 'The index of the clicked step.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            current: {
+                type: 'number',
+                default: 0,
+                description: 'Index of the current step, counting from 0.'
+            },
+            initial: {
+                type: 'number',
+                default: 0,
+                description: 'Starting index of the steps, counting from 0.'
+            },
+            status: {
+                type: 'string',
+                default: 'process',
+                enum: [
+                    'wait',
+                    'process',
+                    'finish',
+                    'error'
+                ],
+                description: 'Status of current step.'
+            },
+            size: {
+                type: 'string',
+                default: 'default',
+                enum: [
+                    'default',
+                    'small'
+                ],
+                description: 'Size of the steps.'
+            },
+            type: {
+                type: 'string',
+                default: 'default',
+                enum: [
+                    'default',
+                    'dot',
+                    'inline',
+                    'navigation',
+                    'panel'
+                ],
+                description: 'Type of steps.'
+            },
+            orientation: {
+                type: 'string',
+                default: 'horizontal',
+                enum: [
+                    'horizontal',
+                    'vertical'
+                ],
+                description: 'Orientation of the step bar.'
+            },
+            titlePlacement: {
+                type: 'string',
+                default: 'horizontal',
+                enum: [
+                    'horizontal',
+                    'vertical'
+                ],
+                description: 'Place title and description horizontal or vertical.'
+            },
+            percent: {
+                type: 'number',
+                description: 'Progress circle percentage of current step in process status (only works with type default).'
+            },
+            progressDot: {
+                type: 'boolean',
+                default: false,
+                description: 'Steps with progress dot style.'
+            },
+            variant: {
+                type: 'string',
+                enum: [
+                    'filled',
+                    'outlined'
+                ],
+                default: 'filled',
+                description: 'Style variant of the steps.'
+            },
+            responsive: {
+                type: 'boolean',
+                default: true,
+                description: 'Change to vertical direction when screen width smaller than 532px.'
+            },
+            items: {
+                type: 'array',
+                description: 'List of step items.',
+                items: {
+                    type: 'object',
+                    properties: {
+                        title: {
+                            type: 'string',
+                            description: 'Title of the step - supports html.'
+                        },
+                        subTitle: {
+                            type: 'string',
+                            description: 'Subtitle of the step - supports html.'
+                        },
+                        description: {
+                            type: 'string',
+                            description: 'Description of the step - supports html.'
+                        },
+                        icon: {
+                            type: [
+                                'string',
+                                'object'
+                            ],
+                            description: "Name of a React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to use as the step icon.",
+                            docs: {
+                                displayType: 'icon'
+                            }
+                        },
+                        status: {
+                            type: 'string',
+                            enum: [
+                                'wait',
+                                'process',
+                                'finish',
+                                'error'
+                            ],
+                            description: 'Status of this step, overrides the current step status.'
+                        },
+                        disabled: {
+                            type: 'boolean',
+                            default: false,
+                            description: 'Disable click on this step.'
+                        }
+                    }
+                }
+            },
+            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/steps#design-token'
+                },
+                properties: {
+                    colorPrimary: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Primary color for the active step.'
+                    },
+                    dotCurrentSize: {
+                        type: 'number',
+                        default: 10,
+                        description: 'Size of the current dot in dot style.'
+                    },
+                    dotSize: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Size of dots in dot style.'
+                    },
+                    iconFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the step icon.'
+                    },
+                    iconSize: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Size of the step icon.'
+                    },
+                    iconSizeSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Size of the small step icon.'
+                    },
+                    iconTop: {
+                        type: 'number',
+                        default: -0.5,
+                        description: 'Top position of the step icon.'
+                    },
+                    descriptionMaxWidth: {
+                        type: 'number',
+                        default: 140,
+                        description: 'Max width of the step description.'
+                    },
+                    titleLineHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Line height of the step title.'
+                    },
+                    navArrowColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.25)',
+                        description: 'Color of the navigation arrow.'
+                    },
+                    navContentMaxWidth: {
+                        type: 'string',
+                        default: 'auto',
+                        description: 'Max width of navigation step content.'
+                    },
+                    finishIconBorderColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Border color of finished step icon.'
+                    },
+                    waitIconBorderColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.25)',
+                        description: 'Border color of waiting step icon.'
+                    },
+                    waitIconColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.25)',
+                        description: 'Color of waiting step icon.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Switch/Switch.js

@@ -13,11 +13,12 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Switch } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { ConfigProvider, Switch } from 'antd';
 import { type, serializer } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
-const SwitchBlock = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
+import withTheme from '../withTheme.js';
+const SwitchBlock = ({ blockId, classNames = {}, components: { Icon, Link }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     let propertiesIconChecked = serializer.copy(properties.checkedIcon);
     if (type.isString(propertiesIconChecked)) {
         propertiesIconChecked = {
@@ -30,8 +31,55 @@ const SwitchBlock = ({ blockId, components: { Icon, Link }, events, loading, met
             name: propertiesIconUnchecked
         };
     }
+    const switchEl = /*#__PURE__*/ React.createElement(Switch, {
+        autoFocus: properties.autoFocus,
+        checked: !!value,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        id: `${blockId}_input`,
+        size: properties.size,
+        style: styles.element,
+        checkedChildren: properties.checkedText ? /*#__PURE__*/ React.createElement("span", null, properties.checkedText) : /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `${blockId}_checkedIcon`,
+            classNames: {
+                element: classNames.checkedIcon
+            },
+            events: events,
+            properties: {
+                name: 'AiOutlineCheck',
+                ...propertiesIconChecked || {}
+            },
+            styles: {
+                element: styles.checkedIcon
+            }
+        }),
+        unCheckedChildren: properties.uncheckedText ? /*#__PURE__*/ React.createElement("span", null, properties.uncheckedText) : /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `${blockId}_uncheckedIcon`,
+            classNames: {
+                element: classNames.uncheckedIcon
+            },
+            events: events,
+            properties: {
+                name: 'AiOutlineClose',
+                ...propertiesIconUnchecked || {}
+            },
+            styles: {
+                element: styles.uncheckedIcon
+            }
+        }),
+        onChange: (newVal)=>{
+            methods.setValue(newVal);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: newVal
+                }
+            });
+        }
+    });
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: {
             Icon,
             Link
@@ -43,62 +91,19 @@ const SwitchBlock = ({ blockId, components: { Icon, Link }, events, loading, met
             ...properties.label
         },
         required: required,
+        styles: styles,
         validation: validation,
         content: {
-            content: ()=>/*#__PURE__*/ React.createElement(Switch, {
-                    autoFocus: properties.autoFocus,
-                    checked: !!value,
-                    className: methods.makeCssClass([
-                        properties.color && {
-                            '&.ant-switch-checked': {
-                                backgroundColor: `${properties.color} !important`
+            content: ()=>properties.color ? /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    theme: {
+                        components: {
+                            Switch: {
+                                colorPrimary: properties.color
                             }
-                        },
-                        properties.inputStyle
-                    ]),
-                    disabled: properties.disabled || loading,
-                    id: `${blockId}_input`,
-                    size: properties.size,
-                    checkedChildren: properties.checkedText ? /*#__PURE__*/ React.createElement("span", null, properties.checkedText) : /*#__PURE__*/ React.createElement(Icon, {
-                        blockId: `${blockId}_checkedIcon`,
-                        events: events,
-                        properties: {
-                            name: 'AiOutlineCheck',
-                            ...propertiesIconChecked || {}
-                        }
-                    }),
-                    unCheckedChildren: properties.uncheckedText ? /*#__PURE__*/ React.createElement("span", null, properties.uncheckedText) : /*#__PURE__*/ React.createElement(Icon, {
-                        blockId: `${blockId}_uncheckedIcon`,
-                        events: events,
-                        properties: {
-                            name: 'AiOutlineClose',
-                            ...propertiesIconUnchecked || {}
                         }
-                    }),
-                    onChange: (newVal)=>{
-                        methods.setValue(newVal);
-                        methods.triggerEvent({
-                            name: 'onChange',
-                            event: {
-                                value: newVal
-                            }
-                        });
                     }
-                })
+                }, switchEl) : switchEl
         }
     });
 };
-SwitchBlock.defaultProps = blockDefaultProps;
-SwitchBlock.meta = {
-    valueType: 'boolean',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons,
-        'AiOutlineCheck',
-        'AiOutlineClose'
-    ],
-    styles: [
-        'blocks/Switch/style.less'
-    ]
-};
-export default SwitchBlock;
+export default withTheme('Switch', withBlockDefaults(SwitchBlock));