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
81
82
83
84
85
86
87
88
89
90

use crate::components::shared::{MENU_ITEM_CLASS, MENU_SEPARATOR_CLASS};
use leptos::prelude::*;

// ponytail: click-catcher (fixed inset-0 z-40) handles outside-click close.
// Panel at z-50. Anchored via relative/absolute — no portal needed.

#[component]
pub fn DropdownMenu(children: ChildrenFn) -> impl IntoView {
    let open = RwSignal::new(false);
    provide_context(open);

    let children = StoredValue::new(children);

    view! {
        <div class="relative inline-block">
            {children.with_value(|c| c())}
        </div>
    }
}

#[component]
pub fn DropdownMenuTrigger(children: Children) -> impl IntoView {
    let open =
        use_context::<RwSignal<bool>>().expect("DropdownMenuTrigger must be inside DropdownMenu");

    view! {
        <div on:click=move |_| open.update(|v| *v = !*v) style="display:contents">
            {children()}
        </div>
    }
}

#[component]
pub fn DropdownMenuContent(children: ChildrenFn) -> impl IntoView {
    let open =
        use_context::<RwSignal<bool>>().expect("DropdownMenuContent must be inside DropdownMenu");
    let close = move |_| open.set(false);

    let children = StoredValue::new(children);

    view! {
        <Show when=move || open.get()>
            <div class="fixed inset-0 z-40" on:click=close />
            <div class="absolute z-50 mt-2 min-w-[12rem] rounded-md border border-border bg-card p-1 shadow-elev-md animate-scale-in">
                {children.with_value(|c| c())}
            </div>
        </Show>
    }
}

#[component]
pub fn DropdownMenuItem(
    #[prop(optional)] on_click: Option<Callback<()>>,
    children: Children,
) -> impl IntoView {
    let open =
        use_context::<RwSignal<bool>>().expect("DropdownMenuItem must be inside DropdownMenu");

    let handle_click = move |_| {
        open.set(false);
        if let Some(cb) = on_click {
            cb.run(());
        }
    };

    view! {
        <div
            class=MENU_ITEM_CLASS
            on:click=handle_click
        >
            {children()}
        </div>
    }
}

#[component]
pub fn DropdownMenuLabel(children: Children) -> impl IntoView {
    view! {
        <div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
            {children()}
        </div>
    }
}

#[component]
pub fn DropdownMenuSeparator() -> impl IntoView {
    view! {
        <div class=MENU_SEPARATOR_CLASS />
    }
}