daisy_rsx 0.1.21

Daisy UI components for the Dioxus Rust 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98

#![allow(non_snake_case)]
use std::fmt::Display;

use dioxus::prelude::*;

#[derive(Default, Copy, Clone, Debug, PartialEq, Eq)]
pub enum InputType {
    #[default]
    Text,
    Number,
    Email,
    Password,
}

impl Display for InputType {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        match self {
            InputType::Text => write!(f, "text"),
            InputType::Number => write!(f, "number"),
            InputType::Email => write!(f, "email"),
            InputType::Password => write!(f, "password"),
        }
    }
}

#[derive(Default, Copy, Clone, Debug, PartialEq, Eq)]
pub enum InputSize {
    #[default]
    Default,
    Small,
    ExtraSmall,
    Large,
    Medium,
}

impl Display for InputSize {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        match self {
            InputSize::Default => write!(f, "input-sm"),
            InputSize::ExtraSmall => write!(f, "input-xs"),
            InputSize::Small => write!(f, "input-sm"),
            InputSize::Large => write!(f, "input-lg"),
            InputSize::Medium => write!(f, "input-md"),
        }
    }
}

#[derive(Props, Clone, PartialEq)]
pub struct InputProps {
    input_type: Option<InputType>,
    input_size: Option<InputSize>,
    pub name: String,
    pub id: Option<String>,
    pub label_class: Option<String>,
    pub value: Option<String>,
    pub label: Option<String>,
    pub help_text: Option<String>,
    pub placeholder: Option<String>,
    pub step: Option<String>,
    pub required: Option<bool>,
    pub disabled: Option<bool>,
    pub readonly: Option<bool>,
}

#[component]
pub fn Input(props: InputProps) -> Element {
    let input_type = props.input_type.unwrap_or_default();
    let input_size = props.input_size.unwrap_or_default();

    rsx!(
        match (props.label, props.required) {
            (Some(l), Some(_)) => rsx! {
                label { class: props.label_class, "{l} *" }
            },
            (Some(l), None) => rsx! {
                label { class: props.label_class, "{l}" }
            },
            (None, _) => rsx! {},
        }
        input {
            id: props.id,
            class: "input input-bordered {input_size}",
            value: props.value,
            required: props.required,
            disabled: props.disabled,
            readonly: props.readonly,
            name: "{props.name}",
            placeholder: props.placeholder,
            step: props.step,
            "type": "{input_type}",
        }
        if let Some(l) = props.help_text {
            label {
                span { class: "label-text-alt", "{l}" }
            }
        }
    )
}