diff --git a/gh-pages/src/pages/checkbox/mod.rs b/gh-pages/src/pages/checkbox/mod.rs index 6026093..782d839 100644 --- a/gh-pages/src/pages/checkbox/mod.rs +++ b/gh-pages/src/pages/checkbox/mod.rs @@ -1,3 +1,5 @@ +use std::collections::HashSet; + use crate::components::{Demo, DemoCode}; use indoc::indoc; use leptos::*; @@ -6,6 +8,7 @@ use melt_ui::*; #[component] pub fn CheckboxPage() -> impl IntoView { let checked = create_rw_signal(false); + let value = create_rw_signal(HashSet::new()); view! {

"Checkbox"

@@ -25,6 +28,30 @@ pub fn CheckboxPage() -> impl IntoView { } + + + + + + + +
+ "value: " { move || format!("{:?}", value.get()) } +
+ + { + indoc! {r#" + let value = create_rw_signal(HashSet::new()); + + + + + + + "#} + } + +
} } diff --git a/src/checkbox/checkbox_group.rs b/src/checkbox/checkbox_group.rs new file mode 100644 index 0000000..4a1da42 --- /dev/null +++ b/src/checkbox/checkbox_group.rs @@ -0,0 +1,28 @@ +use leptos::*; +use std::collections::HashSet; + +#[component] +pub fn CheckboxGroup( + #[prop(into)] value: RwSignal>, + children: Children, +) -> impl IntoView { + let injection_key = CheckboxGroupInjectionKey::new(value); + provide_context(injection_key); + + children() +} + +#[derive(Clone)] +pub struct CheckboxGroupInjectionKey { + pub value: RwSignal>, +} + +impl CheckboxGroupInjectionKey { + pub fn new(value: RwSignal>) -> Self { + Self { value } + } +} + +pub fn use_checkbox_group() -> CheckboxGroupInjectionKey { + expect_context::() +} diff --git a/src/checkbox/checkbox_item.rs b/src/checkbox/checkbox_item.rs new file mode 100644 index 0000000..3bbe308 --- /dev/null +++ b/src/checkbox/checkbox_item.rs @@ -0,0 +1,32 @@ +use crate::checkbox::{checkbox_group::use_checkbox_group, Checkbox}; +use leptos::*; + +#[component] +pub fn CheckboxItem(#[prop(into)] label: String, #[prop(into)] value: String) -> impl IntoView { + let checkbox_group = use_checkbox_group(); + let checked = checkbox_group + .value + .with_untracked(|checkbox_group| checkbox_group.contains(&value)); + let checked = create_rw_signal(checked); + let item_value = store_value(value); + + _ = watch( + move || checked.get(), + move |checked, _prev, _| { + checkbox_group.value.update(move |checkbox_group| { + if *checked { + checkbox_group.insert(item_value.get_value()); + } else { + checkbox_group.remove(&item_value.get_value()); + } + }); + }, + false, + ); + + view! { + + { label } + + } +} diff --git a/src/checkbox/mod.rs b/src/checkbox/mod.rs index 481c8dd..3cf3b11 100644 --- a/src/checkbox/mod.rs +++ b/src/checkbox/mod.rs @@ -1,4 +1,9 @@ +mod checkbox_group; +mod checkbox_item; + use crate::{components::*, icon::*, theme::use_theme, utils::mount_style::mount_style, Theme}; +pub use checkbox_group::CheckboxGroup; +pub use checkbox_item::CheckboxItem; use icondata::AiIcon; use leptos::*; use stylers::style_sheet_str;