From d265adfbe6b27a92163a7377351932215ba45afa Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 16 Oct 2023 22:04:34 +0800
Subject: [PATCH] feat: change card component title prop

---
 demo/src/app.rs              |  1 +
 demo/src/pages/card/mod.rs   | 78 ++++++++++++++++++++++++++++++++++++
 demo/src/pages/components.rs |  4 ++
 demo/src/pages/mod.rs        |  2 +
 src/card/mod.rs              | 20 ++++-----
 5 files changed, 96 insertions(+), 9 deletions(-)
 create mode 100644 demo/src/pages/card/mod.rs

diff --git a/demo/src/app.rs b/demo/src/app.rs
index 788af32..5bd39f0 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -29,6 +29,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/auto-complete" view=AutoCompletePage/>
                     <Route path="/avatar" view=AvatarPage/>
                     <Route path="/badge" view=BadgePage/>
+                    <Route path="/card" view=CardPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
diff --git a/demo/src/pages/card/mod.rs b/demo/src/pages/card/mod.rs
new file mode 100644
index 0000000..60d2455
--- /dev/null
+++ b/demo/src/pages/card/mod.rs
@@ -0,0 +1,78 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn CardPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Badge"</h1>
+            <Demo>
+                <Space vertical=true>
+                    <Card title="title">
+                        "content"
+                    </Card>
+                    <Card title="title">
+                        <CardHeaderExtra slot>
+                            "header-extra"
+                        </CardHeaderExtra>
+                        "content"
+                    </Card>
+                    <Card title="title">
+                        <CardHeader slot>
+                            "header"
+                        </CardHeader>
+                        "content"
+                    </Card>
+                    <Card title="title">
+                        <CardHeaderExtra slot>
+                            "header-extra"
+                        </CardHeaderExtra>
+                        "content"
+                        <CardFooter slot>
+                            "footer"
+                        </CardFooter>
+                    </Card>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Space vertical=true> 
+                        <Card title="title">
+                            "content"
+                        </Card>
+                        <Card title="title">
+                            <CardHeaderExtra slot>
+                                "header-extra"
+                            </CardHeaderExtra>
+                            "content"
+                        </Card>
+                        <Card title="title">
+                            <CardHeader slot>
+                                "header"
+                            </CardHeader>
+                            "content"
+                        </Card>
+                        <Card title="title">
+                            <CardHeaderExtra slot>
+                                "header-extra"
+                            </CardHeaderExtra>
+                            "content"
+                            <CardFooter slot>
+                                "footer"
+                            </CardFooter>
+                        </Card>
+                    </Space>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 0c7625a..c8bfc24 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -88,6 +88,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "button".into(),
                     label: "Button".into(),
                 },
+                MenuItemOption {
+                    value: "card".into(),
+                    label: "Card".into(),
+                },
             ],
         },
         MenuGroupOption {
diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs
index b807a52..adad1bd 100644
--- a/demo/src/pages/mod.rs
+++ b/demo/src/pages/mod.rs
@@ -3,6 +3,7 @@ mod auto_complete;
 mod avatar;
 mod badge;
 mod button;
+mod card;
 mod checkbox;
 mod color_picker;
 mod components;
@@ -27,6 +28,7 @@ pub use auto_complete::*;
 pub use avatar::*;
 pub use badge::*;
 pub use button::*;
+pub use card::*;
 pub use checkbox::*;
 pub use color_picker::*;
 pub use components::*;
diff --git a/src/card/mod.rs b/src/card/mod.rs
index b4be4fd..bc16d1b 100644
--- a/src/card/mod.rs
+++ b/src/card/mod.rs
@@ -1,12 +1,13 @@
 use crate::{components::*, utils::mount_style::mount_style};
 use leptos::*;
-use std::rc::Rc;
 
+#[derive(Clone)]
 #[slot]
 pub struct CardHeader {
     children: ChildrenFn,
 }
 
+#[derive(Clone)]
 #[slot]
 pub struct CardHeaderExtra {
     children: ChildrenFn,
@@ -21,7 +22,7 @@ pub struct CardFooter {
 
 #[component]
 pub fn Card(
-    #[prop(optional, into)] title: MaybeSignal<&'static str>,
+    #[prop(optional, into)] title: MaybeSignal<String>,
     #[prop(optional)] card_header: Option<CardHeader>,
     #[prop(optional)] card_header_extra: Option<CardHeaderExtra>,
     children: Children,
@@ -29,23 +30,24 @@ pub fn Card(
 ) -> impl IntoView {
     mount_style("card", include_str!("./card.css"));
 
+    let title = store_value(title);
     let is_header = card_header.is_some();
-    let header = card_header.map_or(None, |v| Some(Rc::new(v)));
-    let header_extra = card_header_extra.map_or(None, |v| Some(Rc::new(v)));
-    // let footer = card_footer.map_or(None, |v| Some(Rc::new(v)));
+    let is_header = MaybeSignal::derive(move || is_header || !title.get_value().get().is_empty());
+    let header = store_value(card_header);
+    let header_extra = store_value(card_header_extra);
 
     view! {
         <div class="melt-card">
-            <If cond=MaybeSignal::derive(move || is_header || !title.get().is_empty())>
+            <If cond=is_header>
                 <Then slot>
                     <div class="melt-card__header">
                         <div class="melt-card__header-content">
-                            <OptionComp value=header.clone() let:header>
-                                <Fallback slot>{title.get()}</Fallback>
+                            <OptionComp value=header.get_value() let:header>
+                                <Fallback slot>{move || title.get_value().get()}</Fallback>
                                 {(header.children)()}
                             </OptionComp>
                         </div>
-                        <OptionComp value=header_extra.clone() let:header_extra>
+                        <OptionComp value=header_extra.get_value() let:header_extra>
                             <div class="melt-card__header-extra">{(header_extra.children)()}</div>
                         </OptionComp>
                     </div>