termtui 0.1.0

A framework for building beautiful, responsive terminal user interfaces with a DOM-style hierarchical approach
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
131
132
133
134
135
136
137
138

use termtui::prelude::*;

//--------------------------------------------------------------------------------------------------
// Types
//--------------------------------------------------------------------------------------------------

/// Messages for the color demo component
#[derive(Debug, Clone)]
enum ColorDemoMsg {
    ClickLeft,
    ClickMiddle,
    ClickRight,
    Exit,
}

/// State for the color demo component
#[derive(Debug, Clone)]
struct ColorDemoState {
    left_color: Color,
    middle_color: Color,
    right_color: Color,
}

/// Color demo component showing interactive color cycling
#[derive(Component, Clone)]
struct ColorDemo {
    id: Option<ComponentId>,
}

//--------------------------------------------------------------------------------------------------
// Trait Implementations
//--------------------------------------------------------------------------------------------------

impl Default for ColorDemoState {
    fn default() -> Self {
        Self {
            left_color: Color::Red,
            middle_color: Color::Green,
            right_color: Color::Yellow,
        }
    }
}

//--------------------------------------------------------------------------------------------------
// Methods
//--------------------------------------------------------------------------------------------------

impl ColorDemo {
    fn new() -> Self {
        Self { id: None }
    }

    fn update(&self, ctx: &Context, msg: Box<dyn Message>, _topic: Option<&str>) -> Action {
        if let Some(msg) = msg.downcast::<ColorDemoMsg>() {
            let mut state = ctx.get_state::<ColorDemoState>();

            match msg {
                ColorDemoMsg::ClickLeft => {
                    state.left_color = next_color(state.left_color);
                    return Action::Update(Box::new(state));
                }
                ColorDemoMsg::ClickMiddle => {
                    state.middle_color = next_color(state.middle_color);
                    return Action::Update(Box::new(state));
                }
                ColorDemoMsg::ClickRight => {
                    state.right_color = next_color(state.right_color);
                    return Action::Update(Box::new(state));
                }
                ColorDemoMsg::Exit => {
                    return Action::Exit;
                }
            }
        }
        Action::None
    }

    fn view(&self, ctx: &Context) -> Node {
        let state = ctx.get_state::<ColorDemoState>();

        tui! {
            div(bg: black, dir: vertical, pad: 1) [
                // Title bar
                hstack(bg: "#333333", pad: 1, w: 80, h: 3) [
                    text("Radical TUI - Color Demo", color: "#00DDFF"),
                    div(w: 10) [],
                    text("(Press 'q' or ESC to quit)", color: "#FFD700")
                ],

                // Main content area with three clickable boxes
                hstack(bg: blue, pad: 1, w: 80, h: 10) [
                    // Left box
                    div(bg: (state.left_color), w: 20, h: 8) [
                        text("Click me!", color: white),
                        @click: ctx.handler(ColorDemoMsg::ClickLeft)
                    ],

                    // Middle box
                    div(bg: (state.middle_color), w: 20, h: 8) [
                        text("Click me!", color: black),
                        @click: ctx.handler(ColorDemoMsg::ClickMiddle)
                    ],

                    // Right box
                    div(bg: (state.right_color), w: 20, h: 8) [
                        text("Click me!", color: bright_blue),
                        @click: ctx.handler(ColorDemoMsg::ClickRight)
                    ]
                ],

                // Global event handlers
                @char_global('q'): ctx.handler(ColorDemoMsg::Exit),
                @key_global(Esc): ctx.handler(ColorDemoMsg::Exit)
            ]
        }
    }
}

//--------------------------------------------------------------------------------------------------
// Functions
//--------------------------------------------------------------------------------------------------

fn main() -> std::io::Result<()> {
    let mut app = App::new()?;
    let root = ColorDemo::new();
    app.run(root)
}

fn next_color(color: Color) -> Color {
    match color {
        Color::Red => Color::Green,
        Color::Green => Color::Yellow,
        Color::Yellow => Color::Magenta,
        Color::Magenta => Color::Cyan,
        Color::Cyan => Color::Red,
        _ => Color::Red,
    }
}