@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/display-blocks/message.md

@@ -0,0 +1,941 @@
+# Message
+
+Global message notification displayed at the top of the page.
+
+Operation completed successfully
+
+Something went wrong
+
+Please check your input
+
+Here is some useful information
+
+Loading data...
+
+```yaml
+- id: status_success_msg
+  type: Message
+  properties:
+    status: success
+    content: Operation completed successfully
+- id: status_error_msg
+  type: Message
+  properties:
+    status: error
+    content: Something went wrong
+- id: status_warning_msg
+  type: Message
+  properties:
+    status: warning
+    content: Please check your input
+- id: status_info_msg
+  type: Message
+  properties:
+    status: info
+    content: Here is some useful information
+- id: status_loading_msg
+  type: Message
+  properties:
+    status: loading
+    content: Loading data...
+    duration: 3
+- id: btn_status_success
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Success
+    color: primary
+    variant: outlined
+    icon: AiOutlineCheckCircle
+  events:
+    onClick:
+      - id: call_status_success
+        type: CallMethod
+        params:
+          blockId: status_success_msg
+          method: open
+- id: btn_status_error
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Error
+    color: danger
+    variant: outlined
+    icon: AiOutlineCloseCircle
+  events:
+    onClick:
+      - id: call_status_error
+        type: CallMethod
+        params:
+          blockId: status_error_msg
+          method: open
+- id: btn_status_warning
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Warning
+    color: default
+    variant: outlined
+    icon: AiOutlineWarning
+  events:
+    onClick:
+      - id: call_status_warning
+        type: CallMethod
+        params:
+          blockId: status_warning_msg
+          method: open
+- id: btn_status_info
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Info
+    color: primary
+    variant: text
+    icon: AiOutlineInfoCircle
+  events:
+    onClick:
+      - id: call_status_info
+        type: CallMethod
+        params:
+          blockId: status_info_msg
+          method: open
+- id: btn_status_loading
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Loading
+    color: default
+    variant: outlined
+    icon: AiOutlineLoading
+  events:
+    onClick:
+      - id: call_status_loading
+        type: CallMethod
+        params:
+          blockId: status_loading_msg
+          method: open
+```
+
+Gone in 1 second
+
+Default duration (4.5s)
+
+Stays for 10 seconds
+
+Will not auto-close (duration 0)
+
+```yaml
+- id: dur_short_msg
+  type: Message
+  properties:
+    status: info
+    content: Gone in 1 second
+    duration: 1
+- id: dur_default_msg
+  type: Message
+  properties:
+    status: info
+    content: Default duration (4.5s)
+- id: dur_long_msg
+  type: Message
+  properties:
+    status: info
+    content: Stays for 10 seconds
+    duration: 10
+- id: dur_sticky_msg
+  type: Message
+  properties:
+    status: warning
+    content: Will not auto-close (duration 0)
+    duration: 0
+- id: btn_dur_short
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: 1 second
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_dur_short
+        type: CallMethod
+        params:
+          blockId: dur_short_msg
+          method: open
+- id: btn_dur_default
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Default (4.5s)
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_dur_default
+        type: CallMethod
+        params:
+          blockId: dur_default_msg
+          method: open
+- id: btn_dur_long
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: 10 seconds
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_dur_long
+        type: CallMethod
+        params:
+          blockId: dur_long_msg
+          method: open
+- id: btn_dur_sticky
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Sticky (duration 0)
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_dur_sticky
+        type: CallMethod
+        params:
+          blockId: dur_sticky_msg
+          method: open
+```
+
+File saved
+
+Notification sent
+
+Custom colored star icon
+
+```yaml
+- id: icon_save_msg
+  type: Message
+  properties:
+    status: success
+    content: File saved
+    icon: AiOutlineSave
+- id: icon_bell_msg
+  type: Message
+  properties:
+    status: info
+    content: Notification sent
+    icon: AiOutlineBell
+- id: icon_star_msg
+  type: Message
+  properties:
+    status: info
+    content: Custom colored star icon
+    icon:
+      name: AiOutlineStar
+      color: "#faad14"
+- id: btn_icon_save
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Save Icon
+    color: primary
+    variant: outlined
+    icon: AiOutlineSave
+  events:
+    onClick:
+      - id: call_icon_save
+        type: CallMethod
+        params:
+          blockId: icon_save_msg
+          method: open
+- id: btn_icon_bell
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Bell Icon
+    color: primary
+    variant: outlined
+    icon: AiOutlineBell
+  events:
+    onClick:
+      - id: call_icon_bell
+        type: CallMethod
+        params:
+          blockId: icon_bell_msg
+          method: open
+- id: btn_icon_star
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Star Icon (colored)
+    color: default
+    variant: outlined
+    icon: AiOutlineStar
+  events:
+    onClick:
+      - id: call_icon_star
+        type: CallMethod
+        params:
+          blockId: icon_star_msg
+          method: open
+```
+
+<b>Bold</b> content in message
+
+Visit <a href="https://lowdefy.com">Lowdefy</a> for more info
+
+<span style="color: #fa8c16; font-weight: bold;">Important:</span> Please review
+
+```yaml
+- id: html_bold_msg
+  type: Message
+  properties:
+    status: success
+    content: <b>Bold</b> content in message
+- id: html_link_msg
+  type: Message
+  properties:
+    status: info
+    content: Visit <a href="https://lowdefy.com">Lowdefy</a> for more info
+- id: html_styled_msg
+  type: Message
+  properties:
+    status: warning
+    content: '<span style="color: #fa8c16; font-weight: bold;">Important:</span>
+      Please review'
+- id: btn_html_bold
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Bold HTML
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_html_bold
+        type: CallMethod
+        params:
+          blockId: html_bold_msg
+          method: open
+- id: btn_html_link
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: HTML Link
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_html_link
+        type: CallMethod
+        params:
+          blockId: html_link_msg
+          method: open
+- id: btn_html_styled
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Styled HTML
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_html_styled
+        type: CallMethod
+        params:
+          blockId: html_styled_msg
+          method: open
+```
+
+Custom background color
+
+Larger font with custom padding
+
+Shadow and rounded corners
+
+```yaml
+- id: mstyle_bg_msg
+  type: Message
+  properties:
+    status: success
+    content: Custom background color
+  style:
+    .element:
+      border: "1px solid #b7eb8f"
+- id: mstyle_font_msg
+  type: Message
+  properties:
+    status: info
+    content: Larger font with custom padding
+  style:
+    .element:
+      fontSize: 16
+      padding: 12px 24px
+- id: mstyle_shadow_msg
+  type: Message
+  properties:
+    status: warning
+    content: Shadow and rounded corners
+  style:
+    .element:
+      boxShadow: 0 4px 12px rgba(0, 0, 0, 0.15)
+      borderRadius: 12
+- id: btn_mstyle_bg
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom Background
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: call_mstyle_bg
+        type: CallMethod
+        params:
+          blockId: mstyle_bg_msg
+          method: open
+- id: btn_mstyle_font
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Large Font
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: call_mstyle_font
+        type: CallMethod
+        params:
+          blockId: mstyle_font_msg
+          method: open
+- id: btn_mstyle_shadow
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Shadow + Rounded
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: call_mstyle_shadow
+        type: CallMethod
+        params:
+          blockId: mstyle_shadow_msg
+          method: open
+```
+
+Default message
+
+```yaml
+- id: override_msg
+  type: Message
+  properties:
+    status: info
+    content: Default message
+- id: btn_override_success
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open as Success
+    color: primary
+    variant: solid
+    icon: AiOutlineCheckCircle
+  events:
+    onClick:
+      - id: call_override_success
+        type: CallMethod
+        params:
+          blockId: override_msg
+          method: open
+          args:
+            - status: success
+              content: Overridden to success at call time!
+              duration: 3
+- id: btn_override_error
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open as Error
+    color: danger
+    variant: solid
+    icon: AiOutlineCloseCircle
+  events:
+    onClick:
+      - id: call_override_error
+        type: CallMethod
+        params:
+          blockId: override_msg
+          method: open
+          args:
+            - status: error
+              content: Overridden to error at call time!
+              duration: 3
+- id: btn_override_icon
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open with Custom Icon
+    color: default
+    variant: solid
+    icon: AiOutlineRocket
+  events:
+    onClick:
+      - id: call_override_icon
+        type: CallMethod
+        params:
+          blockId: override_msg
+          method: open
+          args:
+            - status: info
+              content: Launched with a rocket icon!
+              icon: AiOutlineRocket
+              duration: 3
+```
+
+Close me to trigger the onClose event
+
+```yaml
+- id: onclose_msg
+  type: Message
+  properties:
+    status: info
+    content: Close me to trigger the onClose event
+    duration: 3
+  events:
+    onClose:
+      - id: onclose_set_state
+        type: SetState
+        params:
+          messageClosed: true
+      - id: onclose_display
+        type: DisplayMessage
+        params:
+          content: onClose event fired!
+          status: success
+- id: btn_onclose
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Message with onClose
+    color: primary
+    variant: outlined
+    icon: AiOutlineNotification
+  events:
+    onClick:
+      - id: call_onclose
+        type: CallMethod
+        params:
+          blockId: onclose_msg
+          method: open
+```
+
+Message with shadow via Tailwind class
+
+Message with rounded corners via Tailwind class
+
+Message with inline border style
+
+```yaml
+- id: css_shadow_msg
+  type: Message
+  class:
+    element: shadow-lg
+  properties:
+    status: success
+    content: Message with shadow via Tailwind class
+- id: css_rounded_msg
+  type: Message
+  class:
+    element: rounded-full
+  properties:
+    status: info
+    content: Message with rounded corners via Tailwind class
+- id: css_custom_msg
+  type: Message
+  style:
+    .element:
+      border: "2px solid #1677ff"
+      borderRadius: 8
+  properties:
+    status: info
+    content: Message with inline border style
+- id: btn_css_shadow
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Shadow Class
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_css_shadow
+        type: CallMethod
+        params:
+          blockId: css_shadow_msg
+          method: open
+- id: btn_css_rounded
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Rounded Class
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_css_rounded
+        type: CallMethod
+        params:
+          blockId: css_rounded_msg
+          method: open
+- id: btn_css_custom
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Inline Border Style
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: call_css_custom
+        type: CallMethod
+        params:
+          blockId: css_custom_msg
+          method: open
+```
+
+Custom background via theme token
+
+Extra padding via theme token
+
+Custom z-index via theme token
+
+Combined theme overrides
+
+```yaml
+- id: theme_bg_msg
+  type: Message
+  properties:
+    status: success
+    content: Custom background via theme token
+- id: theme_padding_msg
+  type: Message
+  properties:
+    status: info
+    content: Extra padding via theme token
+    theme:
+      contentPadding: 14px 20px
+- id: theme_zindex_msg
+  type: Message
+  properties:
+    status: warning
+    content: Custom z-index via theme token
+    theme:
+      zIndexPopup: 2000
+- id: theme_combined_msg
+  type: Message
+  properties:
+    status: info
+    content: Combined theme overrides
+    theme:
+      contentPadding: 16px 24px
+- id: btn_theme_bg
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom Background
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: call_theme_bg
+        type: CallMethod
+        params:
+          blockId: theme_bg_msg
+          method: open
+- id: btn_theme_padding
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Extra Padding
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: call_theme_padding
+        type: CallMethod
+        params:
+          blockId: theme_padding_msg
+          method: open
+- id: btn_theme_zindex
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom Z-Index
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: call_theme_zindex
+        type: CallMethod
+        params:
+          blockId: theme_zindex_msg
+          method: open
+- id: btn_theme_combined
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Combined Tokens
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: call_theme_combined
+        type: CallMethod
+        params:
+          blockId: theme_combined_msg
+          method: open
+```
+
+Thank you for your feedback!
+
+Please fill in all required fields.
+
+```yaml
+- id: form_card
+  type: Card
+  properties:
+    title: Submit Feedback
+    size: small
+  blocks:
+    - id: form_name
+      type: TextInput
+      required: true
+      properties:
+        label:
+          title: Name
+        placeholder: Your name
+    - id: form_rating
+      type: RatingSlider
+      required: true
+      properties:
+        label:
+          title: Rating
+    - id: form_comments
+      type: TextArea
+      properties:
+        label:
+          title: Comments
+        placeholder: Tell us what you think
+        rows: 3
+    - id: form_submit_msg
+      type: Message
+      properties:
+        status: success
+        content: Thank you for your feedback!
+        duration: 3
+      events:
+        onClose:
+          - id: form_close_set
+            type: SetState
+            params:
+              feedbackSubmitted: true
+    - id: form_error_msg
+      type: Message
+      properties:
+        status: error
+        content: Please fill in all required fields.
+        duration: 4
+    - id: form_actions
+      type: Box
+      layout:
+        gap: 8
+        justify: flex-end
+      blocks:
+        - id: form_cancel
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Cancel
+            color: default
+            variant: outlined
+          events:
+            onClick:
+              - id: form_cancel_reset
+                type: ResetValidation
+              - id: form_cancel_msg
+                type: DisplayMessage
+                params:
+                  content: Form cleared
+                  status: info
+        - id: form_submit
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Submit Feedback
+            color: primary
+            variant: solid
+            icon: AiOutlineSend
+          events:
+            onClick:
+              - id: form_validate
+                type: Validate
+                params:
+                  - form_name
+                  - form_rating
+              - id: form_open_success
+                type: CallMethod
+                params:
+                  blockId: form_submit_msg
+                  method: open
+```
+
+Upload your project files below. Supported formats: PDF, DOCX, XLSX.
+Maximum file size: 10 MB.
+
+Uploading file...
+
+File uploaded successfully!
+
+Upload failed. Please try again.
+
+```yaml
+- id: upload_card
+  type: Card
+  properties:
+    title: Upload Documents
+    size: small
+  blocks:
+    - id: upload_description
+      type: Markdown
+      properties:
+        content: |
+          Upload your project files below. Supported formats: PDF, DOCX, XLSX.
+          Maximum file size: 10 MB.
+    - id: upload_progress_msg
+      type: Message
+      properties:
+        status: loading
+        content: Uploading file...
+        duration: 0
+    - id: upload_success_msg
+      type: Message
+      properties:
+        status: success
+        content: File uploaded successfully!
+        icon: AiOutlineCloudUpload
+        duration: 3
+    - id: upload_fail_msg
+      type: Message
+      properties:
+        status: error
+        content: Upload failed. Please try again.
+        duration: 5
+    - id: upload_actions
+      type: Box
+      layout:
+        gap: 8
+        justify: flex-start
+      blocks:
+        - id: upload_start
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Start Upload
+            color: primary
+            variant: solid
+            icon: AiOutlineUpload
+          events:
+            onClick:
+              - id: upload_show_progress
+                type: CallMethod
+                params:
+                  blockId: upload_progress_msg
+                  method: open
+        - id: upload_complete
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Simulate Success
+            color: green
+            variant: outlined
+            icon: AiOutlineCheckCircle
+          events:
+            onClick:
+              - id: upload_show_success
+                type: CallMethod
+                params:
+                  blockId: upload_success_msg
+                  method: open
+        - id: upload_fail
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Simulate Failure
+            color: danger
+            variant: outlined
+            icon: AiOutlineCloseCircle
+          events:
+            onClick:
+              - id: upload_show_fail
+                type: CallMethod
+                params:
+                  blockId: upload_fail_msg
+                  method: open
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `content` | string | - | The content of the message - supports html. |
+| `duration` | number | `4.5` | Time(seconds) before auto-dismiss, don't dismiss if set to 0. |
+| `icon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block to customize message icon. |
+| `status` | string | `"info"` | Message status type. Enum: `success`, `error`, `info`, `warning`, `loading`. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design message tokens](https://ant.design/components/message#design-token). |
+| `theme.zIndexPopup` | number | `1080` | Z-index of the message popup. |
+| `theme.contentBg` | string | - | Background color of the message content. |
+| `theme.contentPadding` | string | - | Padding of the message content. Calculated from controlHeightLG, fontSize, lineHeight, and paddingSM. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onClose` | \- | Trigger actions when message is closed. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Message element. |
+| `/icon` | The icon in the Message. |
+
+No slots defined.