feat: add checkbox_group component

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! {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Checkbox"</h1>
@@ -25,6 +28,30 @@ pub fn CheckboxPage() -> impl IntoView {
                     }
                 </DemoCode>
             </Demo>
+
+            <Demo>
+                <CheckboxGroup value>
+                    <CheckboxItem label="apple" value="a" />
+                    <CheckboxItem label="b" value="b" />
+                    <CheckboxItem label="c" value="c" />
+                </CheckboxGroup>
+                <div style="margin-top: 1rem">
+                    "value: " { move || format!("{:?}", value.get()) }
+                </div>
+                <DemoCode slot>
+                    {
+                        indoc! {r#"
+                            let value = create_rw_signal(HashSet::new());
+
+                            <CheckboxGroup value>
+                                <CheckboxItem label="apple" value="a" />
+                                <CheckboxItem label="b" value="b" />
+                                <CheckboxItem label="c" value="c" />
+                            </CheckboxGroup>
+                        "#}
+                    }
+                </DemoCode>
+            </Demo>
         </div>
     }
 }

src/checkbox/checkbox_group.rs

@@ -0,0 +1,28 @@
+use leptos::*;
+use std::collections::HashSet;
+
+#[component]
+pub fn CheckboxGroup(
+    #[prop(into)] value: RwSignal<HashSet<String>>,
+    children: Children,
+) -> impl IntoView {
+    let injection_key = CheckboxGroupInjectionKey::new(value);
+    provide_context(injection_key);
+
+    children()
+}
+
+#[derive(Clone)]
+pub struct CheckboxGroupInjectionKey {
+    pub value: RwSignal<HashSet<String>>,
+}
+
+impl CheckboxGroupInjectionKey {
+    pub fn new(value: RwSignal<HashSet<String>>) -> Self {
+        Self { value }
+    }
+}
+
+pub fn use_checkbox_group() -> CheckboxGroupInjectionKey {
+    expect_context::<CheckboxGroupInjectionKey>()
+}

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! {
+        <Checkbox checked>
+            { label }
+        </Checkbox>
+    }
+}

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;