orbital-base-components 0.1.1

Headless base primitives for Orbital — structure, semantics, and accessibility
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

use leptos::prelude::*;

#[derive(Clone, Copy, Default, PartialEq, Eq)]
pub enum ImageShape {
    Circular,
    Rounded,
    #[default]
    Square,
}

impl ImageShape {
    pub fn as_str(&self) -> &'static str {
        match self {
            Self::Circular => "circular",
            Self::Rounded => "rounded",
            Self::Square => "square",
        }
    }
}

#[derive(Clone, Copy, Default, PartialEq, Eq)]
pub enum ImageFit {
    None,
    Contain,
    Cover,
    #[default]
    Fill,
    ScaleDown,
}

impl ImageFit {
    pub fn as_str(&self) -> &'static str {
        match self {
            Self::None => "none",
            Self::Contain => "contain",
            Self::Cover => "cover",
            Self::Fill => "fill",
            Self::ScaleDown => "scale-down",
        }
    }
}

#[component]
pub fn BaseImage(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] src: MaybeProp<String>,
    #[prop(optional, into)] alt: MaybeProp<String>,
    #[prop(optional, into)] width: MaybeProp<String>,
    #[prop(optional, into)] height: MaybeProp<String>,
    #[prop(optional, into)] shape: Signal<ImageShape>,
    #[prop(optional, into)] block: Signal<bool>,
    #[prop(optional, into)] shadow: Signal<bool>,
    #[prop(optional, into)] fit: Signal<ImageFit>,
) -> impl IntoView {
    view! {
        <img
            class=move || {
                let mut parts = vec![
                    "orbital-image".to_string(),
                    format!("orbital-image--{}", shape.get().as_str()),
                    format!("orbital-image--fit-{}", fit.get().as_str()),
                ];
                if block.get() {
                    parts.push("orbital-image--block".to_string());
                }
                if shadow.get() {
                    parts.push("orbital-image--shadow".to_string());
                }
                if let Some(extra) = class.get() {
                    if !extra.is_empty() {
                        parts.push(extra);
                    }
                }
                parts.join(" ")
            }
            src=move || src.get()
            alt=move || alt.get()
            width=move || width.get()
            height=move || height.get()
        />
    }
}