Skip to main content

euv_ui/component/input/view/
fn.rs

1use crate::*;
2
3/// A custom input component with label and event handling.
4///
5/// Internally binds `onfocus` and `onblur` so that mobile virtual keyboards
6/// never obscure the field. The label is optional — leave it empty to render
7/// an input without a label.
8///
9/// # Arguments
10///
11/// - `VirtualNode<EuvInputProps>` - The props node containing id, label, placeholder, value, autocomplete, etc.
12///
13/// # Returns
14///
15/// - `VirtualNode` - A labeled input element.
16#[component]
17pub fn euv_input(node: VirtualNode<EuvInputProps>) -> VirtualNode {
18    let EuvInputProps {
19        id,
20        name,
21        label: label_text,
22        input_type,
23        placeholder,
24        value,
25        autocomplete,
26        oninput,
27        class,
28    }: EuvInputProps = node.try_get_props().unwrap_or_default();
29    let effective_name: &'static str = if name.is_empty() { id } else { name };
30    let effective_type: &'static str = if input_type.is_empty() {
31        "text"
32    } else {
33        input_type
34    };
35    let effective_class: Css = if class.get_name().is_empty() {
36        c_euv_input().clone()
37    } else {
38        class
39    };
40    html! {
41        div {
42            class: c_euv_input_wrapper()
43            if { !label_text.is_empty() } {
44                label {
45                    for: id
46                    class: c_form_label()
47                    label_text
48                }
49            }
50            input {
51                id: id
52                name: effective_name
53                type: effective_type
54                placeholder: placeholder
55                value: value
56                autocomplete: autocomplete
57                class: effective_class
58                oninput: oninput
59                onfocus: UseEuvInput::on_focus_scroll_into_view()
60                onblur: UseEuvInput::on_blur_restore_height()
61            }
62        }
63    }
64}