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

Merge pull request #16 from thaw-ui/docs/demo

Browse source 
Docs/demo
This commit is contained in:
luoxiaozero 2023-11-14 21:13:50 +08:00 • committed by GitHub
commit e3c4011ed7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 600 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
demo/src/pages/alert/mod.rs
View file

@ -35,6 +35,37 @@ pub fn AlertPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Alert 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>"title"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Title of the alert."</td>
</tr>
<tr>
<td>"variant"</td>
<td>"AlertVariant"</td>
<td></td>
<td>"Alert variant."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"The content of the alert."</td>
</tr>
</tbody>
</Table>
</div>
}
}

67
demo/src/pages/auto_complete/mod.rs
View file

@ -22,7 +22,7 @@ pub fn AutoCompletePage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Auto Complete"</h1>
<h1>"AutoComplete"</h1>
<Demo>
<AutoComplete value options placeholder="Email"/>
<DemoCode
@ -54,6 +54,71 @@ pub fn AutoCompletePage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"AutoComplete 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>"RwSignal<String>"</td>
<td>r#""""#</td>
<td>"Input of autocomplete."</td>
</tr>
<tr>
<td>"placeholder"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Autocomplete's placeholder."</td>
</tr>
<tr>
<td>"options"</td>
<td>"MaybeSignal<Vec<AutoCompleteOption>>"</td>
<td>"Vec::new()"</td>
<td>"Options to autocomplete from."</td>
</tr>
<tr>
<td>"clear_after_select"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether to clear after selection."</td>
</tr>
<tr>
<td>"on_select"</td>
<td>"Option<Callback<String>>"</td>
<td>"None"</td>
<td>"On select callback function."</td>
</tr>
</tbody>
</Table>
<h3>"AutoCompleteOption Properties"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"String"</td>
<td>"Option ID."</td>
</tr>
<tr>
<td>"label"</td>
<td>"String"</td>
<td>"Option label value."</td>
</tr>
</tbody>
</Table>
</div>
}
}

37
demo/src/pages/avatar/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 AvatarPage() -> impl IntoView {
@ -11,7 +11,7 @@ pub fn AvatarPage() -> impl IntoView {
<Demo>
<Space>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" circle=true/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
</Space>
<DemoCode
@ -20,7 +20,7 @@ pub fn AvatarPage() -> impl IntoView {
r#"
<Space>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" circle=true/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
</Space>
"#,
@ -31,6 +31,37 @@ pub fn AvatarPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Avatar 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>"src"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Avatar's image source."</td>
</tr>
<tr>
<td>"round"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether to display a rounded avatar."</td>
</tr>
<tr>
<td>"size"</td>
<td>"MaybeSignal<u16>"</td>
<td>"30"</td>
<td>"Avatar's size."</td>
</tr>
</tbody>
</Table>
</div>
}
}

61
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,49 @@ 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::Error"</td>
<td>"Badge variant."</td>
</tr>
<tr>
<td>"dot"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Show badge as dot."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Badge's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

44
demo/src/pages/breadcrumb/mod.rs
View file

@ -67,6 +67,50 @@ pub fn BreadcrumbPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Breadcrumb 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>"separator"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""/""#</td>
<td>"Breadcrumb separator."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Breadcrumb's content."</td>
</tr>
</tbody>
</Table>
<h3>"BreadcrumbItem 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>"children"</td>
<td>"Children"</td>
<td></td>
<td>"BreadcrumbItem's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

69
demo/src/pages/button/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 ButtonPage() -> impl IntoView {
@ -121,6 +121,73 @@ pub fn ButtonPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Button 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>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Button's style."</td>
</tr>
<tr>
<td>"variant"</td>
<td>"MaybeSignal<ButtonVariant>"</td>
<td>"ButtonVariant::Primary"</td>
<td>"Button's variant."</td>
</tr>
<tr>
<td>"color"</td>
<td>"MaybeSignal<ButtonColor>"</td>
<td>"ButtonColor::Primary"</td>
<td>"Button's color."</td>
</tr>
<tr>
<td>"round"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the button shows rounded corners."</td>
</tr>
<tr>
<td>"icon"</td>
<td>"Option<Icon>"</td>
<td>"None"</td>
<td>"The icon of the button."</td>
</tr>
<tr>
<td>"loading"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the button shows the loading status."</td>
</tr>
<tr>
<td>"disabled"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the button is disabled."</td>
</tr>
<tr>
<td>"on_click"</td>
<td>"Option<Callback<ev::MouseEvent>>"</td>
<td>"None"</td>
<td>"Listen for button click events."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Button's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

54
demo/src/pages/card/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 CardPage() -> impl IntoView {
@ -73,6 +73,58 @@ pub fn CardPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Card 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>"title"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Card title."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Card's content."</td>
</tr>
</tbody>
</Table>
<h3>"Card Slots"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"CardHeader"</td>
<td>"None"</td>
<td>"Header content."</td>
</tr>
<tr>
<td>"CardHeaderExtra"</td>
<td>"None"</td>
<td>"Header extra content."</td>
</tr>
<tr>
<td>"CardFooter"</td>
<td>"None"</td>
<td>"Footer content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

77
demo/src/pages/checkbox/mod.rs
View file

@ -2,8 +2,8 @@ use std::collections::HashSet;
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn CheckboxPage() -> impl IntoView {
@ -62,6 +62,81 @@ pub fn CheckboxPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Checkbox 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>"RwSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the checkbox is being checked."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Checkbox's content."</td>
</tr>
</tbody>
</Table>
<h3>"CheckboxGroup 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>"RwSignal<HashSet<String>>,"</td>
<td>"false"</td>
<td>"Sets the value of the checkbox group."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"CheckboxGroup's content."</td>
</tr>
</tbody>
</Table>
<h3>"CheckboxItem 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>"key"</td>
<td>"String"</td>
<td></td>
<td>"The key of the checkbox to be used in a checkbox group."</td>
</tr>
<tr>
<td>"label"</td>
<td>"Option<String>"</td>
<td>"None"</td>
<td>"Checkbox's label."</td>
</tr>
</tbody>
</Table>
</div>
}
}

21
demo/src/pages/color_picker/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 ColorPickerPage() -> impl IntoView {
@ -29,6 +29,25 @@ pub fn ColorPickerPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"ColorPicker 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>"RwSignal<RGBA>"</td>
<td>"RwSignal<RGBA>"</td>
<td>"Value of the picker."</td>
</tr>
</tbody>
</Table>
</div>
}
}

4
demo/src/pages/divider/mod.rs
View file

@ -1,13 +1,13 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn DividerPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Checkbox"</h1>
<h1>"Divider"</h1>
<Demo>
"top"
<Divider />

31
demo/src/pages/grid/mod.rs
View file

@ -119,6 +119,37 @@ pub fn GridPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Grid 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>"cols"</td>
<td>"MaybeSignal<u16>"</td>
<td>"1"</td>
<td>"Number of grids displayed."</td>
</tr>
<tr>
<td>"x_gap"</td>
<td>"MaybeSignal<u16>"</td>
<td>"0"</td>
<td>"Horizontal gap."</td>
</tr>
<tr>
<td>"y_gap"</td>
<td>"MaybeSignal<u16>"</td>
<td>"0"</td>
<td>"Vertical gap."</td>
</tr>
</tbody>
</Table>
</div>
}
}

45
demo/src/pages/icon/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 IconPage() -> impl IntoView {
@ -29,6 +29,49 @@ pub fn IconPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Icon 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>"icon"</td>
<td>"MaybeSignal<Icon>"</td>
<td></td>
<td>"The icon to show."</td>
</tr>
<tr>
<td>"width"</td>
<td>"Option<MaybeSignal<String>>"</td>
<td>r#""1em""#</td>
<td>"The width of the icon."</td>
</tr>
<tr>
<td>"height"</td>
<td>"Option<MaybeSignal<String>>"</td>
<td>r#""1em""#</td>
<td>"The height of the icon."</td>
</tr>
<tr>
<td>"class"</td>
<td>"Option<MaybeSignal<String>>"</td>
<td>"None"</td>
<td>"HTML class attribute."</td>
</tr>
<tr>
<td>"style"</td>
<td>"Option<MaybeSignal<String>>"</td>
<td>"None"</td>
<td>"HTML style attribute."</td>
</tr>
</tbody>
</Table>
</div>
}
}

51
demo/src/pages/image/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 ImagePage() -> impl IntoView {
@ -25,6 +25,55 @@ pub fn ImagePage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Image 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>"src"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Image source."</td>
</tr>
<tr>
<td>"alt"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Image alt information."</td>
</tr>
<tr>
<td>"width"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Image width."</td>
</tr>
<tr>
<td>"height"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Image height."</td>
</tr>
<tr>
<td>"border_radius"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Image border radius."</td>
</tr>
<tr>
<td>"object_fit"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Object-fit type of the image in the container."</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(),

6
src/avatar/mod.rs
View file

@ -7,8 +7,8 @@ pub use theme::AvatarTheme;
#[component]
pub fn Avatar(
#[prop(optional, into)] src: MaybeSignal<String>,
#[prop(optional, into)] circle: MaybeSignal<bool>,
#[prop(default = MaybeSignal::Static(30), into)] size: MaybeSignal<i32>,
#[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(default = MaybeSignal::Static(30), into)] size: MaybeSignal<u16>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
@ -16,7 +16,7 @@ pub fn Avatar(
css_vars.push_str(&format!("--thaw-size: {}px;", size.get()));
css_vars.push_str(&format!(
"--thaw-border-radius: {};",
if circle.get() { "50%" } else { "3px" }
if round.get() { "50%" } else { "3px" }
));
theme.with(|theme| {
css_vars.push_str(&format!(

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 {

8
src/button/mod.rs
View file

@ -28,7 +28,7 @@ pub enum ButtonColor {
}
impl ButtonColor {
pub fn theme_color(&self, theme: &Theme) -> String {
fn theme_color(&self, theme: &Theme) -> String {
match self {
ButtonColor::Primary => theme.common.color_primary.clone(),
ButtonColor::Success => theme.common.color_success.clone(),
@ -36,7 +36,7 @@ impl ButtonColor {
ButtonColor::Error => theme.common.color_error.clone(),
}
}
pub fn theme_color_hover(&self, theme: &Theme) -> String {
fn theme_color_hover(&self, theme: &Theme) -> String {
match self {
ButtonColor::Primary => theme.common.color_primary_hover.clone(),
ButtonColor::Success => theme.common.color_success_hover.clone(),
@ -45,7 +45,7 @@ impl ButtonColor {
}
}
pub fn theme_color_active(&self, theme: &Theme) -> String {
fn theme_color_active(&self, theme: &Theme) -> String {
match self {
ButtonColor::Primary => theme.common.color_primary_active.clone(),
ButtonColor::Success => theme.common.color_success_active.clone(),
@ -65,7 +65,7 @@ pub fn Button(
#[prop(optional, into)] loading: MaybeSignal<bool>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] on_click: Option<Callback<ev::MouseEvent>>,
#[prop(optional)] children: Option<ChildrenFn>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {

4
src/grid/grid_item.rs
View file

@ -4,7 +4,7 @@ use leptos::*;
#[component]
pub fn GridItem(
#[prop(default = MaybeSignal::Static(1u16), into)] column: MaybeSignal<u16>,
#[prop(optional, into)] offset: MaybeSignal<i32>,
#[prop(optional, into)] offset: MaybeSignal<u16>,
children: Children,
) -> impl IntoView {
let grid = use_grid();
@ -12,7 +12,7 @@ pub fn GridItem(
let style = create_memo(move |_| {
let mut style = String::new();
let offset = offset.get();
let column = i32::from(column.get());
let column = column.get();
let x_gap = grid.x_gap.get();
if offset > 0 {

8
src/grid/mod.rs
View file

@ -6,8 +6,8 @@ use leptos::*;
#[component]
pub fn Grid(
#[prop(default = MaybeSignal::Static(1u16), into)] cols: MaybeSignal<u16>,
#[prop(optional, into)] x_gap: MaybeSignal<i32>,
#[prop(optional, into)] y_gap: MaybeSignal<i32>,
#[prop(optional, into)] x_gap: MaybeSignal<u16>,
#[prop(optional, into)] y_gap: MaybeSignal<u16>,
children: Children,
) -> impl IntoView {
let grid_injection_key = GridInjection::new(x_gap);
@ -32,11 +32,11 @@ pub fn Grid(
#[derive(Clone)]
pub(crate) struct GridInjection {
x_gap: MaybeSignal<i32>,
x_gap: MaybeSignal<u16>,
}
impl GridInjection {
pub fn new(x_gap: MaybeSignal<i32>) -> Self {
pub fn new(x_gap: MaybeSignal<u16>) -> Self {
Self { x_gap }
}
}

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