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
52

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

#[component]
pub fn Switch(
    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 inline-flex h-6 w-11 items-center rounded-full {} {} {} {}",
        CONTROL_MOTION, FOCUS_RING, disabled_class, class
    );
    view! {
        <button
            role="switch"
            aria-checked=move || if checked.get() { "true" } else { "false" }
            tabindex="0"
            class=combined
            class:bg-primary=move || checked.get()
            class:bg-input=move || !checked.get()
            on:click=on_toggle
            on:keydown=on_key
        >
            <span
                class="absolute h-5 w-5 rounded-full bg-white shadow-elev-sm transition-transform"
                class:translate-x-5=move || checked.get()
                // ponytail: using inline style to handle translate-x-0.5 (dot prevents class: directive)
                style=move || if !checked.get() { "transform: translateX(0.125rem)" } else { "" }
            />
        </button>
    }
}