euv-example 0.3.4

An example application demonstrating the euv UI framework with reactive signals, custom components, and WebAssembly.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

use crate::*;

/// Reactive state for a registration form feature.
///
/// # Fields
///
/// - `Signal<String>`: The username input.
/// - `Signal<String>`: The email input.
/// - `Signal<String>`: The password input.
/// - `Signal<bool>`: The agree checkbox state.
/// - `Signal<String>`: The submission result message.
/// - `Signal<String>`: The validation error message.
#[derive(Clone, Copy)]
pub struct UseForm {
    pub username: Signal<String>,
    pub email: Signal<String>,
    pub password: Signal<String>,
    pub agree: Signal<bool>,
    pub submitted: Signal<String>,
    pub errors: Signal<String>,
}

/// Creates form state signals wrapped in a `UseForm` struct.
///
/// # Returns
///
/// - `UseForm`: The form state.
pub fn use_form() -> UseForm {
    UseForm {
        username: use_signal(|| "".to_string()),
        email: use_signal(|| "".to_string()),
        password: use_signal(|| "".to_string()),
        agree: use_signal(|| true),
        submitted: use_signal(|| "".to_string()),
        errors: use_signal(|| "".to_string()),
    }
}

/// Creates a click event handler that validates and submits the form.
///
/// # Arguments
///
/// - `UseForm`: The form state.
///
/// # Returns
///
/// - `NativeEventHandler`: A click handler for form submission.
pub fn form_on_submit(state: UseForm) -> NativeEventHandler {
    NativeEventHandler::new(NativeEventName::Click, move |_event: NativeEvent| {
        let mut validation_errors: Vec<String> = Vec::new();
        if state.username.get().trim().is_empty() {
            validation_errors.push("Username is required".to_string());
        }
        if state.email.get().trim().is_empty() {
            validation_errors.push("Email is required".to_string());
        }
        if state.password.get().len() < 6 {
            validation_errors.push("Password must be at least 6 characters".to_string());
        }
        if !state.agree.get() {
            validation_errors.push("You must agree to the terms".to_string());
        }
        if validation_errors.is_empty() {
            state.errors.set("".to_string());
            state.submitted.set(format!(
                "Submitted: username={}, email={}",
                state.username.get(),
                state.email.get()
            ));
        } else {
            state.errors.set(validation_errors.join("; "));
        }
    })
}