feat: input component add prefix slot

demo/Cargo.toml

@@ -16,6 +16,7 @@ icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
     "AiGithubOutlined",
+    "AiUserOutlined",
 ] }
 prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" }
 

demo/src/pages/input/mod.rs

@@ -13,11 +13,46 @@ pub fn InputPage() -> impl IntoView {
                 <Space vertical=true>
                     <Input value/>
                     <Input value variant=InputVariant::Password placeholder="Password"/>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        let value = create_rw_signal(String::from("o"));
+
+                        view! {
+                            <Space vertical=true>
+                                <Input value/>
+                                <Input value variant=InputVariant::Password placeholder="Password"/>
+                            </Space>
+                        }
+                    "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                    ""
+                </DemoCode>
+            </Demo>
+            <h1>"Prefix & Suffix"</h1>
+            <Demo>
+                <Space vertical=true>
+                    <Input value>
+                        <InputPrefix slot>
+                            <Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
+                        </InputPrefix>
+                    </Input>
                     <Input value>
                         <InputSuffix slot>
                             "$"
                         </InputSuffix>
                     </Input>
+                    <Input value>
+                        <InputSuffix slot>
+                            <Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
+                        </InputSuffix>
+                    </Input>
                 </Space>
                 <DemoCode
                     slot
@@ -26,13 +61,23 @@ pub fn InputPage() -> impl IntoView {
                         let value = create_rw_signal(String::from("o"));
 
                         view! {
-                            <Input value/>
+                            <Space vertical=true>
-                            <Input value variant=InputVariant::Password placeholder="Password"/>
+                                <Input value>
+                                    <InputPrefix slot>
+                                        <Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
+                                    </InputPrefix>
+                                </Input>
                                 <Input value>
                                     <InputSuffix slot>
                                         "$"
                                     </InputSuffix>
                                 </Input>
+                                <Input value>
+                                    <InputSuffix slot>
+                                        <Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
+                                    </InputSuffix>
+                                </Input>
+                            </Space>
                         }
                     "#,
                         "rust"
@@ -102,10 +147,15 @@ pub fn InputPage() -> impl IntoView {
                     </tr>
                 </thead>
                 <tbody>
+                    <tr>
+                        <td>"InputPrefix"</td>
+                        <td>"None"</td>
+                        <td>"InputPrefix content."</td>
+                    </tr>
                     <tr>
                         <td>"InputSuffix"</td>
                         <td>"None"</td>
-                        <td>"Input content."</td>
+                        <td>"InputSuffix content."</td>
                     </tr>
                 </tbody>
             </Table>

src/input/input.css

@@ -36,6 +36,13 @@
     color: var(--thaw-placeholder-color);
 }
 
+.thaw-input__prefix {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
+}
+
 .thaw-input__suffix {
     display: inline-flex;
     align-items: center;

src/input/mod.rs

@@ -23,6 +23,11 @@ impl InputVariant {
     }
 }
 
+#[slot]
+pub struct InputPrefix {
+    children: Children,
+}
+
 #[slot]
 pub struct InputSuffix {
     children: Children,
@@ -36,6 +41,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_prefix: Option<InputPrefix>,
     #[prop(optional)] input_suffix: Option<InputSuffix>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -92,6 +98,11 @@ pub fn Input(
     });
     view! {
         <div class="thaw-input" class=("thaw-input--focus", move || is_focus.get()) style=move || css_vars.get()>
+            {if let Some(prefix) = input_prefix {
+                view! { <div class="thaw-input__prefix">{(prefix.children)()}</div> }.into()
+            } else {
+                None
+            }}
             <input
                 type=move || variant.get().as_str()
                 prop:value=move || {