update to completely remove tailwindcss

Cargo.toml

@@ -4,5 +4,6 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.6.9"
+leptos = "0.6"
+leptos_router = "0.6"
 

grid_form.scss

@@ -0,0 +1,113 @@
+// form component as a grid
+.form_grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  row-gap: 1.5rem;
+  column-gap: 1rem;
+}
+
+// size up to 12 columns on small or bigger devices
+@media (min-width: 640px) {
+  .form_grid {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+
+.form_heading {
+  font-size: 1.875rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-align: center;
+  font-weight: bold;
+  color: #374151;
+  border-bottom: 2px solid #374151;
+  margin-bottom: 2rem;
+  grid-column: span 12;
+}
+
+.form_label {
+		font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    text-align: left;
+    color: #4a5568;
+    font-size: 1rem;
+    font-weight: bold;
+    margin-left: 0.5rem;
+    margin-bottom: 0.25rem;
+    display: inline;
+}
+
+.form_input {
+    display: block;
+    width: 100%;
+    background-color: #f7fafc;
+    border-width: 2px;
+    border-color: #e2e8f0;
+    border-style: solid;
+    color: #4a5568;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-radius: 0.375rem;
+    line-height: 1.25;
+    outline: none;
+}
+.form_input:focus {
+    background-color: #ffffff;
+    border-color: #90cdf4;
+}
+.form_input_invalid {
+    border: 2px solid #ef4444;
+    background-color: #ffd4d4;
+}
+.form_error {
+		display: inline;
+		padding-left: 0.25rem;
+    color: #ef4444;
+}
+
+.form_submit {
+    display: block;
+		outline: none;
+		border: none;
+    /* width: 100%; */
+    border-radius: 1rem;
+    background-color: #0477d6;
+    color: #fff;
+    font-weight: bold;
+    cursor: pointer;
+		margin: 0 auto;
+    padding: 0.75rem 1.25rem;
+		font-size: 1rem;
+    appearance: none;
+		min-height: 40px;
+}
+.form_submit:hover {
+    background-color: #005fb3;
+}
+
+
+// column widths
+.w-full {
+		grid-column: 1 / -1;
+} 
+.w-12 {
+		grid-column: span 12 / span 12;
+}
+.w-6 {
+	  grid-column: span 6 / span 6;
+}
+.w-4 {
+	  grid-column: span 4 / span 4;
+}
+.w-3 {
+	  grid-column: span 3 / span 3;
+}
+.w-2 {
+	  grid-column: span 2 / span 2;
+}
+.w-1 {
+	  grid-column: span 1 / span 1;
+}

src/form.rs

@@ -299,14 +299,16 @@ pub trait FormData: Default + Clone + 'static {
 
     /// Defines how the form should be layed out and how the data should be parsed and validated.
     ///
+    /// To construct a [`From`] object, use one of the [`get_form`()] methods.
+    ///
     /// Uses the given form builder to specify what fields should be present
     /// in the form, what properties those fields should have, and how that
     /// data should be parsed and checked.
     fn build_form(fb: FormBuilder<Self, Self::Style>) -> FormBuilder<Self, Self::Style>;
 
-    /// Gets the [`Form`] for this FormData type.
+    /// Constructs a [`Form`] for this FormData type.
     ///
-    /// The [`Form`] provides the way to render the form
+    /// The [`Form`] provides the way to render the form.
     fn get_form(style: Self::Style) -> Form<Self> {
         let builder = FormBuilder::new_full_builder(style);
         let builder = Self::build_form(builder);

src/styles/grid_form.rs

@@ -4,30 +4,31 @@ use crate::controls::{
     text_input::TextInputData, ControlData, ControlRenderData,
 };
 use leptos::*;
+use leptos_router::Form;
 
-pub enum TailwindGridStylingAttributes {
+pub enum GridFormStylingAttributes {
     Width(u32),
 }
 
 #[derive(Clone, Copy, Debug, Default, Hash, PartialEq, Eq, PartialOrd, Ord)]
-pub struct TailwindGridFormStyle;
+pub struct GridFormStyle;
 
-impl FormStyle for TailwindGridFormStyle {
-    type StylingAttributes = TailwindGridStylingAttributes;
+impl FormStyle for GridFormStyle {
+    type StylingAttributes = GridFormStylingAttributes;
 
     // TODO: something about an on-submit thing
     fn form_frame(&self, children: View) -> View {
         view! {
-            <form>
+            <Form action="" class="form_grid">
                 {children}
-            </form>
+            </Form>
         }
         .into_view()
     }
 
     fn heading(&self, control: ControlRenderData<Self, HeadingData>) -> View {
         view! {
-            <h2 class="text-xl py-2 text-center font-bold text-gray-700 border-b-2 border-gray-800/60 mb-8">
+            <h2 class="form_heading">
                 {&control.data.title}
             </h2>
         }
@@ -43,13 +44,14 @@ impl FormStyle for TailwindGridFormStyle {
     ) -> View {
         view! {
             <div>
-            {move || format!("{:?}", validation_state.get())}
-            <label
-                for={&control.data.name}
-                class="block uppercase tracking-wide text-left text-gray-700 text-md font-bold ml-2 mb-1"
-            >
+                <div>
+                <label for={&control.data.name} class="form_label">
                     {control.data.label.as_ref()}
                 </label>
+                <span class="form_error">
+                    {move || format!("{}", validation_state.get().err().unwrap_or_default())}
+                </span>
+                </div>
             <input
                 // TODO:
                 type=control.data.input_type
@@ -60,10 +62,12 @@ impl FormStyle for TailwindGridFormStyle {
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
+                class=("form_input_invalid", move || validation_state.get().is_err())
             />
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn select(
@@ -97,7 +101,7 @@ impl FormStyle for TailwindGridFormStyle {
             <select
                 id=&control.data.name
                 name=control.data.name
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
@@ -105,7 +109,8 @@ impl FormStyle for TailwindGridFormStyle {
                 {options_view}
             </select>
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn submit(&self, control: ControlRenderData<Self, SubmitData>) -> View {
@@ -113,7 +118,7 @@ impl FormStyle for TailwindGridFormStyle {
             <input
                 type="submit"
                 value=control.data.text
-                class="col-span-full rounded-2xl bg-sky-700 text-white font-bold hover:cursor-pointer hover:bg-sky-600 px-5 py-3 mx-auto mt-4"
+                class="w-full form_submit"
             />
         }
         .into_view()
@@ -133,14 +138,15 @@ impl FormStyle for TailwindGridFormStyle {
                 id=&control.data.name
                 name=control.data.name
                 placeholder=control.data.placeholder
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
                 prop:value=move || value_getter.get()
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
             />
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn custom_component(&self, view: View) -> View {

src/styles/mod.rs

@@ -1,6 +1,5 @@
-mod tw_grid;
-
-pub use tw_grid::{TailwindGridFormStyle, TailwindGridStylingAttributes};
+mod grid_form;
+pub use grid_form::{GridFormStyle, GridFormStylingAttributes};
 
 use crate::controls::{
     heading::HeadingData, select::SelectData, submit::SubmitData, text_area::TextAreaData,