dwui 0.9.0

UI Component library built on the DWIND style crate!
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

use crate::mixins::labelled_rect_mixin::labelled_rect_mixin;
use crate::prelude::{InputValueWrapper, ValidationResult};
use crate::theme::prelude::*;
use crate::utils::component_id;
use dominator::{events, html, with_node, Dom};
use dwind::prelude::*;
use futures_signals::signal::{always, Mutable, SignalExt};
use futures_signals::signal_vec::SignalVecExt;
use futures_signals_component_macro::component;
use web_sys::HtmlSelectElement;

#[component(render_function=select)]
struct Select {
    #[default(Box::new(Mutable::new("".to_string())))]
    value: dyn InputValueWrapper + 'static,

    #[signal_vec]
    #[default(vec![])]
    options: (String, String),

    #[signal]
    #[default("".to_string())]
    label: String,

    #[signal]
    #[default(ValidationResult::Valid)]
    is_valid: ValidationResult,
}

pub fn select(props: SelectProps) -> Dom {
    let SelectProps {
        value,
        options,
        label,
        is_valid,
        apply,
    } = props;
    let value_signal = value.value_signal_cloned().broadcast();

    let is_valid = is_valid.broadcast();

    let select_id = component_id("select");
    let error_id = format!("{}-error", select_id);

    let is_valid_bool = is_valid
        .signal_ref(|validation| validation.is_valid())
        .broadcast();

    html!("div", {
        .dwclass!("grid h-10")
        .children([
            html!("select" => HtmlSelectElement, {
                .attr("id", &select_id)
                .dwclass!("dwui-bg-void-900 is(.light *):dwui-bg-void-300 is(.light *):dwui-text-on-primary-800 text-base h-10 p-l-2")
                .dwclass!("dwui-text-on-primary-300")
                .dwclass!("grid-row-1 grid-col-1 cursor-pointer rounded-t-sm transition-all")
                .style("outline", "none")
                .attr_signal("aria-invalid", is_valid_bool.signal().map(|valid| if valid { None } else { Some("true") }))
                .attr_signal("aria-describedby", is_valid_bool.signal().map({
                    let error_id = error_id.clone();
                    move |valid| {
                        if valid {
                            None
                        } else {
                            Some(error_id.clone())
                        }
                    }
                }))
                .children_signal_vec(options.map(move |(key, value)| {
                    html!("option", {
                        .attr("value", &key)
                        .attr_signal("selected", value_signal.signal_cloned().map(move |v|{
                            if  key == v {
                                Some("selected")
                            } else {
                                None
                            }
                        }))
                        .text(&value)
                    })
                }))
                .with_node!(node => {
                    .event(move |_: events::Change| {
                        value.set(node.value());
                    })
                })
            })
        ])
        .apply(labelled_rect_mixin(label, always(true), is_valid.signal_cloned(), select_id))
        .apply_if(apply.is_some(),|b| b.apply(apply.unwrap()))
    })
}