@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/ButtonSelector/ButtonSelector.js

@@ -13,16 +13,57 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Radio } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { ConfigProvider, Radio } from 'antd';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import Label from '../Label/Label.js';
 import getValueIndex from '../../getValueIndex.js';
 import getUniqueValues from '../../getUniqueValues.js';
-const ButtonSelector = ({ blockId, components, events, loading, properties, required, validation, value, methods })=>{
+import withTheme from '../withTheme.js';
+const ButtonSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
     const uniqueValueOptions = getUniqueValues(properties.options || []);
+    const radioGroup = /*#__PURE__*/ React.createElement(Radio.Group, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        size: properties.size,
+        buttonStyle: properties.buttonStyle ? properties.buttonStyle : 'solid',
+        style: styles.element,
+        onChange: (event)=>{
+            const value = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
+            methods.setValue(value);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value
+                }
+            });
+        },
+        value: type.isNone(value) ? undefined : getValueIndex(value, properties.options || [])
+    }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Radio.Button, {
+            id: `${blockId}_${i}`,
+            key: i,
+            value: `${i}`,
+            disabled: properties.disabled || loading
+        }, renderHtml({
+            html: `${opt}`,
+            methods
+        })) : /*#__PURE__*/ React.createElement(Radio.Button, {
+            id: `${blockId}_${i}`,
+            key: i,
+            value: `${i}`,
+            disabled: opt.disabled || properties.disabled || loading,
+            style: opt.style
+        }, type.isNone(opt.label) ? renderHtml({
+            html: `${opt.value}`,
+            methods
+        }) : renderHtml({
+            html: opt.label,
+            methods
+        }))));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: components,
         events: events,
         properties: {
@@ -32,64 +73,18 @@ const ButtonSelector = ({ blockId, components, events, loading, properties, requ
         },
         validation: validation,
         required: required,
+        styles: styles,
         content: {
-            content: ()=>/*#__PURE__*/ React.createElement(Radio.Group, {
-                    id: `${blockId}_input`,
-                    className: methods.makeCssClass([
-                        properties.color && {
-                            '& > label.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)': {
-                                backgroundColor: `${properties.color} !important`,
-                                borderColor: `${properties.color} !important`
-                            }
-                        },
-                        properties.inputStyle
-                    ]),
-                    disabled: properties.disabled || loading,
-                    size: properties.size,
-                    buttonStyle: properties.buttonStyle ? properties.buttonStyle : 'solid',
-                    onChange: (event)=>{
-                        const value = type.isPrimitive(uniqueValueOptions[event.target.value]) ? uniqueValueOptions[event.target.value] : uniqueValueOptions[event.target.value].value;
-                        methods.setValue(value);
-                        methods.triggerEvent({
-                            name: 'onChange',
-                            event: {
-                                value
+            content: ()=>properties.color ? /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    theme: {
+                        components: {
+                            Radio: {
+                                colorPrimary: properties.color
                             }
-                        });
-                    },
-                    value: type.isNone(value) ? undefined : getValueIndex(value, properties.options || [])
-                }, uniqueValueOptions.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Radio.Button, {
-                        id: `${blockId}_${i}`,
-                        key: i,
-                        value: `${i}`
-                    }, renderHtml({
-                        html: `${opt}`,
-                        methods
-                    })) : /*#__PURE__*/ React.createElement(Radio.Button, {
-                        id: `${blockId}_${i}`,
-                        key: i,
-                        value: `${i}`,
-                        disabled: opt.disabled,
-                        className: methods.makeCssClass(opt.style)
-                    }, type.isNone(opt.label) ? renderHtml({
-                        html: `${opt.value}`,
-                        methods
-                    }) : renderHtml({
-                        html: opt.label,
-                        methods
-                    }))))
+                        }
+                    }
+                }, radioGroup) : radioGroup
         }
     });
 };
-ButtonSelector.defaultProps = blockDefaultProps;
-ButtonSelector.meta = {
-    valueType: 'any',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/ButtonSelector/style.less'
-    ]
-};
-export default ButtonSelector;
+export default withTheme('Radio', withBlockDefaults(ButtonSelector));

package/dist/blocks/ButtonSelector/meta.js

@@ -0,0 +1,213 @@
+/*
+  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 options from '../../schemas/options.js';
+import { disabled, inputTitle, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'any',
+    cssKeys: {
+        element: 'The ButtonSelector element.',
+        label: 'The ButtonSelector label.',
+        extra: 'The ButtonSelector extra content.',
+        feedback: 'The ButtonSelector validation feedback.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when selection is changed.',
+            event: {
+                value: 'The selected value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            buttonStyle: {
+                type: 'string',
+                enum: [
+                    'solid',
+                    'outline'
+                ],
+                default: 'solid',
+                description: 'Style of the selected option button.'
+            },
+            color: {
+                type: 'string',
+                description: 'Selected button color.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            disabled,
+            options,
+            size: sizeSmallDefaultLarge,
+            label,
+            title: inputTitle,
+            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/radio#design-token'
+                },
+                properties: {
+                    radioSize: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Size of the radio dot element.'
+                    },
+                    dotSize: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Size of the inner dot when checked.'
+                    },
+                    dotColorDisabled: {
+                        type: 'string',
+                        description: 'Color of the inner dot when disabled.'
+                    },
+                    buttonSolidCheckedColor: {
+                        type: 'string',
+                        description: 'Text color of checked button in solid style.'
+                    },
+                    buttonSolidCheckedBg: {
+                        type: 'string',
+                        description: 'Background color of checked button in solid style.'
+                    },
+                    buttonSolidCheckedHoverBg: {
+                        type: 'string',
+                        description: 'Background color of checked button on hover in solid style.'
+                    },
+                    buttonSolidCheckedActiveBg: {
+                        type: 'string',
+                        description: 'Background color of checked button on active in solid style.'
+                    },
+                    buttonBg: {
+                        type: 'string',
+                        description: 'Background color of unchecked radio buttons.'
+                    },
+                    buttonCheckedBg: {
+                        type: 'string',
+                        description: 'Background color of checked button in outline style.'
+                    },
+                    buttonColor: {
+                        type: 'string',
+                        description: 'Text color of radio buttons.'
+                    },
+                    buttonCheckedBgDisabled: {
+                        type: 'string',
+                        description: 'Background color of checked button when disabled.'
+                    },
+                    buttonCheckedColorDisabled: {
+                        type: 'string',
+                        description: 'Text color of checked button when disabled.'
+                    },
+                    buttonPaddingInline: {
+                        type: 'number',
+                        default: 15,
+                        description: 'Horizontal padding inside radio buttons.'
+                    },
+                    wrapperMarginInlineEnd: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Margin at the inline end of each radio wrapper.'
+                    },
+                    radioColor: {
+                        type: 'string',
+                        description: 'Color of the radio dot when checked.'
+                    },
+                    radioBgColor: {
+                        type: 'string',
+                        description: 'Background color of the radio circle when checked.'
+                    },
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius for default-sized radio buttons.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for large radio buttons.'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius for small radio buttons.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of default-sized radio buttons.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height of large radio buttons.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height of small radio buttons.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for default-sized radio buttons.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size for large radio buttons.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width of radio buttons.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color used for checked state border and text.'
+                    },
+                    colorPrimaryHover: {
+                        type: 'string',
+                        description: 'Primary hover color for checked radio buttons.'
+                    },
+                    colorPrimaryActive: {
+                        type: 'string',
+                        description: 'Primary active color for checked radio buttons.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color for the radio button container.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Default text color for radio buttons.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color for radio buttons.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Calendar/Calendar.js

@@ -0,0 +1,153 @@
+/*
+  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 React from 'react';
+import { Badge, Calendar } from 'antd';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
+import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+import disabledDate from '../../disabledDate.js';
+dayjs.extend(utc);
+function buildDateMap(dateCellData) {
+    if (!type.isArray(dateCellData)) return {
+        map: {},
+        earliest: undefined
+    };
+    const map = {};
+    let earliest;
+    dateCellData.forEach((item)=>{
+        if (type.isNone(item?.date)) return;
+        const parsed = dayjs(item.date);
+        if (!parsed.isValid()) return;
+        const key = parsed.format('YYYY-MM-DD');
+        if (!map[key]) map[key] = [];
+        map[key].push(item);
+        if (!earliest || parsed.isBefore(earliest)) earliest = parsed;
+    });
+    return {
+        map,
+        earliest
+    };
+}
+// Pick a default month to open on when `value` is unset: earliest event date
+// from dateCellData, or the earliest specific disabled date, or the min of a
+// disabledDates range. Without this, a calendar whose data lives in a past or
+// future month opens on "today" and shows nothing, confusing the user.
+function pickDefaultValue({ earliestCellData, disabledDates }) {
+    if (earliestCellData) return earliestCellData;
+    if (type.isObject(disabledDates)) {
+        if (type.isArray(disabledDates.dates) && disabledDates.dates.length > 0) {
+            let earliest;
+            disabledDates.dates.forEach((d)=>{
+                const parsed = dayjs(d);
+                if (parsed.isValid() && (!earliest || parsed.isBefore(earliest))) earliest = parsed;
+            });
+            if (earliest) return earliest;
+        }
+        if (!type.isNone(disabledDates.min)) {
+            const parsed = dayjs(disabledDates.min);
+            if (parsed.isValid()) return parsed;
+        }
+    }
+    return undefined;
+}
+const CalendarBlock = ({ blockId, classNames = {}, events, methods, properties, styles = {}, value })=>{
+    const { map: dateMap, earliest: earliestCellData } = buildDateMap(properties.dateCellData);
+    const hasDateData = Object.keys(dateMap).length > 0;
+    const defaultPanel = pickDefaultValue({
+        earliestCellData,
+        disabledDates: properties.disabledDates
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId
+    }, /*#__PURE__*/ React.createElement(Calendar, {
+        className: classNames.element,
+        style: styles.element,
+        fullscreen: properties.fullscreen !== false,
+        mode: properties.mode,
+        disabledDate: disabledDate(properties.disabledDates ?? {}),
+        validRange: type.isArray(properties.validRange) && properties.validRange.length === 2 ? [
+            dayjs(properties.validRange[0]),
+            dayjs(properties.validRange[1])
+        ] : undefined,
+        value: type.isDate(value) ? dayjs(value) : undefined,
+        defaultValue: !type.isDate(value) ? defaultPanel : undefined,
+        onSelect: (date, selectInfo)=>{
+            // Wrap with our dayjs — antd v6's internal dayjs may lack the utc plugin.
+            const d = dayjs(date);
+            const val = d.toDate();
+            const source = selectInfo?.source ?? 'date';
+            // Only fire for date cell clicks — year/month panel navigation emits
+            // onSelect too but shouldn't push a value through the event chain.
+            if (source !== 'date' && source !== 'customize') return;
+            methods.setValue(val);
+            methods.triggerEvent({
+                name: 'onSelect',
+                event: {
+                    value: val,
+                    date: d.format('YYYY-MM-DD'),
+                    source
+                }
+            });
+        },
+        onChange: (date)=>{
+            const d = dayjs(date);
+            const val = d.toDate();
+            methods.setValue(val);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: val,
+                    date: d.format('YYYY-MM-DD')
+                }
+            });
+        },
+        onPanelChange: (date, mode)=>{
+            const d = dayjs(date);
+            methods.triggerEvent({
+                name: 'onPanelChange',
+                event: {
+                    value: d.toDate(),
+                    date: d.format('YYYY-MM-DD'),
+                    mode
+                }
+            });
+        },
+        cellRender: hasDateData ? (current, info)=>{
+            if (info.type !== 'date') return info.originNode;
+            const key = dayjs(current).format('YYYY-MM-DD');
+            const items = dateMap[key];
+            // cellRender output is appended to the default date cell — return
+            // null for days with no events to avoid double-rendering the date.
+            if (!items) return null;
+            return /*#__PURE__*/ React.createElement("ul", {
+                className: "ant-picker-calendar-events",
+                style: {
+                    listStyle: 'none',
+                    padding: 0,
+                    margin: 0
+                }
+            }, items.map((item, i)=>/*#__PURE__*/ React.createElement("li", {
+                    key: i
+                }, /*#__PURE__*/ React.createElement(Badge, {
+                    status: item.status ?? 'default',
+                    color: item.color,
+                    text: item.content
+                }))));
+        } : undefined
+    }));
+};
+export default withTheme('Calendar', withBlockDefaults(CalendarBlock));

package/dist/blocks/Calendar/e2e.js

@@ -0,0 +1,27 @@
+/*
+  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 { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)}`);
+export default createBlockHelper({
+    locator,
+    do: {
+        clickDate: (page, blockId, dayText)=>locator(page, blockId).locator(`.ant-picker-cell-in-view:has-text("${dayText}")`).click()
+    },
+    expect: {
+        visible: (page, blockId)=>expect(locator(page, blockId)).toBeVisible(),
+        selectedDate: (page, blockId)=>expect(locator(page, blockId).locator('.ant-picker-cell-selected .ant-picker-cell-inner')).toBeVisible()
+    }
+});

package/dist/blocks/Calendar/meta.js

@@ -0,0 +1,148 @@
+/*
+  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 disabledDates from '../../schemas/disabledDates.js';
+export default {
+    category: 'input',
+    icons: [],
+    valueType: 'date',
+    cssKeys: {
+        element: 'The Calendar element.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when the selected date changes.',
+            event: {
+                value: 'The selected Date object.',
+                date: 'The selected date as YYYY-MM-DD string.'
+            }
+        },
+        onSelect: {
+            description: 'Trigger actions when a date cell is clicked.',
+            event: {
+                value: 'The selected Date object.',
+                date: 'The selected date as YYYY-MM-DD string.',
+                source: 'The source of the selection (date, month, year).'
+            }
+        },
+        onPanelChange: {
+            description: 'Trigger actions when the calendar panel mode or date changes.',
+            event: {
+                value: 'The panel Date object.',
+                date: 'The panel date as YYYY-MM-DD string.',
+                mode: 'The panel mode (month or year).'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            fullscreen: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether to display the calendar in full size. Set to false for a compact card-style calendar.'
+            },
+            mode: {
+                type: 'string',
+                enum: [
+                    'month',
+                    'year'
+                ],
+                default: 'month',
+                description: 'The display mode of the calendar panel.'
+            },
+            disabledDates,
+            validRange: {
+                type: 'array',
+                description: 'Set the valid date range as [startDate, endDate]. Dates outside this range will be disabled.',
+                items: {
+                    type: 'string'
+                }
+            },
+            dateCellData: {
+                type: 'array',
+                description: 'Data to display inside calendar date cells. Each item renders as a Badge in the corresponding date cell.',
+                items: {
+                    type: 'object',
+                    properties: {
+                        date: {
+                            type: 'string',
+                            description: 'The date for this cell data (ISO date string).'
+                        },
+                        content: {
+                            type: 'string',
+                            description: 'Text to display in the date cell.'
+                        },
+                        status: {
+                            type: 'string',
+                            enum: [
+                                'success',
+                                'processing',
+                                'default',
+                                'error',
+                                'warning'
+                            ],
+                            description: 'Badge status type.'
+                        },
+                        color: {
+                            type: 'string',
+                            description: 'Custom badge color.',
+                            docs: {
+                                displayType: 'color'
+                            }
+                        }
+                    }
+                }
+            },
+            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/calendar#design-token'
+                },
+                properties: {
+                    fullBg: {
+                        type: 'string',
+                        description: 'Background color of the full-size calendar.'
+                    },
+                    fullPanelBg: {
+                        type: 'string',
+                        description: 'Background color of the calendar panel in full-size mode.'
+                    },
+                    itemActiveBg: {
+                        type: 'string',
+                        description: 'Background color of the active/selected date.'
+                    },
+                    yearControlWidth: {
+                        type: 'number',
+                        default: 80,
+                        description: 'Width of the year select control in the header.'
+                    },
+                    monthControlWidth: {
+                        type: 'number',
+                        default: 70,
+                        description: 'Width of the month select control in the header.'
+                    },
+                    miniContentHeight: {
+                        type: 'number',
+                        default: 256,
+                        description: 'Height of the content area in mini (non-fullscreen) mode.'
+                    }
+                }
+            }
+        }
+    }
+};