soma-ui 0.1.1

A Leptos 0.8 component library: 160+ accessible UI components, blocks, charts, and a ChartDB-style schema diagram — with a prebuilt stylesheet.
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

use leptos::prelude::*;

#[component]
pub fn Table(#[prop(default = String::new())] class: String, children: Children) -> impl IntoView {
    let wrapper = format!("w-full overflow-auto {}", class);
    view! {
        <div class=wrapper>
            <table class="w-full caption-bottom text-sm">{children()}</table>
        </div>
    }
}

#[component]
pub fn TableHeader(
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let combined = format!("[&_tr]:border-b {}", class);
    view! { <thead class=combined>{children()}</thead> }
}

#[component]
pub fn TableBody(
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let combined = format!("[&_tr:last-child]:border-0 {}", class);
    view! { <tbody class=combined>{children()}</tbody> }
}

#[component]
pub fn TableFooter(
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let combined = format!("border-t border-border bg-muted/50 font-medium {}", class);
    view! { <tfoot class=combined>{children()}</tfoot> }
}

#[component]
pub fn TableRow(
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let combined = format!(
        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted {}",
        class
    );
    view! { <tr class=combined>{children()}</tr> }
}

#[component]
pub fn TableHead(
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let combined = format!(
        "h-10 px-2 text-start align-middle font-medium text-muted-foreground {}",
        class
    );
    view! { <th class=combined>{children()}</th> }
}

#[component]
pub fn TableCell(
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let combined = format!("p-2 align-middle {}", class);
    view! { <td class=combined>{children()}</td> }
}

#[component]
pub fn TableCaption(
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let combined = format!("mt-4 text-sm text-muted-foreground {}", class);
    view! { <caption class=combined>{children()}</caption> }
}