@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/Affix/Affix.js

@@ -15,12 +15,14 @@
 */ import React from 'react';
 import { Affix } from 'antd';
 import { get } from '@lowdefy/helpers';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const AffixBlock = ({ blockId, content, methods, properties, rename })=>/*#__PURE__*/ React.createElement(Affix, {
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const AffixBlock = ({ blockId, classNames = {}, content, methods, properties, rename, styles = {} })=>/*#__PURE__*/ React.createElement(Affix, {
         id: blockId,
-        className: methods.makeCssClass(properties.style),
+        className: classNames.element,
         offsetBottom: properties.offsetBottom,
         offsetTop: properties.offsetTop,
+        style: styles.element,
         onChange: (affixed)=>{
             methods.triggerEvent({
                 name: get(rename, 'events.onChange', {
@@ -32,12 +34,4 @@ const AffixBlock = ({ blockId, content, methods, properties, rename })=>/*#__PUR
             });
         }
     }, content.content && content.content());
-AffixBlock.defaultProps = blockDefaultProps;
-AffixBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Affix/style.less'
-    ]
-};
-export default AffixBlock;
+export default withTheme('Affix', withBlockDefaults(AffixBlock));

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

@@ -13,7 +13,18 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Child blocks wrapped by the Affix.'
+    },
+    cssKeys: {
+        element: 'The Affix element.'
+    },
+    events: {
+        onChange: 'Triggered when container affix status changes.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -26,23 +37,21 @@
                 type: 'number',
                 description: 'Offset from the top of the viewport (in pixels).'
             },
-            style: {
+            theme: {
                 type: 'object',
-                description: 'Css style object to applied to affix.',
+                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/affix#design-token'
+                },
+                properties: {
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 10,
+                        description: 'Z-index of the affix element when fixed.'
+                    }
                 }
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onChange: {
-                type: 'array',
-                description: 'Triggered when container affix status changes.'
-            }
-        }
     }
 };

package/dist/blocks/Alert/Alert.js

@@ -14,17 +14,26 @@
   limitations under the License.
 */ import React from 'react';
 import { Alert } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
-const AlertBlock = ({ blockId, content, events, components: { Icon }, methods, properties })=>{
+import withTheme from '../withTheme.js';
+const AlertBlock = ({ blockId, classNames = {}, content, events, components: { Icon }, methods, properties, styles = {} })=>{
     const additionalProps = {};
     if (properties.icon) {
         additionalProps.icon = /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_icon`,
+            classNames: {
+                element: classNames.icon
+            },
             events: events,
-            properties: properties.icon
+            properties: properties.icon,
+            styles: {
+                element: styles.icon
+            }
         });
     }
+    const { element: elementClass, ...subClasses } = classNames;
+    const { element: elementStyle, ...subStyles } = styles;
     return /*#__PURE__*/ React.createElement(Alert, {
         action: content.action && content.action(),
         afterClose: ()=>methods.triggerEvent({
@@ -33,6 +42,8 @@ const AlertBlock = ({ blockId, content, events, components: { Icon }, methods, p
         banner: properties.banner,
         closable: properties.closable,
         closeText: properties.closeText,
+        className: elementClass,
+        classNames: subClasses,
         description: renderHtml({
             html: properties.description,
             methods
@@ -50,16 +61,10 @@ const AlertBlock = ({ blockId, content, events, components: { Icon }, methods, p
                 name: 'onClose'
             }),
         showIcon: properties.showIcon === false ? false : true,
+        style: elementStyle,
+        styles: subStyles,
         type: properties.type,
         ...additionalProps
     });
 };
-AlertBlock.defaultProps = blockDefaultProps;
-AlertBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Alert/style.less'
-    ]
-};
-export default AlertBlock;
+export default withTheme('Alert', withBlockDefaults(AlertBlock));

package/dist/blocks/Alert/e2e.js

@@ -21,7 +21,7 @@ export default createBlockHelper({
         close: (page, blockId)=>locator(page, blockId).locator('.ant-alert-close-icon').click()
     },
     expect: {
-        message: (page, blockId, text)=>expect(locator(page, blockId).locator('.ant-alert-message')).toHaveText(text),
+        message: (page, blockId, text)=>expect(locator(page, blockId).locator('.ant-alert-title')).toHaveText(text),
         description: (page, blockId, text)=>expect(locator(page, blockId).locator('.ant-alert-description')).toHaveText(text),
         type: (page, blockId, type)=>expect(locator(page, blockId)).toHaveClass(new RegExp(`ant-alert-${type}`)),
         success: (page, blockId)=>expect(locator(page, blockId)).toHaveClass(/ant-alert-success/),

package/dist/blocks/Alert/meta.js

@@ -0,0 +1,186 @@
+/*
+  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: {
+        action: 'Action area content.'
+    },
+    cssKeys: {
+        element: 'The Alert element.',
+        icon: 'The icon in the Alert.',
+        message: 'The Alert message.',
+        description: 'The Alert description.',
+        action: 'The Alert action.',
+        closeIcon: 'The Alert close icon.'
+    },
+    events: {
+        onClose: 'Called when Alert close button is clicked.',
+        afterClose: 'Called after Alert has been closed.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            banner: {
+                type: 'boolean',
+                default: false,
+                description: 'Style as banner at top of application window.'
+            },
+            closable: {
+                type: 'boolean',
+                default: false,
+                description: 'Allow alert to be closed.'
+            },
+            closeText: {
+                type: 'string',
+                description: 'Close text to show.'
+            },
+            description: {
+                type: 'string',
+                description: 'Content description of alert - supports html.'
+            },
+            icon: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                description: 'Name of an Ant Design Icon or properties of an Icon block to customize alert icon.',
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            message: {
+                type: 'string',
+                description: 'Content message of alert - supports html.'
+            },
+            showIcon: {
+                type: 'boolean',
+                default: true,
+                description: 'Show type default icon.'
+            },
+            type: {
+                type: 'string',
+                enum: [
+                    'success',
+                    'info',
+                    'warning',
+                    'error'
+                ],
+                default: 'info',
+                description: 'Alert style type.'
+            },
+            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/alert#design-token'
+                },
+                properties: {
+                    defaultPadding: {
+                        type: 'string',
+                        default: '8px 12px',
+                        description: 'Default padding for the alert without description.'
+                    },
+                    withDescriptionPadding: {
+                        type: 'string',
+                        default: '20px 24px',
+                        description: 'Padding for the alert when a description is present.'
+                    },
+                    withDescriptionIconSize: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Icon size when the alert has a description.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color of the alert message.'
+                    },
+                    colorTextHeading: {
+                        type: 'string',
+                        description: 'Heading text color when the alert has a description.'
+                    },
+                    colorIcon: {
+                        type: 'string',
+                        description: 'Icon color override.'
+                    },
+                    colorIconHover: {
+                        type: 'string',
+                        description: 'Icon hover color for the close button.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the alert text.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size of the alert message when a description is present.'
+                    },
+                    lineHeight: {
+                        type: 'number',
+                        default: 1.5714,
+                        description: 'Line height of the alert text.'
+                    },
+                    borderRadius: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius of the alert container.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for large alerts.'
+                    },
+                    colorSuccessBg: {
+                        type: 'string',
+                        description: 'Background color for success alerts.'
+                    },
+                    colorSuccessBorder: {
+                        type: 'string',
+                        description: 'Border color for success alerts.'
+                    },
+                    colorInfoBg: {
+                        type: 'string',
+                        description: 'Background color for info alerts.'
+                    },
+                    colorInfoBorder: {
+                        type: 'string',
+                        description: 'Border color for info alerts.'
+                    },
+                    colorWarningBg: {
+                        type: 'string',
+                        description: 'Background color for warning alerts.'
+                    },
+                    colorWarningBorder: {
+                        type: 'string',
+                        description: 'Border color for warning alerts.'
+                    },
+                    colorErrorBg: {
+                        type: 'string',
+                        description: 'Background color for error alerts.'
+                    },
+                    colorErrorBorder: {
+                        type: 'string',
+                        description: 'Border color for error alerts.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/AutoComplete/AutoComplete.js

@@ -14,13 +14,15 @@
   limitations under the License.
 */ import React from 'react';
 import { AutoComplete } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
 const Option = AutoComplete.Option;
-const AutoCompleteInput = ({ blockId, components, events, loading, methods, properties, required, validation, value })=>{
+const AutoCompleteInput = ({ blockId, classNames = {}, components, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: components,
         events: events,
         properties: {
@@ -30,23 +32,24 @@ const AutoCompleteInput = ({ blockId, components, events, loading, methods, prop
         },
         validation: validation,
         required: required,
+        styles: styles,
         content: {
             content: ()=>/*#__PURE__*/ React.createElement(AutoComplete, {
                     id: `${blockId}_input`,
                     autoFocus: properties.autoFocus,
                     backfill: properties.backfill,
-                    bordered: properties.bordered,
-                    className: methods.makeCssClass([
-                        {
-                            width: '100%'
-                        },
-                        properties.inputStyle
-                    ]),
+                    variant: properties.bordered === false ? 'borderless' : properties.variant,
+                    className: classNames.element,
+                    style: {
+                        width: '100%',
+                        ...styles.element
+                    },
                     defaultOpen: properties.defaultOpen,
                     disabled: properties.disabled || loading,
                     placeholder: properties.placeholder ?? 'Type or select item',
                     allowClear: properties.allowClear !== false,
                     size: properties.size,
+                    status: validation.status,
                     filterOption: (input, option)=>`${option.value}`.toLowerCase().indexOf(input.toLowerCase()) >= 0,
                     onChange: (newVal)=>{
                         methods.setValue(newVal);
@@ -82,7 +85,8 @@ const AutoCompleteInput = ({ blockId, components, events, loading, methods, prop
                     },
                     value: type.isNone(value) ? undefined : `${value}`
                 }, (properties.options || []).map((opt, i)=>/*#__PURE__*/ React.createElement(Option, {
-                        className: methods.makeCssClass(properties.optionsStyle),
+                        style: styles.options,
+                        className: classNames.options,
                         id: `${blockId}_${i}`,
                         key: i,
                         value: `${opt}`
@@ -90,15 +94,4 @@ const AutoCompleteInput = ({ blockId, components, events, loading, methods, prop
         }
     });
 };
-AutoCompleteInput.defaultProps = blockDefaultProps;
-AutoCompleteInput.meta = {
-    valueType: 'string',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/AutoComplete/style.less'
-    ]
-};
-export default AutoCompleteInput;
+export default withTheme('AutoComplete', withBlockDefaults(AutoCompleteInput));

package/dist/blocks/AutoComplete/meta.js

@@ -0,0 +1,265 @@
+/*
+  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 { disabled, autoFocus, variant, bordered, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'string',
+    cssKeys: {
+        element: 'The AutoComplete element.',
+        label: 'The AutoComplete label.',
+        extra: 'The AutoComplete extra content.',
+        feedback: 'The AutoComplete validation feedback.',
+        options: 'The AutoComplete options.'
+    },
+    events: {
+        onBlur: 'Trigger action event occurs when selector loses focus.',
+        onChange: {
+            description: 'Trigger actions when selection is changed.',
+            event: {
+                value: 'The selected value.'
+            }
+        },
+        onFocus: 'Trigger action when an selector gets focus.',
+        onClear: 'Trigger action when selector gets cleared.',
+        onSearch: {
+            description: 'Called when searching items.',
+            event: {
+                value: 'The search input value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            allowClear: {
+                ...allowClear,
+                default: true,
+                description: 'Allow the user to clear the selected value, sets the value to null.'
+            },
+            autoFocus,
+            bordered,
+            backfill: {
+                type: 'boolean',
+                default: false,
+                description: 'Backfill selected item the input when using keyboard'
+            },
+            defaultOpen: {
+                type: 'boolean',
+                default: false,
+                description: 'Initial open state of dropdown.'
+            },
+            disabled,
+            label,
+            options: {
+                default: [],
+                type: 'array',
+                description: 'Options can either be an array of string values.',
+                items: {
+                    type: 'string'
+                }
+            },
+            placeholder: {
+                type: 'string',
+                default: 'Type or select item',
+                description: 'Placeholder text inside the block before user selects input.'
+            },
+            size: sizeSmallDefaultLarge,
+            title: {
+                type: 'string',
+                description: 'Title to describe the input component, if no title is specified the block id is displayed.'
+            },
+            variant,
+            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/select#design-token'
+                },
+                properties: {
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius of the input.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for large size.'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius for small size.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of the input.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height for large size.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height for small size.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the input text.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size for large size.'
+                    },
+                    fontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for small size.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color, used for focus border and active state.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Primary hover color, used for hover border state.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the selector.'
+                    },
+                    colorBgElevated: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the dropdown.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color of the input.'
+                    },
+                    colorTextPlaceholder: {
+                        type: 'string',
+                        description: 'Placeholder text color.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Text color when disabled.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the input.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        description: 'Border color when hovered.'
+                    },
+                    activeBorderColor: {
+                        type: 'string',
+                        description: 'Border color when focused/active.'
+                    },
+                    activeOutlineColor: {
+                        type: 'string',
+                        description: 'Outline color when focused.'
+                    },
+                    clearBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the clear button.'
+                    },
+                    optionSelectedBg: {
+                        type: 'string',
+                        default: '#e6f4ff',
+                        description: 'Background color of the selected option.'
+                    },
+                    optionSelectedColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Text color of the selected option.'
+                    },
+                    optionSelectedFontWeight: {
+                        type: 'number',
+                        default: 600,
+                        description: 'Font weight of the selected option.'
+                    },
+                    optionActiveBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.04)',
+                        description: 'Background color of the active (hovered) option.'
+                    },
+                    optionFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of dropdown option text.'
+                    },
+                    optionHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of each dropdown option.'
+                    },
+                    optionLineHeight: {
+                        type: 'number',
+                        description: 'Line height of dropdown option text.'
+                    },
+                    optionPadding: {
+                        type: [
+                            'string',
+                            'number'
+                        ],
+                        default: '5px 12px',
+                        description: 'Padding of each dropdown option.'
+                    },
+                    selectorBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the selector input.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1050,
+                        description: 'Z-index of the dropdown popup.'
+                    },
+                    showArrowPaddingInlineEnd: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Right padding when the arrow icon is shown.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width of the input.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding of the input.'
+                    }
+                }
+            }
+        }
+    }
+};