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
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

use leptos::{either::Either, prelude::*};

#[component]
pub fn BaseTable(
    #[prop(optional, into)] class: MaybeProp<String>,
    children: Children,
) -> impl IntoView {
    view! {
        <table
            class=move || {
                let extra = class.get().unwrap_or_default();
                if extra.is_empty() {
                    "orbital-table".to_string()
                } else {
                    format!("orbital-table {extra}")
                }
            }
        >
            {children()}
        </table>
    }
}

#[component]
pub fn BaseTableHeader(
    #[prop(optional, into)] class: MaybeProp<String>,
    children: Children,
) -> impl IntoView {
    view! {
        <thead
            class=move || {
                let extra = class.get().unwrap_or_default();
                if extra.is_empty() {
                    "orbital-table-header".to_string()
                } else {
                    format!("orbital-table-header {extra}")
                }
            }
        >
            {children()}
        </thead>
    }
}

#[component]
pub fn BaseTableBody(
    #[prop(optional, into)] class: MaybeProp<String>,
    children: Children,
) -> impl IntoView {
    view! {
        <tbody
            class=move || {
                let extra = class.get().unwrap_or_default();
                if extra.is_empty() {
                    "orbital-table-body".to_string()
                } else {
                    format!("orbital-table-body {extra}")
                }
            }
        >
            {children()}
        </tbody>
    }
}

#[component]
pub fn BaseTableRow(
    #[prop(optional, into)] class: MaybeProp<String>,
    children: Children,
) -> impl IntoView {
    view! {
        <tr
            class=move || {
                let extra = class.get().unwrap_or_default();
                if extra.is_empty() {
                    "orbital-table-row".to_string()
                } else {
                    format!("orbital-table-row {extra}")
                }
            }
        >
            {children()}
        </tr>
    }
}

#[component]
pub fn BaseTableCell(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] style: MaybeProp<String>,
    #[prop(default = None)] colspan: Option<u32>,
    #[prop(default = None)] rowspan: Option<u32>,
    #[prop(optional)] children: Option<Children>,
) -> impl IntoView {
    view! {
        <td
            class=move || {
                let extra = class.get().unwrap_or_default();
                if extra.is_empty() {
                    "orbital-table-cell".to_string()
                } else {
                    format!("orbital-table-cell {extra}")
                }
            }
            style=move || style.get()
            colspan=colspan
            rowspan=rowspan
        >
            {if let Some(children) = children {
                Either::Left(children())
            } else {
                Either::Right(())
            }}
        </td>
    }
}

#[component]
pub fn BaseTableCellLayout(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] truncate: Signal<bool>,
    children: Children,
) -> impl IntoView {
    view! {
        <div
            class=move || {
                let mut parts = vec!["orbital-table-cell-layout".to_string()];
                if truncate.get() {
                    parts.push("orbital-table-cell-layout--truncate".to_string());
                }
                if let Some(extra) = class.get() {
                    if !extra.is_empty() {
                        parts.push(extra);
                    }
                }
                parts.join(" ")
            }
        >
            <div class="orbital-table-cell-layout__content">
                <span class="orbital-table-cell-layout__main">{children()}</span>
            </div>
        </div>
    }
}