From e5b28961c5cd559e21109dd84c3de5ce6456c512 Mon Sep 17 00:00:00 2001
From: luoxiaozero <luoxiaozero@163.com>
Date: Thu, 30 Mar 2023 22:54:46 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20progress=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/basic/src/main.rs |  5 ++--
 src/lib.rs                 |  2 ++
 src/progress/mod.rs        | 46 +++++++++++++++++++++++++++++++++++++
 src/progress/progress.css  | 47 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 src/progress/mod.rs
 create mode 100644 src/progress/progress.css

diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
index 3e2c781..6202280 100644
--- a/examples/basic/src/main.rs
+++ b/examples/basic/src/main.rs
@@ -7,15 +7,16 @@ fn main() {
 
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
-    let (count, set_count) = create_signal(cx, 0);
+    let (count, set_count) = create_signal(cx, 0.0);
     let (open, set_open) = create_signal(cx, true);
     view! { cx,
         <div class="root">
-            <Button on:click=move |_| set_count.update(move |value| *value += 1)>"click"</Button>
+            <Button on:click=move |_| set_count.update(move |value| *value += 1.0)>"click"</Button>
             {move || count.get()}
             <Modal title=Some("".to_string()) open=open on_cancel=Some(Box::new(move || { set_open.set(false) }))>
                 "sd" {move || count.get()}
             </Modal>
+            <Progress percentage=count/>
         </div>
     }
 }
diff --git a/src/lib.rs b/src/lib.rs
index 9d0a56b..2c944f6 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,10 +1,12 @@
 mod button;
 mod card;
 mod modal;
+mod progress;
 mod table;
 mod teleport;
 mod utils;
 
 pub use button::*;
 pub use modal::*;
+pub use progress::*;
 pub use table::*;
diff --git a/src/progress/mod.rs b/src/progress/mod.rs
new file mode 100644
index 0000000..5145449
--- /dev/null
+++ b/src/progress/mod.rs
@@ -0,0 +1,46 @@
+use crate::utils::mount_style::mount_style;
+use leptos::*;
+use stylers::style_sheet_str;
+
+#[component]
+pub fn Progress(
+    cx: Scope,
+    #[prop(optional)] left_tip: Option<ReadSignal<String>>,
+    #[prop(optional)] right_tip: Option<ReadSignal<String>>,
+    percentage: ReadSignal<f64>,
+) -> impl IntoView {
+    let class_name = mount_style("progress", || style_sheet_str!("./src/progress/progress.css"));
+    let style = move || format!("width: {}%", percentage.get());
+    view! {
+        cx, class=class_name,
+        <div class="melt-progress">
+            <span class="melt-progress__tip-left">
+                {
+                    move || {
+                        if let Some(left_tip) = left_tip {
+                            left_tip.get()
+                        }  else {
+                            "".into()
+                        }
+                    }
+                }
+            </span>
+            <span class="melt-progress__progress">
+                <span class="melt-progress__progress-inner" style=style>
+                    <span class="melt-progress__progress-circle"></span>
+                </span>
+            </span>
+            <span class="melt-progress__tip-right">
+                {
+                    move || {
+                        if let Some(right_tip) = right_tip {
+                            right_tip.get()
+                        }  else {
+                            "".into()
+                        }
+                    }
+                }
+            </span>
+         </div>
+    }
+}
diff --git a/src/progress/progress.css b/src/progress/progress.css
new file mode 100644
index 0000000..5cdb12a
--- /dev/null
+++ b/src/progress/progress.css
@@ -0,0 +1,47 @@
+.melt-progress {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    padding: 0 8px;
+}
+
+.melt-progress__tip-right,
+.melt-progress__tip-left {
+    display: inline-block;
+    margin: 0 10px;
+    width: 48px;
+    text-align: center;
+    font-size: 12px;
+    color: #777;
+}
+
+.melt-progress__progress {
+    flex: 1;
+    height: 3px;
+    background: #f2f2f2;
+    border-radius: 2px;
+    /* cursor: pointer; */
+}
+
+.melt-progress__progress-inner {
+    position: relative;
+    top: -14px;
+    display: inline-block;
+    background: red;
+    height: 100%;
+    transition: width 0.1s;
+}
+
+.melt-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;
+}