soma-ui 0.1.1

A Leptos 0.8 component library: 160+ accessible UI components, blocks, charts, and a ChartDB-style schema diagram — with a prebuilt stylesheet.
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

use crate::components::shared::{disabled_cls, CONTROL_MOTION, FOCUS_RING, PRESSABLE};
use crate::icons::{icondata, Icon};
use leptos::prelude::*;
use leptos::web_sys;

#[component]
pub fn Checkbox(
    checked: RwSignal<bool>,
    #[prop(default = false)] disabled: bool,
    #[prop(default = String::new())] class: String,
) -> impl IntoView {
    let on_toggle = move |_| {
        if !disabled {
            checked.update(|v| *v = !*v);
        }
    };
    let on_key = move |e: web_sys::KeyboardEvent| {
        if e.key() == " " {
            e.prevent_default();
            if !disabled {
                checked.update(|v| *v = !*v);
            }
        }
    };
    let disabled_class = if disabled {
        disabled_cls(true)
    } else {
        "cursor-pointer"
    };
    let combined = format!(
        "relative flex h-5 w-5 items-center justify-center rounded border hover:border-ring/60 {} {} {} {} {}",
        CONTROL_MOTION, PRESSABLE, FOCUS_RING, disabled_class, class
    );
    view! {
        <button
            role="checkbox"
            aria-checked=move || if checked.get() { "true" } else { "false" }
            tabindex="0"
            class=combined
            class:bg-primary=move || checked.get()
            class:border-primary=move || checked.get()
            class:border-input=move || !checked.get()
            on:click=on_toggle
            on:keydown=on_key
        >
            <Show when=move || checked.get()>
                <Icon icon=Signal::derive(|| icondata::LuCheck) width="12" height="12" attr:class="text-primary-foreground" />
            </Show>
        </button>
    }
}