MarinoDev/leptos_form_tool
Archived
4
0
Fork 0
generated from mitchell/rust_template
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

remove todos in favor of issues. Fmt

Browse Source
This commit is contained in:
Mitchell Marino 2024-06-05 16:32:31 -05:00
parent ead75f050a
commit 749ccc272b
2 changed files with 84 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/controls/mod.rs
View File

@ -38,8 +38,6 @@ impl<FS, FD, F> RenderFn<FS, FD> for F where
{ {
} }
// TODO: vanity signals should have an optional getter.
/// A trait for the data needed to render an read-only control. /// A trait for the data needed to render an read-only control.
pub trait VanityControlData: 'static { pub trait VanityControlData: 'static {
/// Builds the control, returning the [`View`] that was built. /// Builds the control, returning the [`View`] that was built.

181
src/styles/grid_form.rs
View File

@ -7,19 +7,6 @@ use crate::controls::{
use leptos::*; use leptos::*;
use std::rc::Rc; use std::rc::Rc;
// TODO: move validation from happening on set, to happening on get
// I think.
// That might fix some issues where the field updates but the validation doesn't
/// I don't know if that will cause any loops or not...
// TODO: send the server fn directly instead of parsing from form data perhaps.
// This would need a note in the docs about graceful degration.
// TODO: some components dont have validation functions. They should not be able
// to specify one in the builder.
// TODO: add button
pub enum GridFormStylingAttributes { pub enum GridFormStylingAttributes {
Width(u32), Width(u32),
} }
@ -31,20 +18,12 @@ impl FormStyle for GridFormStyle {
type StylingAttributes = GridFormStylingAttributes; type StylingAttributes = GridFormStylingAttributes;
fn form_frame(&self, children: View) -> View { fn form_frame(&self, children: View) -> View {
view! { view! { <div class="form_grid">{children}</div> }
<div class="form_grid">
{children}
</div>
}
.into_view() .into_view()
} }
fn heading(&self, control: ControlRenderData<Self, HeadingData>) -> View { fn heading(&self, control: ControlRenderData<Self, HeadingData>) -> View {
view! { view! { <h2 class="form_heading">{&control.data.title}</h2> }
<h2 class="form_heading">
{&control.data.title}
</h2>
}
.into_view() .into_view()
} }
@ -66,25 +45,24 @@ impl FormStyle for GridFormStyle {
view! { view! {
<div style:grid-column=format!("span {}", width)> <div style:grid-column=format!("span {}", width)>
<div> <div>
<label for={&control.data.name} class="form_label"> <label for=&control.data.name class="form_label">
{control.data.label.as_ref()} {control.data.label.as_ref()}
</label> </label>
<span class="form_error"> <span class="form_error">{move || validation_state.get().err()}</span>
{move || validation_state.get().err()}
</span>
</div> </div>
<input <input
type=control.data.input_type type=control.data.input_type
id=&control.data.name id=&control.data.name
name=control.data.name name=control.data.name
placeholder=control.data.placeholder placeholder=control.data.placeholder
prop:value=move || value_getter.get() prop:value=move || value_getter.get()
on:focusout=move |ev| { on:focusout=move |ev| {
value_setter(event_target_value(&ev)); value_setter(event_target_value(&ev));
} }
class="form_input"
class=("form_input_invalid", move || validation_state.get().is_err()) class="form_input"
/> class=("form_input_invalid", move || validation_state.get().is_err())
/>
</div> </div>
} }
.into_view() .into_view()
@ -117,31 +95,26 @@ impl FormStyle for GridFormStyle {
view! { view! {
<div> <div>
<span>{control.data.label}</span> <span>{control.data.label}</span>
{move || validation_state.get().err()} {move || validation_state.get().err()}
<select <select
id=&control.data.name id=&control.data.name
name=control.data.name name=control.data.name
class="form_input" class="form_input"
on:change=move |ev| { on:change=move |ev| {
value_setter(event_target_value(&ev)); value_setter(event_target_value(&ev));
} }
> >
{options_view}
</select> {options_view}
</select>
</div> </div>
} }
.into_view() .into_view()
} }
fn submit(&self, control: ControlRenderData<Self, SubmitData>) -> View { fn submit(&self, control: ControlRenderData<Self, SubmitData>) -> View {
view! { view! { <input type="submit" value=control.data.text class="col-span-full form_submit"/> }
<input
type="submit"
value=control.data.text
class="col-span-full form_submit"
/>
}
.into_view() .into_view()
} }
@ -154,17 +127,18 @@ impl FormStyle for GridFormStyle {
) -> View { ) -> View {
view! { view! {
<div> <div>
{move || format!("{:?}", validation_state.get())} {move || format!("{:?}", validation_state.get())}
<textarea <textarea
id=&control.data.name id=&control.data.name
name=control.data.name name=control.data.name
placeholder=control.data.placeholder placeholder=control.data.placeholder
class="form_input" class="form_input"
prop:value=move || value_getter.get() prop:value=move || value_getter.get()
on:change=move |ev| { on:change=move |ev| {
value_setter(event_target_value(&ev)); value_setter(event_target_value(&ev));
} }
/> ></textarea>
</div> </div>
} }
.into_view() .into_view()
@ -179,9 +153,7 @@ impl FormStyle for GridFormStyle {
_control: ControlRenderData<Self, HiddenData>, _control: ControlRenderData<Self, HiddenData>,
value_getter: Signal<String>, value_getter: Signal<String>,
) -> View { ) -> View {
view! { view! { <input prop:value=value_getter style="visibility: hidden"/> }
<input prop:value=value_getter style="visibility: hidden"/>
}
.into_view() .into_view()
} }
@ -213,13 +185,21 @@ impl FormStyle for GridFormStyle {
let o_clone1 = o.clone(); let o_clone1 = o.clone();
let o_clone2 = o.clone(); let o_clone2 = o.clone();
view! { view! {
<input type="radio" id=o.clone()_str name=&control.data.name value=o.clone() prop:checked=move || {value_getter.get() == o_clone1} on:input=move |ev| { <input
let new_value = event_target_checked(&ev); type="radio"
if new_value { id=o.clone()
value_setter(o_clone2.clone()); _str
name=&control.data.name
value=o.clone()
prop:checked=move || { value_getter.get() == o_clone1 }
on:input=move |ev| {
let new_value = event_target_checked(&ev);
if new_value {
value_setter(o_clone2.clone());
}
} }
} /> />
<label for=&o> {&o} </label> <label for=&o>{&o}</label>
<br/> <br/>
} }
}) })
@ -228,14 +208,15 @@ impl FormStyle for GridFormStyle {
view! { view! {
<div style:grid-column=format!("span {}", width)> <div style:grid-column=format!("span {}", width)>
<div> <div>
<label for={&control.data.name} class="form_label"> <label for=&control.data.name class="form_label">
{control.data.label.as_ref()} {control.data.label.as_ref()}
</label> </label>
<span class="form_error"> <span class="form_error">{move || validation_state.get().err()}</span>
{move || validation_state.get().err()}
</span>
</div> </div>
<div class="form_input" class:form_input_invalid=move || validation_state.get().is_err()> <div
class="form_input"
class:form_input_invalid=move || validation_state.get().is_err()
>
{buttons_view} {buttons_view}
</div> </div>
</div> </div>
@ -258,7 +239,7 @@ impl FormStyle for GridFormStyle {
view! { view! {
<div style:grid-column=format!("span {}", width)> <div style:grid-column=format!("span {}", width)>
<label for={&control.data.name} class="form_label"> <label for=&control.data.name class="form_label">
{control.data.label.as_ref()} {control.data.label.as_ref()}
</label> </label>
<label class="form_input" for=&control.data.name> <label class="form_input" for=&control.data.name>
@ -272,6 +253,7 @@ impl FormStyle for GridFormStyle {
value_setter(new_value); value_setter(new_value);
} }
/> />
<span>{control.data.label}</span> <span>{control.data.label}</span>
</label> </label>
</div> </div>
@ -298,18 +280,21 @@ impl FormStyle for GridFormStyle {
view! { view! {
<div style:grid-column=format!("span {}", width)> <div style:grid-column=format!("span {}", width)>
<div> <div>
<label for={&control.data.name} class="form_label"> <label for=&control.data.name class="form_label">
{control.data.label.as_ref()} {control.data.label.as_ref()}
</label> </label>
<span class="form_error"> <span class="form_error">{move || validation_state.get().err()}</span>
{move || validation_state.get().err()}
</span>
</div> </div>
<input type="number" id=&control.data.name name=&control.data.name step=control.data.step <input
type="number"
id=&control.data.name
name=&control.data.name
step=control.data.step
prop:value=move || value_getter.get() prop:value=move || value_getter.get()
on:change=move |ev| { on:change=move |ev| {
value_setter(event_target_value(&ev)); value_setter(event_target_value(&ev));
} }
class="form_input" class="form_input"
/> />
</div> </div>
@ -321,9 +306,7 @@ impl FormStyle for GridFormStyle {
_control: ControlRenderData<Self, OutputData>, _control: ControlRenderData<Self, OutputData>,
value_getter: Signal<String>, value_getter: Signal<String>,
) -> View { ) -> View {
view! { view! { <div>{move || value_getter.get()}</div> }
<div> {move || value_getter.get()} </div>
}
.into_view() .into_view()
} }
@ -344,14 +327,17 @@ impl FormStyle for GridFormStyle {
view! { view! {
<div style:grid-column=format!("span {}", width)> <div style:grid-column=format!("span {}", width)>
<div> <div>
<label for={&control.data.name} class="form_label"> <label for=&control.data.name class="form_label">
{control.data.label.as_ref()} {control.data.label.as_ref()}
</label> </label>
<span class="form_error"> <span class="form_error">{move || validation_state.get().err()}</span>
{move || validation_state.get().err()}
</span>
</div> </div>
<input type="range" id=&control.data.name name=&control.data.name min=control.data.min max=control.data.max <input
type="range"
id=&control.data.name
name=&control.data.name
min=control.data.min
max=control.data.max
prop:value=move || value_getter.get() prop:value=move || value_getter.get()
on:input=move |ev| { on:input=move |ev| {
let value = event_target_value(&ev).parse::<i32>().ok(); let value = event_target_value(&ev).parse::<i32>().ok();
@ -359,6 +345,7 @@ impl FormStyle for GridFormStyle {
value_setter(value); value_setter(value);
} }
} }
class="form_input" class="form_input"
/> />
</div> </div>