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

use super::shared::{EscapeBackdrop, OverlayDescription, OverlayFooter, OverlayTitle};
use leptos::portal::Portal;
use leptos::prelude::*;

/// Bottom sheet / drawer. Caller owns the open signal.
#[component]
pub fn Drawer(#[prop(into)] open: RwSignal<bool>, children: ChildrenFn) -> impl IntoView {
    provide_context(open);

    let children = StoredValue::new(children);

    view! {
        <Portal>
            <Show when=move || open.get()>
                <EscapeBackdrop open=open>
                    {children.with_value(|c| c())}
                </EscapeBackdrop>
            </Show>
        </Portal>
    }
}

#[component]
pub fn DrawerContent(children: Children) -> impl IntoView {
    view! {
        <div class="fixed inset-x-0 bottom-0 z-50 rounded-t-xl border-t border-border bg-card p-6 shadow-elev-lg animate-slide-up max-h-[85vh] overflow-auto">
            <div class="mx-auto mb-4 h-1.5 w-12 rounded-full bg-muted" />
            {children()}
        </div>
    }
}

#[component]
pub fn DrawerHeader(children: Children) -> impl IntoView {
    view! { <div class="mb-4">{children()}</div> }
}

#[component]
pub fn DrawerTitle(children: Children) -> impl IntoView {
    view! { <OverlayTitle>{children()}</OverlayTitle> }
}

#[component]
pub fn DrawerDescription(children: Children) -> impl IntoView {
    view! { <OverlayDescription>{children()}</OverlayDescription> }
}

#[component]
pub fn DrawerFooter(children: Children) -> impl IntoView {
    view! { <OverlayFooter>{children()}</OverlayFooter> }
}