@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/Pagination/meta.js

@@ -0,0 +1,233 @@
+/*
+  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: 'input',
+    icons: [],
+    valueType: 'object',
+    initValue: {
+        current: 1
+    },
+    cssKeys: {
+        element: 'The Pagination element.'
+    },
+    events: {
+        onSizeChange: {
+            description: 'Triggered when page size is changed.',
+            event: {
+                current: 'The current page number.',
+                pageSize: 'The page size.',
+                skip: 'The number of items to skip.'
+            }
+        },
+        onChange: {
+            description: 'Triggered when current page is changed.',
+            event: {
+                current: 'The current page number.',
+                pageSize: 'The page size.',
+                skip: 'The number of items to skip.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            total: {
+                type: 'integer',
+                default: 100,
+                description: 'Total number of items to be displayed in pagination.'
+            },
+            size: {
+                type: 'string',
+                enum: [
+                    'small',
+                    'default'
+                ],
+                default: 'default',
+                description: 'Pagination element size.'
+            },
+            simple: {
+                type: 'boolean',
+                default: false,
+                description: 'Use simplified pagination display.'
+            },
+            showTotal: {
+                type: [
+                    'boolean',
+                    'string',
+                    'object'
+                ],
+                default: false,
+                description: 'Show pagination total number and range if boolean, or define a custom string or function to display.',
+                docs: {
+                    displayType: 'string'
+                }
+            },
+            showSizeChanger: {
+                type: 'boolean',
+                default: false,
+                description: 'Determine whether to show page size select, it will be true when total > 50.'
+            },
+            showQuickJumper: {
+                type: 'boolean',
+                default: false,
+                description: 'Determine whether you can jump to pages directly.'
+            },
+            pageSizeOptions: {
+                type: 'array',
+                default: [
+                    10,
+                    20,
+                    30,
+                    40
+                ],
+                description: 'Specify the page size changer options.',
+                items: {
+                    type: 'number'
+                }
+            },
+            hideOnSinglePage: {
+                type: 'boolean',
+                default: false,
+                description: 'Hide pager on short list of a single page.'
+            },
+            disabled: {
+                type: 'boolean',
+                default: false,
+                description: 'Disable pager.'
+            },
+            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/pagination#design-token'
+                },
+                properties: {
+                    itemBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color for pagination items.'
+                    },
+                    itemSize: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Size of pagination items.'
+                    },
+                    itemSizeSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Size of pagination items in small mode.'
+                    },
+                    itemActiveBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color for the active pagination item.'
+                    },
+                    itemActiveColor: {
+                        type: 'string',
+                        description: 'Text color for the active pagination item.'
+                    },
+                    itemActiveColorDisabled: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.25)',
+                        description: 'Text color for the active item when disabled.'
+                    },
+                    itemActiveBgDisabled: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.15)',
+                        description: 'Background color for the active item when disabled.'
+                    },
+                    itemLinkBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color for prev/next link items.'
+                    },
+                    itemInputBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color for the quick jumper input.'
+                    },
+                    miniOptionsSizeChangerTop: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Top offset for the size changer in mini/small mode.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color for active and hover states.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Primary color on hover.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Default text color for pagination items.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color for pagination items.'
+                    },
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius for pagination items.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for pagination items.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Control height, affects item size.'
+                    },
+                    paddingBlock: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Vertical padding for pagination items.'
+                    },
+                    paddingBlockSM: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Vertical padding for small pagination items.'
+                    },
+                    paddingBlockLG: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Vertical padding for large pagination items.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding for pagination items.'
+                    },
+                    paddingInlineSM: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Horizontal padding for small pagination items.'
+                    },
+                    paddingInlineLG: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding for large pagination items.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Paragraph/Paragraph.js

@@ -13,13 +13,14 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import { Typography } from 'antd';
+import withTheme from '../withTheme.js';
 const Paragraph = Typography.Paragraph;
-const ParagraphBlock = ({ blockId, components: { Icon }, events, methods, properties })=>/*#__PURE__*/ React.createElement(Paragraph, {
+const ParagraphBlock = ({ blockId, classNames = {}, components: { Icon }, events, methods, properties, styles = {} })=>/*#__PURE__*/ React.createElement(Paragraph, {
         id: blockId,
-        className: methods.makeCssClass(properties.style),
+        className: classNames.element,
         code: properties.code,
         copyable: type.isObject(properties.copyable) ? {
             text: properties.copyable.text || properties.content,
@@ -34,20 +35,38 @@ const ParagraphBlock = ({ blockId, components: { Icon }, events, methods, proper
             icon: properties.copyable.icon && (type.isArray(properties.copyable.icon) ? [
                 /*#__PURE__*/ React.createElement(Icon, {
                     key: "copy-icon",
-                    events: events,
                     blockId: `${blockId}_copyable_before_icon`,
-                    properties: properties.copyable.icon[0]
+                    classNames: {
+                        element: classNames.copyableIcon
+                    },
+                    events: events,
+                    properties: properties.copyable.icon[0],
+                    styles: {
+                        element: styles.copyableIcon
+                    }
                 }),
                 /*#__PURE__*/ React.createElement(Icon, {
                     key: "copied-icon",
                     blockId: `${blockId}_copyable_after_icon`,
+                    classNames: {
+                        element: classNames.copyableIcon
+                    },
                     events: events,
-                    properties: properties.copyable.icon[1]
+                    properties: properties.copyable.icon[1],
+                    styles: {
+                        element: styles.copyableIcon
+                    }
                 })
             ] : /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_copyable_icon`,
+                classNames: {
+                    element: classNames.copyableIcon
+                },
                 events: events,
-                properties: properties.copyable.icon
+                properties: properties.copyable.icon,
+                styles: {
+                    element: styles.copyableIcon
+                }
             })),
             tooltips: properties.copyable.tooltips
         } : properties.copyable && {
@@ -85,6 +104,7 @@ const ParagraphBlock = ({ blockId, components: { Icon }, events, methods, proper
         italic: properties.italic,
         mark: properties.mark,
         strong: properties.strong,
+        style: styles.element,
         type: properties.type,
         underline: properties.underline
     }, renderHtml({
@@ -92,12 +112,4 @@ const ParagraphBlock = ({ blockId, components: { Icon }, events, methods, proper
         events,
         methods
     }));
-ParagraphBlock.defaultProps = blockDefaultProps;
-ParagraphBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Paragraph/style.less'
-    ]
-};
-export default ParagraphBlock;
+export default withTheme('Typography', withBlockDefaults(ParagraphBlock));

package/dist/blocks/Paragraph/{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: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Paragraph element.',
+        copyableIcon: 'The copyable icon in the Paragraph.'
+    },
+    events: {
+        onExpand: 'Trigger action when ellipse expand is clicked.',
+        onCopy: 'Trigger action when copy text is clicked.',
+        onTextSelection: 'Trigger action when text is selected and pass selected text to the event object.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -138,24 +149,63 @@
                 type: 'boolean',
                 default: false,
                 description: 'Apply underline style.'
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onExpand: {
-                type: 'array',
-                description: 'Trigger action when ellipse expand is clicked.'
-            },
-            onCopy: {
-                type: 'array',
-                description: 'Trigger action when copy text is clicked.'
             },
-            onTextSelection: {
-                type: 'array',
-                description: 'Trigger action when text is selected and pass selected text to the event object.'
+            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/typography#design-token'
+                },
+                properties: {
+                    titleMarginBottom: {
+                        type: 'string',
+                        default: '0.5em',
+                        description: 'Margin bottom of title.'
+                    },
+                    titleMarginTop: {
+                        type: 'string',
+                        default: '1.2em',
+                        description: 'Margin top of title.'
+                    },
+                    fontWeightStrong: {
+                        type: 'number',
+                        default: 600,
+                        description: 'Font weight for strong text.'
+                    },
+                    fontFamilyCode: {
+                        type: 'string',
+                        description: 'Font family for code style text.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Default text color.'
+                    },
+                    colorTextSecondary: {
+                        type: 'string',
+                        description: 'Secondary text color.'
+                    },
+                    colorSuccess: {
+                        type: 'string',
+                        description: 'Success text color.'
+                    },
+                    colorWarning: {
+                        type: 'string',
+                        description: 'Warning text color.'
+                    },
+                    colorError: {
+                        type: 'string',
+                        description: 'Danger/error text color.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Disabled text color.'
+                    },
+                    colorLink: {
+                        type: 'string',
+                        description: 'Link color.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/ParagraphInput/ParagraphInput.js

@@ -14,10 +14,11 @@
   limitations under the License.
 */ import React, { useState } from 'react';
 import { Typography } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
 const Paragraph = Typography.Paragraph;
-const ParagraphInput = ({ blockId, components: { Icon }, events, loading, methods, properties, value })=>{
+const ParagraphInput = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, styles = {}, value })=>{
     const [editing, setEdit] = useState(false);
     const editableEvents = {
         onStart: ()=>{
@@ -39,7 +40,7 @@ const ParagraphInput = ({ blockId, components: { Icon }, events, loading, method
     };
     return /*#__PURE__*/ React.createElement(Paragraph, {
         id: blockId,
-        className: methods.makeCssClass(properties.style),
+        className: classNames.element,
         code: properties.code,
         copyable: type.isObject(properties.copyable) ? {
             text: properties.copyable.text || value,
@@ -55,19 +56,37 @@ const ParagraphInput = ({ blockId, components: { Icon }, events, loading, method
                 /*#__PURE__*/ React.createElement(Icon, {
                     key: "copy-icon",
                     blockId: `${blockId}_copyable_before_icon`,
+                    classNames: {
+                        element: classNames.copyableIcon
+                    },
                     events: events,
-                    properties: properties.copyable.icon[0]
+                    properties: properties.copyable.icon[0],
+                    styles: {
+                        element: styles.copyableIcon
+                    }
                 }),
                 /*#__PURE__*/ React.createElement(Icon, {
                     key: "copied-icon",
                     blockId: `${blockId}_copyable_after_icon`,
+                    classNames: {
+                        element: classNames.copyableIcon
+                    },
                     events: events,
-                    properties: properties.copyable.icon[1]
+                    properties: properties.copyable.icon[1],
+                    styles: {
+                        element: styles.copyableIcon
+                    }
                 })
             ] : /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_copyable_icon`,
+                classNames: {
+                    element: classNames.copyableIcon
+                },
                 events: events,
-                properties: properties.copyable.icon
+                properties: properties.copyable.icon,
+                styles: {
+                    element: styles.copyableIcon
+                }
             })),
             tooltips: properties.copyable.tooltips
         } : properties.copyable,
@@ -97,8 +116,14 @@ const ParagraphInput = ({ blockId, components: { Icon }, events, loading, method
         editable: type.isObject(properties.editable) ? {
             icon: properties.editable.icon && /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_editable_icon`,
+                classNames: {
+                    element: classNames.editableIcon
+                },
                 events: events,
-                properties: properties.editable.icon
+                properties: properties.editable.icon,
+                styles: {
+                    element: styles.editableIcon
+                }
             }),
             tooltip: properties.editable.tooltip,
             editing: properties.editable.editing || editing,
@@ -109,17 +134,9 @@ const ParagraphInput = ({ blockId, components: { Icon }, events, loading, method
         italic: properties.italic,
         mark: properties.mark,
         strong: properties.strong,
+        style: styles.element,
         type: properties.type,
         underline: properties.underline
     }, !type.isNone(value) ? value.toString() : '');
 };
-ParagraphInput.defaultProps = blockDefaultProps;
-ParagraphInput.meta = {
-    valueType: 'string',
-    category: 'input',
-    icons: [],
-    styles: [
-        'blocks/ParagraphInput/style.less'
-    ]
-};
-export default ParagraphInput;
+export default withTheme('Typography', withBlockDefaults(ParagraphInput));

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

@@ -13,7 +13,29 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'input',
+    icons: [],
+    valueType: 'string',
+    cssKeys: {
+        element: 'The ParagraphInput element.',
+        copyableIcon: 'The copyable icon in the ParagraphInput.',
+        editableIcon: 'The editable icon in the ParagraphInput.'
+    },
+    events: {
+        onExpand: 'Trigger action when ellipse expand is clicked.',
+        onCopy: {
+            description: 'Trigger action when copy text is clicked.',
+            event: {
+                value: 'The copied text value.'
+            }
+        },
+        onChange: {
+            description: 'Trigger action when paragraph is changed.',
+            event: {
+                value: 'The new paragraph value.'
+            }
+        }
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -105,6 +127,29 @@
                             maxLength: {
                                 type: 'number',
                                 description: 'Max length of text area input.'
+                            },
+                            autoSize: {
+                                default: false,
+                                oneOf: [
+                                    {
+                                        type: 'boolean',
+                                        description: 'Auto size the text area height when editing.'
+                                    },
+                                    {
+                                        type: 'object',
+                                        additionalProperties: false,
+                                        properties: {
+                                            minRows: {
+                                                type: 'number',
+                                                description: 'Minimum number of rows for the text area.'
+                                            },
+                                            maxRows: {
+                                                type: 'number',
+                                                description: 'Maximum number of rows for the text area.'
+                                            }
+                                        }
+                                    }
+                                ]
                             }
                         }
                     }
@@ -168,24 +213,95 @@
                 type: 'boolean',
                 default: false,
                 description: 'Apply underline style.'
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onExpand: {
-                type: 'array',
-                description: 'Trigger action when ellipse expand is clicked.'
-            },
-            onCopy: {
-                type: 'array',
-                description: 'Trigger action when copy text is clicked.'
             },
-            onChange: {
-                type: 'array',
-                description: 'Trigger action when paragraph is changed.'
+            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/typography#design-token'
+                },
+                properties: {
+                    titleMarginBottom: {
+                        type: 'string',
+                        default: '0.5em',
+                        description: 'Margin bottom for title elements.'
+                    },
+                    titleMarginTop: {
+                        type: 'string',
+                        default: '1.2em',
+                        description: 'Margin top for title elements.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Default text color.'
+                    },
+                    colorTextSecondary: {
+                        type: 'string',
+                        description: 'Text color for secondary type.'
+                    },
+                    colorSuccess: {
+                        type: 'string',
+                        description: 'Text color for success type.'
+                    },
+                    colorWarning: {
+                        type: 'string',
+                        description: 'Text color for warning type.'
+                    },
+                    colorError: {
+                        type: 'string',
+                        description: 'Text color for danger type.'
+                    },
+                    colorLink: {
+                        type: 'string',
+                        description: 'Color for links within typography.'
+                    },
+                    colorLinkHover: {
+                        type: 'string',
+                        description: 'Color for links on hover.'
+                    },
+                    colorLinkActive: {
+                        type: 'string',
+                        description: 'Color for links when active.'
+                    },
+                    colorTextDescription: {
+                        type: 'string',
+                        description: 'Color for description text.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Color for disabled text.'
+                    },
+                    fontFamily: {
+                        type: 'string',
+                        description: 'Font family for typography text.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Base font size.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Large font size.'
+                    },
+                    fontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Small font size.'
+                    },
+                    fontWeightStrong: {
+                        type: 'number',
+                        default: 600,
+                        description: 'Font weight for strong text.'
+                    },
+                    lineHeight: {
+                        type: 'number',
+                        default: 1.5714,
+                        description: 'Base line height.'
+                    }
+                }
             }
         }
     }