✨ feat: change input type

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

@@ -8,7 +8,7 @@ pub fn InputPage(cx: Scope) -> impl IntoView {
         <>
             {move || value.get()}
             <Input value/>
-            <Input value type_="password" />
+            <Input value type_=InputType::PASSWORD />
         </>
     }
 }

gh-pages/src/pages/input/mod.rs

@@ -8,7 +8,7 @@ pub fn InputPage(cx: Scope) -> impl IntoView {
         <>
             {move || value.get()}
             <Input value/>
-            <Input value type_="password" />
+            <Input value type_=InputType::PASSWORD />
         </>
     }
 }

gh-pages/src/pages/menu/mod.rs

@@ -5,10 +5,12 @@ use melt_ui::*;
 pub fn MenuPage(cx: Scope) -> impl IntoView {
     let selected = create_rw_signal(cx, String::from("o"));
     view! { cx,
+        <div>
             { move || selected.get() }
             <Menu selected>
                 <MenuItem key="a" label="and"/>
                 <MenuItem key="o" label="or"/>
             </Menu>
+        </div>
     }
 }

src/input/mod.rs

@@ -7,11 +7,27 @@ use leptos::*;
 use stylers::style_sheet_str;
 pub use theme::InputTheme;
 
+#[derive(Default, Clone)]
+pub enum InputType {
+    #[default]
+    TEXT,
+    PASSWORD,
+}
+
+impl InputType {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            InputType::TEXT => "text",
+            InputType::PASSWORD => "password",
+        }
+    }
+}
+
 #[component]
 pub fn Input(
     cx: Scope,
     #[prop(into)] value: RwSignal<String>,
-    #[prop(default = MaybeSignal::Static(String::from("text")), into)] type_: MaybeSignal<String>,
+    #[prop(optional, into)] type_: MaybeSignal<InputType>,
 ) -> impl IntoView {
     let theme = use_theme(cx, Theme::light);
     let class_name = mount_style("input", || style_sheet_str!("./src/input/input.css"));
@@ -35,7 +51,7 @@ pub fn Input(
     view! {
         cx, class=class_name,
         <div class:melt-input=true style=move || css_vars.get()>
-            <input type=move || type_.get() prop:value=move || value.get() ref=input_ref class="melt-input__input-el"/>
+            <input type=move || type_.get().as_str() prop:value=move || value.get() ref=input_ref class="melt-input__input-el"/>
         </div>
     }
 }