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

doc

Browse Source
This commit is contained in:
Mitchell Marino 2024-06-19 09:12:39 -05:00
parent 5f4358277e
commit 7c4e3b162d
7 changed files with 132 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/controls/button.rs
View File

@ -62,11 +62,7 @@ impl<FD: FormToolData> FormBuilder<FD> {
let view = match show_when { let view = match show_when {
Some(when) => { Some(when) => {
let when = move || when(fd.into(), cx.clone()); let when = move || when(fd.into(), cx.clone());
view! { view! { <Show when=when>{view.clone()}</Show> }
<Show when=when>
{view.clone()}
</Show>
}
} }
None => view(), None => view(),
}; };

16
src/controls/select.rs
View File

@ -13,7 +13,10 @@ pub struct SelectData {
/// The options for the select. /// The options for the select.
/// ///
/// The first value is the string to display, the second is the value. /// The first value is the string to display, the second is the value.
// TODO: maybe signal?
pub options: Vec<(String, String)>, pub options: Vec<(String, String)>,
/// The display text for the blank option, if there is one.
pub blank_option: Option<String>,
} }
impl ControlData for SelectData { impl ControlData for SelectData {
@ -107,4 +110,17 @@ impl<FD: FormToolData, FDT> ControlBuilder<FD, SelectData, FDT> {
} }
self self
} }
/// Adds a blank option as the first option for the select.
pub fn with_blank_option(mut self) -> Self {
self.data.blank_option = Some(String::new());
self
}
/// Adds a blank option as the first option for the select,
/// but sets the display string to the given value.
pub fn with_blank_option_displayed(mut self, display: impl ToString) -> Self {
self.data.blank_option = Some(display.to_string());
self
}
} }

2
src/controls/spacer.rs
View File

@ -37,6 +37,8 @@ impl<FD: FormToolData> FormBuilder<FD> {
impl<FD: FormToolData> VanityControlBuilder<FD, SpacerData> { impl<FD: FormToolData> VanityControlBuilder<FD, SpacerData> {
/// Sets the height of the spacer. /// Sets the height of the spacer.
/// ///
/// This is a string to allow different units like "10px" or "1.25em".
///
/// This may or may not be respected based on the Style implementation. /// This may or may not be respected based on the Style implementation.
pub fn height(mut self, height: impl ToString) -> Self { pub fn height(mut self, height: impl ToString) -> Self {
self.data.height = Some(height.to_string()); self.data.height = Some(height.to_string());

9
src/controls/text_area.rs
View File

@ -9,9 +9,8 @@ use std::rc::Rc;
#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Hash, Default)] #[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Hash, Default)]
pub struct TextAreaData { pub struct TextAreaData {
pub name: String, pub name: String,
pub placeholder: Option<String>,
pub label: Option<String>, pub label: Option<String>,
pub initial_text: String, pub placeholder: Option<String>,
} }
impl ControlData for TextAreaData { impl ControlData for TextAreaData {
@ -70,10 +69,4 @@ impl<FD: FormToolData, FDT> ControlBuilder<FD, TextAreaData, FDT> {
self.data.placeholder = Some(placeholder.to_string()); self.data.placeholder = Some(placeholder.to_string());
self self
} }
/// Sets the intial_text for the text area.
pub fn initial_text(mut self, text: impl ToString) -> Self {
self.data.initial_text = text.to_string();
self
}
} }

10
src/controls/text_input.rs
View File

@ -9,9 +9,8 @@ use std::rc::Rc;
#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Hash)] #[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Hash)]
pub struct TextInputData { pub struct TextInputData {
pub name: String, pub name: String,
pub placeholder: Option<String>,
pub label: Option<String>, pub label: Option<String>,
pub initial_text: String, pub placeholder: Option<String>,
pub input_type: &'static str, pub input_type: &'static str,
} }
@ -21,7 +20,6 @@ impl Default for TextInputData {
name: String::new(), name: String::new(),
placeholder: None, placeholder: None,
label: None, label: None,
initial_text: String::new(),
input_type: "input", input_type: "input",
} }
} }
@ -84,12 +82,6 @@ impl<FD: FormToolData, FDT> ControlBuilder<FD, TextInputData, FDT> {
self self
} }
/// Sets the intial_text for the text input.
pub fn initial_text(mut self, text: impl ToString) -> Self {
self.data.initial_text = text.to_string();
self
}
/// Sets the text input to be the "password" type. /// Sets the text input to be the "password" type.
pub fn password(mut self) -> Self { pub fn password(mut self) -> Self {
self.data.input_type = "password"; self.data.input_type = "password";

12
src/form_builder.rs
View File

@ -121,11 +121,7 @@ impl<FD: FormToolData> FormBuilder<FD> {
let view = match show_when { let view = match show_when {
Some(when) => { Some(when) => {
let when = move || when(fd.into(), cx.clone()); let when = move || when(fd.into(), cx.clone());
view! { view! { <Show when=when>{view.clone()}</Show> }
<Show when=when>
{view.clone()}
</Show>
}
} }
None => view(), None => view(),
}; };
@ -268,11 +264,7 @@ impl<FD: FormToolData> FormBuilder<FD> {
let view = match show_when { let view = match show_when {
Some(when) => { Some(when) => {
let when = move || when(fd.into(), cx.clone()); let when = move || when(fd.into(), cx.clone());
view! { view! { <Show when=when>{view.clone()}</Show> }
<Show when=when>
{view.clone()}
</Show>
}
} }
None => view(), None => view(),
}; };

221
src/styles/grid_form.rs
View File

@ -60,11 +60,7 @@ impl FormStyle for GridFormStyle {
} }
fn group(&self, group: Rc<ControlRenderData<Self, View>>) -> View { fn group(&self, group: Rc<ControlRenderData<Self, View>>) -> View {
let view = view! { let view = view! { <div class="form_group form_grid">{&group.data}</div> }
<div class="form_group form_grid">
{&group.data}
</div>
}
.into_view(); .into_view();
self.custom_component(&group.styles, view) self.custom_component(&group.styles, view)
@ -105,11 +101,7 @@ impl FormStyle for GridFormStyle {
}; };
let view = view! { let view = view! {
<button <button type="button" class="form_button" on:click=on_click>
type="button"
class="form_button"
on:click=on_click
>
{&control.data.text} {&control.data.text}
</button> </button>
} }
@ -133,7 +125,13 @@ impl FormStyle for GridFormStyle {
value_getter: Option<Signal<String>>, value_getter: Option<Signal<String>>,
) -> View { ) -> View {
let value_getter = move || value_getter.map(|g| g.get()); let value_getter = move || value_getter.map(|g| g.get());
view! { <input name=&control.data.name prop:value=value_getter style="visibility: hidden; column-span: none"/> } view! {
<input
name=&control.data.name
prop:value=value_getter
style="visibility: hidden; column-span: none"
/>
}
.into_view() .into_view()
} }
@ -160,6 +158,7 @@ impl FormStyle for GridFormStyle {
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"
class=("form_input_invalid", move || validation_state.get().is_err()) class=("form_input_invalid", move || validation_state.get().is_err())
/> />
@ -178,25 +177,23 @@ impl FormStyle for GridFormStyle {
) -> View { ) -> View {
let view = view! { let view = view! {
<div> <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">{move || validation_state.get().err()}</span>
<span class="form_error">{move || validation_state.get().err()}</span>
</div>
<textarea
id=&control.data.name
name=&control.data.name
placeholder=control.data.placeholder.as_ref()
class="form_input"
prop:value=move || value_getter.get()
on:change=move |ev| {
value_setter(event_target_value(&ev));
}
>
</textarea>
</div> </div>
<textarea
id=&control.data.name
name=&control.data.name
placeholder=control.data.placeholder.as_ref()
prop:value=move || value_getter.get()
on:focusout=move |ev| {
value_setter(event_target_value(&ev));
}
class="form_input"
class=("form_input_invalid", move || validation_state.get().is_err())
></textarea>
} }
.into_view(); .into_view();
@ -242,18 +239,18 @@ impl FormStyle for GridFormStyle {
.collect_view(); .collect_view();
let view = view! { let view = view! {
<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">{move || validation_state.get().err()}</span> <span class="form_error">{move || validation_state.get().err()}</span>
</div> </div>
<div <div
class="form_input" class="form_input"
class:form_input_invalid=move || validation_state.get().is_err() class:form_input_invalid=move || validation_state.get().is_err()
> >
{buttons_view} {buttons_view}
</div> </div>
} }
.into_view(); .into_view();
@ -283,23 +280,23 @@ impl FormStyle for GridFormStyle {
.collect_view(); .collect_view();
let view = view! { let view = view! {
<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">{move || validation_state.get().err()}</span> <span class="form_error">{move || validation_state.get().err()}</span>
</div> </div>
<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:input=move |ev| { on:input=move |ev| {
value_setter(event_target_value(&ev)); value_setter(event_target_value(&ev));
} }
> >
{options_view} {options_view}
</select> </select>
} }
.into_view(); .into_view();
@ -313,23 +310,23 @@ impl FormStyle for GridFormStyle {
value_setter: Rc<dyn Fn(<CheckboxData as ControlData>::ReturnType)>, value_setter: Rc<dyn Fn(<CheckboxData as ControlData>::ReturnType)>,
) -> View { ) -> View {
let view = view! { let view = view! {
<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>
<input <input
type="checkbox" type="checkbox"
id=&control.data.name id=&control.data.name
name=&control.data.name name=&control.data.name
prop:checked=value_getter prop:checked=value_getter
on:input=move |ev| { on:input=move |ev| {
let new_value = event_target_checked(&ev); let new_value = event_target_checked(&ev);
value_setter(new_value); value_setter(new_value);
} }
/> />
<span>{control.data.label.as_ref()}</span> <span>{control.data.label.as_ref()}</span>
</label> </label>
} }
.into_view(); .into_view();
@ -344,24 +341,25 @@ impl FormStyle for GridFormStyle {
validation_state: Signal<Result<(), String>>, validation_state: Signal<Result<(), String>>,
) -> View { ) -> View {
let view = view! { let view = view! {
<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">{move || validation_state.get().err()}</span> <span class="form_error">{move || validation_state.get().err()}</span>
</div> </div>
<input <input
type="number" type="number"
id=&control.data.name id=&control.data.name
name=&control.data.name name=&control.data.name
step=control.data.step step=control.data.step
prop:value=move || value_getter.get() min=control.data.min
on:change=move |ev| { max=control.data.max
value_setter(event_target_value(&ev)); class="form_input"
} prop:value=move || value_getter.get()
on:change=move |ev| {
class="form_input" value_setter(event_target_value(&ev));
/> }
/>
} }
.into_view(); .into_view();
@ -376,28 +374,27 @@ impl FormStyle for GridFormStyle {
validation_state: Signal<Result<(), String>>, validation_state: Signal<Result<(), String>>,
) -> View { ) -> View {
let view = view! { let view = view! {
<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">{move || validation_state.get().err()}</span> <span class="form_error">{move || validation_state.get().err()}</span>
</div> </div>
<input <input
type="range" type="range"
id=&control.data.name id=&control.data.name
name=&control.data.name name=&control.data.name
min=control.data.min min=control.data.min
max=control.data.max max=control.data.max
prop:value=move || value_getter.get() class="form_input"
on:input=move |ev| { prop:value=move || value_getter.get()
let value = event_target_value(&ev).parse::<i32>().ok(); on:input=move |ev| {
if let Some(value) = value { let value = event_target_value(&ev).parse::<i32>().ok();
value_setter(value); if let Some(value) = value {
} value_setter(value);
} }
}
class="form_input" />
/>
} }
.into_view(); .into_view();