singlestage/components/select/
item.rs

1use super::SelectContext;
2use crate::Reactive;
3use leptos::prelude::*;
4
5#[component]
6pub fn SelectItem(
7    children: Children,
8
9    // GLOBAL ATTRIBUTES
10    //
11    /// A space separated list of keys to focus this element. The first key available on the user's
12    /// keyboard layout is used.
13    #[prop(optional, into)]
14    accesskey: MaybeProp<String>,
15    /// Sets whether the input value should be capitalized and how. If a parent `<form>` has
16    /// `autocapitalize` rules set, it will override any rules set here.
17    ///
18    /// Accepted values: "none" or "off" | "sentences" or "on" | "words" | "characters".
19    #[prop(optional, into)]
20    autocapitalize: MaybeProp<String>,
21    /// Grabs focus once the page has finished loading. Only one element on the page can be focused
22    /// at a time.
23    #[prop(optional, into)]
24    autofocus: MaybeProp<bool>,
25    /// Apply classes to the element.
26    #[prop(optional, into)]
27    class: MaybeProp<String>,
28    /// Allows client-side editing of the element by the user.
29    ///
30    /// Accepted values: "true" | "false" | "plaintext-only"
31    #[prop(optional, into)]
32    contenteditable: MaybeProp<String>,
33    /// Indicate directionality of the element's text.
34    ///
35    /// Accepted values: "ltr" | "rtl" | "auto"
36    #[prop(optional, into)]
37    dir: MaybeProp<String>,
38    /// Toggle whether the element can be dragged.
39    #[prop(optional, into)]
40    draggable: MaybeProp<bool>,
41    /// Modifies the appearance of the enter key on virtual keyboards.
42    #[prop(optional, into)]
43    enterkeyhint: MaybeProp<String>,
44    /// Expose elements in the shadow DOM to be manipulated by the DOM.
45    #[prop(optional, into)]
46    exportparts: MaybeProp<String>,
47    /// Controls hidden status of the element.
48    #[prop(optional, into)]
49    hidden: MaybeProp<String>,
50    /// Set the id of this element.
51    #[prop(optional, into)]
52    id: MaybeProp<String>,
53    /// Toggle if the browser reacts to input events from this element.
54    #[prop(optional, into)]
55    inert: MaybeProp<bool>,
56    /// Hints to the browser of what type of virtual keyboard to display when editing this element
57    /// or its children.
58    #[prop(optional, into)]
59    inputmode: MaybeProp<String>,
60    /// Used to render a standard element as a custom element.
61    #[prop(optional, into)]
62    is: MaybeProp<String>,
63    /// Unique global identifier of an item.
64    #[prop(optional, into)]
65    itemid: MaybeProp<String>,
66    /// Used to add properties to an item.
67    #[prop(optional, into)]
68    itemprop: MaybeProp<String>,
69    /// Used to associate an item with a related non-parent element that's using `itemscope`.
70    #[prop(optional, into)]
71    itemref: MaybeProp<String>,
72    /// Used to declare that children elements are related to a particular item.
73    #[prop(optional, into)]
74    itemscope: MaybeProp<String>,
75    /// URL of data used to define `itemprops`.
76    #[prop(optional, into)]
77    itemtype: MaybeProp<String>,
78    /// Defines the language of an element.
79    #[prop(optional, into)]
80    lang: MaybeProp<String>,
81    /// Cryptographic "number used once".
82    #[prop(optional, into)]
83    nonce: MaybeProp<String>,
84    /// List of the part names of the element.
85    #[prop(optional, into)]
86    part: MaybeProp<String>,
87    /// Designate an element as a popover element.
88    #[prop(optional, into)]
89    popover: MaybeProp<String>,
90    /// Define the semantic meaning of content.
91    #[prop(optional, into)]
92    role: MaybeProp<String>,
93    /// Assigns a slot to an element.
94    #[prop(optional, into)]
95    slot: MaybeProp<String>,
96    /// Toggle spellcheck for this input.
97    ///
98    /// Accepted values: "default" | "true" | "false".
99    #[prop(optional, into)]
100    spellcheck: MaybeProp<String>,
101    /// Define CSS to be applied to the element.
102    #[prop(optional, into)]
103    style: MaybeProp<String>,
104    /// Controls how an element behaves when a user navigates using the tab key.
105    #[prop(optional, into)]
106    tabindex: MaybeProp<usize>,
107    /// Describes the content of the element to screen readers.
108    #[prop(optional, into)]
109    title: MaybeProp<String>,
110    /// Defines localization behavior for the element.
111    #[prop(optional, into)]
112    translate: MaybeProp<String>,
113
114    /// Set whether or not this item appears disabled and is checkable.
115    #[prop(optional, into)]
116    disabled: MaybeProp<bool>,
117    /// Set a label describing the meaning of this item.
118    #[prop(optional, into)]
119    label: MaybeProp<String>,
120    /// Set if this item is initially selected.
121    #[prop(optional, into)]
122    selected: Reactive<bool>,
123    /// Set the value of this item to be submitted with form data.
124    #[prop(optional, into)]
125    value: MaybeProp<String>,
126) -> impl IntoView {
127    let select_context = expect_context::<SelectContext>();
128
129    if let Some(value) = value.get_untracked() {
130        selected.set(value == select_context.value.get_untracked())
131    };
132
133    Effect::new(move || {
134        if let Some(value) = value.get() {
135            selected.set(value == select_context.value.get())
136        }
137    });
138
139    let global_attrs_1 = view! {
140        <{..}
141            accesskey=move || accesskey.get()
142            autocapitalize=move || autocapitalize.get()
143            autofocus=move || autofocus.get()
144            class=move || class.get()
145            contenteditable=move || contenteditable.get()
146            dir=move || dir.get()
147            draggable=move || draggable.get()
148            enterkeyhint=move || enterkeyhint.get()
149            exportparts=move || exportparts.get()
150            hidden=move || hidden.get()
151            id=move || id.get()
152            inert=move || inert.get()
153            inputmode=move || inputmode.get()
154            is=move || is.get()
155            itemid=move || itemid.get()
156        />
157    };
158
159    let global_attrs_2 = view! {
160        <{..}
161            itemprop=move || itemprop.get()
162            itemref=move || itemref.get()
163            itemscope=move || itemscope.get()
164            itemtype=move || itemtype.get()
165            lang=move || lang.get()
166            nonce=move || nonce.get()
167            part=move || part.get()
168            popover=move || popover.get()
169            role=move || role.get()
170            slot=move || slot.get()
171            spellcheck=move || spellcheck.get()
172            style=move || style.get()
173            tabindex=move || tabindex.get()
174            title=move || title.get()
175            translate=move || translate.get()
176        />
177    };
178
179    view! {
180        <option
181            disabled=move || disabled.get()
182            label=move || label.get()
183            selected=move || selected.get()
184            value=move || value.get()
185
186            {..global_attrs_1}
187            {..global_attrs_2}
188        >
189            {children()}
190        </option>
191    }
192}
singlestage/components/select/item.rs

singlestage/components/select/
item.rs
