singlestage/components/dropdown/
item.rs

1use crate::DropdownMenuContext;
2use leptos::prelude::*;
3
4/// Contains a menu item.
5#[component]
6pub fn DropdownMenuItem(
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    /// Assigns a slot to an element.
91    #[prop(optional, into)]
92    slot: MaybeProp<String>,
93    /// Toggle spellcheck for this input.
94    ///
95    /// Accepted values: "default" | "true" | "false".
96    #[prop(optional, into)]
97    spellcheck: MaybeProp<String>,
98    /// Define CSS to be applied to the element.
99    #[prop(optional, into)]
100    style: MaybeProp<String>,
101    /// Controls how an element behaves when a user navigates using the tab key.
102    #[prop(optional, into)]
103    tabindex: MaybeProp<usize>,
104    /// Describes the content of the element to screen readers.
105    #[prop(optional, into)]
106    title: MaybeProp<String>,
107    /// Defines localization behavior for the element.
108    #[prop(optional, into)]
109    translate: MaybeProp<String>,
110
111    // LI ATTRIBRUTES
112    //
113    /// The current ordinal value of the item.
114    #[prop(optional, into)]
115    value: MaybeProp<String>,
116
117    /// Controls whether the item appears disabled and is clickable.
118    #[prop(optional, into)]
119    disabled: MaybeProp<bool>,
120    /// Set the display variant of the item.
121    ///
122    /// Accepted values: "destructive"
123    #[prop(optional, into)]
124    variant: MaybeProp<String>,
125) -> impl IntoView {
126    let menu = expect_context::<DropdownMenuContext>();
127
128    let global_attrs_1 = view! {
129        <{..}
130            accesskey=move || accesskey.get()
131            autocapitalize=move || autocapitalize.get()
132            autofocus=move || autofocus.get()
133            contenteditable=move || contenteditable.get()
134            dir=move || dir.get()
135            draggable=move || draggable.get()
136            enterkeyhint=move || enterkeyhint.get()
137            exportparts=move || exportparts.get()
138            hidden=move || hidden.get()
139            id=move || id.get()
140            inert=move || inert.get()
141            inputmode=move || inputmode.get()
142            is=move || is.get()
143            itemid=move || itemid.get()
144        />
145    };
146
147    let global_attrs_2 = view! {
148        <{..}
149            itemprop=move || itemprop.get()
150            itemref=move || itemref.get()
151            itemscope=move || itemscope.get()
152            itemtype=move || itemtype.get()
153            lang=move || lang.get()
154            nonce=move || nonce.get()
155            part=move || part.get()
156            popover=move || popover.get()
157            slot=move || slot.get()
158            spellcheck=move || spellcheck.get()
159            style=move || style.get()
160            tabindex=move || tabindex.get()
161            title=move || title.get()
162            translate=move || translate.get()
163        />
164    };
165
166    view! {
167        <li
168            class=move || {
169                format!("singlestage-dropdown-menu-item {}", class.get().unwrap_or_default())
170            }
171            role="menuitem"
172            value=move || value.get()
173
174            {..global_attrs_1}
175            {..global_attrs_2}
176        >
177            <button
178                aria-controls=move || menu.menu_id.get()
179                aria-haspopup="menu"
180                data-disabled=move || disabled.get().unwrap_or_default()
181                data-variant=move || variant.get().unwrap_or_default()
182                popovertarget=move || menu.menu_id.get()
183                popovertargetaction="toggle"
184                type="button"
185            >
186                {children()}
187            </button>
188        </li>
189    }
190}
singlestage/components/dropdown/item.rs

singlestage/components/dropdown/
item.rs
