shadow-design 0.1.0

Modular, high-performance UI component library for Dioxus 0.7 applications
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

use crate::icon::{Icon, IconKind};
use dioxus::prelude::*;

#[derive(Clone, Copy, PartialEq, Debug, Default)]
pub enum CheckboxSize {
    Sm,
    #[default]
    Md,
    Lg,
}

impl CheckboxSize {
    pub fn scss_class(&self) -> &'static str {
        match self {
            CheckboxSize::Sm => "sd-checkbox__box--sm",
            CheckboxSize::Md => "sd-checkbox__box--md",
            CheckboxSize::Lg => "sd-checkbox__box--lg",
        }
    }

    pub fn icon_size(&self) -> u32 {
        match self {
            CheckboxSize::Sm => 11,
            CheckboxSize::Md => 13,
            CheckboxSize::Lg => 16,
        }
    }
}

#[component]
pub fn Checkbox(
    checked: Signal<bool>,
    #[props(default)] label: Option<String>,
    #[props(default)] description: Option<String>,
    #[props(default)] disabled: bool,
    #[props(default)] error: Option<String>,
    #[props(default)] indeterminate: bool,
    #[props(default)] size: CheckboxSize,
    #[props(default)] glow: Option<bool>,
    #[props(default)] class: String,
) -> Element {
    let is_checked = *checked.read();

    #[cfg(feature = "theme")]
    let theme = crate::theme::use_theme();
    #[cfg(feature = "theme")]
    let active_color_class = match theme().primary_color {
        crate::theme::PrimaryColor::Violet => "sd-checkbox__box--checked",
        crate::theme::PrimaryColor::Obsidian => "sd-checkbox__box--checked-obsidian",
        crate::theme::PrimaryColor::Crimson => "sd-checkbox__box--checked-crimson",
        crate::theme::PrimaryColor::Cyan => "sd-checkbox__box--checked-cyan",
        crate::theme::PrimaryColor::Emerald => "sd-checkbox__box--checked-emerald",
    };
    #[cfg(feature = "theme")]
    let glow_class = match glow {
        Some(true) => "sd-checkbox__box--glow",
        Some(false) => "",
        None => {
            if theme().glow_mode != crate::theme::GlowMode::Off && (is_checked || indeterminate) {
                "sd-checkbox__box--glow"
            } else {
                ""
            }
        }
    };

    #[cfg(not(feature = "theme"))]
    let active_color_class = "sd-checkbox__box--checked";
    #[cfg(not(feature = "theme"))]
    let glow_class = if is_checked || indeterminate {
        "sd-checkbox__box--glow"
    } else {
        ""
    };

    let checked_class = if is_checked || indeterminate {
        active_color_class
    } else {
        ""
    };

    let error_class = if error.is_some() {
        "sd-checkbox__box--error"
    } else {
        ""
    };

    let box_size = size.scss_class();
    let is_disabled = disabled;
    let disabled_class = if is_disabled {
        "sd-checkbox--disabled"
    } else {
        ""
    };

    rsx! {
        div {
            class: "sd-checkbox {disabled_class} {class}",
            onclick: move |_| {
                if !is_disabled {
                    let next = !*checked.read();
                    *checked.write() = next;
                }
            },
            div {
                class: "sd-checkbox__box {box_size} {checked_class} {glow_class} {error_class}",
                if indeterminate {
                    span { style: "display: block; width: 10px; height: 2px; background: currentColor; border-radius: 9999px;" }
                } else if is_checked {
                    Icon { kind: IconKind::Check, size: size.icon_size() }
                }
            }
            if label.is_some() || description.is_some() || error.is_some() {
                div { class: "sd-checkbox__label",
                    if let Some(lbl) = label {
                        span { class: "sd-checkbox__title", "{lbl}" }
                    }
                    if let Some(desc) = description {
                        span { class: "sd-checkbox__description", "{desc}" }
                    }
                    if let Some(err) = error {
                        span { class: "sd-checkbox__error-text", "{err}" }
                    }
                }
            }
        }
    }
}