kael_ui 0.2.0

Professional shadcn-inspired UI component library for Kael. 100+ accessible components for building beautiful, performant desktop applications.
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

//! Card - Content container with header, body, and footer sections.

use crate::theme::use_theme;
use kael::{prelude::FluentBuilder as _, *};

pub struct Card {
    header: Option<AnyElement>,
    content: Option<AnyElement>,
    footer: Option<AnyElement>,
    style: StyleRefinement,
}

impl Default for Card {
    fn default() -> Self {
        Self::new()
    }
}

impl Card {
    pub fn new() -> Self {
        Self {
            header: None,
            content: None,
            footer: None,
            style: StyleRefinement::default(),
        }
    }

    pub fn header(mut self, header: impl IntoElement) -> Self {
        self.header = Some(header.into_any_element());
        self
    }

    pub fn content(mut self, content: impl IntoElement) -> Self {
        self.content = Some(content.into_any_element());
        self
    }

    pub fn footer(mut self, footer: impl IntoElement) -> Self {
        self.footer = Some(footer.into_any_element());
        self
    }
}

impl Styled for Card {
    fn style(&mut self) -> &mut StyleRefinement {
        &mut self.style
    }
}

impl IntoElement for Card {
    type Element = Div;

    fn into_element(self) -> Self::Element {
        let theme = use_theme();
        let user_style = self.style;

        let shadow_sm = BoxShadow {
            offset: theme.tokens.shadow_sm.offset,
            blur_radius: theme.tokens.shadow_sm.blur_radius,
            spread_radius: theme.tokens.shadow_sm.spread_radius,
            inset: false,
            color: theme.tokens.shadow_sm.color,
        };

        let mut base = div()
            .bg(theme.tokens.card)
            .border_1()
            .border_color(theme.tokens.border)
            .rounded(theme.tokens.radius_lg)
            .shadow(smallvec::smallvec![shadow_sm])
            .overflow_hidden();

        if let Some(header) = self.header {
            base = base.child(
                div()
                    .px(px(24.0))
                    .py(px(16.0))
                    .border_b_1()
                    .border_color(theme.tokens.border)
                    .child(header),
            );
        }

        if let Some(content) = self.content {
            base = base.child(div().px(px(24.0)).py(px(16.0)).child(content));
        }

        if let Some(footer) = self.footer {
            base = base.child(
                div()
                    .px(px(24.0))
                    .py(px(16.0))
                    .border_t_1()
                    .border_color(theme.tokens.border)
                    .child(footer),
            );
        }

        base.map(|this| {
            let mut div = this;
            div.style().refine(&user_style);
            div
        })
    }
}