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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

// Chip Component - Tag/pill for labels, filters, and selections


use super::traits::Renderable
pub enum ChipVariant {
    Default,
    Primary,
    Success,
    Warning,
    Danger,
    Info,
}

pub enum ChipSize {
    Small,
    Medium,
    Large,
}

pub struct Chip {
    label: string,
    variant: ChipVariant,
    size: ChipSize,
    removable: bool,
    icon: string,
}

impl Chip {
    pub fn new(label: string) -> Chip {
        Chip {
            label: label,
            variant: ChipVariant::Default,
            size: ChipSize::Medium,
            removable: false,
            icon: String::new(),
        }
    }

    pub fn variant(self, variant: ChipVariant) -> Chip {
        self.variant = variant;
        self
    }

    pub fn size(self, size: ChipSize) -> Chip {
        self.size = size;
        self
    }

    pub fn removable(self, removable: bool) -> Chip {
        self.removable = removable;
        self
    }

    pub fn icon(self, icon: string) -> Chip {
        self.icon = icon;
        self
    }


}

impl Renderable for Chip {
pub fn render(self) -> string {
        let bg_color = match self.variant {
            ChipVariant::Default => "#e2e8f0",
            ChipVariant::Primary => "#3b82f6",
            ChipVariant::Success => "#10b981",
            ChipVariant::Warning => "#f59e0b",
            ChipVariant::Danger => "#ef4444",
            ChipVariant::Info => "#06b6d4",
        };

        let text_color = match self.variant {
            ChipVariant::Default => "#2d3748",
            ChipVariant::Primary => "white",
            ChipVariant::Success => "white",
            ChipVariant::Warning => "white",
            ChipVariant::Danger => "white",
            ChipVariant::Info => "white",
        };

        let border_color = match self.variant {
            ChipVariant::Default => "#cbd5e0",
            ChipVariant::Primary => "#2563eb",
            ChipVariant::Success => "#059669",
            ChipVariant::Warning => "#d97706",
            ChipVariant::Danger => "#dc2626",
            ChipVariant::Info => "#0891b2",
        };

        let padding = match self.size {
            ChipSize::Small => "4px 8px",
            ChipSize::Medium => "6px 12px",
            ChipSize::Large => "8px 16px",
        };

        let font_size = match self.size {
            ChipSize::Small => "12px",
            ChipSize::Medium => "14px",
            ChipSize::Large => "16px",
        };

        let mut html = String::new();
        html.push_str("<span style='display: inline-flex; align-items: center; gap: 6px; padding: ");
        html.push_str(padding);
        html.push_str("; font-size: ");
        html.push_str(font_size);
        html.push_str("; font-weight: 500; border-radius: 16px; background: ");
        html.push_str(bg_color);
        html.push_str("; color: ");
        html.push_str(text_color);
        html.push_str("; border: 1px solid ");
        html.push_str(border_color);
        html.push_str(";'>");

        // Icon
        if self.icon.len() > 0 {
            html.push_str("<span>");
            html.push_str(&self.icon);
            html.push_str("</span>");
        }

        // Label
        html.push_str("<span>");
        html.push_str(&self.label);
        html.push_str("</span>");

        // Remove button
        if self.removable {
            html.push_str("<button onclick='this.parentElement.remove()' style='background: none; border: none; cursor: pointer; padding: 0; margin: 0; display: flex; align-items: center; color: ");
            html.push_str(text_color);
            html.push_str("; opacity: 0.7; font-size: 18px; line-height: 1;' onmouseover='this.style.opacity=\"1\"' onmouseout='this.style.opacity=\"0.7\"'>&times;</button>");
        }

        html.push_str("</span>");
        html
    }
}