Merge branch 'main' into feat/dashboard-button

# Conflicts:
#	src/components/mod.rs

src/components/checkbox.rs

@@ -1,4 +1,5 @@
 use crate::common::ValueType;
+use crate::components::utils::create_unique_id;
 use leptos::prelude::*;
 use std::collections::HashMap;
 
@@ -7,10 +8,13 @@ pub fn Checkbox(
     #[prop()] checked: Signal<bool>,
     #[prop(into)] on_change: Callback<(), ()>,
     #[prop(into)] value: String,
+    #[prop(into)] name: String,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
+    let id = create_unique_id(&name, &value);
+
     view! {
-        <label for=value class="flex items-center">
+        <label for=id class="flex items-center">
             <input
                 // Using the "peer" class links this input with the div "peer" at the same level.
                 // By using the "peer-checked" selector this div can toggle states based on this
@@ -19,7 +23,8 @@ pub fn Checkbox(
                 relative peer shrink-0
                 hidden"
                 type="checkbox"
-                id=value.clone()
+                id=id.clone()
+                name=name.clone()
                 on:change=move |_| on_change.run(())
                 prop:checked=checked
                 disabled=disabled
@@ -109,6 +114,7 @@ pub fn CheckboxList(
                             on_change=on_change
                             // The actual selected values are tracked by this element, not by the checkboxes themselves.
                             value=item.clone()
+                            name=data_member.clone()
                             disabled=disabled
                         />
                     }

src/components/chips.rs

@@ -1,13 +1,14 @@
-use std::collections::HashMap;
-use leptos::prelude::*;
 use crate::common::ValueType;
+use crate::components::utils::create_unique_id;
+use leptos::prelude::*;
+use std::collections::HashMap;
 
 /// # Chip Component
-/// 
+///
 /// This component defines a single chip for use in the `ChipsList` component. It functions almost
 /// identically to the `Checkbox` component. It should only be created from within its parent
 /// `CheckboxList` component.
-/// 
+///
 /// Example usage:
 /// ```
 /// view! {
@@ -31,11 +32,8 @@ pub fn Chip(
 ) -> impl IntoView {
     // Generate a unique id - ensure that the value doesn't contain spaces.
     // Without this id, checkbox/radio inputs can interfere with each other.
-    let value_no_spaces = value.clone().chars()
-        .filter(|c| !c.is_whitespace())
-        .collect::<String>();
-    let id = format!("{}-{}", name.clone(), value_no_spaces);
-    
+    let id = create_unique_id(&name, &value);
+
     view! {
         <label for=id>
             <input
@@ -62,10 +60,10 @@ pub fn Chip(
 }
 
 /// # Chips List Component
-/// 
+///
 /// This defines a list of `Chip` components. The list of values is created based on the data from the
 /// `data_map` prop, which is found using the given `data_member`.
-/// 
+///
 /// Any values selected from the list are stored within the `data_map` immediately as part of a callback
 /// passed to the `on_change` prop for each individual `Chip` component.
 #[component]
@@ -97,7 +95,7 @@ pub fn ChipsList(
                                     .contains(&ValueType::String(Some(item_name.clone())))
                             }
                         });
-                    
+
                         let on_change = {
                             let item_name = value.clone();
                             let data_member = data_member.clone();
@@ -129,7 +127,7 @@ pub fn ChipsList(
                                 });
                             }
                         };
-                    
+
                         view! {
                             <Chip
                                 checked=checked_signal

src/components/mod.rs

@@ -9,6 +9,7 @@ mod radio;
 mod row;
 mod select;
 mod text_field;
+mod utils;
 
 pub use self::{
     action_button::*, checkbox::*, chips::*, dashboard_button::*, loading::*, multi_entry::*,

src/components/radio.rs

@@ -1,4 +1,5 @@
 use crate::common::ValueType;
+use crate::components::utils::create_unique_id;
 use leptos::prelude::*;
 use std::collections::HashMap;
 
@@ -7,10 +8,13 @@ pub fn Radio(
     #[prop()] checked: Signal<bool>,
     #[prop(into)] on_change: Callback<(), ()>,
     #[prop(into)] value: String,
+    #[prop(into)] name: String,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
+    let id = create_unique_id(&name, &value);
+
     view! {
-        <label for=value class="flex items-center">
+        <label for=id class="flex items-center">
             <input
                 // Using the "peer" class links this input with the div "peer" at the same level.
                 // By using the "peer-checked" selector this div can toggle states based on this
@@ -18,8 +22,9 @@ pub fn Radio(
                 class="
                 relative peer shrink-0
                 hidden"
-                type="checkbox"
-                id=value.clone()
+                type="radio"
+                id=id.clone()
+                name=name.clone()
                 on:change=move |_| on_change.run(())
                 prop:checked=checked
                 disabled=disabled
@@ -96,6 +101,7 @@ pub fn RadioList(
                             on_change=on_change
                             // The actual selected values are tracked by this element, not by the checkboxes themselves.
                             value=item.clone()
+                            name=data_member.clone()
                             disabled=disabled
                         />
                     }

src/components/utils.rs

@@ -0,0 +1,10 @@
+/// Creates a unique ID for use in components like the [`CheckboxList`],
+/// [`RadioList`], and [`ChipsList`].
+pub fn create_unique_id(name: &String, value: &String) -> String {
+    let value_no_spaces = value
+        .clone()
+        .chars()
+        .filter(|c| !c.is_whitespace())
+        .collect::<String>();
+    format!("{}-{}", name.clone(), value_no_spaces)
+}