@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/Slider/Slider.js

@@ -13,43 +13,42 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import { Slider } from 'antd';
-import classNames from 'classnames';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
-const SliderBlock = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
+import withTheme from '../withTheme.js';
+const SliderBlock = ({ blockId, classNames = {}, components: { Icon, Link }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: {
             Icon,
             Link
         },
         events: events,
-        methods: methods,
         properties: {
             title: properties.title,
             size: properties.size,
             ...properties.label
         },
         required: required,
+        styles: styles,
         validation: validation,
         content: {
             content: ()=>/*#__PURE__*/ React.createElement(Slider, {
                     id: `${blockId}_input`,
-                    className: classNames(methods.makeCssClass(properties.inputStyle)),
+                    className: classNames.element,
                     disabled: properties.disabled || loading,
                     dots: properties.dots,
-                    handleStyle: properties.handleStyle,
                     included: properties.included,
                     marks: properties.marks,
                     max: properties.max,
                     min: properties.min,
-                    railStyle: properties.railStyle,
                     range: properties.range,
                     reverse: properties.reverse,
                     step: properties.step,
+                    style: styles.element,
                     tooltip: properties.tooltip,
-                    trackStyle: properties.trackStyle,
                     vertical: properties.vertical,
                     onChange: (val)=>{
                         methods.setValue(val);
@@ -65,15 +64,4 @@ const SliderBlock = ({ blockId, components: { Icon, Link }, events, loading, met
         }
     });
 };
-SliderBlock.defaultProps = blockDefaultProps;
-SliderBlock.meta = {
-    valueType: 'any',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/Slider/style.less'
-    ]
-};
-export default SliderBlock;
+export default withTheme('Slider', withBlockDefaults(SliderBlock));

package/dist/blocks/Slider/meta.js

@@ -0,0 +1,226 @@
+/*
+  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: 'any',
+    cssKeys: {
+        element: 'The Slider element.',
+        label: 'The Slider label.',
+        extra: 'The Slider extra content.',
+        feedback: 'The Slider validation feedback.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger action when the slider value changes.',
+            event: {
+                value: 'The current slider value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            disabled: {
+                type: 'boolean',
+                default: false,
+                description: 'Disable the slider if true.'
+            },
+            dots: {
+                type: 'boolean',
+                default: false,
+                description: 'Whether to show dots on the slider track at each step.'
+            },
+            included: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether the track between min and the current value is highlighted. Set to false to make it an independent point.'
+            },
+            marks: {
+                type: 'object',
+                description: 'Tick marks on the slider. Keys are slider values and values are labels. Example: { 0: "0°C", 100: "100°C" }.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            max: {
+                type: 'number',
+                default: 100,
+                description: 'Maximum value of the slider.'
+            },
+            min: {
+                type: 'number',
+                default: 0,
+                description: 'Minimum value of the slider.'
+            },
+            range: {
+                type: 'boolean',
+                default: false,
+                description: 'Enable dual thumb mode for selecting a range.'
+            },
+            reverse: {
+                type: 'boolean',
+                default: false,
+                description: 'Reverse the direction of the slider.'
+            },
+            step: {
+                type: 'number',
+                default: 1,
+                description: 'The granularity the slider can step through values. Must be greater than 0. Set to null for marks only.'
+            },
+            title: {
+                type: 'string',
+                description: 'Title to show in the label area - supports html.'
+            },
+            tooltip: {
+                type: 'object',
+                description: 'Tooltip configuration for the slider handle. Example: { open: true } to always show, or { formatter: null } to hide.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            vertical: {
+                type: 'boolean',
+                default: false,
+                description: 'Whether the slider is vertical.'
+            },
+            label: {
+                type: 'object',
+                description: 'Label properties to pass to the wrapping Label block.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            size: {
+                type: 'string',
+                enum: [
+                    'small',
+                    'default',
+                    'large'
+                ],
+                default: 'default',
+                description: 'Size of the block.'
+            },
+            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/slider#design-token'
+                },
+                properties: {
+                    controlSize: {
+                        type: 'number',
+                        default: 10,
+                        description: 'Overall control dimension of the slider.'
+                    },
+                    railSize: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Height (or width when vertical) of the slider rail.'
+                    },
+                    handleSize: {
+                        type: 'number',
+                        default: 10,
+                        description: 'Diameter of the slider handle.'
+                    },
+                    handleSizeHover: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Diameter of the slider handle on hover.'
+                    },
+                    handleLineWidth: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Border width of the slider handle.'
+                    },
+                    handleLineWidthHover: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border width of the slider handle on hover.'
+                    },
+                    dotSize: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Diameter of step dots on the slider track.'
+                    },
+                    railBg: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.04)',
+                        description: 'Background color of the slider rail.'
+                    },
+                    railHoverBg: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.06)',
+                        description: 'Background color of the slider rail on hover.'
+                    },
+                    trackBg: {
+                        type: 'string',
+                        default: '#91caff',
+                        description: 'Background color of the slider track (filled portion).'
+                    },
+                    trackHoverBg: {
+                        type: 'string',
+                        default: '#69b1ff',
+                        description: 'Background color of the slider track on hover.'
+                    },
+                    handleColor: {
+                        type: 'string',
+                        default: '#91caff',
+                        description: 'Color of the slider handle.'
+                    },
+                    handleActiveColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Color of the slider handle when active.'
+                    },
+                    handleActiveOutlineColor: {
+                        type: 'string',
+                        default: 'rgba(22,119,255,0.2)',
+                        description: 'Color of the focus outline around the active handle.'
+                    },
+                    handleColorDisabled: {
+                        type: 'string',
+                        default: '#bfbfbf',
+                        description: 'Color of the slider handle when disabled.'
+                    },
+                    dotBorderColor: {
+                        type: 'string',
+                        default: '#f0f0f0',
+                        description: 'Border color of step dots.'
+                    },
+                    dotActiveBorderColor: {
+                        type: 'string',
+                        default: '#91caff',
+                        description: 'Border color of active step dots.'
+                    },
+                    trackBgDisabled: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.04)',
+                        description: 'Background color of the track when disabled.'
+                    },
+                    colorPrimaryBorderHover: {
+                        type: 'string',
+                        description: 'Primary border color on hover state.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Splitter/Splitter.js

@@ -0,0 +1,70 @@
+/*
+  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 { Splitter } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const SplitterBlock = ({ blockId, classNames = {}, content, methods, properties, styles = {} })=>{
+    const panels = properties.panels ?? [];
+    return /*#__PURE__*/ React.createElement(Splitter, {
+        id: blockId,
+        className: classNames.element,
+        style: styles.element,
+        layout: properties.orientation ?? properties.layout,
+        lazy: properties.lazy,
+        onResize: (sizes)=>{
+            methods.triggerEvent({
+                name: 'onResize',
+                event: {
+                    sizes
+                }
+            });
+        },
+        onResizeEnd: (sizes)=>{
+            methods.triggerEvent({
+                name: 'onResizeEnd',
+                event: {
+                    sizes
+                }
+            });
+        },
+        onResizeStart: (sizes)=>{
+            methods.triggerEvent({
+                name: 'onResizeStart',
+                event: {
+                    sizes
+                }
+            });
+        },
+        onCollapse: (collapsed, sizes)=>{
+            methods.triggerEvent({
+                name: 'onCollapse',
+                event: {
+                    collapsed,
+                    sizes
+                }
+            });
+        }
+    }, panels.map((panel)=>/*#__PURE__*/ React.createElement(Splitter.Panel, {
+            key: panel.key,
+            size: panel.size,
+            min: panel.min,
+            max: panel.max,
+            defaultSize: panel.defaultSize,
+            collapsible: panel.collapsible,
+            resizable: panel.resizable
+        }, content[panel.key] && content[panel.key]())));
+};
+export default withTheme('Splitter', withBlockDefaults(SplitterBlock));

package/dist/blocks/Splitter/e2e.js

@@ -0,0 +1,24 @@
+/*
+  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}`);
+export default createBlockHelper({
+    locator,
+    expect: {
+        panelCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ant-splitter-panel')).toHaveCount(count),
+        barCount: (page, blockId, count)=>expect(locator(page, blockId).locator('.ant-splitter-bar')).toHaveCount(count)
+    }
+});

package/dist/blocks/Splitter/meta.js

@@ -0,0 +1,193 @@
+/*
+  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 Splitter element.'
+    },
+    events: {
+        onCollapse: {
+            description: 'Trigger action when a panel is collapsed or expanded.',
+            event: {
+                collapsed: 'Whether the panel is collapsed.',
+                sizes: 'The panel sizes array.'
+            }
+        },
+        onResize: {
+            description: 'Trigger action when panel sizes change during resize.',
+            event: {
+                sizes: 'The panel sizes array.'
+            }
+        },
+        onResizeEnd: {
+            description: 'Trigger action when resize ends.',
+            event: {
+                sizes: 'The panel sizes array.'
+            }
+        },
+        onResizeStart: {
+            description: 'Trigger action when resize starts.',
+            event: {
+                sizes: 'The panel sizes array.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            lazy: {
+                type: 'boolean',
+                default: false,
+                description: 'Lazy render panel content.'
+            },
+            layout: {
+                type: 'string',
+                enum: [
+                    'horizontal',
+                    'vertical'
+                ],
+                default: 'horizontal',
+                description: 'Layout direction of the splitter.'
+            },
+            orientation: {
+                type: 'string',
+                enum: [
+                    'horizontal',
+                    'vertical'
+                ],
+                description: 'Layout direction of the splitter. Alias for layout, takes precedence if both are set.'
+            },
+            panels: {
+                type: 'array',
+                description: 'Panel configuration array. Each panel has key, size, min, max, defaultSize, collapsible, resizable.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                items: {
+                    type: 'object',
+                    properties: {
+                        key: {
+                            type: 'string',
+                            description: 'Unique panel key, used to match content slots.'
+                        },
+                        size: {
+                            type: [
+                                'number',
+                                'string'
+                            ],
+                            description: 'Controlled panel size.'
+                        },
+                        min: {
+                            type: [
+                                'number',
+                                'string'
+                            ],
+                            description: 'Minimum size threshold.'
+                        },
+                        max: {
+                            type: [
+                                'number',
+                                'string'
+                            ],
+                            description: 'Maximum size threshold.'
+                        },
+                        defaultSize: {
+                            type: [
+                                'number',
+                                'string'
+                            ],
+                            description: 'Default panel size.'
+                        },
+                        collapsible: {
+                            type: [
+                                'boolean',
+                                'object'
+                            ],
+                            description: 'Whether the panel is collapsible.'
+                        },
+                        resizable: {
+                            type: 'boolean',
+                            default: true,
+                            description: 'Whether the panel is resizable.'
+                        }
+                    }
+                }
+            },
+            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/splitter#design-token'
+                },
+                properties: {
+                    splitBarSize: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Thickness of the divider bar between panels in pixels.'
+                    },
+                    splitTriggerSize: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Size of the interactive trigger area for resizing in pixels.'
+                    },
+                    splitBarDraggableSize: {
+                        type: 'number',
+                        default: 20,
+                        description: 'Size of the draggable handle area in pixels.'
+                    },
+                    resizeSpinnerSize: {
+                        type: 'number',
+                        default: 20,
+                        description: 'Size of the resize indicator dots in pixels.'
+                    },
+                    colorFill: {
+                        type: 'string',
+                        description: 'Color of the splitter bar.'
+                    },
+                    colorFillTertiary: {
+                        type: 'string',
+                        description: 'Background color of the drag trigger area.'
+                    },
+                    colorFillSecondary: {
+                        type: 'string',
+                        description: 'Background color of the drag trigger area on hover.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Color used for the collapse arrows.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Color of the resize dots indicator.'
+                    },
+                    colorBgElevated: {
+                        type: 'string',
+                        description: 'Background color of the drag trigger handle.'
+                    },
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius of the drag trigger handle.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Statistic/Statistic.js

@@ -15,14 +15,18 @@
 */ import React from 'react';
 import { Statistic } from 'antd';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const StatisticBlock = ({ blockId, components: { Icon }, events, properties, methods })=>{
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const StatisticBlock = ({ blockId, classNames = {}, components: { Icon }, events, properties, methods, styles = {} })=>{
     const additionalProps = {};
     if (properties.decimalSeparator) {
         additionalProps.decimalSeparator = properties.decimalSeparator;
     }
     return /*#__PURE__*/ React.createElement(Statistic, {
-        className: methods.makeCssClass(properties.style),
+        className: classNames.element,
+        classNames: {
+            value: classNames.value
+        },
         groupSeparator: properties.groupSeparator,
         id: blockId,
         loading: properties.loading,
@@ -32,26 +36,33 @@ const StatisticBlock = ({ blockId, components: { Icon }, events, properties, met
             methods
         }),
         value: type.isNone(properties.value) ? '' : properties.value,
-        valueStyle: methods.makeCssClass(properties.valueStyle, true),
+        style: styles.element,
+        styles: {
+            value: styles.value
+        },
         prefix: properties.prefixIcon ? /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_prefixIcon`,
+            classNames: {
+                element: classNames.prefixIcon
+            },
             events: events,
-            properties: properties.prefixIcon
+            properties: properties.prefixIcon,
+            styles: {
+                element: styles.prefixIcon
+            }
         }) : properties.prefix ?? '',
         suffix: properties.suffixIcon ? /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_suffixIcon`,
+            classNames: {
+                element: classNames.suffixIcon
+            },
             events: events,
-            properties: properties.suffixIcon
+            properties: properties.suffixIcon,
+            styles: {
+                element: styles.suffixIcon
+            }
         }) : properties.suffix ?? '',
         ...additionalProps
     });
 };
-StatisticBlock.defaultProps = blockDefaultProps;
-StatisticBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Statistic/style.less'
-    ]
-};
-export default StatisticBlock;
+export default withTheme('Statistic', withBlockDefaults(StatisticBlock));