@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/Card/Card.js

@@ -14,16 +14,15 @@
   limitations under the License.
 */ import React from 'react';
 import { Card } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const CardBlock = ({ blockId, content, properties, methods, events })=>/*#__PURE__*/ React.createElement(Card, {
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const CardBlock = ({ blockId, classNames = {}, content, properties, methods, events, styles = {} })=>/*#__PURE__*/ React.createElement(Card, {
         id: blockId,
         title: content.title ? content.title() : renderHtml({
             html: properties.title,
             methods
         }),
-        headStyle: methods.makeCssClass(properties.headerStyle, true),
-        bodyStyle: methods.makeCssClass(properties.bodyStyle, true),
-        bordered: properties.bordered,
+        variant: properties.bordered === false ? 'borderless' : properties.variant,
         cover: content.cover && content.cover(),
         extra: content.extra && content.extra(),
         hoverable: properties.hoverable,
@@ -32,20 +31,22 @@ const CardBlock = ({ blockId, content, properties, methods, events })=>/*#__PURE
         onClick: ()=>methods.triggerEvent({
                 name: 'onClick'
             }),
-        className: methods.makeCssClass([
-            {
-                outline: 'none',
-                cursor: events.onClick && 'pointer'
-            },
-            properties.style
-        ])
+        className: classNames.element,
+        classNames: {
+            header: classNames.header,
+            body: classNames.body,
+            cover: classNames.cover,
+            actions: classNames.actions,
+            extra: classNames.extra
+        },
+        style: {
+            outline: 'none',
+            cursor: events.onClick && 'pointer',
+            ...styles.element
+        },
+        styles: {
+            header: styles.header,
+            body: styles.body
+        }
     }, content.content && content.content());
-CardBlock.defaultProps = blockDefaultProps;
-CardBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Card/style.less'
-    ]
-};
-export default CardBlock;
+export default withTheme('Card', withBlockDefaults(CardBlock));

package/dist/blocks/Card/meta.js

@@ -0,0 +1,170 @@
+/*
+  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: {
+        content: 'Main Card body.',
+        cover: 'Image or content above the body.',
+        extra: 'Extra content in the top-right header.',
+        title: 'Title area. Overrides the title property.'
+    },
+    cssKeys: {
+        element: 'The Card element.',
+        header: 'The Card header.',
+        body: 'The Card body.',
+        cover: 'The Card cover.',
+        actions: 'The Card actions.',
+        extra: 'The Card extra content.'
+    },
+    events: {
+        onClick: 'Trigger actions when the Card is clicked.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            bordered: {
+                type: 'boolean',
+                default: true,
+                description: 'Toggles rendering of the border around the card.'
+            },
+            hoverable: {
+                type: 'boolean',
+                default: false,
+                description: 'Lift up when hovering card.'
+            },
+            inner: {
+                type: 'boolean',
+                default: false,
+                description: 'Change the card style to inner.'
+            },
+            size: {
+                type: 'string',
+                enum: [
+                    'default',
+                    'small'
+                ],
+                default: 'default',
+                description: 'Size of the card.'
+            },
+            title: {
+                type: 'string',
+                description: 'Title to show in the title area - supports html. Overwritten by blocks in the title content area.'
+            },
+            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/card#design-token'
+                },
+                properties: {
+                    headerBg: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Background color of the card header.'
+                    },
+                    headerFontSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size of the card header title.'
+                    },
+                    headerFontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the card header title for small cards.'
+                    },
+                    headerHeight: {
+                        type: 'number',
+                        default: 56,
+                        description: 'Height of the card header.'
+                    },
+                    headerHeightSM: {
+                        type: 'number',
+                        default: 38,
+                        description: 'Height of the card header for small cards.'
+                    },
+                    actionsBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the card actions area.'
+                    },
+                    actionsLiMargin: {
+                        type: 'string',
+                        default: '12px 0',
+                        description: 'Margin of each action item in the card actions area.'
+                    },
+                    tabsMarginBottom: {
+                        type: 'number',
+                        default: -17,
+                        description: 'Bottom margin adjustment for tabs in the card.'
+                    },
+                    extraColor: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.88)',
+                        description: 'Text color for the extra content area in the header.'
+                    },
+                    bodyPadding: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Padding of the card body.'
+                    },
+                    bodyPaddingSM: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Padding of the card body for small cards.'
+                    },
+                    headerPadding: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Horizontal padding of the card header.'
+                    },
+                    headerPaddingSM: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Horizontal padding of the card header for small cards.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius of the card.'
+                    },
+                    colorBorderSecondary: {
+                        type: 'string',
+                        description: 'Border color of the card.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color of the card body.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color inside the card.'
+                    },
+                    colorTextHeading: {
+                        type: 'string',
+                        description: 'Color of the card header title text.'
+                    },
+                    boxShadowTertiary: {
+                        type: 'string',
+                        description: 'Shadow applied to the card on hover when hoverable is true.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Carousel/Carousel.js

@@ -14,7 +14,8 @@
   limitations under the License.
 */ import React, { useEffect, useRef } from 'react';
 import { Carousel } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
 const getSlides = ({ content, properties })=>{
     let slides = properties.slides;
     if (!slides) {
@@ -24,7 +25,7 @@ const getSlides = ({ content, properties })=>{
     }
     return slides;
 };
-const CarouselBlock = ({ blockId, content, properties, methods })=>{
+const CarouselBlock = ({ blockId, classNames = {}, content, properties, methods, styles = {} })=>{
     const slides = getSlides({
         content,
         properties
@@ -72,18 +73,11 @@ const CarouselBlock = ({ blockId, content, properties, methods })=>{
         onSwipe: ()=>methods.triggerEvent({
                 name: 'onSwipe'
             }),
-        className: methods.makeCssClass(properties.style),
+        className: classNames.element,
+        style: styles.element,
         ref: carousel
     }, slides?.map((slide)=>/*#__PURE__*/ React.createElement("div", {
             key: slide.key
         }, content[slide.key] && content[slide.key]())));
 };
-CarouselBlock.defaultProps = blockDefaultProps;
-CarouselBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Carousel/style.less'
-    ]
-};
-export default CarouselBlock;
+export default withTheme('Carousel', withBlockDefaults(CarouselBlock));

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

@@ -13,7 +13,19 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'container',
+    icons: [],
+    valueType: null,
+    slots: false,
+    cssKeys: {
+        element: 'The Carousel element.'
+    },
+    events: {
+        afterChange: 'Trigger actions after the slide is changed.',
+        beforeChange: 'Trigger actions before the slide is changed.',
+        onInit: 'Trigger actions when the carousel is initialized.',
+        onSwipe: 'Trigger actions when the carousel is swiped.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -174,28 +186,55 @@
                 type: 'boolean',
                 default: false,
                 description: 'Whether or not the slides are shown in a column.'
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            afterChange: {
-                type: 'array',
-                description: 'Trigger actions after the slide is changed.'
             },
-            beforeChange: {
-                type: 'array',
-                description: 'Trigger actions before the slide is changed.'
-            },
-            onInit: {
-                type: 'array',
-                description: 'Trigger actions when the carousel is initialized.'
-            },
-            onSwipe: {
-                type: 'array',
-                description: 'Trigger actions when the carousel is swiped.'
+            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/carousel#design-token'
+                },
+                properties: {
+                    dotWidth: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Width of the indicator dot.'
+                    },
+                    dotHeight: {
+                        type: 'number',
+                        default: 3,
+                        description: 'Height of the indicator dot.'
+                    },
+                    dotGap: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Gap between indicator dots.'
+                    },
+                    dotOffset: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Offset distance of dots from the carousel edge.'
+                    },
+                    dotActiveWidth: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Width of the active indicator dot.'
+                    },
+                    arrowSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Size of the navigation arrows.'
+                    },
+                    arrowOffset: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Offset distance of arrows from the carousel edge.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color used for indicator dots.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/CheckboxSelector/CheckboxSelector.js

@@ -13,16 +13,61 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Checkbox, Space } from 'antd';
+import { Checkbox, ConfigProvider, Space } from 'antd';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
 import getValueIndex from '../../getValueIndex.js';
 import getUniqueValues from '../../getUniqueValues.js';
-const CheckboxSelector = ({ blockId, components, events, loading, properties, required, validation, value, methods })=>{
+import withTheme from '../withTheme.js';
+const CheckboxSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
     const uniqueValueOptions = getUniqueValues(properties.options || []);
+    const checkboxGroup = /*#__PURE__*/ React.createElement(Checkbox.Group, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        style: styles.element,
+        onChange: (newVal)=>{
+            const val = [];
+            newVal.forEach((nv)=>{
+                val.push(type.isPrimitive(uniqueValueOptions[nv]) ? uniqueValueOptions[nv] : uniqueValueOptions[nv].value);
+            });
+            methods.setValue(val);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: val
+                }
+            });
+        },
+        value: getValueIndex(value, uniqueValueOptions, true)
+    }, /*#__PURE__*/ React.createElement(Space, {
+        direction: properties.direction,
+        wrap: type.isNone(properties.wrap) ? true : properties.wrap,
+        align: type.isNone(properties.align) ? 'start' : properties.align
+    }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Checkbox, {
+            id: `${blockId}_${i}`,
+            key: i,
+            value: `${i}`
+        }, renderHtml({
+            html: `${opt}`,
+            methods
+        })) : /*#__PURE__*/ React.createElement(Checkbox, {
+            id: `${blockId}_${i}`,
+            key: i,
+            value: `${i}`,
+            disabled: opt.disabled,
+            style: opt.style
+        }, type.isNone(opt.label) ? renderHtml({
+            html: `${opt.value}`,
+            methods
+        }) : renderHtml({
+            html: opt.label,
+            methods
+        })))));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: components,
         events: events,
         properties: {
@@ -32,69 +77,18 @@ const CheckboxSelector = ({ blockId, components, events, loading, properties, re
         },
         validation: validation,
         required: required,
+        styles: styles,
         content: {
-            content: ()=>/*#__PURE__*/ React.createElement(Checkbox.Group, {
-                    id: `${blockId}_input`,
-                    className: methods.makeCssClass([
-                        properties.color && {
-                            '& > label > span.ant-checkbox-checked:not(.ant-checkbox-disabled) > span': {
-                                backgroundColor: `${properties.color} !important`,
-                                borderColor: `${properties.color} !important`
-                            }
-                        },
-                        properties.inputStyle
-                    ]),
-                    disabled: properties.disabled || loading,
-                    onChange: (newVal)=>{
-                        const val = [];
-                        newVal.forEach((nv)=>{
-                            val.push(type.isPrimitive(uniqueValueOptions[nv]) ? uniqueValueOptions[nv] : uniqueValueOptions[nv].value);
-                        });
-                        methods.setValue(val);
-                        methods.triggerEvent({
-                            name: 'onChange',
-                            event: {
-                                value: val
+            content: ()=>properties.color ? /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    theme: {
+                        components: {
+                            Checkbox: {
+                                colorPrimary: properties.color
                             }
-                        });
-                    },
-                    value: getValueIndex(value, uniqueValueOptions, true)
-                }, /*#__PURE__*/ React.createElement(Space, {
-                    direction: properties.direction,
-                    wrap: type.isNone(properties.wrap) ? true : properties.wrap,
-                    align: type.isNone(properties.align) ? 'start' : properties.align
-                }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Checkbox, {
-                        id: `${blockId}_${i}`,
-                        key: i,
-                        value: `${i}`
-                    }, renderHtml({
-                        html: `${opt}`,
-                        methods
-                    })) : /*#__PURE__*/ React.createElement(Checkbox, {
-                        id: `${blockId}_${i}`,
-                        key: i,
-                        value: `${i}`,
-                        disabled: opt.disabled,
-                        className: methods.makeCssClass(opt.style)
-                    }, type.isNone(opt.label) ? renderHtml({
-                        html: `${opt.value}`,
-                        methods
-                    }) : renderHtml({
-                        html: opt.label,
-                        methods
-                    })))))
+                        }
+                    }
+                }, checkboxGroup) : checkboxGroup
         }
     });
 };
-CheckboxSelector.defaultProps = blockDefaultProps;
-CheckboxSelector.meta = {
-    valueType: 'array',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/CheckboxSelector/style.less'
-    ]
-};
-export default CheckboxSelector;
+export default withTheme('Checkbox', withBlockDefaults(CheckboxSelector));

package/dist/blocks/CheckboxSelector/meta.js

@@ -0,0 +1,150 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import options from '../../schemas/options.js';
+import { disabled, inputTitle } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'array',
+    cssKeys: {
+        element: 'The CheckboxSelector element.',
+        label: 'The CheckboxSelector label.',
+        extra: 'The CheckboxSelector extra content.',
+        feedback: 'The CheckboxSelector validation feedback.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when selection is changed.',
+            event: {
+                value: 'The selected value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            align: {
+                type: 'string',
+                enum: [
+                    'start',
+                    'end',
+                    'center',
+                    'baseline'
+                ],
+                default: 'start',
+                description: 'Align options.'
+            },
+            color: {
+                type: 'string',
+                description: 'Selected checkbox color.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            disabled,
+            direction: {
+                type: 'string',
+                enum: [
+                    'horizontal',
+                    'vertical'
+                ],
+                default: 'horizontal',
+                description: 'List options horizontally or vertical.'
+            },
+            wrap: {
+                type: 'boolean',
+                default: true,
+                description: "Specifies wrapping of options. Applies when 'direction' is 'horizontal'."
+            },
+            options,
+            label,
+            title: inputTitle,
+            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 for checked checkboxes.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Hover color for checked checkboxes.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color for unchecked checkboxes.'
+                    },
+                    colorBgContainerDisabled: {
+                        type: 'string',
+                        description: 'Background color for disabled checkboxes.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color for unchecked checkboxes.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Text and checkmark color for disabled checkboxes.'
+                    },
+                    controlInteractiveSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Size of the checkbox (width and height in pixels).'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius of the checkbox.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width of the checkbox.'
+                    },
+                    lineType: {
+                        type: 'string',
+                        default: 'solid',
+                        description: 'Border style of the checkbox.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for checkbox labels.'
+                    },
+                    marginXS: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Horizontal gap between checkboxes in a group.'
+                    },
+                    paddingXS: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Inline padding between the checkbox and its label text.'
+                    }
+                }
+            }
+        }
+    }
+};