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

//! Badge component - Status labels and tags.

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

#[derive(Copy, Clone, Debug, PartialEq, Eq)]
pub enum BadgeVariant {
    Default,
    Secondary,
    Destructive,
    Outline,
    Warning,
}

pub struct Badge {
    label: SharedString,
    variant: BadgeVariant,
    style: StyleRefinement,
}

impl Badge {
    pub fn new<T: Into<SharedString>>(label: T) -> Self {
        Self {
            label: label.into(),
            variant: BadgeVariant::Default,
            style: StyleRefinement::default(),
        }
    }

    pub fn variant(mut self, variant: BadgeVariant) -> Self {
        self.variant = variant;
        self
    }
}

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

impl IntoElement for Badge {
    type Element = Div;

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

        let (bg_color, fg_color, border_color) = match self.variant {
            BadgeVariant::Default => (
                theme.tokens.primary,
                theme.tokens.primary_foreground,
                kael::transparent_black(),
            ),
            BadgeVariant::Secondary => (
                theme.tokens.secondary,
                theme.tokens.secondary_foreground,
                kael::transparent_black(),
            ),
            BadgeVariant::Destructive => (
                theme.tokens.destructive,
                theme.tokens.destructive_foreground,
                kael::transparent_black(),
            ),
            BadgeVariant::Outline => (
                kael::transparent_black(),
                theme.tokens.foreground,
                theme.tokens.border,
            ),
            BadgeVariant::Warning => (
                kael::hsla(38.0 / 360.0, 0.92, 0.55, 1.0),
                kael::hsla(0.0, 0.0, 0.0, 1.0),
                kael::transparent_black(),
            ),
        };

        div()
            .flex()
            .items_center()
            .px(px(10.0))
            .py(px(2.0))
            .rounded_full()
            .text_size(px(12.0))
            .font_family(theme.tokens.font_family.clone())
            .font_weight(FontWeight::MEDIUM)
            .bg(bg_color)
            .text_color(fg_color)
            .when(self.variant == BadgeVariant::Outline, |el| {
                el.border_1().border_color(border_color)
            })
            .map(|this| {
                let mut div = this;
                div.style().refine(&user_style);
                div
            })
            .child(self.label)
    }
}