feat: improvement progress

demo/src/app.rs

@@ -83,6 +83,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path="/loading-bar" view=LoadingBarPage/>
                     <Route path="/breadcrumb" view=BreadcrumbPage/>
                     <Route path="/layout" view=LayoutPage/>
+                    <Route path="/progress" view=ProgressPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/components.rs

@@ -205,6 +205,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "modal".into(),
                     label: "Modal".into(),
                 },
+                MenuItemOption {
+                    value: "progress".into(),
+                    label: "Progress".into(),
+                },
                 MenuItemOption {
                     value: "skeleton".into(),
                     label: "Skeleton".into(),

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

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 {
                         ""
                     </DemoCode>
                 </Demo>
+                <h3>"NavBar 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>"NavBar title."</td>
+                        </tr>
+                        <tr>
+                            <td>"left_arrow"</td>
+                            <td>"MaybeSignal<bool>"</td>
+                            <td></td>
+                            <td>"Whether to show left arrow."</td>
+                        </tr>
+                        <tr>
+                            <td>"left_text"</td>
+                            <td>"MaybeSignal<String>"</td>
+                            <td>r#""""#</td>
+                            <td>"NavBar left text."</td>
+                        </tr>
+                        <tr>
+                            <td>"on_click_left"</td>
+                            <td>"MaybeSignal<String>"</td>
+                            <td>r#""""#</td>
+                            <td>"NavBar left click."</td>
+                        </tr>
+                        <tr>
+                            <td>"right_text"</td>
+                            <td>"MaybeSignal<String>"</td>
+                            <td>r#""""#</td>
+                            <td>"NavBar right text."</td>
+                        </tr>
+                        <tr>
+                            <td>"on_click_right"</td>
+                            <td>"MaybeSignal<String>"</td>
+                            <td>r#""""#</td>
+                            <td>"NavBar right click."</td>
+                        </tr>
+                    </tbody>
+                </Table>
             </div>
             <div>
                 <MobilePage path="/thaw?path=/mobile/nav-bar"/>

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! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Progress"</h1>
+            <Demo>
+                <Space vertical=true>
+                    <Progress percentage />
+                    <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
+                    <Space>
+                        <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
+                            "-10%"
+                        </Button>
+                        <Button on_click=move |_| percentage.update(|v| *v += 10.0)>
+                            "+10%"
+                        </Button>
+                    </Space>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    let percentage = create_rw_signal(0.0f32);
+
+                    view! {
+                        <Space vertical=true>
+                            <Progress percentage />
+                            <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
+                            <Space>
+                                <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
+                                    "-10%"
+                                </Button>
+                                <Button on_click=move |_| percentage.update(|v| *v += 10.0)>
+                                    "+10%"
+                                </Button>
+                            </Space>
+                        </Space>
+                    }
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

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<String>,
+    #[prop(into, optional)] percentage: MaybeSignal<f32>,
-    #[prop(optional, into)] right_tip: MaybeSignal<String>,
+    #[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal<bool>,
-    percentage: ReadSignal<f64>,
+    #[prop(into, optional)] indicator_placement: MaybeSignal<ProgressIndicatorPlacement>,
 ) -> impl IntoView {
     mount_style("progress", include_str!("./progress.css"));
-    let style = move || format!("width: {}%", percentage.get());
+    let theme = use_theme(Theme::light);
-    let left_tip: StoredMaybeSignal<_> = left_tip.into();
+    let style = move || {
-    let right_tip: StoredMaybeSignal<_> = right_tip.into();
+        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! {
         <div class="thaw-progress">
-            <span class="thaw-progress__tip-left">
+            <div class=class>
-                <Show when=move || left_tip.with(|v| !v.is_empty())>{move || left_tip.get()}</Show>
+                <div class="thaw-progress__progress-inner" style=style>
-            </span>
+                    <Show when=move || show_indicator.get() && indicator_placement.get() == ProgressIndicatorPlacement::Inside>
-            <span class="thaw-progress__progress">
+                        <div class="thaw-progress__indicator--inside">
-                <span class="thaw-progress__progress-inner" style=style>
+                            {
-                    <span class="thaw-progress__progress-circle"></span>
+                                move || {
-                </span>
+                                    format!("{}%", percentage.get())
-            </span>
+                                }
-            <span class="thaw-progress__tip-right">
+                            }
-                <Show when=move || {
+                        </div>
-                    right_tip.with(|v| !v.is_empty())
+                    </Show>
-                }>{move || right_tip.get()}</Show>
+                </div>
-            </span>
+            </div>
+            <Show when=move || show_indicator.get() && indicator_placement.get() == ProgressIndicatorPlacement::Outside>
+                <div class="thaw-progress__indicator--outside">
+                    {
+                        move || {
+                            format!("{}%", percentage.get())
+                        }
+                    }
+                </div>
+            </Show>
         </div>
     }
 }

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;
+    border-radius: 4px;
-    /* cursor: pointer; */
+}
+
+.thaw-progress__progress--indicator-inside {
+    height: 16px;
+    font-size: 12px;
+    border-radius: 8px;
 }
 
 .thaw-progress__progress-inner {
-    position: relative;
+    position: absolute;
-    top: -14px;
+    background: var(--thaw-background-color);
-    display: inline-block;
-    background: red;
     height: 100%;
+    border-radius: inherit;
     transition: width 0.1s;
 }
 
-.thaw-progress__progress-circle {
+.thaw-progress__indicator--outside {
-    display: inline-block;
+    padding: 0 8px;
-    position: absolute;
+}
-    right: -3px;
+
-    top: -4px;
+.thaw-progress__indicator--inside {
-    width: 10px;
+    text-align: right;
-    height: 10px;
+    margin: 0 12px;
-    border-radius: 50%;
-    background: #fff;
-    box-shadow: 0 0 3px 2px #4443;
 }