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

use super::use_tabs;
use crate::utils::{class_list::class_list, mount_style};
use leptos::*;

#[derive(Clone)]
pub(crate) struct TabOption {
    pub key: String,
    pub label: String,
    pub label_view: Option<TabLabelView>,
}

#[derive(Clone)]
pub(crate) struct TabLabelView {
    pub class: MaybeSignal<String>,
    pub children: Fragment,
}

impl From<TabLabel> for TabLabelView {
    fn from(tab_label: TabLabel) -> Self {
        let TabLabel { class, children } = tab_label;
        Self {
            class,
            children: children(),
        }
    }
}

#[slot]
pub struct TabLabel {
    #[prop(optional, into)]
    class: MaybeSignal<String>,
    children: Children,
}

#[component]
pub fn Tab(
    #[prop(into)] key: String,
    #[prop(optional, into)] label: String,
    #[prop(optional)] tab_label: Option<TabLabel>,
    #[prop(optional, into)] class: MaybeSignal<String>,
    children: Children,
) -> impl IntoView {
    mount_style("tab", include_str!("./tab.css"));
    let tabs = use_tabs();
    tabs.push_tab_options(TabOption {
        key: key.clone(),
        label,
        label_view: tab_label.map(|label| label.into()),
    });

    let is_active = create_memo({
        let key = key.clone();
        let tabs = tabs.clone();
        move |_| key == tabs.get_key()
    });

    on_cleanup(move || {
        tabs.remove_tab_options(&key);
    });

    view! {
        <div
            class=class_list![
                "thaw-tab", ("thaw-tab--hidden", move || ! is_active.get()), move || class.get()
            ]

            role="tabpanel"
            aria-hidden=move || if is_active.get() { "false" } else { "true" }
        >
            {children()}
        </div>
    }
}