@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/Steps/gallery.yaml

@@ -0,0 +1,550 @@
+# 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 Steps
+  blocks:
+    - id: basic_steps
+      type: Steps
+      properties:
+        current: 1
+        items:
+          - title: Finished
+            description: This is a description.
+          - title: In Progress
+            description: This is a description.
+          - title: Waiting
+            description: This is a description.
+    - id: basic_no_description
+      type: Steps
+      properties:
+        current: 0
+        items:
+          - title: Step 1
+          - title: Step 2
+          - title: Step 3
+    - id: basic_four_steps
+      type: Steps
+      properties:
+        current: 2
+        items:
+          - title: Login
+          - title: Verification
+          - title: Pay
+          - title: Done
+
+- title: Small Size
+  blocks:
+    - id: small_steps
+      type: Steps
+      properties:
+        size: small
+        current: 1
+        items:
+          - title: Finished
+          - title: In Progress
+          - title: Waiting
+    - id: small_with_description
+      type: Steps
+      properties:
+        size: small
+        current: 0
+        items:
+          - title: Step 1
+            description: Brief info
+          - title: Step 2
+            description: Brief info
+          - title: Step 3
+            description: Brief info
+
+- title: With Icons
+  blocks:
+    - id: icon_steps
+      type: Steps
+      properties:
+        current: 1
+        items:
+          - title: Login
+            icon: AiOutlineUser
+          - title: Verification
+            icon: AiOutlineSolution
+          - title: Done
+            icon: AiOutlineSmile
+    - id: icon_custom_color
+      type: Steps
+      properties:
+        current: 0
+        items:
+          - title: Upload
+            icon:
+              name: AiOutlineCloudUpload
+              color: '#1677ff'
+          - title: Process
+            icon:
+              name: AiOutlineLoading
+              color: '#faad14'
+          - title: Complete
+            icon:
+              name: AiOutlineCheck
+              color: '#52c41a'
+
+- title: Vertical Steps
+  blocks:
+    - id: vertical_steps
+      type: Steps
+      properties:
+        orientation: vertical
+        current: 1
+        items:
+          - title: Finished
+            description: This is a description.
+          - title: In Progress
+            description: This is a description.
+          - title: Waiting
+            description: This is a description.
+    - id: vertical_small
+      type: Steps
+      properties:
+        orientation: vertical
+        size: small
+        current: 2
+        items:
+          - title: Order Placed
+            description: Your order has been submitted.
+          - title: Payment Confirmed
+            description: Payment received successfully.
+          - title: Shipping
+            description: Your package is on its way.
+          - title: Delivered
+
+- title: Step Status
+  blocks:
+    - id: error_status
+      type: Steps
+      properties:
+        current: 1
+        status: error
+        items:
+          - title: Finished
+            description: This is a description.
+          - title: In Progress
+            description: This is a description.
+          - title: Waiting
+            description: This is a description.
+    - id: mixed_status
+      type: Steps
+      properties:
+        current: 2
+        items:
+          - title: Passed
+            status: finish
+          - title: Failed
+            status: error
+          - title: In Review
+          - title: Pending
+
+- title: Navigation Type
+  blocks:
+    - id: navigation_steps
+      type: Steps
+      properties:
+        type: navigation
+        current: 1
+        items:
+          - title: Step 1
+            subTitle: (00:00:05)
+            description: This is a description.
+          - title: Step 2
+            subTitle: (00:01:02)
+            description: This is a description.
+          - title: Step 3
+            description: This is a description.
+
+- title: Inline Type
+  blocks:
+    - id: inline_steps
+      type: Steps
+      properties:
+        type: inline
+        current: 1
+        items:
+          - title: Step 1
+          - title: Step 2
+          - title: Step 3
+
+- title: Panel Steps
+  fullWidth: true
+
+  blocks:
+    - id: panel_steps
+      type: Steps
+      properties:
+        type: panel
+        current:
+          _state: panel_current
+        items:
+          - title: Step 1
+            description: This is a description.
+          - title: Step 2
+            description: This is a description.
+          - title: Step 3
+            description: This is a description.
+      events:
+        onChange:
+          - id: panel_set_state
+            type: SetState
+            params:
+              panel_current:
+                _event: current
+    - id: panel_steps_icons
+      type: Steps
+      properties:
+        type: panel
+        current:
+          _state: panel_icons_current
+        items:
+          - title: Account
+            description: Create your account
+            icon: AiOutlineUser
+          - title: Settings
+            description: Configure preferences
+            icon: AiOutlineSetting
+          - title: Review
+            description: Review and submit
+            icon: AiOutlineCheck
+          - title: Done
+            description: All finished
+      events:
+        onChange:
+          - id: panel_icons_set_state
+            type: SetState
+            params:
+              panel_icons_current:
+                _event: current
+
+- title: Dot Style
+  blocks:
+    - id: dot_steps
+      type: Steps
+      properties:
+        type: dot
+        current: 1
+        items:
+          - title: Finished
+            description: This is a description.
+          - title: In Progress
+            description: This is a description.
+          - title: Waiting
+            description: This is a description.
+    - id: dot_steps_vertical
+      type: Steps
+      properties:
+        type: dot
+        orientation: vertical
+        current: 1
+        items:
+          - title: Finished
+            description: This is a description. This is a description.
+          - title: In Progress
+            description: This is a description. This is a description.
+          - title: Waiting
+            description: This is a description.
+    - id: dot_steps_small
+      type: Steps
+      properties:
+        progressDot: true
+        size: small
+        current: 1
+        items:
+          - title: Finished
+          - title: In Progress
+          - title: Waiting
+
+- title: With Progress
+  blocks:
+    - id: progress_steps
+      type: Steps
+      properties:
+        current: 1
+        percent: 60
+        items:
+          - title: Finished
+          - title: In Progress
+          - title: Waiting
+    - id: progress_steps_25
+      type: Steps
+      properties:
+        current: 0
+        percent: 25
+        items:
+          - title: Upload
+          - title: Process
+          - title: Done
+
+- title: Title Placement
+  blocks:
+    - id: label_vertical
+      type: Steps
+      properties:
+        titlePlacement: vertical
+        current: 1
+        items:
+          - title: Step 1
+            description: Description
+          - title: Step 2
+            description: Description
+          - title: Step 3
+            description: Description
+
+- title: Clickable Steps (onChange)
+
+  blocks:
+    - id: clickable_steps
+      type: Steps
+      properties:
+        current:
+          _state: clickable_current
+        items:
+          - title: Step 1
+            description: Click to go here
+          - title: Step 2
+            description: Click to go here
+          - title: Step 3
+            description: Click to go here
+      events:
+        onChange:
+          - id: clickable_set_state
+            type: SetState
+            params:
+              clickable_current:
+                _event: current
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_primary
+      type: Steps
+      properties:
+        current: 1
+        items:
+          - title: Finished
+          - title: In Progress
+          - title: Waiting
+        theme:
+          colorPrimary: '#722ed1'
+    - id: theme_icon_size
+      type: Steps
+      properties:
+        current: 1
+        items:
+          - title: Step 1
+          - title: Step 2
+          - title: Step 3
+        theme:
+          iconSize: 40
+          iconFontSize: 18
+    - id: theme_combined
+      type: Steps
+      properties:
+        current: 1
+        items:
+          - title: Start
+            description: Begin here
+          - title: Middle
+            description: Keep going
+          - title: End
+            description: Almost done
+        theme:
+          colorPrimary: '#52c41a'
+          iconSize: 36
+          descriptionMaxWidth: 200
+          finishIconBorderColor: '#52c41a'
+
+- title: Steps Wizard Pattern
+  fullWidth: true
+
+  blocks:
+    - id: wizard_card
+      type: Card
+      properties:
+        title: Create Account
+        size: small
+      blocks:
+        - id: wizard_steps
+          type: Steps
+          properties:
+            current:
+              _state: wizard_step
+            items:
+              - title: Account
+                icon: AiOutlineUser
+              - title: Profile
+                icon: AiOutlineIdcard
+              - title: Confirm
+                icon: AiOutlineCheck
+          events:
+            onChange:
+              - id: wizard_set_step
+                type: SetState
+                params:
+                  wizard_step:
+                    _event: current
+        - id: wizard_divider
+          type: Divider
+        - id: wizard_description
+          type: Markdown
+          properties:
+            content:
+              _if:
+                test:
+                  _eq:
+                    - _state: wizard_step
+                    - 0
+                then: |
+                  **Step 1: Account Details**
+
+                  Enter your email address and create a password to get started.
+                else:
+                  _if:
+                    test:
+                      _eq:
+                        - _state: wizard_step
+                        - 1
+                    then: |
+                      **Step 2: Profile Information**
+
+                      Tell us a bit about yourself so we can personalize your experience.
+                    else: |
+                      **Step 3: Confirmation**
+
+                      Review your information and confirm to complete registration.
+        - id: wizard_actions
+          type: Box
+          layout:
+            gap: 8
+            justify: flex-end
+          blocks:
+            - id: wizard_prev_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Previous
+                color: default
+                variant: outlined
+                disabled:
+                  _eq:
+                    - _state: wizard_step
+                    - 0
+              events:
+                onClick:
+                  - id: wizard_prev_action
+                    type: SetState
+                    params:
+                      wizard_step:
+                        _subtract:
+                          - _state:
+                              key: wizard_step
+                              default: 0
+                          - 1
+            - id: wizard_next_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title:
+                  _if:
+                    test:
+                      _eq:
+                        - _state: wizard_step
+                        - 2
+                    then: Submit
+                    else: Next
+                color: primary
+                variant: solid
+              events:
+                onClick:
+                  - id: wizard_next_action
+                    type: SetState
+                    skip:
+                      _eq:
+                        - _state: wizard_step
+                        - 2
+                    params:
+                      wizard_step:
+                        _sum:
+                          - _state:
+                              key: wizard_step
+                              default: 0
+                          - 1
+                  - id: wizard_done_msg
+                    type: DisplayMessage
+                    skip:
+                      _not:
+                        _eq:
+                          - _state: wizard_step
+                          - 2
+                    params:
+                      content: Account created successfully!
+                      status: success
+
+- title: Order Tracking
+  blocks:
+    - id: order_card
+      type: Card
+      properties:
+        title: 'Order #12345'
+        size: small
+      blocks:
+        - id: order_steps
+          type: Steps
+          properties:
+            orientation: vertical
+            current: 2
+            items:
+              - title: Order Placed
+                description: March 10, 2026 at 2:30 PM
+                icon: AiOutlineShoppingCart
+              - title: Payment Confirmed
+                description: March 10, 2026 at 2:31 PM
+                icon: AiOutlineCreditCard
+              - title: Shipped
+                description: March 12, 2026 - Tracking number available
+                icon: AiOutlineCar
+              - title: Delivered
+                description: Estimated March 15, 2026
+                icon: AiOutlineHome
+
+- title: Style and CSS
+  blocks:
+    - id: css_tailwind_bg
+      type: Steps
+      class: bg-bg-layout p-4 rounded-lg
+      properties:
+        current: 1
+        items:
+          - title: Draft
+          - title: Review
+          - title: Published
+    - id: css_inline_border
+      type: Steps
+      properties:
+        current: 1
+        items:
+          - title: Upload
+          - title: Process
+          - title: Complete
+      style:
+        .element:
+          padding: 16px
+          border: 1px solid #d9d9d9
+          borderRadius: 8