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/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..0a737a8 --- /dev/null +++ b/demo/src/pages/breadcrumb/mod.rs @@ -0,0 +1,72 @@ +use crate::components::{Demo, DemoCode}; +use leptos::*; +use prisms::highlight_str; +use thaw::*; + +#[component] +pub fn BreadcrumbPage() -> impl IntoView { + view! { +
+

"Breadcrumb"

+ + + "Leptos" + "UI" + "Thaw" + + + + "Leptos" + + + "UI" + + + "Thaw" + + + "#, + "rust" + ) + > + + "" + + +

"Separator"

+ + + "Leptos" + "UI" + "Thaw" + + + + "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..0cff1ff --- /dev/null +++ b/src/breadcrumb/breadcrumb.css @@ -0,0 +1,41 @@ +.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; + color: var(--thaw-font-color); +} + +.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 new file mode 100644 index 0000000..9926710 --- /dev/null +++ b/src/breadcrumb/breadcrumb_item.rs @@ -0,0 +1,15 @@ +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..a1fcbc0 --- /dev/null +++ b/src/breadcrumb/mod.rs @@ -0,0 +1,47 @@ +mod breadcrumb_item; +mod theme; + +use crate::{mount_style, use_theme, Theme}; +pub use breadcrumb_item::BreadcrumbItem; +use leptos::*; +pub use theme::BreadcrumbTheme; + +#[component] +pub fn Breadcrumb( + #[prop(default = MaybeSignal::Static("/".to_string()),into)] separator: MaybeSignal, + 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! { + + } +} + +#[derive(Clone)] +pub(crate) struct BreadcrumbSeparatorInjection(MaybeSignal); + +pub(crate) fn use_breadcrumb_separator() -> BreadcrumbSeparatorInjection { + expect_context() +} diff --git a/src/breadcrumb/theme.rs b/src/breadcrumb/theme.rs new file mode 100644 index 0000000..96f196f --- /dev/null +++ b/src/breadcrumb/theme.rs @@ -0,0 +1,26 @@ +use crate::theme::ThemeMethod; + +#[derive(Clone)] +pub struct BreadcrumbTheme { + pub item_font_color: String, + pub item_font_color_hover: String, + pub item_background_color_hover: String, +} + +impl ThemeMethod for BreadcrumbTheme { + fn light() -> Self { + Self { + item_font_color: "#767c82".into(), + item_font_color_hover: "#333639".into(), + item_background_color_hover: "#2e333817".into(), + } + } + + fn dark() -> Self { + Self { + item_font_color: "#ffffff85".into(), + item_font_color_hover: "#ffffffd1".into(), + item_background_color_hover: "#ffffff1f".into(), + } + } +} 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::*; diff --git a/src/theme/mod.rs b/src/theme/mod.rs index c866efe..8efbbe9 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -3,9 +3,9 @@ mod common; use self::common::CommonTheme; use crate::{ mobile::{NavBarTheme, TabbarTheme}, - AlertTheme, AutoCompleteTheme, AvatarTheme, ButtonTheme, ColorPickerTheme, InputTheme, - MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme, TableTheme, - TagTheme, UploadTheme, + AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, ColorPickerTheme, + InputTheme, MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme, + TableTheme, TagTheme, UploadTheme, }; use leptos::*; @@ -35,6 +35,7 @@ pub struct Theme { pub tabbar: TabbarTheme, pub auto_complete: AutoCompleteTheme, pub color_picker: ColorPickerTheme, + pub breadcrumb: BreadcrumbTheme, } impl Theme { @@ -59,6 +60,7 @@ impl Theme { tabbar: TabbarTheme::light(), auto_complete: AutoCompleteTheme::light(), color_picker: ColorPickerTheme::light(), + breadcrumb: BreadcrumbTheme::light(), } } pub fn dark() -> Self { @@ -82,6 +84,7 @@ impl Theme { tabbar: TabbarTheme::dark(), auto_complete: AutoCompleteTheme::dark(), color_picker: ColorPickerTheme::dark(), + breadcrumb: BreadcrumbTheme::dark(), } } }