@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/CheckboxSelector/gallery.yaml

@@ -0,0 +1,781 @@
+# 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
+  blocks:
+    - id: basic_label_value
+      type: CheckboxSelector
+      properties:
+        title: Select Toppings
+        options:
+          - label: Cheese
+            value: cheese
+          - label: Pepperoni
+            value: pepperoni
+          - label: Mushrooms
+            value: mushrooms
+          - label: Onions
+            value: onions
+          - label: Peppers
+            value: peppers
+    - id: basic_string_options
+      type: CheckboxSelector
+      properties:
+        title: Hobbies
+        options:
+          - Reading
+          - Cooking
+          - Hiking
+          - Gaming
+          - Music
+
+- title: Direction - Horizontal
+  blocks:
+    - id: horizontal_default
+      type: CheckboxSelector
+      properties:
+        title: Horizontal (Default)
+        direction: horizontal
+        options:
+          - label: Frontend
+            value: frontend
+          - label: Backend
+            value: backend
+          - label: DevOps
+            value: devops
+          - label: Design
+            value: design
+          - label: QA
+            value: qa
+          - label: Product
+            value: product
+
+- title: Direction - Vertical
+  blocks:
+    - id: vertical_checkbox
+      type: CheckboxSelector
+      properties:
+        title: Vertical Layout
+        direction: vertical
+        options:
+          - label: Email notifications
+            value: email
+          - label: SMS notifications
+            value: sms
+          - label: Push notifications
+            value: push
+          - label: In-app notifications
+            value: in_app
+
+- title: Wrap
+  blocks:
+    - id: wrap_enabled
+      type: CheckboxSelector
+      properties:
+        title: Wrap Enabled (Default)
+        direction: horizontal
+        wrap: true
+        options:
+          - JavaScript
+          - TypeScript
+          - Python
+          - Go
+          - Rust
+          - Java
+          - C++
+          - Ruby
+          - Swift
+          - Kotlin
+          - PHP
+          - Scala
+    - id: wrap_disabled
+      type: CheckboxSelector
+      properties:
+        title: Wrap Disabled
+        direction: horizontal
+        wrap: false
+        options:
+          - JavaScript
+          - TypeScript
+          - Python
+          - Go
+          - Rust
+          - Java
+          - C++
+          - Ruby
+
+- title: Alignment
+  blocks:
+    - id: align_start
+      type: CheckboxSelector
+      properties:
+        title: Start Alignment
+        align: start
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: align_center
+      type: CheckboxSelector
+      properties:
+        title: Center Alignment
+        align: center
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: align_end
+      type: CheckboxSelector
+      properties:
+        title: End Alignment
+        align: end
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: align_baseline
+      type: CheckboxSelector
+      properties:
+        title: Baseline Alignment
+        align: baseline
+        options:
+          - Apple
+          - Banana
+          - Cherry
+
+- title: Custom Color
+  blocks:
+    - id: color_green
+      type: CheckboxSelector
+      properties:
+        title: Green Checkboxes
+        color: '#52c41a'
+        options:
+          - label: Lettuce
+            value: lettuce
+          - label: Spinach
+            value: spinach
+          - label: Broccoli
+            value: broccoli
+    - id: color_orange
+      type: CheckboxSelector
+      properties:
+        title: Orange Checkboxes
+        color: '#fa8c16'
+        options:
+          - label: Carrot
+            value: carrot
+          - label: Pumpkin
+            value: pumpkin
+          - label: Sweet Potato
+            value: sweet_potato
+    - id: color_purple
+      type: CheckboxSelector
+      properties:
+        title: Purple Checkboxes
+        color: '#722ed1'
+        options:
+          - label: Eggplant
+            value: eggplant
+          - label: Grape
+            value: grape
+          - label: Plum
+            value: plum
+    - id: color_red
+      type: CheckboxSelector
+      properties:
+        title: Red Checkboxes
+        color: '#f5222d'
+        options:
+          - label: Tomato
+            value: tomato
+          - label: Strawberry
+            value: strawberry
+          - label: Cherry
+            value: cherry
+    - id: color_hex_custom
+      type: CheckboxSelector
+      properties:
+        title: Custom Hex Color
+        color: '#e64980'
+        options:
+          - label: Pink option A
+            value: a
+          - label: Pink option B
+            value: b
+          - label: Pink option C
+            value: c
+
+- title: Disabled - Entire Block
+  blocks:
+    - id: disabled_all
+      type: CheckboxSelector
+      properties:
+        title: All Disabled
+        disabled: true
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+
+- title: Disabled - Individual Options
+  blocks:
+    - id: disabled_some
+      type: CheckboxSelector
+      properties:
+        title: Some Options Disabled
+        options:
+          - label: Available
+            value: available
+          - label: Sold Out
+            value: sold_out
+            disabled: true
+          - label: In Stock
+            value: in_stock
+          - label: Backordered
+            value: backordered
+            disabled: true
+          - label: Pre-order
+            value: pre_order
+
+- title: Styled Options
+  blocks:
+    - id: styled_options
+      type: CheckboxSelector
+      properties:
+        title: Options with Custom Styles
+        options:
+          - label: High Priority
+            value: high
+            style:
+              color: '#f5222d'
+              fontWeight: bold
+          - label: Medium Priority
+            value: medium
+            style:
+              color: '#fa8c16'
+              fontWeight: 500
+          - label: Low Priority
+            value: low
+            style:
+              color: '#52c41a'
+    - id: styled_background
+      type: CheckboxSelector
+      properties:
+        title: Options with Backgrounds
+        options:
+          - label: Success
+            value: success
+            style:
+              padding: '2px 8px'
+              borderRadius: 4
+          - label: Warning
+            value: warning
+            style:
+              padding: '2px 8px'
+              borderRadius: 4
+          - label: Error
+            value: error
+            style:
+              padding: '2px 8px'
+              borderRadius: 4
+
+- title: HTML Labels
+  blocks:
+    - id: html_labels
+      type: CheckboxSelector
+      properties:
+        title: HTML in Labels
+        options:
+          - label: '<b>Bold</b> option'
+            value: bold
+          - label: '<i>Italic</i> option'
+            value: italic
+          - label: '<span style="color: #1677ff">Blue</span> option'
+            value: blue
+          - label: 'Option with <code>code</code>'
+            value: code
+
+- title: Mixed Option Types
+  blocks:
+    - id: number_options
+      type: CheckboxSelector
+      properties:
+        title: Numeric Options
+        options:
+          - label: 'One'
+            value: 1
+          - label: 'Two'
+            value: 2
+          - label: 'Three'
+            value: 3
+          - label: 'Four'
+            value: 4
+    - id: boolean_options
+      type: CheckboxSelector
+      properties:
+        title: Boolean Options
+        options:
+          - label: 'Yes'
+            value: true
+          - label: 'No'
+            value: false
+
+- title: Label Options
+  blocks:
+    - id: label_default
+      type: CheckboxSelector
+      properties:
+        title: Default Label
+        options:
+          - Red
+          - Green
+          - Blue
+    - id: label_with_colon
+      type: CheckboxSelector
+      properties:
+        title: Pick a Color
+        label:
+          colon: true
+        options:
+          - Red
+          - Green
+          - Blue
+    - id: label_no_colon
+      type: CheckboxSelector
+      properties:
+        title: Pick a Color
+        label:
+          colon: false
+        options:
+          - Red
+          - Green
+          - Blue
+    - id: label_with_extra
+      type: CheckboxSelector
+      properties:
+        title: Select Sizes
+        label:
+          extra: Select all sizes that apply.
+        options:
+          - Small
+          - Medium
+          - Large
+          - Extra Large
+    - id: label_right_aligned
+      type: CheckboxSelector
+      properties:
+        title: Right Aligned Label
+        label:
+          align: right
+          inline: true
+          span: 8
+        options:
+          - Option A
+          - Option B
+          - Option C
+
+- title: Inline Label
+  blocks:
+    - id: label_inline
+      type: CheckboxSelector
+      properties:
+        title: Inline Label
+        label:
+          inline: true
+          span: 6
+        options:
+          - Cat
+          - Dog
+          - Bird
+    - id: label_inline_wide
+      type: CheckboxSelector
+      properties:
+        title: Wide Inline Label
+        label:
+          inline: true
+          span: 10
+        options:
+          - Cat
+          - Dog
+          - Bird
+
+- title: No Label
+  blocks:
+    - id: no_label
+      type: CheckboxSelector
+      properties:
+        label:
+          disabled: true
+        options:
+          - label: I agree to the Terms of Service
+            value: tos
+          - label: I want to receive marketing emails
+            value: marketing
+          - label: I agree to the Privacy Policy
+            value: privacy
+
+- title: Label with Feedback
+  blocks:
+    - id: label_feedback_on
+      type: CheckboxSelector
+      properties:
+        title: Feedback Enabled (Default)
+        label:
+          hasFeedback: true
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: label_feedback_off
+      type: CheckboxSelector
+      properties:
+        title: Feedback Disabled
+        label:
+          hasFeedback: false
+        options:
+          - Option A
+          - Option B
+          - Option C
+
+- title: Vertical with Disabled Items
+  blocks:
+    - id: vertical_mixed_disabled
+      type: CheckboxSelector
+      properties:
+        title: Feature Flags
+        direction: vertical
+        options:
+          - label: Dark Mode
+            value: dark_mode
+          - label: Beta Features
+            value: beta
+          - label: Analytics (Coming Soon)
+            value: analytics
+            disabled: true
+          - label: Custom Themes
+            value: custom_themes
+          - label: AI Assistant (Coming Soon)
+            value: ai_assistant
+            disabled: true
+
+- title: Many Options - Horizontal Wrap
+  blocks:
+    - id: many_options_wrap
+      type: CheckboxSelector
+      properties:
+        title: Select Countries
+        direction: horizontal
+        wrap: true
+        options:
+          - USA
+          - Canada
+          - Mexico
+          - Brazil
+          - UK
+          - France
+          - Germany
+          - Italy
+          - Spain
+          - Japan
+          - China
+          - India
+          - Australia
+          - South Africa
+          - Egypt
+
+- title: Custom Style and Class
+  blocks:
+    - id: custom_style
+      type: CheckboxSelector
+      properties:
+        title: Styled Container
+        options:
+          - Alpha
+          - Beta
+          - Gamma
+      style:
+        .element:
+          padding: 12
+          borderRadius: 8
+          border: '1px solid #d9d9d9'
+    - id: custom_class
+      type: CheckboxSelector
+      class: p-4 bg-bg-layout rounded-lg
+      properties:
+        title: Tailwind Styled
+        options:
+          - Alpha
+          - Beta
+          - Gamma
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_large_checkbox
+      type: CheckboxSelector
+      properties:
+        title: Large Checkbox (controlInteractiveSize)
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+        theme:
+          controlInteractiveSize: 24
+    - id: theme_custom_colors
+      type: CheckboxSelector
+      properties:
+        title: Custom Primary Color via Theme
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+        theme:
+          colorPrimary: '#eb2f96'
+    - id: theme_custom_border
+      type: CheckboxSelector
+      properties:
+        title: Custom Border via Theme
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+        theme:
+          colorBorder: '#d48806'
+          lineWidth: 2
+          borderRadiusSM: 6
+    - id: theme_combined
+      type: CheckboxSelector
+      properties:
+        title: Combined Token Overrides
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+        theme:
+          colorPrimary: '#13c2c2'
+          colorPrimaryHover: '#36cfc9'
+          controlInteractiveSize: 20
+          borderRadiusSM: 4
+          fontSize: 16
+    - id: theme_font_size
+      type: CheckboxSelector
+      properties:
+        title: Large Font Size
+        options:
+          - Option A
+          - Option B
+          - Option C
+        theme:
+          fontSize: 18
+
+- title: Color + Direction Combinations
+  blocks:
+    - id: combo_green_vertical
+      type: CheckboxSelector
+      properties:
+        title: Green Vertical
+        color: '#52c41a'
+        direction: vertical
+        options:
+          - label: Task 1
+            value: task_1
+          - label: Task 2
+            value: task_2
+          - label: Task 3
+            value: task_3
+    - id: combo_purple_horizontal
+      type: CheckboxSelector
+      properties:
+        title: Purple Horizontal
+        color: '#722ed1'
+        direction: horizontal
+        options:
+          - label: Tag A
+            value: tag_a
+          - label: Tag B
+            value: tag_b
+          - label: Tag C
+            value: tag_c
+          - label: Tag D
+            value: tag_d
+
+- title: Real-World Examples
+  blocks:
+    - id: example_permissions
+      type: CheckboxSelector
+      properties:
+        title: User Permissions
+        direction: vertical
+        label:
+          extra: Assign the appropriate permissions for this user role.
+        options:
+          - label: '<b>Read</b> - View content'
+            value: read
+          - label: '<b>Write</b> - Create and edit content'
+            value: write
+          - label: '<b>Delete</b> - Remove content'
+            value: delete
+            style:
+              color: '#f5222d'
+          - label: '<b>Admin</b> - Full access'
+            value: admin
+            style:
+              color: '#fa8c16'
+              fontWeight: bold
+    - id: example_newsletter
+      type: CheckboxSelector
+      properties:
+        title: Newsletter Preferences
+        direction: vertical
+        color: '#1677ff'
+        label:
+          extra: Choose which newsletters you would like to receive.
+        options:
+          - label: Product Updates
+            value: product
+          - label: Engineering Blog
+            value: engineering
+          - label: Community Events
+            value: community
+          - label: Partner Offers
+            value: partners
+    - id: example_survey
+      type: CheckboxSelector
+      properties:
+        title: How did you hear about us?
+        direction: vertical
+        label:
+          colon: false
+        options:
+          - Search Engine
+          - Social Media
+          - Friend or Colleague
+          - Blog Post
+          - Conference or Event
+          - Other
+
+- title: Per-option Color
+  blocks:
+    - id: checkbox_per_option_color
+      type: CheckboxSelector
+      properties:
+        title: 'Each checked box in its option color'
+        options:
+          - label: Low
+            value: low
+            color: '#16a34a'
+          - label: Medium
+            value: medium
+            color: '#d97706'
+          - label: High
+            value: high
+            color: '#dc2626'
+- title: Data driven (valueKey)
+  blocks:
+    - id: data_checkbox_selector
+      type: CheckboxSelector
+      properties:
+        title: Permissions
+        data:
+          - { id: 1, name: Read }
+          - { id: 2, name: Write }
+          - { id: 3, name: Admin }
+        html: '{{ item.name }}'
+        valueKey: id
+- title: Columns
+  blocks:
+    - id: columns_two
+      type: CheckboxSelector
+      properties:
+        title: Two columns
+        columns: 2
+        options:
+          - Weekday mornings
+          - Weekday afternoons
+          - Weekday evenings
+          - Weekend mornings
+          - Weekend afternoons
+          - Weekend evenings
+    - id: columns_four
+      type: CheckboxSelector
+      properties:
+        title: Four columns
+        columns: 4
+        options:
+          - January
+          - February
+          - March
+          - April
+          - May
+          - June
+          - July
+          - August
+    - id: columns_responsive
+      type: CheckboxSelector
+      properties:
+        title: One column below md, three from md up
+        columns:
+          xs: 1
+          md: 3
+        options:
+          - Email
+          - SMS
+          - Push notification
+          - Webhook
+          - In-app message
+          - Weekly digest
+    - id: columns_gutter
+      type: CheckboxSelector
+      properties:
+        title: Wider gutter
+        columns: 2
+        gutter: [24, 12]
+        options:
+          - Read
+          - Write
+          - Delete
+          - Administer
+    - id: columns_per_option_color
+      type: CheckboxSelector
+      properties:
+        title: Coloured options in a grid
+        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'