ui-cli 0.1.1

A CLI to add components to your app.
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

use leptos::prelude::*;
use tw_merge::*;

// TODO 💪 Loading state (demo_use_timeout_fn.rs and demo_button.rs)

#[component]
pub fn Button(
    #[prop(into, optional)] variant: Signal<ButtonVariant>,
    #[prop(into, optional)] size: Signal<ButtonSize>,
    #[prop(into, optional)] class: Signal<String>,
    #[prop(into, optional)] id: Signal<String>,
    #[prop(into, optional)] formmethod: Signal<String>,
    #[prop(into, optional)] value: Signal<String>,
    #[prop(into, optional)] role: Signal<String>,
    #[prop(into, optional)] disabled: Signal<bool>,
    #[prop(into, optional)] r#type: Signal<String>,
    #[prop(into, optional)] style: Option<String>,
    #[prop(into, optional)] onclick: Option<String>,
    // #[prop(into, optional)] popovertarget: Signal<String>,
    // #[prop(into, optional)] popovertargetaction: Signal<String>,

    //
    children: Children,
) -> impl IntoView {
    let class = Memo::new(move |_| {
        let variant = variant.get();
        let size = size.get();
        let button = ButtonClass {
            variant,
            size,
        };
        button.with_class(class.get())
    });

    view! {
        <button
            // 
            class=class
            disabled=disabled
            id=id
            role=role
            type=r#type
            formmethod=formmethod
            value=value
            style=style
            onclick=onclick
        >
            // popovertarget=popovertarget/
            // popovertargetaction=popovertargetaction
            {children()}
        </button>
    }
}

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                        🧬 STRUCT 🧬                         */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

#[derive(TwClass, Default)]
#[tw(
    class = "inline-flex items-center justify-center text-sm font-medium transition-colors rounded-md w-fit whitespace-nowrap focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
)]
pub struct ButtonClass {
    variant: ButtonVariant,
    size: ButtonSize,
}

#[derive(TwVariant)]
pub enum ButtonVariant {
    #[tw(default, class = "bg-primary text-primary-foreground hover:bg-primary/90")]
    Default,
    #[tw(class = "bg-secondary text-secondary-foreground hover:bg-secondary/80")]
    Secondary,
    #[tw(class = "bg-destructive text-destructive-foreground hover:bg-destructive/90")]
    Destructive,
    #[tw(class = "bg-warning text-warning-foreground hover:bg-warning/90")]
    Warning,
    #[tw(class = "bg-success text-success-foreground hover:bg-success/90")]
    Success,
    #[tw(class = "border bg-background border-input hover:bg-accent hover:text-accent-foreground")]
    Outline,
    #[tw(class = "bg-transparent border border-zinc-200 text-muted-foreground")]
    Bordered, // TODO. Improve this variant.
    #[tw(class = "hover:bg-accent hover:text-accent-foreground")]
    Ghost,
    #[tw(class = "underline-offset-4 hover:underline")]
    Link,
}

#[derive(TwVariant)]
pub enum ButtonSize {
    #[tw(default, class = "px-4 py-2 h-9")]
    Default,
    #[tw(class = "h-8 px-3")]
    Sm,
    #[tw(class = "h-10 px-8")]
    Lg,
    #[tw(class = "size-8")]
    Icon,
    #[tw(class = "px-6 py-3 rounded-[24px]")]
    Mobile,
}