thaw 0.4.8

An easy to use leptos component library
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

use super::{SelectRule, SelectSize};

use crate::{icon::ChevronDownRegularIcon, FieldInjection, Rule, SelectRuleTrigger};
use leptos::{html, prelude::*};
use thaw_utils::{class_list, mount_style, Model};

#[component]
pub fn Select(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] id: MaybeProp<String>,
    #[prop(optional, into)] rules: Vec<SelectRule>,
    /// A string specifying a name for the input control.
    /// This name is submitted along with the control's value when the form data is submitted.
    #[prop(optional, into)]
    name: MaybeProp<String>,
    #[prop(optional, into)] value: Model<String>,
    #[prop(optional, into)] default_value: Option<String>,
    /// Whether the select is disabled.
    #[prop(optional, into)]
    disabled: Signal<bool>,
    /// Matches the Input sizes.
    #[prop(optional, into)]
    size: Signal<SelectSize>,
    children: Children,
) -> impl IntoView {
    mount_style("select", include_str!("./select.css"));
    let (id, name) = FieldInjection::use_id_and_name(id, name);
    let validate = Rule::validate(rules, value, name);
    let select_ref = NodeRef::<html::Select>::new();
    Effect::new(move |prev: Option<bool>| {
        let Some(el) = select_ref.get() else {
            return false;
        };

        let el_value = el.value();
        if !prev.unwrap_or_default() {
            if let Some(default_value) = default_value.as_ref() {
                el.set_value(default_value);
                value.set(default_value.clone());
            } else {
                value.set(el_value);
            }
            value.with(|_| {});
            return true;
        }
        value.with(|value| {
            if value != &el_value {
                el.set_value(value);
            }
        });
        true
    });

    let on_change = move |_| {
        let Some(el) = select_ref.get() else {
            return;
        };
        value.set(el.value());
        validate.run(Some(SelectRuleTrigger::Change));
    };

    view! {
        <span class=class_list![
            "thaw-select",
            ("thaw-select--disabled", move || disabled.get()),
            move || format!("thaw-select--{}", size.get().as_str()),
            class
        ]>
            <select
                class="thaw-select__select"
                id=id
                name=name
                node_ref=select_ref
                disabled=disabled
                on:change=on_change
            >
                {children()}
            </select>
            <span class="thaw-select__icon">
                <ChevronDownRegularIcon />
            </span>
        </span>
    }
}