@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/Label/Label.js

@@ -15,23 +15,25 @@
 */ // Derived from https://github.com/ant-design/ant-design/blob/master/components/form/FormItemLabel.tsx
 // MIT Copyright (c) 2015-present Ant UED, https://xtech.antfin.com/ - 2020-09-08
 import React from 'react';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { Col, Row } from 'antd';
 import classNames from 'classnames';
-import CSSMotion from 'rc-motion';
+import CSSMotion from '@rc-component/motion';
 import labelLogic from './labelLogic.js';
+import './style.module.css';
 const validationKeyMap = {
     error: 'errors',
     warning: 'warnings'
 };
 let iconMap;
-const Label = ({ blockId, components: { Icon }, content, methods, properties, required, validation })=>{
-    const { extraClassName, feedbackClassName, iconClassName, label, labelClassName, labelCol, labelColClassName, rowClassName, showExtra, showFeedback, wrapperCol } = labelLogic({
+const Label = ({ blockId, classNames: blockClassNames = {}, components: { Icon }, content, properties, required, styles = {}, validation })=>{
+    const { extraClassName, extraStyle, feedbackClassName, feedbackStyle, iconClassName, label, labelClassName, labelCol, labelColClassName, labelColStyle, labelStyle, rowClassName, rowStyle, showExtra, showFeedback, wrapperCol } = labelLogic({
         blockId,
+        blockClassNames,
         content,
-        methods,
         properties,
         required,
+        styles,
         validation
     });
     if (!iconMap) {
@@ -56,17 +58,19 @@ const Label = ({ blockId, components: { Icon }, content, methods, properties, re
     }, /*#__PURE__*/ React.createElement(IconNode, null)) : null;
     return /*#__PURE__*/ React.createElement(Row, {
         id: blockId,
-        className: rowClassName
+        className: rowClassName,
+        style: rowStyle
     }, label && /*#__PURE__*/ React.createElement(Col, {
         ...labelCol,
-        className: labelColClassName
+        className: labelColClassName,
+        style: labelColStyle
     }, /*#__PURE__*/ React.createElement("label", {
         htmlFor: `${blockId}_input`,
         className: labelClassName,
+        style: labelStyle,
         title: label
     }, renderHtml({
-        html: label,
-        methods
+        html: label
     }))), /*#__PURE__*/ React.createElement(Col, {
         ...wrapperCol,
         className: "ant-form-item-control"
@@ -80,25 +84,13 @@ const Label = ({ blockId, components: { Icon }, content, methods, properties, re
         motionAppear: true,
         removeOnLeave: true
     }, ({ className: motionClassName })=>/*#__PURE__*/ React.createElement("div", {
-            className: classNames(extraClassName, motionClassName)
+            className: classNames(extraClassName, motionClassName),
+            style: extraStyle
         }, showFeedback ? /*#__PURE__*/ React.createElement("div", {
-            className: classNames(feedbackClassName)
+            className: feedbackClassName,
+            style: feedbackStyle
         }, validation[validationKeyMap[validation.status]] && validation[validationKeyMap[validation.status]].length > 0 && validation[validationKeyMap[validation.status]][0]) : renderHtml({
-            html: properties.extra,
-            methods
+            html: properties.extra
         })))));
 };
-Label.defaultProps = blockDefaultProps;
-Label.meta = {
-    category: 'container',
-    icons: [
-        'AiFillCloseCircle',
-        'AiFillCheckCircle',
-        'AiOutlineLoading',
-        'AiFillExclamationCircle'
-    ],
-    styles: [
-        'blocks/Label/style.less'
-    ]
-};
-export default Label;
+export default withBlockDefaults(Label);

package/dist/blocks/Label/labelLogic.js

@@ -16,7 +16,7 @@
 import classNames from 'classnames';
 import getWrapperCol from './getWrapperCol.js';
 import getLabelCol from './getLabelCol.js';
-const labelLogic = ({ blockId, content, methods, properties = {}, required = false, validation = {
+const labelLogic = ({ blockId, blockClassNames = {}, content, properties = {}, required = false, styles = {}, validation = {
     messages: [],
     status: null
 } })=>{
@@ -29,56 +29,47 @@ const labelLogic = ({ blockId, content, methods, properties = {}, required = fal
     if (type.isString(label) && properties.colon && label.trim() !== '') {
         label = label.replace(/[:|：]\s*$/u, '');
     }
-    const rowClassName = classNames({
-        'ant-form-item': true,
-        'ant-form-item-with-help': false,
-        [methods.makeCssClass({
-            flexWrap: properties.inline && 'inherit',
-            marginBottom: 0
-        })]: true
+    const rowClassName = classNames('ant-form-item', {
+        'ant-form-item-has-error': validation.status === 'error',
+        'ant-form-item-has-warning': validation.status === 'warning'
     });
+    const rowStyle = {
+        flexWrap: properties.inline ? 'inherit' : undefined,
+        marginBottom: 0
+    };
     const labelColClassName = classNames({
         'ant-form-item-label': true,
-        'ant-form-item-label-left': properties.align === 'left' || !properties.align,
-        [methods.makeCssClass({
-            overflow: properties.inline && 'inherit',
-            whiteSpace: !properties.inline && 'normal',
-            marginBottom: properties.size === 'small' ? 0 : 8
-        })]: true
+        'ant-form-item-label-left': properties.align === 'left' || !properties.align
     });
+    const labelColStyle = {
+        overflow: properties.inline ? 'inherit' : undefined,
+        whiteSpace: !properties.inline ? 'normal' : undefined,
+        marginBottom: properties.size === 'small' ? 0 : 8
+    };
     const labelClassName = classNames({
         'ant-form-item-required': required,
-        'ant-form-item-no-colon': properties.colon === false,
-        [methods.makeCssClass([
-            {
-                height: 'fit-content !important',
-                minHeight: properties.inline && (properties.size === 'large' ? 40 : properties.size === 'small' ? 24 : 32)
-            },
-            properties.style
-        ])]: true
-    });
-    const extraClassName = classNames({
-        'ant-form-item-explain': true,
-        'ant-form-item-extra': true,
-        [methods.makeCssClass([
-            {
-                marginTop: properties.size === 'small' ? -4 : 0
-            },
-            properties.extraStyle
-        ])]: true
-    });
+        'ant-form-item-no-colon': properties.colon === false
+    }, blockClassNames.label);
+    const labelStyle = {
+        height: 'fit-content',
+        minHeight: properties.inline ? properties.size === 'large' ? 40 : properties.size === 'small' ? 24 : 32 : undefined,
+        ...styles.label
+    };
+    const extraClassName = classNames('ant-form-item-explain', 'ant-form-item-extra', blockClassNames.extra);
+    const extraStyle = {
+        marginTop: properties.size === 'small' ? -4 : 0,
+        ...styles.extra
+    };
     const feedbackClassName = classNames({
         'ant-form-item-explain-success': validation.status === 'success',
         'ant-form-item-explain-warning': validation.status === 'warning',
         'ant-form-item-explain-error': validation.status === 'error',
-        'ant-form-item-explain-validating': validation.status === 'validating',
-        [methods.makeCssClass([
-            {
-                marginTop: properties.size === 'small' ? -4 : 0
-            },
-            properties.feedbackStyle
-        ])]: true
-    });
+        'ant-form-item-explain-validating': validation.status === 'validating'
+    }, blockClassNames.feedback);
+    const feedbackStyle = {
+        marginTop: properties.size === 'small' ? -4 : 0,
+        ...styles.feedback
+    };
     const iconClassName = classNames({
         'ant-form-item-feedback-icon': true,
         'ant-form-item-feedback-icon-success': validation.status === 'success',
@@ -91,13 +82,18 @@ const labelLogic = ({ blockId, content, methods, properties = {}, required = fal
     const showFeedback = validation.status === 'warning' || validation.status === 'error';
     return {
         extraClassName,
+        extraStyle,
         feedbackClassName,
+        feedbackStyle,
         iconClassName,
         label: !properties.disabled && label,
         labelClassName,
         labelCol,
         labelColClassName,
+        labelColStyle,
+        labelStyle,
         rowClassName,
+        rowStyle,
         showExtra,
         showFeedback,
         wrapperCol

package/dist/blocks/Label/meta.js

@@ -0,0 +1,148 @@
+/*
+  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: [
+        'AiFillCloseCircle',
+        'AiFillCheckCircle',
+        'AiOutlineLoading',
+        'AiFillExclamationCircle'
+    ],
+    valueType: null,
+    slots: {
+        content: 'The labeled input or content blocks.'
+    },
+    cssKeys: {
+        element: 'The Label element.',
+        label: 'The Label label.',
+        extra: 'The Label extra content.',
+        feedback: 'The Label validation feedback.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            align: {
+                type: 'string',
+                enum: [
+                    'left',
+                    'right'
+                ],
+                default: 'left',
+                description: 'Align label left or right when inline.'
+            },
+            colon: {
+                type: 'boolean',
+                default: true,
+                description: 'Append label with colon.'
+            },
+            disabled: {
+                type: 'boolean',
+                default: false,
+                description: 'Disable to not render a label title.'
+            },
+            extra: {
+                type: 'string',
+                description: 'Extra text to display beneath the content - supports html.'
+            },
+            size: {
+                type: 'string',
+                enum: [
+                    'small',
+                    'default',
+                    'large'
+                ],
+                default: 'default',
+                description: 'Size of the block.'
+            },
+            title: {
+                type: 'string',
+                description: 'Label title - supports html.'
+            },
+            span: {
+                type: 'number',
+                description: 'Label inline span.'
+            },
+            inline: {
+                type: 'boolean',
+                default: false,
+                description: 'Render input and label inline.'
+            },
+            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/form#design-token'
+                },
+                properties: {
+                    labelFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the label text.'
+                    },
+                    labelColor: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.88)',
+                        description: 'Text color of the label.'
+                    },
+                    labelRequiredMarkColor: {
+                        type: 'string',
+                        default: '#ff4d4f',
+                        description: 'Color of the required asterisk mark.'
+                    },
+                    labelColonMarginInlineStart: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Inline start margin of the colon after the label.'
+                    },
+                    labelColonMarginInlineEnd: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Inline end margin of the colon after the label.'
+                    },
+                    colorError: {
+                        type: 'string',
+                        default: '#ff4d4f',
+                        description: 'Color used for error validation feedback.'
+                    },
+                    colorWarning: {
+                        type: 'string',
+                        default: '#faad14',
+                        description: 'Color used for warning validation feedback.'
+                    },
+                    colorSuccess: {
+                        type: 'string',
+                        default: '#52c41a',
+                        description: 'Color used for success validation feedback.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color for the extra and feedback text.'
+                    },
+                    colorTextDescription: {
+                        type: 'string',
+                        description: 'Color for the extra description text.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Base font size.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Label/style.module.css

@@ -0,0 +1,185 @@
+/*
+  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.
+*/
+
+/*
+  Antd Form.Item styles needed by the Label block.
+
+  Label reuses ant-form-item-* class names without rendering antd's <Form> or
+  <Form.Item> components, so their CSS-in-JS styles are never generated.
+  This file provides the subset of Form.Item styles that Label depends on.
+
+  Styles are extracted from antd v6 CSS-in-JS output and placed in @layer antd
+  so they sit at the correct cascade priority.
+*/
+
+@layer antd {
+  /* Label column */
+  :global(.ant-form-item .ant-form-item-label) {
+    flex-grow: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: end;
+    vertical-align: middle;
+  }
+
+  :global(.ant-form-item .ant-form-item-label-left) {
+    text-align: start;
+  }
+
+  :global(.ant-form-item .ant-form-item-label > label) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    height: var(--ant-form-label-height, var(--ant-control-height));
+    color: var(--ant-form-label-color, var(--ant-color-text));
+    font-size: var(--ant-form-label-font-size, var(--ant-font-size));
+  }
+
+  /* Required asterisk */
+  :global(.ant-form-item .ant-form-item-label > label.ant-form-item-required)::before {
+    display: inline-block;
+    margin-inline-end: var(--ant-margin-xxs, 4px);
+    color: var(--ant-form-label-required-mark-color, var(--ant-color-error));
+    font-size: var(--ant-font-size);
+    font-family: SimSun, sans-serif;
+    line-height: 1;
+    content: '*';
+  }
+
+  /* Colon after label */
+  :global(.ant-form-item .ant-form-item-label > label)::after {
+    content: ':';
+    position: relative;
+    margin-block: 0;
+    margin-inline-start: var(--ant-form-label-colon-margin-inline-start, 2px);
+    margin-inline-end: var(--ant-form-label-colon-margin-inline-end, 8px);
+  }
+
+  :global(.ant-form-item .ant-form-item-label > label.ant-form-item-no-colon)::after {
+    content: '\a0';
+  }
+
+  /* Control column */
+  :global(.ant-form-item .ant-form-item-control) {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  :global(.ant-form-item .ant-form-item-control-input) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: var(--ant-control-height);
+  }
+
+  :global(.ant-form-item .ant-form-item-control-input-content) {
+    flex: auto;
+    max-width: 100%;
+  }
+
+  /* Help text / extra */
+  :global(.ant-form-item .ant-form-item-explain),
+  :global(.ant-form-item .ant-form-item-extra) {
+    clear: both;
+    color: var(--ant-color-text-description);
+    font-size: var(--ant-font-size);
+    line-height: var(--ant-line-height);
+  }
+
+  /* Validation feedback colors */
+  :global(.ant-form-item .ant-form-item-explain-error) {
+    color: var(--ant-color-error);
+  }
+
+  :global(.ant-form-item .ant-form-item-explain-warning) {
+    color: var(--ant-color-warning);
+  }
+
+  :global(.ant-form-item .ant-form-item-explain-success) {
+    color: var(--ant-color-success);
+  }
+
+  /* Feedback icons */
+  :global(.ant-form-item .ant-form-item-feedback-icon) {
+    font-size: var(--ant-font-size);
+    text-align: center;
+    visibility: visible;
+    pointer-events: none;
+  }
+
+  :global(.ant-form-item .ant-form-item-feedback-icon-success) {
+    color: var(--ant-color-success);
+  }
+
+  :global(.ant-form-item .ant-form-item-feedback-icon-error) {
+    color: var(--ant-color-error);
+  }
+
+  :global(.ant-form-item .ant-form-item-feedback-icon-warning) {
+    color: var(--ant-color-warning);
+  }
+
+  :global(.ant-form-item .ant-form-item-feedback-icon-validating) {
+    color: var(--ant-color-primary);
+  }
+
+  /* Custom: feedback icon spacing */
+  :global(.ldf-feedback-icon) {
+    margin-inline-start: var(--ant-margin-xxs, 4px);
+  }
+}
+
+/*
+  Error/warning state for group components (Radio, Checkbox, ButtonSelector,
+  Segmented) that don't support antd's native `status` prop.
+
+  These rules must live OUTSIDE @layer antd so they beat antd's unlayered
+  CSS-in-JS output in the cascade.
+*/
+:global(.ant-form-item-has-error .ant-radio-inner) {
+  border-color: var(--ant-color-error) !important;
+}
+
+:global(.ant-form-item-has-error .ant-checkbox-inner) {
+  border-color: var(--ant-color-error) !important;
+}
+
+:global(.ant-form-item-has-error .ant-radio-button-wrapper) {
+  border-color: var(--ant-color-error) !important;
+}
+
+:global(.ant-form-item-has-error .ant-segmented) {
+  border-color: var(--ant-color-error);
+}
+
+/* Warning state */
+:global(.ant-form-item-has-warning .ant-radio-inner) {
+  border-color: var(--ant-color-warning) !important;
+}
+
+:global(.ant-form-item-has-warning .ant-checkbox-inner) {
+  border-color: var(--ant-color-warning) !important;
+}
+
+:global(.ant-form-item-has-warning .ant-radio-button-wrapper) {
+  border-color: var(--ant-color-warning) !important;
+}
+
+:global(.ant-form-item-has-warning .ant-segmented) {
+  border-color: var(--ant-color-warning);
+}

package/dist/blocks/Layout/Layout.js

@@ -13,18 +13,15 @@
   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 { Layout } from 'antd';
-const LayoutBlock = ({ blockId, content, properties, methods })=>/*#__PURE__*/ React.createElement(Layout, {
+import { withBlockDefaults } from '@lowdefy/block-utils';
+const LayoutBlock = ({ blockId, classNames = {}, content, properties, styles = {} })=>/*#__PURE__*/ React.createElement(Layout, {
         id: blockId,
-        className: methods.makeCssClass(properties.style)
-    }, content.content && content.content());
-LayoutBlock.defaultProps = blockDefaultProps;
-LayoutBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Layout/style.less'
-    ]
-};
-export default LayoutBlock;
+        className: classNames.element,
+        hasSider: properties.hasSider,
+        style: styles.element
+    }, content.content && content.content({
+        flexDirection: properties.hasSider ? 'row' : 'column',
+        flexWrap: properties.hasSider ? 'nowrap' : undefined
+    }));
+export default withBlockDefaults(LayoutBlock);

package/dist/blocks/{Content/schema.js → Layout/meta.js}

@@ -13,14 +13,22 @@
   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: 'Layout child blocks (Header, Sider, Content, Footer).'
+    },
+    cssKeys: {
+        element: 'The Layout element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
+            theme: {
                 type: 'object',
-                description: 'Css style object to applied to content.',
+                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'
                 }

package/dist/blocks/Masonry/Masonry.js

@@ -0,0 +1,37 @@
+/*
+  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 { Masonry } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const MasonryBlock = ({ blockId, classNames = {}, content, properties, styles = {} })=>{
+    const rendered = content.content && content.content();
+    const children = React.Children.toArray(rendered?.props?.children ?? []);
+    const items = children.map((child, i)=>({
+            key: child.key ?? i,
+            children: child
+        }));
+    return /*#__PURE__*/ React.createElement(Masonry, {
+        id: blockId,
+        className: classNames.element,
+        style: styles.element,
+        columns: properties.columns,
+        fresh: properties.fresh,
+        gutter: properties.gutter,
+        sequential: properties.sequential,
+        items: items
+    });
+};
+export default withTheme('Masonry', withBlockDefaults(MasonryBlock));

package/dist/blocks/{Affix/style.less → Masonry/e2e.js}

@@ -12,6 +12,12 @@
   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/affix/style/index.less';
+*/ import { createBlockHelper } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${blockId}`);
+export default createBlockHelper({
+    locator,
+    expect: {
+        childCount: (page, blockId, count)=>expect(locator(page, blockId).locator('> *')).toHaveCount(count)
+    }
+});