feat: create impromptu demo page

src/components/checkbox.rs

@@ -45,9 +45,11 @@ pub fn CheckboxList(
     #[prop(default = RwSignal::new(vec![]))] selected: RwSignal<Vec<String>>,
     #[prop()] items: Vec<String>,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
+    #[prop(optional, into)] label: String,
 ) -> impl IntoView {
     view! {
-        <div>
+        <div class="m-1.5 mt-0 mb-0">
+            <span class="font-bold">{label}</span>
             {items
                 .into_iter()
                 .map(|item| {

src/components/multi_entry.rs

@@ -87,14 +87,14 @@ pub fn Entry(
     #[prop()]
     info_member: Signal<MultiEntryMember>,
 ) -> impl IntoView {
-    let nameData = entry_data.data.get(&name_member.get().member_name).unwrap();
-    let infoData = entry_data.data.get(&info_member.get().member_name).unwrap();
+    let name_data = entry_data.data.get(&name_member.get().member_name).unwrap();
+    let info_data = entry_data.data.get(&info_member.get().member_name).unwrap();
 
     view! {
         // This div MUST have the same spacing CSS as the second-level header div
         <div class="flex rounded-sm transition-shadow shadow-sm hover:shadow-lg/30 p-3 m-1">
-            <span class="flex-1">{nameData.as_string()}</span>
-            <span class="flex-1">{infoData.as_string()}</span>
+            <span class="flex-1">{name_data.as_string()}</span>
+            <span class="flex-1">{info_data.as_string()}</span>
         </div>
     }
 }

src/components/panel.rs

@@ -2,11 +2,11 @@ use leptos::prelude::*;
 
 /// A panel for use in visual separation of a group of components. A `Panel` arranges
 /// a series of elements within a shaded rectangle using the flexbox column layout.
-/// 
+///
 /// It takes a series of children. Usually these would be in the form of a `Row` element,
 /// which will arrange its own children in a row within the panel, however it can be any
 /// HTML element.
-/// 
+///
 /// Example:
 /// ```
 /// view! {
@@ -24,14 +24,16 @@ use leptos::prelude::*;
 /// ```
 #[component]
 pub fn Panel(
-    children: Children
+    #[prop(optional, default = false)] hidden: bool,
+    #[prop(optional)] children: Option<Children>
 ) -> impl IntoView {
     view! {
         <div
             class="flex flex-col gap-2 p-2 m-4 flex-1
                 border-1 border-gray-600/10
-                rounded-md shadow-[0_0_6px_rgba(0,0,0,0.50)]">
-            {children()}
+                rounded-md shadow-[0_0_6px_rgba(0,0,0,0.50)]"
+            class=(["hidden"], hidden) >
+            {children.and_then(move |t| {Some(t())})}
         </div>
     }
 }

src/components/radio.rs

@@ -45,9 +45,11 @@ pub fn RadioList(
     #[prop(default = RwSignal::new(String::new()))] selected: RwSignal<String>,
     #[prop()] items: Vec<String>,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
+    #[prop(optional, into)] label: String,
 ) -> impl IntoView {
     view! {
-        <div>
+        <div class="m-1.5 mt-0 mb-0">
+            <span class="font-bold">{label}</span>
             {items
                 .into_iter()
                 .map(|item| {

src/components/row.rs

@@ -1,9 +1,7 @@
 use leptos::prelude::*;
 
 #[component]
-pub fn Row(
-    children: Children
-) -> impl IntoView {
+pub fn Row(children: Children) -> impl IntoView {
     view! {
         <div class="flex flex-row gap-2 flex-1">
             {children()}

src/components/select.rs

@@ -8,15 +8,15 @@ use leptos::prelude::*;
 pub fn Select(
     #[prop(default = vec!["Test Value".into()])] value_list: Vec<String>,
     #[prop(default = RwSignal::new("".into()))] value: RwSignal<String>,
-    #[prop(default = RwSignal::new("".into()))] label: RwSignal<String>,
+    #[prop(optional, into)] label: String,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
     view! {
-        <div>
-            <label>
-                {label}
+        <div class="flex flex-1">
+            <label class="flex flex-col flex-1">
+                <span class="ml-1.5 mb-0 font-bold">{label}</span>
                 <select
-                    class="relative border-2 m-1.5 p-1.5 rounded-md
+                    class="relative flex-1 border-2 m-1.5 mt-0 p-1.5 rounded-md
                         transition-border duration-150
                         border-red-700 bg-transparent
                         disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"

src/components/text_field.rs

@@ -1,30 +1,35 @@
-use std::str::FromStr;
 use leptos::prelude::*;
+use std::str::FromStr;
 
 #[component]
 pub fn OutlinedTextField<T>(
-    #[prop(default = T::default(), into)] placeholder: T,
-    #[prop(default = RwSignal::new(T::default()))] value: RwSignal<T>,
-    #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
-    #[prop(default = String::from(""), into)] name: String,
-    #[prop(default = String::from(""), into)] label: String,
-    #[prop(default = String::from(""), into)] input_type: String,
+    #[prop(optional, into)] placeholder: T,
+    #[prop(optional)] value: RwSignal<T>,
+    #[prop(optional)] disabled: RwSignal<bool>,
+    #[prop(optional)] error: RwSignal<bool>,
+    #[prop(optional, into)] name: String,
+    #[prop(optional, into)] label: String,
+    #[prop(optional, into)] input_type: String,
 ) -> impl IntoView
 where
-    T: Default + 'static + FromStr + ToString + PartialEq + Send + Sync + Clone
+    T: Default + 'static + FromStr + ToString + PartialEq + Send + Sync + Clone,
 {
     // Parsing logic for non-string types which happens on each input.
     let on_input = move |e| {
         let input_value = event_target_value(&e);
-        let parsed_value = T::from_str(&input_value)
-            .unwrap_or_default();
-        value.set(parsed_value);
+        let can_parse = T::from_str(&input_value);
+        if let Ok(parsed_value) = can_parse {
+            value.set(parsed_value);
+        } else {
+            error.set(true);
+            value.set(T::default());
+        }
     };
 
     view! (
         <div class="flex flex-1">
             <label class="flex flex-col flex-1">
-                <span class="block ml-1.5 mb-0">{label}</span>
+                <span class="block ml-1.5 mb-0 font-bold">{label}</span>
                 <input
                     class="border-2 m-1.5 p-1.5 mt-0 rounded-md bg-transparent relative flex-1
                         transition-all duration-150
@@ -35,7 +40,7 @@ where
                     placeholder={placeholder.to_string()}
                     prop:name=name
                     prop:value={move || value.get().to_string()}  // Sets the initial value.
-                    on:input=on_input  // Sets the value on each input.
+                    on:input=on_input
                 />
             </label>
         </div>