@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/RatingSlider/meta.js

@@ -0,0 +1,221 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import icon from '../../schemas/icon.js';
+import { disabled, inputTitle, autoFocus } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons,
+        'AiOutlineFrown',
+        'AiOutlineSmile'
+    ],
+    valueType: 'any',
+    cssKeys: {
+        element: 'The RatingSlider element.',
+        label: 'The RatingSlider label.',
+        extra: 'The RatingSlider extra content.',
+        feedback: 'The RatingSlider validation feedback.',
+        minIcon: 'The min icon in the RatingSlider.',
+        maxIcon: 'The max icon in the RatingSlider.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger action when rating is changed.',
+            event: {
+                value: 'The selected rating value.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            autoFocus,
+            color: {
+                type: 'string',
+                description: 'Rating slider color.',
+                docs: {
+                    displayType: 'color'
+                }
+            },
+            disabled,
+            disableIcons: {
+                type: 'boolean',
+                default: false,
+                description: 'Hides minimum and maximum icons.'
+            },
+            disableNotApplicable: {
+                type: 'boolean',
+                default: false,
+                description: 'Disables the N/A option left of slider.'
+            },
+            minIcon: {
+                ...icon,
+                default: 'AiOutlineFrown',
+                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 the icon to the left of the minimum side of the slider."
+            },
+            maxIcon: {
+                ...icon,
+                default: 'AiOutlineSmile',
+                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 the icon to the right of the maximum side of the slider."
+            },
+            label,
+            min: {
+                type: 'number',
+                default: 0,
+                description: 'The minimum value of the slider.'
+            },
+            max: {
+                type: 'number',
+                default: 10,
+                description: 'The maximum value of the slider.'
+            },
+            notApplicableLabel: {
+                type: 'string',
+                default: 'N/A',
+                description: 'Label shown at the null value of the slider.'
+            },
+            showDots: {
+                type: 'boolean',
+                default: true,
+                description: 'Shows dots at values between step values when true.'
+            },
+            showMarks: {
+                type: 'boolean',
+                default: true,
+                description: 'Shows values at specified min, max and step values.'
+            },
+            step: {
+                type: 'number',
+                default: 1,
+                exclusiveMinimum: 0,
+                description: ' The size of the step between values, has to be values greater than 0.'
+            },
+            tooltipVisible: {
+                type: 'string',
+                enum: [
+                    'never',
+                    'onClick',
+                    'always'
+                ],
+                default: 'onClick',
+                description: 'When tooltip should be visible.'
+            },
+            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/slider#design-token'
+                },
+                properties: {
+                    controlSize: {
+                        type: 'number',
+                        default: 10,
+                        description: 'Size of the slider control element.'
+                    },
+                    railSize: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Height (horizontal) or width (vertical) of the slider rail track.'
+                    },
+                    handleSize: {
+                        type: 'number',
+                        default: 10,
+                        description: 'Size of the slider handle.'
+                    },
+                    handleSizeHover: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Size of the slider handle on hover.'
+                    },
+                    dotSize: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Size of the slider step dots.'
+                    },
+                    handleLineWidth: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Border line width of the handle.'
+                    },
+                    handleLineWidthHover: {
+                        type: 'number',
+                        default: 2.5,
+                        description: 'Border line width of the handle on hover.'
+                    },
+                    railBg: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.04)',
+                        description: 'Background color of the slider rail.'
+                    },
+                    railHoverBg: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.06)',
+                        description: 'Background color of the slider rail on hover.'
+                    },
+                    trackBg: {
+                        type: 'string',
+                        default: '#91caff',
+                        description: 'Background color of the active track.'
+                    },
+                    trackHoverBg: {
+                        type: 'string',
+                        default: '#69b1ff',
+                        description: 'Background color of the active track on hover.'
+                    },
+                    handleColor: {
+                        type: 'string',
+                        default: '#91caff',
+                        description: 'Color of the slider handle.'
+                    },
+                    handleActiveColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Color of the slider handle when active.'
+                    },
+                    handleActiveOutlineColor: {
+                        type: 'string',
+                        default: 'rgba(22,119,255,0.2)',
+                        description: 'Color of the handle focus outline ring.'
+                    },
+                    handleColorDisabled: {
+                        type: 'string',
+                        default: '#bfbfbf',
+                        description: 'Color of the slider handle when disabled.'
+                    },
+                    dotBorderColor: {
+                        type: 'string',
+                        default: '#f0f0f0',
+                        description: 'Border color of the step dots.'
+                    },
+                    dotActiveBorderColor: {
+                        type: 'string',
+                        default: '#91caff',
+                        description: 'Border color of the active step dots.'
+                    },
+                    trackBgDisabled: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.04)',
+                        description: 'Background color of the track when disabled.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Result/Result.js

@@ -14,9 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { Result } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
-const ResultBlock = ({ blockId, components: { Icon }, events, content, methods, properties })=>/*#__PURE__*/ React.createElement(Result, {
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const ResultBlock = ({ blockId, classNames = {}, components: { Icon }, events, content, methods, properties, styles = {} })=>/*#__PURE__*/ React.createElement(Result, {
         id: blockId,
+        className: classNames.element,
         title: renderHtml({
             html: properties.title,
             methods
@@ -26,10 +28,17 @@ const ResultBlock = ({ blockId, components: { Icon }, events, content, methods,
             methods
         }),
         status: properties.status,
+        style: styles.element,
         icon: properties.icon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_icon`,
+            classNames: {
+                element: classNames.icon
+            },
             events: events,
-            properties: properties.icon
+            properties: properties.icon,
+            styles: {
+                element: styles.icon
+            }
         }),
         extra: content.extra && content.extra({
             justifyContent: 'center'
@@ -37,12 +46,4 @@ const ResultBlock = ({ blockId, components: { Icon }, events, content, methods,
     }, content.content && content.content({
         justifyContent: 'center'
     }));
-ResultBlock.defaultProps = blockDefaultProps;
-ResultBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Result/style.less'
-    ]
-};
-export default ResultBlock;
+export default withTheme('Result', withBlockDefaults(ResultBlock));

package/dist/blocks/Result/meta.js

@@ -0,0 +1,129 @@
+/*
+  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.
+*/ export default {
+    category: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Additional content below the Result.',
+        extra: 'Extra content, typically action buttons.'
+    },
+    cssKeys: {
+        element: 'The Result element.',
+        icon: 'The icon in the Result.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            icon: {
+                type: [
+                    'string',
+                    'object'
+                ],
+                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 to use as result image.",
+                docs: {
+                    displayType: 'icon'
+                }
+            },
+            status: {
+                type: 'string',
+                enum: [
+                    'success',
+                    'error',
+                    'info',
+                    'warning',
+                    '404',
+                    '403',
+                    '500'
+                ],
+                default: 'info',
+                description: 'Status of the result. Determines image and color.'
+            },
+            subTitle: {
+                type: 'string',
+                description: 'Result subtitle or secondary text - supports html.'
+            },
+            title: {
+                type: 'string',
+                description: 'Result title or primary text - 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/result#design-token'
+                },
+                properties: {
+                    titleFontSize: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Font size of the result title.'
+                    },
+                    subtitleFontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the result subtitle.'
+                    },
+                    iconFontSize: {
+                        type: 'number',
+                        default: 72,
+                        description: 'Font size of the result status icon.'
+                    },
+                    extraMargin: {
+                        type: 'string',
+                        default: '24px 0 0 0',
+                        description: 'Margin applied to the extra content area.'
+                    },
+                    colorSuccess: {
+                        type: 'string',
+                        description: 'Color used for the success status icon.'
+                    },
+                    colorError: {
+                        type: 'string',
+                        description: 'Color used for the error status icon.'
+                    },
+                    colorInfo: {
+                        type: 'string',
+                        description: 'Color used for the info status icon.'
+                    },
+                    colorWarning: {
+                        type: 'string',
+                        description: 'Color used for the warning status icon.'
+                    },
+                    colorTextHeading: {
+                        type: 'string',
+                        description: 'Color of the result title text.'
+                    },
+                    colorTextDescription: {
+                        type: 'string',
+                        description: 'Color of the result subtitle text.'
+                    },
+                    paddingLG: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Large padding value applied to the result container.'
+                    },
+                    lineHeight: {
+                        type: 'number',
+                        default: 1.5714285714285714,
+                        description: 'Line height used for result text content.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Search/Search.js

@@ -0,0 +1,135 @@
+/*
+  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, { useState, useEffect, useCallback } from 'react';
+import { Button } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { cn, withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+import SearchModal from './SearchModal.js';
+import useSearchIndex from './useSearchIndex.js';
+import useRecentSearches from './useRecentSearches.js';
+import './style.module.css';
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+function parseShortcut(shortcut) {
+    if (!shortcut) return null;
+    const parts = shortcut.toLowerCase().split('+');
+    return {
+        mod: parts.includes('mod'),
+        ctrl: parts.includes('ctrl'),
+        shift: parts.includes('shift'),
+        alt: parts.includes('alt'),
+        key: parts[parts.length - 1]
+    };
+}
+function matchesShortcut(e, parsed) {
+    if (!parsed) return false;
+    const modPressed = parsed.mod ? isMac ? e.metaKey : e.ctrlKey : true;
+    const ctrlPressed = parsed.ctrl ? e.ctrlKey : true;
+    const shiftPressed = parsed.shift ? e.shiftKey : !e.shiftKey;
+    const altPressed = parsed.alt ? e.altKey : !e.altKey;
+    return modPressed && ctrlPressed && shiftPressed && altPressed && e.key.toLowerCase() === parsed.key;
+}
+function SearchBlock({ blockId, classNames = {}, components: { ShortcutBadge }, methods, properties, styles = {} }) {
+    const [open, setOpen] = useState(false);
+    const searchIndex = useSearchIndex({
+        indexUrl: properties.indexUrl,
+        documents: properties.documents,
+        fields: properties.fields,
+        storeFields: properties.storeFields,
+        searchOptions: properties.searchOptions
+    });
+    const recentSearches = useRecentSearches({
+        enabled: properties.recentSearches !== false,
+        storageKey: properties.recentSearchesKey,
+        maxCount: properties.recentSearchesCount
+    });
+    const handleOpen = useCallback(async ()=>{
+        setOpen(true);
+        await searchIndex.ensureLoaded();
+        methods.triggerEvent({
+            name: 'onOpen'
+        });
+    }, [
+        searchIndex,
+        methods
+    ]);
+    const handleClose = useCallback(()=>{
+        setOpen(false);
+        methods.triggerEvent({
+            name: 'onClose'
+        });
+    }, [
+        methods
+    ]);
+    useEffect(()=>{
+        methods.registerMethod('toggleOpen', ()=>{
+            if (open) {
+                handleClose();
+            } else {
+                handleOpen();
+            }
+        });
+        methods.registerMethod('setOpen', ({ open: newOpen })=>{
+            if (newOpen) {
+                handleOpen();
+            } else {
+                handleClose();
+            }
+        });
+    });
+    useEffect(()=>{
+        const parsed = parseShortcut(properties.shortcut ?? 'mod+k');
+        function handleKeyDown(e) {
+            if (matchesShortcut(e, parsed)) {
+                e.preventDefault();
+                if (open) {
+                    handleClose();
+                } else {
+                    handleOpen();
+                }
+            }
+        }
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        properties.shortcut,
+        open,
+        handleOpen,
+        handleClose
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: cn(classNames.element),
+        style: styles.element
+    }, /*#__PURE__*/ React.createElement(Button, {
+        className: cn('lf-search-trigger', classNames.trigger),
+        style: styles.trigger,
+        onClick: handleOpen
+    }, /*#__PURE__*/ React.createElement(SearchOutlined, null), /*#__PURE__*/ React.createElement("span", {
+        className: "lf-search-trigger-label"
+    }, properties.label ?? 'Search'), properties.showShortcut !== false && /*#__PURE__*/ React.createElement(ShortcutBadge, {
+        shortcut: properties.shortcut ?? 'mod+k'
+    })), /*#__PURE__*/ React.createElement(SearchModal, {
+        open: open,
+        onClose: handleClose,
+        properties: properties,
+        methods: methods,
+        classNames: classNames,
+        styles: styles,
+        searchIndex: searchIndex,
+        recentSearches: recentSearches
+    }));
+}
+export default withTheme('Search', withBlockDefaults(SearchBlock));

package/dist/blocks/Search/SearchHighlight.js

@@ -0,0 +1,33 @@
+/*
+  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';
+function SearchHighlight({ text, terms, className, style }) {
+    if (!text || !terms || terms.length === 0) {
+        return /*#__PURE__*/ React.createElement("span", {
+            className: className,
+            style: style
+        }, text);
+    }
+    const escaped = terms.map((t)=>t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    const pattern = new RegExp(`(${escaped.join('|')})`, 'gi');
+    const parts = text.split(pattern);
+    return /*#__PURE__*/ React.createElement("span", {
+        className: className,
+        style: style
+    }, parts.map((part, i)=>pattern.test(part) ? /*#__PURE__*/ React.createElement("mark", {
+            key: i
+        }, part) : part));
+}
+export default SearchHighlight;