mirror of
https://github.com/adoyle0/leptos-use.git
synced 2025-01-22 16:49:22 -05:00
ported to leptos 0.5 alpha
This commit is contained in:
Maccesch
parent
95ef0e2651
commit
2e08874db0
157 changed files with 1026 additions and 1280 deletions
13
.idea/icon.svg
generated
13
.idea/icon.svg
generated
|
|
@ -2,6 +2,17 @@
|
|||
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<style>
|
||||
path.black {
|
||||
fill: #1e1838;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path.black {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path d="M16.114,22.343c-1.714,-0 -3.2,-0.914 -3.885,-2.514c-0.458,-1.029 -0.572,-2.172 -0.229,-3.315c0.343,-1.143 1.143,-1.943 2.171,-2.514c0.572,-0.343 1.258,-0.457 1.829,-0.457c1.714,-0 3.2,0.914 3.886,2.514c1.028,2.172 0.114,4.8 -2.057,5.829c-0.458,0.228 -1.029,0.457 -1.715,0.457Z"
|
||||
style="fill:#e1393a;fill-rule:nonzero;"/>
|
||||
<path d="M16.114,15.943c0.572,-0 1.486,0.343 1.829,1.143c0.343,0.685 0.228,1.257 0.114,1.6c-0.114,0.343 -0.343,0.8 -1.028,1.143c-0.229,0.114 -0.572,0.228 -0.915,0.228c-0.571,0 -1.485,-0.343 -1.828,-1.143c-0.457,-1.028 -0.115,-2.285 0.914,-2.743c0.343,-0.228 0.571,-0.228 0.914,-0.228Zm0,-4.572c-0.914,0 -1.943,0.229 -2.857,0.686c-3.314,1.486 -4.686,5.486 -3.086,8.8c1.143,2.4 3.543,3.772 5.943,3.772c0.915,-0 1.943,-0.229 2.857,-0.686c3.315,-1.6 4.686,-5.6 3.086,-8.8c-1.143,-2.4 -3.428,-3.772 -5.943,-3.772Z"
|
||||
|
|
@ -12,5 +23,5 @@
|
|||
style="fill:#e1393a;fill-rule:nonzero;"/>
|
||||
<path class="black"
|
||||
d="M27.314,10.914c0,-0.114 -0.114,-0.343 -0.343,-0.571c0,-0.114 -0.114,-0.229 -0.114,-0.229c-0.457,-0.8 -1.143,-1.943 -1.143,-1.943l-2.514,1.486l1.486,2.629c1.943,3.657 2.057,7.657 0.571,10.857c-1.6,3.428 -5.028,5.371 -9.143,5.371c-4.228,0 -7.543,-1.943 -9.143,-5.371c-1.6,-3.2 -1.371,-7.2 0.572,-10.857l1.6,-2.629l-2.743,-1.486c-0,0 -0.686,1.029 -1.143,1.943c-0.114,0 -0.228,0.115 -0.228,0.229c-0.115,0.228 -0.229,0.457 -0.343,0.571c-2.286,4.572 -2.515,9.486 -0.457,13.715c2.171,4.457 6.4,6.971 11.771,6.971c5.257,0 9.6,-2.514 11.771,-6.971c2.058,-4.229 1.829,-9.258 -0.457,-13.715Z"
|
||||
style="fill-rule:nonzero;fill:white;"/>
|
||||
style="fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.8 KiB |
4
.idea/leptos-use.iml
generated
4
.idea/leptos-use.iml
generated
|
|
@ -48,6 +48,10 @@
|
|||
<sourceFolder url="file://$MODULE_DIR$/examples/use_websocket/src" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/testtest/src" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/examples/use_drop_zone/src" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/examples/signal_debounced/src" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/examples/signal_throttled/src" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/examples/use_draggable/src" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/examples/use_raf_fn/src" isTestSource="false" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/target" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/docs/book/book" />
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
### Braking Changes 🛠
|
||||
|
||||
- Leptos version is now 0.5
|
||||
- No `cx: Scope` params are supported/needed anymore because of the changes in Leptos.
|
||||
Please check the release notes of Leptos 0.5 for how to upgrade.
|
||||
- `watch` is now deprecated in favor of `leptos::watch`. `watch_with_options`
|
||||
will continue to exist.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
[package]
|
||||
name = "leptos-use"
|
||||
version = "0.6.0"
|
||||
version = "0.7.0-alpha"
|
||||
edition = "2021"
|
||||
authors = ["Marc-Stefan Cassola"]
|
||||
categories = ["gui", "web-programming"]
|
||||
|
|
@ -13,7 +13,7 @@ repository = "https://github.com/Synphonyte/leptos-use"
|
|||
homepage = "https://leptos-use.rs"
|
||||
|
||||
[dependencies]
|
||||
leptos = "0.4"
|
||||
leptos = "0.5.0-alpha"
|
||||
wasm-bindgen = "0.2"
|
||||
js-sys = "0.3"
|
||||
default-struct-builder = "0.4"
|
||||
|
|
@ -80,5 +80,3 @@ all-features = true
|
|||
rustdoc-args = ["--cfg=web_sys_unstable_apis"]
|
||||
rustc-args = ["--cfg=web_sys_unstable_apis"]
|
||||
|
||||
[dev-dependencies]
|
||||
leptos = "0.4"
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ use leptos::*;
|
|||
use leptos_use::{use_mouse, UseMouseReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let UseMouseReturn { x, y, .. } = use_mouse(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let UseMouseReturn { x, y, .. } = use_mouse();
|
||||
|
||||
view! { cx,
|
||||
{x} " x " {y}
|
||||
|
|
@ -89,3 +89,4 @@ To scaffold a new function quickly you can run `template/createfn.sh`. It requir
|
|||
|---------------|---------------------------|
|
||||
| <= 0.3 | 0.3 |
|
||||
| 0.4, 0.5, 0.6 | 0.4 |
|
||||
| main | 0.5.0-alpha |
|
||||
|
|
|
|||
|
|
@ -62,6 +62,11 @@
|
|||
- [watch_with_options](watch/watch_with_options.md)
|
||||
- [whenever](watch/whenever.md)
|
||||
|
||||
# Reactivity
|
||||
|
||||
- [signal_debounced](reactivity/signal_debounced.md)
|
||||
- [signal_throttled](reactivity/signal_throttled.md)
|
||||
|
||||
# Utilities
|
||||
|
||||
- [is_err](utilities/is_err.md)
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ use leptos::*;
|
|||
use leptos_use::{use_mouse, UseMouseReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let UseMouseReturn { x, y, .. } = use_mouse(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let UseMouseReturn { x, y, .. } = use_mouse();
|
||||
|
||||
view! { cx,
|
||||
{x} " x " {y}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ create_effect(
|
|||
cx,
|
||||
move |_| {
|
||||
// window() doesn't work on the server
|
||||
use_event_listener(cx, window(), "resize", move |_| {
|
||||
use_event_listener(window(), "resize", move |_| {
|
||||
// ...
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ resolver = "2"
|
|||
|
||||
members = [
|
||||
"on_click_outside",
|
||||
"signal_debounced",
|
||||
"signal_throttled",
|
||||
"use_abs",
|
||||
"use_active_element",
|
||||
"use_breakpoints",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,16 +4,15 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::on_click_outside;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (show_modal, set_show_modal) = create_signal(cx, false);
|
||||
let modal_ref = create_node_ref::<Div>(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (show_modal, set_show_modal) = create_signal(false);
|
||||
let modal_ref = create_node_ref::<Div>();
|
||||
|
||||
let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal.set(false));
|
||||
let _ = on_click_outside(modal_ref, move |_| set_show_modal.set(false));
|
||||
|
||||
view! { cx,
|
||||
<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 class="inner">
|
||||
<button class="button small" title="Close" on:click=move |_| set_show_modal.set(false)>"𝖷"</button>
|
||||
|
|
@ -70,7 +69,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,19 +3,17 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::signal_debounced;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
// signal_debounced();
|
||||
|
||||
signal_debounced(cx);
|
||||
|
||||
view! { cx,
|
||||
}
|
||||
view! {}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,19 +3,17 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::signal_throttled;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
// signal_throttled();
|
||||
|
||||
signal_throttled(cx);
|
||||
|
||||
view! { cx,
|
||||
}
|
||||
view! {}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,16 +11,16 @@ axum = { version = "0.6.4", optional = true }
|
|||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
cfg-if = "1"
|
||||
leptos = { version = "0.4", features = ["nightly"] }
|
||||
leptos_axum = { version = "0.4", optional = true }
|
||||
leptos_meta = { version = "0.4", features = ["nightly"] }
|
||||
leptos_router = { version = "0.4", features = ["nightly"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly"] }
|
||||
leptos_axum = { version = "0.5.0-alpha", optional = true }
|
||||
leptos_meta = { version = "0.5.0-alpha", features = ["nightly"] }
|
||||
leptos_router = { version = "0.5.0-alpha", features = ["nightly"] }
|
||||
leptos-use = { path = "../..", features = ["storage"] }
|
||||
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 }
|
||||
tower-http = { version = "0.5.0-alpha", features = ["fs"], optional = true }
|
||||
wasm-bindgen = "=0.2.87"
|
||||
thiserror = "1.0.38"
|
||||
tracing = { version = "0.1.37", optional = true }
|
||||
|
|
|
|||
|
|
@ -9,28 +9,26 @@ use leptos_use::{
|
|||
};
|
||||
|
||||
#[component]
|
||||
pub fn App(cx: Scope) -> impl IntoView {
|
||||
pub fn App() -> impl IntoView {
|
||||
// Provides context that manages stylesheets, titles, meta tags, etc.
|
||||
provide_meta_context(cx);
|
||||
provide_meta_context();
|
||||
|
||||
view! {
|
||||
cx,
|
||||
|
||||
<Stylesheet id="leptos" href="/pkg/start-axum.css"/>
|
||||
|
||||
<Title text="Leptos-Use SSR Example"/>
|
||||
|
||||
<Router fallback=|cx| {
|
||||
<Router fallback=|| {
|
||||
let mut outside_errors = Errors::default();
|
||||
outside_errors.insert_with_default_key(AppError::NotFound);
|
||||
view! { cx,
|
||||
<ErrorTemplate outside_errors/>
|
||||
view! { <ErrorTemplate outside_errors/>
|
||||
}
|
||||
.into_view(cx)
|
||||
.into_view()
|
||||
}>
|
||||
<main>
|
||||
<Routes>
|
||||
<Route path="" view=|cx| view! { cx, <HomePage/> }/>
|
||||
<Route path="" view=|| view! { <HomePage/> }/>
|
||||
</Routes>
|
||||
</main>
|
||||
</Router>
|
||||
|
|
@ -39,27 +37,27 @@ pub fn App(cx: Scope) -> impl IntoView {
|
|||
|
||||
/// Renders the home page of your application.
|
||||
#[component]
|
||||
fn HomePage(cx: Scope) -> impl IntoView {
|
||||
fn HomePage() -> impl IntoView {
|
||||
// Creates a reactive value to update the button
|
||||
let (count, set_count, _) = use_local_storage(cx, "count-state", 0);
|
||||
let (count, set_count, _) = use_local_storage("count-state", 0);
|
||||
let on_click = move |_| set_count.update(|count| *count += 1);
|
||||
|
||||
let nf = use_intl_number_format(
|
||||
UseIntlNumberFormatOptions::default().locale("zh-Hans-CN-u-nu-hanidec"),
|
||||
);
|
||||
|
||||
let zh_count = nf.format::<i32>(cx, count);
|
||||
let zh_count = nf.format::<i32>(count);
|
||||
|
||||
let (key, set_key) = create_signal(cx, "".to_string());
|
||||
let (key, set_key) = create_signal("".to_string());
|
||||
|
||||
create_effect(cx, move |_| {
|
||||
create_effect(move |_| {
|
||||
// window() doesn't work on the server
|
||||
let _ = use_event_listener(cx, window(), keypress, move |evt: KeyboardEvent| {
|
||||
let _ = use_event_listener(window(), keypress, move |evt: KeyboardEvent| {
|
||||
set_key(evt.key())
|
||||
});
|
||||
});
|
||||
|
||||
let (debounce_value, set_debounce_value) = create_signal(cx, "not called");
|
||||
let (debounce_value, set_debounce_value) = create_signal("not called");
|
||||
|
||||
let debounced_fn = use_debounce_fn(
|
||||
move || {
|
||||
|
|
@ -69,8 +67,7 @@ fn HomePage(cx: Scope) -> impl IntoView {
|
|||
);
|
||||
debounced_fn();
|
||||
|
||||
view! { cx,
|
||||
<h1>"Leptos-Use SSR Example"</h1>
|
||||
view! { <h1>"Leptos-Use SSR Example"</h1>
|
||||
<button on:click=on_click>"Click Me: " { count }</button>
|
||||
<p>"Locale \"zh-Hans-CN-u-nu-hanidec\": " { zh_count }</p>
|
||||
<p>"Press any key: " { key }</p>
|
||||
|
|
|
|||
|
|
@ -24,12 +24,11 @@ impl AppError {
|
|||
// Feel free to do more complicated things here than just displaying the error.
|
||||
#[component]
|
||||
pub fn ErrorTemplate(
|
||||
cx: Scope,
|
||||
#[prop(optional)] outside_errors: Option<Errors>,
|
||||
#[prop(optional)] errors: Option<RwSignal<Errors>>,
|
||||
) -> impl IntoView {
|
||||
let errors = match outside_errors {
|
||||
Some(e) => create_rw_signal(cx, e),
|
||||
Some(e) => create_rw_signal(e),
|
||||
None => match errors {
|
||||
Some(e) => e,
|
||||
None => panic!("No Errors found and we expected errors!"),
|
||||
|
|
@ -48,26 +47,24 @@ pub fn ErrorTemplate(
|
|||
// Only the response code for the first error is actually sent from the server
|
||||
// this may be customized by the specific application
|
||||
cfg_if! { if #[cfg(feature="ssr")] {
|
||||
let response = use_context::<ResponseOptions>(cx);
|
||||
let response = use_context::<ResponseOptions>();
|
||||
if let Some(response) = response {
|
||||
response.set_status(errors[0].status_code());
|
||||
}
|
||||
}}
|
||||
|
||||
view! {cx,
|
||||
<h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
|
||||
view! { <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
|
||||
<For
|
||||
// a function that returns the items we're iterating over; a signal is fine
|
||||
each= move || {errors.clone().into_iter().enumerate()}
|
||||
// a unique key for each item as a reference
|
||||
key=|(index, _error)| *index
|
||||
// renders each item to a view
|
||||
view= move |cx, error| {
|
||||
view= move |error| {
|
||||
let error_string = error.1.to_string();
|
||||
let error_code= error.1.status_code();
|
||||
view! {
|
||||
cx,
|
||||
<h2>{error_code.to_string()}</h2>
|
||||
<h2>{error_code.to_string()}</h2>
|
||||
<p>"Error: " {error_string}</p>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
|
|||
if res.status() == StatusCode::OK {
|
||||
res.into_response()
|
||||
} else {
|
||||
let handler = leptos_axum::render_app_to_stream(options.to_owned(), move |cx| view!{cx, <App/>});
|
||||
let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{<App/>});
|
||||
handler(req).await.into_response()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ cfg_if! { if #[cfg(feature = "hydrate")] {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
leptos::mount_to_body(move |cx| {
|
||||
view! { cx, <App/> }
|
||||
leptos::mount_to_body(move || {
|
||||
view! { <App/> }
|
||||
});
|
||||
}
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@ async fn main() {
|
|||
let conf = get_configuration(None).await.unwrap();
|
||||
let leptos_options = conf.leptos_options;
|
||||
let addr = leptos_options.site_addr;
|
||||
let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
|
||||
let routes = generate_route_list(|| view! { <App/> }).await;
|
||||
|
||||
// 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, |cx| view! { cx, <App/> })
|
||||
.leptos_routes(&leptos_options, routes, || view! { <App/> })
|
||||
.fallback(file_and_error_handler)
|
||||
.with_state(leptos_options);
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::math::use_abs;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (value, set_value) = create_signal(cx, -32.25);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (value, set_value) = create_signal(-32.25);
|
||||
|
||||
let result: Signal<f64> = use_abs(cx, value);
|
||||
let result: Signal<f64> = use_abs(value);
|
||||
|
||||
view! { cx,
|
||||
<input
|
||||
view! { <input
|
||||
class="block"
|
||||
prop:value=move || value.get()
|
||||
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
|
||||
|
|
@ -27,7 +26,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,26 +3,25 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::use_active_element;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let active_element = use_active_element(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let active_element = use_active_element();
|
||||
let key = move || {
|
||||
format!(
|
||||
"{:?}",
|
||||
active_element.get()
|
||||
active_element
|
||||
.get()
|
||||
.map(|el| el.dataset().get("id"))
|
||||
.unwrap_or_default()
|
||||
)
|
||||
};
|
||||
|
||||
view! { cx,
|
||||
<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">
|
||||
<For
|
||||
each=move || (1..7)
|
||||
key=|i| *i
|
||||
view=move |cx, i| view! { cx,
|
||||
<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>
|
||||
|
|
@ -38,7 +37,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
|
|||
use leptos_use::{breakpoints_tailwind, use_breakpoints, BreakpointsTailwind};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
let breakpoints = breakpoints_tailwind();
|
||||
|
||||
let screen_size = use_breakpoints(cx, breakpoints.clone());
|
||||
let screen_size = use_breakpoints(breakpoints.clone());
|
||||
|
||||
use BreakpointsTailwind::*;
|
||||
|
||||
|
|
@ -24,8 +24,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
let label_classes = "justify-self-end".to_string();
|
||||
let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string();
|
||||
|
||||
view! { cx,
|
||||
<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>
|
||||
<code>{move || format!("{:?}", current.get()) }</code>
|
||||
|
||||
|
|
@ -145,7 +144,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::math::use_ceil;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (value, set_value) = create_signal(cx, 4.15);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (value, set_value) = create_signal(4.15);
|
||||
|
||||
let result: Signal<f64> = use_ceil(cx, value);
|
||||
let result: Signal<f64> = use_ceil(value);
|
||||
|
||||
view! { cx,
|
||||
<input
|
||||
view! { <input
|
||||
class="block"
|
||||
prop:value=move || value.get()
|
||||
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
|
||||
|
|
@ -27,7 +26,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -7,9 +7,8 @@ use leptos_use::{
|
|||
};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
let UseColorModeReturn { mode, set_mode, .. } = use_color_mode_with_options(
|
||||
cx,
|
||||
UseColorModeOptions::default()
|
||||
.custom_modes(vec![
|
||||
"rust".into(),
|
||||
|
|
@ -17,11 +16,10 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
"navy".into(),
|
||||
"ayu".into(),
|
||||
])
|
||||
.initial_value(ColorMode::from(html(cx).class_name())),
|
||||
.initial_value(ColorMode::from(html().class_name())),
|
||||
);
|
||||
|
||||
let UseCycleListReturn { state, next, .. } = use_cycle_list_with_options(
|
||||
cx,
|
||||
vec![
|
||||
ColorMode::Light,
|
||||
ColorMode::Custom("rust".into()),
|
||||
|
|
@ -32,8 +30,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
UseCycleListOptions::default().initial_value(Some((mode, set_mode).into())),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<button on:click=move |_| next()>
|
||||
view! { <button on:click=move |_| next()>
|
||||
{ move || format!("{}", state.get()) }
|
||||
</button>
|
||||
<Note>"Click to change the color mode"</Note>
|
||||
|
|
@ -44,7 +41,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::{use_css_var_with_options, UseCssVarOptions};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Div>(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Div>();
|
||||
let (color, set_color) =
|
||||
use_css_var_with_options(cx, "--color", UseCssVarOptions::default().target(el));
|
||||
use_css_var_with_options("--color", UseCssVarOptions::default().target(el));
|
||||
let switch_color = move |_| {
|
||||
if color.get() == "#df8543" {
|
||||
set_color.set("#7fa998".to_string());
|
||||
|
|
@ -16,9 +16,9 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
}
|
||||
};
|
||||
|
||||
let elv = create_node_ref::<Div>(cx);
|
||||
let (key, set_key) = create_signal(cx, "--color".to_string());
|
||||
let (color_val, _) = use_css_var_with_options(cx, key, UseCssVarOptions::default().target(elv));
|
||||
let elv = create_node_ref::<Div>();
|
||||
let (key, set_key) = create_signal("--color".to_string());
|
||||
let (color_val, _) = use_css_var_with_options(key, UseCssVarOptions::default().target(elv));
|
||||
let change_var = move |_| {
|
||||
if key.get() == "--color" {
|
||||
set_key.set("--color-one".to_string());
|
||||
|
|
@ -33,8 +33,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
)
|
||||
};
|
||||
|
||||
view! { cx,
|
||||
<div>
|
||||
view! { <div>
|
||||
<div node_ref=el style="--color: #7fa998; color: var(--color)">
|
||||
"Sample text, " {color}
|
||||
</div>
|
||||
|
|
@ -54,7 +53,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,18 +3,14 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::{use_cycle_list, UseCycleListReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
let UseCycleListReturn {
|
||||
state, next, prev, ..
|
||||
} = use_cycle_list(
|
||||
cx,
|
||||
vec![
|
||||
"Dog", "Cat", "Lizard", "Shark", "Whale", "Dolphin", "Octopus", "Seal",
|
||||
],
|
||||
);
|
||||
} = use_cycle_list(vec![
|
||||
"Dog", "Cat", "Lizard", "Shark", "Whale", "Dolphin", "Octopus", "Seal",
|
||||
]);
|
||||
|
||||
view! { cx,
|
||||
<div>
|
||||
view! { <div>
|
||||
<div class="text-primary text-lg font-bold">{state}</div>
|
||||
<button on:click=move |_| { prev() }>"Prev"</button>
|
||||
<button on:click=move |_| { next() }>"Next"</button>
|
||||
|
|
@ -26,7 +22,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::{use_debounce_fn_with_options, DebounceOptions};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (click_count, set_click_count) = create_signal(cx, 0);
|
||||
let (debounced_count, set_debounced_count) = create_signal(cx, 0);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (click_count, set_click_count) = create_signal(0);
|
||||
let (debounced_count, set_debounced_count) = create_signal(0);
|
||||
|
||||
let debounced_fn = use_debounce_fn_with_options(
|
||||
move || set_debounced_count.set(debounced_count.get_untracked() + 1),
|
||||
|
|
@ -13,8 +13,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
DebounceOptions::default().max_wait(Some(5000.0)),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<button
|
||||
view! { <button
|
||||
on:click=move |_| {
|
||||
set_click_count.set(click_count.get_untracked() + 1);
|
||||
debounced_fn();
|
||||
|
|
@ -32,7 +31,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -1,33 +1,36 @@
|
|||
use leptos::*;
|
||||
use leptos_use::docs::demo_or_body;
|
||||
use leptos_use::{use_document_visibility, watch};
|
||||
use leptos_use::use_document_visibility;
|
||||
use std::time::Duration;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
let start_message = "💡 Minimize the page or switch tab then return";
|
||||
let (message, set_message) = create_signal(cx, start_message);
|
||||
let visibility = use_document_visibility(cx);
|
||||
let (message, set_message) = create_signal(start_message);
|
||||
let visibility = use_document_visibility();
|
||||
|
||||
let _ = watch(cx, visibility, move |cur, prev, _| {
|
||||
if let Some(prev) = prev {
|
||||
if *cur == web_sys::VisibilityState::Visible
|
||||
&& *prev == web_sys::VisibilityState::Hidden
|
||||
{
|
||||
set_message("🎉 Welcome back!");
|
||||
let _ = watch(
|
||||
visibility,
|
||||
move |cur, prev, _| {
|
||||
if let Some(prev) = prev {
|
||||
if *cur == web_sys::VisibilityState::Visible
|
||||
&& *prev == web_sys::VisibilityState::Hidden
|
||||
{
|
||||
set_message("🎉 Welcome back!");
|
||||
|
||||
set_timeout(
|
||||
move || {
|
||||
set_message(start_message);
|
||||
},
|
||||
Duration::from_millis(3000),
|
||||
)
|
||||
set_timeout(
|
||||
move || {
|
||||
set_message(start_message);
|
||||
},
|
||||
Duration::from_millis(3000),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<div>{ message }</div>
|
||||
view! { <div>{ message }</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +38,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -5,13 +5,12 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::{use_draggable_with_options, UseDraggableOptions, UseDraggableReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Div>(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Div>();
|
||||
|
||||
let inner_width = window().inner_width().unwrap().as_f64().unwrap();
|
||||
|
||||
let UseDraggableReturn { x, y, style, .. } = use_draggable_with_options(
|
||||
cx,
|
||||
el,
|
||||
UseDraggableOptions::default()
|
||||
.initial_value(Position {
|
||||
|
|
@ -21,8 +20,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
.prevent_default(true),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<p class="italic op50 text-center">
|
||||
view! { <p class="italic op50 text-center">
|
||||
Check the floating box
|
||||
</p>
|
||||
<div
|
||||
|
|
@ -42,7 +40,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,24 +4,22 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
|
|||
use leptos_use::{use_drop_zone_with_options, UseDropZoneOptions, UseDropZoneReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (dropped, set_dropped) = create_signal(cx, false);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (dropped, set_dropped) = create_signal(false);
|
||||
|
||||
let drop_zone_el = create_node_ref::<Div>(cx);
|
||||
let drop_zone_el = create_node_ref::<Div>();
|
||||
|
||||
let UseDropZoneReturn {
|
||||
is_over_drop_zone,
|
||||
files,
|
||||
} = use_drop_zone_with_options(
|
||||
cx,
|
||||
drop_zone_el,
|
||||
UseDropZoneOptions::default()
|
||||
.on_drop(move |_| set_dropped(true))
|
||||
.on_enter(move |_| set_dropped(false)),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<div class="flex">
|
||||
view! { <div class="flex">
|
||||
<div class="w-full h-auto relative">
|
||||
<p>Drop files into dropZone</p>
|
||||
<img width="64" src="use_drop_zone/demo/img/leptos-use-logo.svg" alt="Drop me"/>
|
||||
|
|
@ -36,9 +34,8 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
dropped: <BooleanDisplay value=dropped />
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center items-center">
|
||||
<For each=files key=|f| f.name() view=move |cx, file| {
|
||||
view! { cx,
|
||||
<div class="w-200px bg-black-200/10 ma-2 pa-6">
|
||||
<For each=files key=|f| f.name() view=move |file| {
|
||||
view! { <div class="w-200px bg-black-200/10 ma-2 pa-6">
|
||||
<p>Name: {file.name()}</p>
|
||||
<p>Size: {file.size()}</p>
|
||||
<p>Type: {file.type_()}</p>
|
||||
|
|
@ -57,7 +54,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,19 +4,17 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::{use_element_hover_with_options, UseElementHoverOptions};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Button>(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Button>();
|
||||
|
||||
let is_hovered = use_element_hover_with_options(
|
||||
cx,
|
||||
el,
|
||||
UseElementHoverOptions::default()
|
||||
.delay_enter(200)
|
||||
.delay_leave(600),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<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>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -24,7 +22,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,15 +4,14 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::{use_element_size, UseElementSizeReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Textarea>(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Textarea>();
|
||||
|
||||
let UseElementSizeReturn { width, height } = use_element_size(cx, el);
|
||||
let UseElementSizeReturn { width, height } = use_element_size(el);
|
||||
|
||||
let text = move || format!("width: {}\nheight: {}", width.get(), height.get());
|
||||
|
||||
view! { cx,
|
||||
<Note class="mb-2">"Resize the box to see changes"</Note>
|
||||
view! { <Note class="mb-2">"Resize the box to see changes"</Note>
|
||||
<textarea
|
||||
node_ref=el
|
||||
readonly
|
||||
|
|
@ -26,7 +25,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,13 +4,12 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay, Note};
|
|||
use leptos_use::use_element_visibility;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Div>(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Div>();
|
||||
|
||||
let is_visible = use_element_visibility(cx, el);
|
||||
let is_visible = use_element_visibility(el);
|
||||
|
||||
view! { cx,
|
||||
<div>
|
||||
view! { <div>
|
||||
<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">
|
||||
"Target Element (scroll down)"
|
||||
|
|
@ -28,7 +27,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ use leptos::*;
|
|||
use leptos_use::use_event_listener;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let _ = use_event_listener(cx, window(), keydown, |evt| {
|
||||
fn Demo() -> impl IntoView {
|
||||
let _ = use_event_listener(window(), keydown, |evt| {
|
||||
log!("window keydown: '{}'", evt.key());
|
||||
});
|
||||
|
||||
let element = create_node_ref::<A>(cx);
|
||||
let element = create_node_ref::<A>();
|
||||
|
||||
let _ = use_event_listener(cx, element, click, |evt| {
|
||||
let _ = use_event_listener(element, click, |evt| {
|
||||
log!(
|
||||
"click from element '{:?}'",
|
||||
event_target::<web_sys::HtmlElement>(&evt).inner_text()
|
||||
|
|
@ -20,10 +20,9 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
evt.prevent_default();
|
||||
});
|
||||
|
||||
let (cond, set_cond) = create_signal(cx, true);
|
||||
let (cond, set_cond) = create_signal(true);
|
||||
|
||||
view! { cx,
|
||||
<p>"Check in the dev tools console"</p>
|
||||
view! { <p>"Check in the dev tools console"</p>
|
||||
<p>
|
||||
<label>
|
||||
<input
|
||||
|
|
@ -35,8 +34,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
</p>
|
||||
<Show
|
||||
when=move || cond.get()
|
||||
fallback=move |cx| view! { cx,
|
||||
<a node_ref=element href="#">
|
||||
fallback=move || view! { <a node_ref=element href="#">
|
||||
"Condition"
|
||||
<b>" false "</b>
|
||||
"[click me]"
|
||||
|
|
@ -56,9 +54,8 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to_body(|cx| {
|
||||
view! {cx,
|
||||
<Demo />
|
||||
mount_to_body(|| {
|
||||
view! { <Demo />
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,17 +3,14 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::{use_favicon_with_options, UseFaviconOptions};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (_, set_icon) = use_favicon_with_options(
|
||||
cx,
|
||||
UseFaviconOptions::default().base_url("use_favicon/demo/img/"),
|
||||
);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (_, set_icon) =
|
||||
use_favicon_with_options(UseFaviconOptions::default().base_url("use_favicon/demo/img/"));
|
||||
|
||||
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();
|
||||
|
||||
view! { cx,
|
||||
<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">
|
||||
<a class=classes.clone() href="#" on:click=move |e| {
|
||||
e.prevent_default();
|
||||
|
|
@ -57,7 +54,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::math::use_floor;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (value, set_value) = create_signal(cx, 5.95);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (value, set_value) = create_signal(5.95);
|
||||
|
||||
let result: Signal<f64> = use_floor(cx, value);
|
||||
let result: Signal<f64> = use_floor(value);
|
||||
|
||||
view! { cx,
|
||||
<input
|
||||
view! { <input
|
||||
class="block"
|
||||
prop:value=move || value.get()
|
||||
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
|
||||
|
|
@ -27,7 +26,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ use leptos_use::{
|
|||
};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let root = create_node_ref::<Div>(cx);
|
||||
let target = create_node_ref::<Div>(cx);
|
||||
let (is_visible, set_visible) = create_signal(cx, false);
|
||||
fn Demo() -> impl IntoView {
|
||||
let root = create_node_ref::<Div>();
|
||||
let target = create_node_ref::<Div>();
|
||||
let (is_visible, set_visible) = create_signal(false);
|
||||
|
||||
let UseIntersectionObserverReturn {
|
||||
is_active,
|
||||
|
|
@ -18,7 +18,6 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
resume,
|
||||
..
|
||||
} = use_intersection_observer_with_options(
|
||||
cx,
|
||||
target,
|
||||
move |entries, _| {
|
||||
set_visible.set(entries[0].is_intersecting());
|
||||
|
|
@ -26,8 +25,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
UseIntersectionObserverOptions::default().root(Some(root)),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<div class="text-center">
|
||||
view! { <div class="text-center">
|
||||
<label class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
|
|
@ -89,7 +87,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::{use_interval, UseIntervalReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let UseIntervalReturn { counter, .. } = use_interval(cx, 200);
|
||||
fn Demo() -> impl IntoView {
|
||||
let UseIntervalReturn { counter, .. } = use_interval(200);
|
||||
|
||||
view! { cx,
|
||||
<div>
|
||||
view! { <div>
|
||||
<p>"Interval fired: " { counter }</p>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -17,7 +16,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ use leptos_use::use_interval_fn;
|
|||
use leptos_use::utils::Pausable;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
let greetings = [
|
||||
"Hello",
|
||||
"Hi",
|
||||
|
|
@ -18,16 +18,15 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
"Привет",
|
||||
];
|
||||
|
||||
let (word, set_word) = create_signal(cx, greetings[0]);
|
||||
let (interval, set_interval) = create_signal(cx, 500_u64);
|
||||
let (index, set_index) = create_signal(cx, 0);
|
||||
let (word, set_word) = create_signal(greetings[0]);
|
||||
let (interval, set_interval) = create_signal(500_u64);
|
||||
let (index, set_index) = create_signal(0);
|
||||
|
||||
let Pausable {
|
||||
pause,
|
||||
resume,
|
||||
is_active,
|
||||
} = use_interval_fn(
|
||||
cx,
|
||||
move || {
|
||||
set_index.set((index.get() + 1) % greetings.len());
|
||||
set_word.set(greetings[index.get()]);
|
||||
|
|
@ -35,8 +34,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
interval,
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<p>{move || word.get()}</p>
|
||||
view! { <p>{move || word.get()}</p>
|
||||
<p>
|
||||
"Interval:"
|
||||
<input
|
||||
|
|
@ -48,17 +46,15 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
</p>
|
||||
<Show
|
||||
when=move || is_active.get()
|
||||
fallback=move |cx| {
|
||||
fallback=move || {
|
||||
let resume = resume.clone();
|
||||
view! {cx,
|
||||
<button on:click=move |_| resume()>"Resume"</button>
|
||||
view! { <button on:click=move |_| resume()>"Resume"</button>
|
||||
}
|
||||
}
|
||||
>
|
||||
{
|
||||
let pause = pause.clone();
|
||||
view! {cx,
|
||||
<button on:click=move |_| pause()>"Pause"</button>
|
||||
view! { <button on:click=move |_| pause()>"Pause"</button>
|
||||
}
|
||||
}
|
||||
</Show>
|
||||
|
|
@ -69,7 +65,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::{use_intl_number_format, NumberStyle, UseIntlNumberFormatOptions};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (number, set_number) = create_signal(cx, 123456.78);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (number, set_number) = create_signal(123456.78);
|
||||
|
||||
let de_nf = use_intl_number_format(
|
||||
UseIntlNumberFormatOptions::default()
|
||||
|
|
@ -12,7 +12,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
.style(NumberStyle::Currency)
|
||||
.currency("EUR"),
|
||||
);
|
||||
let de_num = de_nf.format::<f64>(cx, number);
|
||||
let de_num = de_nf.format::<f64>(number);
|
||||
|
||||
let ja_nf = use_intl_number_format(
|
||||
UseIntlNumberFormatOptions::default()
|
||||
|
|
@ -20,17 +20,16 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
.style(NumberStyle::Currency)
|
||||
.currency("JPY"),
|
||||
);
|
||||
let ja_num = ja_nf.format::<f64>(cx, number);
|
||||
let ja_num = ja_nf.format::<f64>(number);
|
||||
|
||||
let in_nf = use_intl_number_format(
|
||||
UseIntlNumberFormatOptions::default()
|
||||
.locale("en-IN")
|
||||
.maximum_significant_digits(3),
|
||||
);
|
||||
let in_num = in_nf.format::<f64>(cx, number);
|
||||
let in_num = in_nf.format::<f64>(number);
|
||||
|
||||
view! { cx,
|
||||
<input
|
||||
view! { <input
|
||||
class="block"
|
||||
prop:value=number
|
||||
on:input=move |e| set_number(event_target_value(&e).parse().unwrap())
|
||||
|
|
@ -50,7 +49,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
|
|||
use leptos_use::use_media_query;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let is_large_screen = use_media_query(cx, "(min-width: 1024px)");
|
||||
let is_dark_preferred = use_media_query(cx, "(prefers-color-scheme: dark)");
|
||||
fn Demo() -> impl IntoView {
|
||||
let is_large_screen = use_media_query("(min-width: 1024px)");
|
||||
let is_dark_preferred = use_media_query("(prefers-color-scheme: dark)");
|
||||
|
||||
view! { cx,
|
||||
<p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p>
|
||||
view! { <p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p>
|
||||
<p>"Is dark preferred: " <BooleanDisplay value=is_dark_preferred /></p>
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +16,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -22,20 +22,18 @@ impl UseMouseEventExtractor for Extractor {
|
|||
}
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Div>(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Div>();
|
||||
|
||||
let mouse_default = use_mouse(cx);
|
||||
let mouse_default = use_mouse();
|
||||
|
||||
let mouse_with_extractor = use_mouse_with_options(
|
||||
cx,
|
||||
UseMouseOptions::default()
|
||||
.target(el)
|
||||
.coord_type(UseMouseCoordType::Custom(Extractor)),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<div node_ref=el>
|
||||
view! { <div node_ref=el>
|
||||
<p class="font-semibold">"Basic Usage"</p>
|
||||
<pre lang="yaml">
|
||||
{ move || format!(r#" x: {}
|
||||
|
|
@ -59,7 +57,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -5,17 +5,16 @@ use leptos_use::use_mutation_observer_with_options;
|
|||
use std::time::Duration;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Div>(cx);
|
||||
let (messages, set_messages) = create_signal(cx, vec![]);
|
||||
let (class_name, set_class_name) = create_signal(cx, String::new());
|
||||
let (style, set_style) = create_signal(cx, String::new());
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Div>();
|
||||
let (messages, set_messages) = create_signal(vec![]);
|
||||
let (class_name, set_class_name) = create_signal(String::new());
|
||||
let (style, set_style) = create_signal(String::new());
|
||||
|
||||
let mut init = web_sys::MutationObserverInit::new();
|
||||
init.attributes(true);
|
||||
|
||||
use_mutation_observer_with_options(
|
||||
cx,
|
||||
el,
|
||||
move |mutations, _| {
|
||||
if let Some(mutation) = mutations.first() {
|
||||
|
|
@ -41,16 +40,14 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
Duration::from_millis(1550),
|
||||
);
|
||||
|
||||
let enum_msgs = Signal::derive(cx, move || {
|
||||
messages.get().into_iter().enumerate().collect::<Vec<_>>()
|
||||
});
|
||||
let enum_msgs =
|
||||
Signal::derive(move || messages.get().into_iter().enumerate().collect::<Vec<_>>());
|
||||
|
||||
view! { cx,
|
||||
<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
|
||||
each=move || enum_msgs.get()
|
||||
key=|message| message.0 // list only grows so this is fine here
|
||||
view=|cx, message| view! { cx, <div>"Mutation Attribute: " <code>{message.1}</code></div> }
|
||||
view=|message| view! { <div>"Mutation Attribute: " <code>{message.1}</code></div> }
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -60,7 +57,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,19 +3,18 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::{use_raf_fn, utils::Pausable};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (count, set_count) = create_signal(cx, 0);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (count, set_count) = create_signal(0);
|
||||
|
||||
let Pausable {
|
||||
pause,
|
||||
resume,
|
||||
is_active,
|
||||
} = use_raf_fn(cx, move |_| {
|
||||
} = use_raf_fn(move |_| {
|
||||
set_count.update(|count| *count += 1);
|
||||
});
|
||||
|
||||
view! { cx,
|
||||
<div>Count: { count }</div>
|
||||
view! { <div>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,7 +24,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::use_resize_observer;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Textarea>(cx);
|
||||
let (text, set_text) = create_signal(cx, "".to_string());
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Textarea>();
|
||||
let (text, set_text) = create_signal("".to_string());
|
||||
|
||||
use_resize_observer(cx, el, move |entries, _| {
|
||||
use_resize_observer(el, move |entries, _| {
|
||||
let rect = entries[0].content_rect();
|
||||
set_text.set(format!(
|
||||
"width: {:.0}\nheight: {:.0}",
|
||||
|
|
@ -17,8 +17,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
));
|
||||
});
|
||||
|
||||
view! { cx,
|
||||
<Note class="mb-2">"Resize the box to see changes"</Note>
|
||||
view! { <Note class="mb-2">"Resize the box to see changes"</Note>
|
||||
<textarea
|
||||
node_ref=el
|
||||
readonly
|
||||
|
|
@ -32,7 +31,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
|
|||
use leptos_use::math::use_round;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (value, set_value) = create_signal(cx, 5.95);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (value, set_value) = create_signal(5.95);
|
||||
|
||||
let result: Signal<f64> = use_round(cx, value);
|
||||
let result: Signal<f64> = use_round(value);
|
||||
|
||||
view! { cx,
|
||||
<input
|
||||
view! { <input
|
||||
class="block"
|
||||
prop:value=move || value.get()
|
||||
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
|
||||
|
|
@ -27,7 +26,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ use leptos_use::{use_scroll_with_options, ScrollBehavior, UseScrollOptions, UseS
|
|||
use web_sys::Event;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let el = create_node_ref::<Div>(cx);
|
||||
let (smooth, set_smooth) = create_signal(cx, false);
|
||||
let behavior = Signal::derive(cx, move || {
|
||||
fn Demo() -> impl IntoView {
|
||||
let el = create_node_ref::<Div>();
|
||||
let (smooth, set_smooth) = create_signal(false);
|
||||
let behavior = Signal::derive(move || {
|
||||
if smooth.get() {
|
||||
ScrollBehavior::Smooth
|
||||
} else {
|
||||
|
|
@ -35,7 +35,6 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
directions,
|
||||
..
|
||||
} = use_scroll_with_options(
|
||||
cx,
|
||||
el,
|
||||
UseScrollOptions::default()
|
||||
.behavior(behavior)
|
||||
|
|
@ -43,8 +42,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
.on_scroll(on_scroll.clone()),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<div class="flex">
|
||||
view! { <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="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">
|
||||
|
|
@ -124,35 +122,35 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
<div class="text-right opacity-75">
|
||||
"Top Arrived"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().top) />
|
||||
<BooleanDisplay value=Signal::derive(move || arrived_state.get().top) />
|
||||
<div class="text-right opacity-75">
|
||||
"Right Arrived"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().right) />
|
||||
<BooleanDisplay value=Signal::derive(move || arrived_state.get().right) />
|
||||
<div class="text-right opacity-75">
|
||||
"Bottom Arrived"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().bottom) />
|
||||
<BooleanDisplay value=Signal::derive(move || arrived_state.get().bottom) />
|
||||
<div class="text-right opacity-75">
|
||||
"Left Arrived"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().left) />
|
||||
<BooleanDisplay value=Signal::derive(move || arrived_state.get().left) />
|
||||
<div class="text-right opacity-75">
|
||||
"Scrolling Up"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || directions.get().top) />
|
||||
<BooleanDisplay value=Signal::derive(move || directions.get().top) />
|
||||
<div class="text-right opacity-75">
|
||||
"Scrolling Right"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || directions.get().right) />
|
||||
<BooleanDisplay value=Signal::derive(move || directions.get().right) />
|
||||
<div class="text-right opacity-75">
|
||||
"Scrolling Down"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || directions.get().bottom) />
|
||||
<BooleanDisplay value=Signal::derive(move || directions.get().bottom) />
|
||||
<div class="text-right opacity-75">
|
||||
"Scrolling Left"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || directions.get().left) />
|
||||
<BooleanDisplay value=Signal::derive(move || directions.get().left) />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -163,7 +161,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ pub struct BananaState {
|
|||
}
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
let the_default = BananaState {
|
||||
name: "Banana".to_string(),
|
||||
color: "Yellow".to_string(),
|
||||
|
|
@ -20,12 +20,11 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
count: 0,
|
||||
};
|
||||
|
||||
let (state, set_state, _) = use_storage(cx, "banana-state", the_default.clone());
|
||||
let (state, set_state, _) = use_storage("banana-state", the_default.clone());
|
||||
|
||||
let (state2, ..) = use_storage(cx, "banana-state", the_default.clone());
|
||||
let (state2, ..) = use_storage("banana-state", the_default.clone());
|
||||
|
||||
view! { cx,
|
||||
<input
|
||||
view! { <input
|
||||
class="block"
|
||||
prop:value=move || state.get().name
|
||||
on:input=move |e| set_state.update(|s| s.name = event_target_value(&e))
|
||||
|
|
@ -60,7 +59,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
{ move || format!("{:#?}", state2.get()) }
|
||||
</pre>
|
||||
|
||||
<Note>"The values are persistant. 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,7 +67,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,14 +3,16 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::use_throttle_fn;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (click_count, set_click_count) = create_signal(cx, 0);
|
||||
let (throttled_count, set_throttled_count) = create_signal(cx, 0);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (click_count, set_click_count) = create_signal(0);
|
||||
let (throttled_count, set_throttled_count) = create_signal(0);
|
||||
|
||||
let throttled_fn = use_throttle_fn(move || set_throttled_count.set(throttled_count.get_untracked() + 1), 1000.0);
|
||||
let throttled_fn = use_throttle_fn(
|
||||
move || set_throttled_count.set(throttled_count.get_untracked() + 1),
|
||||
1000.0,
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<button
|
||||
view! { <button
|
||||
on:click=move |_| {
|
||||
set_click_count.set(click_count.get_untracked() + 1);
|
||||
throttled_fn();
|
||||
|
|
@ -28,7 +30,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ use leptos_use::{
|
|||
use web_sys::{CloseEvent, Event};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (history, set_history) = create_signal(cx, vec![]);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (history, set_history) = create_signal(vec![]);
|
||||
|
||||
fn update_history(&history: &WriteSignal<Vec<String>>, message: String) {
|
||||
let _ = &history.update(|history: &mut Vec<_>| history.push(message));
|
||||
|
|
@ -27,7 +27,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
open,
|
||||
close,
|
||||
..
|
||||
} = use_websocket(cx, "wss://echo.websocket.events/".to_string());
|
||||
} = use_websocket("wss://echo.websocket.events/".to_string());
|
||||
|
||||
let send_message = move |_| {
|
||||
let m = "Hello, world!".to_string();
|
||||
|
|
@ -52,13 +52,13 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
close();
|
||||
};
|
||||
|
||||
create_effect(cx, move |_| {
|
||||
create_effect(move |_| {
|
||||
if let Some(m) = message.get() {
|
||||
update_history(&set_history, format! {"[message]: {:?}", m});
|
||||
};
|
||||
});
|
||||
|
||||
create_effect(cx, move |_| {
|
||||
create_effect(move |_| {
|
||||
if let Some(m) = message_bytes.get() {
|
||||
update_history(&set_history, format! {"[message_bytes]: {:?}", m});
|
||||
};
|
||||
|
|
@ -68,7 +68,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
// use_websocket_with_options
|
||||
// ----------------------------
|
||||
|
||||
let (history2, set_history2) = create_signal(cx, vec![]);
|
||||
let (history2, set_history2) = create_signal(vec![]);
|
||||
|
||||
let on_open_callback = move |e: Event| {
|
||||
set_history2.update(|history: &mut Vec<_>| {
|
||||
|
|
@ -107,7 +107,6 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
message_bytes: message_bytes2,
|
||||
..
|
||||
} = use_websocket_with_options(
|
||||
cx,
|
||||
"wss://echo.websocket.events/".to_string(),
|
||||
UseWebSocketOptions::default()
|
||||
.manual(true)
|
||||
|
|
@ -139,13 +138,13 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
|
||||
let status2 = move || ready_state2.get().to_string();
|
||||
|
||||
create_effect(cx, move |_| {
|
||||
create_effect(move |_| {
|
||||
if let Some(m) = message2.get() {
|
||||
update_history(&set_history2, format! {"[message]: {:?}", m});
|
||||
};
|
||||
});
|
||||
|
||||
create_effect(cx, move |_| {
|
||||
create_effect(move |_| {
|
||||
if let Some(m) = message_bytes2.get() {
|
||||
update_history(&set_history2, format! {"[message_bytes]: {:?}", m});
|
||||
};
|
||||
|
|
@ -153,8 +152,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
|
||||
let connected2 = move || ready_state2.get() == UseWebSocketReadyState::Open;
|
||||
|
||||
view! { cx,
|
||||
<div class="container">
|
||||
view! { <div class="container">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="w-full lg:w-1/2">
|
||||
<h1 class="text-xl lg:text-4xl mb-2">"use_websocket"</h1>
|
||||
|
|
@ -170,8 +168,8 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
<For
|
||||
each=move || history.get().into_iter().enumerate()
|
||||
key=|(index, _)| *index
|
||||
view=move |cx, (_, message)| {
|
||||
view! {cx, <div>{message}</div> }
|
||||
view=move |(_, message)| {
|
||||
view! { <div>{message}</div> }
|
||||
}
|
||||
/>
|
||||
|
||||
|
|
@ -191,8 +189,8 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
<For
|
||||
each=move || history2.get().into_iter().enumerate()
|
||||
key=|(index, _)| *index
|
||||
view=move |cx, (_, message)| {
|
||||
view! {cx, <li>{message}</li> }
|
||||
view=move |(_, message)| {
|
||||
view! { <li>{message}</li> }
|
||||
}
|
||||
/>
|
||||
</ul>
|
||||
|
|
@ -208,7 +206,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Info);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -1,25 +1,28 @@
|
|||
use leptos::*;
|
||||
use leptos_use::docs::demo_or_body;
|
||||
use leptos_use::{use_window_focus, watch};
|
||||
use leptos_use::use_window_focus;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
fn Demo() -> impl IntoView {
|
||||
let start_message = "💡 Click somewhere outside of the document to unfocus.";
|
||||
|
||||
let (message, set_message) = create_signal(cx, start_message);
|
||||
let (message, set_message) = create_signal(start_message);
|
||||
|
||||
let focused = use_window_focus(cx);
|
||||
let focused = use_window_focus();
|
||||
|
||||
let _ = watch(cx, focused, move |focused, _, _| {
|
||||
if *focused {
|
||||
set_message(start_message);
|
||||
} else {
|
||||
set_message("ℹ Tab is unfocused")
|
||||
}
|
||||
});
|
||||
let _ = watch(
|
||||
focused,
|
||||
move |focused, _, _| {
|
||||
if *focused {
|
||||
set_message(start_message);
|
||||
} else {
|
||||
set_message("ℹ Tab is unfocused")
|
||||
}
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<div>{ message }</div>
|
||||
view! { <div>{ message }</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +30,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::use_window_scroll;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (x, y) = use_window_scroll(cx);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (x, y) = use_window_scroll();
|
||||
|
||||
let div = document().create_element("div").unwrap();
|
||||
div.set_attribute(
|
||||
|
|
@ -15,8 +15,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
|
||||
document().body().unwrap().append_child(&div).unwrap();
|
||||
|
||||
view! { cx,
|
||||
<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">
|
||||
<Note class="mb-2">Scroll value</Note>
|
||||
<div>
|
||||
|
|
@ -31,7 +30,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::{watch_debounced_with_options, WatchDebouncedOptions};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (input, set_input) = create_signal(cx, "".to_string());
|
||||
let (updated, set_updated) = create_signal(cx, 0);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (input, set_input) = create_signal("".to_string());
|
||||
let (updated, set_updated) = create_signal(0);
|
||||
|
||||
let _ = watch_debounced_with_options(
|
||||
cx,
|
||||
move || input.get(),
|
||||
move |_, _, _| {
|
||||
set_updated.update(|x| *x += 1);
|
||||
|
|
@ -17,8 +16,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
WatchDebouncedOptions::default().max_wait(Some(5000.0)),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<input
|
||||
view! { <input
|
||||
class="block"
|
||||
prop:value=move || input.get()
|
||||
on:input=move |e| set_input.set(event_target_value(&e))
|
||||
|
|
@ -40,7 +38,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::{watch_pausable, WatchPausableReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let input = create_node_ref::<Input>(cx);
|
||||
let (log, set_log) = create_signal(cx, "".to_string());
|
||||
let (source, set_source) = create_signal(cx, "".to_string());
|
||||
fn Demo() -> impl IntoView {
|
||||
let input = create_node_ref::<Input>();
|
||||
let (log, set_log) = create_signal("".to_string());
|
||||
let (source, set_source) = create_signal("".to_string());
|
||||
|
||||
let WatchPausableReturn {
|
||||
pause,
|
||||
|
|
@ -15,7 +15,6 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
is_active,
|
||||
..
|
||||
} = watch_pausable(
|
||||
cx,
|
||||
move || source.get(),
|
||||
move |v, _, _| {
|
||||
set_log.update(|log| *log = format!("{log}Changed to \"{v}\"\n"));
|
||||
|
|
@ -34,8 +33,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
resume();
|
||||
};
|
||||
|
||||
view! { cx,
|
||||
<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
|
||||
node_ref=input
|
||||
class="block"
|
||||
|
|
@ -58,7 +56,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version = "0.1.0"
|
|||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.4", features = ["nightly", "csr"] }
|
||||
leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, Note};
|
|||
use leptos_use::watch_throttled;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
let (input, set_input) = create_signal(cx, "".to_string());
|
||||
let (updated, set_updated) = create_signal(cx, 0);
|
||||
fn Demo() -> impl IntoView {
|
||||
let (input, set_input) = create_signal("".to_string());
|
||||
let (updated, set_updated) = create_signal(0);
|
||||
|
||||
let _ = watch_throttled(
|
||||
cx,
|
||||
move || input.get(),
|
||||
move |_, _, _| {
|
||||
set_updated.update(|x| *x += 1);
|
||||
|
|
@ -16,8 +15,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
1000.0,
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
<input
|
||||
view! { <input
|
||||
class="block"
|
||||
prop:value=move || input.get()
|
||||
on:input=move |e| set_input.set(event_target_value(&e))
|
||||
|
|
@ -37,7 +35,7 @@ fn main() {
|
|||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
mount_to(demo_or_body(), |cx| {
|
||||
view! { cx, <Demo /> }
|
||||
mount_to(demo_or_body(), || {
|
||||
view! { <Demo /> }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,35 +127,26 @@ where
|
|||
|
||||
// From static element //////////////////////////////////////////////////////////////
|
||||
|
||||
impl<T, E> From<(Scope, T)> for ElementMaybeSignal<T, E>
|
||||
impl<T, E> From<T> for ElementMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(value: (Scope, T)) -> Self {
|
||||
ElementMaybeSignal::Static(Some(value.1))
|
||||
fn from(value: T) -> Self {
|
||||
ElementMaybeSignal::Static(Some(value))
|
||||
}
|
||||
}
|
||||
|
||||
impl<T, E> From<(Scope, Option<T>)> for ElementMaybeSignal<T, E>
|
||||
impl<T, E> From<Option<T>> for ElementMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, Option<T>)) -> Self {
|
||||
ElementMaybeSignal::Static(target.1)
|
||||
fn from(target: Option<T>) -> Self {
|
||||
ElementMaybeSignal::Static(target)
|
||||
}
|
||||
}
|
||||
|
||||
// From string (selector) ///////////////////////////////////////////////////////////////
|
||||
|
||||
impl<'a, E> From<(Scope, &'a str)> for ElementMaybeSignal<web_sys::Element, E>
|
||||
where
|
||||
E: From<web_sys::Element> + 'static,
|
||||
{
|
||||
fn from(target: (Scope, &'a str)) -> Self {
|
||||
Self::Static(document().query_selector(target.1).unwrap_or_default())
|
||||
}
|
||||
}
|
||||
|
||||
impl<'a, E> From<&'a str> for ElementMaybeSignal<web_sys::Element, E>
|
||||
where
|
||||
E: From<web_sys::Element> + 'static,
|
||||
|
|
@ -174,18 +165,14 @@ where
|
|||
}
|
||||
}
|
||||
|
||||
impl<E> From<(Scope, Signal<String>)> for ElementMaybeSignal<web_sys::Element, E>
|
||||
impl<E> From<Signal<String>> for ElementMaybeSignal<web_sys::Element, E>
|
||||
where
|
||||
E: From<web_sys::Element> + 'static,
|
||||
{
|
||||
fn from(target: (Scope, Signal<String>)) -> Self {
|
||||
let (cx, signal) = target;
|
||||
|
||||
fn from(signal: Signal<String>) -> Self {
|
||||
Self::Dynamic(
|
||||
create_memo(cx, move |_| {
|
||||
document().query_selector(&signal.get()).unwrap_or_default()
|
||||
})
|
||||
.into(),
|
||||
create_memo(move |_| document().query_selector(&signal.get()).unwrap_or_default())
|
||||
.into(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -194,12 +181,12 @@ where
|
|||
|
||||
macro_rules! impl_from_signal_option {
|
||||
($ty:ty) => {
|
||||
impl<T, E> From<(Scope, $ty)> for ElementMaybeSignal<T, E>
|
||||
impl<T, E> From<$ty> for ElementMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, $ty)) -> Self {
|
||||
Self::Dynamic(target.1.into())
|
||||
fn from(target: $ty) -> Self {
|
||||
Self::Dynamic(target.into())
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -212,14 +199,12 @@ impl_from_signal_option!(Memo<Option<T>>);
|
|||
|
||||
macro_rules! impl_from_signal {
|
||||
($ty:ty) => {
|
||||
impl<T, E> From<(Scope, $ty)> for ElementMaybeSignal<T, E>
|
||||
impl<T, E> From<$ty> for ElementMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, $ty)) -> Self {
|
||||
let (cx, signal) = target;
|
||||
|
||||
Self::Dynamic(Signal::derive(cx, move || Some(signal.get())))
|
||||
fn from(signal: $ty) -> Self {
|
||||
Self::Dynamic(Signal::derive(move || Some(signal.get())))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -234,14 +219,12 @@ impl_from_signal!(Memo<T>);
|
|||
|
||||
macro_rules! impl_from_node_ref {
|
||||
($ty:ty) => {
|
||||
impl<R> From<(Scope, NodeRef<R>)> for ElementMaybeSignal<$ty, $ty>
|
||||
impl<R> From<NodeRef<R>> for ElementMaybeSignal<$ty, $ty>
|
||||
where
|
||||
R: ElementDescriptor + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, NodeRef<R>)) -> Self {
|
||||
let (cx, node_ref) = target;
|
||||
|
||||
Self::Dynamic(Signal::derive(cx, move || {
|
||||
fn from(node_ref: NodeRef<R>) -> Self {
|
||||
Self::Dynamic(Signal::derive(move || {
|
||||
node_ref.get().map(move |el| {
|
||||
let el = el.into_any();
|
||||
let el: $ty = el.deref().clone().into();
|
||||
|
|
|
|||
|
|
@ -128,32 +128,32 @@ where
|
|||
|
||||
// From single static element //////////////////////////////////////////////////////////////
|
||||
|
||||
impl<T, E> From<(Scope, T)> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<T> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(value: (Scope, T)) -> Self {
|
||||
ElementsMaybeSignal::Static(vec![Some(value.1)])
|
||||
fn from(value: T) -> Self {
|
||||
ElementsMaybeSignal::Static(vec![Some(value)])
|
||||
}
|
||||
}
|
||||
|
||||
impl<T, E> From<(Scope, Option<T>)> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<Option<T>> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, Option<T>)) -> Self {
|
||||
ElementsMaybeSignal::Static(vec![target.1])
|
||||
fn from(target: Option<T>) -> Self {
|
||||
ElementsMaybeSignal::Static(vec![target])
|
||||
}
|
||||
}
|
||||
|
||||
// From string (selector) ///////////////////////////////////////////////////////////////
|
||||
|
||||
impl<'a, E> From<(Scope, &'a str)> for ElementsMaybeSignal<web_sys::Node, E>
|
||||
impl<'a, E> From<&'a str> for ElementsMaybeSignal<web_sys::Node, E>
|
||||
where
|
||||
E: From<web_sys::Node> + 'static,
|
||||
{
|
||||
fn from(target: (Scope, &'a str)) -> Self {
|
||||
if let Ok(node_list) = document().query_selector_all(target.1) {
|
||||
fn from(target: &'a str) -> Self {
|
||||
if let Ok(node_list) = document().query_selector_all(target) {
|
||||
let mut list = Vec::with_capacity(node_list.length() as usize);
|
||||
for i in 0..node_list.length() {
|
||||
let node = node_list.get(i).expect("checked the range");
|
||||
|
|
@ -167,15 +167,13 @@ where
|
|||
}
|
||||
}
|
||||
|
||||
impl<E> From<(Scope, Signal<String>)> for ElementsMaybeSignal<web_sys::Node, E>
|
||||
impl<E> From<Signal<String>> for ElementsMaybeSignal<web_sys::Node, E>
|
||||
where
|
||||
E: From<web_sys::Node> + 'static,
|
||||
{
|
||||
fn from(target: (Scope, Signal<String>)) -> Self {
|
||||
let (cx, signal) = target;
|
||||
|
||||
fn from(signal: Signal<String>) -> Self {
|
||||
Self::Dynamic(
|
||||
create_memo(cx, move |_| {
|
||||
create_memo(move |_| {
|
||||
if let Ok(node_list) = document().query_selector_all(&signal.get()) {
|
||||
let mut list = Vec::with_capacity(node_list.length() as usize);
|
||||
for i in 0..node_list.length() {
|
||||
|
|
@ -196,13 +194,12 @@ where
|
|||
|
||||
macro_rules! impl_from_signal_option {
|
||||
($ty:ty) => {
|
||||
impl<T, E> From<(Scope, $ty)> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<$ty> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, $ty)) -> Self {
|
||||
let (cx, signal) = target;
|
||||
Self::Dynamic(Signal::derive(cx, move || vec![signal.get()]))
|
||||
fn from(signal: $ty) -> Self {
|
||||
Self::Dynamic(Signal::derive(move || vec![signal.get()]))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -215,14 +212,12 @@ impl_from_signal_option!(Memo<Option<T>>);
|
|||
|
||||
macro_rules! impl_from_signal {
|
||||
($ty:ty) => {
|
||||
impl<T, E> From<(Scope, $ty)> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<$ty> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, $ty)) -> Self {
|
||||
let (cx, signal) = target;
|
||||
|
||||
Self::Dynamic(Signal::derive(cx, move || vec![Some(signal.get())]))
|
||||
fn from(signal: $ty) -> Self {
|
||||
Self::Dynamic(Signal::derive(move || vec![Some(signal.get())]))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -237,14 +232,12 @@ impl_from_signal!(Memo<T>);
|
|||
|
||||
macro_rules! impl_from_node_ref {
|
||||
($ty:ty) => {
|
||||
impl<R> From<(Scope, NodeRef<R>)> for ElementsMaybeSignal<$ty, $ty>
|
||||
impl<R> From<NodeRef<R>> for ElementsMaybeSignal<$ty, $ty>
|
||||
where
|
||||
R: ElementDescriptor + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, NodeRef<R>)) -> Self {
|
||||
let (cx, node_ref) = target;
|
||||
|
||||
Self::Dynamic(Signal::derive(cx, move || {
|
||||
fn from(node_ref: NodeRef<R>) -> Self {
|
||||
Self::Dynamic(Signal::derive(move || {
|
||||
vec![node_ref.get().map(move |el| {
|
||||
let el = el.into_any();
|
||||
let el: $ty = el.deref().clone().into();
|
||||
|
|
@ -261,74 +254,69 @@ impl_from_node_ref!(web_sys::Element);
|
|||
|
||||
// From multiple static elements //////////////////////////////////////////////////////////////
|
||||
|
||||
impl<T, E> From<(Scope, &[T])> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<&[T]> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, &[T])) -> Self {
|
||||
Self::Static(target.1.iter().map(|t| Some(t.clone())).collect())
|
||||
fn from(target: &[T]) -> Self {
|
||||
Self::Static(target.iter().map(|t| Some(t.clone())).collect())
|
||||
}
|
||||
}
|
||||
|
||||
impl<T, E> From<(Scope, &[Option<T>])> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<&[Option<T>]> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, &[Option<T>])) -> Self {
|
||||
Self::Static(target.1.to_vec())
|
||||
fn from(target: &[Option<T>]) -> Self {
|
||||
Self::Static(target.to_vec())
|
||||
}
|
||||
}
|
||||
|
||||
// From signal of vec ////////////////////////////////////////////////////////////////
|
||||
|
||||
impl<T, E> From<(Scope, Signal<Vec<T>>)> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<Signal<Vec<T>>> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, Signal<Vec<T>>)) -> Self {
|
||||
let (cx, signal) = target;
|
||||
Self::Dynamic(Signal::derive(cx, move || {
|
||||
fn from(signal: Signal<Vec<T>>) -> Self {
|
||||
Self::Dynamic(Signal::derive(move || {
|
||||
signal.get().into_iter().map(|t| Some(t)).collect()
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
impl<T, E> From<(Scope, Signal<Vec<Option<T>>>)> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<Signal<Vec<Option<T>>>> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, Signal<Vec<Option<T>>>)) -> Self {
|
||||
Self::Dynamic(target.1)
|
||||
fn from(target: Signal<Vec<Option<T>>>) -> Self {
|
||||
Self::Dynamic(target)
|
||||
}
|
||||
}
|
||||
|
||||
// From multiple signals //////////////////////////////////////////////////////////////
|
||||
|
||||
impl<T, E> From<(Scope, &[Signal<T>])> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<&[Signal<T>]> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, &[Signal<T>])) -> Self {
|
||||
let (cx, list) = target;
|
||||
|
||||
fn from(list: &[Signal<T>]) -> Self {
|
||||
let list = list.to_vec();
|
||||
|
||||
Self::Dynamic(Signal::derive(cx, move || {
|
||||
Self::Dynamic(Signal::derive(move || {
|
||||
list.iter().map(|t| Some(t.get())).collect()
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
impl<T, E> From<(Scope, &[Signal<Option<T>>])> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<&[Signal<Option<T>>]> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, &[Signal<Option<T>>])) -> Self {
|
||||
let (cx, list) = target;
|
||||
|
||||
fn from(list: &[Signal<Option<T>>]) -> Self {
|
||||
let list = list.to_vec();
|
||||
|
||||
Self::Dynamic(Signal::derive(cx, move || {
|
||||
Self::Dynamic(Signal::derive(move || {
|
||||
list.iter().map(|t| t.get()).collect()
|
||||
}))
|
||||
}
|
||||
|
|
@ -338,16 +326,14 @@ where
|
|||
|
||||
macro_rules! impl_from_multi_node_ref {
|
||||
($ty:ty) => {
|
||||
impl<R> From<(Scope, &[NodeRef<R>])> for ElementsMaybeSignal<$ty, $ty>
|
||||
impl<R> From<&[NodeRef<R>]> for ElementsMaybeSignal<$ty, $ty>
|
||||
where
|
||||
R: ElementDescriptor + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, &[NodeRef<R>])) -> Self {
|
||||
let (cx, node_refs) = target;
|
||||
|
||||
fn from(node_refs: &[NodeRef<R>]) -> Self {
|
||||
let node_refs = node_refs.to_vec();
|
||||
|
||||
Self::Dynamic(Signal::derive(cx, move || {
|
||||
Self::Dynamic(Signal::derive(move || {
|
||||
node_refs
|
||||
.iter()
|
||||
.map(|node_ref| {
|
||||
|
|
@ -369,16 +355,14 @@ impl_from_multi_node_ref!(web_sys::Element);
|
|||
|
||||
// From ElementMaybeSignal //////////////////////////////////////////////////////////////
|
||||
|
||||
impl<T, E> From<(Scope, ElementMaybeSignal<T, E>)> for ElementsMaybeSignal<T, E>
|
||||
impl<T, E> From<ElementMaybeSignal<T, E>> for ElementsMaybeSignal<T, E>
|
||||
where
|
||||
T: Into<E> + Clone + 'static,
|
||||
{
|
||||
fn from(target: (Scope, ElementMaybeSignal<T, E>)) -> Self {
|
||||
let (cx, signal) = target;
|
||||
|
||||
fn from(signal: ElementMaybeSignal<T, E>) -> Self {
|
||||
match signal {
|
||||
ElementMaybeSignal::Dynamic(signal) => {
|
||||
Self::Dynamic(Signal::derive(cx, move || vec![signal.get()]))
|
||||
Self::Dynamic(Signal::derive(move || vec![signal.get()]))
|
||||
}
|
||||
ElementMaybeSignal::Static(el) => Self::Static(vec![el]),
|
||||
ElementMaybeSignal::_Phantom(_) => unreachable!(),
|
||||
|
|
|
|||
|
|
@ -77,12 +77,12 @@ impl From<&str> for MaybeRwSignal<String> {
|
|||
}
|
||||
|
||||
impl<T: Clone> MaybeRwSignal<T> {
|
||||
pub fn into_signal(self, cx: Scope) -> (Signal<T>, WriteSignal<T>) {
|
||||
pub fn into_signal(self) -> (Signal<T>, WriteSignal<T>) {
|
||||
match self {
|
||||
Self::DynamicRead(s) => {
|
||||
let (r, w) = create_signal(cx, s.get_untracked());
|
||||
let (r, w) = create_signal(s.get_untracked());
|
||||
|
||||
create_effect(cx, move |_| {
|
||||
create_effect(move |_| {
|
||||
w.update(move |w| {
|
||||
*w = s.get();
|
||||
});
|
||||
|
|
@ -92,7 +92,7 @@ impl<T: Clone> MaybeRwSignal<T> {
|
|||
}
|
||||
Self::DynamicRw(r, w) => (r, w),
|
||||
Self::Static(v) => {
|
||||
let (r, w) = create_signal(cx, v.clone());
|
||||
let (r, w) = create_signal(v.clone());
|
||||
(Signal::from(r), w)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ use leptos::*;
|
|||
|
||||
#[component]
|
||||
pub fn BooleanDisplay(
|
||||
cx: Scope,
|
||||
#[prop(into)] value: MaybeSignal<bool>,
|
||||
#[prop(optional, into)] class: String,
|
||||
#[prop(default = "true")] true_str: &'static str,
|
||||
|
|
@ -19,8 +18,7 @@ pub fn BooleanDisplay(
|
|||
)
|
||||
};
|
||||
|
||||
view! { cx,
|
||||
<span class=class>
|
||||
view! { <span class=class>
|
||||
{ move || if value.get() { true_str} else { false_str } }
|
||||
</span>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn Note(cx: Scope, #[prop(optional, into)] class: String, children: Children) -> impl IntoView {
|
||||
pub fn Note(#[prop(optional, into)] class: String, children: Children) -> impl IntoView {
|
||||
let class = format!("note {class}");
|
||||
|
||||
view! { cx,
|
||||
<div class=class>{ children(cx) }</div>
|
||||
view! { <div class=class>{ children() }</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,15 +11,14 @@ use_derive_signal!(
|
|||
/// # use leptos_use::is_err;
|
||||
/// #
|
||||
/// # #[component]
|
||||
/// # fn Demo(cx: Scope) -> impl IntoView {
|
||||
/// # fn Demo() -> impl IntoView {
|
||||
/// let (example, set_example) = create_signal(
|
||||
/// cx,
|
||||
/// if js_sys::Math::random() < 0.5 { Ok("Example") } else { Err(()) }
|
||||
/// );
|
||||
///
|
||||
/// let is_error = is_err(cx, example);
|
||||
/// let is_error = is_err(example);
|
||||
/// #
|
||||
/// # view! { cx, }
|
||||
/// # view! { }
|
||||
/// # }
|
||||
/// ```
|
||||
is_err<Result<T, ()>, T: 'static> -> bool
|
||||
|
|
|
|||
|
|
@ -11,15 +11,14 @@ use_derive_signal!(
|
|||
/// # use leptos_use::is_none;
|
||||
/// #
|
||||
/// # #[component]
|
||||
/// # fn Demo(cx: Scope) -> impl IntoView {
|
||||
/// # fn Demo() -> impl IntoView {
|
||||
/// let (example, set_example) = create_signal(
|
||||
/// cx,
|
||||
/// if js_sys::Math::random() < 0.5 { Some("Example") } else { None }
|
||||
/// );
|
||||
///
|
||||
/// let is_empty = is_none(cx, example);
|
||||
/// let is_empty = is_none(example);
|
||||
/// #
|
||||
/// # view! { cx, }
|
||||
/// # view! { }
|
||||
/// # }
|
||||
/// ```
|
||||
is_none<Option<T>, T: 'static> -> bool
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue