singlestage/components/empty/
description.rs

1use leptos::prelude::*;
2
3/// Use the EmptyDescription component to display the description of the empty state.
4#[component]
5pub fn EmptyDescription(
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    /// Assigns a slot to an element.
90    #[prop(optional, into)]
91    slot: MaybeProp<String>,
92    /// Toggle spellcheck for this input.
93    ///
94    /// Accepted values: "default" | "true" | "false".
95    #[prop(optional, into)]
96    spellcheck: MaybeProp<String>,
97    /// Define CSS to be applied to the element.
98    #[prop(optional, into)]
99    style: MaybeProp<String>,
100    /// Controls how an element behaves when a user navigates using the tab key.
101    #[prop(optional, into)]
102    tabindex: MaybeProp<usize>,
103    /// Describes the content of the element to screen readers.
104    #[prop(optional, into)]
105    title: MaybeProp<String>,
106    /// Defines localization behavior for the element.
107    #[prop(optional, into)]
108    translate: MaybeProp<String>,
109) -> impl IntoView {
110    let global_attrs_1 = view! {
111        <{..}
112            accesskey=move || accesskey.get()
113            autocapitalize=move || autocapitalize.get()
114            autofocus=move || autofocus.get()
115            contenteditable=move || contenteditable.get()
116            dir=move || dir.get()
117            draggable=move || draggable.get()
118            enterkeyhint=move || enterkeyhint.get()
119            exportparts=move || exportparts.get()
120            hidden=move || hidden.get()
121            id=move || id.get()
122            inert=move || inert.get()
123            inputmode=move || inputmode.get()
124            is=move || is.get()
125            itemid=move || itemid.get()
126        />
127    };
128
129    let global_attrs_2 = view! {
130        <{..}
131            itemprop=move || itemprop.get()
132            itemref=move || itemref.get()
133            itemscope=move || itemscope.get()
134            itemtype=move || itemtype.get()
135            lang=move || lang.get()
136            nonce=move || nonce.get()
137            part=move || part.get()
138            popover=move || popover.get()
139            slot=move || slot.get()
140            spellcheck=move || spellcheck.get()
141            style=move || style.get()
142            tabindex=move || tabindex.get()
143            title=move || title.get()
144            translate=move || translate.get()
145        />
146    };
147
148    view! {
149        <div
150            class=move || {
151                format!("singlestage-empty-description {}", class.get().unwrap_or_default())
152            }
153
154            {..global_attrs_1}
155            {..global_attrs_2}
156        >
157            {children()}
158        </div>
159    }
160}