@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/Carousel/tests/Carousel.e2e.yaml

@@ -0,0 +1,211 @@
+# 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.
+
+id: carousel
+type: Box
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: carousel_basic
+    type: Carousel
+    slots:
+      slide1:
+        blocks:
+          - id: carousel_basic_slide1
+            type: Span
+            properties:
+              content: Slide 1 Content
+      slide2:
+        blocks:
+          - id: carousel_basic_slide2
+            type: Span
+            properties:
+              content: Slide 2 Content
+      slide3:
+        blocks:
+          - id: carousel_basic_slide3
+            type: Span
+            properties:
+              content: Slide 3 Content
+
+  # ============================================
+  # DOT CONFIGURATION
+  # ============================================
+
+  - id: carousel_no_dots
+    type: Carousel
+    properties:
+      dots: false
+    slots:
+      slide1:
+        blocks:
+          - id: carousel_no_dots_slide1
+            type: Span
+            properties:
+              content: No Dots Slide
+
+  - id: carousel_dots_left
+    type: Carousel
+    properties:
+      dotPosition: left
+    slots:
+      slide1:
+        blocks:
+          - id: carousel_dots_left_slide1
+            type: Span
+            properties:
+              content: Left Dots
+      slide2:
+        blocks:
+          - id: carousel_dots_left_slide2
+            type: Span
+            properties:
+              content: Left Dots 2
+
+  - id: carousel_dots_top
+    type: Carousel
+    properties:
+      dotPosition: top
+    slots:
+      slide1:
+        blocks:
+          - id: carousel_dots_top_slide1
+            type: Span
+            properties:
+              content: Top Dots
+      slide2:
+        blocks:
+          - id: carousel_dots_top_slide2
+            type: Span
+            properties:
+              content: Top Dots 2
+
+  # ============================================
+  # ARROWS
+  # ============================================
+
+  - id: carousel_arrows
+    type: Carousel
+    properties:
+      arrows: true
+    slots:
+      slide1:
+        blocks:
+          - id: carousel_arrows_slide1
+            type: Span
+            properties:
+              content: Arrow Slide 1
+      slide2:
+        blocks:
+          - id: carousel_arrows_slide2
+            type: Span
+            properties:
+              content: Arrow Slide 2
+      slide3:
+        blocks:
+          - id: carousel_arrows_slide3
+            type: Span
+            properties:
+              content: Arrow Slide 3
+
+  # ============================================
+  # EFFECT
+  # ============================================
+
+  - id: carousel_fade
+    type: Carousel
+    properties:
+      effect: fade
+    slots:
+      slide1:
+        blocks:
+          - id: carousel_fade_slide1
+            type: Span
+            properties:
+              content: Fade Slide 1
+      slide2:
+        blocks:
+          - id: carousel_fade_slide2
+            type: Span
+            properties:
+              content: Fade Slide 2
+
+  # ============================================
+  # VERTICAL
+  # ============================================
+
+  - id: carousel_vertical
+    type: Carousel
+    properties:
+      vertical: true
+    slots:
+      slide1:
+        blocks:
+          - id: carousel_vertical_slide1
+            type: Span
+            properties:
+              content: Vertical Slide 1
+      slide2:
+        blocks:
+          - id: carousel_vertical_slide2
+            type: Span
+            properties:
+              content: Vertical Slide 2
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: carousel_afterchange
+    type: Carousel
+    properties:
+      waitForAnimate: true
+    events:
+      afterChange:
+        - id: set_afterchange
+          type: SetState
+          params:
+            carousel_current_slide:
+              _event: current.key
+    slots:
+      slide1:
+        blocks:
+          - id: carousel_afterchange_slide1
+            type: Span
+            properties:
+              content: Slide A
+      slide2:
+        blocks:
+          - id: carousel_afterchange_slide2
+            type: Span
+            properties:
+              content: Slide B
+
+  - id: afterchange_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: carousel_current_slide
+              - null
+          then:
+            _string.concat:
+              - 'Current: '
+              - _state: carousel_current_slide
+          else: ''

package/dist/blocks/Carousel/tests.yaml

@@ -0,0 +1,117 @@
+# 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.
+
+- id: default
+  type: Carousel
+- id: basic_carousel
+  type: Carousel
+  properties:
+    draggable: true
+    slidesToShow: 1
+    slides:
+      - key: slide_one
+      - key: slide_two
+      - key: slide_three
+  areas:
+    slide_one:
+      blocks:
+        - id: side_1
+          type: Card
+          blocks:
+            - id: title_side_1
+              type: Title
+              properties:
+                content: Slide 1
+    slide_two:
+      blocks:
+        - id: side_2
+          type: Card
+          blocks:
+            - id: title_side_2
+              type: Title
+              properties:
+                content: Slide 2
+    slide_three:
+      blocks:
+        - id: side_3
+          type: Card
+          blocks:
+            - id: title_side_3
+              type: Title
+              properties:
+                content: Slide 3
+- id: responsive_carousel
+  type: Carousel
+  properties:
+    autoplay: true
+    draggable: true
+    slidesToShow: 3
+    slides:
+      - key: slide_one
+      - key: slide_two
+      - key: slide_three
+      - key: slide_four
+    responsive:
+      - breakpoint: 1024
+        settings:
+          slidesToShow: 3
+          slidesToScroll: 3
+          infinite: true
+          dots: true
+      - breakpoint: 600
+        settings:
+          slidesToShow: 2
+          slidesToScroll: 2
+          initialSlide: 2
+      - breakpoint: 480
+        settings:
+          slidesToShow: 1
+          slidesToScroll: 1
+  areas:
+    slide_one:
+      blocks:
+        - id: side_1
+          type: Card
+          blocks:
+            - id: title_side_1
+              type: Title
+              properties:
+                content: Slide 1
+    slide_two:
+      blocks:
+        - id: side_2
+          type: Card
+          blocks:
+            - id: title_side_2
+              type: Title
+              properties:
+                content: Slide 2
+    slide_three:
+      blocks:
+        - id: side_3
+          type: Card
+          blocks:
+            - id: title_side_3
+              type: Title
+              properties:
+                content: Slide 3
+    slide_four:
+      blocks:
+        - id: side_4
+          type: Card
+          blocks:
+            - id: title_side_4
+              type: Title
+              properties:
+                content: Slide 4

package/dist/blocks/CheckboxSelector/CheckboxSelector.js

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { Checkbox, ConfigProvider, Space } from 'antd';
+import { Checkbox, Col, ConfigProvider, Row, Space, theme } from 'antd';
 import { type } from '@lowdefy/helpers';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
@@ -21,6 +21,7 @@ import getSelectedIndex from '../../getSelectedIndex.js';
 import useSelectorOptions from '../../useSelectorOptions.js';
 import withTheme from '../withTheme.js';
 const CheckboxSelector = ({ blockId, classNames = {}, components, events, loading, properties, required, styles = {}, validation, value, methods })=>{
+    const { token } = theme.useToken();
     const uniqueValueOptions = useSelectorOptions({
         properties,
         methods
@@ -29,33 +30,17 @@ const CheckboxSelector = ({ blockId, classNames = {}, components, events, loadin
         properties,
         multiple: true
     }));
-    const checkboxGroup = /*#__PURE__*/ React.createElement(Checkbox.Group, {
-        id: `${blockId}_input`,
-        className: classNames.element,
-        disabled: properties.disabled || loading,
-        style: styles.element,
-        onChange: (newVal)=>{
-            const val = [];
-            newVal.forEach((nv)=>{
-                val.push(type.isPrimitive(uniqueValueOptions[nv]) ? uniqueValueOptions[nv] : uniqueValueOptions[nv].value);
-            });
-            methods.setValue(val);
-            methods.triggerEvent({
-                name: 'onChange',
-                event: {
-                    value: val
-                }
-            });
-        },
-        value: getSelectedIndex(value, uniqueValueOptions, {
-            properties,
-            multiple: true
-        })
-    }, /*#__PURE__*/ React.createElement(Space, {
-        direction: properties.direction,
-        wrap: type.isNone(properties.wrap) ? true : properties.wrap,
-        align: type.isNone(properties.align) ? 'start' : properties.align
-    }, uniqueValueOptions.map((opt, i)=>{
+    const grid = !type.isNone(properties.columns);
+    // Col takes spans, not counts, so a breakpoint map of counts converts per key.
+    const colProps = type.isObject(properties.columns) ? Object.fromEntries(Object.entries(properties.columns).map(([breakpoint, columns])=>[
+            breakpoint,
+            {
+                span: 24 / columns
+            }
+        ])) : {
+        span: 24 / properties.columns
+    };
+    const renderOption = (opt, i)=>{
         if (type.isPrimitive(opt)) {
             return /*#__PURE__*/ React.createElement(Checkbox, {
                 id: `${blockId}_${i}`,
@@ -95,7 +80,47 @@ const CheckboxSelector = ({ blockId, classNames = {}, components, events, loadin
                 }
             }
         }, checkbox);
-    })));
+    };
+    const checkboxGroup = /*#__PURE__*/ React.createElement(Checkbox.Group, {
+        id: `${blockId}_input`,
+        className: classNames.element,
+        disabled: properties.disabled || loading,
+        // Checkbox.Group is inline-flex and shrink-wraps, so the Row inside it can
+        // only fill a group that has been given a width.
+        style: grid ? {
+            width: '100%',
+            ...styles.element
+        } : styles.element,
+        onChange: (newVal)=>{
+            const val = [];
+            newVal.forEach((nv)=>{
+                val.push(type.isPrimitive(uniqueValueOptions[nv]) ? uniqueValueOptions[nv] : uniqueValueOptions[nv].value);
+            });
+            methods.setValue(val);
+            methods.triggerEvent({
+                name: 'onChange',
+                event: {
+                    value: val
+                }
+            });
+        },
+        value: getSelectedIndex(value, uniqueValueOptions, {
+            properties,
+            multiple: true
+        })
+    }, grid ? /*#__PURE__*/ React.createElement(Row, {
+        gutter: type.isNone(properties.gutter) ? [
+            token.paddingXS,
+            0
+        ] : properties.gutter
+    }, uniqueValueOptions.map((opt, i)=>/*#__PURE__*/ React.createElement(Col, {
+            key: i,
+            ...colProps
+        }, renderOption(opt, i)))) : /*#__PURE__*/ React.createElement(Space, {
+        direction: properties.direction,
+        wrap: type.isNone(properties.wrap) ? true : properties.wrap,
+        align: type.isNone(properties.align) ? 'start' : properties.align
+    }, uniqueValueOptions.map(renderOption)));
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
         methods: methods,