diff --git a/demo/src/app.rs b/demo/src/app.rs index 6d37601..d9e138d 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -83,6 +83,7 @@ fn TheRouter() -> impl IntoView { + diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index e7bc4b8..5936ea0 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -205,6 +205,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "modal".into(), label: "Modal".into(), }, + MenuItemOption { + value: "progress".into(), + label: "Progress".into(), + }, MenuItemOption { value: "skeleton".into(), label: "Skeleton".into(), diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs index dd26b40..2ccca25 100644 --- a/demo/src/pages/mod.rs +++ b/demo/src/pages/mod.rs @@ -23,6 +23,7 @@ mod message; mod mobile; mod modal; mod nav_bar; +mod progress; mod radio; mod select; mod skeleton; @@ -61,6 +62,7 @@ pub use message::*; pub use mobile::*; pub use modal::*; pub use nav_bar::*; +pub use progress::*; pub use radio::*; pub use select::*; pub use skeleton::*; diff --git a/demo/src/pages/nav_bar/mod.rs b/demo/src/pages/nav_bar/mod.rs index 61253c5..01aaad1 100644 --- a/demo/src/pages/nav_bar/mod.rs +++ b/demo/src/pages/nav_bar/mod.rs @@ -3,8 +3,9 @@ use crate::{ pages::MobilePage, }; use leptos::*; -use thaw::mobile::NavBar; use prisms::highlight_str; +use thaw::mobile::NavBar; +use thaw::Table; #[component] pub fn NavBarPage() -> impl IntoView { @@ -43,6 +44,55 @@ pub fn NavBarPage() -> impl IntoView { "" +

"NavBar Props"

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"title""MaybeSignal"r#""""#"NavBar title."
"left_arrow""MaybeSignal""Whether to show left arrow."
"left_text""MaybeSignal"r#""""#"NavBar left text."
"on_click_left""MaybeSignal"r#""""#"NavBar left click."
"right_text""MaybeSignal"r#""""#"NavBar right text."
"on_click_right""MaybeSignal"r#""""#"NavBar right click."
diff --git a/demo/src/pages/progress/mod.rs b/demo/src/pages/progress/mod.rs new file mode 100644 index 0000000..3348b87 --- /dev/null +++ b/demo/src/pages/progress/mod.rs @@ -0,0 +1,55 @@ +use crate::components::{Demo, DemoCode}; +use leptos::*; +use prisms::highlight_str; +use thaw::*; + +#[component] +pub fn ProgressPage() -> impl IntoView { + let percentage = create_rw_signal(0.0f32); + view! { +
+

"Progress"

+ + + + + + + + + + + + + + + + + + } + "#, + "rust" + ) + > + + "" + + +
+ } +} diff --git a/src/progress/mod.rs b/src/progress/mod.rs index 45c23fa..9f80534 100644 --- a/src/progress/mod.rs +++ b/src/progress/mod.rs @@ -1,32 +1,87 @@ -use crate::utils::{mount_style, StoredMaybeSignal}; +use crate::{use_theme, utils::mount_style, Theme}; use leptos::*; +#[derive(Default, Clone, PartialEq)] +pub enum ProgressIndicatorPlacement { + #[default] + Outside, + Inside, +} + +impl Copy for ProgressIndicatorPlacement {} + +impl ProgressIndicatorPlacement { + pub fn as_str(&self) -> &'static str { + match self { + ProgressIndicatorPlacement::Outside => "outside", + ProgressIndicatorPlacement::Inside => "inside", + } + } +} + #[component] pub fn Progress( - #[prop(optional, into)] left_tip: MaybeSignal, - #[prop(optional, into)] right_tip: MaybeSignal, - percentage: ReadSignal, + #[prop(into, optional)] percentage: MaybeSignal, + #[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal, + #[prop(into, optional)] indicator_placement: MaybeSignal, ) -> impl IntoView { mount_style("progress", include_str!("./progress.css")); - let style = move || format!("width: {}%", percentage.get()); - let left_tip: StoredMaybeSignal<_> = left_tip.into(); - let right_tip: StoredMaybeSignal<_> = right_tip.into(); + let theme = use_theme(Theme::light); + let style = move || { + let mut style = String::new(); + let percentage = percentage.get(); + let percentage = if percentage < 0.0 { + 0.0 + } else if percentage > 100.0 { + 100.0 + } else { + percentage + }; + style.push_str(&format!("width: {}%;", percentage)); + theme.with(|theme| { + style.push_str(&format!( + "--thaw-background-color: {};", + theme.common.color_primary + )); + }); + style + }; + + let class = move || { + let mut class = String::from("thaw-progress__progress"); + + class.push_str(&format!( + " thaw-progress__progress--indicator-{}", + indicator_placement.get().as_str() + )); + + class + }; view! {
- - {move || left_tip.get()} - - - - - - - - {move || right_tip.get()} - +
+
+ +
+ { + move || { + format!("{}%", percentage.get()) + } + } +
+ +
+
+ +
+ { + move || { + format!("{}%", percentage.get()) + } + } +
+
} } diff --git a/src/progress/progress.css b/src/progress/progress.css index c928599..7cd637b 100644 --- a/src/progress/progress.css +++ b/src/progress/progress.css @@ -3,45 +3,35 @@ display: flex; justify-content: center; align-items: center; - height: 24px; - padding: 0 8px; -} - -.thaw-progress__tip-right, -.thaw-progress__tip-left { - display: inline-block; - margin: 0 10px; - width: 48px; - text-align: center; - font-size: 12px; - color: #777; } .thaw-progress__progress { flex: 1; - height: 3px; + position: relative; + height: 8px; background: #f2f2f2; - border-radius: 2px; - /* cursor: pointer; */ + border-radius: 4px; +} + +.thaw-progress__progress--indicator-inside { + height: 16px; + font-size: 12px; + border-radius: 8px; } .thaw-progress__progress-inner { - position: relative; - top: -14px; - display: inline-block; - background: red; + position: absolute; + background: var(--thaw-background-color); height: 100%; + border-radius: inherit; transition: width 0.1s; } -.thaw-progress__progress-circle { - display: inline-block; - position: absolute; - right: -3px; - top: -4px; - width: 10px; - height: 10px; - border-radius: 50%; - background: #fff; - box-shadow: 0 0 3px 2px #4443; +.thaw-progress__indicator--outside { + padding: 0 8px; +} + +.thaw-progress__indicator--inside { + text-align: right; + margin: 0 12px; }