leptonic 0.5.0

The Leptos component library. 
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

use leptos::*;

use crate::{prelude::*, toggle::ToggleProps, toggle::ToggleSize};

/// Leptonic's default themes. You may want to create your own theme-defining-type if you have additional or differently named themes.
#[derive(Default, Debug, PartialEq, Eq, Clone, Copy, serde::Serialize, serde::Deserialize)]
pub enum LeptonicTheme {
    #[default]
    Light,
    Dark,
}

impl Theme for LeptonicTheme {
    fn name(&self) -> &'static str {
        match self {
            Self::Light => "light",
            Self::Dark => "dark",
        }
    }

    fn icon(&self) -> icondata::Icon {
        match self {
            Self::Light => icondata::BsSun,
            Self::Dark => icondata::BsMoon,
        }
    }
}

pub trait Theme:
    Default + PartialEq + Clone + Copy + serde::Serialize + serde::de::DeserializeOwned
{
    fn name(&self) -> &'static str;
    fn icon(&self) -> icondata::Icon;
}

#[derive(Debug, Clone, Copy)]
pub struct ThemeContext<T: Theme + 'static> {
    theme: ReadSignal<T>,
    set_theme: WriteSignal<T>,
}

#[component]
pub fn ThemeProvider<T>(
    #[prop(into, optional)] theme: Option<(ReadSignal<T>, WriteSignal<T>)>,
    children: Children,
) -> impl IntoView
where
    T: Theme + 'static,
{
    let (theme, set_theme) = theme.unwrap_or_else(|| create_signal(T::default()));

    provide_context(ThemeContext { theme, set_theme });

    view! {
        <leptonic-theme-provider
            data-theme=move || theme.get().name()
            style="height: 100%; width: auto; display: contents;"
        >
            { children() }
        </leptonic-theme-provider>
    }
}

#[component]
pub fn ThemeToggle<T>(
    off: T,
    on: T,
    #[prop(optional)] variant: ToggleVariant,
    #[prop(into, optional)] class: Option<AttributeValue>,
    #[prop(into, optional)] style: Option<AttributeValue>,
) -> impl IntoView
where
    T: Theme + 'static,
{
    let theme_context = use_context::<ThemeContext<T>>()
        .expect("<ThemeToggle/> component should be nested within a <ThemeProvider/>.");

    let toggle = Toggle(ToggleProps {
        state: MaybeSignal::derive(move || theme_context.theme.get() == on),
        set_state: Some(
            Callback::new(move |val: bool| {
                theme_context.set_theme.update(|current| match val {
                    true => *current = on,
                    false => *current = off,
                });
            })
            .into(),
        ),
        active: OptionalMaybeSignal(None),
        disabled: OptionalMaybeSignal(None),
        id: None,
        class: None,
        style: None,
        size: ToggleSize::default(),
        variant,
        icons: Some(ToggleIcons {
            on: on.icon(),
            off: off.icon(),
        }),
    });

    view! {
        <leptonic-theme-toggle class=class style=style>
            { toggle }
        </leptonic-theme-toggle>
    }
}