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

use leptos::prelude::*;

use crate::spacing::SpacingInset;

use super::types::{FlexAlign, FlexGap, FlexJustify, FlexWrap};

/// Headless flex container — layout structure only, no theme styling.
#[component]
pub fn BaseFlex(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional)] gap: FlexGap,
    #[prop(optional)] vertical: bool,
    #[prop(optional, into)] inline: Signal<bool>,
    #[prop(optional, into)] align: MaybeProp<FlexAlign>,
    #[prop(optional, into)] justify: MaybeProp<FlexJustify>,
    #[prop(optional, default = FlexWrap::NoWrap)] wrap: FlexWrap,
    #[prop(optional, default = false)] fill: bool,
    #[prop(optional, default = false)] full_width: bool,
    #[prop(optional, into)] padding: MaybeProp<SpacingInset>,
    #[prop(optional, into)] margin: MaybeProp<SpacingInset>,
    children: Children,
) -> impl IntoView {
    let layout = Memo::new(move |_| {
        let mut s = String::new();
        s.push_str(if inline.get() {
            "display: inline-flex;"
        } else {
            "display: flex;"
        });
        s.push_str(if vertical {
            "flex-direction: column;"
        } else {
            "flex-direction: row;"
        });
        s.push_str(&format!("flex-wrap: {};", wrap.as_str()));
        if fill {
            s.push_str("height: 100%;min-height: 0;");
        }
        if full_width {
            s.push_str("width: 100%;");
        }
        let gap_css = match gap {
            FlexGap::Small => "gap: 4px 8px;",
            FlexGap::Medium => "gap: 8px 12px;",
            FlexGap::Large => "gap: 12px 16px;",
            FlexGap::Size(size) => {
                s.push_str(&format!("gap: {size}px {size}px;"));
                ""
            }
            FlexGap::WH(width, height) => {
                s.push_str(&format!("gap: {width}px {height}px;"));
                ""
            }
        };
        if !gap_css.is_empty() {
            s.push_str(gap_css);
        }
        if let Some(align) = align.get() {
            s.push_str(&format!("align-items: {};", align.as_str()));
        }
        if let Some(justify) = justify.get() {
            s.push_str(&format!("justify-content: {};", justify.as_str()));
        }
        if let Some(padding) = padding.get() {
            s.push_str(&padding.padding_css());
        }
        if let Some(margin) = margin.get() {
            s.push_str(&margin.margin_css());
        }
        s
    });

    view! {
        <div
            class=move || {
                let extra = class.get().unwrap_or_default();
                if extra.is_empty() {
                    "orbital-flex".to_string()
                } else {
                    format!("orbital-flex {extra}")
                }
            }
            style=move || layout.get()
        >
            {children()}
        </div>
    }
}