From 5188f95704cc331be52fa3f80e233e4eaffcc8ef Mon Sep 17 00:00:00 2001 From: luoxiao Date: Mon, 8 Jul 2024 00:04:07 +0800 Subject: [PATCH] feat(lepots-v0.7): demo Guide page --- demo/src/app.rs | 132 +++++++++---------- demo/src/components/site_header.rs | 195 ++++++++++++++-------------- demo/src/lib.rs | 2 +- demo/src/main.rs | 2 +- demo/src/pages/components.rs | 4 +- demo/src/pages/mod.rs | 8 +- demo_markdown/docs/space/mod.md | 12 +- demo_markdown/src/lib.rs | 40 +++--- thaw/src/tag/mod.rs | 5 +- thaw/src/text/mod.rs | 36 ++--- thaw_components/src/teleport/mod.rs | 15 ++- 11 files changed, 230 insertions(+), 221 deletions(-) diff --git a/demo/src/app.rs b/demo/src/app.rs index cc411cd..21e78bf 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -2,7 +2,7 @@ use crate::pages::*; use leptos::{prelude::*, reactive_graph::wrappers::write::SignalSetter}; use leptos_meta::provide_meta_context; use leptos_router::{ - components::{Route, Router, Routes}, + components::{ParentRoute, Route, Router, Routes}, StaticSegment, }; // use leptos_use::{ @@ -20,7 +20,7 @@ pub fn App() -> impl IntoView { provide_meta_context(); view! { - + @@ -30,75 +30,75 @@ pub fn App() -> impl IntoView { #[component] fn TheRouter(is_routing: RwSignal) -> impl IntoView { - // let loading_bar = use_loading_bar(); - // _ = is_routing.watch(move |is_routing| { - // if *is_routing { - // loading_bar.start(); - // } else { - // loading_bar.finish(); - // } - // }); + let loading_bar = use_loading_bar(); + _ = is_routing.watch(move |is_routing| { + if *is_routing { + loading_bar.start(); + } else { + loading_bar.finish(); + } + }); view! { - // - // - // - // - // - // - // - // + + + + + + + + // // // // // // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // // - // - // - // - // - // - // // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // + // + // + // + // + // + // + // + + + + + + + + + + + + + // + // + // + // + // + // + // + // + // + // + // + // // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // // // @@ -114,9 +114,9 @@ fn TheProvider(children: Children) -> impl IntoView { view! { // - // + {children()} - // + // } diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs index e53e721..28e69a0 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::("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::("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,85 +130,86 @@ pub fn SiteHeader() -> impl IntoView { } " - - - -
"Thaw UI"
- - - - - {option.label} - - - - - - - - - - + // + // - + + - - + + - - + + diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index f2e1252..8c303fe 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -54,26 +54,26 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt "LayoutMdPage" => "../docs/layout/mod.md", "LoadingBarMdPage" => "../docs/loading_bar/mod.md", // "MessageMdPage" => "../docs/message/mod.md", - "MessageBarMdPage" => "../docs/message_bar/mod.md", - "PopoverMdPage" => "../docs/popover/mod.md", - "ProgressBarMdPage" => "../docs/progress_bar/mod.md", - "RadioMdPage" => "../docs/radio/mod.md", - "ScrollbarMdPage" => "../docs/scrollbar/mod.md", - // "SelectMdPage" => "../docs/select/mod.md", - "SkeletonMdPage" => "../docs/skeleton/mod.md", - "SliderMdPage" => "../docs/slider/mod.md", - "SpaceMdPage" => "../docs/space/mod.md", - "SpinButtonMdPage" => "../docs/spin_button/mod.md", - "SpinnerMdPage" => "../docs/spinner/mod.md", - "SwitchMdPage" => "../docs/switch/mod.md", - "TabListMdPage" => "../docs/tab_list/mod.md", - "TableMdPage" => "../docs/table/mod.md", - "TagMdPage" => "../docs/tag/mod.md", - "TextareaMdPage" => "../docs/textarea/mod.md", - "TimePickerMdPage" => "../docs/time_picker/mod.md", - "TextMdPage" => "../docs/text/mod.md", - "ToastMdPage" => "../docs/toast/mod.md", - "UploadMdPage" => "../docs/upload/mod.md" + "MessageBarMdPage" => "../docs/message_bar/mod.md" + // "PopoverMdPage" => "../docs/popover/mod.md", + // "ProgressBarMdPage" => "../docs/progress_bar/mod.md", + // "RadioMdPage" => "../docs/radio/mod.md", + // "ScrollbarMdPage" => "../docs/scrollbar/mod.md", + // // "SelectMdPage" => "../docs/select/mod.md", + // "SkeletonMdPage" => "../docs/skeleton/mod.md", + // "SliderMdPage" => "../docs/slider/mod.md", + // "SpaceMdPage" => "../docs/space/mod.md", + // "SpinButtonMdPage" => "../docs/spin_button/mod.md", + // "SpinnerMdPage" => "../docs/spinner/mod.md", + // "SwitchMdPage" => "../docs/switch/mod.md", + // "TabListMdPage" => "../docs/tab_list/mod.md", + // "TableMdPage" => "../docs/table/mod.md", + // "TagMdPage" => "../docs/tag/mod.md", + // "TextareaMdPage" => "../docs/textarea/mod.md", + // "TimePickerMdPage" => "../docs/time_picker/mod.md", + // "TextMdPage" => "../docs/text/mod.md", + // "ToastMdPage" => "../docs/toast/mod.md", + // "UploadMdPage" => "../docs/upload/mod.md" }; let mut fn_list = vec![]; diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs index add69dd..dc98f64 100644 --- a/thaw/src/tag/mod.rs +++ b/thaw/src/tag/mod.rs @@ -1,6 +1,7 @@ use crate::Icon; use leptos::{ev, prelude::*}; use thaw_utils::{class_list, mount_style, OptionalProp}; +use send_wrapper::SendWrapper; #[derive(Clone, Copy, Default, PartialEq, Eq, Hash)] pub enum TagVariant { @@ -16,7 +17,7 @@ pub fn Tag( #[prop(optional, into)] variant: MaybeSignal, #[prop(optional, into)] class: OptionalProp>, #[prop(optional, into)] closable: MaybeSignal, - #[prop(optional, into)] on_close: Option>, + #[prop(optional, into)] on_close: Option>>, children: Children, ) -> impl IntoView { mount_style("tag", include_str!("./tag.css")); @@ -25,7 +26,7 @@ pub fn Tag( let Some(callback) = on_close.as_ref() else { return; }; - callback.call(event); + callback.call(SendWrapper::new(event)); }; view! { diff --git a/thaw/src/text/mod.rs b/thaw/src/text/mod.rs index 9bb6ef3..0293446 100644 --- a/thaw/src/text/mod.rs +++ b/thaw/src/text/mod.rs @@ -4,6 +4,7 @@ use thaw_utils::{class_list, mount_style}; #[component] pub fn Caption1( #[prop(optional, into)] class: MaybeProp, + #[prop(optional, into)] style: MaybeProp, #[prop(optional)] tag: TextTag, children: Children, ) -> impl IntoView { @@ -11,13 +12,14 @@ pub fn Caption1( Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default())); view! { - + } } #[component] pub fn Caption1Strong( #[prop(optional, into)] class: MaybeProp, + #[prop(optional, into)] style: MaybeProp, #[prop(optional)] tag: TextTag, children: Children, ) -> impl IntoView { @@ -26,26 +28,28 @@ pub fn Caption1Strong( }); view! { - + } } #[component] pub fn Body1( #[prop(optional, into)] class: MaybeProp, + #[prop(optional, into)] style: MaybeProp, #[prop(optional)] tag: TextTag, children: Children, ) -> impl IntoView { let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default())); view! { - + } } #[component] pub fn Text( #[prop(optional, into)] class: MaybeProp, + #[prop(optional, into)] style: MaybeProp, #[prop(optional)] tag: TextTag, #[prop(optional)] code: bool, children: Children, @@ -54,79 +58,79 @@ pub fn Text( match tag { TextTag::B => view! { - + {children()} } .into_any(), TextTag::Em => view! { - + {children()} } .into_any(), TextTag::H1 => view! { -

+

{children()}

} .into_any(), TextTag::H2 => view! { -

+

{children()}

} .into_any(), TextTag::H3 => view! { -

+

{children()}

} .into_any(), TextTag::H4 => view! { -

+

{children()}

} .into_any(), TextTag::H5 => view! { -
+
{children()}
} .into_any(), TextTag::H6 => view! { -
+
{children()}
} .into_any(), TextTag::I => view! { - + {children()} } .into_any(), TextTag::P => view! { -

+

{children()}

} .into_any(), TextTag::Pre => view! { - 
+            
                 {children()}
             

         }
         .into_any(),
         TextTag::Span => view! {
-            
+            
                 {children()}
             
         }
         .into_any(),
         TextTag::Strong => view! {
-            
+            
                 {children()}
             
         }
diff --git a/thaw_components/src/teleport/mod.rs b/thaw_components/src/teleport/mod.rs
index dcf6862..06dacdd 100644
--- a/thaw_components/src/teleport/mod.rs
+++ b/thaw_components/src/teleport/mod.rs
@@ -58,12 +58,15 @@ pub fn Teleport(
     let owner = Owner::current().unwrap();
     Effect::new(move |_| {
         if immediate.get() {
-            mount_fn.update_value(|mount_fn| {
-                if let Some(f) = mount_fn.take() {
-                    owner.with(|| {
-                        f();
-                    });
-                }
+            let Some(f) = mount_fn
+                .try_update_value(|mount_fn| mount_fn.take())
+                .flatten()
+            else {
+                return;
+            };
+
+            owner.with(|| {
+                f();
             });
         }
     });