Merge pull request #6 from thaw-ui/feat/breadcrumb

Feat/breadcrumb

demo/gh-pages

@@ -0,0 +1 @@
+Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b

demo/src/app.rs

@@ -75,6 +75,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path="/tag" view=TagPage/>
                     <Route path="/upload" view=UploadPage/>
                     <Route path="/loading-bar" view=LoadingBarPage/>
+                    <Route path="/breadcrumb" view=BreadcrumbPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

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! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Breadcrumb"</h1>
+            <Demo>
+                <Breadcrumb>
+                    <BreadcrumbItem>"Leptos"</BreadcrumbItem>
+                    <BreadcrumbItem>"UI"</BreadcrumbItem>
+                    <BreadcrumbItem>"Thaw"</BreadcrumbItem>
+                </Breadcrumb>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Breadcrumb>
+                        <BreadcrumbItem>
+                            "Leptos"
+                        </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "UI"
+                        </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "Thaw"
+                        </BreadcrumbItem>
+                    </Breadcrumb>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"Separator"</h3>
+            <Demo>
+                <Breadcrumb separator=">">
+                    <BreadcrumbItem>"Leptos"</BreadcrumbItem>
+                    <BreadcrumbItem>"UI"</BreadcrumbItem>
+                    <BreadcrumbItem>"Thaw"</BreadcrumbItem>
+                </Breadcrumb>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Breadcrumb separator=">">
+                        <BreadcrumbItem>
+                            "Leptos"
+                        </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "UI"
+                        </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "Thaw"
+                        </BreadcrumbItem>
+                    </Breadcrumb>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/components.rs

@@ -52,7 +52,7 @@ impl IntoView for MenuGroupOption {
     fn into_view(self) -> View {
         let Self { label, children } = self;
         view! {
-            <MenuGroup label>
+            <MenuGroup label=format!("{label} ({})", children.len())>
                 {
                     children.into_iter().map(|v| v.into_view()).collect_view()
                 }
@@ -167,6 +167,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
         MenuGroupOption {
             label: "Navigation Components".into(),
             children: vec![
+                MenuItemOption {
+                    value: "breadcrumb".into(),
+                    label: "Breadcrumb".into(),
+                },
                 MenuItemOption {
                     value: "loading-bar".into(),
                     label: "Loading Bar".into(),

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::*;

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);
+}

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! {
+        <li class="thaw-breadcrumb-item">
+            <span class="thaw-breadcrumb-item__link">{children()}</span>
+            <span class="thaw-breadcrumb-item__separator">
+                {move || breadcrumb_separator.0.get()}
+            </span>
+        </li>
+    }
+}

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<String>,
+    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! {
+        <nav class="thaw-breadcrumb" style=move || css_vars.get()>
+            <ul>{children()}</ul>
+        </nav>
+    }
+}
+
+#[derive(Clone)]
+pub(crate) struct BreadcrumbSeparatorInjection(MaybeSignal<String>);
+
+pub(crate) fn use_breadcrumb_separator() -> BreadcrumbSeparatorInjection {
+    expect_context()
+}

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(),
+        }
+    }
+}

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::*;

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,
+    AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, ColorPickerTheme,
-    MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme, TableTheme,
+    InputTheme, MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme,
-    TagTheme, UploadTheme,
+    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(),
         }
     }
 }