feat: Input component adds the suffix attribute

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"

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;
+}

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>
     }
 }

src/input_number/mod.rs

@@ -0,0 +1,9 @@
+use crate::Input;
+use leptos::*;
+
+#[component]
+pub fn InputNumber() -> impl IntoView {
+    view! {
+        <Input />
+    }
+}

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