second round of impl

2024-03-16 15:48:32 -05:00
parent bf6529cc1d
commit fbe746702a
11 changed files with 408 additions and 238 deletions
@@ -0,0 +1,25 @@
+mod tw_grid;
+
+pub use tw_grid::{TailwindGridFormStyle, TailwindGridStylingAttributes};
+
+use crate::{
+    controls::{
+        heading::HeadingData, select::SelectData, submit::SubmitData, text_area::TextAreaData,
+        text_input::TextInputData, Control, VanityControl,
+    },
+    form::FormData,
+};
+use leptos::View;
+
+pub trait FormStyle: 'static {
+    type StylingAttributes;
+
+    // TODO: add form frame
+    fn heading(&self, control: VanityControl<Self, HeadingData>) -> View;
+    fn text_input<FD: FormData>(&self, control: Control<FD, Self, TextInputData>) -> View;
+    fn select<FD: FormData>(&self, control: Control<FD, Self, SelectData>) -> View;
+    fn submit(&self, control: VanityControl<Self, SubmitData>) -> View;
+    fn text_area<FD: FormData>(&self, control: Control<FD, Self, TextAreaData>) -> View;
+    fn custom_component(&self, view: View) -> View;
+    // TODO: add group
+}
@@ -0,0 +1,89 @@
+use super::FormStyle;
+use crate::{
+    controls::{
+        heading::HeadingData, select::SelectData, submit::SubmitData, text_area::TextAreaData,
+        text_input::TextInputData, Control, VanityControl,
+    },
+    form::FormData,
+};
+use leptos::CollectView;
+use leptos::{view, IntoView, View};
+
+pub enum TailwindGridStylingAttributes {
+    Width(u32),
+}
+
+pub struct TailwindGridFormStyle;
+
+impl FormStyle for TailwindGridFormStyle {
+    type StylingAttributes = TailwindGridStylingAttributes;
+
+    fn heading(&self, control: VanityControl<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">
+                {&control.data.title}
+            </h2>
+        }
+        .into_view()
+    }
+
+    fn text_input<FD: FormData>(&self, control: Control<FD, Self, TextInputData>) -> View {
+        view! {
+            <div>
+            <label
+                for={&control.data.name}
+                class="block uppercase tracking-wide text-left text-gray-700 text-md font-bold ml-2 mb-1"
+            >
+                {control.data.label.as_ref()}
+            </label>
+            <input
+                // TODO:
+                type=control.data.input_type
+                id=&control.data.name
+                name=control.data.name
+                placeholder=control.data.placeholder
+                value=control.data.initial_text
+                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"
+            />
+            </div>
+        }.into_view()
+    }
+
+    fn select<FD: FormData>(&self, control: Control<FD, Self, SelectData>) -> View {
+        view! {
+            <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"
+            >
+                {control.data.options.iter().map(|option| view!{<option>{option}</option>}).collect_view()}
+            </select>
+        }.into_view()
+    }
+
+    fn submit(&self, control: VanityControl<Self, SubmitData>) -> View {
+        view! {
+            <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"
+            />
+        }
+        .into_view()
+    }
+
+    fn text_area<FD: FormData>(&self, control: Control<FD, Self, TextAreaData>) -> View {
+        view! {
+            <textarea
+                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"
+            />
+        }.into_view()
+    }
+
+    fn custom_component(&self, view: View) -> View {
+        view
+    }
+}