From 0279ace8d0a80641a25c9829922a6ec49f439c4e Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Tue, 17 Oct 2023 21:45:34 +0800
Subject: [PATCH] feat: Input component adds the suffix attribute

---
 demo/src/pages/input/mod.rs | 10 ++++++++++
 src/input/input.css         |  7 +++++++
 src/input/mod.rs            | 19 ++++++++++++++++++-
 src/input_number/mod.rs     |  9 +++++++++
 src/lib.rs                  |  2 ++
 5 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/input_number/mod.rs

diff --git a/demo/src/pages/input/mod.rs b/demo/src/pages/input/mod.rs
index bd6e3ae..c0e38d3 100644
--- a/demo/src/pages/input/mod.rs
+++ b/demo/src/pages/input/mod.rs
@@ -13,6 +13,11 @@ pub fn InputPage() -> impl IntoView {
                 <Space vertical=true>
                     <Input value/>
                     <Input value variant=InputVariant::Password/>
+                    <Input value>
+                        <InputSuffix slot>
+                            "$"
+                        </InputSuffix>
+                    </Input>
                 </Space>
                 <DemoCode
                     slot
@@ -23,6 +28,11 @@ pub fn InputPage() -> impl IntoView {
                         view! {
                             <Input value/>
                             <Input value variant=InputVariant::Password />
+                            <Input value>
+                                <InputSuffix slot>
+                                    "$"
+                                </InputSuffix>
+                            </Input>
                         }
                     "#,
                         "rust"
diff --git a/src/input/input.css b/src/input/input.css
index 5a80a06..24a0214 100644
--- a/src/input/input.css
+++ b/src/input/input.css
@@ -25,3 +25,10 @@
     border: none;
     outline: none;
 }
+
+.melt-input__suffix {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+}
diff --git a/src/input/mod.rs b/src/input/mod.rs
index ba254a4..bad71b9 100644
--- a/src/input/mod.rs
+++ b/src/input/mod.rs
@@ -23,6 +23,11 @@ impl InputVariant {
     }
 }
 
+#[slot]
+pub struct InputSuffix {
+    children: Children,
+}
+
 #[component]
 pub fn Input(
     #[prop(optional, into)] value: MaybeRwSignal<String>,
@@ -31,6 +36,7 @@ pub fn Input(
     #[prop(optional, into)] placeholder: MaybeSignal<String>,
     #[prop(optional, into)] on_focus: Option<Callback<ev::FocusEvent>>,
     #[prop(optional, into)] on_blur: Option<Callback<ev::FocusEvent>>,
+    #[prop(optional)] input_suffix: Option<InputSuffix>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
     mount_style("input", include_str!("./input.css"));
@@ -65,7 +71,7 @@ pub fn Input(
         css_vars
     });
     view! {
-        <div class:melt-input=true style=move || css_vars.get()>
+        <div class="melt-input" style=move || css_vars.get()>
             <input
                 type=move || variant.get().as_str()
                 prop:value=move || value.get()
@@ -75,6 +81,17 @@ pub fn Input(
                 class="melt-input__input-el"
                 placeholder=move || placeholder.get()
             />
+            {
+                if let Some(suffix) = input_suffix {
+                    view! {
+                        <div class="melt-input__suffix">
+                            {(suffix.children)()}
+                        </div>
+                    }.into()
+                } else {
+                    None
+                }
+            }
         </div>
     }
 }
diff --git a/src/input_number/mod.rs b/src/input_number/mod.rs
new file mode 100644
index 0000000..58363bb
--- /dev/null
+++ b/src/input_number/mod.rs
@@ -0,0 +1,9 @@
+use crate::Input;
+use leptos::*;
+
+#[component]
+pub fn InputNumber() -> impl IntoView {
+    view! {
+        <Input />
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index 0e69c83..88e53b1 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -13,6 +13,7 @@ mod grid;
 mod icon;
 mod image;
 mod input;
+mod input_number;
 mod layout;
 mod menu;
 pub mod mobile;
@@ -42,6 +43,7 @@ pub use grid::*;
 pub use icon::*;
 pub use image::*;
 pub use input::*;
+pub use input_number::*;
 pub use layout::*;
 pub use menu::*;
 pub use modal::*;