boltz-ui 0.1.2

High-level reusable GPUI UI components (Label, Button, Input, etc.).
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

use gpui::AnyElement;

use crate::prelude::*;

/// Layout mode of a [`DescriptionList`] row.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum DescriptionListMode {
    /// Label above value (mobile-style).
    #[default]
    Stacked,
    /// Label left, value right.
    Horizontal,
}

/// A key-value list for displaying structured details (Tailwind "Description List").
#[derive(IntoElement, RegisterComponent)]
pub struct DescriptionList {
    mode: DescriptionListMode,
    items: Vec<(SharedString, AnyElement)>,
}

impl DescriptionList {
    pub fn new() -> Self {
        Self {
            mode: DescriptionListMode::default(),
            items: Vec::new(),
        }
    }

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

    pub fn item(mut self, label: impl Into<SharedString>, value: impl IntoElement) -> Self {
        self.items.push((label.into(), value.into_any_element()));
        self
    }
}

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

impl RenderOnce for DescriptionList {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let mode = self.mode;

        v_flex()
            .w_full()
            .children(
                self.items
                    .into_iter()
                    .enumerate()
                    .map(move |(index, (label, value))| {
                        let label = Label::new(label).size(LabelSize::Small).color(Color::Muted);

                        let row = match mode {
                            DescriptionListMode::Stacked => v_flex()
                                .gap_1()
                                .child(label)
                                .child(value)
                                .into_any_element(),
                            DescriptionListMode::Horizontal => h_flex()
                                .justify_between()
                                .gap_4()
                                .child(label)
                                .child(div().child(value))
                                .into_any_element(),
                        };

                        div()
                            .w_full()
                            .py_4()
                            .when(index > 0, |this| {
                                this.border_t_1().border_color(semantic::border_muted(cx))
                            })
                            .child(row)
                    }),
            )
    }
}

impl Component for DescriptionList {
    fn scope() -> ComponentScope {
        ComponentScope::DataDisplay
    }

    fn description() -> Option<&'static str> {
        Some("A key-value list for displaying structured details, in stacked or horizontal mode.")
    }

    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
        Some(
            v_flex()
                .gap_6()
                .children(vec![
                    example_group_with_title(
                        "Stacked",
                        vec![single_example(
                            "Stacked mode",
                            DescriptionList::new()
                                .item("Full name", Label::new("Margot Foster"))
                                .item("Application for", Label::new("Backend Developer"))
                                .item("Email address", Label::new("margotfoster@example.com"))
                                .into_any_element(),
                        )],
                    ),
                    example_group_with_title(
                        "Horizontal",
                        vec![single_example(
                            "Horizontal mode",
                            DescriptionList::new()
                                .mode(DescriptionListMode::Horizontal)
                                .item("Full name", Label::new("Margot Foster"))
                                .item("Application for", Label::new("Backend Developer"))
                                .item("Email address", Label::new("margotfoster@example.com"))
                                .into_any_element(),
                        )],
                    ),
                ])
                .into_any_element(),
        )
    }
}