@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/DateTimeSelector/DateTimeSelector.js

@@ -14,16 +14,21 @@
   limitations under the License.
 */ import React, { useState } from 'react';
 import { DatePicker } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
 import disabledDate from '../../disabledDate.js';
-const DateTimeSelector = ({ blockId, components: { Icon }, events, loading, methods, properties, required, validation, value })=>{
+dayjs.extend(utc);
+const DateTimeSelector = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
     const timeUnit = !type.isString(properties.timeFormat) ? 'minute' : properties.timeFormat === 'HH:mm:ss' ? 'second' : properties.timeFormat === 'HH' ? 'hour' : 'minute';
     const onChange = (newVal)=>{
-        const val = !newVal ? null : moment.utc(newVal.add(properties.selectUTC ? newVal.utcOffset() : 0, 'minutes')).startOf(timeUnit).toDate();
+        // Wrap with our dayjs — antd v6's internal dayjs may lack the utc plugin.
+        const d = newVal ? dayjs(newVal) : null;
+        const val = !d ? null : dayjs.utc(d.add(properties.selectUTC ? d.utcOffset() : 0, 'minutes')).startOf(timeUnit).toDate();
         methods.setValue(val);
         methods.triggerEvent({
             name: 'onChange',
@@ -34,6 +39,7 @@ const DateTimeSelector = ({ blockId, components: { Icon }, events, loading, meth
     };
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: {
             Icon
         },
@@ -45,24 +51,24 @@ const DateTimeSelector = ({ blockId, components: { Icon }, events, loading, meth
         },
         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(DatePicker, {
                     id: `${blockId}_input`,
                     allowClear: properties.allowClear !== false,
                     autoFocus: properties.autoFocus,
-                    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
+                    },
                     disabled: properties.disabled || loading,
                     disabledDate: disabledDate(properties.disabledDates),
                     format: properties.format ?? 'YYYY-MM-DD HH:mm',
@@ -74,8 +80,14 @@ const DateTimeSelector = ({ blockId, components: { Icon }, events, loading, meth
                     status: validation.status,
                     suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_suffixIcon`,
+                        classNames: {
+                            element: classNames.suffixIcon
+                        },
                         events: events,
-                        properties: properties.suffixIcon ?? 'AiOutlineCalendar'
+                        properties: properties.suffixIcon ?? 'AiOutlineCalendar',
+                        styles: {
+                            element: styles.suffixIcon
+                        }
                     }),
                     showTime: {
                         format: properties.timeFormat ?? 'HH:mm',
@@ -87,21 +99,9 @@ const DateTimeSelector = ({ blockId, components: { Icon }, events, loading, meth
                     onSelect: // NOTE: we use on select instead of onChange to make the block UX
                     // more like the DataSelector which changes date on click and not on ok.
                     onChange,
-                    value: !type.isDate(value) ? null : properties.selectUTC ? moment.utc(value) : moment(value)
+                    value: !type.isDate(value) ? null : properties.selectUTC ? dayjs.utc(value) : dayjs(value)
                 }))
         }
     });
 };
-DateTimeSelector.defaultProps = blockDefaultProps;
-DateTimeSelector.meta = {
-    valueType: 'date',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons,
-        'AiOutlineCalendar'
-    ],
-    styles: [
-        'blocks/DateTimeSelector/style.less'
-    ]
-};
-export default DateTimeSelector;
+export default withTheme('DatePicker', withBlockDefaults(DateTimeSelector));

package/dist/blocks/DateTimeSelector/meta.js

@@ -0,0 +1,282 @@
+/*
+  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, inputTitle, autoFocus, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons,
+        'AiOutlineCalendar'
+    ],
+    valueType: 'date',
+    cssKeys: {
+        element: 'The DateTimeSelector element.',
+        label: 'The DateTimeSelector label.',
+        extra: 'The DateTimeSelector extra content.',
+        feedback: 'The DateTimeSelector validation feedback.',
+        popup: 'The DateTimeSelector popup.',
+        suffixIcon: 'The suffix icon in the DateTimeSelector.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when selection is changed.',
+            event: {
+                value: 'The selected date-time 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-DD HH:mm',
+                description: 'Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to dayjs formats.'
+            },
+            hourStep: {
+                type: 'integer',
+                default: 1,
+                minimum: 1,
+                description: 'Hour intervals to show in the time selector.'
+            },
+            label,
+            minuteStep: {
+                type: 'integer',
+                default: 5,
+                minimum: 1,
+                description: 'Minute intervals to show in the time selector.'
+            },
+            placeholder: {
+                ...placeholder,
+                default: 'Select Date & Time'
+            },
+            secondStep: {
+                type: 'integer',
+                default: 5,
+                minimum: 1,
+                description: 'Minute intervals to show in the time selector.'
+            },
+            selectUTC: {
+                type: 'boolean',
+                default: false,
+                description: "Shows the user's selection as UTC time, not time-zone based."
+            },
+            showToday: {
+                type: 'boolean',
+                default: true,
+                description: 'Shows a button to easily select the current date if true.'
+            },
+            showNow: {
+                type: 'boolean',
+                default: true,
+                description: "Shows a 'Now' button to set current time."
+            },
+            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."
+            },
+            timeFormat: {
+                type: 'string',
+                default: 'HH:mm',
+                description: 'Time format to show in the time selector. HH:mm:ss will show hours, minutes and seconds, HH:mm only hours and minutes and HH only hours.'
+            },
+            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/date-picker#design-token'
+                },
+                properties: {
+                    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',
+                        description: 'Background color of a calendar cell on hover.'
+                    },
+                    cellActiveWithRangeBg: {
+                        type: 'string',
+                        description: 'Background color of cells within the selected range.'
+                    },
+                    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.'
+                    },
+                    timeColumnWidth: {
+                        type: 'number',
+                        default: 56,
+                        description: 'Width of the time panel column.'
+                    },
+                    timeColumnHeight: {
+                        type: 'number',
+                        default: 224,
+                        description: 'Height of the time panel column.'
+                    },
+                    timeCellHeight: {
+                        type: 'number',
+                        default: 28,
+                        description: 'Height of a time cell in the time panel.'
+                    },
+                    addonBg: {
+                        type: 'string',
+                        description: 'Background color for the addon area.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        description: 'Border color on hover.'
+                    },
+                    activeBorderColor: {
+                        type: 'string',
+                        description: 'Border color when active.'
+                    },
+                    activeShadow: {
+                        type: 'string',
+                        description: 'Shadow effect when active.'
+                    },
+                    paddingBlock: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Vertical padding of the input.'
+                    },
+                    paddingBlockSM: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Vertical padding for small size.'
+                    },
+                    paddingBlockLG: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Vertical padding for large size.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding of the input.'
+                    },
+                    paddingInlineSM: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Horizontal padding for small size.'
+                    },
+                    paddingInlineLG: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding for large size.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1050,
+                        description: 'Z-index of the picker popup.'
+                    },
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius of the input.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of the input.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height for large size.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height for small size.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color override.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color of the input.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color.'
+                    },
+                    colorTextPlaceholder: {
+                        type: 'string',
+                        description: 'Placeholder text color.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Descriptions/Descriptions.js

@@ -13,10 +13,11 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { Descriptions } from 'antd';
 import { type } from '@lowdefy/helpers';
-const DescriptionsBlock = ({ blockId, content, properties, methods })=>{
+import withTheme from '../withTheme.js';
+const DescriptionsBlock = ({ blockId, classNames = {}, content, properties, methods, styles = {} })=>{
     let dataItem = properties.items || [];
     if (type.isObject(dataItem)) {
         dataItem = Object.keys(dataItem).map((key)=>({
@@ -24,21 +25,28 @@ const DescriptionsBlock = ({ blockId, content, properties, methods })=>{
                 key
             }));
     }
-    const { makeCssClass } = methods;
     return /*#__PURE__*/ React.createElement(Descriptions, {
         id: blockId,
         bordered: properties.bordered,
         colon: properties.colon,
         column: properties.column,
-        contentStyle: methods.makeCssClass(properties.contentStyle, true),
         extra: content.extra && content.extra(),
-        labelStyle: methods.makeCssClass(properties.labelStyle, true),
         layout: properties.layout,
         size: properties.size,
         title: renderHtml({
             html: properties.title,
             methods
-        })
+        }),
+        className: classNames.element,
+        classNames: {
+            content: classNames.content,
+            label: classNames.label
+        },
+        style: styles.element,
+        styles: {
+            content: styles.content,
+            label: styles.label
+        }
     }, dataItem.map((item, i)=>{
         let row = item;
         if (type.isPrimitive(item)) {
@@ -59,25 +67,15 @@ const DescriptionsBlock = ({ blockId, content, properties, methods })=>{
             contentStyle: row.contentStyle,
             labelStyle: row.labelStyle,
             span: row.span || (type.isFunction(itemOption.span) ? itemOption.span(row, i) : itemOption.span),
-            className: `${makeCssClass([
-                {
-                    whiteSpace: 'pre-wrap'
-                },
-                type.isFunction(itemOption.style) ? itemOption.style(row, i) : itemOption.style,
-                row.style
-            ])}`
+            style: {
+                whiteSpace: 'pre-wrap',
+                ...type.isFunction(itemOption.style) ? itemOption.style(row, i) : itemOption.style,
+                ...row.style
+            }
         }, renderHtml({
             html: value,
             methods
         }));
     }));
 };
-DescriptionsBlock.defaultProps = blockDefaultProps;
-DescriptionsBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Descriptions/style.less'
-    ]
-};
-export default DescriptionsBlock;
+export default withTheme('Descriptions', withBlockDefaults(DescriptionsBlock));

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

@@ -13,7 +13,17 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        extra: 'Extra content in the header.'
+    },
+    cssKeys: {
+        element: 'The Descriptions element.',
+        content: 'The Descriptions content.',
+        label: 'The Descriptions label.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -28,13 +38,6 @@
                 default: true,
                 description: 'Include a colon in item labels.'
             },
-            contentStyle: {
-                type: 'object',
-                description: 'Customize content style.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             column: {
                 default: 3,
                 oneOf: [
@@ -179,13 +182,6 @@
                     }
                 ]
             },
-            labelStyle: {
-                type: 'object',
-                description: 'Customize label style.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             layout: {
                 type: 'string',
                 description: 'Put values next to or below their labels.',
@@ -207,6 +203,66 @@
             title: {
                 type: 'string',
                 description: 'The title of the description block, placed at the top - 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/descriptions#design-token'
+                },
+                properties: {
+                    labelBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.02)',
+                        description: 'Background color for labels in bordered mode.'
+                    },
+                    labelColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.45)',
+                        description: 'Text color for labels.'
+                    },
+                    titleColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Color for the component title.'
+                    },
+                    titleMarginBottom: {
+                        type: 'number',
+                        default: 20,
+                        description: 'Bottom margin spacing for the title.'
+                    },
+                    itemPaddingBottom: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Bottom padding for description items.'
+                    },
+                    itemPaddingEnd: {
+                        type: 'number',
+                        default: 16,
+                        description: 'End (right in LTR) padding for description items.'
+                    },
+                    colonMarginRight: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Right margin for colons after labels.'
+                    },
+                    colonMarginLeft: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Left margin for colons after labels.'
+                    },
+                    contentColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Text color for content values.'
+                    },
+                    extraColor: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.88)',
+                        description: 'Color for extra content in the header.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/Divider/Divider.js

@@ -14,24 +14,18 @@
   limitations under the License.
 */ import React from 'react';
 import { Divider } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const DividerBlock = ({ blockId, properties, methods })=>/*#__PURE__*/ React.createElement(Divider, {
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const DividerBlock = ({ blockId, classNames = {}, properties, styles = {}, methods })=>/*#__PURE__*/ React.createElement(Divider, {
         id: blockId,
+        className: classNames.element,
         dashed: properties.dashed,
-        orientation: properties.orientation,
+        titlePlacement: properties.titlePlacement,
         plain: properties.plain,
-        style: properties.style,
-        type: properties.type
+        style: styles.element,
+        orientation: properties.orientation
     }, renderHtml({
         html: properties.title,
         methods
     }));
-DividerBlock.defaultProps = blockDefaultProps;
-DividerBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Divider/style.less'
-    ]
-};
-export default DividerBlock;
+export default withTheme('Divider', withBlockDefaults(DividerBlock));