before removing VanityControl and Control

src/styles/mod.rs

@@ -5,21 +5,32 @@ pub use tw_grid::{TailwindGridFormStyle, TailwindGridStylingAttributes};
 use crate::{
     controls::{
         heading::HeadingData, select::SelectData, submit::SubmitData, text_area::TextAreaData,
-        text_input::TextInputData, Control, VanityControl,
+        text_input::TextInputData, Control, ControlData, VanityControl,
     },
     form::FormData,
 };
-use leptos::View;
+use leptos::{Signal, View};
 
 pub trait FormStyle: 'static {
     type StylingAttributes;
 
     // TODO: add form frame
+    // TODO: perhaps we don't want to send the full control type anymore.
+    //       as the rendering shouldn't depend on parse or validate anymore.
     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 text_input<FD: FormData>(
+        &self,
+        control: Control<FD, Self, TextInputData>,
+    ) -> (View, Signal<<TextInputData as ControlData>::ReturnType>);
+    fn select<FD: FormData>(
+        &self,
+        control: Control<FD, Self, SelectData>,
+    ) -> (View, Signal<<SelectData as ControlData>::ReturnType>);
     fn submit(&self, control: VanityControl<Self, SubmitData>) -> View;
-    fn text_area<FD: FormData>(&self, control: Control<FD, Self, TextAreaData>) -> View;
+    fn text_area<FD: FormData>(
+        &self,
+        control: Control<FD, Self, TextAreaData>,
+    ) -> (View, Signal<<TextAreaData as ControlData>::ReturnType>);
     fn custom_component(&self, view: View) -> View;
     // TODO: add group
 }

src/styles/tw_grid.rs

@@ -6,8 +6,7 @@ use crate::{
     },
     form::FormData,
 };
-use leptos::CollectView;
-use leptos::{view, IntoView, View};
+use leptos::*;
 
 pub enum TailwindGridStylingAttributes {
     Width(u32),
@@ -27,8 +26,13 @@ impl FormStyle for TailwindGridFormStyle {
         .into_view()
     }
 
-    fn text_input<FD: FormData>(&self, control: Control<FD, Self, TextInputData>) -> View {
-        view! {
+    fn text_input<FD: FormData>(
+        &self,
+        control: Control<FD, Self, TextInputData>,
+    ) -> (View, ReadSignal<String>) {
+        let (read, write) = create_signal(String::new());
+
+        let view = view! {
             <div>
             <label
                 for={&control.data.name}
@@ -43,10 +47,14 @@ impl FormStyle for TailwindGridFormStyle {
                 name=control.data.name
                 placeholder=control.data.placeholder
                 value=control.data.initial_text
+                on:change=move |ev| {
+                    write.set(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"
             />
             </div>
-        }.into_view()
+        }.into_view();
+        (view, read)
     }
 
     fn select<FD: FormData>(&self, control: Control<FD, Self, SelectData>) -> View {