@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/Badge/gallery.yaml

@@ -0,0 +1,1090 @@
+# 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 Badge with Count
+  blocks:
+    - id: basic_count_5
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 5
+      blocks:
+        - id: basic_count_5_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: basic_count_25
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 25
+      blocks:
+        - id: basic_count_25_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: basic_count_100
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 100
+      blocks:
+        - id: basic_count_100_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+
+- title: Show Zero Count
+  blocks:
+    - id: zero_hidden
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 0
+      blocks:
+        - id: zero_hidden_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: zero_shown
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 0
+        showZero: true
+      blocks:
+        - id: zero_shown_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+
+- title: Dot Badge
+  blocks:
+    - id: dot_on_avatar
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        dot: true
+      blocks:
+        - id: dot_on_avatar_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: dot_on_icon_avatar
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        dot: true
+      blocks:
+        - id: dot_on_icon_avatar_child
+          type: Avatar
+          properties:
+            icon: AiOutlineBell
+            shape: square
+    - id: dot_on_button
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        dot: true
+      blocks:
+        - id: dot_on_button_child
+          type: Button
+          properties:
+            title: Notifications
+            color: primary
+            variant: outlined
+
+- title: Standalone Badge (No Child)
+  blocks:
+    - id: standalone_count
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 25
+    - id: standalone_dot
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        dot: true
+    - id: standalone_text
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: New
+
+- title: Badge Sizes
+  blocks:
+    - id: size_def
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 11
+        size: default
+      blocks:
+        - id: size_def_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: size_sm
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 11
+        size: small
+      blocks:
+        - id: size_sm_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: size_def_large_count
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 999
+        overflowCount: 999
+        size: default
+      blocks:
+        - id: size_def_large_count_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: size_sm_large_count
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 999
+        overflowCount: 999
+        size: small
+      blocks:
+        - id: size_sm_large_count_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+
+- title: Overflow Count
+  blocks:
+    - id: overflow_default
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 150
+      blocks:
+        - id: overflow_default_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: overflow_10
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 150
+        overflowCount: 10
+      blocks:
+        - id: overflow_10_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: overflow_999
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 2000
+        overflowCount: 999
+      blocks:
+        - id: overflow_999_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+
+- title: Preset Colors
+  blocks:
+    - id: preset_blue
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        color: blue
+        count: 5
+      blocks:
+        - id: preset_blue_child
+          type: Avatar
+          properties:
+            shape: square
+            content: A
+    - id: preset_green
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        color: green
+        count: 5
+      blocks:
+        - id: preset_green_child
+          type: Avatar
+          properties:
+            shape: square
+            content: B
+    - id: preset_purple
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        color: purple
+        count: 5
+      blocks:
+        - id: preset_purple_child
+          type: Avatar
+          properties:
+            shape: square
+            content: C
+    - id: preset_gold
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        color: gold
+        count: 5
+      blocks:
+        - id: preset_gold_child
+          type: Avatar
+          properties:
+            shape: square
+            content: D
+
+- title: Custom Hex Colors
+  blocks:
+    - id: hex_coral
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        color: '#ff6b6b'
+        count: 3
+      blocks:
+        - id: hex_coral_child
+          type: Avatar
+          properties:
+            shape: square
+            content: A
+    - id: hex_teal
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        color: '#20c997'
+        count: 7
+      blocks:
+        - id: hex_teal_child
+          type: Avatar
+          properties:
+            shape: square
+            content: B
+    - id: hex_indigo
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        color: '#4c6ef5'
+        count: 12
+      blocks:
+        - id: hex_indigo_child
+          type: Avatar
+          properties:
+            shape: square
+            content: C
+
+- title: Text Content
+  blocks:
+    - id: text_new
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: New
+      blocks:
+        - id: text_new_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: text_hot
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: Hot
+        color: red
+      blocks:
+        - id: text_hot_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: text_beta
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: Beta
+        color: blue
+      blocks:
+        - id: text_beta_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+
+- title: Status Indicators
+  blocks:
+    - id: status_success
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: success
+        text: Success
+    - id: status_processing
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: processing
+        text: Processing
+    - id: status_default
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: default
+        text: Default
+    - id: status_error
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: error
+        text: Error
+    - id: status_warning
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: warning
+        text: Warning
+
+- title: Status Dots Without Text
+  blocks:
+    - id: status_dot_success
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: success
+    - id: status_dot_processing
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: processing
+    - id: status_dot_error
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: error
+
+- title: Icon in Badge
+  blocks:
+    - id: icon_bell
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        icon: AiOutlineBell
+      blocks:
+        - id: icon_bell_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: icon_clock
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        icon:
+          name: AiOutlineClockCircle
+          color: '#1677ff'
+      blocks:
+        - id: icon_clock_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: icon_exclamation
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        icon:
+          name: AiOutlineExclamation
+          color: '#faad14'
+      blocks:
+        - id: icon_exclamation_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+
+- title: Badge Offset
+  blocks:
+    - id: offset_none
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 5
+      blocks:
+        - id: offset_none_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: offset_right
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 5
+        offset:
+          - 10
+          - 0
+      blocks:
+        - id: offset_right_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: offset_both
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 5
+        offset:
+          - -5
+          - 10
+      blocks:
+        - id: offset_both_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+
+- title: Hover Title Tooltip
+  blocks:
+    - id: title_tooltip
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 5
+        title: You have 5 unread messages
+      blocks:
+        - id: title_tooltip_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: title_tooltip_custom
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 99
+        title: 99 pending tasks
+      blocks:
+        - id: title_tooltip_custom_child
+          type: Avatar
+          properties:
+            shape: square
+            icon: AiOutlineUser
+
+- title: Badge Wrapping Different Blocks
+  blocks:
+    - id: wrap_avatar_circle
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 3
+      blocks:
+        - id: wrap_avatar_circle_child
+          type: Avatar
+          properties:
+            content: JD
+            color: '#1677ff'
+    - id: wrap_button_solid
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 5
+      blocks:
+        - id: wrap_button_solid_child
+          type: Button
+          properties:
+            title: Messages
+            color: primary
+            variant: solid
+    - id: wrap_icon_bell
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 12
+      blocks:
+        - id: wrap_icon_bell_child
+          type: Icon
+          properties:
+            name: AiOutlineBell
+            size: 24
+    - id: wrap_icon_mail
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        dot: true
+      blocks:
+        - id: wrap_icon_mail_child
+          type: Icon
+          properties:
+            name: AiOutlineMail
+            size: 24
+
+- title: Style and CSS Examples
+  blocks:
+    - id: css_indicator_shadow
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 5
+      style:
+        .indicator:
+          boxShadow: 0 0 0 2px #1677ff
+      blocks:
+        - id: css_indicator_shadow_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: css_indicator_green
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 5
+      style:
+        .indicator:
+          backgroundColor: '#52c41a'
+      blocks:
+        - id: css_indicator_green_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: css_indicator_bold
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 42
+      style:
+        .indicator:
+          fontWeight: bold
+          fontSize: 14px
+      blocks:
+        - id: css_indicator_bold_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+            size: large
+
+- title: Tailwind CSS Classes
+  blocks:
+    - id: tw_element_margin
+      type: Badge
+      class:
+        element: mr-8
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 3
+      blocks:
+        - id: tw_element_margin_child
+          type: Avatar
+          properties:
+            shape: square
+            content: A
+    - id: tw_indicator_animate
+      type: Badge
+      class:
+        indicator: animate-bounce
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 7
+      blocks:
+        - id: tw_indicator_animate_child
+          type: Avatar
+          properties:
+            shape: square
+            content: B
+    - id: tw_badge_in_box
+      type: Badge
+      class:
+        element: p-1
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 3
+      blocks:
+        - id: tw_badge_in_box_child
+          type: Box
+          class: bg-bg-layout rounded-lg p-4
+          blocks:
+            - id: tw_badge_in_box_text
+              type: Paragraph
+              properties:
+                content: Inbox
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_large_indicator
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 8
+        theme:
+          indicatorHeight: 28
+          textFontSize: 16
+          textFontWeight: bold
+      blocks:
+        - id: theme_large_indicator_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+            size: large
+    - id: theme_small_indicator
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 3
+        size: small
+        theme:
+          indicatorHeightSM: 18
+          textFontSizeSM: 10
+      blocks:
+        - id: theme_small_indicator_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: theme_large_dot
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        dot: true
+        theme:
+          dotSize: 12
+      blocks:
+        - id: theme_large_dot_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: theme_blue_badge
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 15
+        theme:
+          colorError: '#1677ff'
+          colorErrorHover: '#4096ff'
+      blocks:
+        - id: theme_blue_badge_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+    - id: theme_large_status
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        status: processing
+        text: Processing
+        theme:
+          statusSize: 10
+    - id: theme_combined
+      type: Badge
+      layout:
+        flex: 0 0 auto
+      properties:
+        count: 42
+        theme:
+          indicatorHeight: 26
+          textFontSize: 14
+          textFontWeight: bold
+          textLineHeight: 26
+          colorError: '#722ed1'
+          colorErrorHover: '#9254de'
+          indicatorZIndex: 10
+      blocks:
+        - id: theme_combined_child
+          type: Avatar
+          properties:
+            shape: square
+            content: U
+            size: large
+
+- title: Notification Bell Header
+  blocks:
+    - id: rw_notif_header
+      type: Box
+      layout:
+        gap: 24
+        align: center
+        justify: end
+      class: bg-bg-container p-4 rounded-lg shadow-sm border border-border
+      blocks:
+        - id: rw_notif_search
+          type: TextInput
+          layout:
+            flex: 1 1 0
+          properties:
+            placeholder: Search...
+            prefixIcon: AiOutlineSearch
+        - id: rw_notif_badge_mail
+          type: Badge
+          layout:
+            flex: 0 0 auto
+          properties:
+            count: 4
+            size: small
+          blocks:
+            - id: rw_notif_mail_btn
+              type: Button
+              properties:
+                icon: AiOutlineMail
+                color: default
+                variant: text
+                hideTitle: true
+              events:
+                onClick:
+                  - id: rw_notif_mail_action
+                    type: DisplayMessage
+                    params:
+                      content: You have 4 unread messages.
+                      status: info
+        - id: rw_notif_badge_bell
+          type: Badge
+          layout:
+            flex: 0 0 auto
+          properties:
+            dot: true
+          blocks:
+            - id: rw_notif_bell_btn
+              type: Button
+              properties:
+                icon: AiOutlineBell
+                color: default
+                variant: text
+                hideTitle: true
+              events:
+                onClick:
+                  - id: rw_notif_bell_action
+                    type: DisplayMessage
+                    params:
+                      content: You have new notifications.
+                      status: info
+        - id: rw_notif_avatar
+          type: Avatar
+          layout:
+            flex: 0 0 auto
+          properties:
+            content: JD
+            color: '#fff'
+            backgroundColor: '#1677ff'
+
+- title: Order Status Dashboard
+  blocks:
+    - id: rw_orders_card
+      type: Card
+      properties:
+        title: Recent Orders
+      slots:
+        extra:
+          blocks:
+            - id: rw_orders_extra_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: View All
+                color: primary
+                variant: link
+                size: small
+              events:
+                onClick:
+                  - id: rw_orders_link_action
+                    type: DisplayMessage
+                    params:
+                      content: Navigating to full orders list.
+                      status: info
+      blocks:
+        - id: rw_order_row1
+          type: Box
+          layout:
+            gap: 16
+            align: center
+          class: py-3 border-b border-border
+          blocks:
+            - id: rw_order1_id
+              type: Paragraph
+              layout:
+                flex: 0 0 120px
+              properties:
+                content: '#ORD-1042'
+            - id: rw_order1_customer
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              properties:
+                content: Sarah Johnson
+            - id: rw_order1_status
+              type: Badge
+              layout:
+                flex: 0 0 auto
+              properties:
+                status: success
+                text: Delivered
+        - id: rw_order_row2
+          type: Box
+          layout:
+            gap: 16
+            align: center
+          class: py-3 border-b border-border
+          blocks:
+            - id: rw_order2_id
+              type: Paragraph
+              layout:
+                flex: 0 0 120px
+              properties:
+                content: '#ORD-1043'
+            - id: rw_order2_customer
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              properties:
+                content: Michael Chen
+            - id: rw_order2_status
+              type: Badge
+              layout:
+                flex: 0 0 auto
+              properties:
+                status: processing
+                text: Shipping
+        - id: rw_order_row3
+          type: Box
+          layout:
+            gap: 16
+            align: center
+          class: py-3 border-b border-border
+          blocks:
+            - id: rw_order3_id
+              type: Paragraph
+              layout:
+                flex: 0 0 120px
+              properties:
+                content: '#ORD-1044'
+            - id: rw_order3_customer
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              properties:
+                content: Emily Davis
+            - id: rw_order3_status
+              type: Badge
+              layout:
+                flex: 0 0 auto
+              properties:
+                status: warning
+                text: Pending Payment
+        - id: rw_order_row4
+          type: Box
+          layout:
+            gap: 16
+            align: center
+          class: py-3
+          blocks:
+            - id: rw_order4_id
+              type: Paragraph
+              layout:
+                flex: 0 0 120px
+              properties:
+                content: '#ORD-1045'
+            - id: rw_order4_customer
+              type: Paragraph
+              layout:
+                flex: 1 1 0
+              properties:
+                content: James Wilson
+            - id: rw_order4_status
+              type: Badge
+              layout:
+                flex: 0 0 auto
+              properties:
+                status: error
+                text: Cancelled
+
+- title: Sidebar Navigation with Badges
+  blocks:
+    - id: rw_sidebar
+      type: Box
+      layout:
+        direction: column
+        gap: 0
+      class: bg-bg-container rounded-lg shadow-sm border border-border p-2 max-w-xs
+      blocks:
+        - id: rw_nav_inbox_btn
+          type: Button
+          class: justify-start w-full
+          properties:
+            title: Inbox
+            icon: AiOutlineInbox
+            color: primary
+            variant: text
+          events:
+            onClick:
+              - id: rw_nav_inbox_action
+                type: SetState
+                params:
+                  selectedNav: inbox
+          blocks:
+            - id: rw_nav_inbox_badge
+              type: Badge
+              layout:
+                flex: 0 0 auto
+              properties:
+                count: 12
+                size: small
+                theme:
+                  colorError: '#1677ff'
+        - id: rw_nav_alerts_btn
+          type: Button
+          class: justify-start w-full
+          properties:
+            title: Alerts
+            icon: AiOutlineAlert
+            color: default
+            variant: text
+          events:
+            onClick:
+              - id: rw_nav_alerts_action
+                type: SetState
+                params:
+                  selectedNav: alerts
+          blocks:
+            - id: rw_nav_alerts_badge
+              type: Badge
+              layout:
+                flex: 0 0 auto
+              properties:
+                count: 3
+                size: small
+                color: orange
+        - id: rw_nav_tasks_btn
+          type: Button
+          class: justify-start w-full
+          properties:
+            title: Tasks
+            icon: AiOutlineCheckSquare
+            color: default
+            variant: text
+          events:
+            onClick:
+              - id: rw_nav_tasks_action
+                type: SetState
+                params:
+                  selectedNav: tasks
+          blocks:
+            - id: rw_nav_tasks_badge
+              type: Badge
+              layout:
+                flex: 0 0 auto
+              properties:
+                dot: true
+        - id: rw_nav_settings_btn
+          type: Button
+          class: justify-start w-full
+          properties:
+            title: Settings
+            icon: AiOutlineSetting
+            color: default
+            variant: text
+          events:
+            onClick:
+              - id: rw_nav_settings_action
+                type: SetState
+                params:
+                  selectedNav: settings