@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/CheckboxSelector/meta.js

@@ -51,7 +51,7 @@ export default {
                     'baseline'
                 ],
                 default: 'start',
-                description: 'Align options.'
+                description: "Align options. Ignored when 'columns' is set."
             },
             color: {
                 type: 'string',
@@ -60,6 +60,16 @@ export default {
                     displayType: 'color'
                 }
             },
+            columns: {
+                type: [
+                    'integer',
+                    'object'
+                ],
+                description: 'Number of columns to lay the options out in, or a responsive breakpoint object. Use a count that divides 24 evenly.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
             disabled,
             direction: {
                 type: 'string',
@@ -68,12 +78,22 @@ export default {
                     'vertical'
                 ],
                 default: 'horizontal',
-                description: 'List options horizontally or vertical.'
+                description: "List options horizontally or vertical. Ignored when 'columns' is set."
+            },
+            gutter: {
+                type: [
+                    'number',
+                    'array'
+                ],
+                description: "Gap between options in the grid. Number or [horizontal, vertical] array. Applies when 'columns' is set.",
+                docs: {
+                    displayType: 'yaml'
+                }
             },
             wrap: {
                 type: 'boolean',
                 default: true,
-                description: "Specifies wrapping of options. Applies when 'direction' is 'horizontal'."
+                description: "Specifies wrapping of options. Applies when 'direction' is 'horizontal'. Ignored when 'columns' is set."
             },
             options,
             data,
@@ -142,7 +162,7 @@ export default {
                     marginXS: {
                         type: 'number',
                         default: 8,
-                        description: 'Horizontal gap between checkboxes in a group.'
+                        description: "Column gap on the checkbox group element. Does not space the options apart; set 'gutter' for a grid."
                     },
                     paddingXS: {
                         type: 'number',

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

@@ -0,0 +1,272 @@
+# 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: checkbox_selector
+type: Box
+
+events:
+  onInit:
+    - id: set_defaults
+      type: SetState
+      params:
+        cs_with_value:
+          - Option 2
+          - Option 3
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: cs_basic
+    type: CheckboxSelector
+    properties:
+      options:
+        - Option 1
+        - Option 2
+        - Option 3
+
+  - id: cs_with_value
+    type: CheckboxSelector
+    properties:
+      options:
+        - Option 1
+        - Option 2
+        - Option 3
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: cs_disabled
+    type: CheckboxSelector
+    properties:
+      disabled: true
+      options:
+        - A
+        - B
+        - C
+
+  - id: cs_vertical
+    type: CheckboxSelector
+    properties:
+      direction: vertical
+      options:
+        - A
+        - B
+        - C
+
+  - id: cs_horizontal
+    type: CheckboxSelector
+    properties:
+      direction: horizontal
+      options:
+        - A
+        - B
+        - C
+
+  - id: cs_no_wrap
+    type: CheckboxSelector
+    properties:
+      wrap: false
+      options:
+        - Option 1
+        - Option 2
+        - Option 3
+        - Option 4
+        - Option 5
+
+  - id: cs_align_center
+    type: CheckboxSelector
+    properties:
+      align: center
+      options:
+        - A
+        - B
+        - C
+
+  - id: cs_align_end
+    type: CheckboxSelector
+    properties:
+      align: end
+      options:
+        - A
+        - B
+        - C
+
+  - id: cs_with_title
+    type: CheckboxSelector
+    properties:
+      title: Select your options
+      options:
+        - A
+        - B
+        - C
+
+  - id: cs_with_label
+    type: CheckboxSelector
+    properties:
+      label:
+        title: Choose items
+        colon: true
+        extra: Select one or more
+      options:
+        - A
+        - B
+        - C
+
+  # ============================================
+  # OPTIONS TESTS
+  # ============================================
+
+  - id: cs_object_options
+    type: CheckboxSelector
+    properties:
+      options:
+        - value: opt1
+          label: First Option
+        - value: opt2
+          label: Second Option
+        - value: opt3
+          label: Third Option
+
+  - id: cs_disabled_option
+    type: CheckboxSelector
+    properties:
+      options:
+        - value: enabled1
+          label: Enabled Option
+        - value: disabled1
+          label: Disabled Option
+          disabled: true
+        - value: enabled2
+          label: Another Enabled
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: cs_onchange
+    type: CheckboxSelector
+    properties:
+      options:
+        - Apple
+        - Banana
+        - Cherry
+    events:
+      onChange:
+        - id: set_onchange
+          type: SetState
+          params:
+            cs_onchange_value:
+              _state: cs_onchange
+
+  - id: cs_onchange_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: cs_onchange_value
+              - null
+          then:
+            _string.concat:
+              - 'Selected: '
+              - _json.stringify:
+                  - _state: cs_onchange_value
+          else: ''
+
+  # ============================================
+  # COLUMNS (GRID LAYOUT)
+  # ============================================
+
+  - id: cs_columns_2
+    type: CheckboxSelector
+    properties:
+      columns: 2
+      options:
+        - A
+        - B
+        - C
+        - D
+
+  - id: cs_columns_3
+    type: CheckboxSelector
+    properties:
+      columns: 3
+      options:
+        - A
+        - B
+        - C
+        - D
+        - E
+        - F
+
+  - id: cs_columns_responsive
+    type: CheckboxSelector
+    properties:
+      columns:
+        xs: 1
+        md: 3
+      options:
+        - A
+        - B
+        - C
+
+  - id: cs_columns_gutter
+    type: CheckboxSelector
+    properties:
+      columns: 2
+      gutter:
+        - 24
+        - 12
+      options:
+        - A
+        - B
+        - C
+        - D
+
+  - id: cs_columns_unsupported
+    type: CheckboxSelector
+    properties:
+      columns: 5
+      options:
+        - A
+        - B
+        - C
+
+  - id: cs_columns_color
+    type: CheckboxSelector
+    properties:
+      columns: 2
+      options:
+        - label: Plain
+          value: plain
+        - label: Tinted
+          value: tinted
+          color: '#722ed1'
+
+  # ============================================
+  # INTERACTION TESTS
+  # ============================================
+
+  - id: cs_interaction
+    type: CheckboxSelector
+    properties:
+      options:
+        - A
+        - B
+        - C
+        - D

package/dist/blocks/CheckboxSelector/tests.yaml

@@ -0,0 +1,325 @@
+# 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: CheckboxSelector
+- id: properties.title
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    title: 'properties.title: My CheckboxSelector Title'
+- id: 'properties.options-string'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option One
+      - Option Two
+      - Option Three
+      - Option Four
+      - Option Five
+      - Option Six
+      - Option Seven
+      - Option Eight
+      - Option Nine
+      - Option Ten
+- id: 'properties.options-number'
+  type: CheckboxSelector
+  properties:
+    options:
+      - 15
+      - 20
+- id: 'properties.options-object'
+  type: CheckboxSelector
+  properties:
+    options:
+      - label: one
+        value: 1
+      - label: two
+        value: 2
+- id: 'properties.color_red'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    color: red
+- id: 'properties.disabled: true'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    disabled: true
+- id: 'properties.label: span_12'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    label:
+      span: 12
+- id: 'properties.label: align_right'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    label:
+      align: right
+- id: 'properties.label: inline_true'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    label:
+      inline: true
+- id: 'properties.label.disabled: true'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    label:
+      disabled: true
+- id: 'properties.label.colon: false'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    label:
+      colon: false
+- id: 'properties.label.extra: showingextra'
+  type: CheckboxSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    label:
+      extra: showing extra
+- id: 'properties.options: html'
+  type: CheckboxSelector
+  properties:
+    options:
+      - '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+      - '<div style="color: green;">Option green</div>'
+      - Option 3
+- id: 'properties.options.label: html'
+  type: CheckboxSelector
+  properties:
+    options:
+      - label: '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+        value: 1
+      - label: '<div style="color: green;">Option green</div>'
+        value: 2
+      - label: Option 3
+        value: 3
+- id: 'properties.options-style'
+  type: CheckboxSelector
+  properties:
+    options:
+      - label: one
+        value: 1
+        style:
+          background: red
+      - label: two
+        value: 2
+- id: 'properties.direction horizontal'
+  type: CheckboxSelector
+  properties:
+    direction: horizontal
+    options:
+      - label: one
+        value: 1
+      - label: two
+        value: 2
+      - label: three
+        value: 3
+      - label: four
+        value: 4
+      - label: five
+        value: 5
+- id: 'properties.direction vertical'
+  type: CheckboxSelector
+  properties:
+    direction: vertical
+    options:
+      - label: one
+        value: 1
+      - label: two
+        value: 2
+      - label: three
+        value: 3
+      - label: four
+        value: 4
+      - label: five
+        value: 5
+- id: 'properties.wrap false'
+  type: CheckboxSelector
+  properties:
+    wrap: false
+    options:
+      - Option One A
+      - Option Two A
+      - Option Three A
+      - Option Four A
+      - Option Five A
+      - Option Six A
+      - Option Seven A
+      - Option Eight A
+      - Option Nine A
+      - Option Ten A
+      - Option One B
+      - Option Two B
+      - Option Three B
+      - Option Four B
+      - Option Five B
+      - Option Six B
+      - Option Seven B
+      - Option Eight B
+      - Option Nine B
+      - Option Ten B
+      - Option One C
+      - Option Two C
+      - Option Three C
+      - Option Four C
+      - Option Five C
+      - Option Six C
+      - Option Seven C
+      - Option Eight C
+      - Option Nine C
+      - Option Ten C
+- id: 'properties.align: start'
+  type: CheckboxSelector
+  properties:
+    align: start
+    options:
+      - '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+      - '<div style="color: green;">Option green</div>'
+      - Option 3
+- id: 'properties.align: end'
+  type: CheckboxSelector
+  properties:
+    align: end
+    options:
+      - '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+      - '<div style="color: green;">Option green</div>'
+      - Option 3
+- id: 'properties.align: center'
+  type: CheckboxSelector
+  properties:
+    align: center
+    options:
+      - '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+      - '<div style="color: green;">Option green</div>'
+      - Option 3
+- id: 'properties.align: baseline'
+  type: CheckboxSelector
+  properties:
+    align: baseline
+    options:
+      - '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+      - '<div style="color: green;">Option green</div>'
+      - Option 3
+- id: 'properties.columns: 2'
+  type: CheckboxSelector
+  properties:
+    columns: 2
+    options:
+      - Option 1
+      - Option 2
+      - Option 3
+      - Option 4
+      - Option 5
+- id: 'properties.columns: 3'
+  type: CheckboxSelector
+  properties:
+    columns: 3
+    options:
+      - A much longer option label than the others
+      - Short
+      - Option 3
+      - Option 4
+      - Option 5
+      - Option 6
+- id: 'properties.columns: responsive'
+  type: CheckboxSelector
+  properties:
+    columns:
+      xs: 1
+      md: 3
+    options:
+      - Option 1
+      - Option 2
+      - Option 3
+      - Option 4
+      - Option 5
+      - Option 6
+- id: 'properties.columns: two short options'
+  type: CheckboxSelector
+  properties:
+    columns: 2
+    options:
+      - 'Yes'
+      - 'No'
+- id: 'properties.columns: unsupported count'
+  type: CheckboxSelector
+  properties:
+    columns: 5
+    options:
+      - Option 1
+      - Option 2
+      - Option 3
+      - Option 4
+      - Option 5
+- id: 'properties.gutter'
+  type: CheckboxSelector
+  properties:
+    columns: 2
+    gutter: [24, 12]
+    options:
+      - Option 1
+      - Option 2
+      - Option 3
+      - Option 4
+- id: 'properties.columns: per-option color'
+  type: CheckboxSelector
+  properties:
+    columns: 2
+    options:
+      - label: Low
+        value: low
+        color: '#16a34a'
+      - label: Medium
+        value: medium
+        color: '#d97706'
+      - label: High
+        value: high
+        color: '#dc2626'
+      - label: Critical
+        value: critical
+        color: '#7e22ce'
+- id: 'properties.columns: with direction vertical'
+  type: CheckboxSelector
+  properties:
+    columns: 2
+    direction: vertical
+    options:
+      - Option 1
+      - Option 2
+      - Option 3
+      - Option 4