Skip to main content

nightshade_api/web/
inspector.rs

1//! A property-inspector panel built from collapsible sections and labeled rows.
2
3use leptos::prelude::*;
4
5/// The outer container for an inspector panel; wraps its `children` sections.
6#[component]
7pub fn Inspector(children: Children) -> impl IntoView {
8    view! { <div class="nightshade-inspector">{children()}</div> }
9}
10
11/// A collapsible inspector section with a `title` header, optional `actions`
12/// rendered on the header row, and a body of `children`. `default_open`
13/// controls the initial expanded state.
14#[component]
15pub fn InspectorSection(
16    #[prop(into)] title: String,
17    #[prop(default = true)] default_open: bool,
18    #[prop(optional, into)] actions: ViewFn,
19    children: ChildrenFn,
20) -> impl IntoView {
21    let open = RwSignal::new(default_open);
22    view! {
23        <div class="nightshade-inspector-section">
24            <div class="nightshade-inspector-headrow">
25                <button
26                    class="nightshade-inspector-header"
27                    on:click=move |_| open.update(|value| *value = !*value)
28                >
29                    <span class="nightshade-inspector-caret" class:open=move || open.get()>
30                        "\u{25b8}"
31                    </span>
32                    {title}
33                </button>
34                <div class="nightshade-inspector-actions">{actions.run()}</div>
35            </div>
36            <Show when=move || open.get() fallback=|| ()>
37                <div class="nightshade-inspector-body">{children()}</div>
38            </Show>
39        </div>
40    }
41}
42
43/// A labeled inspector row pairing a `label` with a control rendered from
44/// `children`.
45#[component]
46pub fn InspectorRow(#[prop(into)] label: String, children: Children) -> impl IntoView {
47    view! {
48        <div class="nightshade-inspector-row">
49            <span class="nightshade-inspector-label">{label}</span>
50            <div class="nightshade-inspector-control">{children()}</div>
51        </div>
52    }
53}