leptix-password-toggle 0.1.4

Leptix Password Toggle Field — a password input with integrated visibility toggle.
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

use leptix_core::primitive::{Primitive, VoidPrimitive};
use leptos::{context::Provider, html, prelude::*};
use leptos_node_ref::AnyNodeRef;

#[derive(Clone, Debug)]
struct PasswordToggleContextValue {
    visible: RwSignal<bool>,
}

#[component]
pub fn PasswordToggleField(
    #[prop(into, optional)] default_visible: MaybeProp<bool>,
    #[prop(into, optional)] as_child: MaybeProp<bool>,
    #[prop(into, optional)] node_ref: AnyNodeRef,
    children: TypedChildrenFn<impl IntoView + 'static>,
) -> impl IntoView {
    let children = StoredValue::new(children.into_inner());
    let visible = RwSignal::new(default_visible.get().unwrap_or(false));
    let ctx = PasswordToggleContextValue { visible };

    view! {
        <Provider value=ctx>
            <Primitive element=html::div as_child=as_child node_ref=node_ref
                attr:data-state=move || if visible.get() { "visible" } else { "hidden" }
            >
                {children.with_value(|c| c())}
            </Primitive>
        </Provider>
    }
}

#[component]
pub fn PasswordToggleFieldInput(
    #[prop(into, optional)] as_child: MaybeProp<bool>,
    #[prop(into, optional)] node_ref: AnyNodeRef,
) -> impl IntoView {
    let ctx = expect_context::<PasswordToggleContextValue>();

    view! {
        <VoidPrimitive element=html::input as_child=as_child node_ref=node_ref
            attr:r#type=move || if ctx.visible.get() { "text" } else { "password" }
            attr:data-state=move || if ctx.visible.get() { "visible" } else { "hidden" }
        >
            {""}
        </VoidPrimitive>
    }
}

#[component]
pub fn PasswordToggleFieldToggle(
    #[prop(into, optional)] as_child: MaybeProp<bool>,
    #[prop(into, optional)] node_ref: AnyNodeRef,
    children: TypedChildrenFn<impl IntoView + 'static>,
) -> impl IntoView {
    let children = StoredValue::new(children.into_inner());
    let ctx = expect_context::<PasswordToggleContextValue>();

    view! {
        <Primitive element=html::button as_child=as_child node_ref=node_ref
            attr:r#type="button"
            attr:aria-label=move || if ctx.visible.get() { "Hide password" } else { "Show password" }
            attr:aria-pressed=move || ctx.visible.get().to_string()
            attr:data-state=move || if ctx.visible.get() { "visible" } else { "hidden" }
            on:click=move |_| ctx.visible.set(!ctx.visible.get())
        >
            {children.with_value(|c| c())}
        </Primitive>
    }
}

#[component]
pub fn PasswordToggleFieldIcon(
    #[prop(into, optional)] as_child: MaybeProp<bool>,
    #[prop(into, optional)] node_ref: AnyNodeRef,
    #[prop(optional)] children: Option<ChildrenFn>,
) -> impl IntoView {
    let children = StoredValue::new(children);
    let ctx = expect_context::<PasswordToggleContextValue>();

    view! {
        <Primitive element=html::span as_child=as_child node_ref=node_ref
            attr:aria-hidden="true"
            attr:data-state=move || if ctx.visible.get() { "visible" } else { "hidden" }
        >
            {children.with_value(|c| c.as_ref().map(|c| c()))}
        </Primitive>
    }
}

#[component]
pub fn PasswordToggleFieldSlot(
    #[prop(into, optional)] as_child: MaybeProp<bool>,
    #[prop(into, optional)] node_ref: AnyNodeRef,
    children: TypedChildrenFn<impl IntoView + 'static>,
) -> impl IntoView {
    let children = StoredValue::new(children.into_inner());

    view! {
        <Primitive element=html::div as_child=as_child node_ref=node_ref>
            {children.with_value(|c| c())}
        </Primitive>
    }
}