canonrs-core 0.1.0

CanonRS core types, traits and primitives
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
129
130
131

//! @canon-level: strict
//! @canon-owner: primitives-team
//! Modal Primitive - HTML puro + ARIA

use leptos::prelude::*;
use crate::meta::VisibilityState;


#[component]
pub fn ModalPrimitive(
    children: Children,
    #[prop(default = VisibilityState::Closed)] state: VisibilityState,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    let uid_mo = crate::infra::uid::generate("mo");
    view! {
        <div
            data-rs-modal=""
            data-rs-interaction="overlay"
            data-rs-uid=uid_mo
            data-rs-state=state.as_str()
            class=class
        >
            {children()}
        </div>
    }
}

#[component]
pub fn ModalTriggerPrimitive(
    children: Children,
    #[prop(default = VisibilityState::Closed)] state: VisibilityState,
    #[prop(optional, into)] aria_controls: Option<String>,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    view! {
        <button
            type="button"
            data-rs-modal-trigger=""
            data-rs-button=""
            data-rs-variant="primary"
            data-rs-state=state.as_str()
            aria-haspopup="dialog"
            aria-expanded=state.aria_expanded()
            aria-controls=aria_controls
            class=class
        >
            {children()}
        </button>
    }
}

#[component]
pub fn ModalOverlayPrimitive(
    #[prop(default = VisibilityState::Closed)] state: VisibilityState,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    view! {
        <div
            data-rs-modal-overlay=""
            data-rs-state=state.as_str()
            class=class
        />
    }
}

#[component]
pub fn ModalContentPrimitive(
    children: Children,
    #[prop(optional, into)] aria_labelledby: Option<String>,
    #[prop(optional, into)] aria_describedby: Option<String>,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    view! {
        <div
            data-rs-modal-content=""
            role="dialog"
            aria-modal="true"
            aria-labelledby=aria_labelledby
            aria-describedby=aria_describedby
            tabindex="-1"
            class=class
        >
            {children()}
        </div>
    }
}

#[component]
pub fn ModalPortalPrimitive(
    children: Children,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    view! { <div data-rs-modal-portal="" class=class>{children()}</div> }
}

#[component]
pub fn ModalTitlePrimitive(
    children: Children,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    view! { <h2 data-rs-modal-title="" class=class>{children()}</h2> }
}

#[component]
pub fn ModalDescriptionPrimitive(
    children: Children,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    view! { <p data-rs-modal-description="" class=class>{children()}</p> }
}

#[component]
pub fn ModalClosePrimitive(
    children: Children,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    view! {
        <button type="button" data-rs-modal-close="" data-rs-button="" data-rs-variant="ghost" class=class>
            {children()}
        </button>
    }
}

#[component]
pub fn ModalFooterPrimitive(
    children: Children,
    #[prop(into, default = String::new())] class: String,
) -> impl IntoView {
    view! { <div data-rs-modal-footer="" class=class>{children()}</div> }
}