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

Feat/ssr (#25)

Browse source 
* feat: add ssr_axum template

* feat: demo added the ssr mode

* fix: demo ssr mode

* feat(ssr): mount_style

* pref: delete some useless fikes

* fix(ssr): problems caused by using wasm_bindgen

* feat: add hydrate

* pref: Demo component

* fix(hydrate): teleport component

* fix(hydrate): hydrate feature

* fix(hydrate): tabs component

* feat: GlobalStyle component margin style

* docs(ssr): static assets
This commit is contained in:
luoxiaozero 2023-11-24 10:04:54 +08:00 • committed by GitHub
parent c15e7cf204
commit 21506b2164
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
72 changed files with 1763 additions and 1258 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Cargo.toml
View file

@ -13,13 +13,15 @@ license = "MIT"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies] [dependencies]
leptos = { version = "0.5.2", features = ["csr"] } leptos = { version = "0.5.2" }
leptos_meta = { version = "0.5.2", optional = true }
web-sys = { version = "0.3.63", features = [ web-sys = { version = "0.3.63", features = [
"DomRect", "DomRect",
"File", "File",
"FileList", "FileList",
"DataTransfer", "DataTransfer",
] } ] }
wasm-bindgen = "0.2.88"
icondata = { version = "0.1.0", features = [ icondata = { version = "0.1.0", features = [
"AiCloseOutlined", "AiCloseOutlined",
"AiCheckOutlined", "AiCheckOutlined",
@ -36,5 +38,11 @@ icondata_core = "0.0.2"
uuid = { version = "1.5.0", features = ["v4"] } uuid = { version = "1.5.0", features = ["v4"] }
cfg-if = "1.0.0" cfg-if = "1.0.0"
[features]
default = ["csr"]
csr = ["leptos/csr"]
ssr = ["leptos/ssr", "leptos_meta/ssr"]
hydrate = ["leptos/hydrate"]
[workspace] [workspace]
members = ["demo"] members = ["demo", "examples/*"]

17
demo/Cargo.toml
View file

@ -7,11 +7,11 @@ edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies] [dependencies]
leptos = { version = "0.5.2", features = ["csr"] } leptos = { version = "0.5.2" }
leptos_meta = { version = "0.5.2", features = ["csr"] } leptos_meta = { version = "0.5.2" }
leptos_router = { version = "0.5.2", features = ["csr"] } leptos_router = { version = "0.5.2" }
leptos_devtools = "0.0.1" leptos_devtools = "0.0.1"
thaw = { path = "../" } thaw = { path = "../", default-features = false }
icondata = { version = "0.1.0", features = [ icondata = { version = "0.1.0", features = [
"AiCloseOutlined", "AiCloseOutlined",
"AiCheckOutlined", "AiCheckOutlined",
@ -21,4 +21,13 @@ icondata = { version = "0.1.0", features = [
prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" } prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" }
[features] [features]
default = ["csr"]
tracing = ["leptos/tracing"] tracing = ["leptos/tracing"]
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/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",
]

1
demo/index.html
View file

@ -10,7 +10,6 @@
href="/thaw/favicon.ico" href="/thaw/favicon.ico"
type="image/x-icon" type="image/x-icon"
/> />
<link data-trunk rel="css" href="./src/assets/css/index.css" />
<link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg" /> <link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg" />
<link data-trunk rel="copy-file" href="./src/assets/favicon.ico" /> <link data-trunk rel="copy-file" href="./src/assets/favicon.ico" />
<link data-trunk rel="copy-file" href="./src/assets/404.html" /> <link data-trunk rel="copy-file" href="./src/assets/404.html" />

5
demo/src/app.rs
View file

@ -87,9 +87,8 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
#[component] #[component]
fn TheProvider(children: Children) -> impl IntoView { fn TheProvider(children: Children) -> impl IntoView {
fn use_query_value(key: &str) -> Option<String> { fn use_query_value(key: &str) -> Option<String> {
let href = window().location().href().ok()?; let query_map = use_query_map();
let url = Url::try_from(href.as_str()).ok()?; query_map.with_untracked(|query| query.get(key).cloned())
url.search_params.get(key).cloned()
} }
let theme = use_query_value("theme").map_or_else(Theme::light, |name| { let theme = use_query_value("theme").map_or_else(Theme::light, |name| {
if name == "light" { if name == "light" {

19
demo/src/assets/css/index.css
View file

@ -1,19 +0,0 @@
body {
margin: 0;
}
.components-page-box {
display: flex;
}
.components-page-box aside {
width: 260px;
}
.components-page-box main {
flex: 1;
}
.token.operator {
background: hsla(0, 0%, 100%, 0) !important;
}

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

@ -4,8 +4,6 @@ use thaw::*;
#[slot] #[slot]
pub struct DemoCode { pub struct DemoCode {
#[prop(optional)]
html: &'static str,
children: Children, children: Children,
} }
@ -39,18 +37,27 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
}); });
style style
}); });
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 />."),
}
}
view! { view! {
<Style> <Style id="leptos-thaw-prism-css">{prisms::prism_css!()}</Style>
{prisms::prism_css!()} <Style id="leptos-thaw-prism-css-fix">
".token.operator {
background: hsla(0, 0%, 100%, 0) !important;
}"
</Style> </Style>
<div style=move || style.get()> <div style=move || style.get()>{children()}</div>
{children()}
</div>
<div style=move || code_style.get()> <div style=move || code_style.get()>
<Code> <Code>
<pre style="margin: 0" inner_html=demo_code.html> <pre style="margin: 0" inner_html=html></pre>
{(demo_code.children)()}
</pre>
</Code> </Code>
</div> </div>
} }

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

@ -91,26 +91,25 @@ pub fn SiteHeader() -> impl IntoView {
/> />
<Button <Button
variant=ButtonVariant::Text variant=ButtonVariant::Text
on:click=move |_| { on_click=move |_| {
let navigate = use_navigate(); let navigate = use_navigate();
navigate("/guide/installation", Default::default()); navigate("/guide/installation", Default::default());
} }
> >
"Guide" "Guide"
</Button> </Button>
<Button <Button
variant=ButtonVariant::Text variant=ButtonVariant::Text
on:click=move |_| { on_click=move |_| {
let navigate = use_navigate(); let navigate = use_navigate();
navigate("/components/button", Default::default()); navigate("/components/button", Default::default());
} }
> >
"Components" "Components"
</Button> </Button>
<Button <Button variant=ButtonVariant::Text on_click=on_theme>
variant=ButtonVariant::Text
on:click=on_theme
>
{move || theme_name.get()} {move || theme_name.get()}
</Button> </Button>
<Button <Button
@ -121,8 +120,8 @@ pub fn SiteHeader() -> impl IntoView {
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");
} }
> />
</Button>
</Space> </Space>
</LayoutHeader> </LayoutHeader>

5
demo/src/lib.rs Normal file
View file

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

6
demo/src/main.rs
View file

@ -1,8 +1,4 @@
mod app; use demo::App;
mod components;
mod pages;
use app::*;
use leptos::*; use leptos::*;
fn main() { fn main() {

12
demo/src/pages/alert/mod.rs
View file

@ -20,19 +20,17 @@ pub fn AlertPage() -> impl IntoView {
"error" "error"
</Alert> </Alert>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Alert variant=AlertVariant::Success title="title">"success"</Alert> <Alert variant=AlertVariant::Success title="title">"success"</Alert>
<Alert variant=AlertVariant::Warning title="title">"warning"</Alert> <Alert variant=AlertVariant::Warning title="title">"warning"</Alert>
<Alert variant=AlertVariant::Error title="title">"error"</Alert> <Alert variant=AlertVariant::Error title="title">"error"</Alert>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Alert Props"</h3> <h3>"Alert Props"</h3>
@ -49,7 +47,7 @@ pub fn AlertPage() -> impl IntoView {
<tr> <tr>
<td>"title"</td> <td>"title"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Title of the alert."</td> <td>"Title of the alert."</td>
</tr> </tr>
<tr> <tr>

14
demo/src/pages/auto_complete/mod.rs
View file

@ -25,9 +25,9 @@ pub fn AutoCompletePage() -> impl IntoView {
<h1>"AutoComplete"</h1> <h1>"AutoComplete"</h1>
<Demo> <Demo>
<AutoComplete value options placeholder="Email"/> <AutoComplete value options placeholder="Email"/>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(String::new()); let value = create_rw_signal(String::new());
let options =create_memo(|_| { let options =create_memo(|_| {
@ -48,10 +48,8 @@ pub fn AutoCompletePage() -> impl IntoView {
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"AutoComplete Props"</h3> <h3>"AutoComplete Props"</h3>
@ -68,13 +66,13 @@ pub fn AutoCompletePage() -> impl IntoView {
<tr> <tr>
<td>"value"</td> <td>"value"</td>
<td>"RwSignal<String>"</td> <td>"RwSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Input of autocomplete."</td> <td>"Input of autocomplete."</td>
</tr> </tr>
<tr> <tr>
<td>"placeholder"</td> <td>"placeholder"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Autocomplete's placeholder."</td> <td>"Autocomplete's placeholder."</td>
</tr> </tr>
<tr> <tr>

28
demo/src/pages/avatar/mod.rs
View file

@ -14,21 +14,19 @@ pub fn AvatarPage() -> impl IntoView {
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Space> <Space>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/> <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
</Space> </Space>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Avatar Props"</h3> <h3>"Avatar Props"</h3>
@ -45,7 +43,7 @@ pub fn AvatarPage() -> impl IntoView {
<tr> <tr>
<td>"src"</td> <td>"src"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Avatar's image source."</td> <td>"Avatar's image source."</td>
</tr> </tr>
<tr> <tr>

58
demo/src/pages/badge/mod.rs
View file

@ -35,37 +35,35 @@ pub fn BadgePage() -> impl IntoView {
"value:" "value:"
{move || value.get()} {move || value.get()}
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(0); let value = create_rw_signal(0);
view! { view! {
<Space> <Space>
<Badge value=value max=10> <Badge value=value max=10>
<Avatar /> <Avatar />
</Badge> </Badge>
<Badge variant=BadgeVariant::Success value=value max=10> <Badge variant=BadgeVariant::Success value=value max=10>
<Avatar /> <Avatar />
</Badge> </Badge>
<Badge variant=BadgeVariant::Warning value=value max=10> <Badge variant=BadgeVariant::Warning value=value max=10>
<Avatar /> <Avatar />
</Badge> </Badge>
<Badge variant=BadgeVariant::Warning dot=true> <Badge variant=BadgeVariant::Warning dot=true>
<Avatar /> <Avatar />
</Badge> </Badge>
<Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button> <Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button>
<Button on_click=move |_| value.update(|v| if *v != 0 { *v -= 1 })>"-1"</Button> <Button on_click=move |_| value.update(|v| if *v != 0 { *v -= 1 })>"-1"</Button>
"value:" "value:"
{move || value.get()} {move || value.get()}
</Space> </Space>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Badge Props"</h3> <h3>"Badge Props"</h3>

78
demo/src/pages/breadcrumb/mod.rs
View file

@ -14,27 +14,25 @@ pub fn BreadcrumbPage() -> impl IntoView {
<BreadcrumbItem>"UI"</BreadcrumbItem> <BreadcrumbItem>"UI"</BreadcrumbItem>
<BreadcrumbItem>"Thaw"</BreadcrumbItem> <BreadcrumbItem>"Thaw"</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>
"Leptos" "Leptos"
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbItem> <BreadcrumbItem>
"UI" "UI"
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbItem> <BreadcrumbItem>
"Thaw" "Thaw"
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Separator"</h3> <h3>"Separator"</h3>
@ -44,27 +42,25 @@ pub fn BreadcrumbPage() -> impl IntoView {
<BreadcrumbItem>"UI"</BreadcrumbItem> <BreadcrumbItem>"UI"</BreadcrumbItem>
<BreadcrumbItem>"Thaw"</BreadcrumbItem> <BreadcrumbItem>"Thaw"</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Breadcrumb separator=">"> <Breadcrumb separator=">">
<BreadcrumbItem> <BreadcrumbItem>
"Leptos" "Leptos"
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbItem> <BreadcrumbItem>
"UI" "UI"
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbItem> <BreadcrumbItem>
"Thaw" "Thaw"
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Breadcrumb Props"</h3> <h3>"Breadcrumb Props"</h3>
@ -81,7 +77,7 @@ pub fn BreadcrumbPage() -> impl IntoView {
<tr> <tr>
<td>"separator"</td> <td>"separator"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""/""#</td> <td>"/"</td>
<td>"Breadcrumb separator."</td> <td>"Breadcrumb separator."</td>
</tr> </tr>
<tr> <tr>

174
demo/src/pages/button/mod.rs
View file

@ -15,28 +15,26 @@ pub fn ButtonPage() -> impl IntoView {
<Button variant=ButtonVariant::Text>"Text"</Button> <Button variant=ButtonVariant::Text>"Text"</Button>
<Button variant=ButtonVariant::Link>"Link"</Button> <Button variant=ButtonVariant::Link>"Link"</Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Button variant=ButtonVariant::Primary> <Button variant=ButtonVariant::Primary>
"Primary" "Primary"
</Button> </Button>
<Button variant=ButtonVariant::Solid> <Button variant=ButtonVariant::Solid>
"Solid" "Solid"
</Button> </Button>
<Button variant=ButtonVariant::Text> <Button variant=ButtonVariant::Text>
"Text" "Text"
</Button> </Button>
<Button variant=ButtonVariant::Link> <Button variant=ButtonVariant::Link>
"Link" "Link"
</Button> </Button>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"color"</h3> <h3>"color"</h3>
@ -47,28 +45,26 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::Warning>"Warning Color"</Button> <Button color=ButtonColor::Warning>"Warning Color"</Button>
<Button color=ButtonColor::Error>"Error Color"</Button> <Button color=ButtonColor::Error>"Error Color"</Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Button color=ButtonColor::Primary> <Button color=ButtonColor::Primary>
"Primary Color" "Primary Color"
</Button> </Button>
<Button color=ButtonColor::Success> <Button color=ButtonColor::Success>
"Success Color" "Success Color"
</Button> </Button>
<Button color=ButtonColor::Warning> <Button color=ButtonColor::Warning>
"Warning Color" "Warning Color"
</Button> </Button>
<Button color=ButtonColor::Error> <Button color=ButtonColor::Error>
"Error Color" "Error Color"
</Button> </Button>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"icon"</h3> <h3>"icon"</h3>
@ -83,21 +79,19 @@ pub fn ButtonPage() -> impl IntoView {
round=true round=true
/> />
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined> <Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined>
"Error Color Icon" "Error Color Icon"
</Button> </Button>
<Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined round=true> <Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button> </Button>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<LoadingButton/> <LoadingButton/>
@ -107,18 +101,16 @@ pub fn ButtonPage() -> impl IntoView {
<Button style="background: blue;">"style blue"</Button> <Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button> <Button style="width: 40px; height: 20px">"size"</Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Button style="background: blue;">"style blue"</Button> <Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button> <Button style="width: 40px; height: 20px">"size"</Button>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Button Props"</h3> <h3>"Button Props"</h3>
@ -135,7 +127,7 @@ pub fn ButtonPage() -> impl IntoView {
<tr> <tr>
<td>"style"</td> <td>"style"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Button's style."</td> <td>"Button's style."</td>
</tr> </tr>
<tr> <tr>
@ -215,36 +207,34 @@ fn LoadingButton() -> impl IntoView {
"Click Me" "Click Me"
</Button> </Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let loading = create_rw_signal(false); let loading = create_rw_signal(false);
let on_click = move |_| { let on_click = move |_| {
loading.set(true); loading.set(true);
set_timeout( set_timeout(
move || { move || {
loading.set(false); loading.set(false);
}, },
std::time::Duration::new(2, 0), std::time::Duration::new(2, 0),
); );
}; };
view! { view! {
<Space> <Space>
<Button loading on_click icon=icondata::AiIcon::AiCloseOutlined> <Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
"Click Me" "Click Me"
</Button> </Button>
<Button loading on_click> <Button loading on_click>
"Click Me" "Click Me"
</Button> </Button>
</Space> </Space>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
} }

90
demo/src/pages/card/mod.rs
View file

@ -10,67 +10,55 @@ pub fn CardPage() -> impl IntoView {
<h1>"Card"</h1> <h1>"Card"</h1>
<Demo> <Demo>
<Space vertical=true> <Space vertical=true>
<Card title="title">"content"</Card>
<Card title="title"> <Card title="title">
<CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
"content" "content"
</Card> </Card>
<Card title="title"> <Card title="title">
<CardHeaderExtra slot> <CardHeader slot>"header"</CardHeader>
"header-extra"
</CardHeaderExtra>
"content" "content"
</Card> </Card>
<Card title="title"> <Card title="title">
<CardHeader slot> <CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
"header"
</CardHeader>
"content" "content"
</Card> <CardFooter slot>"footer"</CardFooter>
<Card title="title">
<CardHeaderExtra slot>
"header-extra"
</CardHeaderExtra>
"content"
<CardFooter slot>
"footer"
</CardFooter>
</Card> </Card>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Space vertical=true> <Space vertical=true>
<Card title="title"> <Card title="title">
"content" "content"
</Card> </Card>
<Card title="title"> <Card title="title">
<CardHeaderExtra slot> <CardHeaderExtra slot>
"header-extra" "header-extra"
</CardHeaderExtra> </CardHeaderExtra>
"content" "content"
</Card> </Card>
<Card title="title"> <Card title="title">
<CardHeader slot> <CardHeader slot>
"header" "header"
</CardHeader> </CardHeader>
"content" "content"
</Card> </Card>
<Card title="title"> <Card title="title">
<CardHeaderExtra slot> <CardHeaderExtra slot>
"header-extra" "header-extra"
</CardHeaderExtra> </CardHeaderExtra>
"content" "content"
<CardFooter slot> <CardFooter slot>
"footer" "footer"
</CardFooter> </CardFooter>
</Card> </Card>
</Space> </Space>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Card Props"</h3> <h3>"Card Props"</h3>
@ -87,7 +75,7 @@ pub fn CardPage() -> impl IntoView {
<tr> <tr>
<td>"title"</td> <td>"title"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Card title."</td> <td>"Card title."</td>
</tr> </tr>
<tr> <tr>

38
demo/src/pages/checkbox/mod.rs
View file

@ -14,9 +14,9 @@ pub fn CheckboxPage() -> impl IntoView {
<h1>"Checkbox"</h1> <h1>"Checkbox"</h1>
<Demo> <Demo>
<Checkbox value=checked>"Click"</Checkbox> <Checkbox value=checked>"Click"</Checkbox>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(false); let value = create_rw_signal(false);
@ -27,10 +27,8 @@ pub fn CheckboxPage() -> impl IntoView {
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"group"</h3> <h3>"group"</h3>
@ -41,25 +39,23 @@ pub fn CheckboxPage() -> impl IntoView {
<CheckboxItem label="c" key="c"/> <CheckboxItem label="c" key="c"/>
</CheckboxGroup> </CheckboxGroup>
<div style="margin-top: 1rem">"value: " {move || format!("{:?}", value.get())}</div> <div style="margin-top: 1rem">"value: " {move || format!("{:?}", value.get())}</div>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(HashSet::new()); let value = create_rw_signal(HashSet::new());
view! { view! {
<CheckboxGroup value> <CheckboxGroup value>
<CheckboxItem label="apple" key="a" /> <CheckboxItem label="apple" key="a" />
<CheckboxItem label="b" key="b" /> <CheckboxItem label="b" key="b" />
<CheckboxItem label="c" key="c" /> <CheckboxItem label="c" key="c" />
</CheckboxGroup> </CheckboxGroup>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Checkbox Props"</h3> <h3>"Checkbox Props"</h3>

20
demo/src/pages/color_picker/mod.rs
View file

@ -12,21 +12,19 @@ pub fn ColorPickerPage() -> impl IntoView {
<h1>"Color Picker"</h1> <h1>"Color Picker"</h1>
<Demo> <Demo>
<ColorPicker value/> <ColorPicker value/>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = RGBA::default(); let value = RGBA::default();
view! { view! {
<ColorPicker value/> <ColorPicker value/>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"ColorPicker Props"</h3> <h3>"ColorPicker Props"</h3>

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

@ -54,8 +54,7 @@ impl IntoView for MenuGroupOption {
let Self { label, children } = self; let Self { label, children } = self;
view! { view! {
<MenuGroup label=format!( <MenuGroup label=format!(
"{label} ({})", "{label} ({})", children.len()
children.len(),
)> )>
{children.into_iter().map(|v| v.into_view()).collect_view()} {children.into_iter().map(|v| v.into_view()).collect_view()}

26
demo/src/pages/divider/mod.rs
View file

@ -9,22 +9,18 @@ pub fn DividerPage() -> impl IntoView {
<div style="width: 896px; margin: 0 auto;"> <div style="width: 896px; margin: 0 auto;">
<h1>"Divider"</h1> <h1>"Divider"</h1>
<Demo> <Demo>
"top" "top" <Divider/> "bottom"
<Divider /> <DemoCode slot>
"bottom"
<DemoCode {highlight_str!(
slot r#"
html=highlight_str!( "top"
r#" <Divider />
"top" "bottom"
<Divider /> "#,
"bottom" "rust"
"#, )}
"rust"
)
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

100
demo/src/pages/grid/mod.rs
View file

@ -8,7 +8,7 @@ use thaw::*;
pub fn GridPage() -> impl IntoView { pub fn GridPage() -> impl IntoView {
view! { view! {
<Style> <Style>
r#".thaw-grid-item { ".thaw-grid-item {
height: 60px; height: 60px;
text-align: center; text-align: center;
line-height: 60px; line-height: 60px;
@ -18,7 +18,7 @@ pub fn GridPage() -> impl IntoView {
} }
.thaw-grid-item:nth-child(even) { .thaw-grid-item:nth-child(even) {
background-color: #0078ffaa; background-color: #0078ffaa;
}"# }"
</Style> </Style>
<div style="width: 896px; margin: 0 auto;"> <div style="width: 896px; margin: 0 auto;">
<h1>"Grid"</h1> <h1>"Grid"</h1>
@ -36,27 +36,25 @@ pub fn GridPage() -> impl IntoView {
<GridItem>"789"</GridItem> <GridItem>"789"</GridItem>
</Grid> </Grid>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Grid> <Grid>
<GridItem>"123"</GridItem> <GridItem>"123"</GridItem>
<GridItem>"456"</GridItem> <GridItem>"456"</GridItem>
<GridItem>"789"</GridItem> <GridItem>"789"</GridItem>
</Grid> </Grid>
<Grid :cols=2> <Grid :cols=2>
<GridItem>"123"</GridItem> <GridItem>"123"</GridItem>
<GridItem>"456"</GridItem> <GridItem>"456"</GridItem>
<GridItem>"789"</GridItem> <GridItem>"789"</GridItem>
</Grid> </Grid>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"gap"</h3> <h3>"gap"</h3>
@ -73,28 +71,26 @@ pub fn GridPage() -> impl IntoView {
<GridItem>"567"</GridItem> <GridItem>"567"</GridItem>
<GridItem>"567"</GridItem> <GridItem>"567"</GridItem>
</Grid> </Grid>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Grid cols=3 x_gap=8 y_gap=8> <Grid cols=3 x_gap=8 y_gap=8>
<GridItem>"123"</GridItem> <GridItem>"123"</GridItem>
<GridItem>"321"</GridItem> <GridItem>"321"</GridItem>
<GridItem>"123"</GridItem> <GridItem>"123"</GridItem>
<GridItem>"456"</GridItem> <GridItem>"456"</GridItem>
<GridItem>"7"</GridItem> <GridItem>"7"</GridItem>
<GridItem>"123"</GridItem> <GridItem>"123"</GridItem>
<GridItem>"123"</GridItem> <GridItem>"123"</GridItem>
<GridItem column=2>"1234"</GridItem> <GridItem column=2>"1234"</GridItem>
<GridItem >"567"</GridItem> <GridItem >"567"</GridItem>
<GridItem >"567"</GridItem> <GridItem >"567"</GridItem>
</Grid> </Grid>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"gap"</h3> <h3>"gap"</h3>
@ -103,20 +99,18 @@ pub fn GridPage() -> impl IntoView {
<GridItem offset=2>"123"</GridItem> <GridItem offset=2>"123"</GridItem>
<GridItem>"456"</GridItem> <GridItem>"456"</GridItem>
</Grid> </Grid>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Grid cols=4> <Grid cols=4>
<GridItem offset=2>"123"</GridItem> <GridItem offset=2>"123"</GridItem>
<GridItem>"456"</GridItem> <GridItem>"456"</GridItem>
</Grid> </Grid>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Grid Props"</h3> <h3>"Grid Props"</h3>

13
demo/src/pages/guide/installation.rs
View file

@ -8,15 +8,12 @@ pub fn InstallationPage() -> impl IntoView {
<h1>"Installation"</h1> <h1>"Installation"</h1>
<p>"Installation thaw"</p> <p>"Installation thaw"</p>
<Demo> <Demo>
""
<DemoCode
slot
html="cargo add thaw"
>
"" ""
</DemoCode> <DemoCode slot>
</Demo>
"cargo add thaw"
</DemoCode>
</Demo>
</div> </div>
} }
} }

16
demo/src/pages/guide/mod.rs
View file

@ -35,9 +35,9 @@ pub fn GuidePage() -> impl IntoView {
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;"> <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
<LayoutSider> <LayoutSider>
<Menu value=selected> <Menu value=selected>
{
gen_guide_menu_data().into_view() {gen_guide_menu_data().into_view()}
}
</Menu> </Menu>
</LayoutSider> </LayoutSider>
<Layout style="padding: 8px 12px 28px; overflow-y: auto;"> <Layout style="padding: 8px 12px 28px; overflow-y: auto;">
@ -58,9 +58,9 @@ impl IntoView for MenuGroupOption {
let Self { label, children } = self; let Self { label, children } = self;
view! { view! {
<MenuGroup label=label> <MenuGroup label=label>
{
children.into_iter().map(|v| v.into_view()).collect_view() {children.into_iter().map(|v| v.into_view()).collect_view()}
}
</MenuGroup> </MenuGroup>
} }
} }
@ -74,9 +74,7 @@ pub(crate) struct MenuItemOption {
impl IntoView for MenuItemOption { impl IntoView for MenuItemOption {
fn into_view(self) -> View { fn into_view(self) -> View {
let Self { label, value } = self; let Self { label, value } = self;
view! { view! { <MenuItem key=value label/> }
<MenuItem key=value label/>
}
} }
} }

56
demo/src/pages/guide/usage.rs
View file

@ -10,47 +10,43 @@ pub fn UsagePage() -> impl IntoView {
<p>"You just need to import thaw and use it."</p> <p>"You just need to import thaw and use it."</p>
<Demo> <Demo>
"" ""
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
// Import all // Import all
use thaw::*; use thaw::*;
// Import on Demand // Import on Demand
use thaw::{Button, ButtonVariant}; use thaw::{Button, ButtonVariant};
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<p>"A small example:"</p> <p>"A small example:"</p>
<Demo> <Demo>
"" ""
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
use leptos::*; use leptos::*;
use thaw::*; use thaw::*;
fn main() { fn main() {
mount_to_body(App) mount_to_body(App)
}
#[component]
pub fn App() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Primary>"Primary"</Button>
} }
} #[component]
"#, pub fn App() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Primary>"Primary"</Button>
}
}
"#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
</div> </div>

32
demo/src/pages/icon/mod.rs
View file

@ -10,23 +10,21 @@ pub fn IconPage() -> impl IntoView {
<h1>"Icon"</h1> <h1>"Icon"</h1>
<Demo> <Demo>
<Space> <Space>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) /> <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined) /> <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined)/>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Space> <Space>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) /> <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) />
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined) /> <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined) />
</Space> </Space>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Icon Props"</h3> <h3>"Icon Props"</h3>
@ -49,13 +47,13 @@ pub fn IconPage() -> impl IntoView {
<tr> <tr>
<td>"width"</td> <td>"width"</td>
<td>"Option<MaybeSignal<String>>"</td> <td>"Option<MaybeSignal<String>>"</td>
<td>r#""1em""#</td> <td>"1em"</td>
<td>"The width of the icon."</td> <td>"The width of the icon."</td>
</tr> </tr>
<tr> <tr>
<td>"height"</td> <td>"height"</td>
<td>"Option<MaybeSignal<String>>"</td> <td>"Option<MaybeSignal<String>>"</td>
<td>r#""1em""#</td> <td>"1em"</td>
<td>"The height of the icon."</td> <td>"The height of the icon."</td>
</tr> </tr>
<tr> <tr>

32
demo/src/pages/image/mod.rs
View file

@ -11,18 +11,16 @@ pub fn ImagePage() -> impl IntoView {
<Demo> <Demo>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/> <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/> <Image width="200px" height="200px"/>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/> <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/> <Image width="200px" height="200px"/>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Image Props"</h3> <h3>"Image Props"</h3>
@ -39,37 +37,37 @@ pub fn ImagePage() -> impl IntoView {
<tr> <tr>
<td>"src"</td> <td>"src"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Image source."</td> <td>"Image source."</td>
</tr> </tr>
<tr> <tr>
<td>"alt"</td> <td>"alt"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Image alt information."</td> <td>"Image alt information."</td>
</tr> </tr>
<tr> <tr>
<td>"width"</td> <td>"width"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Image width."</td> <td>"Image width."</td>
</tr> </tr>
<tr> <tr>
<td>"height"</td> <td>"height"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Image height."</td> <td>"Image height."</td>
</tr> </tr>
<tr> <tr>
<td>"border_radius"</td> <td>"border_radius"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Image border radius."</td> <td>"Image border radius."</td>
</tr> </tr>
<tr> <tr>
<td>"object_fit"</td> <td>"object_fit"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Object-fit type of the image in the container."</td> <td>"Object-fit type of the image in the container."</td>
</tr> </tr>
</tbody> </tbody>

92
demo/src/pages/input/mod.rs
View file

@ -14,25 +14,22 @@ pub fn InputPage() -> impl IntoView {
<Input value/> <Input value/>
<Input value variant=InputVariant::Password placeholder="Password"/> <Input value variant=InputVariant::Password placeholder="Password"/>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(String::from("o")); let value = create_rw_signal(String::from("o"));
view! { view! {
<Space vertical=true> <Space vertical=true>
<Input value/> <Input value/>
<Input value variant=InputVariant::Password placeholder="Password"/> <Input value variant=InputVariant::Password placeholder="Password"/>
</Space> </Space>
} }
"#, "#,
"rust" "rust"
) )}
>
""
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h1>"Prefix & Suffix"</h1> <h1>"Prefix & Suffix"</h1>
@ -44,9 +41,7 @@ pub fn InputPage() -> impl IntoView {
</InputPrefix> </InputPrefix>
</Input> </Input>
<Input value> <Input value>
<InputSuffix slot> <InputSuffix slot>"$"</InputSuffix>
"$"
</InputSuffix>
</Input> </Input>
<Input value> <Input value>
<InputSuffix slot> <InputSuffix slot>
@ -54,38 +49,35 @@ pub fn InputPage() -> impl IntoView {
</InputSuffix> </InputSuffix>
</Input> </Input>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(String::from("o")); let value = create_rw_signal(String::from("o"));
view! { view! {
<Space vertical=true> <Space vertical=true>
<Input value> <Input value>
<InputPrefix slot> <InputPrefix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/> <Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
</InputPrefix> </InputPrefix>
</Input> </Input>
<Input value> <Input value>
<InputSuffix slot> <InputSuffix slot>
"$" "$"
</InputSuffix> </InputSuffix>
</Input> </Input>
<Input value> <Input value>
<InputSuffix slot> <InputSuffix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/> <Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
</InputSuffix> </InputSuffix>
</Input> </Input>
</Space> </Space>
} }
"#, "#,
"rust" "rust"
) )}
>
""
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Input Props"</h3> <h3>"Input Props"</h3>
@ -102,7 +94,7 @@ pub fn InputPage() -> impl IntoView {
<tr> <tr>
<td>"value"</td> <td>"value"</td>
<td>"RwSignal<String>"</td> <td>"RwSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Set the input value"</td> <td>"Set the input value"</td>
</tr> </tr>
<tr> <tr>
@ -114,14 +106,16 @@ pub fn InputPage() -> impl IntoView {
<tr> <tr>
<td>"placeholder"</td> <td>"placeholder"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Placeholder of input."</td> <td>"Placeholder of input."</td>
</tr> </tr>
<tr> <tr>
<td>"allow_value"</td> <td>"allow_value"</td>
<td>"Option<Callback<String, bool>>"</td> <td>"Option<Callback<String, bool>>"</td>
<td>"None"</td> <td>"None"</td>
<td>"Check the incoming value, if it returns false, input will not be accepted."</td> <td>
"Check the incoming value, if it returns false, input will not be accepted."
</td>
</tr> </tr>
<tr> <tr>
<td>"on_focus"</td> <td>"on_focus"</td>

39
demo/src/pages/input_number/mod.rs
View file

@ -15,25 +15,22 @@ pub fn InputNumberPage() -> impl IntoView {
<InputNumber value step=1/> <InputNumber value step=1/>
<InputNumber value=value_f64 step=1.0/> <InputNumber value=value_f64 step=1.0/>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(0); let value = create_rw_signal(0);
let value_f64 = create_rw_signal(0.0); let value_f64 = create_rw_signal(0.0);
view! { view! {
<Space vertical=true> <Space vertical=true>
<InputNumber value step=1/> <InputNumber value step=1/>
<InputNumber value=value_f64 step=1.0/> <InputNumber value=value_f64 step=1.0/>
</Space> </Space>
} }
"#, "#,
"rust" "rust"
) )}
>
""
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"InputNumber Props"</h3> <h3>"InputNumber Props"</h3>
@ -56,14 +53,16 @@ pub fn InputNumberPage() -> impl IntoView {
<tr> <tr>
<td>"placeholder"</td> <td>"placeholder"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Placeholder of input number."</td> <td>"Placeholder of input number."</td>
</tr> </tr>
<tr> <tr>
<td>"step"</td> <td>"step"</td>
<td>"MaybeSignal<T>"</td> <td>"MaybeSignal<T>"</td>
<td></td> <td></td>
<td>"The number which the current value is increased or decreased on key or button press."</td> <td>
"The number which the current value is increased or decreased on key or button press."
</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>

78
demo/src/pages/layout/mod.rs
View file

@ -10,51 +10,55 @@ pub fn LayoutPage() -> impl IntoView {
<h1>"Layout"</h1> <h1>"Layout"</h1>
<Demo> <Demo>
<Layout> <Layout>
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader> <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
"Header"
</LayoutHeader>
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout> <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
</Layout> </Layout>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Layout> <Layout>
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader> <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout> <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
</Layout> </Layout>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"sider"</h3> <h3>"sider"</h3>
<Demo> <Demo>
<Layout has_sider=true> <Layout has_sider=true>
<LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider> <LayoutSider style="background-color: #0078ff99; padding: 20px;">
"Sider"
</LayoutSider>
<Layout> <Layout>
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader> <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout> "Header"
</Layout> </LayoutHeader>
</Layout> <Layout style="background-color: #0078ff88; padding: 20px;">
<DemoCode "Content"
slot
html=highlight_str!(
r#"
<Layout has_sider=true>
<LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
<Layout>
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
</Layout> </Layout>
</Layout> </Layout>
"#, </Layout>
"rust" <DemoCode slot>
)
> {highlight_str!(
r#"
<Layout has_sider=true>
<LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
<Layout>
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
</Layout>
</Layout>
"#,
"rust"
)}
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Layout Props"</h3> <h3>"Layout Props"</h3>
@ -71,14 +75,16 @@ pub fn LayoutPage() -> impl IntoView {
<tr> <tr>
<td>"style"</td> <td>"style"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Layout's style."</td> <td>"Layout's style."</td>
</tr> </tr>
<tr> <tr>
<td>"position"</td> <td>"position"</td>
<td>"LayoutPosition"</td> <td>"LayoutPosition"</td>
<td>"LayoutPosition::Static"</td> <td>"LayoutPosition::Static"</td>
<td>"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."</td> <td>
"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."
</td>
</tr> </tr>
<tr> <tr>
<td>"has_sider"</td> <td>"has_sider"</td>
@ -108,7 +114,7 @@ pub fn LayoutPage() -> impl IntoView {
<tr> <tr>
<td>"style"</td> <td>"style"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"LayoutHeader's style."</td> <td>"LayoutHeader's style."</td>
</tr> </tr>
<tr> <tr>

51
demo/src/pages/loading_bar/mod.rs
View file

@ -27,34 +27,31 @@ pub fn LoadingBarPage() -> impl IntoView {
<Button on_click=finish>"finish"</Button> <Button on_click=finish>"finish"</Button>
<Button on_click=error>"error"</Button> <Button on_click=error>"error"</Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let loading_bar = use_loading_bar(); let loading_bar = use_loading_bar();
let start = move |_| { let start = move |_| {
loading_bar.start(); loading_bar.start();
}; };
let finish = move |_| { let finish = move |_| {
loading_bar.finish(); loading_bar.finish();
}; };
let error = move |_| { let error = move |_| {
loading_bar.error(); loading_bar.error();
}; };
view! { view! {
<Space> <Space>
<Button on_click=start>"start"</Button> <Button on_click=start>"start"</Button>
<Button on_click=finish>"finish"</Button> <Button on_click=finish>"finish"</Button>
<Button on_click=error>"error"</Button> <Button on_click=error>"error"</Button>
</Space> </Space>
} }
"#, "#,
"rust" "rust"
) )}
>
""
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"LoadingBar Injection Methods"</h3> <h3>"LoadingBar Injection Methods"</h3>

28
demo/src/pages/menu/mod.rs
View file

@ -14,22 +14,20 @@ pub fn MenuPage() -> impl IntoView {
<MenuItem key="a" label="and"/> <MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/> <MenuItem key="o" label="or"/>
</Menu> </Menu>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(String::from("o")); let value = create_rw_signal(String::from("o"));
<Menu value> <Menu value>
<MenuItem key="a" label="and"/> <MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/> <MenuItem key="o" label="or"/>
</Menu> </Menu>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Menu Props"</h3> <h3>"Menu Props"</h3>
@ -46,7 +44,7 @@ pub fn MenuPage() -> impl IntoView {
<tr> <tr>
<td>"value"</td> <td>"value"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"The selected item key of the menu."</td> <td>"The selected item key of the menu."</td>
</tr> </tr>
<tr> <tr>
@ -96,13 +94,13 @@ pub fn MenuPage() -> impl IntoView {
<tr> <tr>
<td>"label"</td> <td>"label"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"The label of the menu item."</td> <td>"The label of the menu item."</td>
</tr> </tr>
<tr> <tr>
<td>"key"</td> <td>"key"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"The indentifier of the menu item."</td> <td>"The indentifier of the menu item."</td>
</tr> </tr>
</tbody> </tbody>

70
demo/src/pages/message/mod.rs
View file

@ -35,41 +35,39 @@ pub fn MessagePage() -> impl IntoView {
<Button on:click=warning>"Warning"</Button> <Button on:click=warning>"Warning"</Button>
<Button on:click=error>"Error"</Button> <Button on:click=error>"Error"</Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let message = use_message(); let message = use_message();
let success = move |_| { let success = move |_| {
message.create( message.create(
"Success".into(), "Success".into(),
MessageVariant::Success, MessageVariant::Success,
Default::default(), Default::default(),
); );
}; };
let warning = move |_| { let warning = move |_| {
message.create( message.create(
"Warning".into(), "Warning".into(),
MessageVariant::Warning, MessageVariant::Warning,
Default::default(), Default::default(),
); );
}; };
let error = move |_| { let error = move |_| {
message.create("Error".into(), MessageVariant::Error, Default::default()); message.create("Error".into(), MessageVariant::Error, Default::default());
}; };
view! { view! {
<Space> <Space>
<Button on:click=success>"Success"</Button> <Button on:click=success>"Success"</Button>
<Button on:click=warning>"Warning"</Button> <Button on:click=warning>"Warning"</Button>
<Button on:click=error>"Error"</Button> <Button on:click=error>"Error"</Button>
</Space> </Space>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"MessageProvider Injection Methods"</h3> <h3>"MessageProvider Injection Methods"</h3>
@ -84,7 +82,9 @@ pub fn MessagePage() -> impl IntoView {
<tbody> <tbody>
<tr> <tr>
<td>"create"</td> <td>"create"</td>
<td>"fn(&self, content: String, variant: MessageVariant, options: MessageOptions)"</td> <td>
"fn(&self, content: String, variant: MessageVariant, options: MessageOptions)"
</td>
<td>"The label of the menu item."</td> <td>"The label of the menu item."</td>
</tr> </tr>
</tbody> </tbody>

5
demo/src/pages/mobile.rs
View file

@ -14,10 +14,7 @@ pub fn MobilePage(path: &'static str) -> impl IntoView {
}); });
view! { view! {
<div style="width: 400px; text-align: center"> <div style="width: 400px; text-align: center">
<iframe <iframe src=move || src.get() style=move || style.get()></iframe>
src=move || src.get()
style=move || style.get()
></iframe>
</div> </div>
} }
} }

28
demo/src/pages/modal/mod.rs
View file

@ -14,24 +14,22 @@ pub fn ModalPage() -> impl IntoView {
<Modal title="title" show> <Modal title="title" show>
"hello" "hello"
</Modal> </Modal>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let show = create_rw_signal(false); let show = create_rw_signal(false);
<Button on:click=move |_| show.set(true)> <Button on:click=move |_| show.set(true)>
"open modal" "open modal"
</Button> </Button>
<Modal title="title" show> <Modal title="title" show>
"hello" "hello"
</Modal> </Modal>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Modal Props"</h3> <h3>"Modal Props"</h3>
@ -54,7 +52,7 @@ pub fn ModalPage() -> impl IntoView {
<tr> <tr>
<td>"title"</td> <td>"title"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Modal title."</td> <td>"Modal title."</td>
</tr> </tr>
<tr> <tr>

54
demo/src/pages/nav_bar/mod.rs
View file

@ -15,33 +15,31 @@ pub fn NavBarPage() -> impl IntoView {
<h1>"Navbar"</h1> <h1>"Navbar"</h1>
<Demo> <Demo>
"" ""
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let click_text = create_rw_signal(String::from("none")); let click_text = create_rw_signal(String::from("none"));
let on_click_left = move |_| click_text.set("left".to_string()); let on_click_left = move |_| click_text.set("left".to_string());
let on_click_right = move |_| click_text.set("right".to_string()); let on_click_right = move |_| click_text.set("right".to_string());
view! { view! {
<div style="height: 100vh; background: #f5f5f5"> <div style="height: 100vh; background: #f5f5f5">
<NavBar <NavBar
title="Home" title="Home"
left_arrow=true left_arrow=true
left_text="back" left_text="back"
right_text="add" right_text="add"
on_click_left=on_click_left on_click_left=on_click_left
on_click_right=on_click_right on_click_right=on_click_right
/> />
<div style="padding-top: 50px">{move || click_text.get()}</div> <div style="padding-top: 50px">{move || click_text.get()}</div>
</div> </div>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"NavBar Props"</h3> <h3>"NavBar Props"</h3>
@ -58,7 +56,7 @@ pub fn NavBarPage() -> impl IntoView {
<tr> <tr>
<td>"title"</td> <td>"title"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"NavBar title."</td> <td>"NavBar title."</td>
</tr> </tr>
<tr> <tr>
@ -70,25 +68,25 @@ pub fn NavBarPage() -> impl IntoView {
<tr> <tr>
<td>"left_text"</td> <td>"left_text"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"NavBar left text."</td> <td>"NavBar left text."</td>
</tr> </tr>
<tr> <tr>
<td>"on_click_left"</td> <td>"on_click_left"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"NavBar left click."</td> <td>"NavBar left click."</td>
</tr> </tr>
<tr> <tr>
<td>"right_text"</td> <td>"right_text"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"NavBar right text."</td> <td>"NavBar right text."</td>
</tr> </tr>
<tr> <tr>
<td>"on_click_right"</td> <td>"on_click_right"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"NavBar right click."</td> <td>"NavBar right click."</td>
</tr> </tr>
</tbody> </tbody>

58
demo/src/pages/progress/mod.rs
View file

@ -12,50 +12,44 @@ pub fn ProgressPage() -> impl IntoView {
<Demo> <Demo>
<Space vertical=true> <Space vertical=true>
<Progress percentage show_indicator=false/> <Progress percentage show_indicator=false/>
<Progress percentage /> <Progress percentage/>
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/> <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage color=ProgressColor::Success/> <Progress percentage color=ProgressColor::Success/>
<Progress percentage color=ProgressColor::Warning/> <Progress percentage color=ProgressColor::Warning/>
<Progress percentage color=ProgressColor::Error/> <Progress percentage color=ProgressColor::Error/>
<Space> <Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)> <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>"-10%"</Button>
"-10%" <Button on_click=move |_| percentage.update(|v| *v += 10.0)>"+10%"</Button>
</Button>
<Button on_click=move |_| percentage.update(|v| *v += 10.0)>
"+10%"
</Button>
</Space> </Space>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let percentage = create_rw_signal(0.0f32); let percentage = create_rw_signal(0.0f32);
view! { view! {
<Space vertical=true> <Space vertical=true>
<Progress percentage show_indicator=false/> <Progress percentage show_indicator=false/>
<Progress percentage /> <Progress percentage />
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/> <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage color=ProgressColor::Success/> <Progress percentage color=ProgressColor::Success/>
<Progress percentage color=ProgressColor::Warning/> <Progress percentage color=ProgressColor::Warning/>
<Progress percentage color=ProgressColor::Error/> <Progress percentage color=ProgressColor::Error/>
<Space> <Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)> <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
"-10%" "-10%"
</Button> </Button>
<Button on_click=move |_| percentage.update(|v| *v += 10.0)> <Button on_click=move |_| percentage.update(|v| *v += 10.0)>
"+10%" "+10%"
</Button> </Button>
</Space>
</Space> </Space>
</Space> }
} "#,
"#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Progress Props"</h3> <h3>"Progress Props"</h3>

24
demo/src/pages/radio/mod.rs
View file

@ -11,23 +11,21 @@ pub fn RadioPage() -> impl IntoView {
<h1>"Radio"</h1> <h1>"Radio"</h1>
<Demo> <Demo>
<Radio value=checked>"Click"</Radio> <Radio value=checked>"Click"</Radio>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(false); let value = create_rw_signal(false);
view! { view! {
<Radio value> <Radio value>
"Click" "Click"
</Radio> </Radio>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Radio Props"</h3> <h3>"Radio Props"</h3>

24
demo/src/pages/select/mod.rs
View file

@ -16,23 +16,21 @@ pub fn SelectPage() -> impl IntoView {
<h1>"Select"</h1> <h1>"Select"</h1>
<Demo> <Demo>
<Select value=selected_value options/> <Select value=selected_value options/>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let selected_value = create_rw_signal(Some(String::from("apple"))); let selected_value = create_rw_signal(Some(String::from("apple")));
let options = vec![SelectOption { let options = vec![SelectOption {
label: String::from("apple"), label: String::from("apple"),
value: String::from("apple"), value: String::from("apple"),
}]; }];
<Select value=selected_value options/> <Select value=selected_value options/>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Select Props"</h3> <h3>"Select Props"</h3>

24
demo/src/pages/skeleton/mod.rs
View file

@ -9,20 +9,18 @@ pub fn SkeletonPage() -> impl IntoView {
<div style="width: 896px; margin: 0 auto;"> <div style="width: 896px; margin: 0 auto;">
<h1>"Skeleton"</h1> <h1>"Skeleton"</h1>
<Demo> <Demo>
<Skeleton repeat=2 text=true /> <Skeleton repeat=2 text=true/>
<Skeleton width="60%" text=true /> <Skeleton width="60%" text=true/>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Skeleton repeat=2 text=true /> <Skeleton repeat=2 text=true />
<Skeleton width="60%" text=true /> <Skeleton width="60%" text=true />
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Skeleton Props"</h3> <h3>"Skeleton Props"</h3>

16
demo/src/pages/slider/mod.rs
View file

@ -12,19 +12,17 @@ pub fn SliderPage() -> impl IntoView {
<h1>"Slider"</h1> <h1>"Slider"</h1>
<Demo> <Demo>
<Slider value/> <Slider value/>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(0.0); let value = create_rw_signal(0.0);
<Slider value/> <Slider value/>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Slider Props"</h3> <h3>"Slider Props"</h3>

88
demo/src/pages/space/mod.rs
View file

@ -14,21 +14,19 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Space> <Space>
<Button>"1"</Button> <Button>"1"</Button>
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"vertical"</h3> <h3>"vertical"</h3>
@ -38,21 +36,19 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Space vertical=true> <Space vertical=true>
<Button>"1"</Button> <Button>"1"</Button>
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"gap"</h3> <h3>"gap"</h3>
@ -67,26 +63,24 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Space gap=SpaceGap::Large> <Space gap=SpaceGap::Large>
<Button>"1"</Button> <Button>"1"</Button>
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
<Space gap=SpaceGap::WH(36, 36)> <Space gap=SpaceGap::WH(36, 36)>
<Button>"1"</Button> <Button>"1"</Button>
<Button>"2"</Button> <Button>"2"</Button>
<Button>"3"</Button> <Button>"3"</Button>
</Space> </Space>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Space Props"</h3> <h3>"Space Props"</h3>

26
demo/src/pages/switch/mod.rs
View file

@ -10,21 +10,19 @@ pub fn SwitchPage() -> impl IntoView {
<div style="width: 896px; margin: 0 auto;"> <div style="width: 896px; margin: 0 auto;">
<h1>"Switch"</h1> <h1>"Switch"</h1>
<Demo> <Demo>
<Switch value /> <Switch value/>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(false); let value = create_rw_signal(false);
view! { view! {
<Switch value /> <Switch value />
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Swith Props"</h3> <h3>"Swith Props"</h3>

40
demo/src/pages/tabbar/mod.rs
View file

@ -14,29 +14,27 @@ pub fn TabbarPage() -> impl IntoView {
<h1>"Tabbar"</h1> <h1>"Tabbar"</h1>
<Demo> <Demo>
"" ""
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal(String::from("o")); let value = create_rw_signal(String::from("o"));
<Tabbar value> <Tabbar value>
<TabbarItem name="a"> <TabbarItem name="a">
"and" "and"
</TabbarItem> </TabbarItem>
<TabbarItem name="i"> <TabbarItem name="i">
"if" "if"
</TabbarItem> </TabbarItem>
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined> <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
"or" "or"
</TabbarItem> </TabbarItem>
</Tabbar> </Tabbar>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Tabbar Props"</h3> <h3>"Tabbar Props"</h3>
@ -53,7 +51,7 @@ pub fn TabbarPage() -> impl IntoView {
<tr> <tr>
<td>"value"</td> <td>"value"</td>
<td>"RwSignal<String>"</td> <td>"RwSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Tabbar's value."</td> <td>"Tabbar's value."</td>
</tr> </tr>
<tr> <tr>
@ -78,7 +76,7 @@ pub fn TabbarPage() -> impl IntoView {
<tr> <tr>
<td>"key"</td> <td>"key"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"The indentifier of the tabbar item."</td> <td>"The indentifier of the tabbar item."</td>
</tr> </tr>
<tr> <tr>

64
demo/src/pages/table/mod.rs
View file

@ -30,37 +30,35 @@ pub fn TablePage() -> impl IntoView {
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Table> <Table>
<thead> <thead>
<tr> <tr>
<th>"tag"</th> <th>"tag"</th>
<th>"count"</th> <th>"count"</th>
<th>"date"</th> <th>"date"</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>"div"</td> <td>"div"</td>
<td>"2"</td> <td>"2"</td>
<td>"2023-10-08"</td> <td>"2023-10-08"</td>
</tr> </tr>
<tr> <tr>
<td>"span"</td> <td>"span"</td>
<td>"2"</td> <td>"2"</td>
<td>"2023-10-08"</td> <td>"2023-10-08"</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Table Props"</h3> <h3>"Table Props"</h3>
@ -78,18 +76,18 @@ pub fn TablePage() -> impl IntoView {
<td>"single_row"</td> <td>"single_row"</td>
<td>"MaybeSignal<bool>"</td> <td>"MaybeSignal<bool>"</td>
<td>"true"</td> <td>"true"</td>
<td>""</td> <td>"Default::default()"</td>
</tr> </tr>
<tr> <tr>
<td>"single_column"</td> <td>"single_column"</td>
<td>"MaybeSignal<bool>"</td> <td>"MaybeSignal<bool>"</td>
<td>"false"</td> <td>"false"</td>
<td>""</td> <td>"Default::default()"</td>
</tr> </tr>
<tr> <tr>
<td>"style"</td> <td>"style"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Table's style."</td> <td>"Table's style."</td>
</tr> </tr>
<tr> <tr>

36
demo/src/pages/tabs/mod.rs
View file

@ -18,25 +18,23 @@ pub fn TabsPage() -> impl IntoView {
"pear" "pear"
</Tab> </Tab>
</Tabs> </Tabs>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let value = create_rw_signal("apple"); let value = create_rw_signal("apple");
<Tabs value> <Tabs value>
<Tab key="apple" label="Apple"> <Tab key="apple" label="Apple">
"apple" "apple"
</Tab> </Tab>
<Tab key="pear" label="Pear"> <Tab key="pear" label="Pear">
"pear" "pear"
</Tab> </Tab>
</Tabs> </Tabs>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Tabs Props"</h3> <h3>"Tabs Props"</h3>
@ -53,7 +51,7 @@ pub fn TabsPage() -> impl IntoView {
<tr> <tr>
<td>"value"</td> <td>"value"</td>
<td>"RwSignal<String>"</td> <td>"RwSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Tabs value."</td> <td>"Tabs value."</td>
</tr> </tr>
<tr> <tr>

60
demo/src/pages/tag/mod.rs
View file

@ -10,43 +10,33 @@ pub fn TagPage() -> impl IntoView {
<h1>"Tag"</h1> <h1>"Tag"</h1>
<Demo> <Demo>
<Space> <Space>
<Tag> <Tag>"default"</Tag>
"default" <Tag variant=TagVariant::Success>"success"</Tag>
</Tag> <Tag variant=TagVariant::Warning>"warning"</Tag>
<Tag variant=TagVariant::Success> <Tag variant=TagVariant::Error>"error"</Tag>
"success"
</Tag>
<Tag variant=TagVariant::Warning>
"warning"
</Tag>
<Tag variant=TagVariant::Error>
"error"
</Tag>
</Space> </Space>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
<Space> <Space>
<Tag> <Tag>
"default" "default"
</Tag> </Tag>
<Tag variant=TagVariant::Success> <Tag variant=TagVariant::Success>
"success" "success"
</Tag> </Tag>
<Tag variant=TagVariant::Warning> <Tag variant=TagVariant::Warning>
"warning" "warning"
</Tag> </Tag>
<Tag variant=TagVariant::Error> <Tag variant=TagVariant::Error>
"error" "error"
</Tag> </Tag>
</Space> </Space>
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Tag Props"</h3> <h3>"Tag Props"</h3>

108
demo/src/pages/theme/mod.rs
View file

@ -27,52 +27,48 @@ pub fn ThemePage() -> impl IntoView {
</Space> </Space>
</Card> </Card>
</ThemeProvider> </ThemeProvider>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let theme = create_rw_signal(Theme::light()); let theme = create_rw_signal(Theme::light());
view! { view! {
<ThemeProvider theme> <ThemeProvider theme>
<Card> <Card>
<Space> <Space>
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button> <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button> <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
</Space> </Space>
</Card> </Card>
</ThemeProvider> </ThemeProvider>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"GlobalStyle"</h3> <h3>"GlobalStyle"</h3>
<p>"You can use GlobalStyle to sync common global style to the body element."</p> <p>"You can use GlobalStyle to sync common global style to the body element."</p>
<Demo> <Demo>
"" ""
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let theme = create_rw_signal(Theme::light()); let theme = create_rw_signal(Theme::light());
view! { view! {
<ThemeProvider theme> <ThemeProvider theme>
<GlobalStyle /> <GlobalStyle />
"..." "..."
</ThemeProvider> </ThemeProvider>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"CustomizeTheme"</h3> <h3>"CustomizeTheme"</h3>
@ -87,35 +83,33 @@ pub fn ThemePage() -> impl IntoView {
</Space> </Space>
</Card> </Card>
</ThemeProvider> </ThemeProvider>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r##" r##"
let customize_theme = create_rw_signal(Theme::light()); let customize_theme = create_rw_signal(Theme::light());
let on_customize_theme = move |_| { let on_customize_theme = move |_| {
customize_theme.update(|theme| { customize_theme.update(|theme| {
theme.common.color_primary = "#f5222d".to_string(); theme.common.color_primary = "#f5222d".to_string();
theme.common.color_primary_hover = "#ff4d4f".to_string(); theme.common.color_primary_hover = "#ff4d4f".to_string();
theme.common.color_primary_active = "#cf1322".to_string(); theme.common.color_primary_active = "#cf1322".to_string();
}); });
}; };
view! { view! {
<ThemeProvider theme=customize_theme> <ThemeProvider theme=customize_theme>
<Card> <Card>
<Space> <Space>
<Button on_click=move |_| customize_theme.set(Theme::light())>"Light"</Button> <Button on_click=move |_| customize_theme.set(Theme::light())>"Light"</Button>
<Button on_click=on_customize_theme>"Customize Theme"</Button> <Button on_click=on_customize_theme>"Customize Theme"</Button>
</Space> </Space>
</Card> </Card>
</ThemeProvider> </ThemeProvider>
} }
"##, "##,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"ThemeProvider Props"</h3> <h3>"ThemeProvider Props"</h3>

32
demo/src/pages/toast/mod.rs
View file

@ -16,24 +16,22 @@ pub fn ToastPage() -> impl IntoView {
<h1>"Toast"</h1> <h1>"Toast"</h1>
<Demo> <Demo>
"" ""
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let count = create_rw_signal(0u32); let count = create_rw_signal(0u32);
let onclick = move |_| { let onclick = move |_| {
show_toast(ToastOptions { show_toast(ToastOptions {
message: format!("Hello {}", count.get_untracked()), message: format!("Hello {}", count.get_untracked()),
duration: Duration::from_millis(2000), duration: Duration::from_millis(2000),
}); });
count.set(count.get_untracked() + 1); count.set(count.get_untracked() + 1);
}; };
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Toast Methods"</h3> <h3>"Toast Methods"</h3>

104
demo/src/pages/upload/mod.rs
View file

@ -18,69 +18,61 @@ pub fn UploadPage() -> impl IntoView {
<h1>"Upload"</h1> <h1>"Upload"</h1>
<Demo> <Demo>
<Upload custom_request> <Upload custom_request>
<Button> <Button>"Upload"</Button>
"Upload"
</Button>
</Upload> </Upload>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let message = use_message(); let message = use_message();
let custom_request = move |file_list: FileList| { let custom_request = move |file_list: FileList| {
message.create( message.create(
format!("Number of uploaded files: {}", file_list.length()), format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success, MessageVariant::Success,
Default::default(), Default::default(),
); );
}; };
view!{ view!{
<Upload> <Upload>
<Button> <Button>
"upload" "upload"
</Button> </Button>
</Upload> </Upload>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Drag to upload"</h3> <h3>"Drag to upload"</h3>
<Demo> <Demo>
<Upload custom_request> <Upload custom_request>
<UploadDragger> <UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
"Click or drag a file to this area to upload"
</UploadDragger>
</Upload> </Upload>
<DemoCode <DemoCode slot>
slot
html=highlight_str!( {highlight_str!(
r#" r#"
let message = use_message(); let message = use_message();
let custom_request = move |file_list: FileList| { let custom_request = move |file_list: FileList| {
message.create( message.create(
format!("Number of uploaded files: {}", file_list.length()), format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success, MessageVariant::Success,
Default::default(), Default::default(),
); );
}; };
view! { view! {
<Upload custom_request> <Upload custom_request>
<UploadDragger> <UploadDragger>
"Click or drag a file to this area to upload" "Click or drag a file to this area to upload"
</UploadDragger> </UploadDragger>
</Upload> </Upload>
} }
"#, "#,
"rust" "rust"
) )}
>
""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"Upload Props"</h3> <h3>"Upload Props"</h3>
@ -97,7 +89,7 @@ pub fn UploadPage() -> impl IntoView {
<tr> <tr>
<td>"accept"</td> <td>"accept"</td>
<td>"MaybeSignal<String>"</td> <td>"MaybeSignal<String>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"The accept type of upload."</td> <td>"The accept type of upload."</td>
</tr> </tr>
<tr> <tr>
@ -109,7 +101,7 @@ pub fn UploadPage() -> impl IntoView {
<tr> <tr>
<td>"custom_request"</td> <td>"custom_request"</td>
<td>"Option<Callback<FileList, ()>>"</td> <td>"Option<Callback<FileList, ()>>"</td>
<td>r#""""#</td> <td>"Default::default()"</td>
<td>"Customize upload request."</td> <td>"Customize upload request."</td>
</tr> </tr>
<tr> <tr>

13
examples/ssr_axum/.gitignore vendored Normal file
View file

@ -0,0 +1,13 @@
# Generated by Cargo
# will have compiled files and executables
/target/
pkg
# These are backup files generated by rustfmt
**/*.rs.bk
# node e2e test tools and outputs
node_modules/
test-results/
end2end/playwright-report/
playwright/.cache/

120
examples/ssr_axum/Cargo.toml Normal file
View file

@ -0,0 +1,120 @@
[package]
name = "ssr_axum"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
axum = { version = "0.6.4", optional = true }
console_error_panic_hook = "0.1"
console_log = "1"
cfg-if = "1"
leptos = { version = "0.5" }
leptos_axum = { version = "0.5", optional = true }
leptos_meta = { version = "0.5" }
leptos_router = { version = "0.5" }
log = "0.4"
simple_logger = "4"
tokio = { version = "1.25.0", optional = true }
tower = { version = "0.4.13", optional = true }
tower-http = { version = "0.4", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.88"
thiserror = "1.0.38"
tracing = { version = "0.1.37", optional = true }
http = "0.2.8"
demo = { path = "../../demo", default-features = false }
[features]
hydrate = [
"leptos/hydrate",
"leptos_meta/hydrate",
"leptos_router/hydrate",
"demo/hydrate",
]
ssr = [
"dep:axum",
"dep:tokio",
"dep:tower",
"dep:tower-http",
"dep:leptos_axum",
"leptos/ssr",
"leptos_meta/ssr",
"leptos_router/ssr",
"dep:tracing",
"demo/ssr",
]
# Defines a size-optimized profile for the WASM bundle in release mode
[profile.wasm-release]
inherits = "release"
opt-level = 'z'
lto = true
codegen-units = 1
panic = "abort"
[package.metadata.leptos]
# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
output-name = "ssr_axum"
# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
site-root = "target/site"
# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
# Defaults to pkg
site-pkg-dir = "thaw"
# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
# style-file = "style/main.scss"
# Assets source dir. All files found here will be copied and synchronized to site-root.
# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
#
# Optional. Env: LEPTOS_ASSETS_DIR.
assets-dir = "public"
# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-addr = "127.0.0.1:3000"
# The port to use for automatic reload monitoring
reload-port = 3001
# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
# [Windows] for non-WSL use "npx.cmd playwright test"
# This binary name can be checked in Powershell with Get-Command npx
end2end-cmd = "npx playwright test"
end2end-dir = "end2end"
# The browserlist query used for optimizing the CSS.
browserquery = "defaults"
# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
watch = false
# The environment Leptos will run in, usually either "DEV" or "PROD"
env = "DEV"
# The features to use when compiling the bin target
#
# Optional. Can be over-ridden with the command line parameter --bin-features
bin-features = ["ssr"]
# If the --no-default-features flag should be used when compiling the bin target
#
# Optional. Defaults to false.
bin-default-features = false
# The features to use when compiling the lib target
#
# Optional. Can be over-ridden with the command line parameter --lib-features
lib-features = ["hydrate"]
# If the --no-default-features flag should be used when compiling the lib target
#
# Optional. Defaults to false.
lib-default-features = false
# The profile to use for the lib target when compiling for release
#
# Optional. Defaults to "release".
lib-profile-release = "wasm-release"

21
examples/ssr_axum/LICENSE Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022 henrik
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

86
examples/ssr_axum/README.md Normal file
View file

@ -0,0 +1,86 @@
<picture>
<source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
<img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
</picture>
# Leptos Axum Starter Template
This is a template for use with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool using [Axum](https://github.com/tokio-rs/axum).
## Creating your template repo
If you don't have `cargo-leptos` installed you can install it with
```bash
cargo install cargo-leptos
```
Then run
```bash
cargo leptos new --git leptos-rs/start-axum
```
to generate a new project template.
```bash
cd ssr_axum
```
to go to your newly created project.
Feel free to explore the project structure, but the best place to start with your application code is in `src/app.rs`.
Addtionally, Cargo.toml may need updating as new versions of the dependencies are released, especially if things are not working after a `cargo update`.
## Running your project
```bash
cargo leptos watch
```
## Installing Additional Tools
By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
2. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
3. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
4. `npm install -g sass` - install `dart-sass` (should be optional in future
## Compiling for Release
```bash
cargo leptos build --release
```
Will generate your server binary in target/server/release and your site package in target/site
## Testing Your Project
```bash
cargo leptos end-to-end
```
```bash
cargo leptos end-to-end --release
```
Cargo-leptos uses Playwright as the end-to-end test tool.
Tests are located in end2end/tests directory.
## Executing a Server on a Remote Machine Without the Toolchain
After running a `cargo leptos build --release` the minimum files needed are:
1. The server binary located in `target/server/release`
2. The `site` directory and all files within located in `target/site`
Copy these files to your remote server. The directory structure should be:
```text
ssr_axum
site/
```
Set the following environment variables (updating for your project as needed):
```text
LEPTOS_OUTPUT_NAME="ssr_axum"
LEPTOS_SITE_ROOT="site"
LEPTOS_SITE_PKG_DIR="pkg"
LEPTOS_SITE_ADDR="127.0.0.1:3000"
LEPTOS_RELOAD_PORT="3001"
```
Finally, run the server binary.

74
examples/ssr_axum/end2end/package-lock.json generated Normal file
View file

@ -0,0 +1,74 @@
{
"name": "end2end",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "end2end",
"version": "1.0.0",
"license": "ISC",
"devDependencies": {
"@playwright/test": "^1.28.0"
}
},
"node_modules/@playwright/test": {
"version": "1.28.0",
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
"integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
"dev": true,
"dependencies": {
"@types/node": "*",
"playwright-core": "1.28.0"
},
"bin": {
"playwright": "cli.js"
},
"engines": {
"node": ">=14"
}
},
"node_modules/@types/node": {
"version": "18.11.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
"integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
"dev": true
},
"node_modules/playwright-core": {
"version": "1.28.0",
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
"integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
"dev": true,
"bin": {
"playwright": "cli.js"
},
"engines": {
"node": ">=14"
}
}
},
"dependencies": {
"@playwright/test": {
"version": "1.28.0",
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
"integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
"dev": true,
"requires": {
"@types/node": "*",
"playwright-core": "1.28.0"
}
},
"@types/node": {
"version": "18.11.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
"integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
"dev": true
},
"playwright-core": {
"version": "1.28.0",
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
"integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
"dev": true
}
}
}

13
examples/ssr_axum/end2end/package.json Normal file
View file

@ -0,0 +1,13 @@
{
"name": "end2end",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@playwright/test": "^1.28.0"
}
}

107
examples/ssr_axum/end2end/playwright.config.ts Normal file
View file

@ -0,0 +1,107 @@
import type { PlaywrightTestConfig } from "@playwright/test";
import { devices } from "@playwright/test";
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();
/**
* See https://playwright.dev/docs/test-configuration.
*/
const config: PlaywrightTestConfig = {
testDir: "./tests",
/* Maximum time one test can run for. */
timeout: 30 * 1000,
expect: {
/**
* Maximum time expect() should wait for the condition to be met.
* For example in `await expect(locator).toHaveText();`
*/
timeout: 5000,
},
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://localhost:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
},
/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
},
},
{
name: "firefox",
use: {
...devices["Desktop Firefox"],
},
},
{
name: "webkit",
use: {
...devices["Desktop Safari"],
},
},
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: {
// ...devices['Pixel 5'],
// },
// },
// {
// name: 'Mobile Safari',
// use: {
// ...devices['iPhone 12'],
// },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: {
// channel: 'msedge',
// },
// },
// {
// name: 'Google Chrome',
// use: {
// channel: 'chrome',
// },
// },
],
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
// outputDir: 'test-results/',
/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// port: 3000,
// },
};
export default config;

9
examples/ssr_axum/end2end/tests/example.spec.ts Normal file
View file

@ -0,0 +1,9 @@
import { test, expect } from "@playwright/test";
test("homepage has title and links to intro page", async ({ page }) => {
await page.goto("http://localhost:3000/");
await expect(page).toHaveTitle("Welcome to Leptos");
await expect(page.locator("h1")).toHaveText("Welcome to Leptos!");
});

BIN
examples/ssr_axum/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

4
examples/ssr_axum/public/thaw/grid_dot.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" />
<rect x="23" y="23" width="4" height="4" rx="2" fill="#cbd5e1" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 204 B

11
examples/ssr_axum/public/thaw/logo.svg Normal file
View file

@ -0,0 +1,11 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="12" fill="#0078ff" />
<path
d="M21 11h-3.17l2.54-2.54a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0L15 11h-2V9l3.95-3.95c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0L13 6.17V3c0-.55-.45-1-1-1s-1 .45-1 1v3.17L8.46 3.63a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42L11 9v2H9L5.05 7.05c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41L6.17 11H3c-.55 0-1 .45-1 1s.45 1 1 1h3.17l-2.54 2.54a.996.996 0 0 0 0 1.41c.39.39 1.03.39 1.42 0L9 13h2v2l-3.95 3.95c-.39.39-.39 1.03 0 1.42c.39.39 1.02.39 1.41 0L11 17.83V21c0 .55.45 1 1 1s1-.45 1-1v-3.17l2.54 2.54c.39.39 1.02.39 1.41 0c.39-.39.39-1.03 0-1.42L13 15v-2h2l3.95 3.95c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41L17.83 13H21c.55 0 1-.45 1-1s-.45-1-1-1z"
fill="#fff">
</path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 897 B

40
examples/ssr_axum/src/fileserv.rs Normal file
View file

@ -0,0 +1,40 @@
use cfg_if::cfg_if;
cfg_if! { if #[cfg(feature = "ssr")] {
use axum::{
body::{boxed, Body, BoxBody},
extract::State,
response::IntoResponse,
http::{Request, Response, StatusCode, Uri},
};
use axum::response::Response as AxumResponse;
use tower::ServiceExt;
use tower_http::services::ServeDir;
use leptos::*;
use demo::App;
pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> AxumResponse {
let root = options.site_root.clone();
let res = get_static_file(uri.clone(), &root).await.unwrap();
if res.status() == StatusCode::OK {
res.into_response()
} else {
let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{<App/>});
handler(req).await.into_response()
}
}
async fn get_static_file(uri: Uri, root: &str) -> Result<Response<BoxBody>, (StatusCode, String)> {
let req = Request::builder().uri(uri.clone()).body(Body::empty()).unwrap();
// `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
// This path is relative to the cargo root
match ServeDir::new(root).oneshot(req).await {
Ok(res) => Ok(res.map(boxed)),
Err(err) => Err((
StatusCode::INTERNAL_SERVER_ERROR,
format!("Something went wrong: {err}"),
)),
}
}
}}

17
examples/ssr_axum/src/lib.rs Normal file
View file

@ -0,0 +1,17 @@
use cfg_if::cfg_if;
pub mod fileserv;
cfg_if! { if #[cfg(feature = "hydrate")] {
use leptos::*;
use wasm_bindgen::prelude::wasm_bindgen;
use demo::App;
#[wasm_bindgen]
pub fn hydrate() {
// initializes logging using the `log` crate
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
leptos::mount_to_body(App);
}
}}

43
examples/ssr_axum/src/main.rs Normal file
View file

@ -0,0 +1,43 @@
#[cfg(feature = "ssr")]
#[tokio::main]
async fn main() {
use axum::{routing::post, Router};
use demo::App;
use leptos::*;
use leptos_axum::{generate_route_list, LeptosRoutes};
use ssr_axum::fileserv::file_and_error_handler;
simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
// Setting get_configuration(None) means we'll be using cargo-leptos's env values
// For deployment these variables are:
// <https://github.com/leptos-rs/start-axum#executing-a-server-on-a-remote-machine-without-the-toolchain>
// Alternately a file can be specified such as Some("Cargo.toml")
// The file would need to be included with the executable when moved to deployment
let conf = get_configuration(None).await.unwrap();
let leptos_options = conf.leptos_options;
let addr = leptos_options.site_addr;
let routes = generate_route_list(App);
// build our application with a route
let app = Router::new()
.route("/api/*fn_name", post(leptos_axum::handle_server_fns))
.leptos_routes(&leptos_options, routes, App)
.fallback(file_and_error_handler)
.with_state(leptos_options);
// run our app with hyper
// `axum::Server` is a re-export of `hyper::Server`
log::info!("listening on http://{}", &addr);
axum::Server::bind(&addr)
.serve(app.into_make_service())
.await
.unwrap();
}
#[cfg(not(feature = "ssr"))]
pub fn main() {
// no client-side main function
// unless we want this to work with e.g., Trunk for a purely client-side app
// see lib.rs for hydration function instead
}

43
src/color_picker/mod.rs
View file

@ -4,8 +4,8 @@ mod theme;
use crate::components::{Binder, Follower, FollowerPlacement}; use crate::components::{Binder, Follower, FollowerPlacement};
use crate::{use_theme, utils::mount_style, Theme}; use crate::{use_theme, utils::mount_style, Theme};
pub use color::*; pub use color::*;
use leptos::leptos_dom::helpers::WindowListenerHandle;
use leptos::*; use leptos::*;
use leptos::{leptos_dom::helpers::WindowListenerHandle, wasm_bindgen::__rt::IntoJsResult};
pub use theme::ColorPickerTheme; pub use theme::ColorPickerTheme;
#[component] #[component]
@ -65,25 +65,30 @@ pub fn ColorPicker(#[prop(optional, into)] value: RwSignal<RGBA>) -> impl IntoVi
let show_popover = move |_| { let show_popover = move |_| {
is_show_popover.set(true); is_show_popover.set(true);
}; };
let timer = window_event_listener(ev::click, move |ev| {
let el = ev.target(); #[cfg(any(feature = "csr", feature = "hydrate"))]
let mut el: Option<web_sys::Element> = {
el.into_js_result().map_or(None, |el| Some(el.into())); use leptos::wasm_bindgen::__rt::IntoJsResult;
let body = document().body().unwrap(); let timer = window_event_listener(ev::click, move |ev| {
while let Some(current_el) = el { let el = ev.target();
if current_el == *body { let mut el: Option<web_sys::Element> =
break; el.into_js_result().map_or(None, |el| Some(el.into()));
}; let body = document().body().unwrap();
if current_el == ***popover_ref.get().unwrap() while let Some(current_el) = el {
|| current_el == ***trigger_ref.get().unwrap() if current_el == *body {
{ break;
return; };
if current_el == ***popover_ref.get().unwrap()
|| current_el == ***trigger_ref.get().unwrap()
{
return;
}
el = current_el.parent_element();
} }
el = current_el.parent_element(); is_show_popover.set(false);
} });
is_show_popover.set(false); on_cleanup(move || timer.remove());
}); }
on_cleanup(move || timer.remove());
view! { view! {
<Binder target_ref=trigger_ref> <Binder target_ref=trigger_ref>

25
src/components/binder/mod.rs
View file

@ -2,8 +2,8 @@ mod get_placement_style;
use crate::{ use crate::{
components::Teleport, components::Teleport,
utils::mount_style,
utils::{add_event_listener, EventListenerHandle}, utils::{add_event_listener, EventListenerHandle},
utils::{mount_style, with_hydration_off},
}; };
use get_placement_style::get_follower_placement_style; use get_placement_style::get_follower_placement_style;
pub use get_placement_style::FollowerPlacement; pub use get_placement_style::FollowerPlacement;
@ -194,16 +194,19 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
is_show is_show
}); });
let children = html::div() let children = with_hydration_off(|| {
.classes("thaw-binder-follower-container") html::div()
.style("display", move || (!is_show.get()).then_some("none")) .classes("thaw-binder-follower-container")
.child( .style("display", move || (!is_show.get()).then_some("none"))
html::div() .child(
.classes("thaw-binder-follower-content") html::div()
.node_ref(content_ref) .classes("thaw-binder-follower-content")
.attr("style", move || content_style.get()) .node_ref(content_ref)
.child(children()), .attr("style", move || content_style.get())
); .child(children()),
)
});
view! { <Teleport element=children/> } view! { <Teleport element=children/> }
} }

48
src/components/teleport/mod.rs
View file

@ -1,5 +1,6 @@
use cfg_if::cfg_if; use cfg_if::cfg_if;
use leptos::{html::AnyElement, *}; use leptos::{html::AnyElement, *};
/// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56 /// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
#[component] #[component]
pub fn Teleport( pub fn Teleport(
@ -7,8 +8,11 @@ pub fn Teleport(
#[prop(optional, into)] element: Option<HtmlElement<AnyElement>>, #[prop(optional, into)] element: Option<HtmlElement<AnyElement>>,
#[prop(optional)] children: Option<Children>, #[prop(optional)] children: Option<Children>,
) -> impl IntoView { ) -> impl IntoView {
cfg_if! { if #[cfg(target_arch = "wasm32")] { cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] {
use leptos::wasm_bindgen::JsCast; use leptos::wasm_bindgen::JsCast;
use leptos::leptos_dom::Mountable;
use crate::utils::with_hydration_off;
let mount = mount.unwrap_or_else(|| { let mount = mount.unwrap_or_else(|| {
document() document()
.body() .body()
@ -16,21 +20,41 @@ pub fn Teleport(
.unchecked_into() .unchecked_into()
}); });
let render_root = if let Some(element) = element { if let Some(element) = element {
element 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 { } else if let Some(children) = children {
html::div().child(children()).into_any() let container = document()
.create_element("div")
.expect("element creation to work");
with_hydration_off(|| {
let _ = container.append_child(&children().into_view().get_mountable_node());
});
let render_root = container;
let _ = mount.append_child(&render_root);
on_cleanup(move || {
let _ = mount.remove_child(&render_root);
});
} else { } else {
return; return;
}; };
_ = mount.append_child(&render_root);
on_cleanup(move || {
_ = mount.remove_child(&render_root);
});
} else { } else {
_ = mount; let _ = mount;
_ = element; #[cfg(not(feature = "ssr"))]
_ = children; {
let _ = element;
let _ = children;
}
#[cfg(feature = "ssr")]
if element.is_none() {
if let Some(children) = children {
// Consumed hydration `id`
let _ = children();
}
}
}} }}
} }

1
src/global_style/mod.rs
View file

@ -20,6 +20,7 @@ pub fn GlobalStyle() -> impl IntoView {
_ = body _ = body
.style() .style()
.set_property("color-scheme", &theme.common.color_scheme); .set_property("color-scheme", &theme.common.color_scheme);
_ = body.style().set_property("margin", "0");
} }
}); });
}); });

42
src/select/mod.rs
View file

@ -6,7 +6,6 @@ use crate::{
utils::mount_style, utils::mount_style,
Theme, Theme,
}; };
use leptos::wasm_bindgen::__rt::IntoJsResult;
use leptos::*; use leptos::*;
use std::hash::Hash; use std::hash::Hash;
pub use theme::SelectTheme; pub use theme::SelectTheme;
@ -73,25 +72,30 @@ where
let show_menu = move |_| { let show_menu = move |_| {
is_show_menu.set(true); is_show_menu.set(true);
}; };
let timer = window_event_listener(ev::click, move |ev| {
let el = ev.target(); #[cfg(any(feature = "csr", feature = "hydrate"))]
let mut el: Option<web_sys::Element> = {
el.into_js_result().map_or(None, |el| Some(el.into())); use leptos::wasm_bindgen::__rt::IntoJsResult;
let body = document().body().unwrap(); let timer = window_event_listener(ev::click, move |ev| {
while let Some(current_el) = el { let el = ev.target();
if current_el == *body { let mut el: Option<web_sys::Element> =
break; el.into_js_result().map_or(None, |el| Some(el.into()));
}; let body = document().body().unwrap();
if current_el == ***menu_ref.get().unwrap() while let Some(current_el) = el {
|| current_el == ***trigger_ref.get().unwrap() if current_el == *body {
{ break;
return; };
if current_el == ***menu_ref.get().unwrap()
|| current_el == ***trigger_ref.get().unwrap()
{
return;
}
el = current_el.parent_element();
} }
el = current_el.parent_element(); is_show_menu.set(false);
} });
is_show_menu.set(false); on_cleanup(move || timer.remove());
}); }
on_cleanup(move || timer.remove());
let temp_options = options.clone(); let temp_options = options.clone();
let select_option_label = create_memo(move |_| match value.get() { let select_option_label = create_memo(move |_| match value.get() {

134
src/tabs/mod.rs
View file

@ -13,6 +13,24 @@ pub use tab::*;
pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView { pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
mount_style("tabs", include_str!("./tabs.css")); mount_style("tabs", include_str!("./tabs.css"));
let tab_options_vec = create_rw_signal(vec![]); let tab_options_vec = create_rw_signal(vec![]);
view! {
<Provider value=TabsInjection {
active_key: value,
tab_options_vec,
}>
<TabsInner value tab_options_vec children/>
</Provider>
}
}
#[component]
fn TabsInner(
value: RwSignal<String>,
tab_options_vec: RwSignal<Vec<TabOption>>,
children: Children,
) -> impl IntoView {
mount_style("tabs", include_str!("./tabs.css"));
let theme = use_theme(Theme::light); let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| { let css_vars = create_memo(move |_| {
let mut css_vars = String::new(); let mut css_vars = String::new();
@ -35,72 +53,66 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
}); });
let label_list_ref = create_node_ref::<html::Div>(); let label_list_ref = create_node_ref::<html::Div>();
let children = children();
view! { view! {
<Provider value=TabsInjection { <div class="thaw-tabs" style=move || css_vars.get()>
active_key: value, <div class="thaw-tabs__label-list" ref=label_list_ref>
tab_options_vec, <For
}> each=move || tab_options_vec.get()
<div class="thaw-tabs" style=move || css_vars.get()> key=move |v| v.key.clone()
<div class="thaw-tabs__label-list" ref=label_list_ref> children=move |option| {
<For let label_ref = create_node_ref::<html::Span>();
each=move || tab_options_vec.get() let TabOption { key, label } = option;
key=move |v| v.key.clone() create_effect({
children=move |option| { let key = key.clone();
let label_ref = create_node_ref::<html::Span>(); move |_| {
let TabOption { key, label } = option; let Some(label) = label_ref.get() else { return;
create_effect({ };
let key = key.clone(); let Some(label_list) = label_list_ref.get() else { return;
move |_| { };
let Some(label) = label_ref.get() else { if key.clone() == value.get() {
return; request_animation_frame(move || {
}; let list_rect = label_list.get_bounding_client_rect();
let Some(label_list) = label_list_ref.get() else { let rect = label.get_bounding_client_rect();
return; label_line
}; .set(
if key.clone() == value.get() { Some(TabsLabelLine {
request_animation_frame(move || { width: rect.width(),
let list_rect = label_list.get_bounding_client_rect(); left: rect.left() - list_rect.left(),
let rect = label.get_bounding_client_rect(); }),
label_line );
.set( });
Some(TabsLabelLine {
width: rect.width(),
left: rect.left() - list_rect.left(),
}),
);
});
}
} }
});
view! {
<span
class="thaw-tabs__label"
class=(
"thaw-tabs__label--active",
{
let key = key.clone();
move || key == value.get()
},
)
on:click={
let key = key.clone();
move |_| value.set(key.clone())
}
ref=label_ref
>
{label}
</span>
} }
} });
/> view! {
<span
class="thaw-tabs__label"
class=(
"thaw-tabs__label--active",
{
let key = key.clone();
move || key == value.get()
},
)
<span class="thaw-tabs-label__line" style=move || label_line_style.get()></span> on:click={
</div> let key = key.clone();
<div>{children()}</div> move |_| value.set(key.clone())
}
ref=label_ref
>
{label}
</span>
}
}
/>
<span class="thaw-tabs-label__line" style=move || label_line_style.get()></span>
</div> </div>
</Provider> <div>{children}</div>
</div>
} }
} }

2
src/utils/event_listener.rs
View file

@ -1,5 +1,5 @@
use ::wasm_bindgen::{prelude::Closure, JsCast};
use leptos::{html::AnyElement, *}; use leptos::{html::AnyElement, *};
use wasm_bindgen::{prelude::Closure, JsCast};
pub fn add_event_listener<E: ev::EventDescriptor + 'static>( pub fn add_event_listener<E: ev::EventDescriptor + 'static>(
target: HtmlElement<AnyElement>, target: HtmlElement<AnyElement>,

12
src/utils/mod.rs
View file

@ -13,3 +13,15 @@ pub(crate) use mount_style::mount_style;
pub(crate) use provider::Provider; pub(crate) use provider::Provider;
pub use signal::SignalWatch; pub use signal::SignalWatch;
pub(crate) use stored_maybe_signal::*; pub(crate) use stored_maybe_signal::*;
pub(crate) fn with_hydration_off<T>(f: impl FnOnce() -> T) -> T {
#[cfg(feature = "hydrate")]
{
use leptos::leptos_dom::HydrationCtx;
HydrationCtx::with_hydration_off(f)
}
#[cfg(not(feature = "hydrate"))]
{
f()
}
}

46
src/utils/mount_style.rs
View file

@ -1,20 +1,34 @@
use leptos::document; use cfg_if::cfg_if;
pub fn mount_style(id: &str, content: &str) { pub fn mount_style(id: &str, content: &'static str) {
let head = document().head().expect("head no exist"); cfg_if! {
let style = head if #[cfg(feature = "ssr")] {
.query_selector(&format!("style[csr-id=\"thaw-{id}\"]")) use leptos::html::style;
.expect("query style element error"); use leptos_meta::use_head;
let meta = use_head();
let style_el = style().attr("csr-id", format!("thaw-{id}")).child(content);
meta.tags.register(format!("leptos-thaw-{id}").into(), style_el.into_any());
} else {
use leptos::document;
let head = document().head().expect("head no exist");
let style = head
.query_selector(&format!("style[csr-id=\"thaw-{id}\"]"))
.expect("query style element error");
if style.is_some() { #[cfg(feature = "hydrate")]
return; let _ = leptos::leptos_dom::HydrationCtx::id();
if style.is_some() {
return;
}
let style = document()
.create_element("style")
.expect("create style element error");
_ = style.set_attribute("csr-id", &format!("thaw-{id}"));
style.set_text_content(Some(content));
_ = head.append_child(&style);
}
} }
let style = document()
.create_element("style")
.expect("create style element error");
_ = style.set_attribute("csr-id", &format!("thaw-{id}"));
style.set_text_content(Some(content));
_ = head.append_child(&style);
} }