@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/Switch/meta.js

@@ -0,0 +1,178 @@
+/*
+  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 icon from '../../schemas/icon.js';
+import { disabled, inputTitle, autoFocus } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons,
+        'AiOutlineCheck',
+        'AiOutlineClose'
+    ],
+    valueType: 'boolean',
+    cssKeys: {
+        element: 'The Switch element.',
+        checkedIcon: 'The checked icon in the Switch.',
+        label: 'The Switch label.',
+        extra: 'The Switch extra content.',
+        feedback: 'The Switch validation feedback.',
+        uncheckedIcon: 'The unchecked icon in the Switch.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger action when switch is changed.',
+            event: {
+                value: 'The switch value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            autoFocus,
+            checkedIcon: {
+                ...icon,
+                default: 'AiOutlineCheck',
+                description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to customize icon to shown when switch is checked (true)."
+            },
+            checkedText: {
+                type: 'string',
+                description: 'Text to shown when switch is checked (true).'
+            },
+            color: {
+                type: 'string',
+                description: 'Switch checked color.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            disabled,
+            label,
+            size: {
+                type: 'string',
+                enum: [
+                    'small',
+                    'default'
+                ],
+                default: 'default',
+                description: 'Size of the block.'
+            },
+            title: inputTitle,
+            uncheckedIcon: {
+                ...icon,
+                default: 'AiOutlineClose',
+                description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to customize icon to shown when switch is unchecked (false)."
+            },
+            uncheckedText: {
+                type: 'string',
+                description: 'Text to shown when switch is not checked (false).'
+            },
+            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/switch#design-token'
+                },
+                properties: {
+                    trackHeight: {
+                        type: 'number',
+                        default: 22,
+                        description: 'Height of the switch track.'
+                    },
+                    trackHeightSM: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Height of the switch track for small size.'
+                    },
+                    trackMinWidth: {
+                        type: 'number',
+                        default: 44,
+                        description: 'Minimum width of the switch track.'
+                    },
+                    trackMinWidthSM: {
+                        type: 'number',
+                        default: 28,
+                        description: 'Minimum width of the switch track for small size.'
+                    },
+                    trackPadding: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Internal padding of the switch track.'
+                    },
+                    handleBg: {
+                        type: 'string',
+                        default: '#fff',
+                        description: 'Background color of the switch handle.'
+                    },
+                    handleSize: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Diameter of the switch handle.'
+                    },
+                    handleSizeSM: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Diameter of the switch handle for small size.'
+                    },
+                    handleShadow: {
+                        type: 'string',
+                        default: '0 2px 4px 0 rgba(0,35,11,0.2)',
+                        description: 'Box shadow of the switch handle.'
+                    },
+                    innerMinMargin: {
+                        type: 'number',
+                        default: 9,
+                        description: 'Minimum margin for inner content (text/icon) of the switch.'
+                    },
+                    innerMaxMargin: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Maximum margin for inner content (text/icon) of the switch.'
+                    },
+                    innerMinMarginSM: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Minimum margin for inner content for small size.'
+                    },
+                    innerMaxMarginSM: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Maximum margin for inner content for small size.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color when the switch is checked.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Primary color on hover when the switch is checked.'
+                    },
+                    colorTextQuaternary: {
+                        type: 'string',
+                        description: 'Background color when the switch is unchecked.'
+                    },
+                    colorTextTertiary: {
+                        type: 'string',
+                        description: 'Background color on hover when the switch is unchecked.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Tabs/Tabs.js

@@ -12,9 +12,11 @@
   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, { useState, useEffect } from 'react';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+*/ import React, { useState, useEffect, useCallback } from 'react';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { Tabs } from 'antd';
+import withTheme from '../withTheme.js';
+import useItemShortcuts from '../useItemShortcuts.js';
 const getTabs = ({ content, properties })=>{
     let tabs = properties.tabs;
     if (!tabs) {
@@ -26,7 +28,7 @@ const getTabs = ({ content, properties })=>{
     // remove extraAreaKey key area from tabs
     return tabs.filter((tab)=>tab.key !== properties.extraAreaKey);
 };
-const TabsBlock = ({ blockId, components: { Icon }, events, content, methods, properties })=>{
+function TabsBlock({ blockId, classNames = {}, components: { Icon, ShortcutBadge }, events, content, methods, properties, styles = {} }) {
     const tabs = getTabs({
         content,
         properties
@@ -49,6 +51,26 @@ const TabsBlock = ({ blockId, components: { Icon }, events, content, methods, pr
             }
         });
     });
+    const shortcutItems = tabs.filter((tab)=>tab.shortcut).map((tab)=>({
+            key: tab.key,
+            shortcut: tab.shortcut,
+            disabled: tab.disabled
+        }));
+    const onShortcutMatch = useCallback((activeKey)=>{
+        setKey(activeKey);
+        methods.triggerEvent({
+            name: 'onChange',
+            event: {
+                activeKey
+            }
+        });
+    }, [
+        methods
+    ]);
+    useItemShortcuts({
+        items: shortcutItems,
+        onMatch: onShortcutMatch
+    });
     return /*#__PURE__*/ React.createElement(Tabs, {
         activeKey: key,
         animated: properties.animated !== undefined ? properties.animated : true,
@@ -63,8 +85,7 @@ const TabsBlock = ({ blockId, components: { Icon }, events, content, methods, pr
             });
         },
         size: properties.size ?? 'default',
-        tabBarStyle: methods.makeCssClass(properties.tabBarStyle, true),
-        tabPosition: properties.tabPosition ?? 'top',
+        tabPlacement: properties.tabPlacement ?? 'top',
         type: properties.tabType ?? 'line',
         onTabScroll: ({ direction })=>methods.triggerEvent({
                 name: 'onTabScroll',
@@ -80,31 +101,41 @@ const TabsBlock = ({ blockId, components: { Icon }, events, content, methods, pr
                 }
             });
         },
+        className: classNames.element,
+        classNames: {
+            tabBar: classNames.tabBar,
+            tabPane: classNames.tabPane,
+            inkBar: classNames.inkBar
+        },
+        style: styles.element,
+        styles: {
+            tabBar: styles.tabBar
+        },
         items: tabs.map((tab)=>({
                 id: `${blockId}_${tab.key}`,
                 key: tab.key,
                 disabled: tab.disabled,
                 label: /*#__PURE__*/ React.createElement("span", {
-                    className: methods.makeCssClass(tab.titleStyle)
+                    style: tab.titleStyle
                 }, tab.icon && /*#__PURE__*/ React.createElement(Icon, {
                     blockId: `${blockId}_icon`,
+                    classNames: {
+                        element: classNames.icon
+                    },
                     events: events,
-                    properties: tab.icon
+                    properties: tab.icon,
+                    styles: {
+                        element: styles.icon
+                    }
                 }), tab.title ? renderHtml({
                     html: tab.title,
                     methods
-                }) : tab.key),
+                }) : tab.key, /*#__PURE__*/ React.createElement(ShortcutBadge, {
+                    shortcut: tab.shortcut
+                })),
                 children: content[tab.key] && content[tab.key]()
             })),
         ...additionalProps
     });
-};
-TabsBlock.defaultProps = blockDefaultProps;
-TabsBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Tabs/style.less'
-    ]
-};
-export default TabsBlock;
+}
+export default withTheme('Tabs', withBlockDefaults(TabsBlock));

package/dist/blocks/Tabs/meta.js

@@ -0,0 +1,258 @@
+/*
+  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: false,
+    cssKeys: {
+        element: 'The Tabs element.',
+        icon: 'The icon in the Tabs.',
+        tabBar: 'The Tabs tab bar.',
+        tabPane: 'The Tabs tab pane.',
+        inkBar: 'The Tabs ink bar.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger action on tab change.',
+            event: {
+                activeKey: 'The key of the active tab.'
+            }
+        },
+        onTabScroll: {
+            description: 'Trigger action on tab scroll.',
+            event: {
+                direction: 'The scroll direction.'
+            }
+        },
+        onTabClick: {
+            description: 'Trigger action on tab click.',
+            event: {
+                key: 'The key of the clicked tab.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            animated: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether to change tabs with animation. Only works while tabPlacement is top or bottom.'
+            },
+            defaultActiveKey: {
+                type: 'string',
+                description: "Initial active TabPane's key, if activeKey is not set."
+            },
+            size: {
+                type: 'string',
+                default: 'default',
+                enum: [
+                    'default',
+                    'small',
+                    'large'
+                ],
+                description: 'Size of the tabs.'
+            },
+            tabPlacement: {
+                type: 'string',
+                default: 'top',
+                enum: [
+                    'top',
+                    'end',
+                    'bottom',
+                    'start'
+                ],
+                description: 'Position of the tabs.'
+            },
+            tabType: {
+                type: 'string',
+                default: 'line',
+                enum: [
+                    'line',
+                    'card'
+                ],
+                description: 'Type of tabs.'
+            },
+            tabs: {
+                type: 'array',
+                items: {
+                    type: 'object',
+                    required: [
+                        'key'
+                    ],
+                    properties: {
+                        title: {
+                            type: 'string',
+                            description: 'Title of the tab - supports html.'
+                        },
+                        key: {
+                            type: 'string',
+                            description: 'Area key of the tab.'
+                        },
+                        disabled: {
+                            type: 'boolean',
+                            default: false,
+                            description: 'Disable the tab if true.'
+                        },
+                        icon: {
+                            type: [
+                                'string',
+                                'object'
+                            ],
+                            description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to customize icon to show in tab title.",
+                            docs: {
+                                displayType: 'icon'
+                            }
+                        },
+                        shortcut: {
+                            type: 'string',
+                            description: 'Keyboard shortcut to switch to this tab. Use "mod" for Cmd/Ctrl.'
+                        }
+                    }
+                }
+            },
+            extraAreaKey: {
+                type: 'string',
+                description: 'Area key for the extra area blocks.'
+            },
+            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/tabs#design-token'
+                },
+                properties: {
+                    cardBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.02)',
+                        description: 'Background color of card-type tab.'
+                    },
+                    cardGutter: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Gap between card-type tabs.'
+                    },
+                    cardHeight: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height of card-type tab.'
+                    },
+                    cardPadding: {
+                        type: 'string',
+                        default: '8px 16px',
+                        description: 'Padding of card-type tab.'
+                    },
+                    cardPaddingLG: {
+                        type: 'string',
+                        default: '11px 16px',
+                        description: 'Padding of large card-type tab.'
+                    },
+                    cardPaddingSM: {
+                        type: 'string',
+                        default: '4px 8px',
+                        description: 'Padding of small card-type tab.'
+                    },
+                    horizontalItemGutter: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Gap between horizontal tabs.'
+                    },
+                    horizontalItemMargin: {
+                        type: 'string',
+                        description: 'Horizontal margin of tab item.'
+                    },
+                    horizontalItemPadding: {
+                        type: 'string',
+                        default: '12px 0',
+                        description: 'Padding of horizontal tab item.'
+                    },
+                    horizontalItemPaddingLG: {
+                        type: 'string',
+                        default: '16px 0',
+                        description: 'Padding of large horizontal tab item.'
+                    },
+                    horizontalItemPaddingSM: {
+                        type: 'string',
+                        default: '8px 0',
+                        description: 'Padding of small horizontal tab item.'
+                    },
+                    horizontalMargin: {
+                        type: 'string',
+                        default: '0 0 16px 0',
+                        description: 'Margin of horizontal tab bar.'
+                    },
+                    inkBarColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Color of the active tab indicator bar.'
+                    },
+                    itemActiveColor: {
+                        type: 'string',
+                        default: '#0958d9',
+                        description: 'Text color of active (mousedown) tab.'
+                    },
+                    itemColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Text color of tab.'
+                    },
+                    itemHoverColor: {
+                        type: 'string',
+                        default: '#4096ff',
+                        description: 'Text color of hovered tab.'
+                    },
+                    itemSelectedColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Text color of selected tab.'
+                    },
+                    titleFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of tab title.'
+                    },
+                    titleFontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size of large tab title.'
+                    },
+                    titleFontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of small tab title.'
+                    },
+                    verticalItemMargin: {
+                        type: 'string',
+                        default: '16px 0 0 0',
+                        description: 'Margin of vertical tab item.'
+                    },
+                    verticalItemPadding: {
+                        type: 'string',
+                        default: '8px 24px',
+                        description: 'Padding of vertical tab item.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1050,
+                        description: 'Z-index of tab dropdown popup.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Tag/Tag.js

@@ -14,15 +14,22 @@
   limitations under the License.
 */ import React from 'react';
 import { Tag } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
-const TagBlock = ({ blockId, components: { Icon }, events, methods, onClick, onClose, properties })=>{
+import withTheme from '../withTheme.js';
+const TagBlock = ({ blockId, classNames = {}, components: { Icon, ShortcutBadge }, events, methods, onClick, onClose, 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
+            }
         });
     }
     if (onClick || events.onClick) {
@@ -39,19 +46,14 @@ const TagBlock = ({ blockId, components: { Icon }, events, methods, onClick, onC
         id: blockId,
         closable: properties.closable,
         color: properties.color,
-        className: methods.makeCssClass(properties.style),
+        className: classNames.element,
+        style: styles.element,
         ...additionalProps
-    }, type.isString(properties.title) ? renderHtml({
+    }, /*#__PURE__*/ React.createElement(React.Fragment, null, type.isString(properties.title) ? renderHtml({
         html: properties.title,
         methods
-    }) : properties.title ?? blockId);
+    }) : properties.title ?? blockId, /*#__PURE__*/ React.createElement(ShortcutBadge, {
+        shortcut: events.onClick?.shortcut
+    })));
 };
-TagBlock.defaultProps = blockDefaultProps;
-TagBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Tag/style.less'
-    ]
-};
-export default TagBlock;
+export default withTheme('Tag', withBlockDefaults(TagBlock));

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

@@ -13,6 +13,17 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Tag element.',
+        icon: 'The icon in the Tag.'
+    },
+    events: {
+        onClick: 'Called when Tag is clicked. Renders a shortcut badge when a shortcut is configured.',
+        onClose: 'Called when Tag close icon is clicked.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -42,20 +53,31 @@
                 docs: {
                     displayType: 'icon'
                 }
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onClick: {
-                type: 'array',
-                description: 'Called when Tag is clicked.'
             },
-            onClose: {
-                type: 'array',
-                description: 'Called when Tag close icon is clicked.'
+            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/tag#design-token'
+                },
+                properties: {
+                    defaultBg: {
+                        type: 'string',
+                        default: '#fafafa',
+                        description: 'Default background color of the tag.'
+                    },
+                    defaultColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Default text color of the tag.'
+                    },
+                    solidTextColor: {
+                        type: 'string',
+                        default: '#fff',
+                        description: 'Text color for solid (filled) tags, determined by background brightness.'
+                    }
+                }
             }
         }
     }