@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/Drawer/gallery.yaml

@@ -0,0 +1,1257 @@
+# 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 Drawer
+  blocks:
+    - id: drawer_basic_trigger
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Drawer
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: drawer_basic_open
+            type: CallMethod
+            params:
+              blockId: drawer_basic
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_basic
+      type: Drawer
+      properties:
+        title: Basic Drawer
+      blocks:
+        - id: drawer_basic_p1
+          type: Paragraph
+          properties:
+            content: This is a basic drawer with a title and default settings. It opens from the right side with a width of 256px.
+        - id: drawer_basic_p2
+          type: Paragraph
+          properties:
+            content: Click the X button or the mask area to close it.
+
+- title: Placements
+  blocks:
+    - id: drawer_place_right_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Right (default)
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_place_right_open
+            type: CallMethod
+            params:
+              blockId: drawer_place_right
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_place_left_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Left
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_place_left_open
+            type: CallMethod
+            params:
+              blockId: drawer_place_left
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_place_top_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Top
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_place_top_open
+            type: CallMethod
+            params:
+              blockId: drawer_place_top
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_place_bottom_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Bottom
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_place_bottom_open
+            type: CallMethod
+            params:
+              blockId: drawer_place_bottom
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_place_right
+      type: Drawer
+      properties:
+        title: Right Placement
+        placement: right
+      blocks:
+        - id: drawer_place_right_content
+          type: Paragraph
+          properties:
+            content: This drawer slides in from the right side, which is the default placement.
+    - id: drawer_place_left
+      type: Drawer
+      properties:
+        title: Left Placement
+        placement: left
+      blocks:
+        - id: drawer_place_left_content
+          type: Paragraph
+          properties:
+            content: This drawer slides in from the left side. Useful for navigation panels.
+    - id: drawer_place_top
+      type: Drawer
+      properties:
+        title: Top Placement
+        placement: top
+        height: 300
+      blocks:
+        - id: drawer_place_top_content
+          type: Paragraph
+          properties:
+            content: This drawer slides in from the top. Use the height property instead of width for top and bottom placements.
+    - id: drawer_place_bottom
+      type: Drawer
+      properties:
+        title: Bottom Placement
+        placement: bottom
+        height: 300
+      blocks:
+        - id: drawer_place_bottom_content
+          type: Paragraph
+          properties:
+            content: This drawer slides in from the bottom. Commonly used for mobile action sheets or bottom panels.
+
+- title: Custom Sizes
+  blocks:
+    - id: drawer_narrow_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Narrow (200px)
+        color: primary
+        variant: outlined
+        size: small
+      events:
+        onClick:
+          - id: drawer_narrow_open
+            type: CallMethod
+            params:
+              blockId: drawer_narrow
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_wide_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Wide (500px)
+        color: primary
+        variant: outlined
+        size: small
+      events:
+        onClick:
+          - id: drawer_wide_open
+            type: CallMethod
+            params:
+              blockId: drawer_wide
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_pct_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Percentage (60%)
+        color: primary
+        variant: outlined
+        size: small
+      events:
+        onClick:
+          - id: drawer_pct_open
+            type: CallMethod
+            params:
+              blockId: drawer_pct
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_narrow
+      type: Drawer
+      properties:
+        title: Narrow Drawer
+        width: 200
+      blocks:
+        - id: drawer_narrow_content
+          type: Paragraph
+          properties:
+            content: A narrow 200px drawer, suitable for simple menus or quick settings.
+    - id: drawer_wide
+      type: Drawer
+      properties:
+        title: Wide Drawer
+        width: 500
+      blocks:
+        - id: drawer_wide_content
+          type: Paragraph
+          properties:
+            content: A 500px wide drawer with more room for complex content like forms, tables, or detail views.
+    - id: drawer_pct
+      type: Drawer
+      properties:
+        title: 60% Width Drawer
+        width: '60%'
+      blocks:
+        - id: drawer_pct_content
+          type: Paragraph
+          properties:
+            content: Using a percentage width makes the drawer responsive. This drawer takes up 60% of the viewport width.
+
+- title: Closable Options
+  blocks:
+    - id: drawer_closable_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Closable (default)
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_closable_open
+            type: CallMethod
+            params:
+              blockId: drawer_closable
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_not_closable_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No Close Button
+        color: danger
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_not_closable_open
+            type: CallMethod
+            params:
+              blockId: drawer_not_closable
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_closable
+      type: Drawer
+      properties:
+        title: Closable Drawer
+        closable: true
+      blocks:
+        - id: drawer_closable_content
+          type: Paragraph
+          properties:
+            content: The close button is visible in the top right corner. This is the default behavior.
+    - id: drawer_not_closable
+      type: Drawer
+      properties:
+        title: No Close Button
+        closable: false
+      blocks:
+        - id: drawer_not_closable_content
+          type: Paragraph
+          properties:
+            content: The close (x) button is hidden. Users can still close by clicking the mask or pressing Escape.
+        - id: drawer_not_closable_close_btn
+          type: Button
+          properties:
+            title: Close Drawer
+            color: primary
+            variant: solid
+          events:
+            onClick:
+              - id: drawer_not_closable_close
+                type: CallMethod
+                params:
+                  blockId: drawer_not_closable
+                  method: setOpen
+                  args:
+                    - open: false
+
+- title: Mask Options
+  blocks:
+    - id: drawer_mask_default_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: With Mask (default)
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_mask_default_open
+            type: CallMethod
+            params:
+              blockId: drawer_mask_default
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_no_mask_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: No Mask
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_no_mask_open
+            type: CallMethod
+            params:
+              blockId: drawer_no_mask
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_mask_no_close_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Mask Not Closable
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_mask_no_close_open
+            type: CallMethod
+            params:
+              blockId: drawer_mask_no_close
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_mask_default
+      type: Drawer
+      properties:
+        title: Default Mask
+        mask: true
+        maskClosable: true
+      blocks:
+        - id: drawer_mask_default_content
+          type: Paragraph
+          properties:
+            content: The mask is shown and clicking it closes the drawer. This is the default behavior.
+    - id: drawer_no_mask
+      type: Drawer
+      properties:
+        title: No Mask
+        mask: false
+      blocks:
+        - id: drawer_no_mask_content
+          type: Paragraph
+          properties:
+            content: No mask overlay is shown behind the drawer. The page content remains fully visible and interactive.
+    - id: drawer_mask_no_close
+      type: Drawer
+      properties:
+        title: Mask Not Closable
+        mask: true
+        maskClosable: false
+      blocks:
+        - id: drawer_mask_no_close_content
+          type: Paragraph
+          properties:
+            content: The mask is visible but clicking it does not close the drawer. Users must use the close button or Escape key.
+
+- title: Keyboard Close
+  blocks:
+    - id: drawer_keyboard_on_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Keyboard Enabled (default)
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_keyboard_on_open
+            type: CallMethod
+            params:
+              blockId: drawer_keyboard_on
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_keyboard_off_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Keyboard Disabled
+        color: danger
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_keyboard_off_open
+            type: CallMethod
+            params:
+              blockId: drawer_keyboard_off
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_keyboard_on
+      type: Drawer
+      properties:
+        title: Press Escape to Close
+        keyboard: true
+      blocks:
+        - id: drawer_keyboard_on_content
+          type: Paragraph
+          properties:
+            content: Pressing the Escape key closes this drawer. This is the default behavior.
+    - id: drawer_keyboard_off
+      type: Drawer
+      properties:
+        title: Escape Disabled
+        keyboard: false
+      blocks:
+        - id: drawer_keyboard_off_content
+          type: Paragraph
+          properties:
+            content: Pressing Escape does not close this drawer. The user must click the close button or mask to dismiss.
+
+- title: Custom Z-Index
+  blocks:
+    - id: drawer_zindex_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Drawer (z-index 2000)
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_zindex_open
+            type: CallMethod
+            params:
+              blockId: drawer_zindex
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_zindex
+      type: Drawer
+      properties:
+        title: High Z-Index Drawer
+        zIndex: 2000
+      blocks:
+        - id: drawer_zindex_content
+          type: Paragraph
+          properties:
+            content: This drawer uses a custom z-index of 2000 to ensure it appears above other overlays. The default is 1000.
+
+- title: Extra Slot
+  blocks:
+    - id: drawer_extra_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Drawer with Extra
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: drawer_extra_open
+            type: CallMethod
+            params:
+              blockId: drawer_extra
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_extra
+      type: Drawer
+      properties:
+        title: Drawer with Extra
+      slots:
+        extra:
+          blocks:
+            - id: drawer_extra_actions_row
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: drawer_extra_cancel_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Cancel
+                    color: default
+                    variant: outlined
+                    size: small
+                  events:
+                    onClick:
+                      - id: drawer_extra_cancel
+                        type: CallMethod
+                        params:
+                          blockId: drawer_extra
+                          method: setOpen
+                          args:
+                            - open: false
+                - id: drawer_extra_submit_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Submit
+                    color: primary
+                    variant: solid
+                    size: small
+      blocks:
+        - id: drawer_extra_content
+          type: Paragraph
+          properties:
+            content: The extra slot renders content in the header area opposite the title. Commonly used for action buttons like Save or Cancel.
+
+- title: Footer Slot
+  blocks:
+    - id: drawer_footer_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Drawer with Footer
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: drawer_footer_open
+            type: CallMethod
+            params:
+              blockId: drawer_footer
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_footer
+      type: Drawer
+      properties:
+        title: Drawer with Footer
+        width: 400
+      slots:
+        footer:
+          blocks:
+            - id: drawer_footer_actions_row
+              type: Box
+              layout:
+                gap: 8
+                justify: end
+              blocks:
+                - id: drawer_footer_cancel_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Cancel
+                    color: default
+                    variant: outlined
+                  events:
+                    onClick:
+                      - id: drawer_footer_cancel
+                        type: CallMethod
+                        params:
+                          blockId: drawer_footer
+                          method: setOpen
+                          args:
+                            - open: false
+                - id: drawer_footer_save_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Save
+                    color: primary
+                    variant: solid
+                  events:
+                    onClick:
+                      - id: drawer_footer_save_msg
+                        type: DisplayMessage
+                        params:
+                          content: Saved successfully
+                          status: success
+                          duration: 2
+      blocks:
+        - id: drawer_footer_content
+          type: Paragraph
+          properties:
+            content: The footer slot renders content in the drawer's footer area, pinned at the bottom. It is commonly used for action buttons like Save and Cancel.
+
+- title: Toggle Method
+  blocks:
+    - id: drawer_toggle_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Toggle Drawer
+        color: primary
+        variant: solid
+        icon: AiOutlineMenu
+      events:
+        onClick:
+          - id: drawer_toggle_call
+            type: CallMethod
+            params:
+              blockId: drawer_toggle
+              method: toggleOpen
+    - id: drawer_toggle
+      type: Drawer
+      properties:
+        title: Toggle Drawer
+      blocks:
+        - id: drawer_toggle_content
+          type: Paragraph
+          properties:
+            content: This drawer uses the toggleOpen method. Each click of the button alternates between open and closed states.
+
+- title: Drawer Events
+  blocks:
+    - id: drawer_events_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Drawer with Events
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: drawer_events_open
+            type: CallMethod
+            params:
+              blockId: drawer_events
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_events
+      type: Drawer
+      properties:
+        title: Drawer with Events
+        width: 400
+      events:
+        onOpen:
+          - id: drawer_events_on_open_msg
+            type: DisplayMessage
+            params:
+              content: Drawer opened
+              duration: 2
+        onClose:
+          - id: drawer_events_on_close_msg
+            type: DisplayMessage
+            params:
+              content: Drawer closing...
+              duration: 2
+        afterClose:
+          - id: drawer_events_after_close_msg
+            type: DisplayMessage
+            params:
+              content: Drawer fully closed
+              duration: 2
+      blocks:
+        - id: drawer_events_p1
+          type: Paragraph
+          properties:
+            content: This drawer triggers DisplayMessage actions on onOpen, onClose, and afterClose events. Close the drawer to see all three messages fire in sequence.
+        - id: drawer_events_p2
+          type: Paragraph
+          properties:
+            content: 'Available events: onOpen fires when opening, onClose fires when the close action starts, onToggle fires on toggle, afterClose fires after the close animation completes, and afterOpenChange fires after any open state transition.'
+
+- title: Inline Styles
+  blocks:
+    - id: drawer_inline_style_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Styled Drawer
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: drawer_inline_style_open
+            type: CallMethod
+            params:
+              blockId: drawer_inline_style
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_inline_style
+      type: Drawer
+      properties:
+        title: Styled Drawer
+      style:
+        .header:
+          borderBottom: 1px solid #91caff
+        .body:
+      blocks:
+        - id: drawer_inline_style_content
+          type: Paragraph
+          properties:
+            content: This drawer uses style.header and style.body to apply custom background colors to the header and body areas.
+
+- title: CSS Key Classes
+  blocks:
+    - id: drawer_css_keys_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open CSS Styled Drawer
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: drawer_css_keys_open
+            type: CallMethod
+            params:
+              blockId: drawer_css_keys
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_css_keys
+      type: Drawer
+      properties:
+        title: Tailwind CSS Keys
+      class:
+        header: bg-bg-layout
+        body: bg-bg-layout
+      blocks:
+        - id: drawer_css_keys_content
+          type: Paragraph
+          properties:
+            content: 'Drawer supports these CSS keys: element, header, body, footer, mask, wrapper, content. Use class as an object to target each area with Tailwind classes.'
+
+    - id: drawer_css_accent_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Accent Drawer
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_css_accent_open
+            type: CallMethod
+            params:
+              blockId: drawer_css_accent
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_css_accent
+      type: Drawer
+      properties:
+        title: Accent Header
+      class:
+        header: bg-gradient-to-r from-primary/100 to-indigo-600 text-white
+        body: bg-bg-layout
+      blocks:
+        - id: drawer_css_accent_content
+          type: Paragraph
+          properties:
+            content: A gradient header created using Tailwind classes on the header CSS key. The body uses a subtle gray background.
+
+    - id: drawer_css_mask_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Blurred Mask Drawer
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_css_mask_open
+            type: CallMethod
+            params:
+              blockId: drawer_css_mask
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_css_mask
+      type: Drawer
+      properties:
+        title: Custom Mask Style
+      class:
+        mask: backdrop-blur-sm
+        content: rounded-l-xl
+      blocks:
+        - id: drawer_css_mask_content
+          type: Paragraph
+          properties:
+            content: The mask CSS key applies a backdrop blur effect, and the content CSS key adds rounded corners to the drawer panel.
+
+- title: Theme Token Overrides
+  blocks:
+    - id: drawer_theme_green_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Green Theme
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: drawer_theme_green_open
+            type: CallMethod
+            params:
+              blockId: drawer_theme_green
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_theme_green
+      type: Drawer
+      properties:
+        title: Custom Theme Drawer
+        theme:
+          colorBgMask: 'rgba(0, 100, 0, 0.15)'
+      blocks:
+        - id: drawer_theme_green_content
+          type: Paragraph
+          properties:
+            content: Overrides colorBgElevated for a green-tinted background and colorBgMask for a subtle green mask overlay.
+
+    - id: drawer_theme_dark_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Dark Theme
+        color: default
+        variant: solid
+      events:
+        onClick:
+          - id: drawer_theme_dark_open
+            type: CallMethod
+            params:
+              blockId: drawer_theme_dark
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_theme_dark
+      type: Drawer
+      properties:
+        title: Dark Theme Drawer
+        theme:
+          colorBgElevated: '#1f1f1f'
+          colorBgMask: 'rgba(0, 0, 0, 0.7)'
+          colorText: '#ffffff'
+          colorTextHeading: '#ffffff'
+          colorIcon: '#ffffff'
+          colorIconHover: '#1677ff'
+      blocks:
+        - id: drawer_theme_dark_content
+          type: Paragraph
+          class: text-text-secondary
+          properties:
+            content: A dark-themed drawer using design token overrides for background, text, and icon colors.
+
+    - id: drawer_theme_spacing_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Custom Spacing
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: drawer_theme_spacing_open
+            type: CallMethod
+            params:
+              blockId: drawer_theme_spacing
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_theme_spacing
+      type: Drawer
+      properties:
+        title: Custom Footer Padding
+        theme:
+          footerPaddingBlock: 16
+          footerPaddingInline: 24
+          zIndexPopup: 1500
+      blocks:
+        - id: drawer_theme_spacing_content
+          type: Paragraph
+          properties:
+            content: Overrides footerPaddingBlock, footerPaddingInline, and zIndexPopup design tokens. These control footer spacing and the popup layer z-index.
+
+- title: Drawer as Edit Form
+  blocks:
+    - id: drawer_edit_form_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Edit Record
+        color: primary
+        variant: solid
+        icon: AiOutlineEdit
+      events:
+        onClick:
+          - id: drawer_edit_form_open
+            type: CallMethod
+            params:
+              blockId: drawer_edit_form
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_edit_form
+      type: Drawer
+      properties:
+        title: Edit Customer
+        width: 480
+      slots:
+        extra:
+          blocks:
+            - id: drawer_edit_form_extra_row
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: drawer_edit_form_cancel_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Cancel
+                    color: default
+                    variant: outlined
+                    size: small
+                  events:
+                    onClick:
+                      - id: drawer_edit_form_cancel
+                        type: CallMethod
+                        params:
+                          blockId: drawer_edit_form
+                          method: setOpen
+                          args:
+                            - open: false
+                - id: drawer_edit_form_save_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Save Changes
+                    color: primary
+                    variant: solid
+                    size: small
+                  events:
+                    onClick:
+                      - id: drawer_edit_form_save_msg
+                        type: DisplayMessage
+                        params:
+                          content: Changes saved successfully
+                          status: success
+                          duration: 3
+                      - id: drawer_edit_form_close
+                        type: CallMethod
+                        params:
+                          blockId: drawer_edit_form
+                          method: setOpen
+                          args:
+                            - open: false
+      blocks:
+        - id: drawer_edit_form_name
+          type: TextInput
+          properties:
+            title: Full Name
+            placeholder: Enter customer name
+        - id: drawer_edit_form_email
+          type: TextInput
+          properties:
+            title: Email Address
+            placeholder: customer@example.com
+        - id: drawer_edit_form_phone
+          type: TextInput
+          properties:
+            title: Phone Number
+            placeholder: +1 (555) 000-0000
+        - id: drawer_edit_form_status
+          type: Selector
+          properties:
+            title: Status
+            options:
+              - label: Active
+                value: active
+              - label: Inactive
+                value: inactive
+              - label: Pending
+                value: pending
+        - id: drawer_edit_form_notes
+          type: TextArea
+          properties:
+            title: Notes
+            placeholder: Additional notes about this customer...
+            autoSize:
+              minRows: 3
+
+- title: Drawer as Filter Panel
+  blocks:
+    - id: drawer_filter_panel_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Filters
+        color: default
+        variant: outlined
+        icon: AiOutlineFilter
+      events:
+        onClick:
+          - id: drawer_filter_panel_open
+            type: CallMethod
+            params:
+              blockId: drawer_filter_panel
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_filter_panel
+      type: Drawer
+      properties:
+        title: Filter Results
+        placement: left
+        width: 320
+      events:
+        onClose:
+          - id: drawer_filter_panel_close_msg
+            type: DisplayMessage
+            params:
+              content: Filters applied
+              status: info
+              duration: 2
+      slots:
+        extra:
+          blocks:
+            - id: drawer_filter_panel_clear_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Clear All
+                color: danger
+                variant: link
+                size: small
+              events:
+                onClick:
+                  - id: drawer_filter_panel_clear_msg
+                    type: DisplayMessage
+                    params:
+                      content: All filters cleared
+                      status: warning
+                      duration: 2
+      blocks:
+        - id: drawer_filter_panel_category
+          type: MultipleSelector
+          properties:
+            title: Category
+            options:
+              - label: Electronics
+                value: electronics
+              - label: Clothing
+                value: clothing
+              - label: Books
+                value: books
+              - label: Home & Garden
+                value: home
+        - id: drawer_filter_panel_price
+          type: Slider
+          properties:
+            title: Price Range
+            min: 0
+            max: 500
+            step: 10
+        - id: drawer_filter_panel_rating
+          type: ButtonSelector
+          properties:
+            title: Minimum Rating
+            options:
+              - label: Any
+                value: 0
+              - label: 3+
+                value: 3
+              - label: 4+
+                value: 4
+              - label: 5
+                value: 5
+        - id: drawer_filter_panel_in_stock
+          type: Switch
+          properties:
+            title: In Stock Only
+        - id: drawer_filter_panel_apply_btn
+          type: Button
+          properties:
+            title: Apply Filters
+            color: primary
+            variant: solid
+            block: true
+          events:
+            onClick:
+              - id: drawer_filter_panel_apply_msg
+                type: DisplayMessage
+                params:
+                  content: Filters applied to results
+                  status: success
+                  duration: 2
+              - id: drawer_filter_panel_apply_close
+                type: CallMethod
+                params:
+                  blockId: drawer_filter_panel
+                  method: setOpen
+                  args:
+                    - open: false
+
+- title: Drawer as User Profile Panel
+  blocks:
+    - id: drawer_profile_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: View Profile
+        color: primary
+        variant: solid
+        icon: AiOutlineUser
+      events:
+        onClick:
+          - id: drawer_profile_open
+            type: CallMethod
+            params:
+              blockId: drawer_profile
+              method: setOpen
+              args:
+                - open: true
+    - id: drawer_profile
+      type: Drawer
+      properties:
+        title: User Profile
+        width: 400
+      blocks:
+        - id: drawer_profile_avatar_row
+          type: Box
+          layout:
+            gap: 16
+            align: center
+          blocks:
+            - id: drawer_profile_avatar
+              type: Avatar
+              layout:
+                flex: 0 0 auto
+              properties:
+                icon: AiOutlineUser
+                size: 64
+                color: '#fff'
+                backgroundColor: '#1677ff'
+            - id: drawer_profile_info
+              type: Box
+              layout:
+                flex: 1 1 0
+                direction: column
+                gap: 4
+              blocks:
+                - id: drawer_profile_name
+                  type: Title
+                  properties:
+                    content: Jane Cooper
+                    level: 4
+                - id: drawer_profile_role_tag
+                  type: Tag
+                  properties:
+                    title: Senior Product Designer
+                    color: blue
+        - id: drawer_profile_divider
+          type: Divider
+        - id: drawer_profile_details
+          type: Descriptions
+          properties:
+            size: small
+            column: 1
+            items:
+              - label: Email
+                value: jane.cooper@example.com
+              - label: Phone
+                value: +1 (555) 123-4567
+              - label: Location
+                value: San Francisco, CA
+              - label: Department
+                value: Design
+              - label: Start Date
+                value: January 15, 2023
+        - id: drawer_profile_divider2
+          type: Divider
+        - id: drawer_profile_actions_row
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: drawer_profile_edit_btn
+              type: Button
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Edit Profile
+                color: primary
+                variant: outlined
+                icon: AiOutlineEdit
+            - id: drawer_profile_message_btn
+              type: Button
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Send Message
+                color: primary
+                variant: solid
+                icon: AiOutlineMail