adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add tag component

Browse source
This commit is contained in:
luoxiao 2023-10-21 17:37:53 +08:00
parent c5ecc472cd
commit 97706bbef7
9 changed files with 199 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/src/app.rs
View file

@ -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/>

4
demo/src/pages/components.rs
View file

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

2
demo/src/pages/mod.rs
View file

@ -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::*;

54
demo/src/pages/tag/mod.rs Normal file
View file

@ -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>
}
}

2
src/lib.rs
View file

@ -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::*;

74
src/tag/mod.rs Normal file
View file

@ -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>
}
}

11
src/tag/tag.css Normal file
View file

@ -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;
}

44
src/tag/theme.rs Normal file
View file

@ -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(),
}
}
}

9
src/theme/mod.rs
View file

@ -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(),
}
}
}