✨ feat: 添加 input 组件

examples/basic/src/main.rs

@@ -10,8 +10,17 @@ pub fn App(cx: Scope) -> impl IntoView {
     let (count, set_count) = create_signal(cx, 0.0);
     let (open, set_open) = create_signal(cx, true);
     let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
+    
+    let count_string = create_memo(cx, move |_| {
+        log!("sd");
+        count.get().to_string()
+    });
+    let on_input = SignalSetter::map(cx, move |value: String| {
+        set_count.set(value.parse().unwrap());
+    });
     view! { cx,
         <Space>
+            <Input value=count_string.get() on_input=on_input/>
             <Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>"click"</Button>
             <Button on:click=move |_| set_count.update(move |value| *value += 1.0) type_=button_type>"click"</Button>
             {move || count.get()}

src/input/mod.rs

@@ -0,0 +1,27 @@
+use crate::utils::mount_style::mount_style;
+use leptos::*;
+use stylers::style_sheet_str;
+
+#[component]
+pub fn Input(
+    cx: Scope,
+    #[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 input_ref = create_node_ref::<html::Input>(cx);
+    if let Some(on_input) = on_input {
+        input_ref.on_load(cx, move |input| {
+            input.on(ev::input, move |ev| {
+                on_input.set(event_target_value(&ev));
+            });
+        });
+    }
+
+    view! {
+        cx, class=class_name,
+        <div class:jo-input=true>
+            <input type="text" prop:value=value.get() ref=input_ref/>
+        </div>
+    }
+}

src/lib.rs

@@ -1,5 +1,6 @@
 mod button;
 mod card;
+mod input;
 mod modal;
 mod progress;
 mod space;
@@ -9,6 +10,7 @@ mod theme;
 mod utils;
 
 pub use button::*;
+pub use input::*;
 pub use modal::*;
 pub use progress::*;
 pub use space::*;