leptos-forms-rs 0.3.0

Type-safe, reactive form handling library for Leptos applications
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

use leptos::prelude::*;
use crate::core::types::*;

/// Text input component
#[component]
pub fn TextInput(
    name: String,
    value: ReadSignal<Option<FieldValue>>,
    #[prop(optional)] input_type: Option<String>,
    #[prop(optional)] placeholder: Option<String>,
    #[prop(optional)] disabled: bool,
    #[prop(optional)] required: bool,
) -> impl IntoView {
    let _ = value;
    let input_type = input_type.unwrap_or_else(|| "text".to_string());
    
    view! {
        <input
            type=input_type
            name=name
            placeholder=placeholder.unwrap_or_default()
            disabled=disabled
            required=required
            class="form-input"
        />
    }
}

/// Number input component
#[component]
pub fn NumberInput(
    name: String,
    value: ReadSignal<Option<FieldValue>>,
    #[prop(optional)] placeholder: Option<String>,
    #[prop(optional)] disabled: bool,
    #[prop(optional)] required: bool,
) -> impl IntoView {
    let _ = value;
    view! {
        <input
            type="number"
            name=name
            placeholder=placeholder.unwrap_or_default()
            disabled=disabled
            required=required
            class="form-input"
        />
    }
}

/// Checkbox input component
#[component]
pub fn CheckboxInput(
    name: String,
    value: ReadSignal<Option<FieldValue>>,
    #[prop(optional)] disabled: bool,
    #[prop(optional)] required: bool,
) -> impl IntoView {
    let _ = value;
    view! {
        <input
            type="checkbox"
            name=name
            disabled=disabled
            required=required
            class="form-checkbox"
        />
    }
}

/// Select input component
#[component]
pub fn SelectInput(
    name: String,
    value: ReadSignal<Option<FieldValue>>,
    options: Vec<SelectOption>,
    #[prop(optional)] placeholder: Option<String>,
    #[prop(optional)] disabled: bool,
    #[prop(optional)] required: bool,
) -> impl IntoView {
    let _ = value;
    view! {
        <select
            name=name
            disabled=disabled
            required=required
            class="form-select"
        >
                            {if let Some(placeholder_text) = placeholder {
                    view! {
                        <option value="" disabled=true selected=true>
                            {placeholder_text}
                        </option>
                    }
                } else {
                    view! { <option value="" disabled=true selected=true>{String::new()}</option> }
                }}
            
            {options.iter().map(|option| {
                view! {
                    <option 
                        value=option.value.clone()
                        disabled=option.disabled
                    >
                        {option.label.clone()}
                    </option>
                }
            }).collect::<Vec<_>>()}
        </select>
    }
}