thaw 0.4.8

An easy to use leptos component library
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

use crate::{Icon, MenuInjection};
use leptos::prelude::*;
use thaw_components::{Fallback, If, OptionComp, Then};
use thaw_utils::{class_list, mount_style};

#[component]
pub fn MenuItem(
    #[prop(optional, into)] class: MaybeProp<String>,
    /// The icon of the menu item.
    #[prop(optional, into)]
    icon: MaybeProp<icondata_core::Icon>,
    /// The value of the menu item.
    #[prop(into)]
    value: Signal<String>,
    /// Whether the menu item is disabled.
    #[prop(optional, into)]
    disabled: Signal<bool>,
    children: Children,
) -> impl IntoView {
    mount_style("menu-item", include_str!("./menu-item.css"));

    let MenuInjection {
        has_icon,
        on_select,
    } = MenuInjection::expect_context();

    if icon.with_untracked(|i| i.is_some()) {
        has_icon.set(true);
    }

    let on_click = move |_| {
        if disabled.get_untracked() {
            return;
        }

        on_select(value.get_untracked());
    };

    view! {
        <div
            class=class_list![
                "thaw-menu-item", ("thaw-menu-item--disabled", move || disabled.get()),
                class
            ]
            on:click=on_click
        >

            <OptionComp value=icon.get() let:icon>
                <Fallback slot>
                    <If cond=has_icon>
                        <Then slot>
                            <span style="width: 18px; margin-right: 8px"></span>
                        </Then>
                    </If>
                </Fallback>

                <Icon icon=icon style="font-size: 18px; margin-right: 8px" />
            </OptionComp>
            <span style="flex-grow: 1">{children()}</span>
        </div>
    }
}