@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/Modal/gallery.yaml

@@ -0,0 +1,1039 @@
+# 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 Modal
+  blocks:
+    - id: modal_basic_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: modal_basic_open
+            type: CallMethod
+            params:
+              blockId: modal_basic
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_basic
+      type: Modal
+      properties:
+        title: Basic Modal
+      blocks:
+        - id: modal_basic_p1
+          type: Paragraph
+          properties:
+            content: This is a basic modal dialog with a title, content area, and default Ok/Cancel buttons.
+        - id: modal_basic_p2
+          type: Paragraph
+          properties:
+            content: Click Ok to confirm or Cancel to dismiss.
+
+- title: Title Property
+  blocks:
+    - id: modal_html_title_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal with HTML Title
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_html_title_open
+            type: CallMethod
+            params:
+              blockId: modal_html_title
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_html_title
+      type: Modal
+      properties:
+        title: '<b>Bold</b> and <em>italic</em> title'
+      blocks:
+        - id: modal_html_title_content
+          type: Paragraph
+          properties:
+            content: The modal title supports HTML markup for rich text formatting.
+
+- title: Custom Button Text
+  blocks:
+    - id: modal_btn_text_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_btn_text_open
+            type: CallMethod
+            params:
+              blockId: modal_btn_text
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_btn_text
+      type: Modal
+      properties:
+        title: Custom Button Text
+        okText: Save Changes
+        cancelText: Discard
+      blocks:
+        - id: modal_btn_text_content
+          type: Paragraph
+          properties:
+            content: The okText and cancelText properties customize the footer button labels. This modal uses "Save Changes" and "Discard" instead of "Ok" and "Cancel".
+
+- title: Custom Button Props
+  blocks:
+    - id: modal_btn_props_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal with Custom Buttons
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_btn_props_open
+            type: CallMethod
+            params:
+              blockId: modal_btn_props
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_btn_props
+      type: Modal
+      properties:
+        title: Danger Confirmation
+        okText: Delete
+        cancelText: Keep
+        okButtonProps:
+          danger: true
+        cancelButtonProps:
+          type: primary
+      blocks:
+        - id: modal_btn_props_content
+          type: Paragraph
+          properties:
+            content: Custom button props allow fine-grained control over the footer buttons. Here the Ok button is styled as a danger button, and the Cancel button uses primary styling.
+
+- title: Centered Modal
+  blocks:
+    - id: modal_centered_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Centered Modal
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_centered_open
+            type: CallMethod
+            params:
+              blockId: modal_centered
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_centered
+      type: Modal
+      properties:
+        title: Centered Modal
+        centered: true
+      blocks:
+        - id: modal_centered_content
+          type: Paragraph
+          properties:
+            content: This modal is vertically centered in the viewport. By default, modals appear near the top of the page.
+
+- title: Custom Widths
+  blocks:
+    - id: modal_narrow_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Narrow (300px)
+        color: primary
+        variant: outlined
+        size: small
+      events:
+        onClick:
+          - id: modal_narrow_open
+            type: CallMethod
+            params:
+              blockId: modal_narrow
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_wide_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Wide (800px)
+        color: primary
+        variant: outlined
+        size: small
+      events:
+        onClick:
+          - id: modal_wide_open
+            type: CallMethod
+            params:
+              blockId: modal_wide
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_pct_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Percentage (80%)
+        color: primary
+        variant: outlined
+        size: small
+      events:
+        onClick:
+          - id: modal_pct_open
+            type: CallMethod
+            params:
+              blockId: modal_pct
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_narrow
+      type: Modal
+      properties:
+        title: Narrow Modal
+        width: 300
+      blocks:
+        - id: modal_narrow_content
+          type: Paragraph
+          properties:
+            content: A compact 300px modal, suitable for simple confirmations.
+    - id: modal_wide
+      type: Modal
+      properties:
+        title: Wide Modal
+        width: 800
+      blocks:
+        - id: modal_wide_content
+          type: Paragraph
+          properties:
+            content: An 800px wide modal with more room for complex content like forms, tables, or detail views.
+    - id: modal_pct
+      type: Modal
+      properties:
+        title: 80% Width Modal
+        width: '80%'
+      blocks:
+        - id: modal_pct_content
+          type: Paragraph
+          properties:
+            content: Using a percentage width makes the modal responsive, taking up 80% of the viewport width.
+
+- title: Closable Options
+  blocks:
+    - id: modal_closable_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Closable (default)
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_closable_open
+            type: CallMethod
+            params:
+              blockId: modal_closable
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_not_closable_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No Close Button
+        color: danger
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_not_closable_open
+            type: CallMethod
+            params:
+              blockId: modal_not_closable
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_closable
+      type: Modal
+      properties:
+        title: Closable Modal
+        closable: true
+      blocks:
+        - id: modal_closable_content
+          type: Paragraph
+          properties:
+            content: The close button is visible in the top right corner. This is the default behavior.
+    - id: modal_not_closable
+      type: Modal
+      properties:
+        title: No Close Button
+        closable: false
+      blocks:
+        - id: modal_not_closable_content
+          type: Paragraph
+          properties:
+            content: The close (x) button is hidden. Users must use the Ok or Cancel buttons to close this modal.
+
+- title: Mask Options
+  blocks:
+    - id: modal_mask_not_closable_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Mask Not Closable
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_mask_not_closable_open
+            type: CallMethod
+            params:
+              blockId: modal_mask_not_closable
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_no_mask_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No Mask
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_no_mask_open
+            type: CallMethod
+            params:
+              blockId: modal_no_mask
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_mask_not_closable
+      type: Modal
+      properties:
+        title: Mask Not Closable
+        maskClosable: false
+      blocks:
+        - id: modal_mask_not_closable_content
+          type: Paragraph
+          properties:
+            content: The mask is visible but clicking it does not close the modal. Users must use the buttons or close icon.
+    - id: modal_no_mask
+      type: Modal
+      properties:
+        title: No Mask
+        mask: false
+      blocks:
+        - id: modal_no_mask_content
+          type: Paragraph
+          properties:
+            content: No mask overlay is shown behind the modal. The page content remains fully visible.
+
+- title: No Footer
+  blocks:
+    - id: modal_no_footer_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal (no footer)
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_no_footer_open
+            type: CallMethod
+            params:
+              blockId: modal_no_footer
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_no_footer
+      type: Modal
+      properties:
+        title: No Footer Modal
+        footer: false
+      blocks:
+        - id: modal_no_footer_content
+          type: Paragraph
+          properties:
+            content: Setting footer to false removes the Ok and Cancel buttons entirely. This is useful for informational dialogs or when you provide your own action buttons in the content area.
+        - id: modal_no_footer_close_btn
+          type: Button
+          properties:
+            title: Close
+            color: primary
+            variant: solid
+            block: true
+          events:
+            onClick:
+              - id: modal_no_footer_close
+                type: CallMethod
+                params:
+                  blockId: modal_no_footer
+                  method: setOpen
+                  args:
+                    - open: false
+
+- title: Custom Footer Slot
+  blocks:
+    - id: modal_footer_slot_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal with Custom Footer
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: modal_footer_slot_open
+            type: CallMethod
+            params:
+              blockId: modal_footer_slot
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_footer_slot
+      type: Modal
+      properties:
+        title: Custom Footer
+      slots:
+        footer:
+          blocks:
+            - id: modal_footer_slot_row
+              type: Box
+              layout:
+                gap: 8
+                justify: space-between
+              blocks:
+                - id: modal_footer_delete_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Delete
+                    color: danger
+                    variant: text
+                    icon: AiOutlineDelete
+                - id: modal_footer_actions
+                  type: Box
+                  layout:
+                    flex: 0 0 auto
+                    gap: 8
+                  blocks:
+                    - id: modal_footer_cancel_btn
+                      type: Button
+                      layout:
+                        flex: 0 0 auto
+                      properties:
+                        title: Cancel
+                        color: default
+                        variant: outlined
+                      events:
+                        onClick:
+                          - id: modal_footer_cancel_close
+                            type: CallMethod
+                            params:
+                              blockId: modal_footer_slot
+                              method: setOpen
+                              args:
+                                - open: false
+                    - id: modal_footer_save_btn
+                      type: Button
+                      layout:
+                        flex: 0 0 auto
+                      properties:
+                        title: Save
+                        color: primary
+                        variant: solid
+                        icon: AiOutlineSave
+                      events:
+                        onClick:
+                          - id: modal_footer_save_close
+                            type: CallMethod
+                            params:
+                              blockId: modal_footer_slot
+                              method: setOpen
+                              args:
+                                - open: false
+      blocks:
+        - id: modal_footer_slot_content
+          type: Paragraph
+          properties:
+            content: The footer slot replaces the default Ok/Cancel buttons with custom content. This example shows a Delete button on the left and Save/Cancel on the right.
+
+- title: Wrapper Style
+  blocks:
+    - id: modal_wrapper_style_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal with Wrapper Style
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_wrapper_style_open
+            type: CallMethod
+            params:
+              blockId: modal_wrapper_style
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_wrapper_style
+      type: Modal
+      properties:
+        title: Wrapper Style Modal
+        wrapperStyle:
+          overflow: hidden
+      blocks:
+        - id: modal_wrapper_style_content
+          type: Paragraph
+          properties:
+            content: The wrapperStyle property applies CSS to the modal wrapper element. This can control overflow, positioning, and other layout aspects of the wrapper container.
+
+- title: Custom Z-Index
+  blocks:
+    - id: modal_zindex_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal (z-index 2000)
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_zindex_open
+            type: CallMethod
+            params:
+              blockId: modal_zindex
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_zindex
+      type: Modal
+      properties:
+        title: High Z-Index Modal
+        zIndex: 2000
+      blocks:
+        - id: modal_zindex_content
+          type: Paragraph
+          properties:
+            content: This modal uses a custom z-index of 2000 to ensure it appears above other overlays. The default is 1000.
+
+- title: Toggle Method
+  blocks:
+    - id: modal_toggle_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Toggle Modal
+        color: primary
+        variant: solid
+        icon: AiOutlineSwap
+      events:
+        onClick:
+          - id: modal_toggle_call
+            type: CallMethod
+            params:
+              blockId: modal_toggle
+              method: toggleOpen
+    - id: modal_toggle
+      type: Modal
+      properties:
+        title: Toggle Modal
+      blocks:
+        - id: modal_toggle_content
+          type: Paragraph
+          properties:
+            content: This modal uses the toggleOpen method. Each click of the button alternates between open and closed states.
+
+- title: Events
+  blocks:
+    - id: modal_events_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal with Events
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: modal_events_open
+            type: CallMethod
+            params:
+              blockId: modal_events
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_events
+      type: Modal
+      properties:
+        title: Modal with Events
+      events:
+        onOpen:
+          - id: modal_events_on_open
+            type: DisplayMessage
+            params:
+              content: Modal opened.
+              status: info
+        onOk:
+          - id: modal_events_on_ok
+            type: DisplayMessage
+            params:
+              content: Ok button clicked.
+              status: success
+        onCancel:
+          - id: modal_events_on_cancel
+            type: DisplayMessage
+            params:
+              content: Cancel button clicked.
+              status: warning
+        onClose:
+          - id: modal_events_on_close
+            type: DisplayMessage
+            params:
+              content: Modal closed.
+              status: info
+      blocks:
+        - id: modal_events_content
+          type: Paragraph
+          properties:
+            content: This modal demonstrates all four events. onOpen fires when the modal opens, onOk when the Ok button is clicked, onCancel when Cancel is clicked, and onClose fires after either onOk or onCancel completes.
+
+- title: Theme Token Overrides
+  blocks:
+    - id: modal_theme_blue_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Blue Themed Modal
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: modal_theme_blue_open
+            type: CallMethod
+            params:
+              blockId: modal_theme_blue
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_theme_blue
+      type: Modal
+      properties:
+        title: Blue Theme Modal
+        theme:
+          titleColor: '#0958d9'
+          titleFontSize: 20
+          titleLineHeight: 1.8
+          borderRadiusLG: 16
+      blocks:
+        - id: modal_theme_blue_content
+          type: Paragraph
+          properties:
+            content: This modal overrides design tokens via the theme property. The header has a blue background, custom title color and size, and larger border radius.
+    - id: modal_theme_warm_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Warm Themed Modal
+        color: default
+        variant: solid
+      events:
+        onClick:
+          - id: modal_theme_warm_open
+            type: CallMethod
+            params:
+              blockId: modal_theme_warm
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_theme_warm
+      type: Modal
+      properties:
+        title: Warm Theme Modal
+        theme:
+          titleColor: '#d46b08'
+          colorBgMask: 'rgba(250, 173, 20, 0.1)'
+          borderRadiusLG: 20
+          headerBorderBottom: 1px solid #ffd591
+          footerBorderTop: 1px solid #ffd591
+          headerMarginBottom: 0
+          footerMarginTop: 0
+          headerPadding: 16px 24px
+          bodyPadding: 24
+          footerPadding: 16px 24px
+      blocks:
+        - id: modal_theme_warm_content
+          type: Paragraph
+          properties:
+            content: A warm-toned modal using an extensive set of theme tokens including headerBg, contentBg, footerBg, titleColor, colorBgMask, headerBorderBottom, footerBorderTop, headerPadding, bodyPadding, footerPadding, and margin tokens.
+
+- title: Styled Modal (CSS Keys)
+  blocks:
+    - id: modal_styled_body_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Styled Modal
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: modal_styled_body_open
+            type: CallMethod
+            params:
+              blockId: modal_styled_body
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_styled_body
+      type: Modal
+      properties:
+        title: Styled Modal
+      style:
+        .body:
+          padding: 24px
+        .mask:
+          backgroundColor: 'rgba(0, 100, 0, 0.15)'
+      blocks:
+        - id: modal_styled_body_content
+          type: Paragraph
+          properties:
+            content: This modal uses style.body and style.mask to apply custom background colors. The body has a green tint and the mask has a subtle green overlay.
+    - id: modal_styled_wrapper_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal with Wrapper Style
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: modal_styled_wrapper_open
+            type: CallMethod
+            params:
+              blockId: modal_styled_wrapper
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_styled_wrapper
+      type: Modal
+      properties:
+        title: Custom Wrapper Style
+      style:
+        .element:
+          borderRadius: 20px
+        .wrapper:
+          backdropFilter: blur(2px)
+      blocks:
+        - id: modal_styled_wrapper_content
+          type: Paragraph
+          properties:
+            content: The element, wrapper, header, body, footer, mask, and content CSS keys allow targeting different parts of the modal with inline styles or Tailwind classes.
+
+- title: CSS Key Classes (Tailwind)
+  blocks:
+    - id: modal_css_keys_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Modal with Tailwind Classes
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: modal_css_keys_open
+            type: CallMethod
+            params:
+              blockId: modal_css_keys
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_css_keys
+      type: Modal
+      properties:
+        title: Tailwind Styled Modal
+      class:
+        header: bg-bg-layout
+        body: bg-bg-layout p-8
+        footer: bg-bg-layout
+        content: rounded-2xl overflow-hidden
+      blocks:
+        - id: modal_css_keys_content
+          type: Paragraph
+          properties:
+            content: 'Modal supports these CSS keys for Tailwind class targeting: element, header, body, footer, mask, wrapper, content. Use class as an object to apply Tailwind utilities to each area independently.'
+
+- title: Modal as User Profile Editor
+  blocks:
+    - id: modal_profile_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Edit Profile
+        color: primary
+        variant: solid
+        icon: AiOutlineEdit
+      events:
+        onClick:
+          - id: modal_profile_open
+            type: CallMethod
+            params:
+              blockId: modal_profile
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_profile
+      type: Modal
+      properties:
+        title: Edit Your Profile
+        width: 640
+        okText: Save Profile
+        cancelText: Cancel
+        centered: true
+        theme:
+          headerBorderBottom: 1px solid #f0f0f0
+          headerMarginBottom: 0
+      events:
+        onOk:
+          - id: modal_profile_save
+            type: DisplayMessage
+            params:
+              content: Profile saved successfully.
+              status: success
+      blocks:
+        - id: modal_profile_avatar_row
+          type: Box
+          layout:
+            gap: 16
+            align: center
+          blocks:
+            - id: modal_profile_avatar
+              type: Avatar
+              layout:
+                flex: 0 0 auto
+              properties:
+                icon: AiOutlineUser
+                size: 72
+                color: '#fff'
+                backgroundColor: '#1677ff'
+            - id: modal_profile_info
+              type: Box
+              layout:
+                flex: 1 1 0
+                direction: column
+                gap: 4
+              blocks:
+                - id: modal_profile_name_title
+                  type: Title
+                  properties:
+                    content: Jane Cooper
+                    level: 4
+                - id: modal_profile_role_text
+                  type: Paragraph
+                  properties:
+                    content: Senior Product Designer
+        - id: modal_profile_divider
+          type: Divider
+        - id: modal_profile_name_input
+          type: TextInput
+          properties:
+            title: Full Name
+            placeholder: Enter your full name
+        - id: modal_profile_email_input
+          type: TextInput
+          properties:
+            title: Email Address
+            placeholder: Enter your email
+        - id: modal_profile_bio_input
+          type: TextArea
+          properties:
+            title: Bio
+            placeholder: Tell us about yourself
+            rows: 3
+
+- title: Modal as Confirmation Dialog
+  blocks:
+    - id: modal_confirm_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Delete Project
+        color: danger
+        variant: solid
+        icon: AiOutlineDelete
+      events:
+        onClick:
+          - id: modal_confirm_open
+            type: CallMethod
+            params:
+              blockId: modal_confirm
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_confirm
+      type: Modal
+      properties:
+        title: Delete Project?
+        width: 420
+        centered: true
+        okText: Delete Permanently
+        cancelText: Keep Project
+        okButtonProps:
+          danger: true
+        closable: false
+        maskClosable: false
+        theme:
+          titleColor: '#cf1322'
+      events:
+        onOk:
+          - id: modal_confirm_delete
+            type: DisplayMessage
+            params:
+              content: Project deleted.
+              status: success
+        onCancel:
+          - id: modal_confirm_keep
+            type: DisplayMessage
+            params:
+              content: Project kept.
+              status: info
+      blocks:
+        - id: modal_confirm_warning
+          type: Paragraph
+          properties:
+            content: This action cannot be undone. All project data, files, and team assignments will be permanently removed.
+        - id: modal_confirm_details
+          type: Descriptions
+          properties:
+            column: 1
+            size: small
+            items:
+              - label: Project
+                value: Project Alpha
+              - label: Owner
+                value: Jane Cooper
+              - label: Files
+                value: 248 files (1.2 GB)
+
+- title: Modal as Image Preview
+  blocks:
+    - id: modal_image_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Preview Image
+        color: primary
+        variant: outlined
+        icon: AiOutlinePicture
+      events:
+        onClick:
+          - id: modal_image_open
+            type: CallMethod
+            params:
+              blockId: modal_image
+              method: setOpen
+              args:
+                - open: true
+    - id: modal_image
+      type: Modal
+      properties:
+        title: Mountain Landscape
+        width: 720
+        footer: false
+        centered: true
+        theme:
+          bodyPadding: 0
+          headerMarginBottom: 0
+      blocks:
+        - id: modal_image_html
+          type: Html
+          properties:
+            html: '<img src="https://picsum.photos/seed/mountain/700/400" alt="Mountain landscape" style="width:100%; display:block;" />'
+        - id: modal_image_caption
+          type: Box
+          layout:
+            gap: 8
+            align: center
+            justify: space-between
+          class: p-4
+          blocks:
+            - id: modal_image_desc
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              properties:
+                content: A serene mountain landscape captured at golden hour. Photography by John Doe.
+            - id: modal_image_tags
+              type: Box
+              layout:
+                flex: 0 0 auto
+                gap: 8
+              blocks:
+                - id: modal_image_tag1
+                  type: Tag
+                  properties:
+                    title: Photography
+                    color: blue
+                - id: modal_image_tag2
+                  type: Tag
+                  properties:
+                    title: Featured
+                    color: gold