@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/Selector/Selector.js

@@ -13,19 +13,21 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState } from 'react';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { get, type } from '@lowdefy/helpers';
 import { Select } from 'antd';
 import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
 import getValueIndex from '../../getValueIndex.js';
 import getUniqueValues from '../../getUniqueValues.js';
 const Option = Select.Option;
-const Selector = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
+const Selector = ({ blockId, classNames = {}, components: { Icon, Link }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     const [fetchState, setFetch] = useState(false);
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
     const uniqueValueOptions = getUniqueValues(properties.options || []);
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: {
             Icon,
             Link
@@ -38,22 +40,22 @@ const Selector = ({ blockId, components: { Icon, Link }, events, loading, method
         },
         validation: validation,
         required: required,
+        styles: styles,
         content: {
             content: ()=>/*#__PURE__*/ React.createElement("div", {
-                    className: methods.makeCssClass({
+                    style: {
                         width: '100%'
-                    })
+                    }
                 }, /*#__PURE__*/ React.createElement("div", {
                     id: `${blockId}_${elementId}_popup`
                 }), /*#__PURE__*/ React.createElement(Select, {
                     id: `${blockId}_input`,
-                    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
+                    },
                     mode: "single",
                     autoFocus: properties.autoFocus,
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
@@ -64,13 +66,25 @@ const Selector = ({ blockId, components: { Icon, Link }, events, loading, method
                     status: validation.status,
                     suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_suffixIcon`,
+                        classNames: {
+                            element: classNames.suffixIcon
+                        },
                         events: events,
-                        properties: properties.suffixIcon
+                        properties: properties.suffixIcon,
+                        styles: {
+                            element: styles.suffixIcon
+                        }
                     }),
                     clearIcon: properties.clearIcon && /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_clearIcon`,
+                        classNames: {
+                            element: classNames.clearIcon
+                        },
                         events: events,
-                        properties: properties.clearIcon
+                        properties: properties.clearIcon,
+                        styles: {
+                            element: styles.clearIcon
+                        }
                     }),
                     showArrow: properties.showArrow,
                     allowClear: properties.allowClear !== false,
@@ -119,7 +133,8 @@ const Selector = ({ blockId, components: { Icon, Link }, events, loading, method
                     },
                     value: getValueIndex(value, uniqueValueOptions)
                 }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Option, {
-                        className: methods.makeCssClass(properties.optionsStyle),
+                        style: styles.options,
+                        className: classNames.options,
                         id: `${blockId}_${i}`,
                         key: i,
                         value: `${i}`
@@ -127,10 +142,11 @@ const Selector = ({ blockId, components: { Icon, Link }, events, loading, method
                         html: `${opt}`,
                         methods
                     })) : /*#__PURE__*/ React.createElement(Option, {
-                        className: methods.makeCssClass([
-                            properties.optionsStyle,
-                            opt.style
-                        ]),
+                        style: {
+                            ...styles.options,
+                            ...opt.style
+                        },
+                        className: classNames.options,
                         disabled: opt.disabled,
                         filterstring: opt.filterString,
                         id: `${blockId}_${i}`,
@@ -146,15 +162,4 @@ const Selector = ({ blockId, components: { Icon, Link }, events, loading, method
         }
     });
 };
-Selector.defaultProps = blockDefaultProps;
-Selector.meta = {
-    valueType: 'any',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/Selector/style.less'
-    ]
-};
-export default Selector;
+export default withTheme('Select', withBlockDefaults(Selector));

package/dist/blocks/Selector/meta.js

@@ -0,0 +1,379 @@
+/*
+  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, variant, bordered, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons,
+        'AiOutlineCloseCircle',
+        'AiOutlineDown'
+    ],
+    valueType: 'any',
+    cssKeys: {
+        element: 'The Selector element.',
+        clearIcon: 'The clear icon in the Selector.',
+        label: 'The Selector label.',
+        extra: 'The Selector extra content.',
+        feedback: 'The Selector validation feedback.',
+        options: 'The Selector options.',
+        suffixIcon: 'The suffix icon in the Selector.'
+    },
+    events: {
+        onBlur: 'Trigger action event occurs when selector loses focus.',
+        onChange: {
+            description: 'Trigger action when selection is changed.',
+            event: {
+                value: 'The selected value.'
+            }
+        },
+        onFocus: 'Trigger action when selector gets focus.',
+        onClear: 'Trigger action when selector is cleared.',
+        onSearch: {
+            description: 'Trigger actions when input is changed.',
+            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: {
+                ...bordered,
+                description: 'Whether or not the selector has a border style. Deprecated, use variant instead.'
+            },
+            clearIcon: {
+                ...icon,
+                default: 'AiOutlineCloseCircle',
+                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 at far right position of the selector, shown when user is given option to clear input."
+            },
+            label,
+            disabled,
+            options: {
+                default: [],
+                oneOf: [
+                    {
+                        type: 'array',
+                        description: 'Options can either be an array of primitive values, on an array of label, value pairs - supports html.',
+                        items: {
+                            type: 'string'
+                        }
+                    },
+                    {
+                        type: 'array',
+                        description: 'Options can either be an array of primitive values, on an array of label, value pairs.',
+                        items: {
+                            type: 'number'
+                        }
+                    },
+                    {
+                        type: 'array',
+                        description: 'Options can either be an array of primitive values, on an array of label, value pairs.',
+                        items: {
+                            type: 'boolean'
+                        }
+                    },
+                    {
+                        type: 'array',
+                        description: 'Options can either be an array of primitive values, on an array of label, value pairs.',
+                        items: {
+                            type: 'object',
+                            required: [
+                                'value'
+                            ],
+                            properties: {
+                                label: {
+                                    type: 'string',
+                                    description: 'Value label shown to user - supports html.'
+                                },
+                                value: {
+                                    description: 'Value selected. Can be of any type.',
+                                    oneOf: [
+                                        {
+                                            type: 'string'
+                                        },
+                                        {
+                                            type: 'number'
+                                        },
+                                        {
+                                            type: 'boolean'
+                                        },
+                                        {
+                                            type: 'object'
+                                        },
+                                        {
+                                            type: 'array'
+                                        }
+                                    ],
+                                    docs: {
+                                        displayType: 'yaml'
+                                    }
+                                },
+                                disabled: {
+                                    type: 'boolean',
+                                    default: false,
+                                    description: 'Disable the option if true.'
+                                },
+                                filterString: {
+                                    type: 'string',
+                                    description: 'String to match against when filtering selector options during. If no filterString is provided the filter method matches against options.label.'
+                                },
+                                style: {
+                                    type: 'object',
+                                    description: 'Css style to applied to option.',
+                                    docs: {
+                                        displayType: 'yaml'
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ]
+            },
+            placeholder: {
+                type: 'string',
+                default: 'Select item',
+                description: 'Placeholder text inside the block before user selects input.'
+            },
+            loadingPlaceholder: {
+                type: 'string',
+                default: 'Loading',
+                description: 'Placeholder text to show in options while the block is loading.'
+            },
+            notFoundContent: {
+                type: 'string',
+                default: 'not Found',
+                description: 'Placeholder text to show when list of options are empty.'
+            },
+            showArrow: {
+                type: 'boolean',
+                default: true,
+                description: 'Show the suffix icon at the drop-down position of the selector.'
+            },
+            showSearch: {
+                type: 'boolean',
+                default: true,
+                description: 'Make the selector options searchable.'
+            },
+            size: sizeSmallDefaultLarge,
+            suffixIcon: {
+                ...icon,
+                default: 'AiOutlineDown',
+                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 at the drop-down position of the selector."
+            },
+            title: inputTitle,
+            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 selector.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for large selectors.'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius for small selectors.'
+                    },
+                    clearBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the clear button.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the selector.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color override for the selector.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color of the selector input.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of the selector.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height for large selectors.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height for small selectors.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the selector input text.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size for large selectors.'
+                    },
+                    fontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for small selectors.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        default: '#4096ff',
+                        description: 'Border color when the selector is hovered.'
+                    },
+                    activeBorderColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Border color when the selector is focused or active.'
+                    },
+                    activeOutlineColor: {
+                        type: 'string',
+                        default: 'rgba(5, 145, 255, 0.1)',
+                        description: 'Outline color when the selector is focused.'
+                    },
+                    multipleItemBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.06)',
+                        description: 'Background color of selected items in multiple mode.'
+                    },
+                    multipleItemBorderColor: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Border color of selected items in multiple mode.'
+                    },
+                    multipleItemHeight: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height of selected item tags in multiple mode.'
+                    },
+                    multipleItemHeightSM: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Height of selected item tags in small multiple mode.'
+                    },
+                    multipleItemHeightLG: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of selected item tags in large multiple mode.'
+                    },
+                    multipleSelectorBgDisabled: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.04)',
+                        description: 'Background of the selector in disabled multiple mode.'
+                    },
+                    multipleItemColorDisabled: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.25)',
+                        description: 'Text color of disabled items in multiple mode.'
+                    },
+                    multipleItemBorderColorDisabled: {
+                        type: 'string',
+                        default: 'transparent',
+                        description: 'Border color of disabled items in multiple mode.'
+                    },
+                    optionActiveBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.04)',
+                        description: 'Background color of an option when hovered or active.'
+                    },
+                    optionFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of option text in the dropdown.'
+                    },
+                    optionHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of each option in the dropdown.'
+                    },
+                    optionLineHeight: {
+                        type: 'number',
+                        description: 'Line height of option text in the dropdown.'
+                    },
+                    optionPadding: {
+                        type: [
+                            'string',
+                            'number'
+                        ],
+                        default: '5px 12px',
+                        description: 'Padding inside each option in the dropdown.'
+                    },
+                    optionSelectedBg: {
+                        type: 'string',
+                        default: '#e6f4ff',
+                        description: 'Background color of the selected option in the dropdown.'
+                    },
+                    optionSelectedColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Text color of the selected option in the dropdown.'
+                    },
+                    optionSelectedFontWeight: {
+                        type: 'number',
+                        default: 600,
+                        description: 'Font weight of the selected option in the dropdown.'
+                    },
+                    selectorBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the selector input area.'
+                    },
+                    showArrowPaddingInlineEnd: {
+                        type: 'number',
+                        default: 18,
+                        description: 'Padding at the inline end when the arrow is shown.'
+                    },
+                    singleItemHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height of the selector input in large single mode.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1050,
+                        description: 'Z-index of the dropdown popup.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Sider/Sider.js

@@ -13,9 +13,9 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState, useEffect } from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import { get } from '@lowdefy/helpers';
 import { Layout } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 const Sider = Layout.Sider;
 const triggerSetOpen = async ({ state, setOpen, methods, rename })=>{
     if (!state) {
@@ -34,7 +34,7 @@ const triggerSetOpen = async ({ state, setOpen, methods, rename })=>{
     }
     setOpen(state);
 };
-const SiderBlock = ({ blockId, properties, content, methods, rename })=>{
+const SiderBlock = ({ blockId, classNames = {}, properties, content, methods, rename, styles = {} })=>{
     const [openState, setOpen] = useState(!properties.initialCollapsed);
     useEffect(()=>{
         methods.registerMethod(get(rename, 'methods.toggleOpen', {
@@ -56,30 +56,21 @@ const SiderBlock = ({ blockId, properties, content, methods, rename })=>{
     });
     return /*#__PURE__*/ React.createElement(Sider, {
         id: blockId,
-        className: `${methods.makeCssClass([
-            {
-                overflow: 'auto'
-            },
-            properties.style
-        ])} hide-on-print`,
+        className: classNames.element ? `${classNames.element} hide-on-print` : 'hide-on-print',
         breakpoint: properties.breakpoint,
         collapsed: !openState,
         collapsedWidth: properties.collapsedWidth,
         collapsible: properties.collapsible,
         reverseArrow: properties.reverseArrow,
-        theme: properties.theme,
+        style: {
+            overflow: 'auto',
+            background: 'var(--ant-color-bg-container)',
+            ...styles.element
+        },
         width: properties.width,
         onBreakpoint: ()=>methods.triggerEvent({
                 name: 'onBreakpoint'
             })
     }, content.content && content.content());
 };
-SiderBlock.defaultProps = blockDefaultProps;
-SiderBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Sider/style.less'
-    ]
-};
-export default SiderBlock;
+export default withBlockDefaults(SiderBlock);

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

@@ -13,7 +13,20 @@
   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 in the sider panel.'
+    },
+    cssKeys: {
+        element: 'The Sider element.'
+    },
+    events: {
+        onClose: 'Trigger actions when sider is closed.',
+        onOpen: 'Trigger actions when sider is opened.',
+        onBreakpoint: 'Trigger actions on breakpoint change.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -49,22 +62,6 @@
                 default: false,
                 description: 'Direction of arrow, for a sider that expands from the right'
             },
-            theme: {
-                type: 'string',
-                enum: [
-                    'light',
-                    'dark'
-                ],
-                default: 'dark',
-                description: 'Color theme of the sidebar'
-            },
-            style: {
-                type: 'object',
-                description: 'Css style object to apply to sider.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             width: {
                 type: [
                     'string',
@@ -74,24 +71,13 @@
                 docs: {
                     displayType: 'string'
                 }
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onClose: {
-                type: 'array',
-                description: 'Trigger actions when sider is closed.'
             },
-            onOpen: {
-                type: 'array',
-                description: 'Trigger actions when sider is opened.'
-            },
-            onBreakpoint: {
-                type: 'array',
-                description: 'Trigger actions on breakpoint change.'
+            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'
+                }
             }
         }
     }