Skip to main content

orbital_base_components/form/input/
base.rs

1use leptos::{ev, html, prelude::*};
2
3use crate::form::bind::FormBind;
4use crate::form::field_injection::FieldInjection;
5use crate::form::types::InputType;
6use crate::ComponentRef;
7
8use super::r#ref::InputRef;
9
10/// Headless native `<input>` — semantics and a11y only.
11#[component(transparent)]
12pub fn BaseInput(
13    #[prop(optional, into)] class: MaybeProp<String>,
14    #[prop(optional, into)] size: MaybeProp<String>,
15    #[prop(optional, into)] id: MaybeProp<String>,
16    #[prop(optional, into)] name: MaybeProp<String>,
17    #[prop(optional, into)] value: FormBind<String>,
18    #[prop(optional, into)] input_type: Signal<InputType>,
19    #[prop(optional, into)] placeholder: MaybeProp<String>,
20    #[prop(optional, into)] disabled: Signal<bool>,
21    #[prop(optional, into)] readonly: Signal<bool>,
22    #[prop(optional, into)] autocomplete: MaybeProp<String>,
23    #[prop(optional)] comp_ref: ComponentRef<InputRef>,
24) -> impl IntoView {
25    let (id, name) = FieldInjection::use_id_and_name(id, name);
26    let input_ref = NodeRef::<html::Input>::new();
27    comp_ref.load(InputRef::new(input_ref));
28
29    let value_bind = value.clone();
30    let on_input = move |ev: ev::Event| {
31        value_bind.set(event_target_value(&ev));
32    };
33
34    view! {
35        <input
36            class=move || {
37                let mut parts = Vec::new();
38                if let Some(c) = class.get() {
39                    if !c.is_empty() {
40                        parts.push(c);
41                    }
42                }
43                if let Some(c) = size.get() {
44                    if !c.is_empty() {
45                        parts.push(c);
46                    }
47                }
48                parts.join(" ")
49            }
50            type=move || input_type.get().as_str()
51            id=id
52            name=name
53            placeholder=move || placeholder.get()
54            disabled=move || disabled.get().then_some("")
55            readonly=move || readonly.get().then_some("")
56            autocomplete=move || autocomplete.get()
57            prop:value=move || value.get()
58            on:input=on_input
59            node_ref=input_ref
60        />
61    }
62}