added use_calendar

JoelBeicher · JoelBeicher · commit dd184732cde6 · 2025-01-07T23:17:35.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,15 @@
 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.13] - 2025-01-07
+
+### New Functions 🚀
+
+- `use_calendar`
+
+Thanks to our generous sponsor:
+- @spencewenski
+
 ## [0.13.12] - 2025-01-03
 
 - Fixed path of use_color_mode cookie
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "leptos-use"
-version = "0.13.12"
+version = "0.13.13"
 edition = "2021"
 authors = ["Marc-Stefan Cassola"]
 categories = ["gui", "web-programming"]
@@ -16,6 +16,7 @@ homepage = "https://leptos-use.rs"
 actix-web = { version = "4", optional = true, default-features = false }
 async-trait = { version = "0.1", optional = true }
 cfg-if = "1"
+chrono = "0.4"
 codee = { version = "0.2", optional = true }
 cookie = { version = "0.18", features = ["percent-encode"], optional = true }
 default-struct-builder = "0.5"
@@ -63,6 +64,7 @@ default = [
     "use_active_element",
     "use_breakpoints",
     "use_broadcast_channel",
+    "use_calendar",
     "use_clipboard",
     "use_color_mode",
     "use_cookie",
@@ -123,6 +125,7 @@ default = [
     "watch_with_options",
     "whenever"
 ]
+use_calendar = []
 use_textarea_autosize = [
     "use_resize_observer",
     "web-sys/CssStyleDeclaration",
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
@@ -83,6 +83,10 @@
 - [use_timeout_fn](animation/use_timeout_fn.md)
 - [use_timestamp](animation/use_timestamp.md)
 
+# Component
+
+- [use_calendar](component/use_calendar.md)
+
 # Watch
 
 - [watch_debounced](watch/watch_debounced.md)
diff --git a/docs/book/src/component/use_calendar.md b/docs/book/src/component/use_calendar.md
@@ -0,0 +1,3 @@
+# use_calendar
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_calendar use_calendar -->
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
@@ -11,6 +11,7 @@ members = [
     "use_and",
     "use_breakpoints",
     "use_broadcast_channel",
+    "use_calendar",
     "use_ceil",
     "use_clipboard",
     "use_color_mode",
diff --git a/examples/use_calendar/Cargo.toml b/examples/use_calendar/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "use_calendar"
+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_calendar", "docs"] }
+web-sys = "0.3"
+chrono = "0.4"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_calendar/README.md b/examples/use_calendar/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_calendar`.
+
+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
+```
diff --git a/examples/use_calendar/Trunk.toml b/examples/use_calendar/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
diff --git a/examples/use_calendar/index.html b/examples/use_calendar/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link data-trunk rel="tailwind-css" href="input.css" >
+  </head>
+  <body></body>
+</html>
diff --git a/examples/use_calendar/input.css b/examples/use_calendar/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/use_calendar/rust-toolchain.toml b/examples/use_calendar/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
diff --git a/examples/use_calendar/src/main.rs b/examples/use_calendar/src/main.rs
@@ -0,0 +1,102 @@
+use chrono::*;
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::{use_calendar_with_options, UseCalendarOptions, UseCalendarReturn};
+
+#[component]
+fn Demo() -> impl IntoView {
+    let selected_date = RwSignal::new(Some(Local::now().date_naive()));
+    let options = UseCalendarOptions::default()
+        .first_day_of_the_week(6)
+        .initial_date(selected_date);
+
+    let UseCalendarReturn {
+        weekdays,
+        dates,
+        previous_month,
+        today,
+        next_month,
+    } = use_calendar_with_options(options);
+
+    let current_month_year = Memo::new(move |_| {
+        let current = dates
+            .get()
+            .into_iter()
+            .find_map(|date| {
+                if !date.is_other_month() && date.is_first_day_of_month() {
+                    Some(*date)
+                } else {
+                    None
+                }
+            })
+            .unwrap_or(Local::now().date_naive());
+        format!(
+            "{} {}",
+            Month::try_from(current.month() as u8).unwrap().name(),
+            current.year(),
+        )
+    });
+
+    view! {
+        <div class="w-[50%]">
+            <div class="flex center-items justify-between">
+                <button on:click=move |_| previous_month()>{"<<"}</button>
+                <button on:click=move |_| today()>{"Today"}</button>
+                <button on:click=move |_| next_month()>{">>"}</button>
+            </div>
+            <div class="flex center-items justify-center">{move || current_month_year.get()}</div>
+            <div class="grid grid-cols-7">
+                {move || {
+                    weekdays
+                        .get()
+                        .iter()
+                        .map(|weekday| {
+                            view! {
+                                <div class="p-1 text-center">
+                                    {Weekday::try_from(*weekday as u8).unwrap().to_string()}
+                                </div>
+                            }
+                        })
+                        .collect_view()
+                }}
+                {move || {
+                    dates
+                        .get()
+                        .into_iter()
+                        .map(|date| {
+                            let is_selected = move || {
+                                if let Some(selected_date) = selected_date.get() {
+                                    *date == selected_date
+                                } else {
+                                    false
+                                }
+                            };
+                            view! {
+                                <div
+                                    class="w-8 h-8 leading-8 cursor-pointer text-center p-4 justify-self-center border-2 border-solid rounded-full"
+                                    class:text-red-500=date.is_today()
+                                    class:text-gray-500=date.is_other_month()
+                                    class:border-red-500=move || is_selected()
+                                    class:border-transparent=move || !is_selected()
+                                    on:click=move |_| selected_date.set(Some(*date))
+                                >
+
+                                    {date.day()}
+                                </div>
+                            }
+                        })
+                        .collect_view()
+                }}
+            </div>
+        </div>
+    }
+}
+
+fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    mount_to(demo_or_body(), || {
+        view! { <Demo /> }
+    })
+}
diff --git a/examples/use_calendar/style/output.css b/examples/use_calendar/style/output.css
diff --git a/examples/use_calendar/tailwind.config.js b/examples/use_calendar/tailwind.config.js
diff --git a/examples/use_webtransport_with_server/server/Cargo.toml b/examples/use_webtransport_with_server/server/Cargo.toml
diff --git a/src/lib.rs b/src/lib.rs
diff --git a/src/use_calendar.rs b/src/use_calendar.rs

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# use_calendar`
	`2`	`+`
	`3`	`+<!-- cmdrun python3 ../extract_doc_comment.py use_calendar use_calendar -->`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`