@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/CheckboxSwitch/gallery.yaml

@@ -0,0 +1,457 @@
+# 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.
+
+- title: Basic Checkbox
+  blocks:
+    - id: basic_default
+      type: CheckboxSwitch
+      properties:
+        title: Accept Terms
+    - id: basic_with_desc
+      type: CheckboxSwitch
+      properties:
+        title: Notifications
+        description: Enable email notifications
+    - id: basic_simple
+      type: CheckboxSwitch
+      properties:
+        title: Remember Me
+        description: Keep me signed in on this device
+
+- title: With Description Text
+  blocks:
+    - id: desc_terms
+      type: CheckboxSwitch
+      properties:
+        title: Terms & Conditions
+        description: I agree to the Terms of Service and Privacy Policy
+    - id: desc_marketing
+      type: CheckboxSwitch
+      properties:
+        title: Marketing
+        description: Send me promotional emails and newsletters
+    - id: desc_html
+      type: CheckboxSwitch
+      properties:
+        title: Agreement
+        description: 'I accept the <b>Terms</b> and <i>Privacy Policy</i>'
+
+- title: With Label and Title
+  blocks:
+    - id: label_default
+      type: CheckboxSwitch
+      properties:
+        title: Enable Notifications
+        description: Receive updates via email
+    - id: label_colon
+      type: CheckboxSwitch
+      properties:
+        title: Auto-save
+        description: Save changes automatically
+        label:
+          colon: true
+    - id: label_no_colon
+      type: CheckboxSwitch
+      properties:
+        title: Status
+        description: Set active status
+        label:
+          colon: false
+
+- title: Label Inline
+  blocks:
+    - id: inline_basic
+      type: CheckboxSwitch
+      properties:
+        title: Dark mode
+        description: Enable dark theme
+        label:
+          inline: true
+          span: 8
+    - id: inline_right
+      type: CheckboxSwitch
+      properties:
+        title: Auto-save
+        description: Save changes automatically
+        label:
+          inline: true
+          span: 8
+          align: right
+    - id: inline_wide_span
+      type: CheckboxSwitch
+      properties:
+        title: Enable feature
+        description: Activate the new experimental feature
+        label:
+          inline: true
+          span: 12
+
+- title: Label Extra
+  blocks:
+    - id: extra_basic
+      type: CheckboxSwitch
+      properties:
+        title: Notifications
+        description: Enable push notifications
+        label:
+          extra: Push notifications will be sent to your registered device.
+    - id: extra_html
+      type: CheckboxSwitch
+      properties:
+        title: Terms
+        description: I agree to the terms
+        label:
+          extra: 'Read the full <b>Terms of Service</b> before agreeing.'
+    - id: extra_inline
+      type: CheckboxSwitch
+      properties:
+        title: Marketing Emails
+        description: Receive promotional content
+        label:
+          inline: true
+          span: 10
+          extra: You can unsubscribe at any time from your account settings.
+
+- title: Label HasFeedback
+  blocks:
+    - id: feedback_on
+      type: CheckboxSwitch
+      properties:
+        title: With Feedback
+        description: This checkbox shows validation feedback
+        label:
+          hasFeedback: true
+    - id: feedback_off
+      type: CheckboxSwitch
+      properties:
+        title: Without Feedback
+        description: Validation feedback is hidden
+        label:
+          hasFeedback: false
+
+- title: Disabled State
+  blocks:
+    - id: disabled_unchecked
+      type: CheckboxSwitch
+      properties:
+        title: Disabled (Unchecked)
+        description: This checkbox is disabled
+        disabled: true
+        label:
+          disabled: true
+    - id: disabled_with_label
+      type: CheckboxSwitch
+      properties:
+        title: Disabled with Label
+        description: Cannot be toggled
+        disabled: true
+
+- title: Color Override
+  blocks:
+    - id: color_green
+      type: CheckboxSwitch
+      properties:
+        title: Green
+        description: Success color checkbox
+        color: '#52c41a'
+        label:
+          disabled: true
+    - id: color_orange
+      type: CheckboxSwitch
+      properties:
+        title: Orange
+        description: Warning color checkbox
+        color: '#fa8c16'
+        label:
+          disabled: true
+    - id: color_purple
+      type: CheckboxSwitch
+      properties:
+        title: Purple
+        description: Custom purple checkbox
+        color: '#722ed1'
+        label:
+          disabled: true
+    - id: color_red
+      type: CheckboxSwitch
+      properties:
+        title: Red
+        description: Danger color checkbox
+        color: '#f5222d'
+        label:
+          disabled: true
+    - id: color_cyan
+      type: CheckboxSwitch
+      properties:
+        title: Cyan
+        description: Info color checkbox
+        color: '#13c2c2'
+        label:
+          disabled: true
+
+- title: No Label (Hidden)
+  blocks:
+    - id: no_label_desc
+      type: CheckboxSwitch
+      properties:
+        description: Accept cookies for a better browsing experience
+        label:
+          disabled: true
+    - id: no_label_plain
+      type: CheckboxSwitch
+      properties:
+        label:
+          disabled: true
+    - id: no_label_html
+      type: CheckboxSwitch
+      properties:
+        description: 'I agree to the <b>Community Guidelines</b> and <i>Code of Conduct</i>'
+        label:
+          disabled: true
+
+- title: Style Overrides
+  blocks:
+    - id: style_background
+      type: CheckboxSwitch
+      style:
+        .element:
+          padding: 12px
+          borderRadius: 8px
+          border: '1px solid #b7eb8f'
+      properties:
+        title: Styled Background
+        description: Checkbox with a custom background style
+        label:
+          disabled: true
+    - id: style_warning_bg
+      type: CheckboxSwitch
+      style:
+        .element:
+          padding: 10px
+          borderRadius: 6px
+          border: '1px solid #ffd591'
+      properties:
+        title: Warning Style
+        description: Styled with a warning background
+        label:
+          disabled: true
+    - id: style_bold_label
+      type: CheckboxSwitch
+      style:
+        .label:
+          fontWeight: bold
+          color: '#1677ff'
+      properties:
+        title: Styled Label
+        description: Label text is bold and colored
+
+- title: Class Overrides (Tailwind)
+  blocks:
+    - id: class_blue
+      type: CheckboxSwitch
+      class: p-2 rounded-lg border border-border bg-bg-layout
+      properties:
+        title: Blue Card
+        description: Using Tailwind CSS classes for a blue card style
+        label:
+          disabled: true
+    - id: class_green
+      type: CheckboxSwitch
+      class: p-3 rounded-xl border border-border bg-bg-layout
+      properties:
+        title: Green Card
+        description: Tailwind green card styling
+        label:
+          disabled: true
+    - id: class_shadow
+      type: CheckboxSwitch
+      class: p-3 rounded-lg shadow-md bg-bg-container
+      properties:
+        title: Shadow Card
+        description: Elevated card with a box shadow
+        label:
+          disabled: true
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_large_checkbox
+      type: CheckboxSwitch
+      properties:
+        title: Large Checkbox
+        description: Checkbox with increased size via controlInteractiveSize
+        label:
+          disabled: true
+        theme:
+          controlInteractiveSize: 24
+    - id: theme_circle
+      type: CheckboxSwitch
+      properties:
+        title: Circular Checkbox
+        description: Fully rounded checkbox that appears circular
+        label:
+          disabled: true
+        theme:
+          controlInteractiveSize: 20
+          borderRadiusSM: 10
+    - id: theme_custom_colors
+      type: CheckboxSwitch
+      properties:
+        title: Custom Theme Colors
+        description: Primary and hover colors overridden via design tokens
+        label:
+          disabled: true
+        theme:
+          colorPrimary: '#531dab'
+          colorPrimaryHover: '#722ed1'
+    - id: theme_bold_border
+      type: CheckboxSwitch
+      properties:
+        title: Bold Border
+        description: Checkbox with a thicker border
+        label:
+          disabled: true
+        theme:
+          lineWidth: 2
+    - id: theme_combined
+      type: CheckboxSwitch
+      properties:
+        title: Combined Tokens
+        description: Multiple theme tokens applied together for a unique look
+        label:
+          disabled: true
+        theme:
+          controlInteractiveSize: 22
+          borderRadiusSM: 6
+          colorPrimary: '#08979c'
+          colorPrimaryHover: '#13c2c2'
+          lineWidth: 2
+          colorBorder: '#87e8de'
+
+- title: CheckboxSwitch in Registration Form
+  blocks:
+    - id: applied_reg_card
+      type: Card
+      properties:
+        title: Create Account
+      blocks:
+        - id: applied_reg_name
+          type: TextInput
+          properties:
+            title: Full Name
+            placeholder: Enter your full name
+        - id: applied_reg_email
+          type: TextInput
+          properties:
+            title: Email Address
+            placeholder: you@example.com
+        - id: applied_reg_terms
+          type: CheckboxSwitch
+          properties:
+            description: 'I agree to the <b>Terms of Service</b> and <b>Privacy Policy</b>'
+            label:
+              disabled: true
+          validate:
+            - message: You must accept the terms to continue.
+              status: error
+              pass:
+                _eq:
+                  - _state: applied_reg_terms
+                  - true
+        - id: applied_reg_marketing
+          type: CheckboxSwitch
+          properties:
+            description: Send me product updates and tips (optional)
+            color: '#1677ff'
+            label:
+              disabled: true
+        - id: applied_reg_submit
+          type: Button
+          properties:
+            title: Create Account
+            type: primary
+            icon: AiOutlineUserAdd
+            block: true
+          events:
+            onClick:
+              - id: validate_terms
+                type: Validate
+                params:
+                  - applied_reg_terms
+              - id: reg_success
+                type: DisplayMessage
+                params:
+                  content: Account created successfully!
+                  status: success
+
+- title: CheckboxSwitch in Notification Preferences
+  blocks:
+    - id: applied_notif_card
+      type: Card
+      properties:
+        title: Notification Settings
+      blocks:
+        - id: applied_notif_email
+          type: CheckboxSwitch
+          properties:
+            title: Email Notifications
+            description: Receive order updates and receipts via email
+            label:
+              inline: true
+              span: 16
+          events:
+            onChange:
+              - id: email_changed
+                type: SetState
+                params:
+                  emailEnabled:
+                    _state: applied_notif_email
+        - id: applied_notif_sms
+          type: CheckboxSwitch
+          properties:
+            title: SMS Alerts
+            description: Get delivery status updates via text message
+            label:
+              inline: true
+              span: 16
+        - id: applied_notif_push
+          type: CheckboxSwitch
+          properties:
+            title: Push Notifications
+            description: Receive real-time alerts in your browser
+            color: '#1677ff'
+            label:
+              inline: true
+              span: 16
+        - id: applied_notif_marketing
+          type: CheckboxSwitch
+          properties:
+            title: Marketing Communications
+            description: Promotional offers and new feature announcements
+            color: '#722ed1'
+            label:
+              inline: true
+              span: 16
+        - id: applied_notif_save
+          type: Button
+          properties:
+            title: Save Preferences
+            type: primary
+            icon: AiOutlineSave
+          events:
+            onClick:
+              - id: save_notif
+                type: DisplayMessage
+                params:
+                  content: Notification preferences saved.
+                  status: success

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

@@ -0,0 +1,126 @@
+# 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: checkboxswitch
+type: Box
+
+events:
+  onInit:
+    - id: set_defaults
+      type: SetState
+      params:
+        checkboxswitch_checked: true
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: checkboxswitch_basic
+    type: CheckboxSwitch
+    properties:
+      title: Basic Checkbox
+
+  - id: checkboxswitch_checked
+    type: CheckboxSwitch
+    properties:
+      title: Checked Checkbox
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: checkboxswitch_disabled
+    type: CheckboxSwitch
+    properties:
+      title: Disabled Checkbox
+      disabled: true
+
+  - id: checkboxswitch_disabled_checked
+    type: CheckboxSwitch
+    properties:
+      title: Disabled Checked
+      disabled: true
+
+  - id: checkboxswitch_with_description
+    type: CheckboxSwitch
+    properties:
+      title: With Description
+      description: I agree to the terms and conditions
+
+  - id: checkboxswitch_html_description
+    type: CheckboxSwitch
+    properties:
+      title: HTML Description
+      description: '<strong>Bold</strong> and <em>italic</em> text'
+
+  - id: checkboxswitch_custom_color
+    type: CheckboxSwitch
+    properties:
+      title: Custom Color
+      color: '#52c41a'
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: checkboxswitch_onchange
+    type: CheckboxSwitch
+    properties:
+      title: OnChange Test
+      description: Click to toggle
+    events:
+      onChange:
+        - id: set_onchange
+          type: SetState
+          params:
+            checkboxswitch_onchange_value:
+              _event: value
+
+  - id: onchange_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: checkboxswitch_onchange_value
+              - null
+          then:
+            _string.concat:
+              - 'Value: '
+              - _state: checkboxswitch_onchange_value
+          else: ''
+
+  # ============================================
+  # INTERACTION TESTS
+  # ============================================
+
+  - id: checkboxswitch_toggle
+    type: CheckboxSwitch
+    properties:
+      title: Toggle Test
+      description: Toggle me
+
+  - id: toggle_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: checkboxswitch_toggle
+              - true
+          then: Checkbox is CHECKED
+          else: Checkbox is UNCHECKED

package/dist/blocks/CheckboxSwitch/tests.yaml

@@ -0,0 +1,96 @@
+# 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: CheckboxSwitch
+- id: properties.title
+  type: CheckboxSwitch
+  properties:
+    title: 'properties.title: My CheckboxSwitch Title'
+- id: 'properties.description-string'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+- id: 'properties.color_red'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+    color: '#ff0000'
+- id: 'properties.disabled: true'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+    disabled: true
+- id: 'properties.label: span_12'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+    label:
+      span: 12
+- id: 'properties.label: align_right'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+    label:
+      align: right
+- id: 'properties.label: inline_true'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+    label:
+      inline: true
+- id: 'properties.label.disabled: true'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+    label:
+      disabled: true
+- id: 'properties.label.colon: false'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+    label:
+      colon: false
+- id: 'properties.label.extra: showingextra'
+  type: CheckboxSwitch
+  properties:
+    description: Option 2
+    label:
+      extra: showing extra
+- id: 'properties.label.title'
+  type: CheckboxSwitch
+  properties:
+    description: option
+    label:
+      title: label
+- id: 'properties.description: long text'
+  type: CheckboxSwitch
+  properties:
+    description: I agree to the terms and conditions and privacy policy as found on the website blah blah blah....
+- id: 'properties.description: long text label disabled'
+  type: CheckboxSwitch
+  properties:
+    description: I agree to the terms and conditions and privacy policy as found on the website blah blah blah.... Thoroughly I agree to the terms and conditions and privacy policy as found on the website blah blah blah....
+    label:
+      disabled: true
+- id: 'properties.description: html'
+  type: CheckboxSwitch
+  properties:
+    description: '<span style="color:blue">I agree to the terms and conditions and privacy policy as found on the website blah blah blah....</span>'
+- id: 'properties.inputStyle'
+  type: CheckboxSwitch
+  properties:
+    description: Option
+    inputStyle:
+      fontSize: 20