thaw 0.4.8

An easy to use leptos component 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

use leptos::{either::EitherOf3, prelude::*};
use thaw_utils::{class_list, mount_style};

#[component]
pub fn Link(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional)] span: bool,
    /// If true, changes styling when the link is being used alongside other text content.
    #[prop(optional, into)]
    inline: Signal<bool>,
    #[prop(optional, into)] href: Option<Signal<String>>,
    /// Whether the link is disabled.
    #[prop(optional, into)]
    disabled: Signal<bool>,
    /// When set, allows the link to be focusable even when it has been disabled.
    #[prop(optional, into)]
    disabled_focusable: Signal<bool>,
    children: Children,
) -> impl IntoView {
    mount_style("link", include_str!("./link.css"));

    let link_disabled = Memo::new(move |_| disabled.get() || disabled_focusable.get());
    let class = class_list![
        "thaw-link",
        ("thaw-link--inline", move || inline.get()),
        ("thaw-link--disabled", move || link_disabled.get()),
        ("thaw-link--disabled-focusable", move || link_disabled.get()),
        class
    ];

    let tabindex = Memo::new(move |_| {
        if disabled_focusable.get() {
            Some("0")
        } else if disabled.get() {
            Some("-1")
        } else {
            None
        }
    });

    if let Some(href) = href {
        EitherOf3::A(view! {
            <a
                role="link"
                class=class
                href=href
                tabindex=tabindex
                aria-disabled=move || link_disabled.get().then_some("true")
            >
                {children()}
            </a>
        })
    } else if span {
        EitherOf3::B(view! { <span class=class>{children()}</span> })
    } else {
        EitherOf3::C(view! {
            <button
                class=class
                disabled=move || disabled.get().then_some("")
                aria-disabled=move || link_disabled.get().then_some("true")
            >
                {children()}
            </button>
        })
    }
}