diff --git a/.cargo/config.toml b/.cargo/config.toml new file mode 100644 index 0000000..8467175 --- /dev/null +++ b/.cargo/config.toml @@ -0,0 +1,2 @@ +[build] +rustflags = ["--cfg=web_sys_unstable_apis"] diff --git a/.idea/leptos-use.iml b/.idea/leptos-use.iml index 0935529..7e9f411 100644 --- a/.idea/leptos-use.iml +++ b/.idea/leptos-use.iml @@ -13,6 +13,7 @@ + @@ -22,6 +23,7 @@ + diff --git a/Cargo.toml b/Cargo.toml index cedd725..2c80b9f 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -30,6 +30,7 @@ features = [ "ResizeObserverSize", "ResizeObserverEntry", "Navigator", + "DomRectReadOnly", ] [features] diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md index 8d86c14..17971d3 100644 --- a/docs/book/src/SUMMARY.md +++ b/docs/book/src/SUMMARY.md @@ -8,6 +8,10 @@ - [Get Started](getting_started/get_started.md) - [Functions](getting_started/functions.md) +# Elements + +- [use_resize_observer](elements/use_resize_observer.md) + # Browser - [use_event_listener](browser/use_event_listener.md) diff --git a/docs/book/src/demo.css b/docs/book/src/demo.css index 7adf66a..16b06a8 100644 --- a/docs/book/src/demo.css +++ b/docs/book/src/demo.css @@ -73,4 +73,9 @@ color: var(--text-color); min-width: 20rem; margin: .5rem 0; +} + +.demo-container textarea { + background: var(--bg); + border: 1px solid var(--theme-popup-border); } \ No newline at end of file diff --git a/docs/book/src/elements/use_resize_observer.md b/docs/book/src/elements/use_resize_observer.md new file mode 100644 index 0000000..1fc17bc --- /dev/null +++ b/docs/book/src/elements/use_resize_observer.md @@ -0,0 +1,3 @@ +# use_resize_observer + + diff --git a/docs/book/src/getting_started/functions.md b/docs/book/src/getting_started/functions.md index e3d8d25..6679ddf 100644 --- a/docs/book/src/getting_started/functions.md +++ b/docs/book/src/getting_started/functions.md @@ -1,5 +1,7 @@ # Functions + + diff --git a/examples/use_debounce_fn/src/main.rs b/examples/use_debounce_fn/src/main.rs index 9416a02..ab9c589 100644 --- a/examples/use_debounce_fn/src/main.rs +++ b/examples/use_debounce_fn/src/main.rs @@ -1,5 +1,5 @@ use leptos::*; -use leptos_use::docs::demo_or_body; +use leptos_use::docs::{demo_or_body, Note}; use leptos_use::{use_debounce_fn_with_options, DebounceOptions}; #[component] @@ -22,7 +22,7 @@ fn Demo(cx: Scope) -> impl IntoView { > "Smash me!" -
"Delay is set to 1000ms and max_wait is set to 5000ms for this demo."
+ "Delay is set to 1000ms and max_wait is set to 5000ms for this demo."

"Button clicked: " { click_count }

"Event handler called: " { debounced_count }

} diff --git a/examples/use_resize_observer/.cargo/config.toml b/examples/use_resize_observer/.cargo/config.toml new file mode 100644 index 0000000..8467175 --- /dev/null +++ b/examples/use_resize_observer/.cargo/config.toml @@ -0,0 +1,2 @@ +[build] +rustflags = ["--cfg=web_sys_unstable_apis"] diff --git a/examples/use_resize_observer/Cargo.toml b/examples/use_resize_observer/Cargo.toml new file mode 100644 index 0000000..0078693 --- /dev/null +++ b/examples/use_resize_observer/Cargo.toml @@ -0,0 +1,16 @@ +[package] +name = "use_resize_observer" +version = "0.1.0" +edition = "2021" + +[dependencies] +leptos = "0.3" +console_error_panic_hook = "0.1" +console_log = "1" +log = "0.4" +leptos-use = { path = "../..", features = ["docs"] } +web-sys = "0.3" + +[dev-dependencies] +wasm-bindgen = "0.2" +wasm-bindgen-test = "0.3.0" diff --git a/examples/use_resize_observer/README.md b/examples/use_resize_observer/README.md new file mode 100644 index 0000000..a8d6387 --- /dev/null +++ b/examples/use_resize_observer/README.md @@ -0,0 +1,23 @@ +A simple example for `use_resize_observer`. + +If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) +as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: + +```bash +cargo install trunk +npm install -D tailwindcss @tailwindcss/forms +rustup toolchain install nightly +rustup target add wasm32-unknown-unknown +``` + +Then, open two terminals. In the first one, run: + +``` +npx tailwindcss -i ./input.css -o ./style/output.css --watch +``` + +In the second one, run: + +```bash +trunk serve --open +``` \ No newline at end of file diff --git a/examples/use_resize_observer/Trunk.toml b/examples/use_resize_observer/Trunk.toml new file mode 100644 index 0000000..3e4be08 --- /dev/null +++ b/examples/use_resize_observer/Trunk.toml @@ -0,0 +1,2 @@ +[build] +public_url = "/demo/" \ No newline at end of file diff --git a/examples/use_resize_observer/index.html b/examples/use_resize_observer/index.html new file mode 100644 index 0000000..ae249a6 --- /dev/null +++ b/examples/use_resize_observer/index.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/use_resize_observer/input.css b/examples/use_resize_observer/input.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/examples/use_resize_observer/input.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/examples/use_resize_observer/rust-toolchain.toml b/examples/use_resize_observer/rust-toolchain.toml new file mode 100644 index 0000000..271800c --- /dev/null +++ b/examples/use_resize_observer/rust-toolchain.toml @@ -0,0 +1,2 @@ +[toolchain] +channel = "nightly" \ No newline at end of file diff --git a/examples/use_resize_observer/src/main.rs b/examples/use_resize_observer/src/main.rs new file mode 100644 index 0000000..f1d34fe --- /dev/null +++ b/examples/use_resize_observer/src/main.rs @@ -0,0 +1,32 @@ +use leptos::*; +use leptos_use::docs::{demo_or_body, BooleanDisplay, Note}; +use leptos_use::{use_resize_observer, UseResizeReturn}; + +#[component] +fn Demo(cx: Scope) -> impl IntoView { + let el = create_node_ref(cx); + let (text, set_text) = create_signal(cx, "".to_string()); + + use_resize_observer(cx, el, move |entries, observer| { + let rect = entries[0].content_rect(); + set_text(format!( + "width: {:.0}\nheight: {:.0}", + rect.width(), + rect.height() + )); + }); + + view! { cx, + "Resize the box to see changes" +