euv-example 0.1.0

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

use crate::*;

/// The home page component.
///
/// # Returns
///
/// - `VirtualNode`: The home page virtual DOM tree.
pub fn page_home() -> VirtualNode {
    let count: Signal<i32> = use_signal(|| 0);
    let count_updater: Signal<i32> = count;
    let theme: Signal<String> = use_signal(|| "light".to_string());
    let theme_updater: Signal<String> = theme;
    let theme_read: Signal<String> = theme;
    let is_dark: bool = theme_read.get() == "dark";
    let bg_color: String = if is_dark {
        "#1a1a2e".to_string()
    } else {
        "#ffffff".to_string()
    };
    let text_color: String = if is_dark {
        "#e0e0e0".to_string()
    } else {
        "#1a1a2e".to_string()
    };
    let theme_label: String = if is_dark {
        "☀ Light".to_string()
    } else {
        "🌙 Dark".to_string()
    };
    rsx! {
        div {
            class: c_page_container()
            style: {background: {bg_color}; color: {text_color}; transition: "all 0.3s ease"; min_height: "100vh"; padding: "32px 24px";}
            div {
                class: c_page_header()
                h1 {
                    class: c_page_title()
                    "euv Component System"
                }
                p {
                    class: c_page_subtitle()
                    "This example demonstrates reactive signals for attributes and text."
                }
            }
            my_card {
                title: "Counter Component"
                div {
                    class: c_counter_row()
                    div {
                        class: c_counter_text()
                        "Count: "
                        span {
                            id: "counter"
                            class: c_counter_value()
                            count
                        }
                    }
                    primary_button {
                        label: "Increment"
                        onclick: move |_event: NativeEvent| {
                            let current: i32 = count_updater.get();
                            count_updater.set(current + 1);
                        }
                        "Click to Count"
                    }
                    primary_button {
                        label: "Toggle Theme"
                        onclick: move |_event: NativeEvent| {
                            let current: String = theme_updater.get();
                            if current == "light" {
                                theme_updater.set("dark".to_string());
                            } else {
                                theme_updater.set("light".to_string());
                            }
                        }
                        theme_label
                    }
                }
            }
            my_card {
                title: "Badge Components"
                p {
                    class: c_badge_hint()
                    "Status indicators with click support"
                }
                div {
                    class: c_badge_row()
                    my_badge {
                        color: "#059669"
                        text: "Success"
                        on_click: move |_event: NativeEvent| {
                            web_sys::console::log_1(&"Success badge clicked!".into());
                        }
                    }
                    my_badge {
                        color: "#dc2626"
                        text: "Error"
                        on_click: move |_event: NativeEvent| {
                            web_sys::console::log_1(&"Error badge clicked!".into());
                        }
                    }
                    my_badge {
                        color: "#d97706"
                        text: "Warning"
                    }
                    my_badge {
                        color: "#6b7280"
                        text: "Info"
                    }
                }
            }
            my_card {
                title: "Form Components"
                div {
                    class: c_form_grid()
                    form_input {
                        label: "Username"
                        placeholder: "Enter your username"
                        value: ""
                    }
                    form_input {
                        label: "Email"
                        placeholder: "Enter your email"
                        value: ""
                    }
                }
            }
            my_card {
                title: "Custom Attributes Demo"
                div {
                    data_role: "container"
                    data_id: "12345"
                    aria_label: "Demo section"
                    class: c_custom_attrs_demo()
                    p {
                        class: c_demo_text()
                        "This div has custom data-* and aria-* attributes."
                    }
                    p {
                        class: c_demo_text_muted()
                        "Inspect the element to see data-role, data-id, and aria-label."
                    }
                }
            }
            my_card {
                title: "Nested Components"
                primary_button {
                    my_badge {
                        color: "#7c3aed"
                        text: "Nested Badge in Button"
                    }
                }
            }
        }
    }
}