thaw/space/
mod.rs

1use leptos::prelude::*;
2use thaw_utils::{class_list, mount_style};
3
4#[derive(Default)]
5pub enum SpaceGap {
6    Small,
7    #[default]
8    Medium,
9    Large,
10    Size(u16),
11    /// width and height
12    WH(u16, u16),
13}
14
15#[component]
16pub fn Space(
17    #[prop(optional, into)] class: MaybeProp<String>,
18    /// Space's gap.
19    #[prop(optional)]
20    gap: SpaceGap,
21    /// Whether to lay out vertically.
22    #[prop(optional)]
23    vertical: bool,
24    ///  Vertical arrangement.
25    #[prop(optional, into)]
26    align: MaybeProp<SpaceAlign>,
27    /// Horizontal arrangement.
28    #[prop(optional, into)]
29    justify: MaybeProp<SpaceJustify>,
30    children: ChildrenFragment,
31) -> impl IntoView {
32    mount_style("space", include_str!("./space.css"));
33    let gap = match gap {
34        SpaceGap::Small => "4px 8px".into(),
35        SpaceGap::Medium => "8px 12px".into(),
36        SpaceGap::Large => "12px 16px".into(),
37        SpaceGap::Size(size) => format!("{size}px {size}px"),
38        SpaceGap::WH(width, height) => format!("{width}px {height}px"),
39    };
40
41    view! {
42        <div
43            class=class_list!["thaw-space", class]
44            style:gap=gap
45            style:align-items=move || align.get().map(|a| a.as_str()).unwrap_or_default()
46            style:justify-content=move || justify.get().map(|j| j.as_str()).unwrap_or_default()
47            style:flex-direction=if vertical { "column" } else { "row" }
48        >
49
50            {children()
51                .nodes
52                .into_iter()
53                .map(|node| {
54                    view! { <div class="thaw-space__item">{node}</div> }
55                })
56                .collect_view()}
57
58        </div>
59    }
60}
61
62#[derive(Clone)]
63pub enum SpaceAlign {
64    FlexStart,
65    FlexEnd,
66    Start,
67    End,
68    Center,
69    Baseline,
70    Stretch,
71}
72
73impl SpaceAlign {
74    fn as_str(&self) -> &'static str {
75        match self {
76            Self::FlexStart => "flex-start",
77            Self::FlexEnd => "flex-end",
78            Self::Start => "start",
79            Self::End => "end",
80            Self::Center => "center",
81            Self::Baseline => "baseline",
82            Self::Stretch => "stretch",
83        }
84    }
85}
86
87#[derive(Clone)]
88pub enum SpaceJustify {
89    FlexStart,
90    FlexEnd,
91    Start,
92    End,
93    Center,
94    SpaceAround,
95    SpaceBetween,
96    SpaceEvenly,
97}
98
99impl SpaceJustify {
100    fn as_str(&self) -> &'static str {
101        match self {
102            Self::FlexStart => "flex-start",
103            Self::FlexEnd => "flex-end",
104            Self::Start => "start",
105            Self::End => "end",
106            Self::Center => "center",
107            Self::SpaceAround => "space-around",
108            Self::SpaceBetween => "space-between",
109            Self::SpaceEvenly => "space-evenly",
110        }
111    }
112}
113
114#[cfg(test)]
115mod test {
116    #[test]
117    fn main() {
118        use super::Space;
119        use leptos::prelude::*;
120
121        view! {
122            <Space>
123                <p></p>
124                <p></p>
125            </Space>
126        };
127    }
128}
thaw/space/mod.rs

thaw/space/
mod.rs
