@lowdefy/blocks-antd 4.7.2 → 5.0.0

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,111 @@
+/*
+  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 {};
+    const map = {};
+    dateCellData.forEach((item)=>{
+        if (type.isNone(item?.date)) return;
+        const key = dayjs(item.date).format('YYYY-MM-DD');
+        if (!map[key]) map[key] = [];
+        map[key].push(item);
+    });
+    return map;
+}
+const CalendarBlock = ({ blockId, classNames = {}, events, methods, properties, styles = {}, value })=>{
+    const dateMap = buildDateMap(properties.dateCellData);
+    const hasDateData = Object.keys(dateMap).length > 0;
+    return /*#__PURE__*/ React.createElement(Calendar, {
+        id: blockId,
+        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,
+        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();
+            if (selectInfo?.source === 'date') {
+                methods.setValue(val);
+                methods.triggerEvent({
+                    name: 'onSelect',
+                    event: {
+                        value: val,
+                        date: d.format('YYYY-MM-DD'),
+                        source: selectInfo.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];
+            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: 'display',
+    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.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Card/Card.js

@@ -14,16 +14,15 @@
   limitations under the License.
 */ import React from 'react';
 import { Card } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const CardBlock = ({ blockId, content, properties, methods, events })=>/*#__PURE__*/ React.createElement(Card, {
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const CardBlock = ({ blockId, classNames = {}, content, properties, methods, events, styles = {} })=>/*#__PURE__*/ React.createElement(Card, {
         id: blockId,
         title: content.title ? content.title() : renderHtml({
             html: properties.title,
             methods
         }),
-        headStyle: methods.makeCssClass(properties.headerStyle, true),
-        bodyStyle: methods.makeCssClass(properties.bodyStyle, true),
-        bordered: properties.bordered,
+        variant: properties.bordered === false ? 'borderless' : properties.variant,
         cover: content.cover && content.cover(),
         extra: content.extra && content.extra(),
         hoverable: properties.hoverable,
@@ -32,20 +31,22 @@ const CardBlock = ({ blockId, content, properties, methods, events })=>/*#__PURE
         onClick: ()=>methods.triggerEvent({
                 name: 'onClick'
             }),
-        className: methods.makeCssClass([
-            {
-                outline: 'none',
-                cursor: events.onClick && 'pointer'
-            },
-            properties.style
-        ])
+        className: classNames.element,
+        classNames: {
+            header: classNames.header,
+            body: classNames.body,
+            cover: classNames.cover,
+            actions: classNames.actions,
+            extra: classNames.extra
+        },
+        style: {
+            outline: 'none',
+            cursor: events.onClick && 'pointer',
+            ...styles.element
+        },
+        styles: {
+            header: styles.header,
+            body: styles.body
+        }
     }, content.content && content.content());
-CardBlock.defaultProps = blockDefaultProps;
-CardBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Card/style.less'
-    ]
-};
-export default CardBlock;
+export default withTheme('Card', withBlockDefaults(CardBlock));