@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/ColorSelector/gallery.yaml

@@ -0,0 +1,807 @@
+# 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: Setting Initial Values
+  blocks:
+    - id: init_desc
+      type: Markdown
+      properties:
+        content: 'ColorSelector is externally controlled — use an `onMount` event with `SetState` to set an initial color. Without it, the picker starts empty. The other examples on this page are initialized via the page `onInit` event.'
+    - id: init_empty
+      type: ColorSelector
+      properties:
+        title: Empty Picker
+        showText: true
+    - id: init_with_value
+      type: ColorSelector
+      properties:
+        title: Initialized Picker
+        showText: true
+      events:
+        onMount:
+          - id: set_init_with_value
+            type: SetState
+            params:
+              init_with_value: '#1677ff'
+
+- title: Sizes
+  blocks:
+    - id: size_small
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+    - id: size_middle
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: middle
+    - id: size_large
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+
+- title: Sizes with Text
+  blocks:
+    - id: size_text_small
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        showText: true
+    - id: size_text_middle
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: middle
+        showText: true
+    - id: size_text_large
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        showText: true
+
+- title: Color Formats
+  blocks:
+    - id: format_hex_label
+      type: Markdown
+      properties:
+        content: '**Hex format:**'
+    - id: format_hex
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        format: hex
+        showText: true
+    - id: format_rgb_label
+      type: Markdown
+      properties:
+        content: '**RGB format:**'
+    - id: format_rgb
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        format: rgb
+        showText: true
+    - id: format_hsb_label
+      type: Markdown
+      properties:
+        content: '**HSB format:**'
+    - id: format_hsb
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        format: hsb
+        showText: true
+
+- title: Allow Clear
+  blocks:
+    - id: allow_clear_red
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        allowClear: true
+        showText: true
+    - id: allow_clear_blue
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        allowClear: true
+        showText: true
+    - id: allow_clear_green
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        allowClear: true
+        showText: true
+
+- title: Toggle Properties
+  blocks:
+    - id: toggle_arrow_hidden
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        arrow: false
+        showText: true
+    - id: toggle_alpha_disabled
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        disabledAlpha: true
+        showText: true
+    - id: toggle_format_disabled
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        disabledFormat: true
+        showText: true
+    - id: toggle_all_disabled
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        arrow: false
+        disabledAlpha: true
+        disabledFormat: true
+        showText: true
+
+- title: Modes
+  blocks:
+    - id: mode_default
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+    - id: mode_single
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        mode: single
+        showText: true
+    - id: mode_gradient
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        mode: gradient
+        showText: true
+
+- title: Placement Options
+  blocks:
+    - id: placement_top_label
+      type: Markdown
+      properties:
+        content: '**Top:**'
+    - id: placement_top
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        placement: top
+    - id: placement_topLeft_label
+      type: Markdown
+      properties:
+        content: '**Top Left:**'
+    - id: placement_topLeft
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        placement: topLeft
+    - id: placement_topRight_label
+      type: Markdown
+      properties:
+        content: '**Top Right:**'
+    - id: placement_topRight
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        placement: topRight
+    - id: placement_bottom_label
+      type: Markdown
+      properties:
+        content: '**Bottom:**'
+    - id: placement_bottom
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        placement: bottom
+    - id: placement_bottomLeft_label
+      type: Markdown
+      properties:
+        content: '**Bottom Left:**'
+    - id: placement_bottomLeft
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        placement: bottomLeft
+
+- title: Presets
+  blocks:
+    - id: presets_brand
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        presets:
+          - label: Brand
+            colors:
+              - '#1677ff'
+              - '#13c2c2'
+              - '#52c41a'
+              - '#faad14'
+              - '#f5222d'
+              - '#722ed1'
+          - label: Neutral
+            colors:
+              - '#000000'
+              - '#333333'
+              - '#666666'
+              - '#999999'
+              - '#cccccc'
+              - '#ffffff'
+    - id: presets_extended
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        presets:
+          - label: Red
+            colors:
+              - '#fff1f0'
+              - '#ffa39e'
+              - '#ff4d4f'
+              - '#cf1322'
+              - '#820014'
+          - label: Blue
+            colors:
+              - '#e6f4ff'
+              - '#91caff'
+              - '#4096ff'
+              - '#0958d9'
+              - '#002c8c'
+          - label: Green
+            colors:
+              - '#f6ffed'
+              - '#b7eb8f'
+              - '#52c41a'
+              - '#389e0d'
+              - '#135200'
+          - label: Gold
+            colors:
+              - '#fffbe6'
+              - '#ffe58f'
+              - '#faad14'
+              - '#d48806'
+              - '#874d00'
+          - label: Purple
+            colors:
+              - '#f9f0ff'
+              - '#d3adf7'
+              - '#722ed1'
+              - '#531dab'
+              - '#22075e'
+    - id: presets_status
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        presets:
+          - label: Status
+            colors:
+              - '#52c41a'
+              - '#faad14'
+              - '#f5222d'
+              - '#1677ff'
+              - '#722ed1'
+              - '#eb2f96'
+
+- title: Trigger Modes
+  blocks:
+    - id: trigger_click_label
+      type: Markdown
+      properties:
+        content: '**Click trigger (default):**'
+    - id: trigger_click
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        trigger: click
+        showText: true
+    - id: trigger_hover_label
+      type: Markdown
+      properties:
+        content: '**Hover trigger:**'
+    - id: trigger_hover
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        trigger: hover
+        showText: true
+
+- title: Disabled State
+  blocks:
+    - id: disabled_basic
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        disabled: true
+    - id: disabled_with_text
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        disabled: true
+        showText: true
+    - id: disabled_small
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        disabled: true
+        size: small
+    - id: disabled_large
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        disabled: true
+        size: large
+
+- title: With Label
+  blocks:
+    - id: label_basic
+      type: ColorSelector
+      properties:
+        label:
+          title: Pick a color
+    - id: label_inline
+      type: ColorSelector
+      properties:
+        label:
+          title: Theme color
+          inline: true
+        showText: true
+    - id: label_colon
+      type: ColorSelector
+      properties:
+        label:
+          title: Background
+          colon: true
+        showText: true
+    - id: label_extra
+      type: ColorSelector
+      properties:
+        label:
+          title: Brand primary
+          extra: Select your primary brand color
+        showText: true
+    - id: label_disabled
+      type: ColorSelector
+      properties:
+        label:
+          title: Disabled picker
+          disabled: true
+        disabled: true
+        showText: true
+
+- title: Custom Style and Class
+  blocks:
+    - id: style_border
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      style:
+        .element:
+          border: 2px solid #1677ff
+          borderRadius: 8px
+      properties:
+        showText: true
+    - id: style_shadow
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      style:
+        .element:
+          boxShadow: 0 2px 8px rgba(0, 0, 0, 0.15)
+          borderRadius: 8px
+      properties:
+        showText: true
+    - id: style_tailwind
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        class: rounded-lg shadow-sm
+    - id: style_large_swatch
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      style:
+        .element:
+          transform: scale(1.5)
+          transformOrigin: left center
+
+- title: Combined Features
+  blocks:
+    - id: combined_full_label
+      type: Markdown
+      properties:
+        content: '**Full-featured picker:**'
+    - id: combined_full
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        format: hex
+        allowClear: true
+        size: large
+        presets:
+          - label: Recommended
+            colors:
+              - '#1677ff'
+              - '#52c41a'
+              - '#faad14'
+              - '#f5222d'
+              - '#722ed1'
+              - '#13c2c2'
+    - id: combined_minimal_label
+      type: Markdown
+      properties:
+        content: '**Minimal picker:**'
+    - id: combined_minimal
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        disabledAlpha: true
+        disabledFormat: true
+        arrow: false
+    - id: combined_text_no_alpha_label
+      type: Markdown
+      properties:
+        content: '**Text with no alpha:**'
+    - id: combined_text_no_alpha
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        format: rgb
+        disabledAlpha: true
+    - id: combined_gradient_presets_label
+      type: Markdown
+      properties:
+        content: '**Gradient mode with presets:**'
+    - id: combined_gradient_presets
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        mode: gradient
+        showText: true
+        size: large
+        presets:
+          - label: Gradients
+            colors:
+              - '#ff4d4f'
+              - '#ff7a45'
+              - '#ffa940'
+              - '#ffc53d'
+              - '#ffec3d'
+              - '#bae637'
+              - '#73d13d'
+              - '#36cfc9'
+              - '#40a9ff'
+              - '#597ef7'
+              - '#9254de'
+              - '#f759ab'
+
+- title: Multiple Pickers in a Row
+  blocks:
+    - id: multi_row
+      type: Box
+      layout:
+        gap: 12
+      blocks:
+        - id: multi_primary
+          type: ColorSelector
+          layout:
+            flex: 0 0 auto
+        - id: multi_success
+          type: ColorSelector
+          layout:
+            flex: 0 0 auto
+        - id: multi_warning
+          type: ColorSelector
+          layout:
+            flex: 0 0 auto
+        - id: multi_error
+          type: ColorSelector
+          layout:
+            flex: 0 0 auto
+        - id: multi_info
+          type: ColorSelector
+          layout:
+            flex: 0 0 auto
+        - id: multi_purple
+          type: ColorSelector
+          layout:
+            flex: 0 0 auto
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_large_handler
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        theme:
+          colorPickerHandlerSize: 24
+          colorPickerSliderHeight: 12
+    - id: theme_wide_picker
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        theme:
+          colorPickerWidth: 300
+    - id: theme_large_presets
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        theme:
+          colorPickerPresetColorSize: 32
+        presets:
+          - label: Custom
+            colors:
+              - '#1677ff'
+              - '#52c41a'
+              - '#faad14'
+              - '#f5222d'
+              - '#722ed1'
+              - '#13c2c2'
+    - id: theme_custom_border_radius
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        theme:
+          borderRadius: 16
+    - id: theme_combined
+      type: ColorSelector
+      layout:
+        flex: 0 0 auto
+      properties:
+        showText: true
+        size: large
+        theme:
+          colorPickerWidth: 280
+          colorPickerHandlerSize: 20
+          colorPickerSliderHeight: 10
+          colorPickerPresetColorSize: 28
+          borderRadius: 12
+
+- title: ColorSelector in Theme Editor
+  blocks:
+    - id: applied_theme_editor_card
+      type: Card
+      properties:
+        title: Brand Theme Settings
+      blocks:
+        - id: applied_theme_brand_name
+          type: TextInput
+          properties:
+            title: Brand Name
+            placeholder: Enter your brand name
+        - id: applied_theme_primary_color
+          type: ColorSelector
+          properties:
+            title: Primary Color
+            showText: true
+            format: hex
+            disabledAlpha: true
+            label:
+              extra: Used for buttons, links, and active elements
+            presets:
+              - label: Popular
+                colors:
+                  - '#1677ff'
+                  - '#52c41a'
+                  - '#faad14'
+                  - '#f5222d'
+                  - '#722ed1'
+                  - '#13c2c2'
+          events:
+            onMount:
+              - id: set_primary_color
+                type: SetState
+                params:
+                  applied_theme_primary_color: '#1677ff'
+            onChange:
+              - id: primary_color_change
+                type: DisplayMessage
+                params:
+                  content:
+                    _string.concat:
+                      - 'Primary color updated to '
+                      - _state: applied_theme_primary_color
+                  duration: 1
+        - id: applied_theme_secondary_color
+          type: ColorSelector
+          properties:
+            title: Secondary Color
+            showText: true
+            format: hex
+            disabledAlpha: true
+            label:
+              extra: Used for backgrounds and secondary actions
+            presets:
+              - label: Popular
+                colors:
+                  - '#f0f5ff'
+                  - '#f6ffed'
+                  - '#fffbe6'
+                  - '#fff2f0'
+                  - '#f9f0ff'
+                  - '#e6fffb'
+          events:
+            onMount:
+              - id: set_secondary_color
+                type: SetState
+                params:
+                  applied_theme_secondary_color: '#f0f5ff'
+        - id: applied_theme_save_btn
+          type: Button
+          properties:
+            title: Save Theme
+            type: primary
+            icon: AiOutlineSave
+          events:
+            onClick:
+              - id: theme_save_action
+                type: DisplayMessage
+                params:
+                  content: Brand theme saved successfully
+                  status: success
+              - id: theme_set_global
+                type: SetGlobal
+                params:
+                  primaryColor:
+                    _state: applied_theme_primary_color
+                  secondaryColor:
+                    _state: applied_theme_secondary_color
+
+- title: ColorSelector in Product Customizer
+  blocks:
+    - id: applied_product_card
+      type: Card
+      properties:
+        title: Customize Your Product
+      blocks:
+        - id: applied_product_name
+          type: TextInput
+          properties:
+            title: Product Name
+            placeholder: e.g. Custom T-Shirt
+        - id: applied_product_body_color
+          type: ColorSelector
+          properties:
+            title: Body Color
+            showText: true
+            size: large
+            disabledAlpha: true
+            presets:
+              - label: Available Colors
+                colors:
+                  - '#ffffff'
+                  - '#000000'
+                  - '#1a3c6e'
+                  - '#8b0000'
+                  - '#2e8b57'
+                  - '#daa520'
+          events:
+            onMount:
+              - id: set_body_color
+                type: SetState
+                params:
+                  applied_product_body_color: '#1a3c6e'
+            onChange:
+              - id: body_color_change
+                type: SetState
+                params:
+                  product_body_color:
+                    _state: applied_product_body_color
+        - id: applied_product_accent_color
+          type: ColorSelector
+          properties:
+            title: Accent Color
+            showText: true
+            size: large
+            disabledAlpha: true
+            presets:
+              - label: Available Colors
+                colors:
+                  - '#ff4d4f'
+                  - '#ff7a45'
+                  - '#ffc53d'
+                  - '#52c41a'
+                  - '#1677ff'
+                  - '#722ed1'
+          events:
+            onMount:
+              - id: set_accent_color
+                type: SetState
+                params:
+                  applied_product_accent_color: '#ff4d4f'
+        - id: applied_product_quantity
+          type: NumberInput
+          properties:
+            title: Quantity
+            min: 1
+            max: 100
+        - id: applied_product_add_to_cart
+          type: Button
+          properties:
+            title: Add to Cart
+            type: primary
+            icon: AiOutlineShoppingCart
+          events:
+            onClick:
+              - id: add_to_cart_action
+                type: DisplayMessage
+                params:
+                  content:
+                    _string.concat:
+                      - 'Added to cart with body color '
+                      - _state: applied_product_body_color
+                      - ' and accent color '
+                      - _state: applied_product_accent_color
+                  status: success