✨ feat: option component

Cargo.toml

@@ -13,11 +13,17 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.3.0", features = ["stable"] }
+leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = [
+    "stable",
+] }
 stylers = "0.3.1"
 web-sys = { version = "0.3.62", features = ["DomRect"] }
-leptos_dom = { version = "0.3.0" }
+leptos_dom = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71" }
-leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined", "AiLeftOutlined"] }
+leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "4fe4417", features = [
+    "AiCloseOutlined",
+    "AiCheckOutlined",
+    "AiLeftOutlined",
+] }
 wasm-bindgen = "0.2.85"
 
 [workspace]

examples/basic/Cargo.toml

@@ -6,9 +6,11 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.3.0", features = ["stable"] }
+leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = [
+    "stable",
+] }
 melt-ui = { path = "../../" }
-leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
+leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "4fe4417", features = ["AiCloseOutlined", "AiCheckOutlined"] }
-leptos_router = { version = "0.3.0", features = ["csr"] }
+leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = ["csr"] }
 
 regex = "1.8.2"

src/button/mod.rs

@@ -41,8 +41,8 @@ pub fn Button(
     #[prop(optional, into)] type_: MaybeSignal<ButtonType>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
-    #[prop(optional, into)] icon: Option<IconData>,
+    #[prop(optional, into)] icon: Option<Icon>,
-    #[prop(optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<ChildrenFn>,
 ) -> impl IntoView {
     let theme = use_theme(cx, Theme::light);
     let css_vars = create_memo(cx, move |_| {
@@ -78,14 +78,12 @@ pub fn Button(
             class=("melt-button--round", move || round.get())
             style=move || format!("{}{}", css_vars.get(), style.get())
             >
-                <OptionComp value=icon view=move |cx, icon| {
+                <OptionComp value=icon bind:icon>
-                    view!{cx,
+                    <Icon icon=icon style=icon_style/>
-                        <Icon icon=icon style=icon_style/>
+                </OptionComp>
-                    }
+                <OptionComp value=children bind:children>
-                }/>
+                    { children(cx) }
-                <OptionComp value=children view=|cx, children| {
+                </OptionComp>
-                    children(cx).into_view(cx)
-                }/>
         </button>
     }
 }

src/card/mod.rs

@@ -21,20 +21,18 @@ pub fn Card(
                         cx, class=class_name,
                         <div class="melt-card__header">
                             <div class="melt-card__header-content">
-                                <OptionComp value=header view=|cx, header| {
+                                <OptionComp value=header bind:header>
-                                    header(cx).into_view(cx)
+                                    <Fallback slot>
-                                }>
+                                        { title.get() }
-                                    { title.get() }
+                                    </Fallback>
+                                    { header(cx) }
                                 </OptionComp>
                             </div>
-                            <OptionComp value=header_extra view=move |cx, header_extra| {
+                            <OptionComp value=header_extra bind:header_extra>
-                                view! {
+                                <div class="melt-card__header-extra">
-                                    cx, class=class_name,
+                                    { header_extra(cx) }
-                                    <div class="melt-card__header-extra">
+                                </div>
-                                        { header_extra(cx)}
+                            </OptionComp>
-                                    </div>
-                                }
-                            }/>
                         </div>
                     }.into()
                 } else {
@@ -44,14 +42,11 @@ pub fn Card(
             <div class="melt-card__content">
                 { children(cx) }
             </div>
-            <OptionComp value=footer view=move |cx, footer| {
+            <OptionComp value=footer bind:footer>
-                view! {
+                <div class="melt-card__footer">
-                    cx, class=class_name,
+                    { footer(cx) }
-                    <div class="melt-card__footer">
+                </div>
-                        { footer(cx) }
+            </OptionComp>
-                    </div>
-                }
-            }/>
          </div>
     }
 }

src/components/option_comp.rs

@@ -1,20 +1,21 @@
 use leptos::*;
+use super::Fallback;
 
 #[component]
-pub fn OptionComp<T, VF, IV>(
+pub fn OptionComp<T, CF, IV>(
     cx: Scope,
     value: Option<T>,
-    view: VF,
+    children: CF,
-    #[prop(optional)] children: Option<Children>,
+    #[prop(optional)] fallback: Option<Fallback>,
 ) -> impl IntoView
 where
-    VF: FnOnce(Scope, T) -> IV + 'static,
+    CF: Fn(Scope, T) -> IV + 'static,
     IV: IntoView,
 {
     if let Some(value) = value {
-        view(cx, value).into_view(cx)
+        children(cx, value).into_view(cx)
-    } else if let Some(children) = children {
+    } else if let Some(fallback) = fallback {
-        children(cx).into_view(cx)
+        (fallback.children)(cx).into_view(cx)
     } else {
         ().into_view(cx)
     }

src/mobile/tabbar/tabbar_item.rs

@@ -9,7 +9,7 @@ use leptos_icons::*;
 pub fn TabbarItem(
     cx: Scope,
     #[prop(into)] name: MaybeSignal<&'static str>,
-    #[prop(optional, into)] icon: Option<IconData>,
+    #[prop(optional, into)] icon: Option<Icon>,
     children: Children,
 ) -> impl IntoView {
     let class_name = mount_style("tabbar-item", || style_sheet_str!("./src/mobile/tabbar/tabbar-item.css"));
@@ -29,11 +29,9 @@ pub fn TabbarItem(
 
     view! {cx, class=class_name,
         <div class="melt-tabbar-item" class=("melt-tabbar-item--selected", move || tabbar.get().value == name.get()) on:click=onclick_select style=move || css_vars.get()>
-            <OptionComp value=icon view=move |cx, icon| {
+            <OptionComp value=icon bind:icon>
-                view!{cx,
+                <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
-                    <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
+            </OptionComp>
-                }
-            }/>
             <div class="melt-tabbar-item__content">
                 { children(cx) }
             </div>