adam/leptos-use
1
0
Fork 0
mirror of https://github.com/adoyle0/leptos-use.git synced 2025-02-02 10:54:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

rustfmt for all examples

Browse source
This commit is contained in:
Maccesch 2023-07-27 19:48:21 +01:00
parent 2e08874db0
commit 9a998b1dd4
42 changed files with 642 additions and 416 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
examples/on_click_outside/src/main.rs
View file

@ -10,58 +10,67 @@ fn Demo() -> impl IntoView {
let _ = on_click_outside(modal_ref, move |_| set_show_modal.set(false)); let _ = on_click_outside(modal_ref, move |_| set_show_modal.set(false));
view! { <button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button> view! {
<button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
<Show when=move || show_modal.get() fallback=|| ()> <Show when=move || show_modal.get() fallback=|| ()>
<div node_ref=modal_ref class="modal"> <div node_ref=modal_ref class="modal">
<div class="inner"> <div class="inner">
<button class="button small" title="Close" on:click=move |_| set_show_modal.set(false)>"𝖷"</button> <button
class="button small"
title="Close"
on:click=move |_| set_show_modal.set(false)
>
"𝖷"
</button>
<p class="heading">"Demo Modal"</p> <p class="heading">"Demo Modal"</p>
<p>"Click outside this modal to close it."</p> <p>"Click outside this modal to close it."</p>
</div> </div>
</div> </div>
</Show> </Show>
<style>" <style>
.modal { "
position: fixed; .modal {
left: 50%; position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%); top: 50%;
width: 420px; transform: translate(-50%, -50%);
max-width: 100%; width: 420px;
z-index: 10; max-width: 100%;
} z-index: 10;
.inner { }
background-color: var(--bg); .inner {
padding: 0.4em 2em; background-color: var(--bg);
border-radius: 5px; padding: 0.4em 2em;
border: 1px solid var(--theme-popup-border); border-radius: 5px;
box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.1); border: 1px solid var(--theme-popup-border);
} box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.1);
.dropdown-inner { }
background-color: var(--bg); .dropdown-inner {
padding: 0.5em; background-color: var(--bg);
position: absolute; padding: 0.5em;
left: 0; position: absolute;
z-index: 10; left: 0;
border-radius: 5px; z-index: 10;
border: 1px solid var(--theme-popup-border); border-radius: 5px;
box-shadow: 2px 2px 5px rgba(10, 10, 10, 0.1); border: 1px solid var(--theme-popup-border);
} box-shadow: 2px 2px 5px rgba(10, 10, 10, 0.1);
.heading { }
font-weight: bold; .heading {
font-size: 1.4rem; font-weight: bold;
margin-bottom: 2rem; font-size: 1.4rem;
} margin-bottom: 2rem;
.modal > .inner > .button { }
position: absolute; .modal > .inner > .button {
top: 0; position: absolute;
right: 0; top: 0;
margin: 0; right: 0;
font-weight: bold; margin: 0;
} font-weight: bold;
"</style> }
"
</style>
} }
} }
@ -70,6 +79,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

2
examples/signal_debounced/src/main.rs
View file

@ -14,6 +14,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

2
examples/signal_throttled/src/main.rs
View file

@ -14,6 +14,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

16
examples/ssr/src/app.rs
View file

@ -14,7 +14,6 @@ pub fn App() -> impl IntoView {
provide_meta_context(); provide_meta_context();
view! { view! {
<Stylesheet id="leptos" href="/pkg/start-axum.css"/> <Stylesheet id="leptos" href="/pkg/start-axum.css"/>
<Title text="Leptos-Use SSR Example"/> <Title text="Leptos-Use SSR Example"/>
@ -22,9 +21,7 @@ pub fn App() -> impl IntoView {
<Router fallback=|| { <Router fallback=|| {
let mut outside_errors = Errors::default(); let mut outside_errors = Errors::default();
outside_errors.insert_with_default_key(AppError::NotFound); outside_errors.insert_with_default_key(AppError::NotFound);
view! { <ErrorTemplate outside_errors/> view! { <ErrorTemplate outside_errors/> }.into_view()
}
.into_view()
}> }>
<main> <main>
<Routes> <Routes>
@ -67,10 +64,11 @@ fn HomePage() -> impl IntoView {
); );
debounced_fn(); debounced_fn();
view! { <h1>"Leptos-Use SSR Example"</h1> view! {
<button on:click=on_click>"Click Me: " { count }</button> <h1>"Leptos-Use SSR Example"</h1>
<p>"Locale \"zh-Hans-CN-u-nu-hanidec\": " { zh_count }</p> <button on:click=on_click>"Click Me: " {count}</button>
<p>"Press any key: " { key }</p> <p>"Locale "zh-Hans-CN-u-nu-hanidec": " {zh_count}</p>
<p>"Debounced called: " { debounce_value }</p> <p>"Press any key: " {key}</p>
<p>"Debounced called: " {debounce_value}</p>
} }
} }

11
examples/ssr/src/error_template.rs
View file

@ -53,18 +53,19 @@ pub fn ErrorTemplate(
} }
}} }}
view! { <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1> view! {
<h1>{if errors.len() > 1 { "Errors" } else { "Error" }}</h1>
<For <For
// a function that returns the items we're iterating over; a signal is fine // a function that returns the items we're iterating over; a signal is fine
each= move || {errors.clone().into_iter().enumerate()} each=move || { errors.clone().into_iter().enumerate() }
// a unique key for each item as a reference // a unique key for each item as a reference
key=|(index, _error)| *index key=|(index, _error)| *index
// renders each item to a view // renders each item to a view
view= move |error| { view=move |error| {
let error_string = error.1.to_string(); let error_string = error.1.to_string();
let error_code= error.1.status_code(); let error_code = error.1.status_code();
view! { view! {
<h2>{error_code.to_string()}</h2> <h2>{error_code.to_string()}</h2>
<p>"Error: " {error_string}</p> <p>"Error: " {error_string}</p>
} }
} }

5
examples/use_abs/src/main.rs
View file

@ -8,7 +8,8 @@ fn Demo() -> impl IntoView {
let result: Signal<f64> = use_abs(value); let result: Signal<f64> = use_abs(value);
view! { <input view! {
<input
class="block" class="block"
prop:value=move || value.get() prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap()) on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@ -27,6 +28,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

14
examples/use_active_element/src/main.rs
View file

@ -15,21 +15,21 @@ fn Demo() -> impl IntoView {
) )
}; };
view! { <Note class="mb-3">"Select the inputs below to see the changes"</Note> view! {
<Note class="mb-3">"Select the inputs below to see the changes"</Note>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2"> <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
<For <For
each=move || (1..7) each=move || (1..7)
key=|i| *i key=|i| *i
view=move |i| view! { <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i /> view=move |i| {
view! { <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i/> }
} }
/> />
</div> </div>
<div class="mt-2"> <div class="mt-2">"Current Active Element: " <span class="text-primary">{key}</span></div>
"Current Active Element: "
<span class="text-primary">{ key }</span>
</div>
} }
} }
@ -38,6 +38,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

175
examples/use_breakpoints/src/main.rs
View file

@ -24,118 +24,181 @@ fn Demo() -> impl IntoView {
let label_classes = "justify-self-end".to_string(); let label_classes = "justify-self-end".to_string();
let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string(); let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string();
view! { <div class="grid grid-cols-2 gap-x-4 gap-y-3"> view! {
<div class="grid grid-cols-2 gap-x-4 gap-y-3">
<div class=label_classes.clone()>"Current breakpoints :"</div> <div class=label_classes.clone()>"Current breakpoints :"</div>
<code>{move || format!("{:?}", current.get()) }</code> <code>{move || format!("{:?}", current.get())}</code>
<div class=label_classes.clone()> <div class=label_classes.clone()>
<code class="font-bold">"xs"</code> <code class="font-bold">"xs"</code>
<small> <small>" (< " {move || sm_width.to_string()} "px)"</small>
" (< "
{ move || sm_width.to_string() }
"px)"
</small>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> xmlns="http://www.w3.org/2000/svg"
<path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" /> class=svg_classes.clone()
<path d="M11 4h2" /> width="24"
<path d="M12 17v.01" /> viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z"></path>
<path d="M11 4h2"></path>
<path d="M12 17v.01"></path>
</svg> </svg>
":" ":"
</div> </div>
<BooleanDisplay value=xs /> <BooleanDisplay value=xs/>
<div class=label_classes.clone()> <div class=label_classes.clone()>
<code class="font-bold">"xs"</code> <code class="font-bold">"xs"</code>
<small> <small>" (<= " {move || sm_width.to_string()} "px)"</small>
" (<= "
{ move || sm_width.to_string() }
"px)"
</small>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> xmlns="http://www.w3.org/2000/svg"
<path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" /> class=svg_classes.clone()
<path d="M11 4h2" /> width="24"
<path d="M12 17v.01" /> viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z"></path>
<path d="M11 4h2"></path>
<path d="M12 17v.01"></path>
</svg> </svg>
":" ":"
</div> </div>
<BooleanDisplay value=xse /> <BooleanDisplay value=xse/>
<div class=label_classes.clone()> <div class=label_classes.clone()>
<code class="font-bold">"sm"</code> <code class="font-bold">"sm"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> xmlns="http://www.w3.org/2000/svg"
<path d="M3 6m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /> class=svg_classes.clone()
<path d="M20 11v2" /> width="24"
<path d="M7 12h-.01" /> viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 6m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
<path d="M20 11v2"></path>
<path d="M7 12h-.01"></path>
</svg> </svg>
":" ":"
</div> </div>
<BooleanDisplay value=sm /> <BooleanDisplay value=sm/>
<div class=label_classes.clone()> <div class=label_classes.clone()>
<code class="font-bold">"md"</code> <code class="font-bold">"md"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> xmlns="http://www.w3.org/2000/svg"
<path d="M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16z" /> class=svg_classes.clone()
<path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16z"></path>
<path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path>
</svg> </svg>
":" ":"
</div> </div>
<BooleanDisplay value=md /> <BooleanDisplay value=md/>
<div class=label_classes.clone()> <div class=label_classes.clone()>
<code class="font-bold">"lg"</code> <code class="font-bold">"lg"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> xmlns="http://www.w3.org/2000/svg"
<path d="M3 19l18 0" /> class=svg_classes.clone()
<path d="M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z" /> width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 19l18 0"></path>
<path d="M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"></path>
</svg> </svg>
":" ":"
</div> </div>
<BooleanDisplay value=lg /> <BooleanDisplay value=lg/>
<div class=label_classes.clone()> <div class=label_classes.clone()>
<code class="font-bold">"xl"</code> <code class="font-bold">"xl"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> xmlns="http://www.w3.org/2000/svg"
<path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z" /> class=svg_classes.clone()
<path d="M7 20h10" /> width="24"
<path d="M9 16v4" /> viewBox="0 0 24 24"
<path d="M15 16v4" /> stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z"></path>
<path d="M7 20h10"></path>
<path d="M9 16v4"></path>
<path d="M15 16v4"></path>
</svg> </svg>
":" ":"
</div> </div>
<BooleanDisplay value=xl /> <BooleanDisplay value=xl/>
<div class=label_classes.clone()> <div class=label_classes.clone()>
<code class="font-bold">"xxl"</code> <code class="font-bold">"xxl"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> xmlns="http://www.w3.org/2000/svg"
<path d="M13 16h-9a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v5.5" /> class=svg_classes.clone()
<path d="M7 20h6.5" /> width="24"
<path d="M9 16v4" /> viewBox="0 0 24 24"
<path d="M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5" /> stroke-width="1.5"
<path d="M19 21v1m0 -8v1" /> stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M13 16h-9a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v5.5"></path>
<path d="M7 20h6.5"></path>
<path d="M9 16v4"></path>
<path d="M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5"></path>
<path d="M19 21v1m0 -8v1"></path>
</svg> </svg>
":" ":"
</div> </div>
<BooleanDisplay value=xxl /> <BooleanDisplay value=xxl/>
</div> </div>
} }
} }
@ -145,6 +208,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

5
examples/use_ceil/src/main.rs
View file

@ -8,7 +8,8 @@ fn Demo() -> impl IntoView {
let result: Signal<f64> = use_ceil(value); let result: Signal<f64> = use_ceil(value);
view! { <input view! {
<input
class="block" class="block"
prop:value=move || value.get() prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap()) on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@ -27,6 +28,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

7
examples/use_color_mode/src/main.rs
View file

@ -30,9 +30,8 @@ fn Demo() -> impl IntoView {
UseCycleListOptions::default().initial_value(Some((mode, set_mode).into())), UseCycleListOptions::default().initial_value(Some((mode, set_mode).into())),
); );
view! { <button on:click=move |_| next()> view! {
{ move || format!("{}", state.get()) } <button on:click=move |_| next()>{move || format!("{}", state.get())}</button>
</button>
<Note>"Click to change the color mode"</Note> <Note>"Click to change the color mode"</Note>
} }
} }
@ -42,6 +41,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

13
examples/use_css_var/src/main.rs
View file

@ -33,16 +33,21 @@ fn Demo() -> impl IntoView {
) )
}; };
view! { <div> view! {
<div>
<div node_ref=el style="--color: #7fa998; color: var(--color)"> <div node_ref=el style="--color: #7fa998; color: var(--color)">
"Sample text, " {color} "Sample text, "
{color}
</div> </div>
<button on:click=switch_color>"Change color value"</button> <button on:click=switch_color>"Change color value"</button>
</div> </div>
<div> <div>
<div node_ref=elv style=style class="mt-4"> <div node_ref=elv style=style class="mt-4">
"Sample text, " {key} ": " {color_val} "Sample text, "
{key}
": "
{color_val}
</div> </div>
<button on:click=change_var>"Change color variable"</button> <button on:click=change_var>"Change color variable"</button>
</div> </div>
@ -54,6 +59,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

5
examples/use_cycle_list/src/main.rs
View file

@ -10,7 +10,8 @@ fn Demo() -> impl IntoView {
"Dog", "Cat", "Lizard", "Shark", "Whale", "Dolphin", "Octopus", "Seal", "Dog", "Cat", "Lizard", "Shark", "Whale", "Dolphin", "Octopus", "Seal",
]); ]);
view! { <div> view! {
<div>
<div class="text-primary text-lg font-bold">{state}</div> <div class="text-primary text-lg font-bold">{state}</div>
<button on:click=move |_| { prev() }>"Prev"</button> <button on:click=move |_| { prev() }>"Prev"</button>
<button on:click=move |_| { next() }>"Next"</button> <button on:click=move |_| { next() }>"Next"</button>
@ -23,6 +24,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

18
examples/use_debounce_fn/src/main.rs
View file

@ -13,17 +13,17 @@ fn Demo() -> impl IntoView {
DebounceOptions::default().max_wait(Some(5000.0)), DebounceOptions::default().max_wait(Some(5000.0)),
); );
view! { <button view! {
on:click=move |_| { <button on:click=move |_| {
set_click_count.set(click_count.get_untracked() + 1); set_click_count.set(click_count.get_untracked() + 1);
debounced_fn(); debounced_fn();
} }>
>
"Smash me!" "Smash me!"
</button> </button>
<Note>"Delay is set to 1000ms and max_wait is set to 5000ms for this demo."</Note> <Note>"Delay is set to 1000ms and max_wait is set to 5000ms for this demo."</Note>
<p>"Button clicked: " { click_count }</p> <p>"Button clicked: " {click_count}</p>
<p>"Event handler called: " { debounced_count }</p> <p>"Event handler called: " {debounced_count}</p>
} }
} }
@ -32,6 +32,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

5
examples/use_document_visibility/src/main.rs
View file

@ -30,8 +30,7 @@ fn Demo() -> impl IntoView {
false, false,
); );
view! { <div>{ message }</div> view! { <div>{message}</div> }
}
} }
fn main() { fn main() {
@ -39,6 +38,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

10
examples/use_draggable/src/main.rs
View file

@ -20,7 +20,8 @@ fn Demo() -> impl IntoView {
.prevent_default(true), .prevent_default(true),
); );
view! { <p class="italic op50 text-center"> view! {
<p class="italic op50 text-center">
Check the floating box Check the floating box
</p> </p>
<div <div
@ -30,7 +31,10 @@ fn Demo() -> impl IntoView {
> >
"👋 Drag me!" "👋 Drag me!"
<div class="text-sm opacity-50"> <div class="text-sm opacity-50">
I am at { move || x().round() }, { move || y().round() } I am
{move || x().round()}
)
{move || y().round()}
</div> </div>
</div> </div>
} }
@ -41,6 +45,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

48
examples/use_drop_zone/src/main.rs
View file

@ -19,30 +19,52 @@ fn Demo() -> impl IntoView {
.on_enter(move |_| set_dropped(false)), .on_enter(move |_| set_dropped(false)),
); );
view! { <div class="flex"> view! {
<div class="flex">
<div class="w-full h-auto relative"> <div class="w-full h-auto relative">
<p>Drop files into dropZone</p> <p>
Drop files into dropZone
</p>
<img width="64" src="use_drop_zone/demo/img/leptos-use-logo.svg" alt="Drop me"/> <img width="64" src="use_drop_zone/demo/img/leptos-use-logo.svg" alt="Drop me"/>
<div <div
node_ref=drop_zone_el node_ref=drop_zone_el
class="flex flex-col w-full min-h-[200px] h-auto bg-gray-400/10 justify-center items-center pt-6" class="flex flex-col w-full min-h-[200px] h-auto bg-gray-400/10 justify-center items-center pt-6"
> >
<div> <div>
is_over_drop_zone: <BooleanDisplay value=is_over_drop_zone /> is_over_drop_zone:
<BooleanDisplay value=is_over_drop_zone/>
</div> </div>
<div> <div>
dropped: <BooleanDisplay value=dropped /> dropped:
<BooleanDisplay value=dropped/>
</div> </div>
<div class="flex flex-wrap justify-center items-center"> <div class="flex flex-wrap justify-center items-center">
<For each=files key=|f| f.name() view=move |file| { <For
view! { <div class="w-200px bg-black-200/10 ma-2 pa-6"> each=files
<p>Name: {file.name()}</p> key=|f| f.name()
<p>Size: {file.size()}</p> view=move |file| {
<p>Type: {file.type_()}</p> view! {
<p>Last modified: {file.last_modified()}</p> <div class="w-200px bg-black-200/10 ma-2 pa-6">
</div> <p>
Name:
{file.name()}
</p>
<p>
Size:
{file.size()}
</p>
<p>
Type:
{file.type_()}
</p>
<p>
Last modified:
{file.last_modified()}
</p>
</div>
}
} }
} /> />
</div> </div>
</div> </div>
</div> </div>
@ -55,6 +77,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

7
examples/use_element_hover/src/main.rs
View file

@ -14,7 +14,10 @@ fn Demo() -> impl IntoView {
.delay_leave(600), .delay_leave(600),
); );
view! { <button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button> view! {
<button node_ref=el>
{move || if is_hovered.get() { "Thank you!" } else { "Hover me" }}
</button>
} }
} }
@ -23,6 +26,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

7
examples/use_element_size/src/main.rs
View file

@ -11,13 +11,14 @@ fn Demo() -> impl IntoView {
let text = move || format!("width: {}\nheight: {}", width.get(), height.get()); let text = move || format!("width: {}\nheight: {}", width.get(), height.get());
view! { <Note class="mb-2">"Resize the box to see changes"</Note> view! {
<Note class="mb-2">"Resize the box to see changes"</Note>
<textarea <textarea
node_ref=el node_ref=el
readonly readonly
class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10" class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10"
prop:value=text prop:value=text
/> ></textarea>
} }
} }
@ -26,6 +27,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

13
examples/use_element_visibility/src/main.rs
View file

@ -9,7 +9,8 @@ fn Demo() -> impl IntoView {
let is_visible = use_element_visibility(el); let is_visible = use_element_visibility(el);
view! { <div> view! {
<div>
<Note class="mb-4">"Info on the right bottom corner"</Note> <Note class="mb-4">"Info on the right bottom corner"</Note>
<div node_ref=el class="max-w-lg relative area dark:bg-gray-800 shadow-lg z-60"> <div node_ref=el class="max-w-lg relative area dark:bg-gray-800 shadow-lg z-60">
"Target Element (scroll down)" "Target Element (scroll down)"
@ -17,8 +18,12 @@ fn Demo() -> impl IntoView {
</div> </div>
<div class="float m-5 area shadow-lg"> <div class="float m-5 area shadow-lg">
"Element " "Element "
<BooleanDisplay value=is_visible true_str="inside" false_str="outside" class="font-bold"/> <BooleanDisplay
" the viewport" value=is_visible
true_str="inside"
false_str="outside"
class="font-bold"
/> " the viewport"
</div> </div>
} }
} }
@ -28,6 +33,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

23
examples/use_event_listener/src/main.rs
View file

@ -22,11 +22,13 @@ fn Demo() -> impl IntoView {
let (cond, set_cond) = create_signal(true); let (cond, set_cond) = create_signal(true);
view! { <p>"Check in the dev tools console"</p> view! {
<p>"Check in the dev tools console"</p>
<p> <p>
<label> <label>
<input <input
type="checkbox" on:change=move |evt| set_cond.set(event_target_checked(&evt)) type="checkbox"
on:change=move |evt| set_cond.set(event_target_checked(&evt))
prop:checked=move || cond.get() prop:checked=move || cond.get()
/> />
"Condition enabled" "Condition enabled"
@ -34,13 +36,17 @@ fn Demo() -> impl IntoView {
</p> </p>
<Show <Show
when=move || cond.get() when=move || cond.get()
fallback=move || view! { <a node_ref=element href="#"> fallback=move || {
"Condition" view! {
<b>" false "</b> <a node_ref=element href="#">
"[click me]" "Condition"
</a> <b>" false "</b>
"[click me]"
</a>
}
} }
> >
<a node_ref=element href="#"> <a node_ref=element href="#">
"Condition " "Condition "
<b>"true"</b> <b>"true"</b>
@ -55,7 +61,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to_body(|| { mount_to_body(|| {
view! { <Demo /> view! { <Demo/> }
}
}) })
} }

100
examples/use_favicon/src/main.rs
View file

@ -10,41 +10,87 @@ fn Demo() -> impl IntoView {
let classes = "border border-solid border-b-4 rounded p-2 block border-gray-500/50 bg-[--bg] active:translate-y-1 active:border-b".to_string(); let classes = "border border-solid border-b-4 rounded p-2 block border-gray-500/50 bg-[--bg] active:translate-y-1 active:border-b".to_string();
let img_classes = "block".to_string(); let img_classes = "block".to_string();
view! { <p>"Click on an icon to change the favicon"</p> view! {
<p>"Click on an icon to change the favicon"</p>
<p class="flex gap-2"> <p class="flex gap-2">
<a class=classes.clone() href="#" on:click=move |e| { <a
e.prevent_default(); class=classes.clone()
set_icon.set(Some("favicon-leptos.ico".into())); href="#"
}> on:click=move |e| {
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-leptos.ico" alt="favicon-red" /> e.prevent_default();
set_icon.set(Some("favicon-leptos.ico".into()));
}
>
<img
class=img_classes.clone()
width="32"
src="use_favicon/demo/img/favicon-leptos.ico"
alt="favicon-red"
/>
</a> </a>
<a class=classes.clone() href="#" on:click=move |e| { <a
e.prevent_default(); class=classes.clone()
set_icon.set(Some("favicon-red.svg".into())); href="#"
}> on:click=move |e| {
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-red.svg" alt="favicon-red" /> e.prevent_default();
set_icon.set(Some("favicon-red.svg".into()));
}
>
<img
class=img_classes.clone()
width="32"
src="use_favicon/demo/img/favicon-red.svg"
alt="favicon-red"
/>
</a> </a>
<a class=classes.clone() href="#" on:click=move |e| { <a
e.prevent_default(); class=classes.clone()
set_icon.set(Some("favicon-green.svg".into())); href="#"
}> on:click=move |e| {
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-green.svg" alt="favicon-green" /> e.prevent_default();
set_icon.set(Some("favicon-green.svg".into()));
}
>
<img
class=img_classes.clone()
width="32"
src="use_favicon/demo/img/favicon-green.svg"
alt="favicon-green"
/>
</a> </a>
<a class=classes.clone() href="#" on:click=move |e| { <a
e.prevent_default(); class=classes.clone()
set_icon.set(Some("favicon-blue.svg".into())); href="#"
}> on:click=move |e| {
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-blue.svg" alt="favicon-blue" /> e.prevent_default();
set_icon.set(Some("favicon-blue.svg".into()));
}
>
<img
class=img_classes.clone()
width="32"
src="use_favicon/demo/img/favicon-blue.svg"
alt="favicon-blue"
/>
</a> </a>
<a class=classes.clone() href="#" on:click=move |e| { <a
e.prevent_default(); class=classes.clone()
set_icon.set(Some("favicon-orange.svg".into())); href="#"
}> on:click=move |e| {
<img class=img_classes width="32" src="use_favicon/demo/img/favicon-orange.svg" alt="favicon-orange" /> e.prevent_default();
set_icon.set(Some("favicon-orange.svg".into()));
}
>
<img
class=img_classes
width="32"
src="use_favicon/demo/img/favicon-orange.svg"
alt="favicon-orange"
/>
</a> </a>
</p> </p>
} }
@ -55,6 +101,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

5
examples/use_floor/src/main.rs
View file

@ -8,7 +8,8 @@ fn Demo() -> impl IntoView {
let result: Signal<f64> = use_floor(value); let result: Signal<f64> = use_floor(value);
view! { <input view! {
<input
class="block" class="block"
prop:value=move || value.get() prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap()) on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@ -27,6 +28,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

64
examples/use_intersection_observer/src/main.rs
View file

@ -25,7 +25,8 @@ fn Demo() -> impl IntoView {
UseIntersectionObserverOptions::default().root(Some(root)), UseIntersectionObserverOptions::default().root(Some(root)),
); );
view! { <div class="text-center"> view! {
<div class="text-center">
<label class="checkbox"> <label class="checkbox">
<input <input
type="checkbox" type="checkbox"
@ -39,6 +40,7 @@ fn Demo() -> impl IntoView {
} }
} }
/> />
<span>"Enabled"</span> <span>"Enabled"</span>
</label> </label>
</div> </div>
@ -52,34 +54,40 @@ fn Demo() -> impl IntoView {
<div class="text-center"> <div class="text-center">
"Element " "Element "
<BooleanDisplay value=is_visible true_str="inside" false_str="outside" class="font-bold"/> <BooleanDisplay
" the viewport" value=is_visible
true_str="inside"
false_str="outside"
class="font-bold"
/> " the viewport"
</div> </div>
<style>" <style>
.root { "
border: 2px dashed #ccc; .root {
height: 200px; border: 2px dashed #ccc;
margin: 2rem 1rem; height: 200px;
overflow-y: scroll; margin: 2rem 1rem;
} overflow-y: scroll;
}
.notice {
text-align: center; .notice {
padding: 3em 0; text-align: center;
margin-bottom: 300px; padding: 3em 0;
font-style: italic; margin-bottom: 300px;
font-size: 1.8rem; font-style: italic;
opacity: 0.8; font-size: 1.8rem;
} opacity: 0.8;
}
.target {
border: 2px dashed var(--brand-color); .target {
padding: 10px; border: 2px dashed var(--brand-color);
max-height: 150px; padding: 10px;
margin: 0 2rem 400px; max-height: 150px;
} margin: 0 2rem 400px;
"</style> }
"
</style>
} }
} }
@ -88,6 +96,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

7
examples/use_interval/src/main.rs
View file

@ -6,8 +6,9 @@ use leptos_use::{use_interval, UseIntervalReturn};
fn Demo() -> impl IntoView { fn Demo() -> impl IntoView {
let UseIntervalReturn { counter, .. } = use_interval(200); let UseIntervalReturn { counter, .. } = use_interval(200);
view! { <div> view! {
<p>"Interval fired: " { counter }</p> <div>
<p>"Interval fired: " {counter}</p>
</div> </div>
} }
} }
@ -17,6 +18,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

13
examples/use_interval_fn/src/main.rs
View file

@ -34,7 +34,8 @@ fn Demo() -> impl IntoView {
interval, interval,
); );
view! { <p>{move || word.get()}</p> view! {
<p>{move || word.get()}</p>
<p> <p>
"Interval:" "Interval:"
<input <input
@ -48,15 +49,15 @@ fn Demo() -> impl IntoView {
when=move || is_active.get() when=move || is_active.get()
fallback=move || { fallback=move || {
let resume = resume.clone(); let resume = resume.clone();
view! { <button on:click=move |_| resume()>"Resume"</button> view! { <button on:click=move |_| resume()>"Resume"</button> }
}
} }
> >
{ {
let pause = pause.clone(); let pause = pause.clone();
view! { <button on:click=move |_| pause()>"Pause"</button> view! { <button on:click=move |_| pause()>"Pause"</button> }
}
} }
</Show> </Show>
} }
} }
@ -66,6 +67,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

13
examples/use_intl_number_format/src/main.rs
View file

@ -29,7 +29,8 @@ fn Demo() -> impl IntoView {
); );
let in_num = in_nf.format::<f64>(number); let in_num = in_nf.format::<f64>(number);
view! { <input view! {
<input
class="block" class="block"
prop:value=number prop:value=number
on:input=move |e| set_number(event_target_value(&e).parse().unwrap()) on:input=move |e| set_number(event_target_value(&e).parse().unwrap())
@ -38,10 +39,10 @@ fn Demo() -> impl IntoView {
max="1000000" max="1000000"
step="0.01" step="0.01"
/> />
<p>"Number: " { number }</p> <p>"Number: " {number}</p>
<p>"German currency (EUR): " { de_num }</p> <p>"German currency (EUR): " {de_num}</p>
<p>"Japanese currency (JPY): " { ja_num }</p> <p>"Japanese currency (JPY): " {ja_num}</p>
<p>"Indian 3 max significant digits: " { in_num }</p> <p>"Indian 3 max significant digits: " {in_num}</p>
} }
} }
@ -50,6 +51,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

7
examples/use_media_query/src/main.rs
View file

@ -7,8 +7,9 @@ fn Demo() -> impl IntoView {
let is_large_screen = use_media_query("(min-width: 1024px)"); let is_large_screen = use_media_query("(min-width: 1024px)");
let is_dark_preferred = use_media_query("(prefers-color-scheme: dark)"); let is_dark_preferred = use_media_query("(prefers-color-scheme: dark)");
view! { <p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p> view! {
<p>"Is dark preferred: " <BooleanDisplay value=is_dark_preferred /></p> <p>"Is large screen: " <BooleanDisplay value=is_large_screen/></p>
<p>"Is dark preferred: " <BooleanDisplay value=is_dark_preferred/></p>
} }
} }
@ -17,6 +18,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

23
examples/use_mouse/src/main.rs
View file

@ -33,21 +33,32 @@ fn Demo() -> impl IntoView {
.coord_type(UseMouseCoordType::Custom(Extractor)), .coord_type(UseMouseCoordType::Custom(Extractor)),
); );
view! { <div node_ref=el> view! {
<div node_ref=el>
<p class="font-semibold">"Basic Usage"</p> <p class="font-semibold">"Basic Usage"</p>
<pre lang="yaml"> <pre lang="yaml">
{ move || format!(r#" x: {} {move || {
format!(
r#" x: {}
y: {} y: {}
source_type: {:?} source_type: {:?}
"#, mouse_default.x.get(), mouse_default.y.get(), mouse_default.source_type.get()) } "#, mouse_default.x.get(),
mouse_default.y.get(), mouse_default.source_type.get()
)
}}
</pre> </pre>
<p class="font-semibold">"Extractor Usage"</p> <p class="font-semibold">"Extractor Usage"</p>
<Note>"Only works when the mouse is over the demo element"</Note> <Note>"Only works when the mouse is over the demo element"</Note>
<pre lang="yaml"> <pre lang="yaml">
{ move || format!(r#" x: {} {move || {
format!(
r#" x: {}
y: {} y: {}
source_type: {:?} source_type: {:?}
"#, mouse_with_extractor.x.get(), mouse_with_extractor.y.get(), mouse_with_extractor.source_type.get()) } "#, mouse_with_extractor.x
.get(), mouse_with_extractor.y.get(), mouse_with_extractor.source_type.get()
)
}}
</pre> </pre>
</div> </div>
} }
@ -58,6 +69,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

8
examples/use_mutation_observer/src/main.rs
View file

@ -43,10 +43,12 @@ fn Demo() -> impl IntoView {
let enum_msgs = let enum_msgs =
Signal::derive(move || messages.get().into_iter().enumerate().collect::<Vec<_>>()); Signal::derive(move || messages.get().into_iter().enumerate().collect::<Vec<_>>());
view! { <div node_ref=el class=move || class_name.get() style=move || style.get()> view! {
<div node_ref=el class=move || class_name.get() style=move || style.get()>
<For <For
each=move || enum_msgs.get() each=move || enum_msgs.get()
key=|message| message.0 // list only grows so this is fine here // list only grows so this is fine here
key=|message| message.0
view=|message| view! { <div>"Mutation Attribute: " <code>{message.1}</code></div> } view=|message| view! { <div>"Mutation Attribute: " <code>{message.1}</code></div> }
/> />
</div> </div>
@ -58,6 +60,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

16
examples/use_raf_fn/src/main.rs
View file

@ -14,9 +14,17 @@ fn Demo() -> impl IntoView {
set_count.update(|count| *count += 1); set_count.update(|count| *count += 1);
}); });
view! { <div>Count: { count }</div> view! {
<button on:click=move |_| pause() disabled=move || !is_active()>Pause</button> <div>
<button on:click=move |_| resume() disabled=is_active>Resume</button> Count:
{count}
</div>
<button on:click=move |_| pause() disabled=move || !is_active()>
Pause
</button>
<button on:click=move |_| resume() disabled=is_active>
Resume
</button>
} }
} }
@ -25,6 +33,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

7
examples/use_resize_observer/src/main.rs
View file

@ -17,13 +17,14 @@ fn Demo() -> impl IntoView {
)); ));
}); });
view! { <Note class="mb-2">"Resize the box to see changes"</Note> view! {
<Note class="mb-2">"Resize the box to see changes"</Note>
<textarea <textarea
node_ref=el node_ref=el
readonly readonly
class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10" class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10"
prop:value=move || text.get() prop:value=move || text.get()
/> ></textarea>
} }
} }
@ -32,6 +33,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

7
examples/use_round/src/main.rs
View file

@ -8,7 +8,8 @@ fn Demo() -> impl IntoView {
let result: Signal<f64> = use_round(value); let result: Signal<f64> = use_round(value);
view! { <input view! {
<input
class="block" class="block"
prop:value=move || value.get() prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap()) on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@ -17,7 +18,7 @@ fn Demo() -> impl IntoView {
max="10" max="10"
step="0.01" step="0.01"
/> />
<p>"Value: " {move|| value.get()}</p> <p>"Value: " {move || value.get()}</p>
<p>"Rounded: " {move || result.get()}</p> <p>"Rounded: " {move || result.get()}</p>
} }
} }
@ -27,6 +28,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

86
examples/use_scroll/src/main.rs
View file

@ -42,33 +42,29 @@ fn Demo() -> impl IntoView {
.on_scroll(on_scroll.clone()), .on_scroll(on_scroll.clone()),
); );
view! { <div class="flex"> view! {
<div node_ref=el class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded"> <div class="flex">
<div
node_ref=el
class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded"
>
<div class="w-[500px] h-[400px] relative"> <div class="w-[500px] h-[400px] relative">
<div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1"> <div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">"top_left"</div>
"top_left"
</div>
<div class="absolute left-0 bottom-0 bg-gray-500/5 px-2 py-1"> <div class="absolute left-0 bottom-0 bg-gray-500/5 px-2 py-1">
"bottom_left" "bottom_left"
</div> </div>
<div class="absolute right-0 top-0 bg-gray-500/5 px-2 py-1"> <div class="absolute right-0 top-0 bg-gray-500/5 px-2 py-1">"top_right"</div>
"top_right"
</div>
<div class="absolute right-0 bottom-0 bg-gray-500/5 px-2 py-1"> <div class="absolute right-0 bottom-0 bg-gray-500/5 px-2 py-1">
"bottom_right" "bottom_right"
</div> </div>
<div class="absolute left-1/3 top-1/3 bg-gray-500/5 px-2 py-1"> <div class="absolute left-1/3 top-1/3 bg-gray-500/5 px-2 py-1">"Scroll Me"</div>
"Scroll Me"
</div>
</div> </div>
</div> </div>
<div class="my-10 w-280px pl-4"> <div class="my-10 w-280px pl-4">
<div class="px-6 py-4 rounded grid grid-cols-[120px_auto] gap-4 bg-gray-500/5"> <div class="px-6 py-4 rounded grid grid-cols-[120px_auto] gap-4 bg-gray-500/5">
<span class="text-right opacity-75 py-4"> <span class="text-right opacity-75 py-4">"X Position"</span>
"X Position"
</span>
<div class="text-primary"> <div class="text-primary">
<div> <div>
<input <input
@ -78,6 +74,7 @@ fn Demo() -> impl IntoView {
set_x(num); set_x(num);
} }
} }
type="number" type="number"
min="0" min="0"
max="200" max="200"
@ -85,9 +82,7 @@ fn Demo() -> impl IntoView {
/> />
</div> </div>
</div> </div>
<span class="text-right opacity-75 py-4"> <span class="text-right opacity-75 py-4">"Y Position"</span>
"Y Position"
</span>
<div class="text-primary"> <div class="text-primary">
<div> <div>
<input <input
@ -97,6 +92,7 @@ fn Demo() -> impl IntoView {
set_y(num); set_y(num);
} }
} }
type="number" type="number"
min="0" min="0"
max="200" max="200"
@ -115,42 +111,24 @@ fn Demo() -> impl IntoView {
type="checkbox" type="checkbox"
/> />
</span> </span>
<span class="text-right opacity-75"> <span class="text-right opacity-75">"Is Scrolling"</span>
"Is Scrolling" <BooleanDisplay value=is_scrolling/>
</span> <div class="text-right opacity-75">"Top Arrived"</div>
<BooleanDisplay value=is_scrolling /> <BooleanDisplay value=Signal::derive(move || arrived_state.get().top)/>
<div class="text-right opacity-75"> <div class="text-right opacity-75">"Right Arrived"</div>
"Top Arrived" <BooleanDisplay value=Signal::derive(move || arrived_state.get().right)/>
</div> <div class="text-right opacity-75">"Bottom Arrived"</div>
<BooleanDisplay value=Signal::derive(move || arrived_state.get().top) /> <BooleanDisplay value=Signal::derive(move || arrived_state.get().bottom)/>
<div class="text-right opacity-75"> <div class="text-right opacity-75">"Left Arrived"</div>
"Right Arrived" <BooleanDisplay value=Signal::derive(move || arrived_state.get().left)/>
</div> <div class="text-right opacity-75">"Scrolling Up"</div>
<BooleanDisplay value=Signal::derive(move || arrived_state.get().right) /> <BooleanDisplay value=Signal::derive(move || directions.get().top)/>
<div class="text-right opacity-75"> <div class="text-right opacity-75">"Scrolling Right"</div>
"Bottom Arrived" <BooleanDisplay value=Signal::derive(move || directions.get().right)/>
</div> <div class="text-right opacity-75">"Scrolling Down"</div>
<BooleanDisplay value=Signal::derive(move || arrived_state.get().bottom) /> <BooleanDisplay value=Signal::derive(move || directions.get().bottom)/>
<div class="text-right opacity-75"> <div class="text-right opacity-75">"Scrolling Left"</div>
"Left Arrived" <BooleanDisplay value=Signal::derive(move || directions.get().left)/>
</div>
<BooleanDisplay value=Signal::derive(move || arrived_state.get().left) />
<div class="text-right opacity-75">
"Scrolling Up"
</div>
<BooleanDisplay value=Signal::derive(move || directions.get().top) />
<div class="text-right opacity-75">
"Scrolling Right"
</div>
<BooleanDisplay value=Signal::derive(move || directions.get().right) />
<div class="text-right opacity-75">
"Scrolling Down"
</div>
<BooleanDisplay value=Signal::derive(move || directions.get().bottom) />
<div class="text-right opacity-75">
"Scrolling Left"
</div>
<BooleanDisplay value=Signal::derive(move || directions.get().left) />
</div> </div>
</div> </div>
</div> </div>
@ -162,6 +140,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

24
examples/use_storage/src/main.rs
View file

@ -24,7 +24,8 @@ fn Demo() -> impl IntoView {
let (state2, ..) = use_storage("banana-state", the_default.clone()); let (state2, ..) = use_storage("banana-state", the_default.clone());
view! { <input view! {
<input
class="block" class="block"
prop:value=move || state.get().name prop:value=move || state.get().name
on:input=move |e| set_state.update(|s| s.name = event_target_value(&e)) on:input=move |e| set_state.update(|s| s.name = event_target_value(&e))
@ -46,20 +47,27 @@ fn Demo() -> impl IntoView {
class="block" class="block"
prop:value=move || state.get().count prop:value=move || state.get().count
value=move || state.get().count value=move || state.get().count
on:input=move |e| set_state.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32) on:input=move |e| {
set_state
.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32)
}
type="number" type="number"
min="0" min="0"
step="1" step="1"
max="1000" max="1000"
/> />
<p>"Second "<b><code>"use_storage"</code></b>":"</p> <p>
"Second " <b>
<code>"use_storage"</code>
</b> ":"
</p>
<pre> <pre>{move || format!("{:#?}", state2.get())}</pre>
{ move || format!("{:#?}", state2.get()) }
</pre>
<Note>"The values are persistent. When you reload the page the values will be the same."</Note> <Note>
"The values are persistent. When you reload the page the values will be the same."
</Note>
} }
} }
@ -68,6 +76,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

18
examples/use_throttle_fn/src/main.rs
View file

@ -12,17 +12,17 @@ fn Demo() -> impl IntoView {
1000.0, 1000.0,
); );
view! { <button view! {
on:click=move |_| { <button on:click=move |_| {
set_click_count.set(click_count.get_untracked() + 1); set_click_count.set(click_count.get_untracked() + 1);
throttled_fn(); throttled_fn();
} }>
>
"Smash me!" "Smash me!"
</button> </button>
<Note>"Delay is set to 1000ms for this demo."</Note> <Note>"Delay is set to 1000ms for this demo."</Note>
<p>"Button clicked: " { click_count }</p> <p>"Button clicked: " {click_count}</p>
<p>"Event handler called: " { throttled_count }</p> <p>"Event handler called: " {throttled_count}</p>
} }
} }
@ -31,6 +31,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

117
examples/use_websocket/src/main.rs
View file

@ -152,53 +152,80 @@ fn Demo() -> impl IntoView {
let connected2 = move || ready_state2.get() == UseWebSocketReadyState::Open; let connected2 = move || ready_state2.get() == UseWebSocketReadyState::Open;
view! { <div class="container"> view! {
<div class="flex flex-col lg:flex-row gap-4"> <div class="container">
<div class="w-full lg:w-1/2"> <div class="flex flex-col lg:flex-row gap-4">
<h1 class="text-xl lg:text-4xl mb-2">"use_websocket"</h1> <div class="w-full lg:w-1/2">
<p>"status: " {status}</p> <h1 class="text-xl lg:text-4xl mb-2">"use_websocket"</h1>
<button on:click=send_message disabled=move || !connected()>"Send"</button> <p>"status: " {status}</p>
<button on:click=send_byte_message disabled=move || !connected()>"Send bytes"</button> <button on:click=send_message disabled=move || !connected()>
<button on:click=open_connection disabled=connected>"Open"</button> "Send"
<button on:click=close_connection disabled=move || !connected()>"Close"</button> </button>
<div class="flex items-center"> <button on:click=send_byte_message disabled=move || !connected()>
<h3 class="text-2xl mr-2">"History"</h3> "Send bytes"
<button on:click=move |_| set_history(vec![]) disabled=move || history.get().len() <= 0>"Clear"</button> </button>
</div> <button on:click=open_connection disabled=connected>
<For "Open"
each=move || history.get().into_iter().enumerate() </button>
key=|(index, _)| *index <button on:click=close_connection disabled=move || !connected()>
view=move |(_, message)| { "Close"
view! { <div>{message}</div> } </button>
} <div class="flex items-center">
/> <h3 class="text-2xl mr-2">"History"</h3>
<button
on:click=move |_| set_history(vec![])
disabled=move || history.get().len() <= 0
>
"Clear"
</button>
</div>
<For
each=move || history.get().into_iter().enumerate()
key=|(index, _)| *index
view=move |(_, message)| {
view! { <div>{message}</div> }
}
/>
</div> </div>
<div class="w-full lg:w-1/2"> <div class="w-full lg:w-1/2">
<h1 class="text-xl lg:text-4xl mb-2">"use_websocket_with_options"</h1> <h1 class="text-xl lg:text-4xl mb-2">"use_websocket_with_options"</h1>
<p>"status: " {status2}</p> <p>"status: " {status2}</p>
<button on:click=open_connection2 disabled={connected2}>"Connect"</button> <button on:click=open_connection2 disabled=connected2>
<button on:click=close_connection2 disabled=move || !connected2()>"Close"</button> "Connect"
<button on:click=send_message2 disabled=move || !connected2()>"Send"</button> </button>
<button on:click=send_byte_message2 disabled=move || !connected2()>"Send Bytes"</button> <button on:click=close_connection2 disabled=move || !connected2()>
<div class="flex items-center"> "Close"
<h3 class="text-2xl mr-2">"History"</h3> </button>
<button on:click=move |_| set_history2(vec![]) disabled=move || history2.get().len() <= 0>"Clear"</button> <button on:click=send_message2 disabled=move || !connected2()>
"Send"
</button>
<button on:click=send_byte_message2 disabled=move || !connected2()>
"Send Bytes"
</button>
<div class="flex items-center">
<h3 class="text-2xl mr-2">"History"</h3>
<button
on:click=move |_| set_history2(vec![])
disabled=move || history2.get().len() <= 0
>
"Clear"
</button>
</div>
<ul>
<For
each=move || history2.get().into_iter().enumerate()
key=|(index, _)| *index
view=move |(_, message)| {
view! { <li>{message}</li> }
}
/>
</ul>
</div>
</div> </div>
<ul>
<For
each=move || history2.get().into_iter().enumerate()
key=|(index, _)| *index
view=move |(_, message)| {
view! { <li>{message}</li> }
}
/>
</ul>
</div>
</div> </div>
</div>
} }
} }
@ -207,6 +234,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

5
examples/use_window_focus/src/main.rs
View file

@ -22,8 +22,7 @@ fn Demo() -> impl IntoView {
false, false,
); );
view! { <div>{ message }</div> view! { <div>{message}</div> }
}
} }
fn main() { fn main() {
@ -31,6 +30,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

18
examples/use_window_scroll/src/main.rs
View file

@ -15,12 +15,20 @@ fn Demo() -> impl IntoView {
document().body().unwrap().append_child(&div).unwrap(); document().body().unwrap().append_child(&div).unwrap();
view! { <div>See scroll values in the lower right corner of the screen.</div> view! {
<div>
See scroll values in the lower right corner of the screen.
</div>
<div class="float m-5 area shadow-lg"> <div class="float m-5 area shadow-lg">
<Note class="mb-2">Scroll value</Note> <Note class="mb-2">
Scroll value
</Note>
<div> <div>
x: { move || format!("{:.1}", x()) } <br /> x:
y: { move || format!("{:.1}", y()) } {move || format!("{:.1}", x())}
<br/>
y:
{move || format!("{:.1}", y())}
</div> </div>
</div> </div>
} }
@ -31,6 +39,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

9
examples/watch_debounced/src/main.rs
View file

@ -16,7 +16,8 @@ fn Demo() -> impl IntoView {
WatchDebouncedOptions::default().max_wait(Some(5000.0)), WatchDebouncedOptions::default().max_wait(Some(5000.0)),
); );
view! { <input view! {
<input
class="block" class="block"
prop:value=move || input.get() prop:value=move || input.get()
on:input=move |e| set_input.set(event_target_value(&e)) on:input=move |e| set_input.set(event_target_value(&e))
@ -29,8 +30,8 @@ fn Demo() -> impl IntoView {
<code>"max_wait"</code> <code>"max_wait"</code>
" is set to 5000ms for this demo." " is set to 5000ms for this demo."
</Note> </Note>
<p>"Input: " { input }</p> <p>"Input: " {input}</p>
<p>"Times Updated: " { updated }</p> <p>"Times Updated: " {updated}</p>
} }
} }
@ -39,6 +40,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

17
examples/watch_pausable/src/main.rs
View file

@ -33,7 +33,8 @@ fn Demo() -> impl IntoView {
resume(); resume();
}; };
view! { <Note class="mb-2">"Type something below to trigger the watch"</Note> view! {
<Note class="mb-2">"Type something below to trigger the watch"</Note>
<input <input
node_ref=input node_ref=input
class="block" class="block"
@ -42,11 +43,15 @@ fn Demo() -> impl IntoView {
type="text" type="text"
/> />
<p>"Value: " {source}</p> <p>"Value: " {source}</p>
<button prop:disabled=move || !is_active.get() class="orange" on:click=pause>"Pause"</button> <button prop:disabled=move || !is_active.get() class="orange" on:click=pause>
<button prop:disabled=move || is_active.get() on:click=resume>"Resume"</button> "Pause"
</button>
<button prop:disabled=move || is_active.get() on:click=resume>
"Resume"
</button>
<button on:click=clear>"Clear Log"</button> <button on:click=clear>"Clear Log"</button>
<br /> <br/>
<br /> <br/>
<Note>"Log"</Note> <Note>"Log"</Note>
<pre>{log}</pre> <pre>{log}</pre>
} }
@ -57,6 +62,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

9
examples/watch_throttled/src/main.rs
View file

@ -15,7 +15,8 @@ fn Demo() -> impl IntoView {
1000.0, 1000.0,
); );
view! { <input view! {
<input
class="block" class="block"
prop:value=move || input.get() prop:value=move || input.get()
on:input=move |e| set_input.set(event_target_value(&e)) on:input=move |e| set_input.set(event_target_value(&e))
@ -26,8 +27,8 @@ fn Demo() -> impl IntoView {
<code>"ms"</code> <code>"ms"</code>
" is set to 1000ms for this demo." " is set to 1000ms for this demo."
</Note> </Note>
<p>"Input: " { input }</p> <p>"Input: " {input}</p>
<p>"Times Updated: " { updated }</p> <p>"Times Updated: " {updated}</p>
} }
} }
@ -36,6 +37,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }

4
template/examples/{{ function_name }}/src/main.ffizer.hbs.rs
View file

@ -7,7 +7,7 @@ fn Demo() -> impl IntoView {
{{ function_name }}(); {{ function_name }}();
view! { } view! { }
} }
fn main() { fn main() {
@ -15,6 +15,6 @@ fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), || { mount_to(demo_or_body(), || {
view! { <Demo /> } view! { <Demo/> }
}) })
} }