tinkr 0.0.43

Tinkr is a web framework for quickly building full-stack web applications with Leptos.
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 leptos::prelude::*;

#[component]
pub fn ColorPicker(
    #[prop(optional, into)] id: Option<String>,
    #[prop(optional, into)] name: Option<String>,
    #[prop(optional)] value: Option<RwSignal<String>>,
    #[prop(optional)] on_input: Option<Box<dyn Fn(String) + 'static>>,
    #[prop(optional)] on_change: Option<Box<dyn Fn(String) + 'static>>,
    #[prop(optional)] required: Option<bool>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional, into)] class: Option<String>,
) -> impl IntoView {
    let base_class = r#"
        w-full h-10 px-1 py-1 
        border border-neutral-300 dark:border-neutral-600 
        dark:bg-neutral-800 
        rounded-md
        cursor-pointer
    "#;

    let final_class = match class {
        Some(custom_class) => format!("{} {}", base_class, custom_class),
        None => base_class.to_string(),
    };

    view! {
        <input
            type="color"
            id=id
            name=name
            class=final_class
            value=move || value.map(|v| v.get()).unwrap_or_else(|| "#000000".to_string())
            on:input=move |ev| {
                let val = event_target_value(&ev);
                if let Some(v) = value {
                    v.set(val.clone());
                }
                if let Some(handler) = &on_input {
                    handler(val);
                }
            }
            on:change=move |ev| {
                if let Some(handler) = &on_change {
                    handler(event_target_value(&ev));
                }
            }
            required=required.unwrap_or(false)
            disabled=disabled.unwrap_or(false)
        />
    }
}