@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/TitleInput/gallery.yaml

@@ -0,0 +1,1006 @@
+# 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: Heading Levels
+  blocks:
+    - id: heading_level_1
+      type: TitleInput
+      properties:
+        level: 1
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              heading_level_1: h1. Editable Heading Level 1
+    - id: heading_level_2
+      type: TitleInput
+      properties:
+        level: 2
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              heading_level_2: h2. Editable Heading Level 2
+    - id: heading_level_3
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              heading_level_3: h3. Editable Heading Level 3
+    - id: heading_level_4
+      type: TitleInput
+      properties:
+        level: 4
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              heading_level_4: h4. Editable Heading Level 4
+    - id: heading_level_5
+      type: TitleInput
+      properties:
+        level: 5
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              heading_level_5: h5. Editable Heading Level 5
+- title: Typography Types
+  blocks:
+    - id: type_default
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              type_default: Default Type Title
+    - id: type_secondary
+      type: TitleInput
+      properties:
+        level: 3
+        type: secondary
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              type_secondary: Secondary Type Title
+    - id: type_success
+      type: TitleInput
+      properties:
+        level: 3
+        type: success
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              type_success: Success Type Title
+    - id: type_warning
+      type: TitleInput
+      properties:
+        level: 3
+        type: warning
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              type_warning: Warning Type Title
+    - id: type_danger
+      type: TitleInput
+      properties:
+        level: 3
+        type: danger
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              type_danger: Danger Type Title
+- title: Text Styles
+  blocks:
+    - id: style_italic
+      type: TitleInput
+      properties:
+        level: 3
+        italic: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              style_italic: Italic Title
+    - id: style_underline
+      type: TitleInput
+      properties:
+        level: 3
+        underline: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              style_underline: Underlined Title
+    - id: style_delete
+      type: TitleInput
+      properties:
+        level: 3
+        delete: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              style_delete: Strikethrough Title
+    - id: style_mark
+      type: TitleInput
+      properties:
+        level: 3
+        mark: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              style_mark: Marked (Highlighted) Title
+    - id: style_code
+      type: TitleInput
+      properties:
+        level: 3
+        code: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              style_code: Code Style Title
+- title: Combined Styles
+  blocks:
+    - id: combined_italic_underline
+      type: TitleInput
+      properties:
+        level: 3
+        italic: true
+        underline: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_italic_underline: Italic and Underlined
+    - id: combined_mark_code
+      type: TitleInput
+      properties:
+        level: 3
+        mark: true
+        code: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_mark_code: Marked and Code
+    - id: combined_italic_delete
+      type: TitleInput
+      properties:
+        level: 3
+        italic: true
+        delete: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_italic_delete: Italic and Strikethrough
+    - id: combined_underline_mark
+      type: TitleInput
+      properties:
+        level: 3
+        underline: true
+        mark: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_underline_mark: Underlined and Marked
+    - id: combined_all_styles
+      type: TitleInput
+      properties:
+        level: 3
+        italic: true
+        underline: true
+        mark: true
+        code: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_all_styles: All Styles Applied
+- title: Color
+  blocks:
+    - id: color_blue
+      type: TitleInput
+      properties:
+        level: 3
+        color: '#1677ff'
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              color_blue: Blue Title
+    - id: color_green
+      type: TitleInput
+      properties:
+        level: 3
+        color: '#52c41a'
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              color_green: Green Title
+    - id: color_purple
+      type: TitleInput
+      properties:
+        level: 3
+        color: '#722ed1'
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              color_purple: Purple Title
+    - id: color_coral
+      type: TitleInput
+      properties:
+        level: 3
+        color: '#ff6b6b'
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              color_coral: Coral Title
+    - id: color_teal
+      type: TitleInput
+      properties:
+        level: 3
+        color: '#13c2c2'
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              color_teal: Teal Title
+- title: Copyable
+  blocks:
+    - id: copyable_boolean
+      type: TitleInput
+      properties:
+        level: 3
+        copyable: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              copyable_boolean: Click the copy icon to copy this title
+    - id: copyable_custom_text
+      type: TitleInput
+      properties:
+        level: 3
+        copyable:
+          text: This custom text is copied instead of the visible title.
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              copyable_custom_text: Title with custom copy text
+    - id: copyable_custom_tooltips
+      type: TitleInput
+      properties:
+        level: 3
+        copyable:
+          tooltips:
+            - Click to copy
+            - Copied!
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              copyable_custom_tooltips: Hover the copy icon for custom tooltips
+    - id: copyable_custom_text_and_tooltips
+      type: TitleInput
+      properties:
+        level: 3
+        copyable:
+          text: Custom copied content for this title.
+          tooltips:
+            - Copy custom text
+            - Text copied successfully!
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              copyable_custom_text_and_tooltips: Custom text and tooltips together
+- title: Editable Options
+  blocks:
+    - id: editable_boolean_true
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              editable_boolean_true: Editable with boolean true
+    - id: editable_boolean_false
+      type: TitleInput
+      properties:
+        level: 3
+        editable: false
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              editable_boolean_false: Not editable (editable false)
+    - id: editable_custom_tooltip
+      type: TitleInput
+      properties:
+        level: 3
+        editable:
+          tooltip: Click here to edit this title
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              editable_custom_tooltip: Click the pencil to edit
+    - id: editable_max_length
+      type: TitleInput
+      properties:
+        level: 3
+        editable:
+          maxLength: 50
+          tooltip: Limited to 50 characters
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              editable_max_length: Max 50 characters allowed
+    - id: editable_editing_state
+      type: TitleInput
+      properties:
+        level: 3
+        editable:
+          editing: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              editable_editing_state: Starts in editing mode
+- title: Ellipsis
+  blocks:
+    - id: ellipsis_boolean
+      type: TitleInput
+      properties:
+        level: 3
+        ellipsis: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              ellipsis_boolean: This is a very long editable title that should be truncated with an ellipsis when it overflows the available space in a single line of text content.
+    - id: ellipsis_two_rows
+      type: TitleInput
+      properties:
+        level: 4
+        ellipsis:
+          rows: 2
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              ellipsis_two_rows: This is an extremely long title text that demonstrates multi-row ellipsis truncation. When the content exceeds the specified number of rows it will be truncated and show an ellipsis indicator at the end of the visible text area.
+    - id: ellipsis_three_rows_expandable
+      type: TitleInput
+      properties:
+        level: 4
+        ellipsis:
+          rows: 3
+          expandable: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              ellipsis_three_rows_expandable: This is a very long title that will be truncated after three rows. It demonstrates the expandable ellipsis feature which allows users to click to expand and see the full content of the title. This is useful for long headings that need to be visible on demand without taking up too much vertical space in the layout.
+    - id: ellipsis_with_suffix
+      type: TitleInput
+      properties:
+        level: 4
+        ellipsis:
+          rows: 1
+          suffix: ' [more]'
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              ellipsis_with_suffix: This long title demonstrates the suffix feature of the ellipsis configuration where a custom suffix string appears at the truncation point instead of the default behavior.
+    - id: ellipsis_expandable_with_suffix
+      type: TitleInput
+      properties:
+        level: 4
+        ellipsis:
+          rows: 2
+          expandable: true
+          suffix: ' ...(click to expand)'
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              ellipsis_expandable_with_suffix: This title combines expandable and suffix options. Click to expand and see the full content. The suffix text appears at the end of the truncated text to provide a visual cue to the user.
+- title: Disabled State
+  blocks:
+    - id: disabled_level_1
+      type: TitleInput
+      properties:
+        level: 1
+        disabled: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              disabled_level_1: Disabled Level 1 Title
+    - id: disabled_level_3
+      type: TitleInput
+      properties:
+        level: 3
+        disabled: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              disabled_level_3: Disabled Level 3 Title
+    - id: disabled_with_styles
+      type: TitleInput
+      properties:
+        level: 3
+        disabled: true
+        italic: true
+        underline: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              disabled_with_styles: Disabled with Italic and Underline
+    - id: disabled_secondary
+      type: TitleInput
+      properties:
+        level: 3
+        disabled: true
+        type: secondary
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              disabled_secondary: Disabled Secondary Type
+- title: Default Values
+  blocks:
+    - id: default_value_simple
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              default_value_simple: This is the default value
+    - id: default_value_long
+      type: TitleInput
+      properties:
+        level: 4
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              default_value_long: A longer default value that demonstrates how TitleInput handles pre-populated content for editing
+    - id: default_value_with_type
+      type: TitleInput
+      properties:
+        level: 3
+        type: success
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              default_value_with_type: Default value with success type
+    - id: default_value_with_styles
+      type: TitleInput
+      properties:
+        level: 3
+        italic: true
+        mark: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              default_value_with_styles: Default value with italic and mark
+    - id: no_default_value
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+- title: Levels with Types
+  blocks:
+    - id: level_1_secondary
+      type: TitleInput
+      properties:
+        level: 1
+        type: secondary
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              level_1_secondary: Level 1 Secondary
+    - id: level_2_success
+      type: TitleInput
+      properties:
+        level: 2
+        type: success
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              level_2_success: Level 2 Success
+    - id: level_3_warning
+      type: TitleInput
+      properties:
+        level: 3
+        type: warning
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              level_3_warning: Level 3 Warning
+    - id: level_4_danger
+      type: TitleInput
+      properties:
+        level: 4
+        type: danger
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              level_4_danger: Level 4 Danger
+    - id: level_5_success
+      type: TitleInput
+      properties:
+        level: 5
+        type: success
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              level_5_success: Level 5 Success
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_color_text
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+        theme:
+          colorText: '#531dab'
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              theme_color_text: Custom Text Color
+    - id: theme_font_family
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+        theme:
+          fontFamily: Georgia, serif
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              theme_font_family: Custom Font Family
+    - id: theme_font_weight_strong
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+        theme:
+          fontWeightStrong: 900
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              theme_font_weight_strong: Custom Font Weight
+    - id: theme_font_size_heading3
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+        theme:
+          fontSizeHeading3: 32
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              theme_font_size_heading3: Large Font Size for h3
+    - id: theme_multiple_tokens
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+        theme:
+          colorText: '#1d39c4'
+          fontFamily: Courier New, monospace
+          fontWeightStrong: 700
+          fontSizeHeading3: 28
+          lineHeightHeading3: 1.6
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              theme_multiple_tokens: Multiple Token Overrides
+- title: Combined Features
+  blocks:
+    - id: combined_copyable_editable
+      type: TitleInput
+      properties:
+        level: 3
+        copyable: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_copyable_editable: Copyable and Editable Title
+    - id: combined_type_styles_copyable
+      type: TitleInput
+      properties:
+        level: 3
+        type: success
+        italic: true
+        copyable: true
+        editable: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_type_styles_copyable: Success Type with Italic and Copyable
+    - id: combined_color_styles_editable
+      type: TitleInput
+      properties:
+        level: 3
+        color: '#722ed1'
+        code: true
+        editable:
+          tooltip: Edit this purple code title
+          maxLength: 100
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_color_styles_editable: Custom Color with Code Style
+    - id: combined_ellipsis_copyable_editable
+      type: TitleInput
+      properties:
+        level: 4
+        ellipsis:
+          rows: 2
+          expandable: true
+        copyable:
+          tooltips:
+            - Copy this long title
+            - Copied!
+        editable:
+          tooltip: Edit this long title
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_ellipsis_copyable_editable: This is a very long title that combines ellipsis truncation with both copyable and editable features to demonstrate how multiple features work together in a single component.
+    - id: combined_full_featured
+      type: TitleInput
+      properties:
+        level: 3
+        type: success
+        italic: true
+        copyable:
+          text: Full-featured title content
+          tooltips:
+            - Copy title
+            - Title copied!
+        editable:
+          tooltip: Click to edit
+          maxLength: 120
+        theme:
+          fontWeightStrong: 700
+          fontSizeHeading3: 26
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              combined_full_featured: Full-Featured Title Input
+- title: Style and Class Overrides
+  blocks:
+    - id: style_override_inline
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+      style:
+        background: linear-gradient(90deg, #f0f5ff, #fff)
+        padding: 8px 16px
+        borderLeft: 4px solid #1677ff
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              style_override_inline: Inline Styled Title
+    - id: style_override_tailwind
+      type: TitleInput
+      properties:
+        level: 3
+        editable: true
+      style:
+        className: rounded-lg bg-bg-layout p-3 shadow-sm
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              style_override_tailwind: Tailwind Styled Title
+    - id: style_override_combined
+      type: TitleInput
+      properties:
+        level: 2
+        type: success
+        editable: true
+      style:
+        border: 1px dashed #52c41a
+        borderRadius: 8px
+        padding: 12px 20px
+        className: shadow-md
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              style_override_combined: Combined Inline and Tailwind Styles
+
+- title: TitleInput in Document Editor
+  blocks:
+    - id: applied2_doc_editor_card
+      type: Card
+      properties:
+        title: Document Editor
+      blocks:
+        - id: applied2_doc_title
+          type: TitleInput
+          properties:
+            level: 2
+            editable:
+              tooltip: Click to rename this document
+              maxLength: 80
+            copyable: true
+          events:
+            onMount:
+              - id: set_doc_title_default
+                type: SetState
+                params:
+                  applied2_doc_title: Untitled Document
+        - id: applied2_doc_status
+          type: Selector
+          properties:
+            title: Status
+            placeholder: Select document status...
+            options:
+              - label: Draft
+                value: draft
+              - label: In Review
+                value: review
+              - label: Approved
+                value: approved
+              - label: Published
+                value: published
+        - id: applied2_doc_category
+          type: Selector
+          properties:
+            title: Category
+            placeholder: Select category...
+            options:
+              - label: Technical Specification
+                value: tech_spec
+              - label: User Guide
+                value: user_guide
+              - label: Release Notes
+                value: release_notes
+              - label: Internal Memo
+                value: memo
+        - id: applied2_doc_save_btn
+          type: Button
+          properties:
+            title: Save Document
+            icon: AiOutlineSave
+            type: primary
+            size: large
+            block: true
+          events:
+            onClick:
+              - id: save_doc_action
+                type: DisplayMessage
+                params:
+                  content: Document saved successfully.
+                  duration: 3
+
+- title: TitleInput in Blog Post Editor
+  blocks:
+    - id: applied3_blog_editor_card
+      type: Card
+      properties:
+        title: Blog Post Editor
+      blocks:
+        - id: applied3_post_title
+          type: TitleInput
+          properties:
+            level: 1
+            editable:
+              tooltip: Enter your blog post title
+              maxLength: 120
+            copyable: true
+          events:
+            onMount:
+              - id: set_post_title_default
+                type: SetState
+                params:
+                  applied3_post_title: Untitled Blog Post
+        - id: applied3_post_content
+          type: TextArea
+          properties:
+            title: Content
+            placeholder: Write your blog post content here...
+            autoSize:
+              minRows: 6
+              maxRows: 16
+        - id: applied3_post_category
+          type: Selector
+          properties:
+            title: Category
+            placeholder: Select a category...
+            options:
+              - label: Technology
+                value: technology
+              - label: Design
+                value: design
+              - label: Business
+                value: business
+              - label: Lifestyle
+                value: lifestyle
+        - id: applied3_publish_btn
+          type: Button
+          properties:
+            title: Publish Post
+            icon: AiOutlineSend
+            type: primary
+            size: large
+            block: true
+          events:
+            onClick:
+              - id: publish_post_action
+                type: DisplayMessage
+                params:
+                  content: Blog post published successfully.
+                  duration: 3