adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: modified badge max and variant

Browse source
This commit is contained in:
luoxiao 2023-11-14 14:45:54 +08:00
parent 2b253fb1e1
commit 365a6686cd
4 changed files with 62 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
demo/src/pages/badge/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn BadgePage() -> impl IntoView {
@ -11,16 +11,16 @@ pub fn BadgePage() -> impl IntoView {
<h1>"Badge"</h1>
<Demo>
<Space>
<Badge value=value max_value=10>
<Badge value=value max=10>
<Avatar/>
</Badge>
<Badge color=BadgeColor::Success value=value max_value=10>
<Badge variant=BadgeVariant::Success value=value max=10>
<Avatar/>
</Badge>
<Badge color=BadgeColor::Warning value=value max_value=10>
<Badge variant=BadgeVariant::Warning value=value max=10>
<Avatar/>
</Badge>
<Badge color=BadgeColor::Warning dot=true>
<Badge variant=BadgeVariant::Warning dot=true>
<Avatar/>
</Badge>
<Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button>
@ -42,16 +42,16 @@ pub fn BadgePage() -> impl IntoView {
let value = create_rw_signal(0);
view! {
<Space>
<Badge value=value max_value=10>
<Badge value=value max=10>
<Avatar />
</Badge>
<Badge color=BadgeColor::Success value=value max_value=10>
<Badge variant=BadgeVariant::Success value=value max=10>
<Avatar />
</Badge>
<Badge color=BadgeColor::Warning value=value max_value=10>
<Badge variant=BadgeVariant::Warning value=value max=10>
<Avatar />
</Badge>
<Badge color=BadgeColor::Warning dot=true>
<Badge variant=BadgeVariant::Warning dot=true>
<Avatar />
</Badge>
<Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button>
@ -68,6 +68,43 @@ pub fn BadgePage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Badge Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"MaybeSignal<u32>"</td>
<td>"0"</td>
<td>"Badge's value."</td>
</tr>
<tr>
<td>"max"</td>
<td>"MaybeSignal<u32>"</td>
<td>"u32::MAX"</td>
<td>"The maximum number of the badge when its value overflows."</td>
</tr>
<tr>
<td>"variant"</td>
<td>"MaybeSignal<BadgeVariant>"</td>
<td>"BadgeVariant::"</td>
<td>"Badge variant."</td>
</tr>
<tr>
<td>"dot"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Show badge as dot."</td>
</tr>
</tbody>
</Table>
</div>
}
}

6
src/alert/mod.rs
View file

@ -13,21 +13,21 @@ pub enum AlertVariant {
}
impl AlertVariant {
pub fn theme_icon_color(&self, theme: &Theme) -> String {
fn theme_icon_color(&self, theme: &Theme) -> String {
match self {
AlertVariant::Success => theme.common.color_success.clone(),
AlertVariant::Warning => theme.common.color_warning.clone(),
AlertVariant::Error => theme.common.color_error.clone(),
}
}
pub fn theme_background_color(&self, theme: &Theme) -> String {
fn theme_background_color(&self, theme: &Theme) -> String {
match self {
AlertVariant::Success => theme.alert.success_background_color.clone(),
AlertVariant::Warning => theme.alert.warning_background_color.clone(),
AlertVariant::Error => theme.alert.error_background_color.clone(),
}
}
pub fn theme_border_color(&self, theme: &Theme) -> String {
fn theme_border_color(&self, theme: &Theme) -> String {
match self {
AlertVariant::Success => theme.alert.success_border_color.clone(),
AlertVariant::Warning => theme.alert.warning_border_color.clone(),

20
src/badge/mod.rs
View file

@ -2,19 +2,19 @@ use crate::{theme::use_theme, utils::mount_style, Theme};
use leptos::*;
#[derive(Default, Clone)]
pub enum BadgeColor {
pub enum BadgeVariant {
Success,
Warning,
#[default]
Error,
}
impl BadgeColor {
pub fn theme_color(&self, theme: &Theme) -> String {
impl BadgeVariant {
fn theme_color(&self, theme: &Theme) -> String {
match self {
BadgeColor::Success => theme.common.color_success.clone(),
BadgeColor::Warning => theme.common.color_warning.clone(),
BadgeColor::Error => theme.common.color_error.clone(),
BadgeVariant::Success => theme.common.color_success.clone(),
BadgeVariant::Warning => theme.common.color_warning.clone(),
BadgeVariant::Error => theme.common.color_error.clone(),
}
}
}
@ -22,8 +22,8 @@ impl BadgeColor {
#[component]
pub fn Badge(
#[prop(optional, into)] value: MaybeSignal<u32>,
#[prop(default = MaybeSignal::Static(u32::MAX), into)] max_value: MaybeSignal<u32>,
#[prop(optional, into)] color: MaybeSignal<BadgeColor>,
#[prop(default = MaybeSignal::Static(u32::MAX), into)] max: MaybeSignal<u32>,
#[prop(optional, into)] variant: MaybeSignal<BadgeVariant>,
#[prop(optional, into)] dot: MaybeSignal<bool>,
children: Children,
) -> impl IntoView {
@ -35,14 +35,14 @@ pub fn Badge(
theme.with(|theme| {
css_vars.push_str(&format!(
"--thaw-background-color: {};",
color.get().theme_color(theme)
variant.get().theme_color(theme)
));
});
css_vars
});
let value = create_memo(move |_| {
let value = value.get();
let max_value = max_value.get();
let max_value = max.get();
if value == 0 {
String::new()
} else if max_value < value {

6
src/tag/mod.rs
View file

@ -14,7 +14,7 @@ pub enum TagVariant {
}
impl TagVariant {
pub fn theme_font_color(&self, theme: &Theme) -> String {
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(),
@ -22,7 +22,7 @@ impl TagVariant {
TagVariant::Error => theme.common.color_error.clone(),
}
}
pub fn theme_background_color(&self, theme: &Theme) -> String {
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(),
@ -30,7 +30,7 @@ impl TagVariant {
TagVariant::Error => theme.tag.error_background_color.clone(),
}
}
pub fn theme_border_color(&self, theme: &Theme) -> String {
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(),