From 46af07746c90f9118875d11338d276b61ed99913 Mon Sep 17 00:00:00 2001 From: kandrelczyk Date: Wed, 20 Dec 2023 06:44:30 +0100 Subject: [PATCH] Feat/class param continued (#55) * Add class param to components * Add class param to all components * Add class param to all components * fix: Failed to run the SSR mode * style: cargo fmt and leptosfmt --------- Co-authored-by: Cristobal Andrada Co-authored-by: luoxiao --- demo/src/pages/badge/mod.rs | 6 +++++ demo/src/pages/breadcrumb/mod.rs | 12 ++++++++++ demo/src/pages/calendar/mod.rs | 6 +++++ demo/src/pages/card/mod.rs | 6 +++++ demo/src/pages/checkbox/mod.rs | 6 +++++ demo/src/pages/color_picker/mod.rs | 6 +++++ demo/src/pages/divider/mod.rs | 19 +++++++++++++++ demo/src/pages/grid/mod.rs | 37 ++++++++++++++++++++++++++++++ demo/src/pages/image/mod.rs | 6 +++++ demo/src/pages/input/mod.rs | 6 +++++ demo/src/pages/input_number/mod.rs | 6 +++++ demo/src/pages/menu/mod.rs | 22 +++++++++++++++--- demo/src/pages/nav_bar/mod.rs | 6 +++++ demo/src/pages/radio/mod.rs | 6 +++++ demo/src/pages/select/mod.rs | 6 +++++ demo/src/pages/slider/mod.rs | 6 +++++ demo/src/pages/space/mod.rs | 6 +++++ demo/src/pages/switch/mod.rs | 6 +++++ demo/src/pages/table/mod.rs | 6 +++++ demo/src/pages/tabs/mod.rs | 12 ++++++++++ demo/src/pages/tag/mod.rs | 6 +++++ demo/src/pages/time_picker/mod.rs | 6 +++++ demo/src/pages/typography/mod.rs | 6 +++++ src/badge/badge.css | 1 + src/badge/mod.rs | 13 ++++++++++- src/breadcrumb/breadcrumb_item.rs | 14 +++++++++-- src/breadcrumb/mod.rs | 16 +++++++++++-- src/calendar/mod.rs | 17 +++++++++++--- src/card/card.css | 2 +- src/card/mod.rs | 13 +++++++++-- src/checkbox/checkbox_item.rs | 7 +++++- src/checkbox/mod.rs | 14 ++++++++++- src/color_picker/mod.rs | 21 ++++++++++++++--- src/divider/mod.rs | 9 +++++--- src/grid/grid_item.rs | 8 ++++++- src/grid/mod.rs | 7 +++++- src/image/mod.rs | 9 ++++++++ src/input/mod.rs | 9 +++++++- src/input_number/mod.rs | 3 ++- src/menu/menu_group.rs | 22 +++++++++++++++--- src/menu/menu_item.rs | 13 ++++++++++- src/menu/mod.rs | 14 +++++++++-- src/mobile/nav_bar/mod.rs | 13 +++++++++-- src/radio/mod.rs | 17 ++++++++++++-- src/select/mod.rs | 7 +++++- src/slider/mod.rs | 20 ++++++++++++++-- src/space/mod.rs | 8 ++++++- src/switch/mod.rs | 16 +++++++++++-- src/table/mod.rs | 12 +++++++++- src/tabs/mod.rs | 20 ++++++++++++---- src/tabs/tab.rs | 13 +++++++++-- src/tag/mod.rs | 12 ++++++++-- src/time_picker/mod.rs | 7 ++++-- src/typography/text.rs | 29 +++++++++++++++++++---- 54 files changed, 539 insertions(+), 57 deletions(-) diff --git a/demo/src/pages/badge/mod.rs b/demo/src/pages/badge/mod.rs index 60b5924..a45d93b 100644 --- a/demo/src/pages/badge/mod.rs +++ b/demo/src/pages/badge/mod.rs @@ -107,6 +107,12 @@ pub fn BadgePage() -> impl IntoView { "Badge's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the badge element." + diff --git a/demo/src/pages/breadcrumb/mod.rs b/demo/src/pages/breadcrumb/mod.rs index e347d8c..98870e6 100644 --- a/demo/src/pages/breadcrumb/mod.rs +++ b/demo/src/pages/breadcrumb/mod.rs @@ -86,6 +86,12 @@ pub fn BreadcrumbPage() -> impl IntoView { "Breadcrumb's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the breadcrumb element." +

"BreadcrumbItem Props"

@@ -105,6 +111,12 @@ pub fn BreadcrumbPage() -> impl IntoView { "BreadcrumbItem's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the breadcrumb link element." + diff --git a/demo/src/pages/calendar/mod.rs b/demo/src/pages/calendar/mod.rs index 595a9c2..a256d34 100644 --- a/demo/src/pages/calendar/mod.rs +++ b/demo/src/pages/calendar/mod.rs @@ -50,6 +50,12 @@ pub fn CalendarPage() -> impl IntoView { + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the calendar element." + diff --git a/demo/src/pages/card/mod.rs b/demo/src/pages/card/mod.rs index 276fb3e..98a6b7c 100644 --- a/demo/src/pages/card/mod.rs +++ b/demo/src/pages/card/mod.rs @@ -84,6 +84,12 @@ pub fn CardPage() -> impl IntoView { "Card's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the card element." +

"Card Slots"

diff --git a/demo/src/pages/checkbox/mod.rs b/demo/src/pages/checkbox/mod.rs index 1fb699c..957d91a 100644 --- a/demo/src/pages/checkbox/mod.rs +++ b/demo/src/pages/checkbox/mod.rs @@ -106,6 +106,12 @@ pub fn CheckboxPage() -> impl IntoView { "CheckboxGroup's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the checkbox element." +

"CheckboxItem Props"

diff --git a/demo/src/pages/color_picker/mod.rs b/demo/src/pages/color_picker/mod.rs index 257bcd3..ff9ec57 100644 --- a/demo/src/pages/color_picker/mod.rs +++ b/demo/src/pages/color_picker/mod.rs @@ -44,6 +44,12 @@ pub fn ColorPickerPage() -> impl IntoView { "RwSignal" "Value of the picker." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the color picker element." + diff --git a/demo/src/pages/divider/mod.rs b/demo/src/pages/divider/mod.rs index f588e51..e0eb907 100644 --- a/demo/src/pages/divider/mod.rs +++ b/demo/src/pages/divider/mod.rs @@ -23,6 +23,25 @@ pub fn DividerPage() -> impl IntoView { +

"Divider Props"

+ + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"class""MaybeSignal""Default::default()""Addtional classes for the divider element."
} } diff --git a/demo/src/pages/grid/mod.rs b/demo/src/pages/grid/mod.rs index da508f2..1d809a1 100644 --- a/demo/src/pages/grid/mod.rs +++ b/demo/src/pages/grid/mod.rs @@ -142,6 +142,43 @@ pub fn GridPage() -> impl IntoView { "0" "Vertical gap." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the grid element." + + + +

"GridItem Props"

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"column""MaybeSignal""1""Number of columns this grid item will occupy."
"offset""MaybeSignal""0""Horizontal offset."
"class""MaybeSignal""Default::default()""Addtional classes for the grid item element."
diff --git a/demo/src/pages/image/mod.rs b/demo/src/pages/image/mod.rs index 1b6e5a9..75c18ea 100644 --- a/demo/src/pages/image/mod.rs +++ b/demo/src/pages/image/mod.rs @@ -70,6 +70,12 @@ pub fn ImagePage() -> impl IntoView { "Default::default()" "Object-fit type of the image in the container." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the image element." + diff --git a/demo/src/pages/input/mod.rs b/demo/src/pages/input/mod.rs index 8641034..e3805f6 100644 --- a/demo/src/pages/input/mod.rs +++ b/demo/src/pages/input/mod.rs @@ -213,6 +213,12 @@ pub fn InputPage() -> impl IntoView { "None" "Callback triggered when the input is blurred." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the input element." +

"Input Slots"

diff --git a/demo/src/pages/input_number/mod.rs b/demo/src/pages/input_number/mod.rs index a882411..db15093 100644 --- a/demo/src/pages/input_number/mod.rs +++ b/demo/src/pages/input_number/mod.rs @@ -108,6 +108,12 @@ pub fn InputNumberPage() -> impl IntoView { "false" "Whether the input is invalid." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the input element." +

"T impl"

diff --git a/demo/src/pages/menu/mod.rs b/demo/src/pages/menu/mod.rs index f05c041..30f2387 100644 --- a/demo/src/pages/menu/mod.rs +++ b/demo/src/pages/menu/mod.rs @@ -15,9 +15,7 @@ pub fn MenuPage() -> impl IntoView { - - {highlight_str!( - r#" +{highlight_str!( r#" let value = create_rw_signal(String::from("o")); @@ -53,6 +51,12 @@ pub fn MenuPage() -> impl IntoView { "Menu's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the menu element." +

"MenuGroup Props"

@@ -78,6 +82,12 @@ pub fn MenuPage() -> impl IntoView { "MenuGroup's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the menu group element." +

"MenuItem Props"

@@ -103,6 +113,12 @@ pub fn MenuPage() -> impl IntoView { "Default::default()" "The indentifier of the menu item." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the menu item element." + diff --git a/demo/src/pages/nav_bar/mod.rs b/demo/src/pages/nav_bar/mod.rs index cf1652f..70e7735 100644 --- a/demo/src/pages/nav_bar/mod.rs +++ b/demo/src/pages/nav_bar/mod.rs @@ -89,6 +89,12 @@ pub fn NavBarPage() -> impl IntoView { "Default::default()" "NavBar right click." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the NavBar element." + diff --git a/demo/src/pages/radio/mod.rs b/demo/src/pages/radio/mod.rs index bd031ae..e8711ff 100644 --- a/demo/src/pages/radio/mod.rs +++ b/demo/src/pages/radio/mod.rs @@ -51,6 +51,12 @@ pub fn RadioPage() -> impl IntoView { "Radio's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the radio element." + diff --git a/demo/src/pages/select/mod.rs b/demo/src/pages/select/mod.rs index 61b9845..cfce1bf 100644 --- a/demo/src/pages/select/mod.rs +++ b/demo/src/pages/select/mod.rs @@ -56,6 +56,12 @@ pub fn SelectPage() -> impl IntoView { "vec![]" "Options that can be selected." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the select element." + diff --git a/demo/src/pages/slider/mod.rs b/demo/src/pages/slider/mod.rs index 493beb6..91835f9 100644 --- a/demo/src/pages/slider/mod.rs +++ b/demo/src/pages/slider/mod.rs @@ -114,6 +114,12 @@ pub fn SliderPage() -> impl IntoView { "Slider labels." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the slider element." +

"SliderLabel Props"

diff --git a/demo/src/pages/space/mod.rs b/demo/src/pages/space/mod.rs index 2db6653..da07c37 100644 --- a/demo/src/pages/space/mod.rs +++ b/demo/src/pages/space/mod.rs @@ -112,6 +112,12 @@ pub fn SpacePage() -> impl IntoView { "Space's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the space element." + diff --git a/demo/src/pages/switch/mod.rs b/demo/src/pages/switch/mod.rs index 2f5d4c6..6829192 100644 --- a/demo/src/pages/switch/mod.rs +++ b/demo/src/pages/switch/mod.rs @@ -42,6 +42,12 @@ pub fn SwitchPage() -> impl IntoView { "false" "Swith's value." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the switch element." + diff --git a/demo/src/pages/table/mod.rs b/demo/src/pages/table/mod.rs index 79c6e2c..d335184 100644 --- a/demo/src/pages/table/mod.rs +++ b/demo/src/pages/table/mod.rs @@ -96,6 +96,12 @@ pub fn TablePage() -> impl IntoView { "Table's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the table element." + diff --git a/demo/src/pages/tabs/mod.rs b/demo/src/pages/tabs/mod.rs index 30e33cc..d6a36e5 100644 --- a/demo/src/pages/tabs/mod.rs +++ b/demo/src/pages/tabs/mod.rs @@ -69,6 +69,12 @@ pub fn TabsPage() -> impl IntoView { "Tabs content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the tabs element." +

"Tab Props"

@@ -106,6 +112,12 @@ pub fn TabsPage() -> impl IntoView { "Tab's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the tab element." + diff --git a/demo/src/pages/tag/mod.rs b/demo/src/pages/tag/mod.rs index 8164ef8..f3b7fb2 100644 --- a/demo/src/pages/tag/mod.rs +++ b/demo/src/pages/tag/mod.rs @@ -62,6 +62,12 @@ pub fn TagPage() -> impl IntoView { "Tag's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the tag element." + diff --git a/demo/src/pages/time_picker/mod.rs b/demo/src/pages/time_picker/mod.rs index dee2dfa..96a7866 100644 --- a/demo/src/pages/time_picker/mod.rs +++ b/demo/src/pages/time_picker/mod.rs @@ -47,6 +47,12 @@ pub fn TimePickerPage() -> impl IntoView { + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the time picker element." + diff --git a/demo/src/pages/typography/mod.rs b/demo/src/pages/typography/mod.rs index 5b6762b..01f2816 100644 --- a/demo/src/pages/typography/mod.rs +++ b/demo/src/pages/typography/mod.rs @@ -60,6 +60,12 @@ pub fn TypographyPage() -> impl IntoView { "Text's content." + + "class" + "MaybeSignal" + "Default::default()" + "Addtional classes for the text element." + diff --git a/src/badge/badge.css b/src/badge/badge.css index ba241da..e245bbc 100644 --- a/src/badge/badge.css +++ b/src/badge/badge.css @@ -6,6 +6,7 @@ position: absolute; color: var(--thaw-font-color); background-color: var(--thaw-background-color); + z-index: 10; } .thaw-badge__sup--value { top: -9px; diff --git a/src/badge/mod.rs b/src/badge/mod.rs index 3c100cf..1874956 100644 --- a/src/badge/mod.rs +++ b/src/badge/mod.rs @@ -1,4 +1,11 @@ -use crate::{theme::use_theme, utils::mount_style, Theme}; +#[cfg(not(feature = "ssr"))] +use crate::utils::dyn_classes; + +use crate::{ + theme::use_theme, + utils::{mount_style, ssr_class}, + Theme, +}; use leptos::*; #[derive(Default, Clone)] @@ -25,6 +32,7 @@ pub fn Badge( #[prop(default = MaybeSignal::Static(u32::MAX), into)] max: MaybeSignal, #[prop(optional, into)] variant: MaybeSignal, #[prop(optional, into)] dot: MaybeSignal, + #[prop(optional, into)] class: MaybeSignal, children: Children, ) -> impl IntoView { let theme = use_theme(Theme::light); @@ -51,9 +59,12 @@ pub fn Badge( value.to_string() } }); + let ssr_class = ssr_class(&class); view! {
impl IntoView { +pub fn BreadcrumbItem( + #[prop(optional, into)] class: MaybeSignal, + children: Children, +) -> impl IntoView { let breadcrumb_separator = use_breadcrumb_separator(); + let ssr_class = ssr_class(&class); view! {
  • - {children()} + + {children()} + {move || breadcrumb_separator.0.get()} diff --git a/src/breadcrumb/mod.rs b/src/breadcrumb/mod.rs index b311bee..ef7e5ee 100644 --- a/src/breadcrumb/mod.rs +++ b/src/breadcrumb/mod.rs @@ -1,7 +1,12 @@ mod breadcrumb_item; mod theme; -use crate::{use_theme, utils::mount_style, Theme}; +use crate::utils::dyn_classes; +use crate::{ + use_theme, + utils::{mount_style, ssr_class}, + Theme, +}; pub use breadcrumb_item::BreadcrumbItem; use leptos::*; pub use theme::BreadcrumbTheme; @@ -9,6 +14,7 @@ pub use theme::BreadcrumbTheme; #[component] pub fn Breadcrumb( #[prop(default = MaybeSignal::Static("/".to_string()),into)] separator: MaybeSignal, + #[prop(optional, into)] class: MaybeSignal, children: Children, ) -> impl IntoView { mount_style("breadcrumb", include_str!("./breadcrumb.css")); @@ -31,9 +37,15 @@ pub fn Breadcrumb( }); css_vars }); + let ssr_class = ssr_class(&class); view! { -