leptos_forms_rs/components/examples/wizard/
wizard_component.rs

1//! Main wizard component for the example
2//!
3//! This module provides the main FormWizardExample component that demonstrates
4//! the usage of the FormWizard with step management and validation.
5
6use crate::hooks::use_form;
7use leptos::prelude::*;
8
9use super::form_types::WizardForm;
10use super::step_components::{ConfirmationStep, PersonalInfoStep, PreferencesStep};
11
12/// Main form wizard example component
13#[component]
14pub fn FormWizardExample() -> impl IntoView {
15    let form_handle = use_form::<WizardForm>(WizardForm::default());
16
17    // Current step state
18    let (current_step, set_current_step) = signal(0);
19
20    // Step validation state
21    let (step_validation, set_step_validation) = signal::<Vec<bool>>(vec![false, false, false]);
22
23    // Create wizard steps
24    let steps = vec![
25        "Personal Info".to_string(),
26        "Preferences".to_string(),
27        "Confirmation".to_string(),
28    ];
29
30    view! {
31        <div class="form-wizard-example">
32            <h1>"Form Wizard Example"</h1>
33            <p>"This example demonstrates the enhanced Form Wizard component with validation, navigation, and step management."</p>
34
35            <div class="wizard-container">
36                <div class="wizard-steps">
37                    <div class="wizard-step active">
38                        <div class="step-number">1</div>
39                        <div class="step-title">"Personal Info"</div>
40                    </div>
41                    <div class="wizard-step">
42                        <div class="step-number">2</div>
43                        <div class="step-title">"Preferences"</div>
44                    </div>
45                    <div class="wizard-step">
46                        <div class="step-number">3</div>
47                        <div class="step-title">"Confirmation"</div>
48                    </div>
49                </div>
50
51                <div class="wizard-content">
52                    <PersonalInfoStep />
53                </div>
54
55                <div class="wizard-navigation">
56                    <button class="btn btn-secondary" disabled=true>
57                        "Previous"
58                    </button>
59                    <button class="btn btn-primary">
60                        "Next"
61                    </button>
62                </div>
63            </div>
64
65            <div class="example-info">
66                <h3>"Features Demonstrated"</h3>
67                <ul>
68                    <li>"Step-by-step form navigation"</li>
69                    <li>"Progress tracking with visual indicators"</li>
70                    <li>"Step validation and error handling"</li>
71                    <li>"Responsive design for mobile and desktop"</li>
72                    <li>"Accessibility features and keyboard navigation"</li>
73                    <li>"Custom step content rendering"</li>
74                    <li>"Form completion handling"</li>
75                </ul>
76
77                <div class="current-step-info">
78                    <h4>"Current Step: {move || current_step.get() + 1}"</h4>
79                    <p>"Step validation status: {move || {
80                        let validation = step_validation.get();
81                        if current_step.get() < validation.len() {
82                            if validation[current_step.get()] { "Valid" } else { "Invalid" }
83                        } else {
84                            "Unknown"
85                        }
86                    }}"</p>
87                </div>
88            </div>
89        </div>
90    }
91}
leptos_forms_rs/components/examples/wizard/wizard_component.rs

leptos_forms_rs/components/examples/wizard/
wizard_component.rs
