euv-example 0.28.20

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

use super::*;

/// Builds the file list display node from selected file names.
///
/// # Arguments
///
/// - `UseFileUpload` - The file upload state.
///
/// # Returns
///
/// - `VirtualNode` - A list of file name items, or `VirtualNode::Empty`.
fn build_file_list(state: UseFileUpload) -> VirtualNode {
    let names: Vec<String> = state.get_file_names().get();
    if names.is_empty() {
        return VirtualNode::Empty;
    }
    let items: Vec<VirtualNode> = names
        .iter()
        .enumerate()
        .map(|tuple: (usize, &String)| {
            let (index, name) = tuple;
            let display_name: String = name.clone();
            html! {
                div {
                    class: c_file_upload_item()
                    span {
                        class: c_file_upload_item_index()
                        format!("#{}", index + 1)
                    }
                    span {
                        class: c_file_upload_item_name()
                        display_name
                    }
                }
            }
        })
        .collect();
    VirtualNode::Fragment(items)
}

/// A file upload demo page showcasing file selection and file list display.
/// # Arguments
///
/// - `VirtualNode<PageFileUploadProps>` - The component props node.
///
/// # Returns
///
/// - `VirtualNode` - The file upload demo page virtual DOM tree.
///
/// # Arguments
///
/// - `VirtualNode<PageFileUploadProps>` - The `node` argument.
///
#[component]
pub(crate) fn page_file_upload(node: VirtualNode<PageFileUploadProps>) -> VirtualNode {
    let PageFileUploadProps: PageFileUploadProps = node.try_get_props().unwrap_or_default();
    let state: UseFileUpload = use_file_upload();
    html! {
            div {
                class: c_page_container()
                euv_header {
                    icon: "📁"
                    title: "File Upload"
                    subtitle: "File input with configurable multiple and accept filter options. Displays selected file names and supports clearing."
                }
                euv_card {
                    title: "File Input"
                    input {
                        id: FILE_UPLOAD_ID
                        name: "file_upload"
                        type: "file"
                        autocomplete: "off"
                        class: c_file_upload_input_hidden()
                        accept: state.get_accept()
                        multiple: state.get_multiple()
                        onchange: file_upload_on_change(state)
                    }
                    div {
                        class: c_button_controls()
                        euv_button {
                            variant: EuvButtonVariant::Primary
                            label: "Browse"
                            onclick: file_upload_on_select()
                        }
                    }
                    div {
                        class: c_file_upload_options()
                        euv_checkbox {
                            id: "file-multiple"
                            name: "multiple"
                            autocomplete: "off"
                            checked: state.get_multiple()
                            label: "Allow multiple files"
                        }
                        euv_field {
                            id: "file-accept"
                            name: "accept"
                            label: "Accept filter"
                            input_type: "text"
                            placeholder: ".png,.jpg,image/*"
                    autocomplete: "off"
                    value: state.get_accept()
                    error: None
                }
            }
            p {
                class: c_event_result()
                "Status: "
                span {
                    class: c_event_highlight()
                    state.get_status()
                }
            }
            build_file_list(state)
            div {
                class: c_button_controls()
                euv_button {
                    variant: EuvButtonVariant::Primary
                    label: "Clear"
                    onclick: file_upload_on_clear(state)
                }
            }
        }
    }
        }
}