feat: implement into for all applicable props

src/components/mod.rs

@@ -4,5 +4,16 @@ mod multi_entry;
 mod text_field;
 mod select;
 mod checkboxes;
+mod panel;
+mod row;
 
-pub use self::{action_button::*, loading::*, multi_entry::*, text_field::*, select::*, checkboxes::*};
+pub use self::{
+    action_button::*,
+    loading::*,
+    multi_entry::*,
+    text_field::*,
+    select::*,
+    checkboxes::*,
+    panel::*,
+    row::*
+};

src/components/panel.rs

@@ -0,0 +1,37 @@
+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! {
+///     <Panel>
+///         <Row>
+///             <OutlinedTextField
+///                 // ...
+///             />
+///             <CheckboxList
+///                 // ...
+///             />
+///         </Row>
+///     </Panel>
+/// }
+/// ```
+#[component]
+pub fn Panel(
+    children: 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()}
+        </div>
+    }
+}

src/components/row.rs

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

src/components/select.rs

@@ -1,4 +1,4 @@
-use leptos::prelude::*;
+use leptos::prelude::*;
 
 /// A custom-styled select input.
 ///

src/components/text_field.rs

@@ -3,12 +3,12 @@ use leptos::prelude::*;
 
 #[component]
 pub fn OutlinedTextField<T>(
-    #[prop(default = String::from(""))] placeholder: String,
+    #[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(""))] name: String,
-    #[prop(default = String::from(""))] label: String,
-    #[prop(default = String::from(""))] input_type: String,
+    #[prop(default = String::from(""), into)] name: String,
+    #[prop(default = String::from(""), into)] label: String,
+    #[prop(default = String::from(""), into)] input_type: String,
 ) -> impl IntoView
 where
     T: Default + 'static + FromStr + ToString + PartialEq + Send + Sync + Clone
@@ -22,16 +22,17 @@ where
     };
 
     view! (
-        <div>
-            <label>
-                { label }
+        <div class="flex flex-1">
+            <label class="flex flex-col flex-1">
+                <span class="block ml-1.5 mb-0">{label}</span>
                 <input
-                    class="border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-150
+                    class="border-2 m-1.5 p-1.5 mt-0 rounded-md bg-transparent relative flex-1
+                        transition-all duration-150
                         border-red-700 bg-transparent
                         disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
                     r#type={input_type}
                     disabled={disabled}
-                    placeholder={placeholder}
+                    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.