@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/MonthSelector/meta.js

@@ -0,0 +1,260 @@
+/*
+  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 disabledDates from '../../schemas/disabledDates.js';
+import { disabled, placeholder, autoFocus, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons,
+        'AiOutlineCalendar'
+    ],
+    valueType: 'date',
+    cssKeys: {
+        element: 'The MonthSelector element.',
+        label: 'The MonthSelector label.',
+        extra: 'The MonthSelector extra content.',
+        feedback: 'The MonthSelector validation feedback.',
+        popup: 'The MonthSelector popup.',
+        suffixIcon: 'The suffix icon in the MonthSelector.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when selection is changed.',
+            event: {
+                value: 'The selected month value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            allowClear: {
+                ...allowClear,
+                default: true
+            },
+            autoFocus,
+            bordered: {
+                type: 'boolean',
+                default: true,
+                description: "Deprecated - use variant: 'borderless'. Whether or not the input has a border style."
+            },
+            disabled,
+            variant: {
+                type: 'string',
+                enum: [
+                    'outlined',
+                    'filled',
+                    'borderless'
+                ],
+                default: 'outlined',
+                description: "Variant style of the input. Use 'borderless' instead of bordered: false."
+            },
+            disabledDates,
+            format: {
+                type: 'string',
+                default: 'YYYY-MM',
+                description: 'Format in which to format the date value, eg. "MMMM YYYY" will format a date value of 1999-12-31 as "December 1999". The format has to conform to dayjs formats.'
+            },
+            placeholder: {
+                ...placeholder,
+                default: 'Select Month'
+            },
+            showToday: {
+                type: 'boolean',
+                default: true,
+                description: 'Shows a button to easily select the current date if true.'
+            },
+            size: sizeSmallDefaultLarge,
+            suffixIcon: {
+                ...icon,
+                default: 'AiOutlineCalendar',
+                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 on right-hand side of the date picker."
+            },
+            label,
+            title: {
+                type: 'string',
+                description: 'Month selector label title - supports html.'
+            },
+            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/date-picker#design-token'
+                },
+                properties: {
+                    activeBorderColor: {
+                        type: 'string',
+                        description: 'Border color when the picker is active/focused.'
+                    },
+                    activeShadow: {
+                        type: 'string',
+                        description: 'Shadow effect when the picker is active/focused.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        description: 'Border color when hovering over the picker.'
+                    },
+                    cellHeight: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height of a calendar cell.'
+                    },
+                    cellWidth: {
+                        type: 'number',
+                        default: 36,
+                        description: 'Width of a calendar cell.'
+                    },
+                    cellHoverBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.04)',
+                        description: 'Background color of a calendar cell on hover.'
+                    },
+                    cellActiveWithRangeBg: {
+                        type: 'string',
+                        default: '#e6f4ff',
+                        description: 'Background color of active cell within a range selection.'
+                    },
+                    cellHoverWithRangeBg: {
+                        type: 'string',
+                        description: 'Background color of cells within range on hover.'
+                    },
+                    cellBgDisabled: {
+                        type: 'string',
+                        description: 'Background color of disabled cells.'
+                    },
+                    cellRangeBorderColor: {
+                        type: 'string',
+                        description: 'Border color of range selection cells.'
+                    },
+                    addonBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.02)',
+                        description: 'Background color of the footer addon area.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1050,
+                        description: 'Z-index of the picker popup layer.'
+                    },
+                    paddingBlock: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Vertical padding for the default size picker.'
+                    },
+                    paddingBlockSM: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Vertical padding for the small size picker.'
+                    },
+                    paddingBlockLG: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Vertical padding for the large size picker.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding for the default size picker.'
+                    },
+                    paddingInlineSM: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Horizontal padding for the small size picker.'
+                    },
+                    paddingInlineLG: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding for the large size picker.'
+                    },
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius of the picker input.'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius for the small picker.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for the large picker and popup panel.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of the picker input.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height of the small picker input.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height of the large picker input.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the picker input.'
+                    },
+                    fontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for the small picker.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size for the large picker.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width of the picker input.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color used for selected month and active states.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color of the picker input.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color of the picker input and calendar cells.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the picker input.'
+                    },
+                    colorTextPlaceholder: {
+                        type: 'string',
+                        description: 'Color of the placeholder text.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/MultipleSelector/MultipleSelector.js

@@ -13,12 +13,13 @@
   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 getUniqueValues from '../../getUniqueValues.js';
 import getValueIndex from '../../getValueIndex.js';
 import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
 import Tag from '../Tag/Tag.js';
 const Option = Select.Option;
 const tagRender = (props, option, methods, components)=>{
@@ -27,23 +28,26 @@ const tagRender = (props, option, methods, components)=>{
         components: components,
         methods: methods,
         onClose: onClose,
-        properties: {
-            title: label ?? '',
-            ...option?.tag ?? {},
-            closable,
-            style: {
+        styles: {
+            element: {
                 marginRight: 3,
                 ...option?.tag?.style ?? {}
             }
+        },
+        properties: {
+            title: label ?? '',
+            ...option?.tag ?? {},
+            closable
         }
     });
 };
-const MultipleSelector = ({ blockId, components: { Icon }, events, loading, methods, properties, required, validation, value })=>{
+const MultipleSelector = ({ blockId, classNames = {}, components: { Icon, ShortcutBadge }, 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
         },
@@ -53,12 +57,13 @@ const MultipleSelector = ({ blockId, components: { Icon }, events, loading, meth
             ...properties.label
         },
         required: required,
+        styles: styles,
         validation: validation,
         content: {
             content: ()=>/*#__PURE__*/ React.createElement("div", {
-                    className: methods.makeCssClass({
+                    style: {
                         width: '100%'
-                    })
+                    }
                 }, /*#__PURE__*/ React.createElement("div", {
                     id: `${blockId}_${elementId}_popup`
                 }), /*#__PURE__*/ React.createElement(Select, {
@@ -66,18 +71,24 @@ const MultipleSelector = ({ blockId, components: { Icon }, events, loading, meth
                     allowClear: properties.allowClear !== false,
                     autoClearSearchValue: properties.autoClearSearchValue,
                     autoFocus: properties.autoFocus,
-                    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
+                    },
                     disabled: properties.disabled || loading,
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
                     mode: "multiple",
                     tagRender: properties.renderTags && ((props)=>tagRender(props, uniqueValueOptions[props.value], methods, {
-                            Icon
+                            Icon,
+                            ShortcutBadge
                         })),
                     maxTagCount: properties.maxTagCount,
                     notFoundContent: fetchState ? properties.loadingPlaceholder || 'Loading' : properties.notFoundContent || 'Not found',
@@ -92,18 +103,36 @@ const MultipleSelector = ({ blockId, components: { Icon }, events, loading, meth
                     value: loading ? [] : getValueIndex(value, uniqueValueOptions, true),
                     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
+                        }
                     }),
                     menuItemSelectedIcon: properties.selectedIcon && /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_selectedIcon`,
+                        classNames: {
+                            element: classNames.selectedIcon
+                        },
                         events: events,
-                        properties: properties.selectedIcon
+                        properties: properties.selectedIcon,
+                        styles: {
+                            element: styles.selectedIcon
+                        }
                     }),
                     filterOption: (input, option)=>(option.filterstring || option.children.props.html || '').toLowerCase().indexOf(input.toLowerCase()) >= 0,
                     onChange: (newVal)=>{
@@ -144,7 +173,8 @@ const MultipleSelector = ({ blockId, components: { Icon }, events, loading, meth
                         }
                     }
                 }, 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}`
@@ -152,10 +182,11 @@ const MultipleSelector = ({ blockId, components: { Icon }, events, loading, meth
                         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}`,
@@ -171,15 +202,4 @@ const MultipleSelector = ({ blockId, components: { Icon }, events, loading, meth
         }
     });
 };
-MultipleSelector.defaultProps = blockDefaultProps;
-MultipleSelector.meta = {
-    valueType: 'array',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/MultipleSelector/style.less'
-    ]
-};
-export default MultipleSelector;
+export default withTheme('Select', withBlockDefaults(MultipleSelector));