✨ feat: input value

examples/basic/src/app.rs

@@ -28,6 +28,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                     <Route path="/tabbar" view=move |cx| view! {cx,
                         <MobilePage path="/mobile/tabbar" />
                     } />
+                    <Route path="/input" view=move |cx| view! {cx,
+                        <InputPage />
+                    } />
                 </Route>
             </Routes>
             <Routes base="/mobile".to_string()>

examples/basic/src/pages/components.rs

@@ -36,6 +36,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                     <MenuItem key="menu" label="menu" />
                     <MenuItem key="slider" label="slider" />
                     <MenuItem key="tabbar" label="tabbar" />
+                    <MenuItem key="input" label="input" />
                 </Menu>
             </aside>
             <main>

examples/basic/src/pages/home.rs

@@ -12,13 +12,6 @@ pub fn Home(cx: Scope) -> impl IntoView {
     provide_context(cx, theme);
     let (count, set_count) = create_signal(cx, 0.0);
     let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
-
-    let count_string = create_memo(cx, move |_| {
-        count.get().to_string()
-    });
-    let on_input = SignalSetter::map(cx, move |value: String| {
-        set_count.set(value.parse().unwrap());
-    });
     view! { cx,
         <Button on:click=move |_| {
             let navigate = use_navigate(cx);
@@ -28,7 +21,6 @@ pub fn Home(cx: Scope) -> impl IntoView {
         </Button>
         <hr />
         <Space>
-            <Input value=count_string on_input=on_input/>
             <Button
                 on:click=move |_| set_theme.update(move |value| *value = Theme::dark())
                 type_=button_type

examples/basic/src/pages/input/mod.rs

@@ -0,0 +1,14 @@
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn InputPage(cx: Scope) -> impl IntoView {
+    let value = create_rw_signal(cx, String::from("o"));
+    view! { cx,
+        <>
+            {move || value.get()}
+            <Input value/>
+            <Input value type_="password" />
+        </>
+    }
+}

examples/basic/src/pages/mod.rs

@@ -1,5 +1,6 @@
 mod components;
 mod home;
+mod input;
 mod menu;
 mod mobile;
 mod slider;
@@ -7,6 +8,7 @@ mod tabbar;
 
 pub use components::*;
 pub use home::*;
+pub use input::*;
 pub use menu::*;
 pub use mobile::*;
 pub use slider::*;

src/input/mod.rs

@@ -1,25 +1,28 @@
 mod theme;
-pub use theme::InputTheme;
+use crate::{
-use crate::{utils::mount_style::mount_style, theme::{use_theme, Theme}};
+    theme::{use_theme, Theme},
+    utils::mount_style::mount_style,
+};
 use leptos::*;
 use stylers::style_sheet_str;
+pub use theme::InputTheme;
 
 #[component]
 pub fn Input(
     cx: Scope,
-    #[prop(optional, into)] value: MaybeSignal<String>,
+    #[prop(into)] value: RwSignal<String>,
-    #[prop(optional)] on_input: Option<SignalSetter<String>>,
+    #[prop(default = MaybeSignal::Static(String::from("text")), into)] type_: MaybeSignal<String>,
 ) -> impl IntoView {
     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| {
-        input_ref.on_load(cx, move |input| {
+        input.on(ev::input, move |ev| {
-            input.on(ev::input, move |ev| {
+            value.set(event_target_value(&ev));
-                on_input.set(event_target_value(&ev));
-            });
         });
-    }
+    });
+
     let css_vars = create_memo(cx, move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
@@ -32,7 +35,7 @@ pub fn Input(
     view! {
         cx, class=class_name,
         <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"/>
+            <input type=move || type_.get() prop:value=move || value.get() ref=input_ref class="melt-input__input-el"/>
         </div>
     }
 }