✨ feat: use if component

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

@@ -3,11 +3,9 @@ use melt_ui::*;
 
 #[component]
 pub fn SliderPage(cx: Scope) -> impl IntoView {
-    let (value, set_value) = create_signal(cx, 0.0);
+    let value = create_rw_signal(cx, 0.0);
-    let on_value = SignalSetter::map(cx, move |value| {
+
-        set_value.set(value);
-    });
     view! { cx,
-        <Slider value=value on_value=on_value/>
+        <Slider value/>
     }
 }

src/mobile/nav_bar/mod.rs

@@ -1,4 +1,4 @@
-use crate::utils::mount_style::mount_style;
+use crate::{utils::mount_style::mount_style, components::*};
 use leptos::*;
 use leptos_icons::*;
 use stylers::style_sheet_str;
@@ -7,11 +7,11 @@ use web_sys::MouseEvent;
 #[component]
 pub fn NavBar(
     cx: Scope,
-    #[prop(optional, into)] title: MaybeSignal<String>,
+    #[prop(optional, into)] title: MaybeSignal<&'static str>,
     #[prop(optional, into)] left_arrow: MaybeSignal<bool>,
-    #[prop(optional, into)] left_text: MaybeSignal<String>,
+    #[prop(optional, into)] left_text: MaybeSignal<&'static str>,
     #[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
-    #[prop(optional, into)] right_text: MaybeSignal<String>,
+    #[prop(optional, into)] right_text: MaybeSignal<&'static str>,
     #[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
 
 ) -> impl IntoView {
@@ -30,47 +30,28 @@ pub fn NavBar(
 
     view! { cx, class=class_name,
         <div class="melt-nav-bar">
-            {
+            <If cond=MaybeSignal::derive(cx, move || left_arrow.get() || !left_text.get().is_empty())>
-                move || {
+                <Then slot>
-                    let left_text = left_text.get();
-                    if left_arrow.get() || !left_text.is_empty() {
-                        view! { cx, class=class_name,
                     <div class="melt-nav-bar__left" on:click=onclick_left>
-                                {
+                        <If cond=left_arrow>
-                                    if left_arrow.get() {
+                            <Then slot>
-                                        view! { cx,
                                 <Icon icon=AiIcon::AiLeftOutlined/>
-                                        }.into()
+                            </Then>
-                                    } else {
+                        </If>
-                                        None
+                        { left_text.get() }
-                                    }
-                                }
-                                { left_text }
                     </div>
-                        }.into()
+                </Then>
-                    } else {
+            </If>
-                        None
-                    }
-                }
-            }
             <div class="melt-nav-bar__center">
                 { move || title.get() }
             </div>
-            {
+            <If cond=MaybeSignal::derive(cx, move || !right_text.get().is_empty())>
-                move || {
+                <Then slot>
-                    let right_text = right_text.get();
-                    if !right_text.is_empty() {
-                        view! { cx, class=class_name,
                     <div class="melt-nav-bar__right" on:click=onclick_right>
-                                { right_text }
+                        { right_text.get() }
                     </div>
-                        }.into()
+                </Then>
-                    } else {
+            </If>            
-                        None
-                    }
-                }
-            }
-            
         </div>
     }
 }

src/progress/mod.rs

@@ -1,12 +1,12 @@
-use crate::utils::mount_style::mount_style;
+use crate::{utils::mount_style::mount_style, components::*};
 use leptos::*;
 use stylers::style_sheet_str;
 
 #[component]
 pub fn Progress(
     cx: Scope,
-    #[prop(optional)] left_tip: Option<ReadSignal<String>>,
+    #[prop(optional, into)] left_tip: MaybeSignal<&'static str>,
-    #[prop(optional)] right_tip: Option<ReadSignal<String>>,
+    #[prop(optional, into)] right_tip: MaybeSignal<&'static str>,
     percentage: ReadSignal<f64>,
 ) -> impl IntoView {
     let class_name = mount_style("progress", || style_sheet_str!("./src/progress/progress.css"));
@@ -15,15 +15,11 @@ pub fn Progress(
         cx, class=class_name,
         <div class="melt-progress">
             <span class="melt-progress__tip-left">
-                {
+                <If cond=MaybeSignal::derive(cx, move || !left_tip.get().is_empty())>
-                    move || {
+                    <Then slot>
-                        if let Some(left_tip) = left_tip {
+                        { left_tip.get() }
-                            left_tip.get()
+                    </Then>
-                        }  else {
+                </If>
-                            "".into()
-                        }
-                    }
-                }
             </span>
             <span class="melt-progress__progress">
                 <span class="melt-progress__progress-inner" style=style>
@@ -31,15 +27,11 @@ pub fn Progress(
                 </span>
             </span>
             <span class="melt-progress__tip-right">
-                {
+                <If cond=MaybeSignal::derive(cx, move || !right_tip.get().is_empty())>
-                    move || {
+                    <Then slot>
-                        if let Some(right_tip) = right_tip {
+                        { right_tip.get() }
-                            right_tip.get()
+                    </Then>
-                        }  else {
+                </If>
-                            "".into()
-                        }
-                    }
-                }
             </span>
          </div>
     }

src/slider/mod.rs

@@ -10,8 +10,7 @@ use wasm_bindgen::JsCast;
 #[component]
 pub fn Slider(
     cx: Scope,
-    #[prop(optional, into)] value: MaybeSignal<f64>,
+    #[prop(into)] value: RwSignal<f64>,
-    #[prop(optional)] on_value: Option<SignalSetter<f64>>,
     #[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal<f64>,
 ) -> impl IntoView {
     let theme = use_theme(cx, Theme::light);
@@ -35,10 +34,8 @@ pub fn Slider(
     });
     let class_name = mount_style("slider", || style_sheet_str!("./src/slider/slider.css"));
 
-    let do_update_value = move |value| {
+    let do_update_value = move |val| {
-        if let Some(on_value) = on_value {
+        value.set(val);
-            on_value.set(value);
-        }
     };
 
     let rail_ref = create_node_ref::<html::Div>(cx);

src/teleport/mod.rs

@@ -3,9 +3,16 @@ use web_sys::Element;
 
 /// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
 #[component]
-pub fn Teleport(cx: Scope, #[prop(optional)] to: Option<String>, children: Children) -> impl IntoView {
+pub fn Teleport(
+    cx: Scope,
+    #[prop(optional)] to: Option<&'static str>,
+    children: Children,
+) -> impl IntoView {
     let parent = if let Some(to) = to {
-        document().query_selector(to.as_str()).expect("element not to exist").expect("element not to exist")
+        document()
+            .query_selector(to)
+            .expect("element not to exist")
+            .expect("element not to exist")
     } else {
         Element::from(document().body().expect("body element not to exist"))
     };