leptos-material 0.6.1

A Leptos component wrapper for Material Web Components.
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

use leptos::{
    component,
    html::{self, Input},
    slot, view, Attribute, AttributeValue, Binding, Children, IntoAttribute, IntoView, NodeRef,
    RwSignal, SignalGet,
};

use super::icon::{Icon, IconProps};

#[derive(PartialEq, Clone, Default)]
pub enum InputType {
    #[default]
    Text,
    Email,
    Number,
    Password,
    Search,
    TelephoneNumber,
    Url,
    Textarea,
}

impl From<InputType> for String {
    fn from(value: InputType) -> Self {
        match value {
            InputType::Text => "text",
            InputType::Email => "email",
            InputType::Number => "number",
            InputType::Password => "password",
            InputType::Search => "search",
            InputType::TelephoneNumber => "tel",
            InputType::Url => "url",
            InputType::Textarea => "textarea",
        }
        .into()
    }
}

impl IntoAttribute for InputType {
    fn into_attribute(self) -> Attribute {
        Attribute::String(String::from(self).into())
    }

    fn into_attribute_boxed(self: Box<Self>) -> Attribute {
        Attribute::String(String::from(*self).into())
    }
}

pub enum TextFieldIconPlacement {
    Leading,
    Trailing,
}

#[slot]
pub struct TextFieldIcon {
    placement: TextFieldIconPlacement,
    /// Icon Name
    #[prop(into)]
    name: String,
}

#[derive(Default)]
pub enum TextFieldStyle {
    #[default]
    Filled,
    Outlined,
}

impl TextFieldStyle {
    pub fn get_element_name(&self) -> String {
        match self {
            TextFieldStyle::Filled => "md-filled-text-field",
            TextFieldStyle::Outlined => "md-outlined-text-field",
        }
        .into()
    }
}

/// [MWC Docs](https://material-web.dev/components/text-field/)
#[component]
pub fn TextField(
    #[prop(optional)] style: TextFieldStyle,
    #[prop(optional)] value: RwSignal<String>,
    #[prop(attrs)] attr: Vec<(&'static str, Attribute)>,
    #[prop(optional)] text_field_icon: Option<TextFieldIcon>,
    #[prop(optional)] children: Option<Children>,
) -> impl IntoView {
    let mut html = html::custom(html::Custom::new(style.get_element_name()))
        .attrs(attr)
        .prop("value", move || value.get());
    if let Some(icon) = text_field_icon {
        let icon_element = Icon(IconProps {
            name: icon.name,
            element_slot: match icon.placement {
                TextFieldIconPlacement::Leading => "leading-icon",
                TextFieldIconPlacement::Trailing => "trailing-icon",
            }
            .into(),
        });
        html = html.child(icon_element);
    }
    if let Some(child) = children {
        html = html.child(child())
    }
    html
}