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;