From ee50e57e57b935e5a8749e30ad177677154aa9aa Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 6 Apr 2023 17:27:54 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20input=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/basic/Trunk.toml |  5 +++++
 src/input/input.css       | 27 +++++++++++++++++++++++++++
 src/input/mod.rs          | 21 ++++++++++++++++-----
 src/input/theme.rs        | 16 ++++++++++++++++
 src/theme/mod.rs          |  7 ++++++-
 5 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 src/input/theme.rs

diff --git a/examples/basic/Trunk.toml b/examples/basic/Trunk.toml
index a456546..b3cb014 100644
--- a/examples/basic/Trunk.toml
+++ b/examples/basic/Trunk.toml
@@ -1,6 +1,11 @@
 [build]
 target = "index.html"
 
+[watch]
+watch = [
+    "../../src"
+]
+
 [serve]
 address = "127.0.0.1"
 port = 6421
diff --git a/src/input/input.css b/src/input/input.css
index e69de29..5a80a06 100644
--- a/src/input/input.css
+++ b/src/input/input.css
@@ -0,0 +1,27 @@
+.melt-input {
+    display: inline-flex;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    background-color: #fafbfc;
+    color: #24292e;
+    font-size: 14px;
+    border: 1px solid #e0e0e6;
+    border-radius: var(--border-radius);
+    cursor: text;
+    transition: all 0.3s;
+}
+
+.melt-input:hover {
+    border-color: var(--border-color-hover);
+}
+.melt-input__input-el {
+    width: 100%;
+    height: 30px;
+    background-color: transparent;
+    color: #24292e;
+    line-height: 30px;
+    font-size: inherit;
+    border: none;
+    outline: none;
+}
diff --git a/src/input/mod.rs b/src/input/mod.rs
index 0c165f6..7605aef 100644
--- a/src/input/mod.rs
+++ b/src/input/mod.rs
@@ -1,4 +1,6 @@
-use crate::utils::mount_style::mount_style;
+mod theme;
+pub use theme::InputTheme;
+use crate::{utils::mount_style::mount_style, theme::{use_theme, Theme}};
 use leptos::*;
 use stylers::style_sheet_str;
 
@@ -8,7 +10,8 @@ pub fn Input(
     #[prop(optional, into)] value: MaybeSignal<String>,
     #[prop(optional)] on_input: Option<SignalSetter<String>>,
 ) -> impl IntoView {
-    let class_name = mount_style("modal", || style_sheet_str!("./src/input/input.css"));
+    let theme = use_theme(cx, Theme::light);
+    let class_name = mount_style("input", || style_sheet_str!("./src/input/input.css"));
     let input_ref = create_node_ref::<html::Input>(cx);
     if let Some(on_input) = on_input {
         input_ref.on_load(cx, move |input| {
@@ -17,11 +20,19 @@ pub fn Input(
             });
         });
     }
-
+    let css_vars = create_memo(cx, move |_| {
+        let mut css_vars = String::new();
+        let theme = theme.get();
+        let border_color_hover = theme.common.color_primary.clone();
+        css_vars.push_str(&format!("--border-color-hover: {border_color_hover};"));
+        let border_radius = theme.common.border_radius.clone();
+        css_vars.push_str(&format!("--border-radius: {border_radius};"));
+        css_vars
+    });
     view! {
         cx, class=class_name,
-        <div class:jo-input=true>
-            <input type="text" prop:value=move || value.get() ref=input_ref/>
+        <div class:melt-input=true style=move || css_vars.get()>
+            <input type="text" prop:value=move || value.get() ref=input_ref class="melt-input__input-el"/>
         </div>
     }
 }
diff --git a/src/input/theme.rs b/src/input/theme.rs
new file mode 100644
index 0000000..987197a
--- /dev/null
+++ b/src/input/theme.rs
@@ -0,0 +1,16 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct InputTheme {
+
+}
+
+impl ThemeMethod for InputTheme {
+    fn light() -> Self {
+        Self {  }
+    }
+
+    fn dark() -> Self {
+        Self {  }
+    }
+}
\ No newline at end of file
diff --git a/src/theme/mod.rs b/src/theme/mod.rs
index 710078a..1f12238 100644
--- a/src/theme/mod.rs
+++ b/src/theme/mod.rs
@@ -2,7 +2,7 @@ mod common;
 use leptos::*;
 
 use self::common::CommonTheme;
-use crate::ButtonTheme;
+use crate::{ButtonTheme, InputTheme};
 
 pub trait ThemeMethod {
     fn light() -> Self;
@@ -13,6 +13,7 @@ pub trait ThemeMethod {
 pub struct Theme {
     pub common: CommonTheme,
     pub button: ButtonTheme,
+    pub input: InputTheme,
 }
 
 impl Theme {
@@ -20,12 +21,14 @@ impl Theme {
         Self {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
+            input: InputTheme::light(),
         }
     }
     pub fn dark() -> Self {
         Self {
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
+            input: InputTheme::dark(),
         }
     }
 }
@@ -35,12 +38,14 @@ impl ThemeMethod for Theme {
         Self {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
+            input: InputTheme::dark(),
         }
     }
     fn dark() -> Self {
         Self {
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
+            input: InputTheme::dark(),
         }
     }
 }