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

#![allow(clippy::all)]
#![allow(noop_method_call)]
use super::traits::Renderable;

#[derive(Clone, Debug, PartialEq, Copy)]
pub enum ChipVariant {
    Default,
    Primary,
    Success,
    Warning,
    Danger,
    Info,
}

#[derive(Clone, Debug, PartialEq, Copy)]
pub enum ChipSize {
    Small,
    Medium,
    Large,
}

#[derive(Debug, Clone, PartialEq)]
pub struct Chip {
    pub label: String,
    pub variant: ChipVariant,
    pub size: ChipSize,
    pub removable: bool,
    pub icon: String,
}

impl Chip {
    #[inline]
    pub fn new(label: String) -> Chip {
        Chip {
            label,
            variant: ChipVariant::Default,
            size: ChipSize::Medium,
            removable: false,
            icon: String::new(),
        }
    }
    #[inline]
    pub fn variant(mut self, variant: ChipVariant) -> Chip {
        self.variant = variant;
        self
    }
    #[inline]
    pub fn size(mut self, size: ChipSize) -> Chip {
        self.size = size;
        self
    }
    #[inline]
    pub fn removable(mut self, removable: bool) -> Chip {
        self.removable = removable;
        self
    }
    #[inline]
    pub fn icon(mut self, icon: String) -> Chip {
        self.icon = icon;
        self
    }
}

impl Renderable for Chip {
    #[inline]
    fn render(self) -> String {
        let bg_color = match self.variant {
            ChipVariant::Default => "#e2e8f0".to_string(),
            ChipVariant::Primary => "#3b82f6".to_string(),
            ChipVariant::Success => "#10b981".to_string(),
            ChipVariant::Warning => "#f59e0b".to_string(),
            ChipVariant::Danger => "#ef4444".to_string(),
            ChipVariant::Info => "#06b6d4".to_string(),
        };
        let text_color = match self.variant {
            ChipVariant::Default => "#2d3748".to_string(),
            ChipVariant::Primary => "white".to_string(),
            ChipVariant::Success => "white".to_string(),
            ChipVariant::Warning => "white".to_string(),
            ChipVariant::Danger => "white".to_string(),
            ChipVariant::Info => "white".to_string(),
        };
        let border_color = match self.variant {
            ChipVariant::Default => "#cbd5e0".to_string(),
            ChipVariant::Primary => "#2563eb".to_string(),
            ChipVariant::Success => "#059669".to_string(),
            ChipVariant::Warning => "#d97706".to_string(),
            ChipVariant::Danger => "#dc2626".to_string(),
            ChipVariant::Info => "#0891b2".to_string(),
        };
        let padding = match self.size {
            ChipSize::Small => "4px 8px".to_string(),
            ChipSize::Medium => "6px 12px".to_string(),
            ChipSize::Large => "8px 16px".to_string(),
        };
        let font_size = match self.size {
            ChipSize::Small => "12px".to_string(),
            ChipSize::Medium => "14px".to_string(),
            ChipSize::Large => "16px".to_string(),
        };
        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(";'>");
        if self.icon.len() > (0 as usize) {
            html.push_str("<span>");
            html.push_str(&self.icon);
            html.push_str("</span>")
        }
        html.push_str("<span>");
        html.push_str(&self.label);
        html.push_str("</span>");
        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
    }
}