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

use leptos::{context::Provider, prelude::*};

use super::{SkeletonInjection, SkeletonItemShape, SkeletonItemSize};

#[component]
pub fn BaseSkeleton(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] size: Option<Signal<SkeletonItemSize>>,
    #[prop(optional, into)] shape: Option<Signal<SkeletonItemShape>>,
    children: Children,
) -> impl IntoView {
    view! {
        <div
            class=move || {
                let mut parts = vec!["orbital-skeleton".to_string()];
                if let Some(extra) = class.get() {
                    if !extra.is_empty() {
                        parts.push(extra);
                    }
                }
                parts.join(" ")
            }
            role="progressbar"
            aria-busy="true"
        >
            <Provider value=SkeletonInjection { size, shape }>{children()}</Provider>
        </div>
    }
}

#[component]
pub fn BaseSkeletonItem(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] width: MaybeProp<String>,
    #[prop(optional, into)] height: MaybeProp<String>,
    #[prop(optional, into)] size: Option<Signal<SkeletonItemSize>>,
    #[prop(optional, into)] shape: Option<Signal<SkeletonItemShape>>,
) -> impl IntoView {
    let context = SkeletonInjection::use_context();

    let modifier_class = Signal::derive(move || {
        let resolved_size = size
            .map(|signal| signal.get())
            .or_else(|| {
                context
                    .as_ref()
                    .and_then(|ctx| ctx.size.map(|signal| signal.get()))
            })
            .unwrap_or_default();

        let resolved_shape = shape
            .map(|signal| signal.get())
            .or_else(|| {
                context
                    .as_ref()
                    .and_then(|ctx| ctx.shape.map(|signal| signal.get()))
            })
            .unwrap_or_default();

        format!(
            "orbital-skeleton-item--{} orbital-skeleton-item--size-{}",
            resolved_shape.as_str(),
            resolved_size.px()
        )
    });

    view! {
        <div
            class=move || {
                let mut parts = vec![
                    "orbital-skeleton-item".to_string(),
                    modifier_class.get(),
                ];
                if let Some(extra) = class.get() {
                    if !extra.is_empty() {
                        parts.push(extra);
                    }
                }
                parts.join(" ")
            }
            style=move || {
                let mut parts = Vec::new();
                if let Some(w) = width.get() {
                    parts.push(format!("width: {w}"));
                }
                if let Some(h) = height.get() {
                    parts.push(format!("height: {h}"));
                }
                parts.join("; ")
            }
            aria-hidden="true"
        ></div>
    }
}