feat: add tag component

demo/src/app.rs

@@ -39,6 +39,7 @@ pub fn App() -> impl IntoView {
                         <Route path="/radio" view=RadioPage/>
                         <Route path="/skeleton" view=SkeletonPage/>
                         <Route path="/switch" view=SwitchPage/>
+                        <Route path="/tag" view=TagPage/>
                     </Route>
                     <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                     <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/components.rs

@@ -100,6 +100,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "icon".into(),
                     label: "Icon".into(),
                 },
+                MenuItemOption {
+                    value: "tag".into(),
+                    label: "Tag".into(),
+                },
             ],
         },
         MenuGroupOption {

demo/src/pages/mod.rs

@@ -28,6 +28,7 @@ mod switch;
 mod tabbar;
 mod table;
 mod tabs;
+mod tag;
 mod toast;
 
 pub use alert::*;
@@ -60,4 +61,5 @@ pub use switch::*;
 pub use tabbar::*;
 pub use table::*;
 pub use tabs::*;
+pub use tag::*;
 pub use toast::*;

demo/src/pages/tag/mod.rs

@@ -0,0 +1,54 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn TagPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Tag"</h1>
+            <Demo>
+                <Space>
+                    <Tag>
+                        "default"
+                    </Tag>
+                    <Tag variant=TagVariant::Success>
+                        "success"
+                    </Tag>
+                    <Tag variant=TagVariant::Warning>
+                        "warning"
+                    </Tag>
+                    <Tag variant=TagVariant::Error>
+                        "error"
+                    </Tag>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Space>
+                        <Tag>
+                            "default"
+                        </Tag>
+                        <Tag variant=TagVariant::Success>
+                            "success"
+                        </Tag>
+                        <Tag variant=TagVariant::Warning>
+                            "warning"
+                        </Tag>
+                        <Tag variant=TagVariant::Error>
+                            "error"
+                        </Tag>
+                    </Space>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

src/lib.rs

@@ -28,6 +28,7 @@ mod space;
 mod switch;
 mod table;
 mod tabs;
+mod tag;
 mod teleport;
 mod theme;
 mod utils;
@@ -61,6 +62,7 @@ pub use space::*;
 pub use switch::*;
 pub use table::*;
 pub use tabs::*;
+pub use tag::*;
 pub use theme::Theme;
 pub use utils::{mount_style::mount_style, signal::SignalWatch};
 pub use wave::*;

src/tag/mod.rs

@@ -0,0 +1,74 @@
+mod theme;
+
+use crate::{mount_style, theme::use_theme, Theme};
+use leptos::*;
+pub use theme::TagTheme;
+
+#[derive(Clone, Default)]
+pub enum TagVariant {
+    #[default]
+    Default,
+    Success,
+    Warning,
+    Error,
+}
+
+impl TagVariant {
+    pub fn theme_font_color(&self, theme: &Theme) -> String {
+        match self {
+            TagVariant::Default => theme.tag.default_font_color.clone(),
+            TagVariant::Success => theme.common.color_success.clone(),
+            TagVariant::Warning => theme.common.color_warning.clone(),
+            TagVariant::Error => theme.common.color_error.clone(),
+        }
+    }
+    pub fn theme_background_color(&self, theme: &Theme) -> String {
+        match self {
+            TagVariant::Default => theme.tag.default_background_color.clone(),
+            TagVariant::Success => theme.tag.success_background_color.clone(),
+            TagVariant::Warning => theme.tag.warning_background_color.clone(),
+            TagVariant::Error => theme.tag.error_background_color.clone(),
+        }
+    }
+    pub fn theme_border_color(&self, theme: &Theme) -> String {
+        match self {
+            TagVariant::Default => theme.tag.default_border_color.clone(),
+            TagVariant::Success => theme.tag.success_border_color.clone(),
+            TagVariant::Warning => theme.tag.warning_border_color.clone(),
+            TagVariant::Error => theme.tag.error_border_color.clone(),
+        }
+    }
+}
+
+#[component]
+pub fn Tag(
+    #[prop(optional, into)] variant: MaybeSignal<TagVariant>,
+    children: Children,
+) -> impl IntoView {
+    mount_style("tag", include_str!("./tag.css"));
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            let variant = variant.get();
+            css_vars.push_str(&format!(
+                "--font-color: {};",
+                variant.theme_font_color(theme)
+            ));
+            css_vars.push_str(&format!(
+                "--background-color: {};",
+                variant.theme_background_color(theme)
+            ));
+            css_vars.push_str(&format!(
+                "--border-color: {};",
+                variant.theme_border_color(theme)
+            ));
+        });
+        css_vars
+    });
+    view! {
+        <div class="melt-tag" style=move || css_vars.get()>
+            <span class="melt-tag__content">{children()}</span>
+        </div>
+    }
+}

src/tag/tag.css

@@ -0,0 +1,11 @@
+.melt-tag {
+    display: inline-flex;
+    height: 28px;
+    align-items: center;
+    font-size: 14px;
+    padding: 0 10px;
+    background-color: var(--background-color);
+    color: var(--font-color);
+    border: 1px solid var(--border-color);
+    border-radius: 3px;
+}

src/tag/theme.rs

@@ -0,0 +1,44 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct TagTheme {
+    pub default_font_color: String,
+    pub default_background_color: String,
+    pub default_border_color: String,
+    pub success_background_color: String,
+    pub success_border_color: String,
+    pub warning_background_color: String,
+    pub warning_border_color: String,
+    pub error_background_color: String,
+    pub error_border_color: String,
+}
+
+impl ThemeMethod for TagTheme {
+    fn light() -> Self {
+        Self {
+            default_font_color: "#333639".into(),
+            default_background_color: "#fafafc".into(),
+            default_border_color: " #e0e0e6".into(),
+            success_background_color: "#edf7f2".into(),
+            success_border_color: "#c5e7d5".into(),
+            warning_background_color: "#fef7ed".into(),
+            warning_border_color: "#fae0b5".into(),
+            error_background_color: "#fbeef1".into(),
+            error_border_color: "#f3cbd3".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            default_font_color: "#333639".into(),
+            default_background_color: "#fafafc".into(),
+            default_border_color: " #e0e0e6".into(),
+            success_background_color: "#edf7f2".into(),
+            success_border_color: "#c5e7d5".into(),
+            warning_background_color: "#fef7ed".into(),
+            warning_border_color: "#fae0b5".into(),
+            error_background_color: "#fbeef1".into(),
+            error_border_color: "#f3cbd3".into(),
+        }
+    }
+}

src/theme/mod.rs

@@ -1,8 +1,8 @@
 mod common;
-use leptos::*;
 
 use self::common::CommonTheme;
-use crate::{AlertTheme, ButtonTheme, InputTheme, MenuTheme, SkeletionTheme, TableTheme};
+use crate::{AlertTheme, ButtonTheme, InputTheme, MenuTheme, SkeletionTheme, TableTheme, TagTheme};
+use leptos::*;
 
 pub trait ThemeMethod {
     fn light() -> Self;
@@ -18,6 +18,7 @@ pub struct Theme {
     pub table: TableTheme,
     pub alert: AlertTheme,
     pub skeletion: SkeletionTheme,
+    pub tag: TagTheme,
 }
 
 impl Theme {
@@ -30,6 +31,7 @@ impl Theme {
             table: TableTheme::light(),
             alert: AlertTheme::light(),
             skeletion: SkeletionTheme::light(),
+            tag: TagTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -41,6 +43,7 @@ impl Theme {
             table: TableTheme::dark(),
             alert: AlertTheme::dark(),
             skeletion: SkeletionTheme::dark(),
+            tag: TagTheme::dark(),
         }
     }
 }
@@ -55,6 +58,7 @@ impl ThemeMethod for Theme {
             table: TableTheme::light(),
             alert: AlertTheme::light(),
             skeletion: SkeletionTheme::light(),
+            tag: TagTheme::light(),
         }
     }
     fn dark() -> Self {
@@ -66,6 +70,7 @@ impl ThemeMethod for Theme {
             table: TableTheme::dark(),
             alert: AlertTheme::dark(),
             skeletion: SkeletionTheme::dark(),
+            tag: TagTheme::dark(),
         }
     }
 }