canonrs-server 0.1.0

CanonRS server-side rendering support
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

use leptos::prelude::*;
use super::select_boundary::{Select, SelectTrigger, SelectValue, SelectContent, SelectItem};
use canonrs_core::meta::{DisabledState, SelectionState};
use canonrs_core::primitives::layout::stack::{StackPrimitive as Stack, StackDirection, StackGap};
use canonrs_core::primitives::layout::container::{ContainerPrimitive as Container, ContainerSize};

#[component]
pub fn SelectShowcasePreview() -> impl IntoView {
    view! {
        <Container size=ContainerSize::Sm>
        <Stack direction=StackDirection::Vertical gap=StackGap::Lg>
            <p data-rs-showcase-preview-anchor="">
                "Selection, visibility and interaction fully governed by structure."
            </p>
            <Select>
                <SelectTrigger>
                    <SelectValue placeholder="Choose a framework...">{""}</SelectValue>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem value="leptos">"Leptos"</SelectItem>
                    <SelectItem value="dioxus">"Dioxus"</SelectItem>
                    <SelectItem value="yew" disabled=DisabledState::Disabled>"Yew (disabled)"</SelectItem>
                </SelectContent>
            </Select>
            <Stack direction=StackDirection::Vertical gap=StackGap::Sm>
                <span data-rs-showcase-preview-label="">"Pre-selected"</span>
                <Select>
                    <SelectTrigger>
                        <SelectValue placeholder="Select size...">"Medium"</SelectValue>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="sm">"Small"</SelectItem>
                        <SelectItem value="md" selected=SelectionState::Selected>"Medium"</SelectItem>
                        <SelectItem value="lg">"Large"</SelectItem>
                    </SelectContent>
                </Select>
            </Stack>
            <Stack direction=StackDirection::Vertical gap=StackGap::Sm>
                <span data-rs-showcase-preview-label="">"With disabled options"</span>
                <Select>
                    <SelectTrigger>
                        <SelectValue placeholder="Select plan...">{""}</SelectValue>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="free">"Free"</SelectItem>
                        <SelectItem value="pro">"Pro"</SelectItem>
                        <SelectItem value="enterprise" disabled=DisabledState::Disabled>"Enterprise (disabled)"</SelectItem>
                        <SelectItem value="custom" disabled=DisabledState::Disabled>"Custom (disabled)"</SelectItem>
                    </SelectContent>
                </Select>
            </Stack>
            <Stack direction=StackDirection::Vertical gap=StackGap::Sm>
                <span data-rs-showcase-preview-label="">"Many options — keyboard nav"</span>
                <Select>
                    <SelectTrigger>
                        <SelectValue placeholder="Select country...">{""}</SelectValue>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="br">"Brazil"</SelectItem>
                        <SelectItem value="us">"United States"</SelectItem>
                        <SelectItem value="de">"Germany"</SelectItem>
                        <SelectItem value="jp">"Japan"</SelectItem>
                        <SelectItem value="fr">"France"</SelectItem>
                        <SelectItem value="uk">"United Kingdom"</SelectItem>
                    </SelectContent>
                </Select>
            </Stack>
            <Stack direction=StackDirection::Vertical gap=StackGap::Sm>
                <span data-rs-showcase-preview-label="">"Disabled"</span>
                <Select disabled=DisabledState::Disabled>
                    <SelectTrigger disabled=DisabledState::Disabled>
                        <SelectValue placeholder="Disabled...">{""}</SelectValue>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="a">"Option A"</SelectItem>
                    </SelectContent>
                </Select>
            </Stack>
        </Stack>
        </Container>
    }
}