vertigo-forms 0.1.3

Building block for forms in vertigo
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

use vertigo::{DomElement, Value, bind, component, css, dom, dom_element};

use crate::{DictSelect, DropImageFile, Select, SelectSearch, Switch, SwitchParams, input::Input};

use super::super::{DataField, DataFieldValue};

#[component]
pub fn Field<'a>(field: &'a DataField) {
    match &field.value {
        DataFieldValue::String(val) => {
            dom! { <Input input:name={&&field.key} value={val.value.clone()} /> }
        }
        DataFieldValue::TextArea(val) => {
            let on_input = bind!(val.value, |new_value: String| {
                value.set(new_value);
            });
            let el =
                dom_element! { <textarea name={&&field.key} {on_input}>{&val.value}</textarea> };
            if let Some(rows) = val.rows {
                el.add_attr("rows", rows);
            }
            if let Some(cols) = val.cols {
                el.add_attr("cols", cols);
            }
            el.into()
        }
        DataFieldValue::List(val) => {
            dom! { <Select value={val.value.clone()} options={&val.options} /> }
        }
        DataFieldValue::Bool(val) => {
            dom! {
                <Switch i:name={&&field.key} value={&val.value} params={SwitchParams::checkbox()} />
            }
        }
        DataFieldValue::Dict(val) => {
            dom! { <DictSelect value={val.value.clone()} options={&val.options} /> }
        }
        DataFieldValue::Multi(val) => {
            bind!(val.value, val.options, val.add_label,
                val.value.render_value(move |vals| {
                    let selects = DomElement::new("div");
                    let row_css = css! {"
                        display: flex;
                    "};

                    for (idx, tag_id) in vals.iter().enumerate() {
                        let on_click = bind!(value, |_| value.change(|list| {
                            list.remove(idx);
                        }));
                        selects.add_child(dom! {
                        <div css={&row_css}>
                            <SelectSearch value={tag_id.clone()} options={options.clone()} params={} />
                            <button {on_click}>"x"</button>
                        </div>
                    });
                    }

                    selects.add_child({
                        let on_click = bind!(value, |_| value
                            .change(|list| list.push(Value::new(0))));
                        dom! {
                            <button {on_click}>{&add_label}</button>
                        }
                    });

                    selects.into()
                })
            )
        }
        DataFieldValue::Image(val) => {
            let params = val.component_params.clone().unwrap_or_default();
            dom! { <DropImageFile
                item={val.value.clone()}
                original_link={val.original_link.clone()}
                {params}
            /> }
        }
        DataFieldValue::Custom(val) => (val.render)(),
        DataFieldValue::StaticCustom(render) => render(),
    }
}