adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(lepots-v0.7): demo Guide page

Browse source
This commit is contained in:
luoxiao 2024-07-08 00:04:07 +08:00 • committed by luoxiaozero
parent 74be938fbc
commit 5188f95704
11 changed files with 230 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
demo/src/app.rs
View file

@ -2,7 +2,7 @@ use crate::pages::*;
use leptos::{prelude::*, reactive_graph::wrappers::write::SignalSetter}; use leptos::{prelude::*, reactive_graph::wrappers::write::SignalSetter};
use leptos_meta::provide_meta_context; use leptos_meta::provide_meta_context;
use leptos_router::{ use leptos_router::{
components::{Route, Router, Routes}, components::{ParentRoute, Route, Router, Routes},
StaticSegment, StaticSegment,
}; };
// use leptos_use::{ // use leptos_use::{
@ -20,7 +20,7 @@ pub fn App() -> impl IntoView {
provide_meta_context(); provide_meta_context();
view! { view! {
<Router set_is_routing> <Router set_is_routing>
<TheProvider> <TheProvider>
<TheRouter is_routing/> <TheRouter is_routing/>
</TheProvider> </TheProvider>
@ -30,75 +30,75 @@ pub fn App() -> impl IntoView {
#[component] #[component]
fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView { fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
// let loading_bar = use_loading_bar(); let loading_bar = use_loading_bar();
// _ = is_routing.watch(move |is_routing| { _ = is_routing.watch(move |is_routing| {
// if *is_routing { if *is_routing {
// loading_bar.start(); loading_bar.start();
// } else { } else {
// loading_bar.finish(); loading_bar.finish();
// } }
// }); });
view! { view! {
<Routes fallback=|| "404"> <Routes fallback=|| "404">
<Route path=StaticSegment("") view=Home/> <Route path=StaticSegment("") view=Home/>
// <Route path="/guide" view=ComponentsPage> <ParentRoute path=StaticSegment("guide") view=ComponentsPage>
// <Route path="/installation" view=InstallationMdPage/> <Route path=StaticSegment("installation") view=InstallationMdPage/>
// <Route path="/usage" view=UsageMdPage/> <Route path=StaticSegment("usage") view=UsageMdPage/>
// <Route path="/server-sider-rendering" view=ServerSiderRenderingMdPage/> <Route path=StaticSegment("server-sider-rendering") view=ServerSiderRenderingMdPage/>
// <Route path="/development/guide" view=DevelopmentGuideMdPage/> <Route path=(StaticSegment("development"), StaticSegment("guide")) view=DevelopmentGuideMdPage/>
// <Route path="/development/components" view=DevelopmentComponentsMdPage/> <Route path=(StaticSegment("development"), StaticSegment("components")) view=DevelopmentComponentsMdPage/>
// </Route> </ParentRoute>
// <Route path="/components" view=ComponentsPage> <ParentRoute path=StaticSegment("components") view=ComponentsPage>
// // <Route path="/tabbar" view=TabbarPage/> // // <Route path="/tabbar" view=TabbarPage/>
// // <Route path="/nav-bar" view=NavBarPage/> // // <Route path="/nav-bar" view=NavBarPage/>
// // <Route path="/toast" view=ToastPage/> // // <Route path="/toast" view=ToastPage/>
// <Route path="/accordion" view=AccordionMdPage/> // <Route path=StaticSegment("accordion") view=AccordionMdPage/>
// <Route path="/anchor" view=AnchorMdPage/> // <Route path=StaticSegment("anchor") view=AnchorMdPage/>
// <Route path="/auto-complete" view=AutoCompleteMdPage/> // <Route path=StaticSegment("auto-complete") view=AutoCompleteMdPage/>
// <Route path="/avatar" view=AvatarMdPage/> // <Route path=StaticSegment("avatar") view=AvatarMdPage/>
// <Route path="/back-top" view=BackTopMdPage/> // <Route path=StaticSegment("back-top") view=BackTopMdPage/>
// <Route path="/badge" view=BadgeMdPage/> // <Route path=StaticSegment("badge") view=BadgeMdPage/>
// <Route path="/breadcrumb" view=BreadcrumbMdPage/> // <Route path=StaticSegment("breadcrumb") view=BreadcrumbMdPage/>
// <Route path="/button" view=ButtonMdPage/> <Route path=StaticSegment("button") view=ButtonMdPage/>
// <Route path="/calendar" view=CalendarMdPage/> <Route path=StaticSegment("calendar") view=CalendarMdPage/>
// <Route path="/card" view=CardMdPage/> <Route path=StaticSegment("card") view=CardMdPage/>
// <Route path="/checkbox" view=CheckboxMdPage/> <Route path=StaticSegment("checkbox") view=CheckboxMdPage/>
// <Route path="/color-picker" view=ColorPickerMdPage/> <Route path=StaticSegment("color-picker") view=ColorPickerMdPage/>
// <Route path="/combobox" view=ComboboxMdPage/> <Route path=StaticSegment("combobox") view=ComboboxMdPage/>
// <Route path="/config-provider" view=ConfigProviderMdPage/> <Route path=StaticSegment("config-provider") view=ConfigProviderMdPage/>
// <Route path="/date-picker" view=DatePickerMdPage/> <Route path=StaticSegment("date-picker") view=DatePickerMdPage/>
// <Route path="/dialog" view=DialogMdPage/> <Route path=StaticSegment("dialog") view=DialogMdPage/>
// <Route path="/divider" view=DividerMdPage/> <Route path=StaticSegment("divider") view=DividerMdPage/>
// <Route path="/drawer" view=DrawerMdPage/> <Route path=StaticSegment("drawer") view=DrawerMdPage/>
// <Route path="/grid" view=GridMdPage/> <Route path=StaticSegment("grid") view=GridMdPage/>
// <Route path="/icon" view=IconMdPage/> // <Route path=StaticSegment("icon") view=IconMdPage/>
// <Route path="/image" view=ImageMdPage/> // <Route path=StaticSegment("image") view=ImageMdPage/>
// <Route path="/input" view=InputMdPage/> // <Route path=StaticSegment("input") view=InputMdPage/>
// <Route path="/layout" view=LayoutMdPage/> // <Route path=StaticSegment("layout") view=LayoutMdPage/>
// <Route path="/loading-bar" view=LoadingBarMdPage/> // <Route path=StaticSegment("loading-bar") view=LoadingBarMdPage/>
// // <Route path="/message" view=MessageMdPage/> // <Route path="/message" view=MessageMdPage/>
// <Route path="/message-bar" view=MessageBarMdPage/> // <Route path=StaticSegment("message-bar") view=MessageBarMdPage/>
// <Route path="/popover" view=PopoverMdPage/> // <Route path=StaticSegment("popover") view=PopoverMdPage/>
// <Route path="/progress-bar" view=ProgressBarMdPage/> // <Route path=StaticSegment("progress-bar") view=ProgressBarMdPage/>
// <Route path="/radio" view=RadioMdPage/> // <Route path=StaticSegment("radio") view=RadioMdPage/>
// <Route path="/scrollbar" view=ScrollbarMdPage/> // <Route path=StaticSegment("scrollbar") view=ScrollbarMdPage/>
// // <Route path="/select" view=SelectMdPage/> // // <Route path="/select" view=SelectMdPage/>
// <Route path="/skeleton" view=SkeletonMdPage/> // <Route path=StaticSegment("skeleton") view=SkeletonMdPage/>
// <Route path="/slider" view=SliderMdPage/> // <Route path=StaticSegment("slider") view=SliderMdPage/>
// <Route path="/space" view=SpaceMdPage/> // <Route path=StaticSegment("space") view=SpaceMdPage/>
// <Route path="/spin-button" view=SpinButtonMdPage/> // <Route path=StaticSegment("spin-button") view=SpinButtonMdPage/>
// <Route path="/spinner" view=SpinnerMdPage/> // <Route path=StaticSegment("spinner") view=SpinnerMdPage/>
// <Route path="/switch" view=SwitchMdPage/> // <Route path=StaticSegment("switch") view=SwitchMdPage/>
// <Route path="/tab-list" view=TabListMdPage/> // <Route path=StaticSegment("tab-list") view=TabListMdPage/>
// <Route path="/table" view=TableMdPage/> // <Route path=StaticSegment("table") view=TableMdPage/>
// <Route path="/tag" view=TagMdPage/> // <Route path=StaticSegment("tag") view=TagMdPage/>
// <Route path="/text" view=TextMdPage/> // <Route path=StaticSegment("text") view=TextMdPage/>
// <Route path="/textarea" view=TextareaMdPage/> // <Route path=StaticSegment("textarea") view=TextareaMdPage/>
// <Route path="/time-picker" view=TimePickerMdPage/> // <Route path=StaticSegment("time-picker") view=TimePickerMdPage/>
// <Route path="/toast" view=ToastMdPage /> // <Route path=StaticSegment("toast") view=ToastMdPage />
// <Route path="/upload" view=UploadMdPage/> // <Route path=StaticSegment("upload") view=UploadMdPage/>
// </Route> </ParentRoute>
// <Route path="/mobile/tabbar" view=TabbarDemoPage/> // <Route path="/mobile/tabbar" view=TabbarDemoPage/>
// <Route path="/mobile/nav-bar" view=NavBarDemoPage/> // <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
// <Route path="/mobile/toast" view=ToastDemoPage/> // <Route path="/mobile/toast" view=ToastDemoPage/>
@ -114,9 +114,9 @@ fn TheProvider(children: Children) -> impl IntoView {
view! { view! {
<ConfigProvider> <ConfigProvider>
// <ToasterProvider> // <ToasterProvider>
// <LoadingBarProvider> <LoadingBarProvider>
{children()} {children()}
// </LoadingBarProvider> </LoadingBarProvider>
// </ToasterProvider> // </ToasterProvider>
</ConfigProvider> </ConfigProvider>
} }

195
demo/src/components/site_header.rs
View file

@ -7,26 +7,26 @@ use thaw::*;
#[component] #[component]
pub fn SiteHeader() -> impl IntoView { pub fn SiteHeader() -> impl IntoView {
let theme = Theme::use_rw_theme(); // let theme = Theme::use_rw_theme();
let theme_name = Memo::new(move |_| { // let theme_name = Memo::new(move |_| {
theme.with(|theme| { // theme.with(|theme| {
if theme.name == *"light" { // if theme.name == *"light" {
"Dark".to_string() // "Dark".to_string()
} else { // } else {
"Light".to_string() // "Light".to_string()
} // }
}) // })
}); // });
// let (_, write_theme, _) = use_local_storage::<String, FromToStringCodec>("theme"); // // let (_, write_theme, _) = use_local_storage::<String, FromToStringCodec>("theme");
let change_theme = Callback::new(move |_| { // let change_theme = Callback::new(move |_| {
if theme_name.get_untracked() == "Light" { // if theme_name.get_untracked() == "Light" {
theme.set(Theme::light()); // theme.set(Theme::light());
// write_theme.set("light".to_string()); // // write_theme.set("light".to_string());
} else { // } else {
theme.set(Theme::dark()); // theme.set(Theme::dark());
// write_theme.set("dark".to_string()); // // write_theme.set("dark".to_string());
} // }
}); // });
let search_value = RwSignal::new(String::new()); let search_value = RwSignal::new(String::new());
let search_all_options = StoredValue::new(gen_search_all_options()); let search_all_options = StoredValue::new(gen_search_all_options());
@ -130,85 +130,86 @@ pub fn SiteHeader() -> impl IntoView {
} }
" "
</Style> </Style>
<LayoutHeader class="demo-header"> <LayoutHeader attr:class="demo-header">
<Space on:click=move |_| { "123"
let navigate = use_navigate(); // <Space on:click=move |_| {
navigate("/", Default::default()); // let navigate = use_navigate();
}> // navigate("/", Default::default());
<img src="/logo.svg" style="width: 36px"/> // }>
<div class="demo-name">"Thaw UI"</div> // <img src="/logo.svg" style="width: 36px"/>
</Space> // <div class="demo-name">"Thaw UI"</div>
<Space> // </Space>
<AutoComplete // <Space>
value=search_value // <AutoComplete
placeholder="Type '/' to search" // value=search_value
clear_after_select=true // placeholder="Type '/' to search"
blur_after_select=true // clear_after_select=true
on_select=on_search_select // blur_after_select=true
comp_ref=auto_complete_ref // 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 each=move || search_options.get() key=|option| option.label.clone() let:option>
</For> // <AutoCompleteOption key=option.value>{option.label}</AutoCompleteOption>
<AutoCompletePrefix slot> // </For>
<Icon // <AutoCompletePrefix slot>
icon=icondata::AiSearchOutlined // <Icon
style="font-size: 18px; color: var(--thaw-placeholder-color);" // icon=icondata::AiSearchOutlined
/> // style="font-size: 18px; color: var(--thaw-placeholder-color);"
</AutoCompletePrefix> // />
</AutoComplete> // </AutoCompletePrefix>
<Popover // </AutoComplete>
placement=PopoverPlacement::BottomEnd // <Popover
class="demo-header__menu-popover-mobile" // placement=PopoverPlacement::BottomEnd
> // class="demo-header__menu-popover-mobile"
<PopoverTrigger slot class="demo-header__menu-mobile"> // >
<Button // <PopoverTrigger slot class="demo-header__menu-mobile">
appearance=ButtonAppearance::Subtle // <Button
icon=icondata::AiUnorderedListOutlined // appearance=ButtonAppearance::Subtle
attr:style="font-size: 22px; padding: 0px 6px;" // icon=icondata::AiUnorderedListOutlined
/> // attr:style="font-size: 22px; padding: 0px 6px;"
</PopoverTrigger> // />
<div style="height: 70vh; overflow: auto;">// <Menu value=menu_value> // </PopoverTrigger>
// <MenuItem key=theme_name label=theme_name /> // <div style="height: 70vh; overflow: auto;">// <Menu value=menu_value>
// <MenuItem key="github" label="Github" /> // // <MenuItem key=theme_name label=theme_name />
// { // // <MenuItem key="github" label="Github" />
// use crate::pages::{gen_guide_menu_data, gen_menu_data}; // // {
// vec![ // // use crate::pages::{gen_guide_menu_data, gen_menu_data};
// gen_guide_menu_data().into_view(), // // vec![
// gen_menu_data().into_view(), // // gen_guide_menu_data().into_view(),
// ] // // gen_menu_data().into_view(),
// } // // ]
// </Menu> // // }
</div> // // </Menu>
</Popover> // </div>
<Space class="demo-header__right-btn" align=SpaceAlign::Center> // </Popover>
<Button // <Space class="demo-header__right-btn" align=SpaceAlign::Center>
appearance=ButtonAppearance::Subtle // <Button
on_click=Callback::new(move |_| change_theme.call(())) // appearance=ButtonAppearance::Subtle
> // on_click=Callback::new(move |_| change_theme.call(()))
{move || theme_name.get()} // >
</Button> // {move || theme_name.get()}
<SwitchVersion/> // </Button>
<Button // <SwitchVersion/>
appearance=ButtonAppearance::Subtle // <Button
icon=icondata::BiDiscordAlt // appearance=ButtonAppearance::Subtle
attr:style="font-size: 22px; padding: 0px 6px;" // icon=icondata::BiDiscordAlt
on_click=move |_| { // attr:style="font-size: 22px; padding: 0px 6px;"
_ = window().open_with_url("https://discord.gg/YPxuprzu6M"); // on_click=move |_| {
} // _ = window().open_with_url("https://discord.gg/YPxuprzu6M");
/> // }
// />
<Button // <Button
appearance=ButtonAppearance::Subtle // appearance=ButtonAppearance::Subtle
icon=icondata::AiGithubOutlined // icon=icondata::AiGithubOutlined
attr:style="font-size: 22px; padding: 0px 6px;" // attr:style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| { // on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw"); // _ = window().open_with_url("http://github.com/thaw-ui/thaw");
} // }
/> // />
</Space> // </Space>
</Space> // </Space>
</LayoutHeader> </LayoutHeader>
} }

2
demo/src/lib.rs
View file

@ -1,5 +1,5 @@
mod app; mod app;
// mod components; mod components;
mod pages; mod pages;
pub use app::App; pub use app::App;

2
demo/src/main.rs
View file

@ -1,5 +1,5 @@
mod app; mod app;
// mod components; mod components;
mod pages; mod pages;
use app::App; use app::App;

4
demo/src/pages/components.rs
View file

@ -61,7 +61,7 @@ pub fn ComponentsPage() -> impl IntoView {
gen_menu_data().into_iter().map(|data| { gen_menu_data().into_iter().map(|data| {
let MenuGroupOption { label, children } = data; let MenuGroupOption { label, children } = data;
view! { view! {
<Caption1Strong attr:style="margin-inline-start: 10px; margin-top: 10px; display: inline-block"> <Caption1Strong style="margin-inline-start: 10px; margin-top: 10px; display: inline-block">
{label} {label}
</Caption1Strong> </Caption1Strong>
{ {
@ -77,7 +77,7 @@ pub fn ComponentsPage() -> impl IntoView {
} }
</NavDrawer> </NavDrawer>
</div> </div>
<Layout content_style="padding: 8px 12px 28px; display: flex;" class="doc-content"> <Layout content_style="padding: 8px 12px 28px; display: flex;" attr:class="doc-content">
<Outlet/> <Outlet/>
</Layout> </Layout>
</Layout> </Layout>

8
demo/src/pages/mod.rs
View file

@ -1,14 +1,14 @@
// mod components; mod components;
mod home; mod home;
// mod markdown; mod markdown;
// mod mobile; // mod mobile;
// mod nav_bar; // mod nav_bar;
// mod tabbar; // mod tabbar;
// mod toast; // mod toast;
// pub use components::*; pub use components::*;
pub use home::*; pub use home::*;
// pub use markdown::*; pub use markdown::*;
// pub use mobile::*; // pub use mobile::*;
// pub use nav_bar::*; // pub use nav_bar::*;
// pub use tabbar::*; // pub use tabbar::*;

12
demo_markdown/docs/space/mod.md
View file

@ -45,18 +45,18 @@ view! {
view! { view! {
<Space vertical=true> <Space vertical=true>
<Space align=SpaceAlign::Start> <Space align=SpaceAlign::Start>
<Button style="height: 60px">"Start"</Button> <Button attr:style="height: 60px">"Start"</Button>
<Button style="height: 40px">"Start"</Button> <Button attr:style="height: 40px">"Start"</Button>
<Button>"Start"</Button> <Button>"Start"</Button>
</Space> </Space>
<Space align=SpaceAlign::Center> <Space align=SpaceAlign::Center>
<Button style="height: 60px">"Center"</Button> <Button attr:style="height: 60px">"Center"</Button>
<Button style="height: 40px">"Center"</Button> <Button attr:style="height: 40px">"Center"</Button>
<Button>"Center"</Button> <Button>"Center"</Button>
</Space> </Space>
<Space align=SpaceAlign::End> <Space align=SpaceAlign::End>
<Button style="height: 60px">"End"</Button> <Button attr:style="height: 60px">"End"</Button>
<Button style="height: 40px">"End"</Button> <Button attr:style="height: 40px">"End"</Button>
<Button>"End"</Button> <Button>"End"</Button>
</Space> </Space>
</Space> </Space>

40
demo_markdown/src/lib.rs
View file

@ -54,26 +54,26 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"LayoutMdPage" => "../docs/layout/mod.md", "LayoutMdPage" => "../docs/layout/mod.md",
"LoadingBarMdPage" => "../docs/loading_bar/mod.md", "LoadingBarMdPage" => "../docs/loading_bar/mod.md",
// "MessageMdPage" => "../docs/message/mod.md", // "MessageMdPage" => "../docs/message/mod.md",
"MessageBarMdPage" => "../docs/message_bar/mod.md", "MessageBarMdPage" => "../docs/message_bar/mod.md"
"PopoverMdPage" => "../docs/popover/mod.md", // "PopoverMdPage" => "../docs/popover/mod.md",
"ProgressBarMdPage" => "../docs/progress_bar/mod.md", // "ProgressBarMdPage" => "../docs/progress_bar/mod.md",
"RadioMdPage" => "../docs/radio/mod.md", // "RadioMdPage" => "../docs/radio/mod.md",
"ScrollbarMdPage" => "../docs/scrollbar/mod.md", // "ScrollbarMdPage" => "../docs/scrollbar/mod.md",
// "SelectMdPage" => "../docs/select/mod.md", // // "SelectMdPage" => "../docs/select/mod.md",
"SkeletonMdPage" => "../docs/skeleton/mod.md", // "SkeletonMdPage" => "../docs/skeleton/mod.md",
"SliderMdPage" => "../docs/slider/mod.md", // "SliderMdPage" => "../docs/slider/mod.md",
"SpaceMdPage" => "../docs/space/mod.md", // "SpaceMdPage" => "../docs/space/mod.md",
"SpinButtonMdPage" => "../docs/spin_button/mod.md", // "SpinButtonMdPage" => "../docs/spin_button/mod.md",
"SpinnerMdPage" => "../docs/spinner/mod.md", // "SpinnerMdPage" => "../docs/spinner/mod.md",
"SwitchMdPage" => "../docs/switch/mod.md", // "SwitchMdPage" => "../docs/switch/mod.md",
"TabListMdPage" => "../docs/tab_list/mod.md", // "TabListMdPage" => "../docs/tab_list/mod.md",
"TableMdPage" => "../docs/table/mod.md", // "TableMdPage" => "../docs/table/mod.md",
"TagMdPage" => "../docs/tag/mod.md", // "TagMdPage" => "../docs/tag/mod.md",
"TextareaMdPage" => "../docs/textarea/mod.md", // "TextareaMdPage" => "../docs/textarea/mod.md",
"TimePickerMdPage" => "../docs/time_picker/mod.md", // "TimePickerMdPage" => "../docs/time_picker/mod.md",
"TextMdPage" => "../docs/text/mod.md", // "TextMdPage" => "../docs/text/mod.md",
"ToastMdPage" => "../docs/toast/mod.md", // "ToastMdPage" => "../docs/toast/mod.md",
"UploadMdPage" => "../docs/upload/mod.md" // "UploadMdPage" => "../docs/upload/mod.md"
}; };
let mut fn_list = vec![]; let mut fn_list = vec![];

5
thaw/src/tag/mod.rs
View file

@ -1,6 +1,7 @@
use crate::Icon; use crate::Icon;
use leptos::{ev, prelude::*}; use leptos::{ev, prelude::*};
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalProp};
use send_wrapper::SendWrapper;
#[derive(Clone, Copy, Default, PartialEq, Eq, Hash)] #[derive(Clone, Copy, Default, PartialEq, Eq, Hash)]
pub enum TagVariant { pub enum TagVariant {
@ -16,7 +17,7 @@ pub fn Tag(
#[prop(optional, into)] variant: MaybeSignal<TagVariant>, #[prop(optional, into)] variant: MaybeSignal<TagVariant>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>, #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] closable: MaybeSignal<bool>, #[prop(optional, into)] closable: MaybeSignal<bool>,
#[prop(optional, into)] on_close: Option<Callback<ev::MouseEvent>>, #[prop(optional, into)] on_close: Option<Callback<SendWrapper<ev::MouseEvent>>>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("tag", include_str!("./tag.css")); mount_style("tag", include_str!("./tag.css"));
@ -25,7 +26,7 @@ pub fn Tag(
let Some(callback) = on_close.as_ref() else { let Some(callback) = on_close.as_ref() else {
return; return;
}; };
callback.call(event); callback.call(SendWrapper::new(event));
}; };
view! { view! {

36
thaw/src/text/mod.rs
View file

@ -4,6 +4,7 @@ use thaw_utils::{class_list, mount_style};
#[component] #[component]
pub fn Caption1( pub fn Caption1(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag, #[prop(optional)] tag: TextTag,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
@ -11,13 +12,14 @@ pub fn Caption1(
Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default())); Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default()));
view! { view! {
<Text tag children class/> <Text tag children class style/>
} }
} }
#[component] #[component]
pub fn Caption1Strong( pub fn Caption1Strong(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag, #[prop(optional)] tag: TextTag,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
@ -26,26 +28,28 @@ pub fn Caption1Strong(
}); });
view! { view! {
<Text tag children class/> <Text tag children class style/>
} }
} }
#[component] #[component]
pub fn Body1( pub fn Body1(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag, #[prop(optional)] tag: TextTag,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default())); let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default()));
view! { view! {
<Text tag children class/> <Text tag children class style/>
} }
} }
#[component] #[component]
pub fn Text( pub fn Text(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag, #[prop(optional)] tag: TextTag,
#[prop(optional)] code: bool, #[prop(optional)] code: bool,
children: Children, children: Children,
@ -54,79 +58,79 @@ pub fn Text(
match tag { match tag {
TextTag::B => view! { TextTag::B => view! {
<b class=class_list!["thaw-text", class]> <b class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</b> </b>
} }
.into_any(), .into_any(),
TextTag::Em => view! { TextTag::Em => view! {
<em class=class_list!["thaw-text", class]> <em class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</em> </em>
} }
.into_any(), .into_any(),
TextTag::H1 => view! { TextTag::H1 => view! {
<h1 class=class_list!["thaw-text", class]> <h1 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</h1> </h1>
} }
.into_any(), .into_any(),
TextTag::H2 => view! { TextTag::H2 => view! {
<h2 class=class_list!["thaw-text", class]> <h2 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</h2> </h2>
} }
.into_any(), .into_any(),
TextTag::H3 => view! { TextTag::H3 => view! {
<h3 class=class_list!["thaw-text", class]> <h3 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</h3> </h3>
} }
.into_any(), .into_any(),
TextTag::H4 => view! { TextTag::H4 => view! {
<h4 class=class_list!["thaw-text", class]> <h4 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</h4> </h4>
} }
.into_any(), .into_any(),
TextTag::H5 => view! { TextTag::H5 => view! {
<h5 class=class_list!["thaw-text", class]> <h5 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</h5> </h5>
} }
.into_any(), .into_any(),
TextTag::H6 => view! { TextTag::H6 => view! {
<h6 class=class_list!["thaw-text", class]> <h6 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</h6> </h6>
} }
.into_any(), .into_any(),
TextTag::I => view! { TextTag::I => view! {
<i class=class_list!["thaw-text", class]> <i class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</i> </i>
} }
.into_any(), .into_any(),
TextTag::P => view! { TextTag::P => view! {
<p class=class_list!["thaw-text", class]> <p class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</p> </p>
} }
.into_any(), .into_any(),
TextTag::Pre => view! { TextTag::Pre => view! {
<pre class=class_list!["thaw-text", class]> <pre class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</pre> </pre>
} }
.into_any(), .into_any(),
TextTag::Span => view! { TextTag::Span => view! {
<span class=class_list!["thaw-text", class]> <span class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</span> </span>
} }
.into_any(), .into_any(),
TextTag::Strong => view! { TextTag::Strong => view! {
<strong class=class_list!["thaw-text", class]> <strong class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
{children()} {children()}
</strong> </strong>
} }

15
thaw_components/src/teleport/mod.rs
View file

@ -58,12 +58,15 @@ pub fn Teleport(
let owner = Owner::current().unwrap(); let owner = Owner::current().unwrap();
Effect::new(move |_| { Effect::new(move |_| {
if immediate.get() { if immediate.get() {
mount_fn.update_value(|mount_fn| { let Some(f) = mount_fn
if let Some(f) = mount_fn.take() { .try_update_value(|mount_fn| mount_fn.take())
owner.with(|| { .flatten()
f(); else {
}); return;
} };
owner.with(|| {
f();
}); });
} }
}); });