windjammer-ui 0.3.6

Cross-platform UI framework for Windjammer (Web, Desktop, Mobile)
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

// Flex layout component - Pure Windjammer implementation
// NO `mut` keyword needed - compiler infers everything!
// Tests Vec<String> with direction enum!


use super::traits::Renderable
pub enum FlexDirection {
    Row,
    Column,
}

pub struct Flex {
    children: Vec<string>,
    direction: FlexDirection,
    gap: string,
    padding: string,
    background_color: string,
}

impl Flex {
    // Constructor - returns new Flex
    pub fn new() -> Flex {
        Flex {
            children: Vec::new(),
            direction: FlexDirection::Row,
            gap: "8px".to_string(),
            padding: "".to_string(),
            background_color: "".to_string(),
        }
    }
    
    // Set flex direction
    pub fn direction(self, direction: FlexDirection) -> Flex {
        self.direction = direction
        self
    }
    
    // Add a single child (tests Vec::push)
    pub fn child(self, child: string) -> Flex {
        self.children.push(child)
        self
    }
    
    // Set multiple children (tests Vec assignment)
    pub fn children(self, children: Vec<string>) -> Flex {
        self.children = children
        self
    }
    
    // Set gap between children (string version)
    pub fn gap(self, gap: string) -> Flex {
        self.gap = gap
        self
    }
    
    // Set gap between children (integer version for convenience)
    pub fn gap_px(self, gap: i32) -> Flex {
        self.gap = format!("{}px", gap)
        self
    }
    
    // Set padding
    pub fn padding(self, padding: string) -> Flex {
        self.padding = padding
        self
    }
    
    // Set background color
    pub fn background_color(self, color: string) -> Flex {
        self.background_color = color
        self
    }
    
    // TODO: Once external type bindings work, this will return VNode
    // For now, return a string representation for testing

}

// Test the Flex component
impl Renderable for Flex {
pub fn render(self) -> string {
        let direction_str = match self.direction {
            FlexDirection::Row => "row",
            FlexDirection::Column => "column",
        }
        
        let mut style = "display: flex; flex-direction: ".to_string() + direction_str + "; gap: " + self.gap + ";"
        
        if self.padding != "" {
            style = style + " padding: " + self.padding + ";"
        }
        
        if self.background_color != "" {
            style = style + " background-color: " + self.background_color + ";"
        }
        
        // Join children with newlines
        let children_html = self.children.join("\n  ")
        
        format!("<div class='wj-flex' style='{}'>\n  {}\n</div>", style, children_html)
    }
}

fn main() {
    let flex_row = Flex::new()
        .direction(FlexDirection::Row)
        .gap("16px".to_string())
        .child("<button>First</button>".to_string())
        .child("<button>Second</button>".to_string())
        .child("<button>Third</button>".to_string())
    
    let flex_col = Flex::new()
        .direction(FlexDirection::Column)
        .gap("12px".to_string())
        .padding("20px".to_string())
        .background_color("#f5f5f5".to_string())
        .children(vec!["<h2>Title</h2>".to_string(), "<p>Paragraph 1</p>".to_string(), "<p>Paragraph 2</p>".to_string()])
    
    println!("Flex Row:\n{}", flex_row.render())
    println!("\nFlex Column:\n{}", flex_col.render())
}