@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/RadioSelector/gallery.yaml

@@ -0,0 +1,816 @@
+# 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: RadioSelector
+      properties:
+        title: Favorite Color
+        options:
+          - label: Red
+            value: red
+          - label: Green
+            value: green
+          - label: Blue
+            value: blue
+          - label: Yellow
+            value: yellow
+    - id: basic_string_options
+      type: RadioSelector
+      properties:
+        title: Shirt Size
+        options:
+          - XS
+          - S
+          - M
+          - L
+          - XL
+    - id: basic_number_options
+      type: RadioSelector
+      properties:
+        title: Quantity
+        options:
+          - 1
+          - 2
+          - 5
+          - 10
+          - 25
+    - id: basic_boolean_options
+      type: RadioSelector
+      properties:
+        title: Agreement
+        options:
+          - label: 'Yes'
+            value: true
+          - label: 'No'
+            value: false
+
+- title: Direction - Horizontal
+  blocks:
+    - id: horizontal_default
+      type: RadioSelector
+      properties:
+        title: Horizontal (Default)
+        direction: horizontal
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+          - label: Option D
+            value: d
+    - id: horizontal_many
+      type: RadioSelector
+      properties:
+        title: Many Horizontal Options (Wrapping)
+        direction: horizontal
+        wrap: true
+        options:
+          - Monday
+          - Tuesday
+          - Wednesday
+          - Thursday
+          - Friday
+          - Saturday
+          - Sunday
+
+- title: Direction - Vertical
+  blocks:
+    - id: vertical_radio
+      type: RadioSelector
+      properties:
+        title: Vertical Layout
+        direction: vertical
+        options:
+          - label: Express Shipping (1-2 days)
+            value: express
+          - label: Standard Shipping (5-7 days)
+            value: standard
+          - label: Economy Shipping (10-14 days)
+            value: economy
+    - id: vertical_with_disabled
+      type: RadioSelector
+      properties:
+        title: Subscription Plan
+        direction: vertical
+        options:
+          - label: Free Tier
+            value: free
+          - label: Pro ($9/mo)
+            value: pro
+          - label: Enterprise (Contact Sales)
+            value: enterprise
+            disabled: true
+
+- title: Wrap
+  blocks:
+    - id: wrap_enabled
+      type: RadioSelector
+      properties:
+        title: Wrap Enabled (Default)
+        direction: horizontal
+        wrap: true
+        options:
+          - January
+          - February
+          - March
+          - April
+          - May
+          - June
+          - July
+          - August
+          - September
+          - October
+          - November
+          - December
+    - id: wrap_disabled
+      type: RadioSelector
+      properties:
+        title: Wrap Disabled
+        direction: horizontal
+        wrap: false
+        options:
+          - January
+          - February
+          - March
+          - April
+          - May
+          - June
+          - July
+          - August
+          - September
+          - October
+          - November
+          - December
+
+- title: Alignment
+  blocks:
+    - id: align_start
+      type: RadioSelector
+      properties:
+        title: Start Alignment (Default)
+        align: start
+        direction: vertical
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: align_center
+      type: RadioSelector
+      properties:
+        title: Center Alignment
+        align: center
+        direction: vertical
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: align_end
+      type: RadioSelector
+      properties:
+        title: End Alignment
+        align: end
+        direction: vertical
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: align_baseline
+      type: RadioSelector
+      properties:
+        title: Baseline Alignment
+        align: baseline
+        direction: horizontal
+        options:
+          - Apple
+          - Banana
+          - Cherry
+
+- title: Color Override
+  blocks:
+    - id: color_green
+      type: RadioSelector
+      properties:
+        title: Green
+        color: '#52c41a'
+        options:
+          - label: Approved
+            value: approved
+          - label: Pending
+            value: pending
+          - label: Rejected
+            value: rejected
+    - id: color_orange
+      type: RadioSelector
+      properties:
+        title: Orange
+        color: '#fa8c16'
+        options:
+          - label: Low
+            value: low
+          - label: Medium
+            value: medium
+          - label: High
+            value: high
+    - id: color_purple
+      type: RadioSelector
+      properties:
+        title: Purple
+        color: '#722ed1'
+        options:
+          - label: Bronze
+            value: bronze
+          - label: Silver
+            value: silver
+          - label: Gold
+            value: gold
+    - id: color_red
+      type: RadioSelector
+      properties:
+        title: Red
+        color: '#f5222d'
+        options:
+          - label: Critical
+            value: critical
+          - label: Warning
+            value: warning
+          - label: Info
+            value: info
+    - id: color_hex_custom
+      type: RadioSelector
+      properties:
+        title: Custom Hex (#e64980)
+        color: '#e64980'
+        options:
+          - label: Option 1
+            value: opt1
+          - label: Option 2
+            value: opt2
+          - label: Option 3
+            value: opt3
+
+- title: Disabled - Entire Block
+  blocks:
+    - id: disabled_all
+      type: RadioSelector
+      properties:
+        title: All Options Disabled
+        disabled: true
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+    - id: disabled_vertical
+      type: RadioSelector
+      properties:
+        title: Disabled Vertical
+        disabled: true
+        direction: vertical
+        options:
+          - label: Small
+            value: small
+          - label: Medium
+            value: medium
+          - label: Large
+            value: large
+
+- title: Disabled - Individual Options
+  blocks:
+    - id: disabled_single_option
+      type: RadioSelector
+      properties:
+        title: One Disabled Option
+        options:
+          - label: Available
+            value: available
+          - label: Out of Stock
+            value: out_of_stock
+            disabled: true
+          - label: In Stock
+            value: in_stock
+    - id: disabled_multiple_options
+      type: RadioSelector
+      properties:
+        title: Multiple Disabled Options
+        options:
+          - label: Standard
+            value: standard
+          - label: Premium (Sold Out)
+            value: premium
+            disabled: true
+          - label: Enterprise (Coming Soon)
+            value: enterprise
+            disabled: true
+          - label: Basic
+            value: basic
+
+- title: Option Styles
+  blocks:
+    - id: styled_options
+      type: RadioSelector
+      properties:
+        title: Custom Option Styles
+        options:
+          - label: '<b>Bold Label</b>'
+            value: bold
+            style:
+              fontWeight: bold
+          - label: Highlighted
+            value: highlighted
+            style:
+              padding: '2px 8px'
+              borderRadius: 4
+          - label: Italic
+            value: italic
+            style:
+              fontStyle: italic
+    - id: styled_colored_labels
+      type: RadioSelector
+      properties:
+        title: Colored Labels
+        options:
+          - label: '<span style="color: #52c41a;">Success</span>'
+            value: success
+          - label: '<span style="color: #faad14;">Warning</span>'
+            value: warning
+          - label: '<span style="color: #ff4d4f;">Error</span>'
+            value: error
+          - label: '<span style="color: #1677ff;">Info</span>'
+            value: info
+    - id: styled_vertical_cards
+      type: RadioSelector
+      properties:
+        title: Styled Vertical Options
+        direction: vertical
+        options:
+          - label: Free Plan
+            value: free
+            style:
+              padding: '4px 12px'
+              borderRadius: 6
+              marginBottom: 4
+          - label: Pro Plan
+            value: pro
+            style:
+              padding: '4px 12px'
+              borderRadius: 6
+              marginBottom: 4
+          - label: Enterprise Plan
+            value: enterprise
+            style:
+              padding: '4px 12px'
+              borderRadius: 6
+
+- title: HTML Labels
+  blocks:
+    - id: html_bold_labels
+      type: RadioSelector
+      properties:
+        title: HTML in Labels
+        options:
+          - label: '<b>Important</b> option'
+            value: important
+          - label: 'Normal option'
+            value: normal
+          - label: '<i>Italic</i> option'
+            value: italic
+    - id: html_rich_labels
+      type: RadioSelector
+      properties:
+        title: Rich HTML Labels
+        direction: vertical
+        options:
+          - label: '<b>Starter</b> &mdash; Basic features for individuals'
+            value: starter
+          - label: '<b>Professional</b> &mdash; Advanced features for teams'
+            value: professional
+          - label: '<b>Enterprise</b> &mdash; Custom solutions for organizations'
+            value: enterprise
+
+- title: Label Options
+  blocks:
+    - id: label_default
+      type: RadioSelector
+      properties:
+        title: Default Label
+        options:
+          - Yes
+          - No
+          - Maybe
+    - id: label_with_extra
+      type: RadioSelector
+      properties:
+        title: Label with Extra
+        label:
+          extra: Select the option that best describes your preference.
+        options:
+          - label: Strongly Agree
+            value: strongly_agree
+          - label: Agree
+            value: agree
+          - label: Neutral
+            value: neutral
+          - label: Disagree
+            value: disagree
+    - id: label_colon_false
+      type: RadioSelector
+      properties:
+        title: Label Without Colon
+        label:
+          colon: false
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: label_inline
+      type: RadioSelector
+      properties:
+        title: Inline Label
+        label:
+          inline: true
+          span: 8
+        options:
+          - label: Left
+            value: left
+          - label: Center
+            value: center
+          - label: Right
+            value: right
+    - id: label_right_align
+      type: RadioSelector
+      properties:
+        title: Right Aligned Label
+        label:
+          inline: true
+          span: 8
+          align: right
+        options:
+          - label: Small
+            value: sm
+          - label: Medium
+            value: md
+          - label: Large
+            value: lg
+
+- title: No Label
+  blocks:
+    - id: no_label_radio
+      type: RadioSelector
+      properties:
+        label:
+          disabled: true
+        options:
+          - label: Yes
+            value: true
+          - label: No
+            value: false
+          - label: Maybe
+            value: maybe
+    - id: no_label_vertical
+      type: RadioSelector
+      properties:
+        label:
+          disabled: true
+        direction: vertical
+        options:
+          - label: Daily digest
+            value: daily
+          - label: Weekly summary
+            value: weekly
+          - label: No emails
+            value: none
+
+- title: Style and Class Overrides
+  blocks:
+    - id: style_border
+      type: RadioSelector
+      style:
+        .element:
+          border: 1px solid #d9d9d9
+          borderRadius: 8
+          padding: 16
+      properties:
+        title: Bordered Container
+        label:
+          disabled: true
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+    - id: style_background
+      type: RadioSelector
+      style:
+        .element:
+          padding: 12
+          borderRadius: 6
+      properties:
+        title: Custom Background
+        label:
+          disabled: true
+        options:
+          - label: React
+            value: react
+          - label: Vue
+            value: vue
+          - label: Angular
+            value: angular
+    - id: class_override
+      type: RadioSelector
+      class: p-4 rounded-lg shadow-sm border
+      properties:
+        title: With Tailwind Class
+        label:
+          disabled: true
+        options:
+          - label: Light Mode
+            value: light
+          - label: Dark Mode
+            value: dark
+          - label: System
+            value: system
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_large_radio
+      type: RadioSelector
+      properties:
+        title: Large Radio Buttons
+        theme:
+          radioSize: 20
+          dotSize: 10
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+    - id: theme_custom_colors
+      type: RadioSelector
+      properties:
+        title: Custom Theme Colors
+        theme:
+          colorPrimary: '#722ed1'
+          colorBorder: '#d3adf7'
+        options:
+          - label: Purple A
+            value: a
+          - label: Purple B
+            value: b
+          - label: Purple C
+            value: c
+    - id: theme_spacing
+      type: RadioSelector
+      properties:
+        title: Wide Spacing
+        theme:
+          wrapperMarginInlineEnd: 24
+        options:
+          - label: Spaced A
+            value: a
+          - label: Spaced B
+            value: b
+          - label: Spaced C
+            value: c
+    - id: theme_combined
+      type: RadioSelector
+      properties:
+        title: Combined Token Overrides
+        theme:
+          radioSize: 22
+          dotSize: 12
+          colorPrimary: '#eb2f96'
+          wrapperMarginInlineEnd: 20
+        options:
+          - label: Pink A
+            value: a
+          - label: Pink B
+            value: b
+          - label: Pink C
+            value: c
+    - id: theme_green
+      type: RadioSelector
+      properties:
+        title: Green Theme
+        direction: vertical
+        theme:
+          colorPrimary: '#52c41a'
+          radioSize: 18
+          dotSize: 8
+        options:
+          - label: Approved
+            value: approved
+          - label: Pending Review
+            value: pending
+          - label: Rejected
+            value: rejected
+
+- title: Complex Options
+  blocks:
+    - id: object_values
+      type: RadioSelector
+      properties:
+        title: Object Values
+        direction: vertical
+        options:
+          - label: Admin (Full Access)
+            value:
+              role: admin
+              level: 3
+          - label: Editor (Read/Write)
+            value:
+              role: editor
+              level: 2
+          - label: Viewer (Read Only)
+            value:
+              role: viewer
+              level: 1
+    - id: mixed_disabled_styled
+      type: RadioSelector
+      properties:
+        title: Mixed Disabled and Styled
+        direction: vertical
+        options:
+          - label: '<b>Recommended:</b> Standard Plan'
+            value: standard
+            style:
+              padding: '4px 12px'
+              borderRadius: 4
+          - label: Basic Plan
+            value: basic
+          - label: Legacy Plan (Discontinued)
+            value: legacy
+            disabled: true
+            style:
+              textDecoration: line-through
+
+- title: Real-World Examples
+  blocks:
+    - id: example_payment
+      type: RadioSelector
+      properties:
+        title: Payment Method
+        direction: vertical
+        options:
+          - label: '<b>Credit Card</b> &mdash; Visa, Mastercard, Amex'
+            value: credit_card
+          - label: '<b>PayPal</b> &mdash; Pay with your PayPal account'
+            value: paypal
+          - label: '<b>Bank Transfer</b> &mdash; Direct bank payment'
+            value: bank_transfer
+          - label: '<b>Crypto</b> &mdash; Bitcoin, Ethereum'
+            value: crypto
+            disabled: true
+    - id: example_frequency
+      type: RadioSelector
+      properties:
+        title: Notification Frequency
+        color: '#1677ff'
+        options:
+          - label: Instant
+            value: instant
+          - label: Hourly
+            value: hourly
+          - label: Daily
+            value: daily
+          - label: Weekly
+            value: weekly
+          - label: Never
+            value: never
+    - id: example_rating
+      type: RadioSelector
+      properties:
+        title: Satisfaction Rating
+        direction: horizontal
+        color: '#faad14'
+        options:
+          - label: '&#x2B50; 1'
+            value: 1
+          - label: '&#x2B50; 2'
+            value: 2
+          - label: '&#x2B50; 3'
+            value: 3
+          - label: '&#x2B50; 4'
+            value: 4
+          - label: '&#x2B50; 5'
+            value: 5
+    - id: example_priority
+      type: RadioSelector
+      properties:
+        title: Task Priority
+        direction: vertical
+        options:
+          - label: '<span style="color: #ff4d4f;">&#x1F534; Critical</span>'
+            value: critical
+          - label: '<span style="color: #fa8c16;">&#x1F7E0; High</span>'
+            value: high
+          - label: '<span style="color: #faad14;">&#x1F7E1; Medium</span>'
+            value: medium
+          - label: '<span style="color: #52c41a;">&#x1F7E2; Low</span>'
+            value: low
+
+- title: Per-option Color
+  blocks:
+    - id: radio_per_option_color
+      type: RadioSelector
+      properties:
+        title: 'Selected dot + label 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_radio_selector
+      type: RadioSelector
+      properties:
+        title: Notify by
+        data:
+          - { id: 1, name: Email }
+          - { id: 2, name: SMS }
+          - { id: 3, name: Push }
+        html: '{{ item.name }}'
+        valueKey: id
+- title: Columns
+  blocks:
+    - id: radio_columns_two
+      type: RadioSelector
+      properties:
+        title: Two columns
+        columns: 2
+        options:
+          - Weekday mornings
+          - Weekday afternoons
+          - Weekday evenings
+          - Weekend mornings
+          - Weekend afternoons
+          - Weekend evenings
+    - id: radio_columns_responsive
+      type: RadioSelector
+      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: radio_columns_gutter
+      type: RadioSelector
+      properties:
+        title: Wider gutter
+        columns: 2
+        gutter: [24, 12]
+        options:
+          - Read only
+          - Read and write
+          - Administer
+          - No access
+    - id: radio_columns_per_option_color
+      type: RadioSelector
+      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'