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
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

use leptos::prelude::*;

#[derive(Clone, Copy, Debug, PartialEq, Eq)]
pub enum ListNavigationMode {
    Selectable,
    Nav,
}

#[derive(Clone, Copy, Debug, PartialEq, Eq)]
pub enum ListSelectionMode {
    Single,
    Multiselect,
}

#[component]
pub fn BaseList(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] navigation_mode: Signal<Option<ListNavigationMode>>,
    #[prop(optional, into)] selection_mode: Signal<Option<ListSelectionMode>>,
    children: Children,
) -> impl IntoView {
    let role = move || {
        if selection_mode.get().is_some() {
            "listbox"
        } else {
            "list"
        }
    };

    view! {
        <ul
            class=move || {
                let mut parts = vec!["orbital-list".to_string()];
                if let Some(mode) = navigation_mode.get() {
                    parts.push(format!("orbital-list--nav-{}", mode_as_str(mode)));
                }
                if let Some(mode) = selection_mode.get() {
                    parts.push(format!("orbital-list--select-{}", select_mode_as_str(mode)));
                }
                if let Some(extra) = class.get() {
                    if !extra.is_empty() {
                        parts.push(extra);
                    }
                }
                parts.join(" ")
            }
            role=role
        >
            {children()}
        </ul>
    }
}

fn mode_as_str(mode: ListNavigationMode) -> &'static str {
    match mode {
        ListNavigationMode::Selectable => "selectable",
        ListNavigationMode::Nav => "nav",
    }
}

fn select_mode_as_str(mode: ListSelectionMode) -> &'static str {
    match mode {
        ListSelectionMode::Single => "single",
        ListSelectionMode::Multiselect => "multiselect",
    }
}

#[component]
pub fn BaseListItem(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] selected: Signal<bool>,
    #[prop(optional)] on_click: Option<Callback<()>>,
    children: Children,
) -> impl IntoView {
    view! {
        <li
            class=move || {
                let mut parts = vec!["orbital-list__item".to_string()];
                if selected.get() {
                    parts.push("orbital-list__item--selected".to_string());
                }
                if let Some(extra) = class.get() {
                    if !extra.is_empty() {
                        parts.push(extra);
                    }
                }
                parts.join(" ")
            }
            role="listitem"
            aria-selected=move || selected.get().then_some("true")
            tabindex=move || if selected.get() { "0" } else { "-1" }
            on:click=move |_| {
                if let Some(cb) = on_click {
                    cb.run(());
                }
            }
        >
            {children()}
        </li>
    }
}