Mirrors/leptos
2
0
Fork 0
mirror of https://github.com/leptos-rs/leptos synced 2024-11-10 06:44:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

examples: simplify stable syntax for using signals in view

Browse source
This commit is contained in:
Greg Johnston 2024-04-09 14:45:19 -04:00
parent 871d2c1b9f
commit 85a91af7c6
16 changed files with 31 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/counter/src/lib.rs
View file

@ -16,7 +16,7 @@ pub fn SimpleCounter(
<div>
<button on:click=move |_| set_value.set(0)>"Clear"</button>
<button on:click=move |_| set_value.update(|value| *value -= step)>"-1"</button>
<span>"Value: " {move || value.get()} "!"</span>
<span>"Value: " {value} "!"</span>
<button on:click=move |_| set_value.update(|value| *value += step)>"+1"</button>
</div>
}

2
examples/counters/src/lib.rs
View file

@ -63,7 +63,7 @@ pub fn Counters() -> impl IntoView {
</p>
<ul>
<For
each=move||counters.get()
each=move || counters.get()
key=|counter| counter.0
children=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
view! {

2
examples/hackernews_axum/src/error_template.rs
View file

@ -11,7 +11,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
<h1>"Errors"</h1>
<For
// a function that returns the items we're iterating over; a signal is fine
each=move||errors.get()
each=move || errors.get()
// a unique key for each item as a reference
key=|(key, _)| key.clone()
// renders each item to a view

2
examples/hackernews_islands_axum/src/error_template.rs
View file

@ -11,7 +11,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
<h1>"Errors"</h1>
<For
// a function that returns the items we're iterating over; a signal is fine
each=move||errors.get()
each=move || errors.get()
// a unique key for each item as a reference
key=|(key, _)| key.clone()
// renders each item to a view

2
examples/hackernews_islands_axum/src/routes/story.rs
View file

@ -92,7 +92,7 @@ pub fn Story() -> impl IntoView {
pub fn Toggle(children: Children) -> impl IntoView {
let (open, set_open) = create_signal(true);
view! {
<div class="toggle" class:open=move||open.get()>
<div class="toggle" class:open=open>
<a on:click=move |_| set_open.update(|n| *n = !*n)>
{move || if open.get() {
"[-]"

2
examples/hackernews_js_fetch/src/error_template.rs
View file

@ -11,7 +11,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
<h1>"Errors"</h1>
<For
// a function that returns the items we're iterating over; a signal is fine
each=move||errors.get()
each=move || errors.get()
// a unique key for each item as a reference
key=|(key, _)| key.clone()
// renders each item to a view

2
examples/hackernews_js_fetch/src/routes/story.rs
View file

@ -83,7 +83,7 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
{(!comment.comments.is_empty()).then(|| {
view! {
<div>
<div class="toggle" class:open=move||open.get()>
<div class="toggle" class:open=open>
<a on:click=move |_| set_open.update(|n| *n = !*n)>
{
let comments_len = comment.comments.len();

4
examples/js-framework-benchmark/src/lib.rs
View file

@ -166,7 +166,7 @@ pub fn App() -> impl IntoView {
<table class="table table-hover table-striped test-data">
<tbody>
<For
each=move||data.get()
each=move || data.get()
key={|row| row.id}
children=move |row: RowData| {
let row_id = row.id;
@ -182,7 +182,7 @@ pub fn App() -> impl IntoView {
template! {
<tr class:danger={move || is_selected.selected(Some(row_id))}>
<td class="col-md-1">{row_id.to_string()}</td>
<td class="col-md-4"><a on:click=move |_| set_selected.set(Some(row_id))>{move || label.get()}</a></td>
<td class="col-md-4"><a on:click=move |_| set_selected.set(Some(row_id))>{label}</a></td>
<td class="col-md-1"><a on:click=move |_| remove(row_id)><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
<td class="col-md-6"/>
</tr>

8
examples/parent_child/src/lib.rs
View file

@ -31,10 +31,10 @@ pub fn App() -> impl IntoView {
<main>
<p
// class: attributes take F: Fn() => bool, and these signals all implement Fn()
class:red=move||red.get()
class:right=move||right.get()
class:italics=move||italics.get()
class:smallcaps=move||smallcaps.get()
class:red=red
class:right=right
class:italics=italics
class:smallcaps=smallcaps
>
"Lorem ipsum sit dolor amet."
</p>

4
examples/portal/src/lib.rs
View file

@ -11,7 +11,7 @@ pub fn App() -> impl IntoView {
Show Overlay
</button>
<Show when=move||show_overlay.get() fallback=|| ()>
<Show when=move || show_overlay.get() fallback=|| ()>
<div>Show</div>
<Portal mount=document().get_element_by_id("app").unwrap()>
<div style="position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;">
@ -23,7 +23,7 @@ pub fn App() -> impl IntoView {
Toggle inner
</button>
<Show when=move||show_inside_overlay.get() fallback=|| view! { "Hidden" }>
<Show when=move || show_inside_overlay.get() fallback=|| view! { "Hidden" }>
Visible
</Show>
</div>

14
examples/server_fns_axum/src/app.rs
View file

@ -193,7 +193,7 @@ pub fn WithAnAction() -> impl IntoView {
<p>You submitted: {move || format!("{:?}", action.input().get())}</p>
<p>The result was: {move || format!("{:?}", action.value().get())}</p>
<Transition>
<p>Total rows: {move || row_count.get()}</p>
<p>Total rows: {row_count}</p>
</Transition>
}
}
@ -227,7 +227,7 @@ pub fn WithActionForm() -> impl IntoView {
<p>You submitted: {move || format!("{:?}", action.input().get())}</p>
<p>The result was: {move || format!("{:?}", action.value().get())}</p>
<Transition>archive underaligned: need alignment 4 but have alignment 1
<p>Total rows: {move || row_count.get()}</p>
<p>Total rows: {row_count}</p>
</Transition>
}
}
@ -285,7 +285,7 @@ pub fn ServerFnArgumentExample() -> impl IntoView {
>
Click to see length
</button>
<p>Length is {move||result.get()}</p>
<p>Length is {result}</p>
}
}
@ -313,8 +313,6 @@ pub fn RkyvExample() -> impl IntoView {
view! {
<h3>Using <code>rkyv</code> encoding</h3>
<p>
</p>
<input node_ref=input_ref placeholder="Type something here."/>
<button
on:click=move |_| {
@ -324,9 +322,9 @@ pub fn RkyvExample() -> impl IntoView {
>
Click to capitalize
</button>
<p>{move||input.get()}</p>
<p>{input}</p>
<Transition>
{move || rkyv_result.get()}
{rkyv_result}
</Transition>
}
}
@ -797,7 +795,7 @@ pub fn CustomEncoding() -> impl IntoView {
>
Submit
</button>
<p>{move||result.get()}</p>
<p>{result}</p>
}
}

2
examples/slots/src/lib.rs
View file

@ -49,7 +49,7 @@ pub fn App() -> impl IntoView {
view! {
<button on:click=move |_| set_count.update(|value| *value += 1)>"+1"</button>
" "{move||count.get()}" is "
" "{count}" is "
<SlotIf cond=is_even>
// The slot name can be emitted if it would match the slot struct name (in snake case).
<Then slot>"even"</Then>

2
examples/sso_auth_axum/src/lib.rs
View file

@ -129,7 +129,7 @@ pub fn App() -> impl IntoView {
<Route path="" view=move || {
view!{
{display_email}
<Show when=move||email.get().is_some() fallback=||view!{<SignIn/>}>
<Show when=move || email.get().is_some() fallback=||view!{<SignIn/>}>
<LogOut/>
</Show>
}

2
examples/tailwind_axum/src/app.rs
View file

@ -31,7 +31,7 @@ fn Home() -> impl IntoView {
"+"
</button>
<button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white">
{move||value.get()}
{value}
</button>
<button on:click=move |_| set_value.update(|value| *value -= 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
"-"

6
examples/timer/src/lib.rs
View file

@ -21,9 +21,9 @@ pub fn TimerDemo() -> impl IntoView {
view! {
<div>
<div>"Count A (fixed interval of 1000 ms)"</div>
<div>{move||count_a.get()}</div>
<div>"Count B (dynamic interval, currently " {move||interval.get()} " ms)"</div>
<div>{move||count_b.get()}</div>
<div>{count_a}</div>
<div>"Count B (dynamic interval, currently " {interval} " ms)"</div>
<div>{count_b}</div>
<input prop:value=interval on:input=move |ev| {
if let Ok(value) = event_target_value(&ev).parse::<u64>() {
set_interval.set(value);

8
examples/todomvc/src/lib.rs
View file

@ -300,14 +300,14 @@ pub fn Todo(todo: Todo) -> impl IntoView {
<li
class="todo"
class:editing={editing}
class:completed={move || todo.completed.get()}
class:completed={todo.completed}
>
<div class="view">
<input
node_ref=todo_input
class="toggle"
type="checkbox"
prop:checked={move || todo.completed.get()}
prop:checked={todo.completed}
on:input={move |ev| {
let checked = event_target_checked(&ev);
todo.completed.set(checked);
@ -320,7 +320,7 @@ pub fn Todo(todo: Todo) -> impl IntoView {
_ = input.focus();
}
}>
{move || todo.title.get()}
{todo.title}
</label>
<button class="destroy" on:click=move |_| set_todos.update(|t| t.remove(todo.id))/>
</div>
@ -328,7 +328,7 @@ pub fn Todo(todo: Todo) -> impl IntoView {
<input
class="edit"
class:hidden={move || !editing.get()}
prop:value={move || todo.title.get()}
prop:value=todo.title
on:focusout=move |ev: web_sys::FocusEvent| save(&event_target_value(&ev))
on:keyup={move |ev: web_sys::KeyboardEvent| {
let key_code = ev.key_code();