leptodon 0.1.0

your Leptos UI toolkit for data science
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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

// Leptodon
//
// Copyright (C) 2025-2026 Open Analytics NV
//
// ===========================================================================
//
// This program is free software: you can redistribute it and/or modify it
// under the terms of the Apache License as published by The Apache Software
// Foundation, either version 2 of the License, or (at your option) any later
// version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
// FOR A PARTICULAR PURPOSE. See the Apache License for more details.
//
// You should have received a copy of the Apache License along with this program.
// If not, see <http://www.apache.org/licenses/>
use std::marker::PhantomData;

use leptodon_proc_macros::generate_docs;
use leptos::context::Provider;
use leptos::prelude::{ClassAttribute, ElementChild, Get, IntoAny, MaybeProp, RwSignal, Show};
use leptos::{IntoView, component, prelude::Children, view};

#[derive(Clone, Copy)]
pub struct FormInputContext<E: Clone + Send + Sync + std::fmt::Display + 'static> {
    pub required: bool,
    pub label: MaybeProp<String>,
    pub feedback: RwSignal<Option<E>>,
}

#[generate_docs]
/// Use this to add labels, required-indicator and automatic feedback to form inputs (crate::input, crate::select, crate::radio).
#[component]
pub fn FormInput<E>(
    #[prop(into)] label: String,
    required: bool,
    children: Children,
    #[prop(default = PhantomData)] _phantom: PhantomData<E>,
) -> impl IntoView
where
    E: Clone + Send + Sync + std::fmt::Display + 'static,
{
    view! {
        <MaybeLabelledFormInput<E> label required children />
    }
}

// Internal function: when an input field like password need to display an eye next to itself, the GenericInput can no longer simply display feedback under itself.
// For that reason the password input wraps itself internally with the FormInput mechanism even when unlabeled.
#[component]
pub(crate) fn MaybeLabelledFormInput<E>(
    #[prop(optional, into)] label: MaybeProp<String>,
    required: bool,
    children: Children,
    #[prop(default = PhantomData)] _phantom: PhantomData<E>,
) -> impl IntoView
where
    E: Clone + Send + Sync + std::fmt::Display + 'static,
{
    let feedback: RwSignal<Option<E>> = RwSignal::new(None);
    let form_ctx = FormInputContext {
        required,
        label,
        feedback,
    };
    view! {
        <div class="mb-2 flex flex-col">
            <Label label required>
                <Provider<_, _> value=form_ctx>
                    {children()}
                </Provider<_, _>>
            </Label>

            // Feedback
            <Show
                when=move || feedback.get().is_some()
                fallback=|| ()
            >
                <span class="text-red-500">{
                    move || feedback.get().unwrap().to_string()
                }</span>
            </Show>
        </div>
    }
}

/// A label component, shown above its children.
#[component]
pub fn Label(
    #[prop(optional, into)] label: MaybeProp<String>,
    /// Displays a red star in front of the label to indicate an input is required to be completed.
    required: bool,
    /// The labeled element
    children: Children,
) -> impl IntoView {
    if let Some(label) = label.get() {
        view! {
            <label class="block">
                <div class="text-sm font-semibold text-heading text-gray-900 dark:text-gray-100">
                    <RequiredStar required/>
                    {label}
                </div>
                {children()}
            </label>
        }
        .into_any()
    } else {
        view! { {children()} }.into_any()
    }
}

/// Style helper
/// Used for inline labels behind checkbox and toggle.
/// Provide the label via [children], caller is expected to wrap this and the input in a <label>.
#[component]
pub fn PostfixLabelStyle(required: bool, children: Children) -> impl IntoView {
    view! {
        <span class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-100"><RequiredStar required=required/>{children()}</span>
    }
}

#[component]
pub fn RequiredStar(required: bool) -> impl IntoView {
    view! {
        <Show
            when=move || required
            fallback=|| ()
        >
            <span class="text-red-500">*</span>
        </Show>
    }
}