From 10b1a8a0e869943f997b0b90a20d8cfd42e85bcb Mon Sep 17 00:00:00 2001 From: Maccesch Date: Sun, 15 Sep 2024 20:41:51 +0200 Subject: [PATCH] added use_textarea_autosize --- .idea/leptos-use.iml | 1 + CHANGELOG.md | 6 + Cargo.toml | 9 +- README.md | 2 +- docs/book/src/SUMMARY.md | 1 + .../book/src/browser/use_textarea_autosize.md | 3 + docs/book/src/demo.css | 4 +- docs/book/src/introduction.md | 2 +- examples/Cargo.toml | 1 + examples/use_textarea_autosize/Cargo.toml | 16 + examples/use_textarea_autosize/README.md | 23 ++ examples/use_textarea_autosize/Trunk.toml | 2 + examples/use_textarea_autosize/index.html | 7 + examples/use_textarea_autosize/input.css | 3 + .../use_textarea_autosize/rust-toolchain.toml | 2 + examples/use_textarea_autosize/src/main.rs | 34 ++ .../use_textarea_autosize/style/output.css | 342 +++++++++++++++++ .../use_textarea_autosize/tailwind.config.js | 15 + src/lib.rs | 4 + src/use_textarea_autosize.rs | 345 ++++++++++++++++++ src/use_user_media.rs | 16 +- 21 files changed, 828 insertions(+), 10 deletions(-) create mode 100644 docs/book/src/browser/use_textarea_autosize.md create mode 100644 examples/use_textarea_autosize/Cargo.toml create mode 100644 examples/use_textarea_autosize/README.md create mode 100644 examples/use_textarea_autosize/Trunk.toml create mode 100644 examples/use_textarea_autosize/index.html create mode 100644 examples/use_textarea_autosize/input.css create mode 100644 examples/use_textarea_autosize/rust-toolchain.toml create mode 100644 examples/use_textarea_autosize/src/main.rs create mode 100644 examples/use_textarea_autosize/style/output.css create mode 100644 examples/use_textarea_autosize/tailwind.config.js create mode 100644 src/use_textarea_autosize.rs diff --git a/.idea/leptos-use.iml b/.idea/leptos-use.iml index 5009c87..97c56da 100644 --- a/.idea/leptos-use.iml +++ b/.idea/leptos-use.iml @@ -85,6 +85,7 @@ + diff --git a/CHANGELOG.md b/CHANGELOG.md index cbe9c4d..c167929 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [0.13.5] - 2024-09-15 + +### New Function 🚀 + +- `use_textarea_autosize` + ## [0.13.4] - 2024-09-05 ### Fix 🍕 diff --git a/Cargo.toml b/Cargo.toml index cc4fd30..5d66528 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "leptos-use" -version = "0.13.4" +version = "0.13.5" edition = "2021" authors = ["Marc-Stefan Cassola"] categories = ["gui", "web-programming"] @@ -48,6 +48,7 @@ unic-langid = { version = "0.9", features = ["macros"] } [features] default = [ + "use_textarea_autosize", "use_web_lock", "use_window_size", "is_err", @@ -122,6 +123,12 @@ default = [ "watch_with_options", "whenever" ] +use_textarea_autosize = [ + "use_resize_observer", + "web-sys/CssStyleDeclaration", + "web-sys/HtmlElement", + "web-sys/HtmlTextAreaElement", +] use_web_lock = [ "web-sys/AbortSignal", "web-sys/Lock", diff --git a/README.md b/README.md index c519d8e..013d6a9 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Crates.io SSR Docs & Demos - 86 Functions + 87 Functions


diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md index db94782..4f3831f 100644 --- a/docs/book/src/SUMMARY.md +++ b/docs/book/src/SUMMARY.md @@ -51,6 +51,7 @@ - [use_preferred_dark](browser/use_preferred_dark.md) - [use_prefers_reduced_motion](browser/use_prefers_reduced_motion.md) - [use_service_worker](browser/use_service_worker.md) +- [use_textarea_autosize](browser/use_textarea_autosize.md) - [use_user_media](browser/use_user_media.md) - [use_web_lock](browser/use_web_lock.md) - [use_web_notification](browser/use_web_notification.md) diff --git a/docs/book/src/browser/use_textarea_autosize.md b/docs/book/src/browser/use_textarea_autosize.md new file mode 100644 index 0000000..f3d85fd --- /dev/null +++ b/docs/book/src/browser/use_textarea_autosize.md @@ -0,0 +1,3 @@ +# use_textarea_autosize + + diff --git a/docs/book/src/demo.css b/docs/book/src/demo.css index f092756..b93d1f0 100644 --- a/docs/book/src/demo.css +++ b/docs/book/src/demo.css @@ -79,7 +79,8 @@ .demo-container input[type="text"], .demo-container input[type="search"], -.demo-container input[type="number"] { +.demo-container input[type="number"], +.demo-container textarea { display: block; font-size: 90%; padding: .5em 1em .4em; @@ -96,6 +97,7 @@ .demo-container textarea { background: var(--bg); border: 1px solid var(--theme-popup-border); + line-height: 1.5; } .demo-container input[type=range], diff --git a/docs/book/src/introduction.md b/docs/book/src/introduction.md index 25cf3d5..0f35066 100644 --- a/docs/book/src/introduction.md +++ b/docs/book/src/introduction.md @@ -12,6 +12,6 @@ Crates.io SSR Docs & Demos - 86 Functions + 87 Functions

\ No newline at end of file diff --git a/examples/Cargo.toml b/examples/Cargo.toml index aeb73f4..d894aa8 100644 --- a/examples/Cargo.toml +++ b/examples/Cargo.toml @@ -55,6 +55,7 @@ members = [ "use_service_worker", "use_sorted", "use_storage", + "use_textarea_autosize", "use_throttle_fn", "use_timeout_fn", "use_timestamp", diff --git a/examples/use_textarea_autosize/Cargo.toml b/examples/use_textarea_autosize/Cargo.toml new file mode 100644 index 0000000..85cf3d0 --- /dev/null +++ b/examples/use_textarea_autosize/Cargo.toml @@ -0,0 +1,16 @@ +[package] +name = "use_textarea_autosize" +version = "0.1.0" +edition = "2021" + +[dependencies] +leptos = { version = "0.6", features = ["nightly", "csr"] } +console_error_panic_hook = "0.1" +console_log = "1" +log = "0.4" +leptos-use = { path = "../..", features = ["use_textarea_autosize", "docs"] } +web-sys = "0.3" + +[dev-dependencies] +wasm-bindgen = "0.2" +wasm-bindgen-test = "0.3.0" diff --git a/examples/use_textarea_autosize/README.md b/examples/use_textarea_autosize/README.md new file mode 100644 index 0000000..687cd72 --- /dev/null +++ b/examples/use_textarea_autosize/README.md @@ -0,0 +1,23 @@ +A simple example for `use_textarea_autosize`. + +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_textarea_autosize/Trunk.toml b/examples/use_textarea_autosize/Trunk.toml new file mode 100644 index 0000000..3e4be08 --- /dev/null +++ b/examples/use_textarea_autosize/Trunk.toml @@ -0,0 +1,2 @@ +[build] +public_url = "/demo/" \ No newline at end of file diff --git a/examples/use_textarea_autosize/index.html b/examples/use_textarea_autosize/index.html new file mode 100644 index 0000000..ae249a6 --- /dev/null +++ b/examples/use_textarea_autosize/index.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/use_textarea_autosize/input.css b/examples/use_textarea_autosize/input.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/examples/use_textarea_autosize/input.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/examples/use_textarea_autosize/rust-toolchain.toml b/examples/use_textarea_autosize/rust-toolchain.toml new file mode 100644 index 0000000..271800c --- /dev/null +++ b/examples/use_textarea_autosize/rust-toolchain.toml @@ -0,0 +1,2 @@ +[toolchain] +channel = "nightly" \ No newline at end of file diff --git a/examples/use_textarea_autosize/src/main.rs b/examples/use_textarea_autosize/src/main.rs new file mode 100644 index 0000000..54be776 --- /dev/null +++ b/examples/use_textarea_autosize/src/main.rs @@ -0,0 +1,34 @@ +use leptos::*; +use leptos_use::docs::demo_or_body; +use leptos_use::{use_textarea_autosize, UseTextareaAutosizeReturn}; + +#[component] +fn Demo() -> impl IntoView { + let textarea = create_node_ref::(); + + let UseTextareaAutosizeReturn { + content, + set_content, + .. + } = use_textarea_autosize(textarea); + + view! { +
Type, the textarea will grow:
+