euv-ui 0.18.2

Reusable UI component library for the euv framework, providing buttons, cards, modals, inputs, and more.
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

use super::*;

/// A generic prev/next pagination footer aligned with common docs frameworks.
///
/// Renders two bordered link cards; a missing side collapses into a spacer so
/// the remaining side keeps its alignment.
///
/// # Arguments
///
/// - `VirtualNode<EuvPaginationProps>` - The props node.
///
/// # Returns
///
/// - `VirtualNode` - The pagination virtual DOM tree.
#[component]
pub fn euv_pagination(node: VirtualNode<EuvPaginationProps>) -> VirtualNode {
    let EuvPaginationProps {
        prev_label,
        next_label,
        prev,
        next,
    }: EuvPaginationProps = node.try_get_props().unwrap_or_default();
    let prev_node: VirtualNode = pagination_side(prev, prev_label, false);
    let next_node: VirtualNode = pagination_side(next, next_label, true);
    html! {
        div {
            class: c_euv_pagination()
            prev_node
            next_node
        }
    }
}

/// Renders one side of the pagination footer.
///
/// # Arguments
///
/// - `Option<EuvPaginationItem>` - The entry; `None` renders a spacer.
/// - `&'static str` - The small uppercase label above the entry text.
/// - `bool` - Whether this is the right-aligned next side.
///
/// # Returns
///
/// - `VirtualNode` - The side virtual DOM tree.
fn pagination_side(
    item: Option<EuvPaginationItem>,
    label: &'static str,
    is_next: bool,
) -> VirtualNode {
    let Some(item) = item else {
        return html! {
            div {
                class: c_euv_pagination_spacer()
            }
        };
    };
    if is_next {
        return html! {
            a {
                class: c_euv_pagination_link()
                class: c_euv_pagination_next()
                href: format!("#{}", item.link)
                onclick: Router::link_handler(item.link)
                span {
                    class: c_euv_pagination_label()
                    {
                        label
                    }
                }
                span {
                    class: c_euv_pagination_text()
                    {
                        item.text
                    }
                }
            }
        };
    }
    html! {
        a {
            class: c_euv_pagination_link()
            href: format!("#{}", item.link)
            onclick: Router::link_handler(item.link)
            span {
                class: c_euv_pagination_label()
                {
                    label
                }
            }
            span {
                class: c_euv_pagination_text()
                {
                    item.text
                }
            }
        }
    }
}