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

Browse source
This commit is contained in:
luoxiao 2024-07-07 18:33:45 +08:00 • committed by luoxiaozero
parent 41c5a2ea89
commit 48b62a4d07
23 changed files with 220 additions and 222 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
demo/Cargo.toml
View file

@ -7,10 +7,9 @@ edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
leptos = { version = "0.6.10" }
leptos_meta = { version = "0.6.10" }
leptos_router = { version = "0.6.10" }
leptos_devtools = { version = "0.0.1", optional = true }
leptos = { workspace = true }
leptos_meta = { workspace = true }
leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" }
thaw = { path = "../thaw" }
demo_markdown = { path = "../demo_markdown" }
icondata = "0.3.0"
@ -22,15 +21,13 @@ leptos-use = "0.10.10"
[features]
default = ["csr"]
tracing = ["leptos/tracing"]
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr", "thaw/csr"]
csr = ["leptos/csr", "thaw/csr"]
ssr = ["leptos/ssr", "leptos_meta/ssr", "leptos_router/ssr", "thaw/ssr"]
hydrate = [
"leptos/hydrate",
"leptos_meta/hydrate",
"leptos_router/hydrate",
"thaw/hydrate",
]
nightly = ["leptos/nightly", "leptos_meta/nightly", "leptos_router/nightly"]
nightly = ["leptos/nightly", "leptos_router/nightly"]
# https://benw.is/posts/how-i-improved-my-rust-compile-times-by-seventy-five-percent#optimization-level

140
demo/src/app.rs
View file

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

18
demo/src/components/demo.rs
View file

@ -1,4 +1,4 @@
use leptos::*;
use leptos::prelude::*;
use leptos_meta::Style;
use thaw::*;
@ -6,7 +6,8 @@ use thaw::*;
pub struct DemoCode {
#[prop(default = true)]
is_highlight: bool,
children: Children,
#[prop(into)]
text: String,
}
#[component]
@ -38,16 +39,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -
let is_show_code = RwSignal::new(children.is_none());
let is_highlight = demo_code.is_highlight;
let frag = (demo_code.children)();
let mut html = String::new();
for node in frag.nodes {
match node {
View::Text(text) => html.push_str(&text.content),
_ => {
leptos::logging::warn!("Only text nodes are supported as children of <DemoCode />.")
}
}
}
let html = demo_code.text;
view! {
<Style id="leptos-thaw-syntect-css">
@ -93,7 +85,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -
None
}
}
<div class=move || code_class.get() style:display=move || (!is_show_code.get()).then_some("none")>
<div class=move || code_class.get() style:display=move || (!is_show_code.get()).then_some("none").unwrap_or_default()>
{
if is_highlight {
view! {

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

@ -1,14 +1,14 @@
use super::switch_version::SwitchVersion;
use leptos::*;
use leptos::{prelude::*, ev};
use leptos_meta::Style;
use leptos_router::use_navigate;
use leptos_use::{storage::use_local_storage, utils::FromToStringCodec};
use leptos_router::hooks::use_navigate;
// use leptos_use::{storage::use_local_storage, utils::FromToStringCodec};
use thaw::*;
#[component]
pub fn SiteHeader() -> impl IntoView {
let theme = Theme::use_rw_theme();
let theme_name = create_memo(move |_| {
let theme_name = Memo::new(move |_| {
theme.with(|theme| {
if theme.name == *"light" {
"Dark".to_string()
@ -17,21 +17,21 @@ pub fn SiteHeader() -> impl IntoView {
}
})
});
let (_, write_theme, _) = use_local_storage::<String, FromToStringCodec>("theme");
// 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());
// write_theme.set("light".to_string());
} else {
theme.set(Theme::dark());
write_theme.set("dark".to_string());
// write_theme.set("dark".to_string());
}
});
let search_value = create_rw_signal(String::new());
let search_all_options = store_value(gen_search_all_options());
let search_value = RwSignal::new(String::new());
let search_all_options = StoredValue::new(gen_search_all_options());
let search_options = create_memo(move |_| {
let search_options = Memo::new(move |_| {
let search_value = search_value.get();
if search_value.is_empty() {
return vec![];
@ -69,7 +69,7 @@ pub fn SiteHeader() -> impl IntoView {
let navigate = use_navigate();
navigate(&path, Default::default());
};
let auto_complete_ref = create_component_ref::<AutoCompleteRef>();
let auto_complete_ref = ComponentRef::<AutoCompleteRef>::new();
let handle = window_event_listener(ev::keydown, move |event| {
let key = event.key();
if key == *"/" {
@ -165,7 +165,7 @@ pub fn SiteHeader() -> impl IntoView {
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::AiUnorderedListOutlined
style="font-size: 22px; padding: 0px 6px;"
attr:style="font-size: 22px; padding: 0px 6px;"
/>
</PopoverTrigger>
<div style="height: 70vh; overflow: auto;">// <Menu value=menu_value>
@ -192,7 +192,7 @@ pub fn SiteHeader() -> impl IntoView {
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::BiDiscordAlt
style="font-size: 22px; padding: 0px 6px;"
attr:style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("https://discord.gg/YPxuprzu6M");
}
@ -201,7 +201,7 @@ pub fn SiteHeader() -> impl IntoView {
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::AiGithubOutlined
style="font-size: 22px; padding: 0px 6px;"
attr:style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}

2
demo/src/components/switch_version.rs
View file

@ -1,4 +1,4 @@
use leptos::*;
use leptos::prelude::*;
use thaw::*;
#[component]

2
demo/src/lib.rs
View file

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

6
demo/src/main.rs
View file

@ -1,12 +1,10 @@
mod app;
mod components;
// mod components;
mod pages;
use app::App;
use leptos::*;
use leptos::prelude::*;
fn main() {
#[cfg(feature = "tracing")]
leptos_devtools::devtools!();
mount_to_body(App)
}

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

@ -1,7 +1,10 @@
use crate::components::SiteHeader;
use leptos::*;
use leptos::prelude::*;
use leptos_meta::Style;
use leptos_router::{use_location, use_navigate, Outlet};
use leptos_router::{
components::Outlet,
hooks::{use_location, use_navigate},
};
use thaw::*;
#[component]
@ -9,7 +12,7 @@ pub fn ComponentsPage() -> impl IntoView {
let navigate = use_navigate();
let loaction = use_location();
let select_name = create_rw_signal(String::new());
let select_name = RwSignal::new(String::new());
Effect::new(move |_| {
select_name.set(loaction.pathname.get());
});
@ -51,12 +54,27 @@ pub fn ComponentsPage() -> impl IntoView {
</Style>
<Layout position=LayoutPosition::Absolute>
<SiteHeader/>
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
<Layout has_sider=true position=LayoutPosition::Absolute attr:style="top: 64px;">
<div class="demo-components__sider">
<NavDrawer selected_value=select_name>
{gen_menu_data().into_view()}
{
gen_menu_data().into_iter().map(|data| {
let MenuGroupOption { label, children } = data;
view! {
<Caption1Strong attr:style="margin-inline-start: 10px; margin-top: 10px; display: inline-block">
{label}
</Caption1Strong>
{
children.into_iter().map(|item| {
let MenuItemOption { label, value } = item;
view! {
<NavItem value>{label}</NavItem>
}
}).collect_view()
}
}
}).collect_view()
}
</NavDrawer>
</div>
<Layout content_style="padding: 8px 12px 28px; display: flex;" class="doc-content">
@ -72,31 +90,11 @@ pub(crate) struct MenuGroupOption {
pub children: Vec<MenuItemOption>,
}
impl IntoView for MenuGroupOption {
fn into_view(self) -> View {
let Self { label, children } = self;
view! {
<Caption1Strong style="margin-inline-start: 10px; margin-top: 10px; display: inline-block">
{label}
</Caption1Strong>
{children.into_iter().map(|v| v.into_view()).collect_view()}
}
.into_view()
}
}
pub(crate) struct MenuItemOption {
pub label: String,
pub value: String,
}
impl IntoView for MenuItemOption {
fn into_view(self) -> View {
let Self { label, value } = self;
view! { <NavItem value>{label}</NavItem> }
}
}
pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
vec![
MenuGroupOption {

7
demo/src/pages/home.rs
View file

@ -1,5 +1,6 @@
use leptos::*;
use leptos_router::{use_navigate, use_query_map};
use leptos::prelude::*;
use leptos_router::hooks::{use_navigate, use_query_map};
// use leptos_router::{use_navigate, use_query_map};
use thaw::*;
#[component]
@ -8,7 +9,7 @@ pub fn Home() -> impl IntoView {
// mobile page
if let Some(path) = query_map.get("path") {
let navigate = use_navigate();
navigate(path, Default::default());
navigate(&path, Default::default());
}
view! {
<Layout

2
demo/src/pages/markdown.rs
View file

@ -1,5 +1,5 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use leptos::prelude::*;
use thaw::*;
demo_markdown::include_md! {}

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

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

2
demo_markdown/docs/button/mod.md
View file

@ -26,7 +26,7 @@ view! {
### Icon
```rust demo
let icon = create_rw_signal(Some(icondata::AiCloseOutlined));
let icon = RwSignal::new(Some(icondata::AiCloseOutlined));
let on_click = move |_| {
icon.update(|icon| {

2
demo_markdown/docs/calendar/mod.md
View file

@ -2,7 +2,7 @@
```rust demo
use chrono::prelude::*;
let value = create_rw_signal(Some(Local::now().date_naive()));
let value = RwSignal::new(Some(Local::now().date_naive()));
view! {
<Calendar value />

8
demo_markdown/docs/color_picker/mod.md
View file

@ -3,7 +3,7 @@
```rust demo
use palette::Srgb;
let value = create_rw_signal(Color::from(Srgb::new(0.0, 0.0, 0.0)));
let value = RwSignal::new(Color::from(Srgb::new(0.0, 0.0, 0.0)));
view! {
<ColorPicker value/>
@ -17,9 +17,9 @@ Encoding formats, support RGB, HSV, HSL.
```rust demo
use palette::{Hsl, Hsv, Srgb};
let rgb = create_rw_signal(Color::from(Srgb::new(0.0, 0.0, 0.0)));
let hsv = create_rw_signal(Color::from(Hsv::new(0.0, 0.0, 0.0)));
let hsl = create_rw_signal(Color::from(Hsl::new(0.0, 0.0, 0.0)));
let rgb = RwSignal::new(Color::from(Srgb::new(0.0, 0.0, 0.0)));
let hsv = RwSignal::new(Color::from(Hsv::new(0.0, 0.0, 0.0)));
let hsl = RwSignal::new(Color::from(Hsl::new(0.0, 0.0, 0.0)));
view! {
<Space vertical=true>

2
demo_markdown/docs/date_picker/mod.md
View file

@ -2,7 +2,7 @@
```rust demo
use chrono::prelude::*;
let value = create_rw_signal(Some(Local::now().date_naive()));
let value = RwSignal::new(Some(Local::now().date_naive()));
view! {
<DatePicker value/>

6
demo_markdown/docs/input/mod.md
View file

@ -59,7 +59,7 @@ view! {
### Invalid
```rust demo
let value = create_rw_signal(String::from("o"));
let value = RwSignal::new(String::from("o"));
view! {
<Space vertical=true>
@ -71,8 +71,8 @@ view! {
### Imperative handle
```rust demo
let value = create_rw_signal(String::from("o"));
let input_ref = create_component_ref::<InputRef>();
let value = RwSignal::new(String::from("o"));
let input_ref = ComponentRef::<InputRef>::new();
let focus = Callback::new(move |_| {
input_ref.get_untracked().unwrap().focus()

10
demo_markdown/docs/layout/mod.md
View file

@ -3,10 +3,10 @@
```rust demo
view! {
<Layout>
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
<LayoutHeader attr:style="background-color: #0078ffaa; padding: 20px;">
"Header"
</LayoutHeader>
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
<Layout attr:style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
</Layout>
}
```
@ -16,14 +16,14 @@ view! {
```rust demo
view! {
<Layout has_sider=true>
<LayoutSider style="background-color: #0078ff99; padding: 20px;">
<LayoutSider attr:style="background-color: #0078ff99; padding: 20px;">
"Sider"
</LayoutSider>
<Layout>
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
<LayoutHeader attr:style="background-color: #0078ffaa; padding: 20px;">
"Header"
</LayoutHeader>
<Layout style="background-color: #0078ff88; padding: 20px;">
<Layout attr:style="background-color: #0078ff88; padding: 20px;">
"Content"
</Layout>
</Layout>

4
demo_markdown/docs/select/mod.md
View file

@ -1,7 +1,7 @@
# Select
```rust demo
let value = create_rw_signal(None::<String>);
let value = RwSignal::new(None::<String>);
let options = vec![
SelectOption::new("RwSignal", String::from("rw_signal")),
@ -16,7 +16,7 @@ view! {
# Multiple Select
```rust demo
let value = create_rw_signal(vec![
let value = RwSignal::new(vec![
"rust".to_string(),
"javascript".to_string(),
"zig".to_string(),

2
demo_markdown/docs/time_picker/mod.md
View file

@ -3,7 +3,7 @@
```rust demo
use chrono::prelude::*;
let value = create_rw_signal(Some(Local::now().time()));
let value = RwSignal::new(Some(Local::now().time()));
view! {
<TimePicker value />

4
demo_markdown/docs/upload/mod.md
View file

@ -2,7 +2,7 @@
```rust demo
let message = use_message();
let custom_request = move |file_list: FileList| {
let custom_request = move |file_list| {
message.create(
format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success,
@ -23,7 +23,7 @@ view!{
```rust demo
let message = use_message();
let custom_request = move |file_list: FileList| {
let custom_request = move |file_list| {
message.create(
format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success,

6
demo_markdown/src/markdown/code_block.rs
View file

@ -28,8 +28,7 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec<String>) -> TokenSt
quote! {
<Demo>
<#demo />
<DemoCode slot is_highlight=#is_highlight>
#literal
<DemoCode slot is_highlight=#is_highlight text=#literal>
</DemoCode>
</Demo>
}
@ -45,8 +44,7 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec<String>) -> TokenSt
});
quote! {
<Demo>
<DemoCode slot is_highlight=#is_highlight>
#literal
<DemoCode slot is_highlight=#is_highlight text=#literal>
</DemoCode>
</Demo>
}

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

@ -4,13 +4,14 @@ pub use upload_dragger::UploadDragger;
pub use web_sys::FileList;
use leptos::{ev, html, prelude::*};
use send_wrapper::SendWrapper;
use thaw_utils::{add_event_listener, mount_style};
#[component]
pub fn Upload(
#[prop(optional, into)] accept: MaybeSignal<String>,
#[prop(optional, into)] multiple: MaybeSignal<bool>,
#[prop(optional, into)] custom_request: Option<Callback<FileList, ()>>,
#[prop(optional, into)] custom_request: Option<Callback<SendWrapper<FileList>, ()>>,
children: Children,
) -> impl IntoView {
mount_style("upload", include_str!("./upload.css"));
@ -34,7 +35,7 @@ pub fn Upload(
let on_file_addition = move |files: FileList| {
if let Some(custom_request) = custom_request {
custom_request.call(files);
custom_request.call(SendWrapper::new(files));
}
};

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

@ -1,5 +1,5 @@
use cfg_if::cfg_if;
use leptos::prelude::*;
use leptos::{children, prelude::*};
use tachys::view::any_view::AnyView;
/// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
@ -10,58 +10,67 @@ pub fn Teleport(
#[prop(optional, into)] element: Option<AnyView<Dom>>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] {
let mount_fn = StoredValue::new(None::<Box<dyn FnOnce() -> ()>>);
// cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] {
let mount_fn = StoredValue::new(None::<Box<dyn FnOnce() + Send + Sync>>);
let mount = send_wrapper::SendWrapper::new(mount);
let element = send_wrapper::SendWrapper::new(element);
let children = send_wrapper::SendWrapper::new(children);
mount_fn.set_value(Some(Box::new(move || {
let mount = mount.unwrap_or_else(|| {
let mount = if let Some(el) = mount.take() {
el
} else {
use leptos::wasm_bindgen::JsCast;
document()
.body()
.expect("body element to exist")
.unchecked_into()
});
};
if let Some(element) = element {
if let Some(element) = element.take() {
let render_root = element;
let _ = mount.append_child(&render_root);
on_cleanup(move || {
let _ = mount.remove_child(&render_root);
});
} else if let Some(children) = children {
let mut mountable = render_root.build();
mountable.mount(&mount, None);
// TODO
// on_cleanup(move || {
// mountable.unmount();
// });
} else if let Some(children) = children.take() {
let container = document()
.create_element("div")
.expect("element creation to work");
thaw_utils::with_hydration_off(|| {
use leptos::leptos_dom::Mountable;
let _ = container.append_child(&children().into_view().get_mountable_node());
// use leptos::leptos_dom::Mountable;
// let _ = container.append_child(&children().into_view().get_mountable_node());
let view = children().into_view();
let mut mountable = view.build();
mountable.mount(&container, None);
});
let render_root = container;
let _ = mount.append_child(&render_root);
on_cleanup(move || {
let _ = mount.remove_child(&render_root);
});
// on_cleanup(move || {
// let _ = mount.remove_child(&render_root);
// });
}
})));
let owner = Owner::current();
let owner = Owner::current().unwrap();
Effect::new(move |_| {
if immediate.get() {
mount_fn.update_value(|mount_fn| {
if let Some(f) = mount_fn.take() {
with_owner(owner.unwrap(), move || {
owner.with(|| {
f();
});
}
});
}
});
} else {
let _ = mount;
let _ = immediate;
let _ = element;
let _ = children;
}}
// } else {
// let _ = mount;
// let _ = immediate;
// let _ = element;
// let _ = children;
// }}
}