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

stable todomvc example (#2489)

Browse source
This commit is contained in:
mahmoud-eltahawy 2024-04-02 22:38:07 +02:00 committed by GitHub
parent c750f57ddc
commit 8686d5aabb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/todomvc/Cargo.toml
View file

@ -8,7 +8,7 @@ codegen-units = 1
lto = true lto = true
[dependencies] [dependencies]
leptos = { path = "../../leptos", features = ["nightly", "serde"] } leptos = { path = "../../leptos", features = ["serde"] }
log = "0.4" log = "0.4"
console_log = "1" console_log = "1"
console_error_panic_hook = "0.1.7" console_error_panic_hook = "0.1.7"

2
examples/todomvc/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain] [toolchain]
channel = "nightly-2024-03-31" channel = "stable"

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

@ -146,7 +146,7 @@ pub fn TodoMVC() -> impl IntoView {
window_event_listener(ev::hashchange, move |_| { window_event_listener(ev::hashchange, move |_| {
let new_mode = let new_mode =
location_hash().map(|hash| route(&hash)).unwrap_or_default(); location_hash().map(|hash| route(&hash)).unwrap_or_default();
set_mode(new_mode); set_mode.set(new_mode);
}); });
// Callback to add a todo on pressing the `Enter` key, if the field isn't empty // Callback to add a todo on pressing the `Enter` key, if the field isn't empty
@ -256,9 +256,9 @@ pub fn TodoMVC() -> impl IntoView {
" left" " left"
</span> </span>
<ul class="filters"> <ul class="filters">
<li><a href="#/" class="selected" class:selected={move || mode() == Mode::All}>"All"</a></li> <li><a href="#/" class="selected" class:selected={move || mode.get() == Mode::All}>"All"</a></li>
<li><a href="#/active" class:selected={move || mode() == Mode::Active}>"Active"</a></li> <li><a href="#/active" class:selected={move || mode.get() == Mode::Active}>"Active"</a></li>
<li><a href="#/completed" class:selected={move || mode() == Mode::Completed}>"Completed"</a></li> <li><a href="#/completed" class:selected={move || mode.get() == Mode::Completed}>"Completed"</a></li>
</ul> </ul>
<button <button
class="clear-completed hidden" class="clear-completed hidden"
@ -293,7 +293,7 @@ pub fn Todo(todo: Todo) -> impl IntoView {
} else { } else {
todo.title.set(value.to_string()); todo.title.set(value.to_string());
} }
set_editing(false); set_editing.set(false);
}; };
view! { view! {
@ -307,14 +307,14 @@ pub fn Todo(todo: Todo) -> impl IntoView {
node_ref=todo_input node_ref=todo_input
class="toggle" class="toggle"
type="checkbox" type="checkbox"
prop:checked={move || (todo.completed)()} prop:checked={move || todo.completed.get()}
on:input={move |ev| { on:input={move |ev| {
let checked = event_target_checked(&ev); let checked = event_target_checked(&ev);
todo.completed.set(checked); todo.completed.set(checked);
}} }}
/> />
<label on:dblclick=move |_| { <label on:dblclick=move |_| {
set_editing(true); set_editing.set(true);
if let Some(input) = todo_input.get() { if let Some(input) = todo_input.get() {
_ = input.focus(); _ = input.focus();
@ -324,10 +324,10 @@ pub fn Todo(todo: Todo) -> impl IntoView {
</label> </label>
<button class="destroy" on:click=move |_| set_todos.update(|t| t.remove(todo.id))/> <button class="destroy" on:click=move |_| set_todos.update(|t| t.remove(todo.id))/>
</div> </div>
{move || editing().then(|| view! { {move || editing.get().then(|| view! {
<input <input
class="edit" class="edit"
class:hidden={move || !(editing)()} class:hidden={move || !editing.get()}
prop:value={move || todo.title.get()} prop:value={move || todo.title.get()}
on:focusout=move |ev: web_sys::FocusEvent| save(&event_target_value(&ev)) on:focusout=move |ev: web_sys::FocusEvent| save(&event_target_value(&ev))
on:keyup={move |ev: web_sys::KeyboardEvent| { on:keyup={move |ev: web_sys::KeyboardEvent| {
@ -335,7 +335,7 @@ pub fn Todo(todo: Todo) -> impl IntoView {
if key_code == ENTER_KEY { if key_code == ENTER_KEY {
save(&event_target_value(&ev)); save(&event_target_value(&ev));
} else if key_code == ESCAPE_KEY { } else if key_code == ESCAPE_KEY {
set_editing(false); set_editing.set(false);
} }
}} }}
/> />