leptos_forge 0.6.3

Build and test your Leptos components
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

//! Side panel shows the description and allows to play tests for the component
//!

use leptos::prelude::*;
use utils::prelude::ThreadSafe;
use utils_leptos::signal::URwSignal;

/// Returns a name of the tab
pub trait TabName
where
    Self: Sized,
{
    /// Name of the tab
    fn name(&self) -> &'static str;
    /// Html id sane string
    ///
    /// This value will be combined with an id of the [TabPanel] to generate unique id for the radio button and label.
    fn html_id(&self) -> &'static str;
    /// Creates an instance of selected value based on the string representation
    fn try_from_name(name: &str) -> Option<Self>;
}

/// Defines a tab on the tab list
pub trait Tab<O: PartialEq>: ThreadSafe {
    /// Id of the tab. This is used to identify which tab is selected
    fn id(&self) -> O;
    /// View which should be shown when this tab has been activated
    fn view(&self) -> AnyView;
}

#[component]
pub fn TabPanel<S, O>(
    /// Unique id of the tab panel
    id: S,
    /// List of tabs to be shown
    tabs: Vec<Box<dyn Tab<O>>>,
    /// Selected tab
    selector: URwSignal<O>,
) -> impl IntoView
where
    S: ToString,
    O: ThreadSafe + Clone + PartialEq + TabName,
{
    let tab_selector = selector.map(
        |v| v.name().to_string(),
        |v, new_name| {
            if let Some(new_value) = O::try_from_name(&new_name) {
                *v = new_value;
            }
        },
    );

    let tabpanel_id = id.to_string();
    let buttons = tabs
        .iter()
        .map(|tab| {
            let tabpanel_id = tabpanel_id.clone();
            let id = tab.id();
            view! {
                <TabButton id selector=tab_selector tabpanel_id/>
            }
        })
        .collect_view();

    let views = tabs
        .into_iter()
        .map(|tab| {
            view! {
                <TabView tab selector />
            }
        })
        .collect_view();

    view! {
        <div id={tabpanel_id} class="leptos-forge-tab-panel overflow-auto">
            <div class="">
                { buttons }
            </div>
            <div>
                { views }
            </div>
        </div>
    }
}

#[component]
fn TabButton<S, O>(
    /// id of the tab panel element
    tabpanel_id: S,
    /// id of the tab to be shown
    id: O,
    /// Selected tab signal
    selector: URwSignal<String>,
) -> impl IntoView
where
    S: ToString,
    O: ThreadSafe + Clone + TabName,
{
    let tab_button_id = format!("{}-{}", tabpanel_id.to_string(), id.html_id());
    let name = id.name();
    // let on_click = move |_: MouseEvent| selector.set(name.to_string());
    view! {
        <div class="inline-block">
            <input id={tab_button_id.clone()} class="peer hidden" name={tabpanel_id.to_string()} value={name} type="radio" bind:group=selector />
            <label for=tab_button_id class="px-2 py-1 text-sm bg-forgegray-300 peer-checked:bg-forgeblue-300">{ name }</label>
        </div>
    }
}

/// Component showing the content of the single tab
#[component]
fn TabView<O>(
    /// Tab to be shown
    tab: Box<dyn Tab<O>>,
    /// Selected tab signal
    #[prop(into)]
    selector: URwSignal<O>,
) -> impl IntoView
where
    O: ThreadSafe + Clone + PartialEq,
{
    let id = tab.id();
    view! {
        <Show when= move ||{ selector.get() == id }>
            { tab.view() }
        </Show>
    }
}