atproto blogging
nonbinary.computer
1use dioxus::prelude::*;
2use dioxus_primitives::select::{
3 self, SelectGroupLabelProps, SelectGroupProps, SelectListProps, SelectOptionProps, SelectProps,
4 SelectTriggerProps, SelectValueProps,
5};
6
7#[component]
8pub fn Select<T: Clone + PartialEq + 'static>(props: SelectProps<T>) -> Element {
9 rsx! {
10 document::Link { rel: "stylesheet", href: asset!("./style.css") }
11 select::Select {
12 class: "select",
13 value: props.value,
14 default_value: props.default_value,
15 on_value_change: props.on_value_change,
16 disabled: props.disabled,
17 name: props.name,
18 placeholder: props.placeholder,
19 roving_loop: props.roving_loop,
20 typeahead_timeout: props.typeahead_timeout,
21 attributes: props.attributes,
22 {props.children}
23 }
24 }
25}
26
27#[component]
28pub fn SelectTrigger(props: SelectTriggerProps) -> Element {
29 rsx! {
30 select::SelectTrigger { class: "select-trigger", attributes: props.attributes,
31 {props.children}
32 svg {
33 class: "select-expand-icon",
34 view_box: "0 0 24 24",
35 xmlns: "http://www.w3.org/2000/svg",
36 polyline { points: "6 9 12 15 18 9" }
37 }
38 }
39 }
40}
41
42#[component]
43pub fn SelectValue(props: SelectValueProps) -> Element {
44 rsx! {
45 select::SelectValue { attributes: props.attributes }
46 }
47}
48
49#[component]
50pub fn SelectList(props: SelectListProps) -> Element {
51 rsx! {
52 select::SelectList {
53 class: "select-list",
54 id: props.id,
55 attributes: props.attributes,
56 {props.children}
57 }
58 }
59}
60
61#[component]
62pub fn SelectGroup(props: SelectGroupProps) -> Element {
63 rsx! {
64 select::SelectGroup {
65 class: "select-group",
66 disabled: props.disabled,
67 id: props.id,
68 attributes: props.attributes,
69 {props.children}
70 }
71 }
72}
73
74#[component]
75pub fn SelectGroupLabel(props: SelectGroupLabelProps) -> Element {
76 rsx! {
77 select::SelectGroupLabel {
78 class: "select-group-label",
79 id: props.id,
80 attributes: props.attributes,
81 {props.children}
82 }
83 }
84}
85
86#[component]
87pub fn SelectOption<T: Clone + PartialEq + 'static>(props: SelectOptionProps<T>) -> Element {
88 rsx! {
89 select::SelectOption::<T> {
90 class: "select-option",
91 value: props.value,
92 text_value: props.text_value,
93 disabled: props.disabled,
94 id: props.id,
95 index: props.index,
96 aria_label: props.aria_label,
97 aria_roledescription: props.aria_roledescription,
98 attributes: props.attributes,
99 {props.children}
100 }
101 }
102}
103
104#[component]
105pub fn SelectItemIndicator() -> Element {
106 rsx! {
107 select::SelectItemIndicator {
108 svg {
109 class: "select-check-icon",
110 view_box: "0 0 24 24",
111 xmlns: "http://www.w3.org/2000/svg",
112 path { d: "M5 13l4 4L19 7" }
113 }
114 }
115 }
116}