diff --git a/.cargo/config.toml b/.cargo/config.toml
index b891103..eac64d8 100644
--- a/.cargo/config.toml
+++ b/.cargo/config.toml
@@ -1,3 +1,3 @@
-[unstable]
+[build]
rustflags = ["--cfg=web_sys_unstable_apis"]
-rustdocflags = ["--cfg=web_sys_unstable_apis"]
\ No newline at end of file
+rustdocflags = ["--cfg=web_sys_unstable_apis"]
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
new file mode 100644
index 0000000..cb67468
--- /dev/null
+++ b/.github/workflows/cd.yml
@@ -0,0 +1,89 @@
+on:
+ push:
+ # Pattern matched against refs/tags
+ tags:
+ - '*' # Push events to every tag not containing /
+ workflow_dispatch:
+
+name: CD
+
+permissions: write-all
+
+jobs:
+ publish:
+ name: Publish
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions-rs/toolchain@v1
+ with:
+ toolchain: nightly
+ profile: minimal
+ override: true
+ components: rustfmt, clippy, rust-src
+ - name: Cache
+ uses: Swatinem/rust-cache@v2
+
+ - name: Check function count badge
+ run: python3 docs/generate_count_badge.py --check
+ - name: Check version in docs
+ run: python3 docs/add_version_to_docs.py --check
+
+ - name: Check formatting
+ run: cargo fmt --check
+ - name: Clippy
+ run: cargo clippy --features docs,math --tests -- -D warnings
+
+ - name: Run tests (general)
+ run: cargo test --features math,docs,ssr
+ - name: Run tests (axum) use_cookie
+ run: cargo test --features math,docs,ssr,axum --doc use_cookie
+ - name: Run tests (axum) use_locale
+ run: cargo test --features math,docs,ssr,axum --doc use_locale
+ - name: Run tests (actix) use_cookie
+ run: cargo test --features math,docs,ssr,actix --doc use_cookie
+ - name: Run tests (actix) use_locale
+ run: cargo test --features math,docs,ssr,actix --doc use_locale
+
+ #### mdbook
+ - name: Install mdbook I
+ uses: taiki-e/install-action@v2
+ with:
+ tool: cargo-binstall,mdbook
+ - name: Install mdbook II
+ run: |
+ cargo binstall -y mdbook-cmdrun
+ cargo binstall -y trunk@0.17.5
+ rustup target add wasm32-unknown-unknown
+ - name: Setup Pages
+ id: pages
+ uses: actions/configure-pages@v3
+ - name: Build mdbook # TODO : run mdbook tests
+ run: |
+ cd docs/book
+ mdbook build
+ python3 post_build.py
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v1
+ with:
+ path: ./docs/book/book
+ - name: Deploy book to github pages
+ id: deployment
+ uses: actions/deploy-pages@v2
+ ##### mdbook end
+
+ - name: Publish crate leptos-use
+ uses: katyo/publish-crates@v2
+ with:
+ registry-token: ${{ secrets.CRATES_TOKEN }}
+
+ - uses: CSchoel/release-notes-from-changelog@v1
+ - name: Create Release using GitHub CLI
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ run: >
+ gh release create
+ -d
+ -F RELEASE.md
+ -t "Version $RELEASE_VERSION"
+ ${GITHUB_REF#refs/*/}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 95f75d3..b44b27e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,82 +1,48 @@
+name: Continuous Integration
+
on:
- push:
- # Pattern matched against refs/tags
- tags:
- - '*' # Push events to every tag not containing /
- workflow_dispatch:
+ pull_request:
+ branches:
+ - main
+ paths:
+ - "**"
+ - "!/*.md"
+ - "!/**.md"
-name: CI
-
-permissions: write-all
+concurrency:
+ group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}"
+ cancel-in-progress: true
jobs:
- publish:
- name: Publish
+ integrity:
+ name: Integrity Checks on Rust ${{ matrix.toolchain }}
runs-on: ubuntu-latest
+ timeout-minutes: 15
+ strategy:
+ matrix:
+ toolchain:
+ - stable
+ - nightly
+
steps:
- - uses: actions/checkout@v3
- - uses: actions-rs/toolchain@v1
+ - name: Checkout
+ uses: actions/checkout@v4
+
+ - name: Setup Rust
+ uses: dtolnay/rust-toolchain@master
with:
- toolchain: nightly
- profile: minimal
- override: true
- components: rustfmt, clippy, rust-src
- - name: Cache
+ toolchain: ${{ matrix.toolchain }}
+ targets: wasm32-unknown-unknown
+ components: clippy, rustfmt
+
+ - name: Setup Rust Cache
uses: Swatinem/rust-cache@v2
- - name: Check function count badge
- run: python3 docs/generate_count_badge.py --check
- - name: Check version in docs
- run: python3 docs/add_version_to_docs.py --check
- - name: Check formatting
+
+ - name: Build
+ run: cargo build
+
+ - name: Format
run: cargo fmt --check
+
- name: Clippy
- run: cargo clippy --features docs,math --tests -- -D warnings
- - name: Run tests (general)
- run: cargo test --features math,docs,ssr
- - name: Run tests (axum)
- run: cargo test --features math,docs,ssr,axum --doc use_cookie::use_cookie
- - name: Run tests (actix)
- run: cargo test --features math,docs,ssr,actix --doc use_cookie::use_cookie
-
- #### mdbook
- - name: Install mdbook I
- uses: taiki-e/install-action@v2
- with:
- tool: cargo-binstall,mdbook
- - name: Install mdbook II
- run: |
- cargo binstall -y mdbook-cmdrun
- cargo binstall -y trunk@0.17.5
- rustup target add wasm32-unknown-unknown
- - name: Setup Pages
- id: pages
- uses: actions/configure-pages@v3
- - name: Build mdbook # TODO : run mdbook tests
- run: |
- cd docs/book
- mdbook build
- python3 post_build.py
- - name: Upload artifact
- uses: actions/upload-pages-artifact@v1
- with:
- path: ./docs/book/book
- - name: Deploy book to github pages
- id: deployment
- uses: actions/deploy-pages@v2
- ##### mdbook end
-
- - name: Publish crate leptos-use
- uses: katyo/publish-crates@v2
- with:
- registry-token: ${{ secrets.CRATES_TOKEN }}
-
- - uses: CSchoel/release-notes-from-changelog@v1
- - name: Create Release using GitHub CLI
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: >
- gh release create
- -d
- -F RELEASE.md
- -t "Version $RELEASE_VERSION"
- ${GITHUB_REF#refs/*/}
+ run: cargo clippy -- -D warnings
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 68ee5cf..1ae502a 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -1,5 +1,11 @@
on:
pull_request:
+ branches:
+ - main
+ paths:
+ - "**"
+ - "!/*.md"
+ - "!/**.md"
workflow_dispatch:
name: Tests
@@ -20,13 +26,18 @@ jobs:
components: rustfmt, clippy, rust-src
- name: Cache
uses: Swatinem/rust-cache@v2
- - name: Check formatting
- run: cargo fmt --check
- - name: Clippy
- run: cargo clippy --features docs,math --tests -- -D warnings
+
- name: Run tests (general)
run: cargo test --features math,docs,ssr
- - name: Run tests (axum)
- run: cargo test --features math,docs,ssr,axum --doc use_cookie::use_cookie
- - name: Run tests (actix)
- run: cargo test --features math,docs,ssr,actix --doc use_cookie::use_cookie
+
+ - name: Run tests (axum) use_cookie
+ run: cargo test --features math,docs,ssr,axum --doc use_cookie
+
+ - name: Run tests (axum) use_locale
+ run: cargo test --features math,docs,ssr,axum --doc use_locale
+
+ - name: Run tests (actix) use_cookie
+ run: cargo test --features math,docs,ssr,actix --doc use_cookie
+
+ - name: Run tests (actix) use_locale
+ run: cargo test --features math,docs,ssr,actix --doc use_locale
diff --git a/.idea/leptos-use.iml b/.idea/leptos-use.iml
index 7d56fcb..a9c24d6 100644
--- a/.idea/leptos-use.iml
+++ b/.idea/leptos-use.iml
@@ -77,6 +77,9 @@
+
+
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0bf1185..20fe0dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,27 @@
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).
-## [Unreleased]
+## [0.11.3] - 2024-07-31
+
+### Fix 🍕
+
+- Made `use_timeout_fn` SSR-safe
+
+## [0.11.2] - 2024-07-30
+
+### Change 🔥
+
+- `use_locale` has now a supported locale list.
+
+## (yanked) [0.11.1] - 2024-07-28
+
+### New Functions 🚀
+
+- `use_locale` (thanks to @BrandonDyer64)
+- `use_locales` (thanks to @BrandonDyer64)
+- `header` – Standard implementations for reading a header on the server.
+
+## [0.11.0] - 2024-07-27
### New Functions 🚀
@@ -31,7 +51,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
the DOM controlled by a value from storage. This leads to hydration errors which can be fixed by setting this new
option to `true`.
- `cookie::SameSite` is now re-exported
-- Changing the signal returned by `use_cookie` now tries and changes the headers during SSR.
+- Changing the signal returned by `use_cookie` now tries and changes the headers during SSR.
- New book chapter about codecs
- The macro `use_derive_signal!` is now exported (thanks to @mscofield0).
@@ -44,8 +64,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `JsonCodec` has been renamed to `JsonSerdeCodec`.
- The feature to enable this codec is now called `json_serde` instead of just `serde`.
- `ProstCodec` now encodes as binary data. If you want to keep using it with string data you can wrap it like
- this: `Base64`. You have to enable both features `prost` and `base64` for this.
+ this: `Base64`.
- All of these structs, traits and features now live in their own crate called `codee`
+ - A bunch of new codecs are available. Have a look at the docs for crate `codee`.
- `use_websocket`:
- `UseWebsocketOptions` has been renamed to `UseWebSocketOptions` (uppercase S) to be consistent with the return
type.
@@ -64,12 +85,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
to `on_message_raw` and `on_message_raw_bytes`.
- The new `UseWebSocketOptions::on_message` takes a `&T`.
- `UseWebSocketOptions::on_error` now takes a `UseWebSocketError` instead of a `web_sys::Event`.
-- `use_storage` now always saves the default value to storage if the key doesn't exist yet.
+- `use_storage` now always saves the default value to storage if the key doesn't exist yet.
+- Renamed `BreakpointsSematic` to `BreakpointsSemantic` and `breakpoints_sematic` to `breakpoints_semantic`
+ (note the `n`) (thanks to @mondeja).
### Fixes 🍕
- Fixed auto-reconnect in `use_websocket`
- Fixed typo in compiler error messages in `use_cookie` (thanks to @SleeplessOne1917).
+- Fixed potential signal out of scope issue with `use_raf_fn`
+
+### Other Changes 🔥
+
+- Better links in docs that work both in the book and in rustdoc (thanks to @mondeja).
+- Better CI/CD (thanks to @EstebanBorai).
## [0.10.10] - 2024-05-10
diff --git a/Cargo.toml b/Cargo.toml
index aa60808..24e568a 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,10 +1,10 @@
[package]
name = "leptos-use"
-version = "0.10.10"
+version = "0.11.3"
edition = "2021"
authors = ["Marc-Stefan Cassola"]
categories = ["gui", "web-programming"]
-description = "Collection of essential Leptos utilities inspired by SolidJS USE / VueUse"
+description = "Collection of essential Leptos utilities inspired by React-Use / VueUse / SolidJS-USE"
exclude = ["examples/", "tests/"]
keywords = ["leptos", "utilities"]
license = "MIT OR Apache-2.0"
diff --git a/README.md b/README.md
index 57516cc..eb58418 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@
-
+
@@ -25,7 +25,7 @@
[![Docs](https://docs.rs/leptos-use/badge.svg)](https://docs.rs/leptos-use/)
[![MIT/Apache 2.0](https://img.shields.io/badge/license-MIT%2FApache-blue.svg)](https://github.com/synphonyte/leptos-use#license)
-[![Build Status](https://github.com/synphonyte/leptos-use/actions/workflows/ci.yml/badge.svg)](https://github.com/synphonyte/leptos-use/actions/workflows/ci.yml)
+[![Build Status](https://github.com/synphonyte/leptos-use/actions/workflows/cd.yml/badge.svg)](https://github.com/synphonyte/leptos-use/actions/workflows/cd.yml)
[![Discord](https://img.shields.io/discord/1031524867910148188?color=%237289DA&label=discord)](https://discord.com/channels/1031524867910148188/1121154537709895783)
```rust
@@ -92,4 +92,4 @@ This will create the function file in the src directory, scaffold an example dir
| <= 0.3 | 0.3 |
| 0.4, 0.5, 0.6 | 0.4 |
| 0.7, 0.8, 0.9 | 0.5 |
-| 0.10 | 0.6 |
\ No newline at end of file
+| 0.10, 0.11 | 0.6 |
diff --git a/docs/book/post_build.py b/docs/book/post_build.py
index 1abc3a2..20691a8 100644
--- a/docs/book/post_build.py
+++ b/docs/book/post_build.py
@@ -13,7 +13,8 @@ def main():
if os.path.isdir(category_dir):
for file in os.listdir(category_dir):
if file.endswith(".md") and (len(sys.argv) == 1 or (sys.argv[1] in file)):
- build_and_copy_demo(category, file)
+ if build_and_copy_demo(category, file):
+ rewrite_links(category, file)
def build_and_copy_demo(category, md_name):
@@ -24,7 +25,8 @@ def build_and_copy_demo(category, md_name):
code = p.wait()
if code != 0:
- sys.exit(code, f"failed to build example '{name}'")
+ sys.stderr.write(f"failed to build example '{name}'\n")
+ sys.exit(code)
example_output_path = os.path.join(example_dir, "dist")
target_path = os.path.join("book", category, name, "demo")
@@ -49,7 +51,7 @@ def build_and_copy_demo(category, md_name):
with open(book_html_path, "w") as f:
f.write(
- f"""{head_split[0]}
+ f"""{head_split[0]}
{demo_head}
{target_head}
@@ -60,6 +62,32 @@ def build_and_copy_demo(category, md_name):
{body_split[1]}""")
+ return True
+
+ return False
+
+
+def rewrite_links(category, md_name):
+ """Rewrite links in generated documentation to make them
+ compatible between rustdoc and the book.
+ """
+ html_name = f"{md_name[:-3]}.html"
+ target_path = os.path.join("book", category, html_name)
+
+ with open(target_path, "r") as f:
+ html = f.read()
+
+ html = html.replace(
+ "fn@crate::", "",
+ ).replace(
+ "crate::", "",
+ ).replace(
+ "fn@", "",
+ )
+
+ with open(target_path, "w") as f:
+ f.write(html)
+
if __name__ == '__main__':
main()
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index 502a1a6..cd07431 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -99,6 +99,7 @@
# Utilities
+- [header](utilities/header.md)
- [is_err](utilities/is_err.md)
- [is_none](utilities/is_none.md)
- [is_ok](utilities/is_ok.md)
@@ -113,6 +114,8 @@
# Intl
- [use_intl_number_format](intl/use_intl_number_format.md)
+- [use_locale](intl/use_locale.md)
+- [use_locales](intl/use_locales.md)
# @Math
diff --git a/docs/book/src/demo.css b/docs/book/src/demo.css
index 809ee87..f092756 100644
--- a/docs/book/src/demo.css
+++ b/docs/book/src/demo.css
@@ -64,7 +64,7 @@
cursor: not-allowed;
}
-.demo-container button ~ button {
+.demo-container button + button {
margin-left: 0.8rem;
}
@@ -134,4 +134,4 @@
border-width: 2px;
border-style: dashed;
padding: 1.5rem;
-}
\ No newline at end of file
+}
diff --git a/docs/book/src/intl/use_locale.md b/docs/book/src/intl/use_locale.md
new file mode 100644
index 0000000..56b32d7
--- /dev/null
+++ b/docs/book/src/intl/use_locale.md
@@ -0,0 +1,3 @@
+# use_locale
+
+
diff --git a/docs/book/src/intl/use_locales.md b/docs/book/src/intl/use_locales.md
new file mode 100644
index 0000000..084b0fd
--- /dev/null
+++ b/docs/book/src/intl/use_locales.md
@@ -0,0 +1,3 @@
+# use_locales
+
+
diff --git a/docs/book/src/introduction.md b/docs/book/src/introduction.md
index f12ec1b..8bcc1c1 100644
--- a/docs/book/src/introduction.md
+++ b/docs/book/src/introduction.md
@@ -12,6 +12,6 @@
-
+
\ No newline at end of file
diff --git a/docs/book/src/utilities/header.md b/docs/book/src/utilities/header.md
new file mode 100644
index 0000000..2bd2d1f
--- /dev/null
+++ b/docs/book/src/utilities/header.md
@@ -0,0 +1,3 @@
+# header
+
+
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index f428959..debad03 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -38,6 +38,8 @@ members = [
"use_interval",
"use_interval_fn",
"use_intl_number_format",
+ "use_locale",
+ "use_locales",
"use_media_query",
"use_mouse",
"use_mouse_in_element",
diff --git a/examples/ssr/Cargo.toml b/examples/ssr/Cargo.toml
index d0b6e6a..5d71626 100644
--- a/examples/ssr/Cargo.toml
+++ b/examples/ssr/Cargo.toml
@@ -8,6 +8,7 @@ crate-type = ["cdylib", "rlib"]
[dependencies]
axum = { version = "0.7", optional = true }
+codee = "0.1"
console_error_panic_hook = "0.1"
console_log = "1"
cfg-if = "1"
diff --git a/examples/ssr/src/app.rs b/examples/ssr/src/app.rs
index 80b8695..9ffe5d0 100644
--- a/examples/ssr/src/app.rs
+++ b/examples/ssr/src/app.rs
@@ -1,15 +1,15 @@
use crate::error_template::{AppError, ErrorTemplate};
+use codee::string::FromToStringCodec;
use leptos::ev::{keypress, KeyboardEvent};
use leptos::*;
use leptos_meta::*;
use leptos_router::*;
use leptos_use::storage::{use_local_storage, use_local_storage_with_options, UseStorageOptions};
-use leptos_use::utils::FromToStringCodec;
use leptos_use::{
use_color_mode_with_options, use_cookie_with_options, use_debounce_fn, use_event_listener,
- use_interval, use_intl_number_format, use_preferred_dark, use_timestamp, use_window, ColorMode,
- UseColorModeOptions, UseColorModeReturn, UseCookieOptions, UseIntervalReturn,
- UseIntlNumberFormatOptions,
+ use_interval, use_intl_number_format, use_locales, use_preferred_dark, use_timestamp,
+ use_window, ColorMode, UseColorModeOptions, UseColorModeReturn, UseCookieOptions,
+ UseIntervalReturn, UseIntlNumberFormatOptions,
};
#[component]
@@ -78,17 +78,18 @@ fn HomePage() -> impl IntoView {
let (test_cookie, _) = use_cookie_with_options::(
"test-cookie",
- UseCookieOptions::::default()
+ UseCookieOptions::::default()
.max_age(3000)
.default_value(Some("Bogus string".to_owned())),
);
+ let locales = use_locales();
+
view! {
Leptos-Use SSR Example
- Locale zh-Hans-CN-u-nu-hanidec: {zh_count}
Press any key: {key}
Debounced called: {debounce_value}
Color mode: {move || format!("{:?}", mode.get())}
@@ -99,7 +100,10 @@ fn HomePage() -> impl IntoView {
Dark preferred: {is_dark_preferred}
Test cookie: {move || test_cookie().unwrap_or("".to_string())}
+ {move || format!("Locales:\n {}", locales().join("\n "))}
+ Locale zh-Hans-CN-u-nu-hanidec: {zh_count}
+
0 }>
Greater than 0
diff --git a/examples/use_broadcast_channel/Cargo.toml b/examples/use_broadcast_channel/Cargo.toml
index 6a95089..a7bf756 100644
--- a/examples/use_broadcast_channel/Cargo.toml
+++ b/examples/use_broadcast_channel/Cargo.toml
@@ -5,6 +5,7 @@ edition = "2021"
[dependencies]
leptos = { version = "0.6", features = ["nightly", "csr"] }
+codee = "0.1"
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_broadcast_channel/src/main.rs b/examples/use_broadcast_channel/src/main.rs
index 749ae88..3890bdc 100644
--- a/examples/use_broadcast_channel/src/main.rs
+++ b/examples/use_broadcast_channel/src/main.rs
@@ -1,6 +1,6 @@
+use codee::string::FromToStringCodec;
use leptos::*;
use leptos_use::docs::demo_or_body;
-use leptos_use::utils::FromToStringCodec;
use leptos_use::{use_broadcast_channel, UseBroadcastChannelReturn};
#[component]
@@ -46,8 +46,8 @@ fn Demo() -> impl IntoView {
"Received message: " {move || message().as_ref().unwrap().to_string()}
-
- "Error: " {move || format!("{:?}", error().as_ref().unwrap())}
+
+ "Error: " {move || error.with(|e| format!("{:?}", e.as_ref().unwrap()))}
}
diff --git a/examples/use_clipboard/src/main.rs b/examples/use_clipboard/src/main.rs
index e7852b3..ebfbf63 100644
--- a/examples/use_clipboard/src/main.rs
+++ b/examples/use_clipboard/src/main.rs
@@ -1,6 +1,8 @@
use leptos::*;
use leptos_use::docs::{demo_or_body, Note};
-use leptos_use::{use_clipboard, use_permission, UseClipboardReturn};
+use leptos_use::{
+ use_clipboard_with_options, use_permission, UseClipboardOptions, UseClipboardReturn,
+};
#[component]
fn Demo() -> impl IntoView {
@@ -11,7 +13,7 @@ fn Demo() -> impl IntoView {
text,
copied,
copy,
- } = use_clipboard();
+ } = use_clipboard_with_options(UseClipboardOptions::default().read(true));
let permission_read = use_permission("clipboard-read");
let permission_write = use_permission("clipboard-write");
diff --git a/examples/use_cookie/Cargo.toml b/examples/use_cookie/Cargo.toml
index 280824f..c645550 100644
--- a/examples/use_cookie/Cargo.toml
+++ b/examples/use_cookie/Cargo.toml
@@ -5,6 +5,7 @@ edition = "2021"
[dependencies]
leptos = { version = "0.6", features = ["nightly", "csr"] }
+codee = "0.1"
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_cookie/src/main.rs b/examples/use_cookie/src/main.rs
index 0429b28..4954248 100644
--- a/examples/use_cookie/src/main.rs
+++ b/examples/use_cookie/src/main.rs
@@ -1,7 +1,7 @@
use leptos::*;
use leptos_use::docs::demo_or_body;
use leptos_use::use_cookie;
-use leptos_use::utils::FromToStringCodec;
+use codee::string::FromToStringCodec;
use rand::prelude::*;
#[component]
diff --git a/examples/use_locale/Cargo.toml b/examples/use_locale/Cargo.toml
new file mode 100644
index 0000000..eb1cdfd
--- /dev/null
+++ b/examples/use_locale/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_locale"
+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 = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_locale/README.md b/examples/use_locale/README.md
new file mode 100644
index 0000000..2398484
--- /dev/null
+++ b/examples/use_locale/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_locale`.
+
+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_locale/Trunk.toml b/examples/use_locale/Trunk.toml
new file mode 100644
index 0000000..3e4be08
--- /dev/null
+++ b/examples/use_locale/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
\ No newline at end of file
diff --git a/examples/use_locale/index.html b/examples/use_locale/index.html
new file mode 100644
index 0000000..ae249a6
--- /dev/null
+++ b/examples/use_locale/index.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/examples/use_locale/input.css b/examples/use_locale/input.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/examples/use_locale/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/examples/use_locale/rust-toolchain.toml b/examples/use_locale/rust-toolchain.toml
new file mode 100644
index 0000000..271800c
--- /dev/null
+++ b/examples/use_locale/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
\ No newline at end of file
diff --git a/examples/use_locale/src/main.rs b/examples/use_locale/src/main.rs
new file mode 100644
index 0000000..36e132c
--- /dev/null
+++ b/examples/use_locale/src/main.rs
@@ -0,0 +1,21 @@
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::use_locale;
+
+#[component]
+fn Demo() -> impl IntoView {
+ let locale = use_locale(["en", "de", "fr"]);
+
+ view! {
+ Locale: {locale}
+ }
+}
+
+fn main() {
+ _ = console_log::init_with_level(log::Level::Debug);
+ console_error_panic_hook::set_once();
+
+ mount_to(demo_or_body(), || {
+ view! { }
+ })
+}
diff --git a/examples/use_locale/style/output.css b/examples/use_locale/style/output.css
new file mode 100644
index 0000000..6063b89
--- /dev/null
+++ b/examples/use_locale/style/output.css
@@ -0,0 +1,330 @@
+[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0px;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+ text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+ display: inline-flex;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+select {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+}
+
+[multiple],[size]:where(select:not([size="1"])) {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #2563eb;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+ border-radius: 0px;
+}
+
+[type='radio'] {
+ border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+ [type='checkbox']:checked {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
+[type='radio']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+ [type='radio']:checked {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+@media (forced-colors: active) {
+ [type='checkbox']:indeterminate {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='file'] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit;
+}
+
+[type='file']:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
+}
+
+.static {
+ position: static;
+}
+
+.font-bold {
+ font-weight: 700;
+}
+
+.text-\[--brand-color\] {
+ color: var(--brand-color);
+}
+
+.text-green-600 {
+ --tw-text-opacity: 1;
+ color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+ opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:text-green-500 {
+ --tw-text-opacity: 1;
+ color: rgb(34 197 94 / var(--tw-text-opacity));
+ }
+}
\ No newline at end of file
diff --git a/examples/use_locale/tailwind.config.js b/examples/use_locale/tailwind.config.js
new file mode 100644
index 0000000..bc09f5e
--- /dev/null
+++ b/examples/use_locale/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: {
+ files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+ },
+ theme: {
+ extend: {},
+ },
+ corePlugins: {
+ preflight: false,
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ ],
+}
\ No newline at end of file
diff --git a/examples/use_locales/Cargo.toml b/examples/use_locales/Cargo.toml
new file mode 100644
index 0000000..05b5bc9
--- /dev/null
+++ b/examples/use_locales/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_locales"
+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 = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_locales/README.md b/examples/use_locales/README.md
new file mode 100644
index 0000000..f1827be
--- /dev/null
+++ b/examples/use_locales/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_locales`.
+
+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_locales/Trunk.toml b/examples/use_locales/Trunk.toml
new file mode 100644
index 0000000..3e4be08
--- /dev/null
+++ b/examples/use_locales/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
\ No newline at end of file
diff --git a/examples/use_locales/index.html b/examples/use_locales/index.html
new file mode 100644
index 0000000..ae249a6
--- /dev/null
+++ b/examples/use_locales/index.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/examples/use_locales/input.css b/examples/use_locales/input.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/examples/use_locales/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/examples/use_locales/rust-toolchain.toml b/examples/use_locales/rust-toolchain.toml
new file mode 100644
index 0000000..271800c
--- /dev/null
+++ b/examples/use_locales/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
\ No newline at end of file
diff --git a/examples/use_locales/src/main.rs b/examples/use_locales/src/main.rs
new file mode 100644
index 0000000..dfa206b
--- /dev/null
+++ b/examples/use_locales/src/main.rs
@@ -0,0 +1,21 @@
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::use_locales;
+
+#[component]
+fn Demo() -> impl IntoView {
+ let locales = use_locales();
+
+ view! {
+ {move || format!("Locales:\n {}", locales().join("\n "))}
+ }
+}
+
+fn main() {
+ _ = console_log::init_with_level(log::Level::Debug);
+ console_error_panic_hook::set_once();
+
+ mount_to(demo_or_body(), || {
+ view! { }
+ })
+}
diff --git a/examples/use_locales/style/output.css b/examples/use_locales/style/output.css
new file mode 100644
index 0000000..ab5191f
--- /dev/null
+++ b/examples/use_locales/style/output.css
@@ -0,0 +1,289 @@
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0px;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+select {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+}
+
+[multiple] {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #2563eb;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+ border-radius: 0px;
+}
+
+[type='radio'] {
+ border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='file'] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit;
+}
+
+[type='file']:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+.block {
+ display: block;
+}
+
+.text-\[--brand-color\] {
+ color: var(--brand-color);
+}
+
+.text-green-600 {
+ --tw-text-opacity: 1;
+ color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+ opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:text-green-500 {
+ --tw-text-opacity: 1;
+ color: rgb(34 197 94 / var(--tw-text-opacity));
+ }
+}
\ No newline at end of file
diff --git a/examples/use_locales/tailwind.config.js b/examples/use_locales/tailwind.config.js
new file mode 100644
index 0000000..bc09f5e
--- /dev/null
+++ b/examples/use_locales/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: {
+ files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+ },
+ theme: {
+ extend: {},
+ },
+ corePlugins: {
+ preflight: false,
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ ],
+}
\ No newline at end of file
diff --git a/examples/use_storage/Cargo.toml b/examples/use_storage/Cargo.toml
index 4a53065..5174789 100644
--- a/examples/use_storage/Cargo.toml
+++ b/examples/use_storage/Cargo.toml
@@ -4,14 +4,14 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-codee = { path = "../../../codee", features = ["json_serde"] }
-leptos = { version = "0.6", features = ["nightly", "csr"] }
+codee = { version = "0.1", features = ["json_serde"] }
console_error_panic_hook = "0.1"
console_log = "1"
-log = "0.4"
+leptos = { version = "0.6", features = ["nightly", "csr"] }
leptos-use = { path = "../..", features = ["docs"] }
-web-sys = "0.3"
+log = "0.4"
serde = "1.0.163"
+web-sys = "0.3"
[dev-dependencies]
wasm-bindgen = "0.2"
diff --git a/examples/use_storage/src/main.rs b/examples/use_storage/src/main.rs
index 0d38d7b..524facd 100644
--- a/examples/use_storage/src/main.rs
+++ b/examples/use_storage/src/main.rs
@@ -1,7 +1,7 @@
use leptos::*;
use leptos_use::docs::{demo_or_body, Note};
use leptos_use::storage::use_local_storage;
-use leptos_use::utils::JsonCodec;
+use codee::string::JsonSerdeCodec;
use serde::{Deserialize, Serialize};
#[derive(Serialize, Deserialize, Clone, Debug, PartialEq)]
@@ -25,8 +25,8 @@ impl Default for BananaState {
#[component]
fn Demo() -> impl IntoView {
- let (state, set_state, reset) = use_local_storage::("banana-state");
- let (state2, _, _) = use_local_storage::("banana-state");
+ let (state, set_state, reset) = use_local_storage::("banana-state");
+ let (state2, _, _) = use_local_storage::("banana-state");
view! {
` where `T` is the web_sys element,
/// * a `Signal` where `T` is the web_sys element,
/// * a `Signal