orbital-base-components 0.1.1

Headless base primitives for Orbital — structure, semantics, and accessibility
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

use leptos::{html, prelude::*};

use crate::form::bind::FormBind;
use crate::form::field_injection::FieldInjection;

/// Headless native `<select>`.
#[component(transparent)]
pub fn BaseSelect(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] size: MaybeProp<String>,
    #[prop(optional, into)] id: MaybeProp<String>,
    #[prop(optional, into)] name: MaybeProp<String>,
    #[prop(optional, into)] value: FormBind<String>,
    #[prop(optional, into)] disabled: Signal<bool>,
    children: Children,
) -> impl IntoView {
    let (id, name) = FieldInjection::use_id_and_name(id, name);
    let select_ref = NodeRef::<html::Select>::new();

    let value_bind = value.clone();
    let on_change = move |_| {
        if let Some(el) = select_ref.get_untracked() {
            value_bind.set(el.value());
        }
    };

    view! {
        <select
            class=move || {
                let mut parts = Vec::new();
                if let Some(c) = class.get() {
                    if !c.is_empty() {
                        parts.push(c);
                    }
                }
                if let Some(c) = size.get() {
                    if !c.is_empty() {
                        parts.push(c);
                    }
                }
                parts.join(" ")
            }
            id=id
            name=name
            disabled=disabled
            prop:value=move || value.get()
            on:change=on_change
            node_ref=select_ref
        >
            {children()}
        </select>
    }
}