From d1909554c42daa09d89a4d0cb98c3ebb1a863411 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 8 Jul 2024 14:40:17 +0800
Subject: [PATCH] feat(leptos-v0.7): demo

---
 demo/Trunk.toml                               |   2 +-
 demo/src/components/site_header.rs            | 195 +++++++++---------
 demo/src/pages/components.rs                  |   2 +-
 demo_markdown/docs/button/mod.md              |   4 +-
 demo_markdown/docs/input/mod.md               |   8 +-
 demo_markdown/docs/textarea/mod.md            |   8 +-
 demo_markdown/docs/upload/mod.md              |  12 +-
 .../src/auto_complete/auto_complete_option.rs |   2 +-
 thaw/src/lib.rs                               |   2 -
 thaw/src/space/mod.rs                         |  57 +++--
 thaw/src/tag/mod.rs                           |   1 -
 thaw_components/src/css_transition/mod.rs     |   3 +-
 thaw_utils/src/class_list.rs                  |   6 +-
 thaw_utils/src/hooks/use_lock_html_scroll.rs  |   2 +-
 14 files changed, 151 insertions(+), 153 deletions(-)

diff --git a/demo/Trunk.toml b/demo/Trunk.toml
index 3b9db18..acbe41f 100644
--- a/demo/Trunk.toml
+++ b/demo/Trunk.toml
@@ -1,7 +1,7 @@
 [build]
 target = "index.html"
 # public_url = "/thaw/"
-# release = true
+release = true
 # filehash = false
 
 [watch]
diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index 28e69a0..1b285a7 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -7,26 +7,26 @@ use thaw::*;
 
 #[component]
 pub fn SiteHeader() -> impl IntoView {
-    // let theme = Theme::use_rw_theme();
-    // let theme_name = Memo::new(move |_| {
-    //     theme.with(|theme| {
-    //         if theme.name == *"light" {
-    //             "Dark".to_string()
-    //         } else {
-    //             "Light".to_string()
-    //         }
-    //     })
-    // });
-    // // let (_, write_theme, _) = use_local_storage::<String, FromToStringCodec>("theme");
-    // let change_theme = Callback::new(move |_| {
-    //     if theme_name.get_untracked() == "Light" {
-    //         theme.set(Theme::light());
-    //         // write_theme.set("light".to_string());
-    //     } else {
-    //         theme.set(Theme::dark());
-    //         // write_theme.set("dark".to_string());
-    //     }
-    // });
+    let theme = Theme::use_rw_theme();
+    let theme_name = Memo::new(move |_| {
+        theme.with(|theme| {
+            if theme.name == *"light" {
+                "Dark".to_string()
+            } else {
+                "Light".to_string()
+            }
+        })
+    });
+    // let (_, write_theme, _) = use_local_storage::<String, FromToStringCodec>("theme");
+    let change_theme = Callback::new(move |_| {
+        if theme_name.get_untracked() == "Light" {
+            theme.set(Theme::light());
+            // write_theme.set("light".to_string());
+        } else {
+            theme.set(Theme::dark());
+            // write_theme.set("dark".to_string());
+        }
+    });
 
     let search_value = RwSignal::new(String::new());
     let search_all_options = StoredValue::new(gen_search_all_options());
@@ -130,86 +130,85 @@ pub fn SiteHeader() -> impl IntoView {
                 }
             "
         </Style>
-        <LayoutHeader attr:class="demo-header">
-            "123"
-            // <Space on:click=move |_| {
-            //     let navigate = use_navigate();
-            //     navigate("/", Default::default());
-            // }>
-            //     <img src="/logo.svg" style="width: 36px"/>
-            //     <div class="demo-name">"Thaw UI"</div>
-            // </Space>
-            // <Space>
-            //     <AutoComplete
-            //         value=search_value
-            //         placeholder="Type '/' to search"
-            //         clear_after_select=true
-            //         blur_after_select=true
-            //         on_select=on_search_select
-            //         comp_ref=auto_complete_ref
-            //     >
-            //         <For each=move || search_options.get() key=|option| option.label.clone() let:option>
-            //             <AutoCompleteOption key=option.value>{option.label}</AutoCompleteOption>
-            //         </For>
-            //         <AutoCompletePrefix slot>
-            //             <Icon
-            //                 icon=icondata::AiSearchOutlined
-            //                 style="font-size: 18px; color: var(--thaw-placeholder-color);"
-            //             />
-            //         </AutoCompletePrefix>
-            //     </AutoComplete>
-            //     <Popover
-            //         placement=PopoverPlacement::BottomEnd
-            //         class="demo-header__menu-popover-mobile"
-            //     >
-            //         <PopoverTrigger slot class="demo-header__menu-mobile">
-            //             <Button
-            //                 appearance=ButtonAppearance::Subtle
-            //                 icon=icondata::AiUnorderedListOutlined
-            //                 attr:style="font-size: 22px; padding: 0px 6px;"
-            //             />
-            //         </PopoverTrigger>
-            //         <div style="height: 70vh; overflow: auto;">// <Menu value=menu_value>
-            //         // <MenuItem key=theme_name label=theme_name />
-            //         // <MenuItem key="github" label="Github" />
-            //         // {
-            //         // use crate::pages::{gen_guide_menu_data, gen_menu_data};
-            //         // vec![
-            //         // gen_guide_menu_data().into_view(),
-            //         // gen_menu_data().into_view(),
-            //         // ]
-            //         // }
-            //         // </Menu>
-            //         </div>
-            //     </Popover>
-            //     <Space class="demo-header__right-btn" align=SpaceAlign::Center>
-            //         <Button
-            //             appearance=ButtonAppearance::Subtle
-            //             on_click=Callback::new(move |_| change_theme.call(()))
-            //         >
-            //             {move || theme_name.get()}
-            //         </Button>
-            //         <SwitchVersion/>
-            //         <Button
-            //             appearance=ButtonAppearance::Subtle
-            //             icon=icondata::BiDiscordAlt
-            //             attr:style="font-size: 22px; padding: 0px 6px;"
-            //             on_click=move |_| {
-            //                 _ = window().open_with_url("https://discord.gg/YPxuprzu6M");
-            //             }
-            //         />
+        <LayoutHeader attr:class=("demo-header", true)>
+            <Space on:click=move |_| {
+                let navigate = use_navigate();
+                navigate("/", Default::default());
+            }>
+                <img src="/logo.svg" style="width: 36px"/>
+                <div class="demo-name">"Thaw UI"</div>
+            </Space>
+            <Space>
+                <AutoComplete
+                    value=search_value
+                    placeholder="Type '/' to search"
+                    clear_after_select=true
+                    blur_after_select=true
+                    on_select=on_search_select
+                    comp_ref=auto_complete_ref
+                >
+                    <For each=move || search_options.get() key=|option| option.label.clone() let:option>
+                        <AutoCompleteOption key=option.value>{option.label}</AutoCompleteOption>
+                    </For>
+                    <AutoCompletePrefix slot>
+                        <Icon
+                            icon=icondata::AiSearchOutlined
+                            style="font-size: 18px; color: var(--thaw-placeholder-color);"
+                        />
+                    </AutoCompletePrefix>
+                </AutoComplete>
+                <Popover
+                    placement=PopoverPlacement::BottomEnd
+                    class="demo-header__menu-popover-mobile"
+                >
+                    <PopoverTrigger slot class="demo-header__menu-mobile">
+                        <Button
+                            appearance=ButtonAppearance::Subtle
+                            icon=icondata::AiUnorderedListOutlined
+                            attr:style="font-size: 22px; padding: 0px 6px;"
+                        />
+                    </PopoverTrigger>
+                    <div style="height: 70vh; overflow: auto;">// <Menu value=menu_value>
+                    // <MenuItem key=theme_name label=theme_name />
+                    // <MenuItem key="github" label="Github" />
+                    // {
+                    // use crate::pages::{gen_guide_menu_data, gen_menu_data};
+                    // vec![
+                    // gen_guide_menu_data().into_view(),
+                    // gen_menu_data().into_view(),
+                    // ]
+                    // }
+                    // </Menu>
+                    </div>
+                </Popover>
+                <Space class="demo-header__right-btn" align=SpaceAlign::Center>
+                    <Button
+                        appearance=ButtonAppearance::Subtle
+                        on_click=Callback::new(move |_| change_theme.call(()))
+                    >
+                        {move || theme_name.get()}
+                    </Button>
+                    <SwitchVersion/>
+                    <Button
+                        appearance=ButtonAppearance::Subtle
+                        icon=icondata::BiDiscordAlt
+                        attr:style="font-size: 22px; padding: 0px 6px;"
+                        on_click=move |_| {
+                            _ = window().open_with_url("https://discord.gg/YPxuprzu6M");
+                        }
+                    />
 
-            //         <Button
-            //             appearance=ButtonAppearance::Subtle
-            //             icon=icondata::AiGithubOutlined
-            //             attr:style="font-size: 22px; padding: 0px 6px;"
-            //             on_click=move |_| {
-            //                 _ = window().open_with_url("http://github.com/thaw-ui/thaw");
-            //             }
-            //         />
+                    <Button
+                        appearance=ButtonAppearance::Subtle
+                        icon=icondata::AiGithubOutlined
+                        attr:style="font-size: 22px; padding: 0px 6px;"
+                        on_click=move |_| {
+                            _ = window().open_with_url("http://github.com/thaw-ui/thaw");
+                        }
+                    />
 
-            //     </Space>
-            // </Space>
+                </Space>
+            </Space>
 
         </LayoutHeader>
     }
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 2e09019..fe36075 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -77,7 +77,7 @@ pub fn ComponentsPage() -> impl IntoView {
                         }
                     </NavDrawer>
                 </div>
-                <Layout content_style="padding: 8px 12px 28px; display: flex;" attr:class="doc-content">
+                <Layout content_style="padding: 8px 12px 28px; display: flex;" attr:class=("doc-content", true)>
                     <Outlet/>
                 </Layout>
             </Layout>
diff --git a/demo_markdown/docs/button/mod.md b/demo_markdown/docs/button/mod.md
index 1075b52..23d4fe5 100644
--- a/demo_markdown/docs/button/mod.md
+++ b/demo_markdown/docs/button/mod.md
@@ -138,9 +138,7 @@ view! {
 
 ```rust demo
 view! {
-    <Space vertical=true>
-        <Button block=true>"Primary"</Button>
-    </Space>
+    <Button block=true>"Primary"</Button>
 }
 ```
 
diff --git a/demo_markdown/docs/input/mod.md b/demo_markdown/docs/input/mod.md
index abc7586..63793a9 100644
--- a/demo_markdown/docs/input/mod.md
+++ b/demo_markdown/docs/input/mod.md
@@ -42,9 +42,7 @@ view! {
 let value = RwSignal::new(String::from("o"));
 
 view! {
-    <Space vertical=true>
-        <Input value disabled=true/>
-    </Space>
+    <Input value disabled=true/>
 }
 ```
 
@@ -62,9 +60,7 @@ view! {
 let value = RwSignal::new(String::from("o"));
 
 view! {
-    <Space vertical=true>
-        <Input value invalid=true/>
-    </Space>
+    <Input value invalid=true/>
 }
 ```
 
diff --git a/demo_markdown/docs/textarea/mod.md b/demo_markdown/docs/textarea/mod.md
index bf8160f..b2a880f 100644
--- a/demo_markdown/docs/textarea/mod.md
+++ b/demo_markdown/docs/textarea/mod.md
@@ -4,9 +4,7 @@
 let value = RwSignal::new(String::from("o"));
 
 view! {
-    <Space vertical=true>
-        <Textarea value placeholder="Textarea"/>
-    </Space>
+    <Textarea value placeholder="Textarea"/>
 }
 ```
 
@@ -16,9 +14,7 @@ view! {
 let value = RwSignal::new(String::from("o"));
 
 view! {
-    <Space vertical=true>
-        <Textarea value disabled=true/>
-    </Space>
+    <Textarea value disabled=true/>
 }
 ```
 
diff --git a/demo_markdown/docs/upload/mod.md b/demo_markdown/docs/upload/mod.md
index ad4ef07..a871566 100644
--- a/demo_markdown/docs/upload/mod.md
+++ b/demo_markdown/docs/upload/mod.md
@@ -26,13 +26,13 @@ view!{
 ```rust demo
 use send_wrapper::SendWrapper;
 
-let message = use_message();
+// let message = use_message();
 let custom_request = move |file_list: SendWrapper<FileList>| {
-    message.create(
-        format!("Number of uploaded files: {}", file_list.length()),
-        MessageVariant::Success,
-        Default::default(),
-    );
+    // message.create(
+    //     format!("Number of uploaded files: {}", file_list.length()),
+    //     MessageVariant::Success,
+    //     Default::default(),
+    // );
 };
 
 view! {
diff --git a/thaw/src/auto_complete/auto_complete_option.rs b/thaw/src/auto_complete/auto_complete_option.rs
index 1f98221..113b7f0 100644
--- a/thaw/src/auto_complete/auto_complete_option.rs
+++ b/thaw/src/auto_complete/auto_complete_option.rs
@@ -5,7 +5,7 @@ use leptos::prelude::*;
 pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
     let value = key.clone();
     let auto_complete = AutoCompleteInjection::use_();
-    let is_selected = Memo::new(move |_| auto_complete.is_selected(&key));
+    // let is_selected = Memo::new(move |_| auto_complete.is_selected(&key));
 
     view! {
         <div
diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs
index d4adc6f..3bdf597 100644
--- a/thaw/src/lib.rs
+++ b/thaw/src/lib.rs
@@ -23,7 +23,6 @@ mod image;
 mod input;
 mod layout;
 mod loading_bar;
-mod message;
 mod message_bar;
 mod nav;
 mod popover;
@@ -71,7 +70,6 @@ pub use image::*;
 pub use input::*;
 pub use layout::*;
 pub use loading_bar::*;
-pub use message::*;
 pub use message_bar::*;
 pub use nav::*;
 pub use popover::*;
diff --git a/thaw/src/space/mod.rs b/thaw/src/space/mod.rs
index 12e03d6..44a07f0 100644
--- a/thaw/src/space/mod.rs
+++ b/thaw/src/space/mod.rs
@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
+use thaw_utils::{class_list, mount_style, OptionalMaybeSignal};
 
 #[derive(Default)]
 pub enum SpaceGap {
@@ -18,8 +18,8 @@ pub fn Space(
     #[prop(optional)] vertical: bool,
     #[prop(optional, into)] align: OptionalMaybeSignal<SpaceAlign>,
     #[prop(optional, into)] justify: OptionalMaybeSignal<SpaceJustify>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
-    children: Children,
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: ChildrenFragment,
 ) -> impl IntoView {
     mount_style("space", include_str!("./space.css"));
     let gap = match gap {
@@ -30,27 +30,25 @@ pub fn Space(
         SpaceGap::WH(width, height) => format!("{width}px {height}px"),
     };
 
-    children()
+    view! {
+        <div
+            class=class_list!["thaw-space", class]
+            style:gap=gap
+            style:align-items=move || align.get().map(|a| a.as_str()).unwrap_or_default()
+            style:justify-content=move || justify.get().map(|j| j.as_str()).unwrap_or_default()
+            style:flex-direction=if vertical { "column" } else { "row" }
+        >
 
-    // view! {
-    //     <div
-    //         class=class_list!["thaw-space", class.map(| c | move || c.get())]
-    //         style:gap=gap
-    //         style:align-items=move || align.get().map(|a| a.as_str())
-    //         style:justify-content=move || justify.get().map(|j| j.as_str())
-    //         style:flex-direction=if vertical { "column" } else { "row" }
-    //     >
+            {children()
+                .nodes
+                .into_iter()
+                .map(|node| {
+                    view! { <div class="thaw-space__item">{node}</div> }
+                })
+                .collect_view()}
 
-    //         // {children()
-    //         //     .nodes
-    //         //     .into_iter()
-    //         //     .map(|node| {
-    //         //         view! { <div class="thaw-space__item">{node}</div> }
-    //         //     })
-    //         //     .collect::<Vec<_>>()}
-
-    //     </div>
-    // }
+        </div>
+    }
 }
 
 #[derive(Clone)]
@@ -104,3 +102,18 @@ impl SpaceJustify {
         }
     }
 }
+
+#[cfg(test)]
+mod test {
+    fn main() {
+        use leptos::prelude::*;
+        use super::Space;
+
+        view! {
+            <Space>
+                <p></p>
+                <p></p>
+            </Space>
+        };
+    }
+}
\ No newline at end of file
diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs
index e273cd2..43f2e64 100644
--- a/thaw/src/tag/mod.rs
+++ b/thaw/src/tag/mod.rs
@@ -1,4 +1,3 @@
-use crate::Icon;
 use leptos::{either::Either, ev, prelude::*};
 use send_wrapper::SendWrapper;
 use thaw_utils::{class_list, mount_style, OptionalProp};
diff --git a/thaw_components/src/css_transition/mod.rs b/thaw_components/src/css_transition/mod.rs
index 8835234..3834386 100644
--- a/thaw_components/src/css_transition/mod.rs
+++ b/thaw_components/src/css_transition/mod.rs
@@ -1,6 +1,5 @@
 use leptos::{ev, html::ElementType, prelude::*};
 use std::{ops::Deref, time::Duration};
-use tachys::view::any_view::AnyView;
 use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame};
 use web_sys::wasm_bindgen::JsCast;
 
@@ -196,7 +195,7 @@ where
         };
 
         let name = name.clone();
-        RenderEffect::new(move |prev: Option<bool>| {
+        let _ = RenderEffect::new(move |prev: Option<bool>| {
             let show = show.get();
             let prev = if let Some(prev) = prev {
                 prev
diff --git a/thaw_utils/src/class_list.rs b/thaw_utils/src/class_list.rs
index 9b74474..3d1ffbf 100644
--- a/thaw_utils/src/class_list.rs
+++ b/thaw_utils/src/class_list.rs
@@ -33,7 +33,7 @@ impl ClassList {
                     });
                 }
                 #[cfg(not(feature = "ssr"))]
-                RenderEffect::new(move |old_name| {
+                let _ = RenderEffect::new(move |old_name| {
                     let name = f();
                     if let Some(old_name) = old_name {
                         if old_name != name {
@@ -60,7 +60,7 @@ impl ClassList {
                     }
                 }
                 #[cfg(not(feature = "ssr"))]
-                RenderEffect::new(move |old_name| {
+                let _ = RenderEffect::new(move |old_name| {
                     let name = f();
                     if let Some(old_name) = old_name {
                         if old_name != name {
@@ -99,7 +99,7 @@ impl ClassList {
                     });
                 }
                 #[cfg(not(feature = "ssr"))]
-                RenderEffect::new(move |old| {
+                let _ = RenderEffect::new(move |old| {
                     let name = name.clone();
                     let new = f();
                     if old.is_none() {
diff --git a/thaw_utils/src/hooks/use_lock_html_scroll.rs b/thaw_utils/src/hooks/use_lock_html_scroll.rs
index cd67f7e..3e81714 100644
--- a/thaw_utils/src/hooks/use_lock_html_scroll.rs
+++ b/thaw_utils/src/hooks/use_lock_html_scroll.rs
@@ -19,7 +19,7 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
             });
         };
 
-        RenderEffect::new(move |_| {
+        let _ = RenderEffect::new(move |_| {
             if is_lock.get() {
                 let head = document().head().expect("head no exist");
                 let style = document()