From 4e0b338a65220e64bb7c7cdc07c1a372de984e10 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Fri, 9 Jun 2023 22:24:39 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20option=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cargo.toml                       | 12 ++++++++---
 examples/basic/Cargo.toml        |  8 +++++---
 src/button/mod.rs                | 18 ++++++++--------
 src/card/mod.rs                  | 35 ++++++++++++++------------------
 src/components/option_comp.rs    | 15 +++++++-------
 src/mobile/tabbar/tabbar_item.rs | 10 ++++-----
 6 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 7696f92..5446821 100644
--- a/Cargo.toml
+++ b/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_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined", "AiLeftOutlined"] }
+leptos_dom = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71" }
+leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "4fe4417", features = [
+    "AiCloseOutlined",
+    "AiCheckOutlined",
+    "AiLeftOutlined",
+] }
 wasm-bindgen = "0.2.85"
 
 [workspace]
diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml
index 26da600..fd93e3e 100644
--- a/examples/basic/Cargo.toml
+++ b/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_router = { version = "0.3.0", features = ["csr"] }
+leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "4fe4417", features = ["AiCloseOutlined", "AiCheckOutlined"] }
+leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = ["csr"] }
 
 regex = "1.8.2"
\ No newline at end of file
diff --git a/src/button/mod.rs b/src/button/mod.rs
index f043849..5dbf5cf 100644
--- a/src/button/mod.rs
+++ b/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)] children: Option<Children>,
+    #[prop(optional, into)] icon: Option<Icon>,
+    #[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| {
-                    view!{cx,
-                        <Icon icon=icon style=icon_style/>
-                    }
-                }/>
-                <OptionComp value=children view=|cx, children| {
-                    children(cx).into_view(cx)
-                }/>
+                <OptionComp value=icon bind:icon>
+                    <Icon icon=icon style=icon_style/>
+                </OptionComp>
+                <OptionComp value=children bind:children>
+                    { children(cx) }
+                </OptionComp>
         </button>
     }
 }
diff --git a/src/card/mod.rs b/src/card/mod.rs
index 1d35fc5..7c90f84 100644
--- a/src/card/mod.rs
+++ b/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| {
-                                    header(cx).into_view(cx)
-                                }>
-                                    { title.get() }
+                                <OptionComp value=header bind:header>
+                                    <Fallback slot>
+                                        { title.get() }
+                                    </Fallback>
+                                    { header(cx) }
                                 </OptionComp>
                             </div>
-                            <OptionComp value=header_extra view=move |cx, header_extra| {
-                                view! {
-                                    cx, class=class_name,
-                                    <div class="melt-card__header-extra">
-                                        { header_extra(cx)}
-                                    </div>
-                                }
-                            }/>
+                            <OptionComp value=header_extra bind:header_extra>
+                                <div class="melt-card__header-extra">
+                                    { header_extra(cx) }
+                                </div>
+                            </OptionComp>
                         </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| {
-                view! {
-                    cx, class=class_name,
-                    <div class="melt-card__footer">
-                        { footer(cx) }
-                    </div>
-                }
-            }/>
+            <OptionComp value=footer bind:footer>
+                <div class="melt-card__footer">
+                    { footer(cx) }
+                </div>
+            </OptionComp>
          </div>
     }
 }
diff --git a/src/components/option_comp.rs b/src/components/option_comp.rs
index 9938533..d2a72b3 100644
--- a/src/components/option_comp.rs
+++ b/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,
-    #[prop(optional)] children: Option<Children>,
+    children: CF,
+    #[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)
-    } else if let Some(children) = children {
-        children(cx).into_view(cx)
+        children(cx, value).into_view(cx)
+    } else if let Some(fallback) = fallback {
+        (fallback.children)(cx).into_view(cx)
     } else {
         ().into_view(cx)
     }
diff --git a/src/mobile/tabbar/tabbar_item.rs b/src/mobile/tabbar/tabbar_item.rs
index 18f9a15..0d2ea88 100644
--- a/src/mobile/tabbar/tabbar_item.rs
+++ b/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| {
-                view!{cx,
-                    <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
-                }
-            }/>
+            <OptionComp value=icon bind:icon>
+                <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
+            </OptionComp>
             <div class="melt-tabbar-item__content">
                 { children(cx) }
             </div>