thaw 0.4.8

An easy to use leptos component library
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

use leptos::prelude::*;
use thaw_utils::class_list;

#[component]
pub fn Flex(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] style: MaybeProp<String>,
    /// Flex's gap.
    #[prop(optional)]
    gap: FlexGap,
    /// Whether to lay out vertically.
    #[prop(optional)]
    vertical: bool,
    /// Whether it's display is `inline-flex`.
    #[prop(optional, into)]
    inline: Signal<bool>,
    /// Vertical arrangement.
    #[prop(optional, into)]
    align: MaybeProp<FlexAlign>,
    /// Horizontal arrangement.
    #[prop(optional, into)]
    justify: MaybeProp<FlexJustify>,
    children: Children,
) -> impl IntoView {
    let style = Memo::new(move |_| {
        let mut s = String::new();
        let display = if inline.get() {
            "display: inline-flex;"
        } else {
            "display: flex;"
        };
        s.push_str(display);
        let direction = if vertical {
            "flex-direction: column;"
        } else {
            "flex-direction: row;"
        };
        let gap = match gap {
            FlexGap::Small => "gap: 4px 8px;",
            FlexGap::Medium => "gap: 8px 12px;",
            FlexGap::Large => "gap: 12px 16px;",
            FlexGap::Size(size) => &format!("gap: {size}px {size}px;"),
            FlexGap::WH(width, height) => &format!("gap: {width}px {height}px;"),
        };
        s.push_str(direction);
        s.push_str(gap);
        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()));
        }
        style.with(|style| {
            if let Some(style) = style.as_ref() {
                s.push_str(style);
            }
        });

        s
    });

    view! {
        <div class=class_list!["thaw-flex", class] style=move || style.get()>
            {children()}
        </div>
    }
}

#[derive(Default)]
pub enum FlexGap {
    Small,
    #[default]
    Medium,
    Large,
    Size(u16),
    /// width and height
    WH(u16, u16),
}

#[derive(Clone)]
pub enum FlexAlign {
    FlexStart,
    FlexEnd,
    Start,
    End,
    Center,
    Baseline,
    Stretch,
}

impl FlexAlign {
    fn as_str(&self) -> &'static str {
        match self {
            Self::FlexStart => "flex-start",
            Self::FlexEnd => "flex-end",
            Self::Start => "start",
            Self::End => "end",
            Self::Center => "center",
            Self::Baseline => "baseline",
            Self::Stretch => "stretch",
        }
    }
}

#[derive(Clone)]
pub enum FlexJustify {
    FlexStart,
    FlexEnd,
    Start,
    End,
    Center,
    SpaceAround,
    SpaceBetween,
    SpaceEvenly,
}

impl FlexJustify {
    fn as_str(&self) -> &'static str {
        match self {
            Self::FlexStart => "flex-start",
            Self::FlexEnd => "flex-end",
            Self::Start => "start",
            Self::End => "end",
            Self::Center => "center",
            Self::SpaceAround => "space-around",
            Self::SpaceBetween => "space-between",
            Self::SpaceEvenly => "space-evenly",
        }
    }
}