singlestage/components/kbd/
group.rs

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

singlestage/components/kbd/
group.rs
