@lowdefy/blocks-antd 4.7.3 → 5.1.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,30 @@ 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,
+                    classNames: {
+                        content: classNames.selector
+                    },
+                    style: {
+                        width: '100%',
+                        ...styles.element
+                    },
+                    styles: {
+                        content: styles.selector
+                    },
                     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 +91,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 +100,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));