From cf26965f66c7281d82e46d36721ed2f5a64e995e Mon Sep 17 00:00:00 2001 From: luoxiao Date: Tue, 7 Nov 2023 17:43:28 +0800 Subject: [PATCH 1/2] feat: add breadcrumb component --- demo/src/app.rs | 1 + demo/src/pages/breadcrumb/mod.rs | 54 +++++++++++++++++++++++++++++++ demo/src/pages/components.rs | 6 +++- demo/src/pages/mod.rs | 2 ++ src/breadcrumb/breadcrumb.css | 18 +++++++++++ src/breadcrumb/breadcrumb_item.rs | 17 ++++++++++ src/breadcrumb/mod.rs | 29 +++++++++++++++++ src/lib.rs | 2 ++ 8 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 demo/src/pages/breadcrumb/mod.rs create mode 100644 src/breadcrumb/breadcrumb.css create mode 100644 src/breadcrumb/breadcrumb_item.rs create mode 100644 src/breadcrumb/mod.rs diff --git a/demo/src/app.rs b/demo/src/app.rs index 521d882..c61b815 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -75,6 +75,7 @@ fn TheRouter() -> impl IntoView { + diff --git a/demo/src/pages/breadcrumb/mod.rs b/demo/src/pages/breadcrumb/mod.rs new file mode 100644 index 0000000..1b6cdb5 --- /dev/null +++ b/demo/src/pages/breadcrumb/mod.rs @@ -0,0 +1,54 @@ +use crate::components::{Demo, DemoCode}; +use leptos::*; +use prisms::highlight_str; +use thaw::*; + +#[component] +pub fn BreadcrumbPage() -> impl IntoView { + view! { +
+

"Breadcrumb"

+ + + + "Rust" + + + "Leptos" + + + "UI" + + + "Thaw" + + + + + "Rust" + + + "Leptos" + + + "UI" + + + "Thaw" + + + "#, + "rust" + ) + > + + "" + + +
+ } +} diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 52a2172..426bcea 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -52,7 +52,7 @@ impl IntoView for MenuGroupOption { fn into_view(self) -> View { let Self { label, children } = self; view! { - + { children.into_iter().map(|v| v.into_view()).collect_view() } @@ -167,6 +167,10 @@ fn gen_menu_data() -> Vec { MenuGroupOption { label: "Navigation Components".into(), children: vec![ + MenuItemOption { + value: "breadcrumb".into(), + label: "Breadcrumb".into(), + }, MenuItemOption { value: "loading-bar".into(), label: "Loading Bar".into(), diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs index e52e8e2..28548bb 100644 --- a/demo/src/pages/mod.rs +++ b/demo/src/pages/mod.rs @@ -2,6 +2,7 @@ mod alert; mod auto_complete; mod avatar; mod badge; +mod breadcrumb; mod button; mod card; mod checkbox; @@ -37,6 +38,7 @@ pub use alert::*; pub use auto_complete::*; pub use avatar::*; pub use badge::*; +pub use breadcrumb::*; pub use button::*; pub use card::*; pub use checkbox::*; diff --git a/src/breadcrumb/breadcrumb.css b/src/breadcrumb/breadcrumb.css new file mode 100644 index 0000000..65a26dd --- /dev/null +++ b/src/breadcrumb/breadcrumb.css @@ -0,0 +1,18 @@ +.thaw-breadcrumb > ul { + list-style: none; + padding: 0; + margin: 0; +} + +.thaw-breadcrumb-item { + display: inline-flex; + align-items: center; +} + +.thaw-breadcrumb-item__separator { + margin: 0 8px; +} + +.thaw-breadcrumb-item__separator:last-child { + display: none; +} diff --git a/src/breadcrumb/breadcrumb_item.rs b/src/breadcrumb/breadcrumb_item.rs new file mode 100644 index 0000000..d269dbb --- /dev/null +++ b/src/breadcrumb/breadcrumb_item.rs @@ -0,0 +1,17 @@ +use super::use_breadcrumb_separator; +use leptos::*; + +#[component] +pub fn BreadcrumbItem(children: Children) -> impl IntoView { + let breadcrumb_separator = use_breadcrumb_separator(); + view! { +
  • + + {children()} + + + {move || breadcrumb_separator.0.get()} + +
    • + } +} diff --git a/src/breadcrumb/mod.rs b/src/breadcrumb/mod.rs new file mode 100644 index 0000000..56aeced --- /dev/null +++ b/src/breadcrumb/mod.rs @@ -0,0 +1,29 @@ +mod breadcrumb_item; + +pub use breadcrumb_item::BreadcrumbItem; +use leptos::*; + +use crate::mount_style; + +#[component] +pub fn Breadcrumb( + #[prop(default = MaybeSignal::Static("/".to_string()),into)] separator: MaybeSignal, + children: Children, +) -> impl IntoView { + mount_style("breadcrumb", include_str!("./breadcrumb.css")); + provide_context(BreadcrumbSeparatorInjection(separator)); + view! { + + } +} + +#[derive(Clone)] +pub(crate) struct BreadcrumbSeparatorInjection(MaybeSignal); + +pub(crate) fn use_breadcrumb_separator() -> BreadcrumbSeparatorInjection { + expect_context() +} diff --git a/src/lib.rs b/src/lib.rs index 666a758..094e70f 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -2,6 +2,7 @@ mod alert; mod auto_complete; mod avatar; mod badge; +mod breadcrumb; mod button; mod card; mod checkbox; @@ -41,6 +42,7 @@ pub use alert::*; pub use auto_complete::*; pub use avatar::*; pub use badge::*; +pub use breadcrumb::*; pub use button::*; pub use card::*; pub use checkbox::*; From 7326c4ba9531430491daf20db0e2b4c11ed09e32 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Tue, 7 Nov 2023 22:28:02 +0800 Subject: [PATCH 2/2] feat: breadcrumb style --- demo/gh-pages | 1 + demo/src/pages/breadcrumb/mod.rs | 44 ++++++++++++++++++++++--------- src/breadcrumb/breadcrumb.css | 25 +++++++++++++++++- src/breadcrumb/breadcrumb_item.rs | 4 +-- src/breadcrumb/mod.rs | 30 ++++++++++++++++----- src/breadcrumb/theme.rs | 26 ++++++++++++++++++ src/theme/mod.rs | 9 ++++--- 7 files changed, 113 insertions(+), 26 deletions(-) create mode 160000 demo/gh-pages create mode 100644 src/breadcrumb/theme.rs diff --git a/demo/gh-pages b/demo/gh-pages new file mode 160000 index 0000000..faaa4df --- /dev/null +++ b/demo/gh-pages @@ -0,0 +1 @@ +Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b diff --git a/demo/src/pages/breadcrumb/mod.rs b/demo/src/pages/breadcrumb/mod.rs index 1b6cdb5..0a737a8 100644 --- a/demo/src/pages/breadcrumb/mod.rs +++ b/demo/src/pages/breadcrumb/mod.rs @@ -10,18 +10,9 @@ pub fn BreadcrumbPage() -> impl IntoView {

    "Breadcrumb"

    - - "Rust" - - - "Leptos" - - - "UI" - - - "Thaw" - + "Leptos" + "UI" + "Thaw" impl IntoView { r#" - "Rust" + "Leptos" + + "UI" + + + "Thaw" + + + "#, + "rust" + ) + > + + "" + + +

    "Separator"

    + + + "Leptos" + "UI" + "Thaw" + + "Leptos" diff --git a/src/breadcrumb/breadcrumb.css b/src/breadcrumb/breadcrumb.css index 65a26dd..0cff1ff 100644 --- a/src/breadcrumb/breadcrumb.css +++ b/src/breadcrumb/breadcrumb.css @@ -11,8 +11,31 @@ .thaw-breadcrumb-item__separator { margin: 0 8px; + color: var(--thaw-font-color); } -.thaw-breadcrumb-item__separator:last-child { +.thaw-breadcrumb + .thaw-breadcrumb-item:last-child + .thaw-breadcrumb-item__separator { display: none; } + +.thaw-breadcrumb-item__link { + padding: 4px; + border-radius: 3px; + transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), + color 0.3s cubic-bezier(0.4, 0, 0.2, 1); + color: var(--thaw-font-color); + cursor: pointer; +} + +.thaw-breadcrumb + .thaw-breadcrumb-item:not(:last-child) + .thaw-breadcrumb-item__link:hover { + color: var(--thaw-font-color-hover); + background-color: var(--thaw-background-color-hover); +} + +.thaw-breadcrumb .thaw-breadcrumb-item:last-child .thaw-breadcrumb-item__link { + color: var(--thaw-font-color-hover); +} diff --git a/src/breadcrumb/breadcrumb_item.rs b/src/breadcrumb/breadcrumb_item.rs index d269dbb..9926710 100644 --- a/src/breadcrumb/breadcrumb_item.rs +++ b/src/breadcrumb/breadcrumb_item.rs @@ -6,9 +6,7 @@ pub fn BreadcrumbItem(children: Children) -> impl IntoView { let breadcrumb_separator = use_breadcrumb_separator(); view! {
  • - - {children()} - + {children()} {move || breadcrumb_separator.0.get()} diff --git a/src/breadcrumb/mod.rs b/src/breadcrumb/mod.rs index 56aeced..a1fcbc0 100644 --- a/src/breadcrumb/mod.rs +++ b/src/breadcrumb/mod.rs @@ -1,9 +1,10 @@ mod breadcrumb_item; +mod theme; +use crate::{mount_style, use_theme, Theme}; pub use breadcrumb_item::BreadcrumbItem; use leptos::*; - -use crate::mount_style; +pub use theme::BreadcrumbTheme; #[component] pub fn Breadcrumb( @@ -11,12 +12,29 @@ pub fn Breadcrumb( children: Children, ) -> impl IntoView { mount_style("breadcrumb", include_str!("./breadcrumb.css")); + let theme = use_theme(Theme::light); + let css_vars = create_memo(move |_| { + let mut css_vars = String::new(); + theme.with(|theme| { + css_vars.push_str(&format!( + "--thaw-font-color: {};", + theme.breadcrumb.item_font_color + )); + css_vars.push_str(&format!( + "--thaw-font-color-hover: {};", + theme.breadcrumb.item_font_color_hover + )); + css_vars.push_str(&format!( + "--thaw-background-color-hover: {};", + theme.breadcrumb.item_background_color_hover + )); + }); + css_vars + }); provide_context(BreadcrumbSeparatorInjection(separator)); view! { -