shadow-design 0.3.0

Modular, high-performance UI component library for Dioxus 0.7 applications
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

use dioxus::prelude::*;

#[cfg(feature = "icon")]
use crate::icon::{RenderSvgIcon, SvgIcon};

/// Dimensione del SegmentedControl.
#[derive(Clone, Copy, PartialEq, Debug, Default)]
pub enum SegmentedControlSize {
    Sm,
    #[default]
    Md,
    Lg,
}

impl SegmentedControlSize {
    #[must_use]
    pub fn scss_class(&self) -> &'static str {
        match self {
            SegmentedControlSize::Sm => "sd-segmented-control--sm",
            SegmentedControlSize::Md => "sd-segmented-control--md",
            SegmentedControlSize::Lg => "sd-segmented-control--lg",
        }
    }
}

/// Opzione per il componente `SegmentedControl`.
#[derive(Clone, PartialEq, Debug)]
pub struct SegmentOption {
    pub value: String,
    pub label: String,
    #[cfg(feature = "icon")]
    pub icon: Option<SvgIcon>,
    pub disabled: bool,
}

impl SegmentOption {
    pub fn new(value: impl Into<String>, label: impl Into<String>) -> Self {
        Self {
            value: value.into(),
            label: label.into(),
            #[cfg(feature = "icon")]
            icon: None,
            disabled: false,
        }
    }

    #[cfg(feature = "icon")]
    #[must_use]
    pub fn with_icon(mut self, icon: SvgIcon) -> Self {
        self.icon = Some(icon);
        self
    }

    #[must_use]
    pub fn with_disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }
}

/// Selettore a segmenti orizzontale tattile ad alta ergonomia con micro-glow del tema attivo.
#[component]
pub fn SegmentedControl(
    options: Vec<SegmentOption>,
    value: Signal<String>,
    #[props(default)] size: SegmentedControlSize,
    #[props(default)] full_width: bool,
    #[props(default)] disabled: bool,
    #[props(default)] on_change: Option<EventHandler<String>>,
    #[props(default)] class: String,
) -> Element {
    let size_class = size.scss_class();
    let full_width_class = if full_width { "sd-segmented-control--full-width" } else { "" };
    let disabled_class = if disabled { "sd-segmented-control--disabled" } else { "" };

    #[cfg(feature = "theme")]
    let theme_val = crate::theme::use_theme()();
    #[cfg(feature = "theme")]
    let base_override = theme_val.resolve_component_base("segmented_control").unwrap_or("");
    #[cfg(feature = "theme")]
    let class_modifiers = theme_val.resolve_class_modifiers("segmented_control", &class);
    #[cfg(feature = "theme")]
    let radius = theme_val.radius_scale.sm();

    #[cfg(not(feature = "theme"))]
    let base_override = "";
    #[cfg(not(feature = "theme"))]
    let class_modifiers = String::new();
    #[cfg(not(feature = "theme"))]
    let radius = "";

    let current_val = value();

    rsx! {
        div {
            class: "sd-segmented-control {size_class} {full_width_class} {disabled_class} {radius} {base_override} {class_modifiers} {class}",
            role: "radiogroup",

            for option in options {
                {
                    let is_active = option.value == current_val;
                    let opt_val = option.value.clone();
                    let is_opt_disabled = disabled || option.disabled;
                    let active_class = if is_active { "sd-segmented-control__item--active" } else { "" };
                    let opt_disabled_class = if is_opt_disabled { "sd-segmented-control__item--disabled" } else { "" };

                    rsx! {
                        button {
                            key: "{option.value}",
                            r#type: "button",
                            role: "radio",
                            aria_checked: "{is_active}",
                            disabled: is_opt_disabled,
                            class: "sd-segmented-control__item {active_class} {opt_disabled_class}",
                            onclick: {
                                let opt_val_click = opt_val.clone();
                                move |_| {
                                    if !is_opt_disabled {
                                        *value.write() = opt_val_click.clone();
                                        if let Some(handler) = &on_change {
                                            handler.call(opt_val_click.clone());
                                        }
                                    }
                                }
                            },

                            if let Some(opt_icon) = option.icon {
                                RenderSvgIcon {
                                    icon: opt_icon,
                                    size: 14,
                                    class: "sd-segmented-control__icon".to_string(),
                                }
                            }

                            span {
                                class: "sd-segmented-control__label",
                                "{option.label}"
                            }
                        }
                    }
                }
            }
        }
    }
}